#19 Web site Demo

Python Website Demo Tutorial

Build a complete demo web application using Python + Flask, featuring: login, projects, customers, and success stories pages. Each module gets you closer to a real-world site!

Module 1: Setup & Install Flask

pip install flask flask-login

mkdir pywebdemo
cd pywebdemo
touch app.py
mkdir templates static

Module 2: Base Flask App & Page Routing

# app.py
from flask import Flask, render_template, redirect, url_for
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/projects')
def projects():
    return render_template('projects.html')

@app.route('/customers')
def customers():
    return render_template('customers.html')

@app.route('/stories')
def stories():
    return render_template('stories.html')

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

Module 3: Basic Page Templates

<!-- templates/home.html -->
<h1>Welcome to Demo Company</h1>
<a href="/login">Login</a> | <a href="/projects">Projects</a> | <a href="/customers">Customers</a> | <a href="/stories">Success Stories</a>

<!-- templates/projects.html -->
<h2>Our Projects</h2>
<ul>
  <li>Project A: AI Web Platform</li>
  <li>Project B: Mobile Solution</li>
</ul>

<!-- templates/customers.html -->
<h2>Our Customers</h2>
<ul>
  <li>Customer Alpha</li>
  <li>Customer Beta</li>
</ul>

<!-- templates/stories.html -->
<h2>Success Stories</h2>
<p>Customer Alpha tripled sales with our platform!</p>
<p>Customer Beta expanded globally with our mobile tech.</p>

Module 4: Login Page & User System

# app.py (add)
from flask import request, flash
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user

app.secret_key = 'REPLACE_WITH_A_SECRET_KEY'
login_manager = LoginManager()
login_manager.init_app(app)

# Simple Fake User
class User(UserMixin):
    def __init__(self, id):
        self.id = id

@login_manager.user_loader
def load_user(user_id):
    return User(user_id)

# app.py (add route)
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        if request.form['username'] == 'admin' and request.form['password'] == 'password':
            user = User('admin')
            login_user(user)
            return redirect(url_for('home'))
        else:
            flash('Bad credentials!')
    return render_template('login.html')

<!-- templates/login.html -->
<form method="POST">
  <label>Username:</label>
  <input name="username" type="text"><br>
  <label>Password:</label>
  <input name="password" type="password"><br>
  <button type="submit">Login</button>
</form>
{% with messages = get_flashed_messages() %}
  {% if messages %}
    <p style="color:red;">{{ messages[0] }}</p>
  {% endif %}
{% endwith %}

# app.py (add route)
@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('home'))

Module 5: Protected Pages and Navigation

# app.py (protect routes)
@app.route('/admin')
@login_required
def admin():
    return "
Admin Only Page
"

Module 6: Basic Styling and Navigation Bar

<!-- templates/base.html -->
<nav>
  <a href="/">Home</a> | 
  <a href="/projects">Projects</a> | 
  <a href="/customers">Customers</a> | 
  <a href="/stories">Success Stories</a> | 
  {% if current_user.is_authenticated %}
    <a href="/logout">Logout</a>
  {% else %}
    <a href="/login">Login</a>
  {% endif %}
</nav>
<hr>
{% block content %}{% endblock %}

<!-- Usage: in your pages -->
{% extends "base.html" %}
{% block content %}
  ...page content...
{% endblock %}

/* static/style.css */
body { font-family: Arial, sans-serif; background: #f7faff; }
nav { font-size: 1.2em; margin-bottom: 12px; }
a { color: #00adb5; text-decoration: none; margin-right: 10px; }
hr { margin-bottom: 30px; }

Module 7: Adding Fake Data for Projects & Customers

# app.py
projects_data = [
  {"title": "AI Web Platform", "desc": "Cutting-edge machine learning project."},
  {"title": "Mobile Solution", "desc": "Cross-platform mobile app."}
]
customers_data = ["Customer Alpha", "Customer Beta"]

@app.route('/projects')
def projects():
    return render_template('projects.html', projects=projects_data)

@app.route('/customers')
def customers():
    return render_template('customers.html', customers=customers_data)

{% extends "base.html" %}
{% block content %}
  <h2>Our Projects</h2>
  <ul>
    {% for p in projects %}
      <li><b>{{ p.title }}</b> — {{ p.desc }}</li>
    {% endfor %}
  </ul>
{% endblock %}

Module 8: Success Stories Dynamic Content

# app.py
stories_data = [
  {"customer": "Alpha", "story": "Tripled sales!"},
  {"customer": "Beta", "story": "Expanded globally!"}
]

@app.route('/stories')
def stories():
    return render_template('stories.html', stories=stories_data)

{% extends "base.html" %}
{% block content %}
  <h2>Success Stories</h2>
  <ul>
    {% for s in stories %}
      <li><b>{{ s.customer }}:</b> {{ s.story }}</li>
    {% endfor %}
  </ul>
{% endblock %}

Module 9: Flash Messages & User Feedback

# On login fail (see login above)
flash('Bad credentials!')

{% with messages = get_flashed_messages() %}
  {% if messages %}
    <div style="color:red;">
    {% for message in messages %}
      {{ message }}<br>
    {% endfor %}
    </div>
  {% endif %}
{% endwith %}

Module 10: Finalizing & Running Your Demo Website

export FLASK_APP=app.py
flask run

1. Visit http://127.0.0.1:5000/ in your browser.
2. Login using admin / password (demo only).
3. Explore projects, customers, and stories pages.
4. You can expand with databases, forms, and REST APIs later!

This boilerplate gives you a fast way to try out and demo a real Python-based web application!