Creating a Basic Wiki with Flask
Creating a Basic Wiki with Flask
Introduction
Building a basic wiki is a great way to learn about web development, and Flask is an ideal framework for such a project. In this guide, we'll explore how to create a simple wiki with Flask, allowing users to view and edit wiki pages. By following this guide, you'll have a foundation for building more advanced wiki applications with Flask.
Step 1: Setting Up Your Flask Application
Start by setting up your Flask application and installing the necessary extensions. Here's a sample directory structure:
wiki-app/
app.py
templates/
index.html
page.html
Step 2: Creating a Wiki Page Model
Create a model for wiki pages, which you'll store in a database. Here's an example of how to define a WikiPage model using Flask-SQLAlchemy:
# app.py
from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///wiki.db'
db = SQLAlchemy(app)
class WikiPage(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), unique=True, nullable=False)
content = db.Column(db.Text, nullable=False)
@app.route('/')
def index():
pages = WikiPage.query.all()
return render_template('index.html', pages=pages)
if __name__ == '__main__':
app.run(debug=True)
Step 3: Creating Wiki Templates
Create HTML templates for displaying and editing wiki pages. Here's a basic structure for your template (index.html) for displaying the list of wiki pages:
<!DOCTYPE html>
<html>
<head>
<title>Wiki</title>
</head>
<body>
<header>
<h1>Wiki</h1>
</header>
<section>
<h2>Pages</h2>
<ul>
{% for page in pages %}
<li><a href=`{{ url_for('page', title=page.title) }}`>{{ page.title }}</a></li>
{% endfor %}
</ul>
</section>
</body>
</html>
And here's a basic structure for your template (page.html) for displaying and editing a wiki page:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<header>
<h1>{{ page.title }}</h1>
</header>
<section>
<h2>Content</h2>
<p>{{ page.content }}</p>
</section>
<section>
<h2>Edit Page</h2>
<form method=`post` action=`{{ url_for('edit', title=page.title) }}`>
<textarea name=`content` rows=`10` cols=`40`>{{ page.content }}</textarea>
<button type=`submit`>Save</button>
</form>
</section>
</body>
</html>
Step 4: Routing for Wiki Pages
Create routes for viewing and editing wiki pages. Here's an example of how to define these routes:
# app.py
@app.route('/page/<title>', methods=['GET', 'POST'])
def page(title):
page = WikiPage.query.filter_by(title=title).first()
if request.method == 'POST':
content = request.form['content']
page.content = content
db.session.commit()
return redirect(url_for('page', title=page.title))
return render_template('page.html', page=page)
if __name__ == '__main__':
app.run(debug=True)
Step 5: Running Your Wiki
Run your Flask wiki application using the following command:
python app.py
Access your web application in a browser and start creating and editing wiki pages.
Conclusion
Creating a basic wiki with Flask is an excellent project to learn about web development and database interactions. By following the steps in this guide, you can set up a Flask application, create templates for viewing and editing wiki pages, and enable users to contribute content. Enhance your wiki application by adding features such as user authentication and version history.