Difference between revisions of "Creating a Flask Web App"

From TRCCompSci - AQA Computer Science
Jump to: navigation, search
(Adding MySQL Support)
 
(3 intermediate revisions by the same user not shown)
Line 6: Line 6:
 
[[File:Webapp1.png]]
 
[[File:Webapp1.png]]
  
Download this [https://studentthomrothac-my.sharepoint.com/:u:/g/personal/wayne_jones_thomroth_ac_uk/EQ8i32igVu5GmMqEm8g_o3YBJ7IL3Hd0oteHBbq4MW_i7Q?e=1cVU7T zip file] and extract all of the contents to your new folder:
+
Download this [https://studentthomrothac-my.sharepoint.com/:u:/g/personal/wayne_jones_thomroth_ac_uk/EcIFglOBh-BBtpe-94DjpcsB3HvJ8onQlVr1Cx7heXPcKQ?e=cFG6Mp zip file] and extract all of the contents to your new folder:
  
 
[[File:Webapp.png]]
 
[[File:Webapp.png]]
Line 56: Line 56:
 
[[File:Vswebapp3.png]]
 
[[File:Vswebapp3.png]]
  
Now download this [https://studentthomrothac-my.sharepoint.com/:u:/g/personal/wayne_jones_thomroth_ac_uk/EQ8i32igVu5GmMqEm8g_o3YBJ7IL3Hd0oteHBbq4MW_i7Q?e=1cVU7T zip file] and extract its contents into this folder:
+
Now download this [https://studentthomrothac-my.sharepoint.com/:u:/g/personal/wayne_jones_thomroth_ac_uk/EcIFglOBh-BBtpe-94DjpcsB3HvJ8onQlVr1Cx7heXPcKQ?e=cFG6Mp zip file] and extract its contents into this folder:
  
 
[[File:Vswebapp6.png]]
 
[[File:Vswebapp6.png]]
Line 67: Line 67:
  
 
[[File:Vswebapp5.png]]
 
[[File:Vswebapp5.png]]
 
=Adding MySQL Support=
 
Download the following [https://studentthomrothac-my.sharepoint.com/:u:/g/personal/wayne_jones_thomroth_ac_uk/EXzDZfZyWLVCgnGiPAVXlb4B8v9UUGUOwcLB1GHQcVw-cQ?e=F1R6tv zip file] and extract it into your site-packages folder. If you are using your own machine installing flask-mysql an pymysql will do the same thing.
 
 
We need to run the USBWebserver, in College this must be on your compiled storage folder (download it [https://studentthomrothac-my.sharepoint.com/:u:/g/personal/wayne_jones_thomroth_ac_uk/EY8e-_0kHrNNs1r_Wh6IUKwBzb4zc-D5LGv5K5PA8MIY7g?e=VSUaFu HERE]). When you run the executable you should get 2 firewall messages, click allow. If you get no firewall messages on the first run, then your system is preventing it from running:
 
 
[[File:Webserver.png]]
 
 
This shows USBWebserver running and fully active. Now click PHPmyAdmin button to open PHPmyAdmin:
 
 
Now click on database and enter a name to create a new database:
 
 
You should now be able to add the following code to import MySQL and connect to a database:
 
<syntaxhighlight lang=python>
 
from flaskext.mysql import MySQL
 
 
mysql = MySQL()
 
 
# MySQL configurations
 
app.config['MYSQL_DATABASE_USER'] = 'root'
 
app.config['MYSQL_DATABASE_PASSWORD'] = 'usbw'
 
app.config['MYSQL_DATABASE_DB'] = 'Test'
 
app.config['MYSQL_DATABASE_HOST'] = 'localhost'
 
mysql.init_app(app)
 
 
conn = mysql.connect()
 
</syntaxhighlight>
 

Latest revision as of 11:59, 22 October 2019

Flask can be used to create a Web App, which can run from a server. You can obviously run this locally and use it as if it was fully live, this will allow you to develop the web app.

Setup - Simple Method

You will need to create a new folder for your web app:

Webapp1.png

Download this zip file and extract all of the contents to your new folder:

Webapp.png

Now open IDLE, and from the file menu select new file. Now type in the following code:

from flask import Flask

app = Flask(__name__)
 
@app.route("/")
def hello():
    return "Hello World!"
 
if __name__ == "__main__":
    app.run()

Save this has demo.py, and it must be in the folder you created:

Webapp3.png

If you run the module from IDLE it will display errors, you should be able to double click on the demo.py file in the folder:

Webapp4.png

Finally open up your web browser and view the location displayed above:

Webapp5.png

Setup - Visual Studio

Create a new project in Visual Studio, look in the python section and Flask:

Vswebapp.png

On your own machines, this will install all of the appropriate packages into your python installation if you select 'Install into Python'. However in College will will need to do a bit more, and instead choose 'install into virtual environment':

Vswebapp1.png

In College we will need see this window:

Vswebapp2.png

You can untick the install packages option, because this will fail on college computers.

Now, find the folder within your project folder:

Vswebapp3.png

Now download this zip file and extract its contents into this folder:

Vswebapp6.png

Now click start in Visual Studio, you should see something like this:

Vswebapp4.png

It should automatically open a browser, it should already point to your web app:

Vswebapp5.png