Photo by freepik
Let’s build a simple blog application using Flask (a lightweight Python web framework) to keep things simple and easy to understand.
Overview of the Blog App:
The blog app will allow users to:
- View a list of blog posts.
- View individual blog posts in detail.
- Create new blog posts.
Steps:
- Install Flask.
- Create the project structure.
- Create the main app file (app.py).
- Create templates for viewing and adding blog posts.
- Run the application.
Step 1: Install Flask
You can install Flask via pip:
pip install flaskStep 2: Project Structure
Create the following file structure:
/simple_blog
/templates
base.html
home.html
post_detail.html
new_post.html
app.py- app.py: Main application logic.
- templates: Contains HTML templates.
Step 3: Create the app.py File
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
# A simple list of posts (simulating a database)
posts = [
{
'id': 1,
'title': 'First Post',
'content': 'This is the content of the first post.'
},
{
'id': 2,
'title': 'Second Post',
'content': 'This is the content of the second post.'
}
]
# Home page to display all posts
@app.route('/')
def home():
return render_template('home.html', posts=posts)
# View details of a single post
@app.route('/post/<int:post_id>')
def post_detail(post_id):
post = next((post for post in posts if post['id'] == post_id), None)
if post:
return render_template('post_detail.html', post=post)
else:
return "Post not found", 404
# Page to create a new post
@app.route('/new', methods=['GET', 'POST'])
def new_post():
if request.method == 'POST':
title = request.form['title']
content = request.form['content']
post_id = len(posts) + 1 # Generate a new post ID
posts.append({
'id': post_id,
'title': title,
'content': content
})
return redirect(url_for('home'))
return render_template('new_post.html')
if __name__ == '__main__':
app.run(debug=True)Step 4: Create HTML Templates
- base.html (A base template for consistent layout)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Blog</title>
</head>
<body>
<header>
<h1><a href="{{ url_for('home') }}">My Simple Blog</a></h1>
<nav>
<a href="{{ url_for('new_post') }}">Create New Post</a>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
home.html (Displays all blog posts)
{% extends "base.html" %}
{% block content %}
<h2>Blog Posts</h2>
<ul>
{% for post in posts %}
<li>
<a href="{{ url_for('post_detail', post_id=post['id']) }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
{% endblock %}
post_detail.html (Displays a single post's details)
{% extends "base.html" %}
{% block content %}
<h2>{{ post.title }}</h2>
<p>{{ post.content }}</p>
<a href="{{ url_for('home') }}">Back to Home</a>
{% endblock %}
new_post.html (Form to create a new blog post)
{% extends "base.html" %}
{% block content %}
<h2>Create a New Post</h2>
<form action="{{ url_for('new_post') }}" method="POST">
<label for="title">Title:</label><br>
<input type="text" id="title" name="title" required><br>
<label for="content">Content:</label><br>
<textarea id="content" name="content" required></textarea><br><br>
<input type="submit" value="Create Post">
</form>
{% endblock %}Step 5: Run the Application
In the terminal, navigate to the folder containing app.py and run:
python app.py
Open your browser and go to http://127.0.0.1:5000. You should now see your blog!
Features:
- Home Page (/): Displays a list of blog posts.
- Post Detail Page (/post/<post_id>): Displays details of an individual blog post.
- New Post Page (/new): Allows users to create a new post via a form.
Also Learn Write a Program to Read and Write Binary Files in Python
Explanation:
- @app.route(‘/’): This is the home page where all posts are displayed.
- @app.route(‘/post/<int:post_id>’): This route is dynamic and shows the details of a post based on its ID.
- @app.route(‘/new’): This route handles both GET and POST requests. It displays a form to create a new post when accessed via GET, and when the form is submitted (POST), it adds the new post to the list and redirects to the home page.
This simple Flask blog app demonstrates the core concepts of routing, form handling, and rendering templates in a web application. You can easily extend it with features like a database, user authentication, or a comment section.
Leave a Reply