MP5 on Flask Toolbox: CSS and Deployment

Procfile

@@ -0,0 +1 @@
+web: python3 flask_app.py

README.md

@@ -1,6 +1,14 @@
 # Toolbox-Flask
 Web Apps Project Toolbox starter code
-
 Full instructions on [the course website](https://sd17spring.github.io//toolboxes/web-apps/)
-
 This toolbox exercise was developed by [Patrick Huston](https://github.com/phuston)
+
+
+
+The code takes a list of lists that serves as the database to the website user information.
+This database can be found in database.py in the main directory.
+
+The user profiles can be accessed both through the index page and through the URL.
+Each user's profile page is indexed as /profile/user_number.
+
+Website URL: http://my-intrusive-website.herokuapp.com/

database.py

@@ -0,0 +1,9 @@
+"""
+A database for all the users. It is a list of lists, containing the firstname,
+lastname and age information for the user.
+
+Author: Onur Talu
+"""
+
+user_db = [['Inigo', 'Montoya', '10'], ['Onur', 'Talu', '5'],
+           ['Evan', 'New-Schmidt', '19'], ['Colvin', 'Chapman', '19']]

flask_app.py

@@ -1,3 +1,96 @@
 """
-Put your Flask app code here.
-"""
+Produces a website that has an index page, and profiles for three users,
+as well as a "hello" page. The profiles can only be reached if the user
+inputs correct information about themselves in the index page.
+
+After running in the terminal, go to 127.0.0.1:5000 to access the index page,
+and ~/hello/<your_name> to reach the "hello" page.
+
+Author: Onur Talu
+"""
+
+import os
+from flask import Flask, request
+from flask import render_template, redirect, url_for
+import database
+app = Flask(__name__)
+
+user_db = database.user_db
+
+
+@app.route('/')
+def index():
+    """
+    Renders the template index.html, which directs the user to a page with a
+    form that redirects the user to a profile or error page, dpeending on the
+    input.
+    """
+    return render_template('index.html')
+
+
+@app.route('/hello/')
+@app.route('/hello/<name>')
+def hello(name=None):
+    """
+    The "hello" page. Can be accessed through the URL.
+    """
+    return render_template('hello.html', name=name)
+
+
+@app.route('/login', methods=['POST', 'GET'])
+def login():
+    """
+    Requests the information provided by the user and compares it to the
+    database, redirects the user to a profile page or an error page,
+    depending on the input.
+    """
+    if request.method == 'POST':
+        inputfn = request.form['firstname']
+        inputln = request.form['lastname']
+        inputage = request.form['age']
+        for i in range(len(user_db)):  # checks if the credentials check out
+            if user_db[i] == [inputfn, inputln, inputage]:
+                print('Valid Login')
+                return redirect(url_for('profile', user_no=str(i+1)))
+        print('Invalid Login')
+        return redirect(url_for('error_page'))
+    else:
+        print('Method is not Post')  # Useful to keep when debugging
+        return redirect(url_for('we_messed_up'))
+
+
+@app.route('/sorry')
+def sorry():
+    """
+    Returns an error page that notes that the problem is not in the input of
+    the user, but in the code and apologizes.
+    """
+    return render_template('we_messed_up.html')
+
+
+@app.route('/error_page')
+def error_page():
+    """
+    Error page for when the input from the user does not match the database.
+    """
+    return render_template('error_page.html')
+
+
+@app.route('/profile')
+@app.route('/profile/<user_no>')
+def profile(user_no=None):
+    """
+    Returns the profile page for the user.
+    """
+    user_info = user_db[int(user_no)-1]
+    info_dict = {'firstname': user_info[0],
+                 'surname': user_info[1],
+                 'age': user_info[2]}
+    return render_template('profile.html', **info_dict)
+
+
+if __name__ == '__main__':
+    app.debug = True  # updates the page as the code is saved
+    HOST = '0.0.0.0' if 'PORT' in os.environ else '127.0.0.1'
+    PORT = int(os.environ.get('PORT', 443))
+    app.run(host=HOST, port=PORT)

requirements.txt

@@ -0,0 +1 @@
+Flask

runtime.txt

@@ -0,0 +1 @@
+python-3.6.1

static/index_style.css

@@ -0,0 +1,8 @@
+body {
+    background-color: lightblue;
+}
+
+h1 {
+    color: navy;
+    margin-left: 20px;
+}

templates/error_page.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>
+        We're sorry :(
+    </title>
+
+    <style>
+
+    body {
+      margin-left: 15px;
+        background-color: lightblue;
+    }
+    h1 {
+        color: navy;
+        font-size: 40px;
+    }
+    img {
+        float: right;
+        margin-right: 15px;
+    }
+    </style>
+
+</head>
+
+<img src="http://imgs.xkcd.com/comics/im_sorry.png" alt="Sorry, not sorry">
+
+
+<body>
+    <h1>Sorry</h1>
+    <p>It appears that we don't have any users, matching your credentials. <br>
+    Either you did not enter your credentials right, or you are a new user.<br><br>
+    Considering that we haven't figured out how to register a new user,
+    if you are a new potential user, we would suggest you to stop using our services.<br><br>
+    Thank you for your business!</p>
+</body>
+
+<video src="https://media.giphy.com/media/aQXMVdhMErR3a/giphy.gif">
+
+</html>

templates/hello.html

@@ -0,0 +1,7 @@
+<!doctype html>
+<title>Hello from Flask</title>
+{% if name %}
+    <h1>Hello {{ name }}!</h1>
+{% else %}
+    <h1>Hello World!</h1>
+{% endif %}

templates/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+      <title>
+        A Small Hello
+    </title>
+
+<!-- <link rel="stylesheet" type="text/css" href="/static/index_style.css"> -->
+
+<style>
+      body {
+          background-color: lightblue;
+      }
+      h1 {
+          color: navy;
+          font-size: 40px;
+      }
+      h2 {
+          color: navy;
+          font-size: 18px;
+      }
+      form {
+          margin-left: 12px;
+          background-color: lightblue;
+      }
+      img {
+        /*width: 700px;
+        height: 400px;*/
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+</style>
+
+
+</head>
+
+<body>
+    <h1>Hello</h1>
+    <h2>Is it a SoftDes MP5 you are looking for?</h2>
+    <p>Please tell us about yourself:</p>
+
+    <img src="http://tinyurl.com/k6owoun">
+
+    <fieldset>
+    <form action="/login" method="post"
+        <legend> We are definitely not storing this information.<legend><br>
+        First name:<br>
+        <input type="text" name="firstname"><br>
+        Last name:<br>
+        <input type="text" name="lastname"><br>
+        Age: <br>
+        <input type="text" name="age"><br>
+        Your favorite SoftDes Ninja?<br>
+        <input type="text" name="ninja"><br><br>
+        <input type="submit" value="Submit">
+    </form>
+    </fieldset>
+</body>
+
+</html>

templates/login.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>
+        Login
+    </title>
+</head>
+
+<body>
+    <h1>Helllllooooooooooooooooooooooo...again</h1>
+    Stuff
+</body>
+
+</html>

templates/profile.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>
+        Homepage
+    </title>
+    <style>
+    body {
+        background-color: lightblue;
+    }
+    h1 {
+        color: navy;
+        font-size: 40px;
+    }
+  </style>
+</head>
+
+<body>
+    <h1>Hello {{firstname}}!</h1>
+    Firstname: {{firstname}} <br>
+    Surname: {{surname}} <br>
+    Age: {{age}} <br>
+    Favorite NINJA: Patrick Huston<br><br><br>
+</body>
+
+<video alt="Juli hello from the other side GIF" src="https://media3.giphy.com/media/d2Z2ZIzn7sa4W4OA/giphy.mp4" poster="https://media3.giphy.com/media/d2Z2ZIzn7sa4W4OA/giphy_s.gif" autoplay="" loop="" playsinline="" style="width: 480px; height: 270px; left: 0px; top: 0px;"></video>
+
+</html>

templates/we_messed_up.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>
+        We're sorry :(
+    </title>
+</head>
+
+<body>
+    <h1>Sorry</h1>
+    It appears that we messed up. <br>
+    We probably broke the architecture, while trying to make our website better
+    for you. <br>
+    We apologize on behalf of our non-existing company.
+</body>
+
+</html>