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.