a sample approach to your projectdjmvfb/courses/cs2300/static/media/cs2300 - … · 7.installing...

A Sample Approachto your ProjectPython 3 :: Flask :: SQLite3

Doug McGeehan

An object-orientedinterpreted programming

language

A micro web framework written in Python

A public domain, barebones SQL database system

Your Development Environment

Windows Client

PuTTYXming

Linux Server

Python 3pip

virtualenv

S&T CLC Machines

Pre-installed in CLCs

Outline

1. Fire up Xming server2. PuTTY w/ X forwarding3. Connect to CLC Linux4. Firefox: test X forwarding5. mkdir: A Blank Canvas6. Python virtualenv

7. Installing Flask8. Flask: Hello World!9. Your Own Flask Server

10. Flask: Jinja2 Templating11. Flask: HTML forms &

HTTP requests12. 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 serverrcNNxcs213.managed.mst.edu

01 <= NN <= 40https://it.mst.edu/services/linux/hostnames/

● Verify X fowarding enabled● Press Open (or Enter)● Username + Password

3. Connecting to a CLC Linux Machine

● Select a serverrcNNxcs213.managed.mst.edu

01 <= NN <= 40https://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.

Benefit: no second PuTTY windowXming

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 thosealready 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:

from flask import Flask

app = Flask(__name__)Don’t just copy this and paste this.

@app.route('/')

def hello_world():

return 'Hello, World!'

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

Python library import

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

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!'

Python decorator*

*Advanced Python entity, kind of difficult to custom use for beginners.

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

8. Flask: Hello World!

● Fire up your favorite editor○ Protip: learn VIM 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!'

Function definition

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

8. Flask: Hello World!

● Fire up your favorite editor○ Protip: learn VIM 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!'Required indentation*

*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 hosti.e. from applications running on the Linux box.

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 hosti.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 workingdirectory

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:

Jinja2 template syntaxfor variable insertion

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'

)

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'

)

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>

10. Flask + Jinja2 templates: Dynamic Webpages

If statement:

{% if True %}

{{ variable }}

{% endif %}

10. Flask + Jinja2 templates: Dynamic Webpages

For loop:

<ul>

{% for item in list %}

<li>{{ item }}</li>

{% endfor %}

</ul>

11. Flask: HTML forms and HTTP requests

If header variable is definedwhen rendering template, includethis HTML code

Insert the URL for the insertfunction.

When submit button is pressed,use HTTP POST to send form datato the action URL

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>

11. Flask: HTML forms and HTTP requests

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')

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')

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>

11. Flask: HTML forms and HTTP requests

11. Flask: HTML forms and HTTP requests

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

)

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>

11. Flask: HTML forms and HTTP requests

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

)

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>

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 (cont):

db_contents = cursor.execute(

'SELECT * FROM Stuff'

).fetchall()

return render_template(

'index.html',

list_of_stuff=db_contents,

header='New Stuff'

)

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()

12. Beginner’s SQLite :: Back to Flask

webpage.py (cont):

db_contents = cursor.execute(

'SELECT * FROM Stuff'

).fetchall()

return render_template(

'index.html',

list_of_stuff=db_contents,

header='New Stuff'

)

index.html:

...

{% if list_of_stuff %}

<div>

<ul>

{% for (val,) in list_of_stuff %}

<li>{{ val }}</li>

{% endfor %}

</ul>

</div>

{% endif %}

...

12. Beginner’s SQLite :: Back to Flask

webpage.py (cont):

db_contents = cursor.execute(

'SELECT * FROM Stuff'

).fetchall()

return render_template(

'index.html',

list_of_stuff=db_contents,

header='New Stuff'

)

index.html:

...

{% if list_of_stuff %}

<div>

<ul>

{% for (val,) in list_of_stuff %}

<li>{{ val }}</li>

{% endfor %}

</ul>

</div>

{% endif %}

...

12. Beginner’s SQLite :: Back to Flask

webpage.py (cont):

db_contents = cursor.execute(

'SELECT * FROM Stuff'

).fetchall()

return render_template(

'index.html',

list_of_stuff=db_contents,

header='New Stuff'

)

index.html:

...

{% if list_of_stuff %}

<div>

<ul>

{% for (val,) in list_of_stuff %}

<li>{{ val }}</li>

{% endfor %}

</ul>

</div>

{% endif %}

...

12. Beginner’s SQLite :: Back to Flask

webpage.py (cont):

db_contents = cursor.execute(

'SELECT * FROM Stuff'

).fetchall()

return render_template(

'index.html',

list_of_stuff=db_contents,

header='New Stuff'

)

index.html:

...

{% if list_of_stuff %}

<div>

<ul>

{% for (val,) in list_of_stuff %}

<li>{{ val }}</li>

{% endfor %}

</ul>

</div>

{% endif %}

...

That’s it.

● Python / Flask / SQLite aren’t required for your projects

● Everything beyond this lecture is up toyour 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