2026-01-306 min read

Web Building (Python Programming)

Learn Web Building (Python Programming) step by step with clear examples and exercises.

Title: Web Building with Python Programming

Why This Matters

today, web development is a crucial skill for anyone aiming to create dynamic and interactive websites. By learning Python programming, you can build powerful web applications without needing extensive knowledge of HTML, CSS, or JavaScript. This lesson will guide you through the core concepts and practical examples of using Python for web building.

Prerequisites

Before diving into web development with Python, ensure you have a solid understanding of:

Basic Python syntax, including variables, data types, functions, and control structures (if, else, loops)
Modules and libraries, such as os, sys, and requests
File handling using Python's built-in methods for reading and writing files
Familiarity with the command line or terminal

Core Concept

Python web development primarily relies on two main frameworks: Flask and Django. In this lesson, we will focus on using Flask due to its simplicity and suitability for beginners.

Setting up a Flask project

Install Flask by running pip install flask in your terminal or command prompt.
Create a new Python file (e.g., app.py) and import the Flask module:

from flask import Flask, render_template

app = Flask(__name__)

Define a route for our web page using the @app.route() decorator:

@app.route('/')
def home():
return "Hello, World!"

Run your application with app.run():

if __name__ == "__main__":
app.run(debug=True)

Now, if you navigate to http://localhost:5000 in your web browser, you should see "Hello, World!" displayed on the screen.

Creating dynamic pages with templates

Flask allows us to use templates for creating dynamic web pages. To create a template, save an HTML file (e.g., index.html) in a new folder called templates next to your Python script. Here's an example of a simple template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Flask App</title>
</head>
<body>
<h1>{{ title }}</h1>
</body>
</html>

In the template, {{ title }} is a placeholder for dynamic content that will be filled in by our Python script. To use this template, modify the home() function as follows:

from jinja2 import Environment, FileSystemLoader

env = Environment(loader=FileSystemLoader('templates/'))
template = env.get_template('index.html')

@app.route('/')
def home():
title = "Hello, World!"
return template.render(title=title)

With this setup, the home() function renders the index.html template and replaces the {{ title }} placeholder with the value of the title variable.

Handling user input and data storage

To handle user input, we can use HTML forms and Flask's request object to access the submitted data. For example:

Modify the index.html template to include a simple form:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Flask App</title>
</head>
<body>
<h1>{{ title }}</h1>
<form action="/submit" method="post">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>

Create a new route to handle the form submission:

@app.route('/submit', methods=['POST'])
def submit():
name = request.form['name']

Save the user's name to a file or database

return "Hello, {}!".format(name)


Now, when you submit the form, the server will redirect you to the `/submit` route and display a personalized greeting based on the submitted data.

### Serving static files

Flask allows us to serve static files, such as images, CSS, and JavaScript, by configuring a specific route:

1. Create a new folder called `static` next to your Python script and place some sample files in it (e.g., `style.css`, `script.js`, and an image named `logo.png`).
2. Modify the `app.py` file to serve static files:

from flask import Flask, render_template, send_file

... (rest of the code)

@app.route('/static/')

def send_static(filename):

return send_file('static/' + filename)


With this setup, you can access static files by appending their path to the base URL, e.g., `http://localhost:5000/static/logo.png`.

Worked Example

In this example, we will create a simple web application that allows users to submit their names and displays a list of all submitted names.

Create a new folder called my_app and navigate to it in your terminal or command prompt.
Run pip install flask to install Flask.
Create a new Python file called app.py and add the following code:

from flask import Flask, render_template, request, redirect, url_for
from jinja2 import Environment, FileSystemLoader

app = Flask(__name__)
env = Environment(loader=FileSystemLoader('.'))

names = []

@app.route('/')
def index():
return render_template('index.html', names=names)

@app.route('/submit', methods=['POST'])
def submit():
name = request.form['name']
names.append(name)
return redirect(url_for('index'))

if __name__ == "__main__":
app.run(debug=True)

Create a new folder called templates and add an index.html file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Flask App</title>
</head>
<body>
<h1>Welcome to My Flask App</h1>
<ul id="names">
{% for name in names %}
<li>{{ name }}</li>
{% endfor %}
</ul>
<form action="/submit" method="post">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>

Now, when you run the application (python app.py) and navigate to http://localhost:5000, you should see an empty list of names. To add a name to the list, enter it in the text field and click "Submit". The updated list will be displayed on the screen.

Common Mistakes

Forgetting to import necessary modules: Make sure you have imported all required modules at the beginning of your script (e.g., from flask import Flask, render_template).
Incorrect route configuration: Ensure that your routes are correctly defined using the @app.route() decorator and include the appropriate HTTP method (GET or POST) if necessary.
Accessing undefined variables: Always define any variables you plan to use in your templates before rendering them.
Misconfiguring template paths: If your templates are not located in the expected folder (templates by default), make sure to adjust the path accordingly.
Using incorrect template syntax: In Jinja2 templates, use double curly braces {{ }} for variables and loops, and single curly braces {% %} for control structures like if statements.

Practice Questions

Create a simple Flask application that displays the current date and time on the homepage.
Modify the example above to save user names to a file instead of storing them in memory.
Add validation to the form in the example to ensure that only alphabetic characters are accepted for the name input.
Create a Flask application with multiple pages, where one page displays a list of all submitted names and another allows users to delete their own name from the list.

FAQ

Do I need to know HTML and CSS to build web applications with Python and Flask?

While knowledge of HTML and CSS can be helpful, Flask templates allow you to create dynamic pages without extensive knowledge of these languages. However, if you want more control over the design, it's recommended to learn them as well.

Can I use other libraries or frameworks with Flask for web development?

Yes! Flask is highly modular and can be easily extended using various third-party libraries and frameworks like SQLAlchemy for database access, Werkzeug for utility functions, and Bootstrap for responsive design.

How do I deploy my Flask application to a web server?

Deploying a Flask application involves several steps, including setting up a virtual environment, installing necessary packages, configuring the WSGI (Web Server Gateway Interface) file, and uploading your code to a web host. For more detailed instructions, check out this tutorial on the official Flask website.