Scribd
Upload
33 views19 pages

Web Framework Introduction

The document provides an overview of web frameworks, specifically focusing on Python-Flask, including installation instructions and basic usage. It guides users through creating a simple web application with Flask, formatting web pages using HTML and CSS, and adding interactivity through forms. Additionally, it emphasizes the importance of organizing HTML files and using CSS frameworks to enhance the appearance of web applications.

Uploaded by

cgpqd4d264
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views19 pages

Web Framework Introduction

The document provides an overview of web frameworks, specifically focusing on Python-Flask, including installation instructions and basic usage. It guides users through creating a simple web application with Flask, formatting web pages using HTML and CSS, and adding interactivity through forms. Additionally, it emphasizes the importance of organizing HTML files and using CSS frameworks to enhance the appearance of web applications.

Uploaded by

cgpqd4d264
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Web frameworks

Learning objectives

Explain what web frameworks are


Use web frameworks in Python-Flask
Web frameworks
Web frameworks allow us to create complex interactive web applications often with database
backends.
HTML, CSS, Javascript are prerequisites
It requires server-side scripts, so similar to common gateway interface but has a higher level
of abstraction
Also helpful to have an understanding of SQL
There are many web frameworks but we are going to use python-flask.
However before we can use Flask we do need to install the packages.
To do this we need to run the commands on the following page from the command line. You
will need to have administrator privileges.
Installing Flask using Pip
pip install flask
pip install flask-login
pip install flask-openid
pip install flask-mail
pip install flask-sqlalchemy
pip install sqlalchemy-migrate
pip install flask-
whooshalchemy
pip install flask-wtf
pip install flask-babel
pip install guess_language
pip install flipflop
pip freeze
Create Hello World App
Hello world program
Create a folder called hello.
In the folder create a file called hello.py
Add the following code:
app.route('/') is
from flask import Flask
a decorator that
app = Flask(__name__)
specifies the path to run
the procedure hello
@app.route('/hello')
def hello():
return "Hello World"

if __name__ == '__main__':
app.run()
How to run
Double click on the file hello.py to start the server

Then type in the following into a web browser: http://127.0.0.1:5000/hello

You should see:


Creating a new page
Now add the following to hello.py: Complete code listing:

@app.route('/bye') from flask import Flask


app = Flask(__name__)
def bye():
return "Goodbye" @app.route('/')
def hello():
return "Hello World"
Restart the server

Type in the following into the browser: @app.route('/bye')


http://127.0.0.1:5000/bye
def bye():
You should see: return "Goodbye"

if __name__ == '__main__’:
app.run()
Formatting Web pages
We can now format our web pages using HTML:
from flask import Flask

app = Flask(__name__)

@app.route('/hello')
def hello():
return """<html><body><h1>Hello World
</h1></body></html>"""

@app.route('/bye')
def bye():
return """<html><body><h1>Goodbye
</h1</body></html>"""

if __name__ == '__main__':
app.run()
Creating html pages
For the example we used very simple html code, but this could get
very messy if we have more html code.
What we can do is create separate html files that makes organisation
of different parts of our application much easier
In the hello folder create a new sub folders called templates
It must be called templates because Flask looks in this folder to
find the HTML files.
Creating html pages
Create two new html files hello.html and bye.html

hello.html bye.html
<html> <html>
<body> <body>
<h1> Hello World </h1> <h1> Goodbye </h1>
</body> </body>
</html> </html>
Render Template
Now replace the return statements with
from flask import Flask, render_template render_template
app = Flask(__name__)
Restart the server and run the code.
@app.route('/hello')
The output should not change.
def hello():
return render_template("hello.html") Our HTML has been separated from our
Python code
@app.route('/bye’)
def bye():
return render_template("bye.html")

if __name__ == '__main__’:
app.run()
CSS Frameworks
At the moment our web pages look quite bland, but we can jazz them
up by using CSS frameworks
Bootstrap https://getbootstrap.com
w3.css https://www.w3schools.com/w3css/

In the hello folder create a new folder called static


Download one of the CSS framework files into the static folder
CSS Frameworks
Add to the HTML files (replace w3.css with bootstrap.min.css as appropriate)
<html>
<head>
<link rel="stylesheet"
href="{{ url_for('static',filename='w3.css') }}">
</head>
<body>
<h1 class="w3-sans-serif w3-text-teal"> Hello World <h1>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static',
filename='w3.css') }}">
</head>
<body>
<h1 class="w3-sans-serif w3-text-teal"> Goodbye <h1>
</body>
</html>
Things to try

Add another HTML page with a different message. Create the HTML
file and modify the Python Flask file.
Use different w3.css (or bootstrap) classes to change the font, text
and background colour (see https://www.w3schools.com/w3css/ )
Creating interactive web pages
Our pages are static, but now we are going to create interactive web pages
Create a new page HTML with a form called name.html
Add the following code to name.html
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static',
filename='w3.css') }}">
</head>
<body>
<h1 class="w3-sans-serif w3-text-teal">
Please enter your name:
</h1>
<form action="" method="post">
<input type="text" name="name" value="{{ request.form.name }}">
<input type="submit" value="Sign in">
</form>
</body>
</html>
Modify hello.html to include a variable {{ name }}
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static',
filename='w3.css') }}">
</head>
<body>
<h1 class="w3-sans-serif w3-text-teal">
Hello {{ name }}
</h1>
</body>
</html>
Complete code listing for hello.py
from flask import Flask, render_template, request
Add the highlighted code app = Flask(__name__)
to hello.py
@app.route('/', methods=['GET', 'POST'])
When the form button is def name():
pressed the whatever is if request.method == 'POST':
written in the box is return render_template("hello.html",name=request.form['name’] )
“posted” and is the name return render_template("name.html")
variable for hello.html
@app.route('/hello’)
def hello():
return render_template("hello.html")

@app.route('/bye’)
def bye():
return render_template("goodbye.html")

if __name__ == '__main__’:
app.run(debug=True)
Running the code

You might also like