lundi 2 mai 2016

Website using SQLite, front-end newbie

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