Flask Web Application Guide

Flask Web Application Guide

Step 1: Install Flask

First, install Flask using pip:

pip install Flask

Step 2: Create Project Structure

Create the following directory structure for your project:

my_flask_app/
│
├── app.py
├── templates/
│   └── index.html
└── static/
    ├── style.css
    └── script.js

Step 3: Write the Flask Application

Create a file named app.py with the following content:

from flask import Flask, render_template

app = Flask(__name__)

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

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

Step 4: Create the HTML Template

Create a file named index.html inside the templates directory with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Welcome to My Flask App</h1>
    <p>This is a simple webpage served by Flask.</p>
    <button onclick="showMessage()">Click me</button>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

Step 5: Create the CSS File

Create a file named style.css inside the static directory with the following content:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

Step 6: Create the JavaScript File

Create a file named script.js inside the static directory with the following content:

function showMessage() {
    alert("Button clicked!");
}

Step 7: Run Your Flask App

Navigate to the my_flask_app directory in your terminal and run:

python app.py

Your Flask application will start, and you can open your web browser and go to http://127.0.0.1:5000 to see your webpage.