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

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



djmvfb@rc05xcs213:~$ firefox &

Execute this command and immediate go into the background.

Benefit: no second PuTTY window



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



djmvfb@rc05xcs213:~$ cd cs2300proj/

Navigate into said directory



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


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





Python library import


● Fire up your favorite editor○ Protip: learn VIM





webpage.py:



@app.route('/')

def hello_world():


Python decorator*

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









@app.route('/')

def hello_world():


Function definition









@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



(venv) ~/cs2300proj$ ./run.sh

Execute the run.sh file that exists in the current working directory



(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



(venv) ~/cs2300proj$ mkdir static

(venv) ~/cs2300proj$ ls

List the contents of the current workingdirectory



(venv) ~/cs2300proj$ mkdir static

(venv) ~/cs2300proj$ ls

__pycache__ run.sh static templates venv webpage.py

Static files: JavaScript,

CSS, Images

Jinja2 templates:HTML files


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



<html lang="en">

<head>



</head>


<body>


</body>

</html>

webpage.py:


from flask import render_template


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 render_template


app = Flask(__name__)

@app.route('/')

def doesnt_matter_what_you_name_this():


'index.html',


)


<html lang="en">

<head>



</head>


<body>


</body>

</html>


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

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 %}


{% 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():


'index.html',


)

@app.route('/submit', methods=['POST'])

def insert():

# more code to come

return render_template('index.html')


<body>

{% if header %}


{% endif %}


method="post">


name="form-field">


</form>

</body>

webpage.py:...

@app.route('/')

def index():


'index.html',


)


def insert():

# more code to come

return render_template('index.html')


<body>

{% if header %}


{% endif %}


method="post">


name="form-field">


</form>

</body>



webpage.py:

...

from flask import request


def insert():

field = request.form['form-field']


'index.html',

header=field

)


...

<body>



method="post">


name="form-field">


</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.execute("""

CREATE TABLE Stuff (

form_fields VARCHAR(120)

)

""")

connection.commit()

12. Beginner’s SQLite :: Insert Values


cursor.execute(

'INSERT INTO Stuff VALUES (:val)',

{'val': 'something'}

)

connection.commit()

12. Beginner’s SQLite :: Query for Values


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


'index.html',

list_of_stuff=db_contents,

header='New Stuff'

)

webpage.py:import sqlite3

connection = sqlite3.connect(‘data.db’)

from flask import request


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


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

http://flask.pocoo.org/docs/1.0/tutorial/

http://www.sqlitetutorial.net/

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

https://git.mst.edu/djmvfb/cs2300proj

A Sample Approach to your Projectdjmvfb/courses/cs2300/static/media/cs2300 - … · 7.Installing...

Documents

Transcript of A Sample Approach to your Projectdjmvfb/courses/cs2300/static/media/cs2300 - … · 7.Installing...