FUN WITH CODING
FLASK, HTML, SQL MINI PROJECT

ABOUT THIS PROJECT

---

This project looks at creating a basic login webpage page followed by a basic webpage with user input, a table and a graph. Pushing and pulling data from a database using Python with SQLite, Flask, HTML and CSS. The finished program will run from a local host and has been designed to help develop skills for a college or university level project.

PROJECT STEPS

---

PART 1: BEFORE WE START
1: CREATE THE CORRECT STRUCTURE TO SAVE YOUR FILES - NEEDS TO BE EXACT
2: TEST THAT YOU CAN RUN A SMIPLE 'HELLO WORLD' PROGRAM

PART 2: BUILD THE WEBSITE
1: CREATE A BASIC CSS STYLE SHEET FOR THE WEBPAGES
2: BUILD THE LOGIN PAGE USING HTML
3: BUILD THE MAIN PAGE USING HTML

PART 3: CONNECT WITH PYTHON
1: USER LOGIN
2: USER ENTRY ON MAIN PAGE
​3: DISPLAY DETAILS IN TABLE ON MAIN PAGE

PART 1: DATABASE
1: BUILD THE USER LOGIN TABLE
2: BUILD THE DATA TABLE

PART 1.1: CREATE THE FOLDER STRUCTURE

---

This project uses many separate files that are related to each other, it is important hat before you start to code you set up the correct folder structure to save your files. For example your route folder should hold you main Python File, a folder named 'templates' should hold your HTML pages. An example can be seen below.

As can be seen above the main folder holds the Python File, inside the main folder is a folder called 'static' this holds two more folders, one called 'css' which holds the css files and one called 'images' which holds the images. In the main folder there is also a js folder, this one is not needed if you do not use any Javascript.

In the image below you can see that all of the HTML files should be held in a folder called templates. Note: if you set up your website on software such as Adobe Dreamweaver, it will automatically set up this file structure for you, however you will need to save your Python file in the correct folder, the route folder. 

PART 1.2:  'HELLO WORLD' TEST

---

After you have installed Flask you are ready to build your first website with Python and Flask. Copy the code from below. 

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
   return("Hello World !")

if __name__ == "__main__":
   app.run(debug=True)

When you run your code you should get a message in Python editor similar to below:
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
After this message appears your website should be ready to open in your web-browser, note the number shown in the python editor ends in 5000. Type 'localhost: 5000' or http://127.0.0.1:5000 the browser URL and your website should appear.

PART 3: CONNECT WITH PYTHON

---

Click to set custom HTML