pythonfreak

Introduction to Web Development

Web development lets you build internal tools, dashboards, and data entry forms. Business analysts use Flask to create simple web interfaces for reports, data collection, or team tools. Master Flask basics and you can deploy your Python scripts as web apps.

Estimated reading time: 25–30 minutes

Flask Basics

  • Routes → URLs that trigger functions
  • Templates → HTML with dynamic data
  • Forms → collect user input
  • JSON API → return data for dashboards

Great for: internal tools, dashboards

Common Use Cases

  • Data entry forms → collect structured data
  • Report viewers → display analysis results
  • Simple APIs → serve data to other tools
  • Admin panels → manage data via web UI

Great for: making scripts accessible to team

Installing Flask

python
pip install flask

Hello World Flask App

Simplest Flask application.

python
from flask import Flask

app = Flask(__name__)

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

@app.route('/about')
def about():
    return 'About page'

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

Dynamic Routes

Routes with variables.

python
@app.route('/user/<username>')
def user_profile(username):
    return 'User: ' + username

@app.route('/order/<int:order_id>')
def order_details(order_id):
    return 'Order ID: ' + str(order_id)

Rendering HTML Templates

Use Jinja2 templates for dynamic HTML.

python
from flask import Flask, render_template

@app.route('/report')
def report():
    data = {
        'title': 'Sales Report',
        'total': 125000,
        'items': [
            {'name': 'Ana', 'amount': 50000},
            {'name': 'Bob', 'amount': 75000}
        ]
    }
    return render_template('report.html', data=data)

Handling Forms

Collect user input via forms.

python
from flask import Flask, render_template, request

@app.route('/submit', methods=['GET', 'POST'])
def submit():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        return 'Received: ' + name + ', ' + email
    
    return render_template('form.html')

JSON API Endpoint

Return JSON data for dashboards or other apps.

python
from flask import Flask, jsonify

@app.route('/api/sales')
def api_sales():
    data = {
        'total': 125000,
        'by_rep': [
            {'name': 'Ana', 'amount': 50000},
            {'name': 'Bob', 'amount': 75000}
        ]
    }
    return jsonify(data)

Cornerstone Project — Sales Dashboard (step-by-step)

Build a web dashboard that displays sales data and allows filtering. This makes your analysis accessible to non-technical teammates via browser.

Step 1 — Setup Flask app

python
from flask import Flask, render_template, request
import pandas as pd

app = Flask(__name__)

def load_sales_data():
    # In production, load from database or CSV
    data = [
        {'rep': 'Ana', 'region': 'North', 'amount': 1200},
        {'rep': 'Bob', 'region': 'South', 'amount': 1500},
        {'rep': 'Carol', 'region': 'North', 'amount': 980}
    ]
    return pd.DataFrame(data)

Step 2 — Create dashboard route

python
@app.route('/')
def dashboard():
    df = load_sales_data()
    
    total_sales = df['amount'].sum()
    total_transactions = len(df)
    avg_sale = df['amount'].mean()
    
    top_reps = df.groupby('rep')['amount'].sum().sort_values(ascending=False)
    
    data = {
        'total_sales': round(total_sales, 2),
        'total_transactions': total_transactions,
        'avg_sale': round(avg_sale, 2),
        'top_reps': top_reps.to_dict()
    }
    
    return render_template('dashboard.html', data=data)

Step 3 — Add filtering

python
@app.route('/filter', methods=['POST'])
def filter_data():
    df = load_sales_data()
    
    region = request.form.get('region')
    if region and region != 'all':
        df = df[df['region'] == region]
    
    total_sales = df['amount'].sum()
    total_transactions = len(df)
    
    data = {
        'total_sales': round(total_sales, 2),
        'total_transactions': total_transactions,
        'region': region
    }
    
    return render_template('dashboard.html', data=data)

Step 4 — Create API endpoint

python
from flask import jsonify

@app.route('/api/sales')
def api_sales():
    df = load_sales_data()
    
    data = {
        'total_sales': float(df['amount'].sum()),
        'by_rep': df.groupby('rep')['amount'].sum().to_dict(),
        'by_region': df.groupby('region')['amount'].sum().to_dict()
    }
    
    return jsonify(data)

Step 5 — Run the app

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

# Run: python app.py
# Visit: http://localhost:5000

How this helps at work

  • Accessible → teammates view reports in browser
  • Interactive → filter data on demand
  • Real-time → always shows latest data
  • Shareable → send URL instead of files

Key Takeaways

  • Flask → lightweight web framework for Python
  • Routes → map URLs to Python functions
  • Templates → Jinja2 for dynamic HTML
  • Forms → collect user input via POST
  • JSON API → serve data to other apps
  • Cornerstone → sales dashboard for team access

Next Steps

You have mastered Flask basics. Next, explore database integration with Flask-SQLAlchemy, or dive into authentication with Flask-Login to add user accounts.