A Sample Approach to your Project

A Sample Approach to your Project An object-oriented interpreted programming language Python 3 :: Flask :: SQLite3 A micro web framework written in Python A public domain, barebones SQL database system Doug McGeehan

Your Development Environment Windows Client PuTTY Xming S&T CLC Machines Pre-installed in CLCs Linux Server Python 3 pip virtualenv

Outline 1. Fire up Xming server 2. PuTTY w/ X forwarding 3. Connect to CLC Linux 4. Firefox: test X forwarding 5. mkdir: A Blank Canvas 6. Python virtualenv 7. Installing Flask 8. Flask: Hello World! 9. Your Own Flask Server 10. Flask: Jinja2 Templating 11. Flask: HTML forms & HTTP requests 12. Beginner s SQLite

1. Fire up Xming server Start menu Type xming Find it Execute program Nothing happens, but it should be running

2. PuTTY w/ X forwarding Start menu Type putty Find it Open program Category >> Connection >> SSH >> X11 Verify box is ticked

3. Connecting to a CLC Linux Machine Select a server rcnnxcs213.managed.mst.edu 01 <= NN <= 40 https://it.mst.edu/services/linux/hostnames/ Verify X fowarding enabled Press Open (or Enter) Username + Password

4. Testing X forwarding with Firefox Let s test X fowarding is working. djmvfb@rc05xcs213:~$ Whatever precedes $ is your current working directory ~ is your home directory

4. Testing X forwarding with Firefox Let s test X fowarding is working. djmvfb@rc05xcs213:~$ firefox & Execute this command and immediate go into the background. Benefit: no second PuTTY window

4. Testing X forwarding with Firefox Let s test X fowarding is working. djmvfb@rc05xcs213:~$ firefox & Execute this command and immediate go into the background. Xming Benefit: no second PuTTY window

5. mkdir: A Blank Canvas for your Project djmvfb@rc05xcs213:~$ mkdir cs2300proj Make a directory (folder) for your project

5. mkdir: A Blank Canvas for your Project djmvfb@rc05xcs213:~$ mkdir cs2300proj djmvfb@rc05xcs213:~$ cd cs2300proj/ Navigate into said directory

5. mkdir: A Blank Canvas for your Project djmvfb@rc05xcs213:~$ mkdir cs2300proj djmvfb@rc05xcs213:~$ cd cs2300proj/ djmvfb@rc05xcs213:~/cs2300proj$ ~/cs2300proj is now your current working directory

6. Python virtualenv: Your Development Sandbox ~/cs2300proj$ virtualenv -p python3 venv New python executable in /mnt/dfs/djmvfb/users/ djmvfb/linuxhome/cs2300proj/venv/bin/python Installing setuptools, pip, wheel...done. ~/cs2300proj$ source venv/bin/activate (venv) ~/cs2300proj$

6. Python virtualenv: Your Development Sandbox ~/cs2300proj$ source venv/bin/activate (venv) ~/cs2300proj$ Remember this command and the (venv) prefix. You must be in that directory to execute it.

7. Installing Flask: a Python micro web framework (venv) ~/cs2300proj$ pip install flask Installs flask in your virtual environment Does not install globally on the server Benefit: no administrative privileges needed install libraries of different versions than those already on the system

8. Flask: Hello World! Fire up your favorite editor Protip: learn VIM run.sh: Don t just copy this and paste this. export FLASK_APP=webpage.py export FLASK_DEBUG=1 flask run -h localhost -p 8000 Bash shell environment variables

8. Flask: Hello World! Fire up your favorite editor Protip: learn VIM webpage.py: run.sh: Python library import Don t just copy this and paste this. export FLASK_APP=webpage.py export FLASK_DEBUG=1 flask run -h localhost -p 8000 from flask import Flask app = Flask( name ) Don t just copy this and paste this. @app.route('/') def hello_world(): return 'Hello, World!'

8. Flask: Hello World! Fire up your favorite editor Protip: learn VIM run.sh: Don t just copy this and paste this. export FLASK_APP=webpage.py Python decorator* export FLASK_DEBUG=1 flask run -h localhost -p 8000 webpage.py: from flask import Flask app = Flask( name ) Don t just copy this and paste this. @app.route('/') def hello_world(): return 'Hello, World!' *Advanced Python entity, kind of difficult to custom use for beginners.

8. Flask: Hello World! Fire up your favorite editor Protip: learn VIM webpage.py: run.sh: Don t just copy this and paste this. export FLASK_APP=webpage.py export FLASK_DEBUG=1 Function definition flask run -h localhost -p 8000 from flask import Flask app = Flask( name ) Don t just copy this and paste this. @app.route('/') def hello_world(): return 'Hello, World!'

8. Flask: Hello World! Fire up your favorite editor Protip: learn VIM webpage.py: run.sh: Don t just copy this and paste this. export FLASK_APP=webpage.py export FLASK_DEBUG=1 flask run -h localhost Required -p indentation* 8000 from flask import Flask app = Flask( name ) Don t just copy this and paste this. @app.route('/') def hello_world(): return 'Hello, World!' *Tabs or spaces. Recommended: 4 spaces.

9. Your Own Flask Server (venv) ~/cs2300proj$ chmod +x run.sh Changes the run.sh file to be executable in Linux

9. Your Own Flask Server (venv) ~/cs2300proj$ chmod +x run.sh (venv) ~/cs2300proj$./run.sh Execute the run.sh file that exists in the current working directory

9. Your Own Flask Server (venv) ~/cs2300proj$ chmod +x run.sh (venv) ~/cs2300proj$./run.sh * Serving Flask app "webpage" * Forcing debug mode on * Running on http://localhost:8000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 114-080-928 Only accessible through the local host i.e. from applications running on the Linux box.

10. Flask + Jinja2 templates: Dynamic Webpages (venv) ~/cs2300proj$ mkdir templates Make a directory (folder) in the current working directory named templates

10. Flask + Jinja2 templates: Dynamic Webpages (venv) ~/cs2300proj$ mkdir templates (venv) ~/cs2300proj$ mkdir static (venv) ~/cs2300proj$ ls List the contents of the current working directory

10. Flask + Jinja2 templates: Dynamic Webpages (venv) ~/cs2300proj$ mkdir templates (venv) ~/cs2300proj$ mkdir static (venv) ~/cs2300proj$ ls pycache run.sh static templates venv webpage.py Static files: JavaScript, CSS, Images Jinja2 templates: HTML files

10. Flask + Jinja2 templates: Dynamic Webpages templates/index.html: <html lang="en"> <head> <title>something Meaningful</title> <meta charset="utf-8" /> </head> Don t just copy this and paste this. <body> <header><h1>{{ header }}</h1></header> </body> </html> webpage.py: from flask import Flask from flask import render_template Don t just copy this and paste this. app = Flask( name ) @app.route('/') def doesnt_matter_what_you_name_this(): return render_template( 'index.html', header='demo for CS2300' )

10. Flask + Jinja2 templates: Dynamic Webpages If statement: {% if True %} {{ variable }} {% endif %} For loop: <ul> {% for item in list %} <li>{{ item }}</li> {% endfor %} </ul>

11. Flask: HTML forms and HTTP requests templates/index.html:... <body> {% if header %} <header><h1>{{ header }}</h1></header> {% endif %} <form action="{{ url_for( insert ) }}" method="post"> Something: <input type="text" name="form-field"> <input type="submit" value="submit"> </form> </body> If header variable is defined when rendering template, include this HTML code Insert the URL for the insert function. When submit button is pressed, use HTTP POST to send form data to the action URL

11. Flask: HTML forms and HTTP requests templates/index.html:... <body> {% if header %} <header><h1>{{ header }}</h1></header> {% endif %} <form action="{{ url_for( insert ) }}" method="post"> Something: <input type="text" name="form-field"> <input type="submit" value="submit"> </form> </body> webpage.py:... @app.route('/') def index(): return render_template( 'index.html', header='demo for CS2300' ) @app.route('/submit', methods=['post']) def insert(): # more code to come return render_template('index.html')

11. Flask: HTML forms and HTTP requests templates/index.html:... <body> <header><h1>{{ header }}</h1></header> <form action="{{ url_for( insert ) }}" method="post"> Something: <input type="text" name="form-field"> <input type="submit" value="submit"> </form> </body> </html> webpage.py:... from flask import request @app.route('/submit', methods=['post']) def insert(): field = request.form['form-field'] return render_template( 'index.html', header=field )

12. Beginner s SQLite import sqlite3 connection = sqlite3.connect( database.db ) cursor = connection.curser()......... connection.commit() cursor.close()

12. Beginner s SQLite :: Create Table cursor = connection.curser() cursor.execute(""" CREATE TABLE Stuff ( form_fields VARCHAR(120) ) """) connection.commit()

12. Beginner s SQLite :: Insert Values cursor = connection.curser() cursor.execute( 'INSERT INTO Stuff VALUES (:val)', {'val': 'something'} ) connection.commit()

12. Beginner s SQLite :: Query for Values cursor = connection.curser() result = cursor.execute(""" SELECT * FROM Stuff """).fetchone() result == ( something,)

12. Beginner s SQLite :: Back to Flask webpage.py: import sqlite3 connection = sqlite3.connect( data.db ) from flask import request @app.route('/submit', methods=['post']) def insert(): field = request.form['form-field'] cursor = connection.cursor() cursor.execute( 'INSERT INTO Stuff VALUES (:val)', {'val': field} ) connection.commit() webpage.py (cont): db_contents = cursor.execute( 'SELECT * FROM Stuff' ).fetchall() return render_template( 'index.html', list_of_stuff=db_contents, header='new Stuff' )

12. Beginner s SQLite :: Back to Flask index.html:... {% if list_of_stuff %} <div> <ul> {% for (val,) in list_of_stuff %} <li>{{ val }}</li> {% endfor %} </ul> </div> {% endif %}... webpage.py (cont): db_contents = cursor.execute( 'SELECT * FROM Stuff' ).fetchall() return render_template( 'index.html', list_of_stuff=db_contents, header='new Stuff' )

That s it. Python / Flask / SQLite aren t required for your projects Everything beyond this lecture is up to your own learning

Further Reading Flask tutorial: http://flask.pocoo.org/docs/1.0/tutorial/ SQLite tutorial: http://www.sqlitetutorial.net/ Jinja2 tutorial: https://realpython.com/blog/python/primer-on-jinja-templating/

Demo Code available on S&T GitLab https://git.mst.edu/djmvfb/cs2300proj djmvfb@rc05xcs213:~$ git clone https://git.mst.edu/djmvfb/cs2300proj.git