I am trying to create a website that utilizes 2 databases with relationship via SQL and for some reason I'm not able to open second link "Activities Table" aka @(/all_activities). Looks like I've fixed all bugs in PyCharm, however there should be a logical error. Funny thing is that I've copied the teacher's example and replaced all necessary variables, but there's still a problem somewhere. Will appreciate any input. I know that this method of setting up a website is very crooked, but it's the format of my teacher, so i have no choice but to stick with it. Sorry for a newbie question, we've all been there
My Structure:
activities-2
my_app
source
__init__.py
models.py
views.py
templates
home.html
__init__.py
project.sqlite
run.py
Code Below
run.py
from my_app import app
"""
How to run a Flask application:
---------------------------
1) Make sure the server is not already running:
Go to http://127.0.0.1:5000
It should give you a message "Unable to Connect"
2) Run this file by either clicking F5 or the green triangle icon on top
3) Go again to http://127.0.0.1:5000
"""
app.run()
Source/models
# -*- coding: utf-8 -*-
from my_app import db
# ----------------- SQL Tables -----------------
class Activities(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(255))
description = db.Column(db.String(300))
duration_hours = db.Column(db.Float)
price = db.Column(db.Float)
type_id = db.Column(db.Integer, db.ForeignKey('types.id'))
description_long = db.Column(db.String(400))
image = db.Column(db.String(500))
maps = db.Column(db.String(1000))
reviews = db.Column(db.Integer)
location = db.Column(db.String(100))
types = db.relationship(
'Types', backref=db.backref('all_activities', lazy='dynamic')
)
class Types(db.Model):
id = db.Column(db.Integer, primary_key=True)
type = db.Column(db.String(100))
season = db.Column(db.String(100))
ratings = db.Column(db.Integer)
visitors_per_month = db.Column(db.Integer)
age_restriction = db.Column(db.Boolean)
Source/views
from flask import request, Blueprint
from flask import render_template
from sqlalchemy.orm.util import join
my_view = Blueprint('my_view', __name__)
from my_app.source.models import Activities, Types
#-------------------- Home Page Handler --------------------
@my_view.route('/')
@my_view.route('/home')
def home():
return render_template('home.html')
#-------------------- Activities Handler -------------------- (For all)
@my_view.route('/all_activities', methods=['GET', 'POST'])
@my_view.route('/all_activities/<int:page>')
def all_activities(page=1):
header = """
<html>
<head>
<title>All Activities</title>
</head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: green;
}
.active {
background-color:#4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a href="">Home</a></li>
<li><a class = active href="">Activities Table</a></li>
</ul>
<body background="http://ift.tt/1Y4sSDI">
</body>
<style>
table, th, td {
border: 3px solid black;
border-collapse: collapse;
padding-left: 10px;
padding-right: 10px;
}
th {
padding: 5px;
text-align: center;
color: green;
}
</style>
<body>
<table style="width:100%">
<caption><h1>Activities List</h1></caption>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Duration (Hours)</th>
<th>Price</th>
<th>Type</th>
<th>Reviews</th>
<th>Location</th>
<th>Ratings</th>
</tr>
</body>
"""
footer = """
</table></body>
"""
all_activities = Activities.query.all()
message_out = ""
for activity in all_activities:
message_out += '<tr>'+\
'<td align="center">'+str(activity.id)+'</td>'+\
'<td>'+activity.name+'</td>'+\
'<td>'+str(activity.description)+'</td>'+\
'<td>'+str(activity.duration_hours)+'</td>'+\
'<td>'+str(activity.price)+'</td>'+\
'<td>'+activity.types.type+'</td>'+\
'<td>'+str(activity.reviews)+'</td>'+\
'<td>'+str(activity.lcoation)+'</td>'+\
'<td>'+activity.types.ratings+'</td>'+\
'</tr>'
return header+message_out+footer
#-------------------- Show Key Handler Activity-------------------- (For single page)
#Parameters: Key, integer
@my_view.route('/show/<key>')
def get_message(key):
get_message = Activities.query.get_or_404(key)
header = """
<head>
<title>Activities</title>
<style>
body { background-image: url("http://ift.tt/1Y4sSDI");
background-size: 1000px 700px;}
</style>
</head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: green;
}
.active {
background-color:#4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Activities Table</a></li>
<li><a class = active href="">Activity Information</a></li>
</ul>
</style>
<body>
"""
message = '<table><col width="250"> '
message += '<td><img src='+get_message.image+' style="width:500px;height:400px; align="middle""></td>'
message += '<p><b>Name:</b> ' + str(get_message.name)+'</p>'
message += '<p><b>Description:</b> ' + get_message.description_long+'</p>'
message += '<p><b>Price per person:</b> ' + str(get_message.price)+ "$"+'</p>'
message += '<p><b>Duration hours:</b> ' + str(get_message.duration_hours)+'</p>'
message += '<p><b>Reviews number:</b> ' + str(get_message.reviews)+'</p>'
message += '<p><b>Location:</b> ' + str(get_message.lcoation)+'</p>'
message += '<p><b>Map:</b> ' + str(get_message.map)+'</p></td>'
footer = """
</table>
</body>
"""
return header + message + footer
my_app/init.py
import os
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from my_app.source.views import my_view
app = Flask(__name__)
file_path = os.path.abspath(os.getcwd())+"/project.sqlite"
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///'+file_path
db = SQLAlchemy(app)
app.register_blueprint(my_view)
db.create_all()
Templates/home.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bay Area Activities</title>
<style>
body { background-image: url("http://ift.tt/1Y4sSDI");
background-size: 1000px 700px;}
</style>
</head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: green;
}
.active {
background-color:#4CAF50;
}
</style>
<body>
<ul>
<li><a class = active href="">Home</a></li>
<li><a href="">Activites Table</a></li>
</ul>
<body bgcolor=“FF0000”>
<h1 style= "text-align: center; color: green; font-size: 50px;font-family: Zapfino ">Bay Area Activities</h1>
<p style = "color: #ff6666 ; font-size: 30px; font-family: Apple Chancery "> Welcome to the Bay Area Activities Guidance Site. We are here to show you the best locations to see in the Bay Area!
<p style ="color: #ff0066; font-size: 26px; font-family: Impact "> What can be better than a surfing class in Pacific Ocean? What famous locations can you show your friends while they're visiting you? How to plan a perfect trip for your friends or family?
</p>
<p style= "text-align: center; color:#ff9933; font-size:37px; font-family: Courier New" > All answers are on our website! Check it out!
</p>
<p style="text-align: center; color= #ff0066; font-size:16px; font-family: Comic Sans MS">
<a href="http://ift.tt/1rPW5IJ">Show All Activities</a>
</p>
<p style="text-align: center; color= #ff0066; font-size:16px; font-family: Comic Sans MS">
<a href="http://www.sfgate.com/">Latest News About SF Activities</a>
</p>
<p style="text-align: center; color= #ff0066; font-size:16px; font-family: Comic Sans MS">
<a href="http://ift.tt/1Y4sSDK"> Yelp Reviews for SF Must See List</a>
</p>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
/* Slideshow container /
.slideshow-container {
max-width: 100px;
position: relative;
margin: auto;
}
/ Next & previous buttons /
.prev, .next {
cursor: pointer;
position: absolute;
top: 0;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/ Position the "next button" to the right /
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/ On hover, add a black background color with a little bit see-through /
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/ Caption text /
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/ Number text (1/4 etc) /
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/ The dots/bullets/indicators /
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/ Fading animation /
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/ On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.slprev, .slnext,.text {font-size: 11px}
}
</style>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="http://ift.tt/1rPW5IL" style="width:100%">
<div class="text">SAN FRANCISO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="http://ift.tt/1Y4sRiZ" style="width:100%">
<div class="text">SAN JOSE</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="http://ift.tt/1rPW3QZ" style="width:100%">
<div class="text">MONTEREY BAY</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="http://ift.tt/1Y4sRj1" style="width:100%">
<div class="text">HALF MOON BAY</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length} ;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire