Tag: Flask

Are you looking to showcase your awesome coding skills, projects, and experiences to potential employers or collaborators? A personal portfolio website is an incredible tool for doing just that! It’s your digital resume, a dynamic space where you can demonstrate what you’ve built and what you’re capable of.

In this guide, we’re going to walk through how to build a simple, yet effective, portfolio website using Flask and Python. Don’t worry if you’re a beginner; we’ll break down every step with easy-to-understand explanations.

Why a Portfolio? Why Flask?

First things first, why is a portfolio so important?
* Show, Don’t Just Tell: Instead of just listing your skills, a portfolio allows you to show your projects in action.
* Stand Out: It helps you differentiate yourself from other candidates by providing a unique insight into your work ethic and creativity.
* Practice Your Skills: Building your own portfolio is a fantastic way to practice and solidify your web development skills.

Now, why Flask?
Flask is a “micro” web framework written in Python.
* Web Framework: Think of a web framework as a set of tools and guidelines that make building websites much easier. Instead of building everything from scratch, frameworks give you a head start with common functionalities.
* Microframework: “Micro” here means Flask aims to keep the core simple but extensible. It doesn’t force you to use specific tools or libraries for everything, giving you a lot of flexibility. This makes it perfect for beginners because you can learn the essentials without being overwhelmed.
* Python: If you already know Python, Flask lets you leverage that knowledge to build powerful web applications without needing to learn a completely new language for the backend.

Getting Started: Setting Up Your Environment

Before we write any code, we need to set up our development environment. This ensures our project has everything it needs to run smoothly.

1. Install Python

If you don’t have Python installed, head over to the official Python website (python.org) and download the latest version suitable for your operating system. Make sure to check the box that says “Add Python X.X to PATH” during installation if you’re on Windows – this makes it easier to run Python commands from your terminal.

2. Create a Project Folder

It’s good practice to keep your projects organized. Create a new folder for your portfolio. You can name it something like my_portfolio.

mkdir my_portfolio
cd my_portfolio

3. Set Up a Virtual Environment

A virtual environment is like an isolated sandbox for your Python projects. It allows you to install specific versions of libraries (like Flask) for one project without affecting other projects or your main Python installation. This prevents conflicts and keeps your projects clean.

Inside your my_portfolio folder, run the following command:

python -m venv venv

• python -m venv: This tells Python to run the venv module.
• venv: This is the name we’re giving to our virtual environment folder. You can name it anything, but venv is a common convention.

Now, activate your virtual environment:

• On macOS/Linux:
  bash
source venv/bin/activate
• On Windows (Command Prompt):
  bash
venv\Scripts\activate
• On Windows (PowerShell):
  powershell
.\venv\Scripts\Activate.ps1

You’ll know it’s activated because you’ll see (venv) at the beginning of your terminal prompt.

4. Install Flask

With your virtual environment activated, install Flask using pip.
pip is Python’s package installer, used to install and manage libraries.

pip install Flask

Your First Flask Application: “Hello, Portfolio!”

Now that everything is set up, let’s create a very basic Flask application.

Inside your my_portfolio folder, create a new file named app.py.

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    """
    This function handles requests to the root URL ('/').
    It returns a simple message.
    """
    return "<h1>Welcome to My Awesome Portfolio!</h1>"

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

Let’s break down this code:
* from flask import Flask: This line imports the Flask class from the flask library.
* app = Flask(__name__): This creates an instance of the Flask application. __name__ is a special Python variable that represents the name of the current module. Flask uses it to figure out where to look for static files and templates.
* @app.route('/'): This is a decorator. It tells Flask that the home() function should be executed whenever a user navigates to the root URL (/) of your website. This is called a route.
* def home():: This defines a Python function that will be called when the / route is accessed.
* return "<h1>Welcome to My Awesome Portfolio!</h1>": This function returns a string of HTML. Flask sends this string back to the user’s browser, which then displays it.
* if __name__ == '__main__':: This standard Python construct ensures that app.run() is only called when you run app.py directly (not when it’s imported as a module into another script).
* app.run(debug=True): This starts the Flask development server.
* debug=True: This enables debug mode. In debug mode, your server will automatically reload when you make changes to your code, and it will also provide helpful error messages in your browser if something goes wrong. (Remember to turn this off for a production server!)

To run your application, save app.py and go back to your terminal (with your virtual environment activated). Run:

python app.py

You should see output similar to this:

 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: ...

Open your web browser and navigate to http://127.0.0.1:5000 (or http://localhost:5000). You should see “Welcome to My Awesome Portfolio!” displayed. Congratulations, your first Flask app is running!

Structuring Your Portfolio: Templates and Static Files

Returning HTML directly from your Python code (like return "<h1>...") isn’t practical for complex websites. We need a way to keep our HTML, CSS, and images separate. This is where Flask’s templates and static folders come in.

• Templates: These are files (usually .html) that contain the structure and content of your web pages. Flask uses a templating engine called Jinja2 to render them.
• Static Files: These are files that don’t change often, like CSS stylesheets, JavaScript files, and images.

Let’s organize our project:
1. Inside your my_portfolio folder, create two new folders: templates and static.
2. Inside static, create another folder called css.

Your project structure should look like this:

my_portfolio/
├── venv/
├── app.py
├── static/
│   └── css/
│       └── style.css  (we'll create this next)
└── templates/
    └── index.html     (we'll create this next)

1. Create a CSS File (static/css/style.css)

/* static/css/style.css */

body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

h1 {
    color: #0056b3;
}

p {
    margin-bottom: 10px;
}

.container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

nav ul {
    list-style: none;
    padding: 0;
    background: #333;
    overflow: hidden;
    border-radius: 5px;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #555;
}

2. Create an HTML Template (templates/index.html)

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <!-- Link to our CSS file -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/projects">Projects</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>

        <h1>Hello, I'm [Your Name]!</h1>
        <p>Welcome to my personal portfolio. Here you'll find information about me and my exciting projects.</p>

        <h2>About Me</h2>
        <p>I am a passionate [Your Profession/Interest] with a strong interest in [Your Specific Skills/Areas]. I enjoy [Your Hobby/Learning Style].</p>

        <h2>My Projects</h2>
        <p>Here are a few highlights of what I've been working on:</p>
        <ul>
            <li><strong>Project Alpha:</strong> A web application built with Flask for managing tasks.</li>
            <li><strong>Project Beta:</strong> A data analysis script using Python and Pandas.</li>
            <li><strong>Project Gamma:</strong> A small game developed using Pygame.</li>
        </ul>

        <h2>Contact Me</h2>
        <p>Feel free to reach out to me via email at <a href="mailto:your.email@example.com">your.email@example.com</a> or connect with me on <a href="https://linkedin.com/in/yourprofile">LinkedIn</a>.</p>
    </div>
</body>
</html>

Notice this line in the HTML: <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">.
* {{ ... }}: This is Jinja2 templating syntax.
* url_for(): This is a special Flask function that generates a URL for a given function. Here, url_for('static', filename='css/style.css') tells Flask to find the static folder and then locate the css/style.css file within it. This is more robust than hardcoding paths.

3. Update app.py to Render the Template

Now, modify your app.py file to use the index.html template. We’ll also add placeholder routes for other pages.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    """
    Renders the index.html template for the home page.
    """
    return render_template('index.html')

@app.route('/about')
def about():
    return render_template('about.html') # We will create this template later

@app.route('/projects')
def projects():
    return render_template('projects.html') # We will create this template later

@app.route('/contact')
def contact():
    return render_template('contact.html') # We will create this template later

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

• from flask import Flask, render_template: We’ve added render_template to our import.
• render_template('index.html'): This function tells Flask to look inside the templates folder for a file named index.html, process it using Jinja2, and then send the resulting HTML to the user’s browser.

Save app.py. If your Flask server was running in debug mode, it should have automatically reloaded. Refresh your browser at http://127.0.0.1:5000. You should now see your portfolio page with the applied styling!

To make the /about, /projects, and /contact links work, you would create about.html, projects.html, and contact.html files inside your templates folder, similar to how you created index.html. For a simple portfolio, you could even reuse the same basic structure and just change the main content.

What’s Next? Expanding Your Portfolio

You’ve built the foundation! Here are some ideas for how you can expand and improve your portfolio:

• More Pages: Create dedicated pages for each project with detailed descriptions, screenshots, and links to live demos or GitHub repositories.
• Dynamic Content: Learn how to pass data from your Flask application to your templates. For example, you could have a Python list of projects and dynamically display them on your projects page using Jinja2 loops.
• Contact Form: Implement a simple contact form. This would involve handling form submissions in Flask (using request.form) and potentially sending emails.
• Database: For more complex portfolios (e.g., if you want to add a blog or manage projects easily), you could integrate a database like SQLite or PostgreSQL using an Object-Relational Mapper (ORM) like SQLAlchemy.
• Deployment: Once your portfolio is ready, learn how to deploy it to a live server so others can see it! Popular options include Heroku, PythonAnywhere, Vercel, or DigitalOcean.

Conclusion

Building a portfolio with Flask and Python is an excellent way to not only showcase your work but also to deepen your understanding of web development. You’ve learned how to set up your environment, create a basic Flask application, organize your project with templates and static files, and render dynamic content. Keep experimenting, keep building, and soon you’ll have a stunning online presence that truly reflects your skills!

Welcome, aspiring web developers! Building a web application is an exciting journey, and a crucial part of almost any app is knowing who your users are. This is where “authentication” comes into play. If you’ve ever logged into a website, you’ve used an authentication system. In this comprehensive guide, we’ll explore how to add a robust and secure authentication system to your Flask application. We’ll break down complex ideas into simple steps, making it easy for even beginners to follow along.

What is Authentication?

Before we dive into the code, let’s clarify what authentication really means.

Authentication is the process of verifying a user’s identity. Think of it like showing your ID to prove who you are. When you enter a username and password into a website, the website performs authentication to make sure you are indeed the person associated with that account.

It’s often confused with Authorization, which happens after authentication. Authorization determines what an authenticated user is allowed to do. For example, a regular user might only be able to view their own profile, while an administrator can view and edit everyone’s profiles. For this guide, we’ll focus primarily on authentication.

Why Flask for Authentication?

Flask is a “microframework” for Python, meaning it provides just the essentials to get a web application running, giving you a lot of flexibility. This flexibility extends to authentication. While Flask doesn’t have a built-in authentication system, it’s very easy to integrate powerful extensions that handle this for you securely. This allows you to choose the tools that best fit your project, rather than being locked into a rigid structure.

Core Concepts of Flask Authentication

To build an authentication system, we need to understand a few fundamental concepts:

• User Management: This involves storing information about your users, such as their usernames, email addresses, and especially their passwords (in a secure, hashed format).
• Password Hashing: You should never store plain text passwords in your database. Instead, you hash them. Hashing is like turning a password into a unique, fixed-length string of characters that’s almost impossible to reverse engineer. When a user tries to log in, you hash their entered password and compare it to the stored hash. If they match, the password is correct.
• Sessions: Once a user logs in, how does your application remember them as they navigate from page to page? This is where sessions come in. A session is a way for the server to store information about a user’s current interaction with the application. Flask uses cookies (small pieces of data stored in the user’s browser) to identify a user’s session.
• Forms: Users interact with the authentication system through forms, typically for registering a new account and logging in.

Prerequisites

Before we start coding, make sure you have the following:

• Python 3: Installed on your computer.
• Flask: Installed in a virtual environment.
• Basic understanding of Flask: How to create routes and render templates.

If you don’t have Flask installed, you can do so like this:

python3 -m venv venv

source venv/bin/activate  # On macOS/Linux

pip install Flask

We’ll also need a popular Flask extension called Flask-Login, which simplifies managing user sessions and login states.

pip install Flask-Login

And for secure password hashing, Flask itself provides werkzeug.security (which Flask-Login often uses or complements).

Step-by-Step Implementation Guide

Let’s build a simple Flask application with registration, login, logout, and protected routes.

1. Project Setup

First, create a new directory for your project and inside it, create app.py and a templates folder.

flask_auth_app/
├── app.py
└── templates/
    ├── base.html
    ├── login.html
    ├── register.html
    └── dashboard.html

2. Basic Flask App and Flask-Login Initialization

Let’s set up our app.py with Flask and initialize Flask-Login.

from flask import Flask, render_template, redirect, url_for, flash, request
from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
from werkzeug.security import generate_password_hash, check_password_hash

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key_here' # IMPORTANT: Change this to a strong, random key in production!

login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login' # The name of the route function for logging in

users = {} # Stores user objects by id: {1: User_object_1, 2: User_object_2}
user_id_counter = 0 # To assign unique IDs

class User(UserMixin):
    def __init__(self, id, username, password_hash):
        self.id = id
        self.username = username
        self.password_hash = password_hash

    @staticmethod
    def get(user_id):
        return users.get(int(user_id))

@login_manager.user_loader
def load_user(user_id):
    """
    This function tells Flask-Login how to load a user from the user ID stored in the session.
    """
    return User.get(user_id)

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

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

Explanation:

• SECRET_KEY: This is a very important configuration. Flask uses it to securely sign session cookies. Never share this key, and use a complex, randomly generated one in production.
• LoginManager: We create an instance of Flask-Login’s manager and initialize it with our Flask app.
• login_manager.login_view = 'login': If an unauthenticated user tries to access a @login_required route, Flask-Login will redirect them to the route named 'login'.
• users and user_id_counter: These simulate a database. In a real app, you’d use a proper database (like SQLite, PostgreSQL) with an ORM (Object-Relational Mapper) like SQLAlchemy.
• User(UserMixin): Our User class inherits from UserMixin, which provides default implementations for properties and methods Flask-Login expects (like is_authenticated, is_active, is_anonymous, get_id()).
• @login_manager.user_loader: This decorator registers a function that Flask-Login will call to reload the user object from the user ID stored in the session.

3. Creating HTML Templates

Let’s create the basic HTML files in the templates folder.

templates/base.html

This will be our base layout, with navigation and flash messages.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Auth App</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
        nav { background-color: #333; padding: 10px; margin-bottom: 20px; }
        nav a { color: white; margin-right: 15px; text-decoration: none; }
        nav a:hover { text-decoration: underline; }
        .container { max-width: 800px; margin: auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        form div { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
        input[type="submit"] { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        input[type="submit"]:hover { background-color: #0056b3; }
        .flash { padding: 10px; margin-bottom: 10px; border-radius: 4px; }
        .flash.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .flash.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">Home</a>
        {% if current_user.is_authenticated %}
            <a href="{{ url_for('dashboard') }}">Dashboard</a>
            <a href="{{ url_for('logout') }}">Logout</a>
            <span>Hello, {{ current_user.username }}!</span>
        {% else %}
            <a href="{{ url_for('login') }}">Login</a>
            <a href="{{ url_for('register') }}">Register</a>
        {% endif %}
    </nav>
    <div class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <ul class="flashes">
                    {% for category, message in messages %}
                        <li class="flash {{ category }}">{{ message }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}
    </div>
</body>
</html>

templates/register.html

{% extends "base.html" %}

{% block content %}
    <h2>Register</h2>
    <form method="POST" action="{{ url_for('register') }}">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <input type="submit" value="Register">
        </div>
    </form>
{% endblock %}

templates/login.html

{% extends "base.html" %}

{% block content %}
    <h2>Login</h2>
    <form method="POST" action="{{ url_for('login') }}">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <input type="submit" value="Login">
        </div>
    </form>
{% endblock %}

templates/dashboard.html

{% extends "base.html" %}

{% block content %}
    <h2>Welcome to Your Dashboard!</h2>
    <p>This is a protected page, only accessible to logged-in users.</p>
    <p>Hello, {{ current_user.username }}!</p>
{% endblock %}

4. Registration Functionality

Now, let’s add the /register route to app.py.

@app.route('/register', methods=['GET', 'POST'])
def register():
    global user_id_counter # We need to modify this global variable
    if current_user.is_authenticated:
        return redirect(url_for('dashboard')) # If already logged in, go to dashboard

    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']

        # Check if username already exists
        for user_id, user_obj in users.items():
            if user_obj.username == username:
                flash('Username already taken. Please choose a different one.', 'error')
                return redirect(url_for('register'))

        # Hash the password for security
        hashed_password = generate_password_hash(password, method='pbkdf2:sha256')

        # Create a new user and "save" to our mock database
        user_id_counter += 1
        new_user = User(user_id_counter, username, hashed_password)
        users[user_id_counter] = new_user

        flash('Registration successful! Please log in.', 'success')
        return redirect(url_for('login'))

    return render_template('register.html')

Explanation:

• request.method == 'POST': This checks if the form has been submitted.
• request.form['username'], request.form['password']: These retrieve data from the submitted form.
• generate_password_hash(password, method='pbkdf2:sha256'): This function from werkzeug.security securely hashes the password. pbkdf2:sha256 is a strong, recommended hashing algorithm.
• flash(): This is a Flask function to show temporary messages to the user (e.g., “Registration successful!”). These messages are displayed in our base.html template.
• redirect(url_for('login')): After successful registration, the user is redirected to the login page.

5. Login Functionality

Next, add the /login route to app.py.

@app.route('/login', methods=['GET', 'POST'])
def login():
    if current_user.is_authenticated:
        return redirect(url_for('dashboard')) # If already logged in, go to dashboard

    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']

        user = None
        for user_id, user_obj in users.items():
            if user_obj.username == username:
                user = user_obj
                break

        if user and check_password_hash(user.password_hash, password):
            # If username exists and password is correct, log the user in
            login_user(user) # This function from Flask-Login manages the session
            flash('Logged in successfully!', 'success')

            # Redirect to the page they were trying to access, or dashboard by default
            next_page = request.args.get('next')
            return redirect(next_page or url_for('dashboard'))
        else:
            flash('Login Unsuccessful. Please check username and password.', 'error')

    return render_template('login.html')

Explanation:

• check_password_hash(user.password_hash, password): This verifies if the entered password matches the stored hashed password. It’s crucial to use this function rather than hashing the entered password and comparing hashes yourself, as check_password_hash handles the salting and iteration count correctly.
• login_user(user): This is the core Flask-Login function that logs the user into the session. It sets up the session cookie.
• request.args.get('next'): Flask-Login often redirects users to the login page with a ?next=/protected_page parameter if they tried to access a protected page while logged out. This line helps redirect them back to their intended destination after successful login.

6. Protected Routes (@login_required)

Now, let’s create a dashboard page that only logged-in users can access.

@app.route('/dashboard')
@login_required # This decorator ensures only authenticated users can access this route
def dashboard():
    # current_user is available thanks to Flask-Login and refers to the currently logged-in user object
    return render_template('dashboard.html')

Explanation:

• @login_required: This decorator from flask_login is a powerful tool. It automatically checks if current_user.is_authenticated is True. If not, it redirects the user to the login_view we defined earlier (/login) and adds the ?next= parameter.

7. Logout Functionality

Finally, provide a way for users to log out.

@app.route('/logout')
@login_required # Only a logged-in user can log out
def logout():
    logout_user() # This function from Flask-Login clears the user session
    flash('You have been logged out.', 'success')
    return redirect(url_for('index'))

Explanation:

• logout_user(): This Flask-Login function removes the user from the session, effectively logging them out.

Running Your Application

Save app.py and the templates folder. Open your terminal, navigate to the flask_auth_app directory, and run:

python app.py

Then, open your web browser and go to http://127.0.0.1:5000/.

• Try to go to /dashboard directly – you’ll be redirected to login.
• Register a new user.
• Log in with your new user.
• Access the dashboard.
• Log out.

Conclusion

Congratulations! You’ve successfully built a basic but functional authentication system for your Flask application using Flask-Login and werkzeug.security. You’ve learned about:

• The importance of password hashing for security.
• How Flask-Login manages user sessions and provides helpful utilities like @login_required and current_user.
• The fundamental flow of registration, login, and logout.

Remember, while our “database” was a simple dictionary for this guide, a real-world application would integrate with a proper database like PostgreSQL, MySQL, or SQLite, often using an ORM like SQLAlchemy for robust data management. This foundation, however, equips you with the core knowledge to secure your Flask applications!

Hello there, aspiring web developers and coding enthusiasts! Have you ever wanted to create your own corner on the internet, a simple blog where you can share your thoughts, ideas, or even your coding journey? You’re in luck! Today, we’re going to build a basic blog using two fantastic tools: Flask for our web application and Markdown for writing our blog posts.

This guide is designed for beginners, so don’t worry if some terms sound new. We’ll break down everything into easy-to-understand steps. By the end, you’ll have a functional, albeit simple, blog that you can expand upon!

Why Flask and Markdown?

Before we dive into the code, let’s quickly understand why these tools are a great choice for a basic blog:

• Flask: This is what we call a “micro web framework” for Python.
  • What is a web framework? Imagine you’re building a house. Instead of crafting every single brick and nail from scratch, you’d use pre-made tools, blueprints, and processes. A web framework is similar: it provides a structure and common tools to help you build web applications faster and more efficiently, handling things like requests from your browser, routing URLs, and generating web pages.
  • Why “micro”? Flask is considered “micro” because it doesn’t make many decisions for you. It provides the essentials and lets you choose how to add other components, making it lightweight and flexible – perfect for learning and building small projects like our blog.
• Markdown: This is a “lightweight markup language.”
  • What is a markup language? It’s a system for annotating a document in a way that is syntactically distinguishable from the text itself. Think of it like adding special instructions (marks) to your text that tell a program how to display it (e.g., make this bold, make this a heading).
  • Why “lightweight”? Markdown is incredibly simple to write and read. Instead of complex HTML tags (like <b> for bold or <h1> for a heading), you use intuitive symbols (like **text** for bold or # Heading for a heading). It allows you to write your blog posts in plain text files, which are easy to manage and version control.

Getting Started: Setting Up Your Environment

Before we write any Python code, we need to set up our development environment.

1. Install Python

If you don’t have Python installed, head over to the official Python website and download the latest stable version. Make sure to check the box that says “Add Python to PATH” during installation.

2. Create a Virtual Environment

A virtual environment is a self-contained directory that holds a specific version of Python and any libraries (packages) you install for a particular project. It’s like having a separate toolbox for each project, preventing conflicts between different project’s dependencies.

Let’s create one:

1. Open your terminal or command prompt.
2. Navigate to the directory where you want to create your blog project. For example:
   bash
mkdir my-flask-blog
cd my-flask-blog
3. Create the virtual environment:
   bash
python -m venv venv
   This creates a folder named venv (you can name it anything, but venv is common).

3. Activate the Virtual Environment

Now, we need to “enter” our isolated environment:

• On Windows:
  bash
.\venv\Scripts\activate
• On macOS/Linux:
  bash
source venv/bin/activate
  You’ll notice (venv) appearing at the beginning of your terminal prompt, indicating that the virtual environment is active.

4. Install Flask and Python-Markdown

With our virtual environment active, let’s install the necessary Python packages using pip.
* What is pip? pip is the standard package installer for Python. It allows you to easily install and manage additional libraries that aren’t part of the Python standard library.

pip install Flask markdown

This command installs both the Flask web framework and the markdown library, which we’ll use to convert our Markdown blog posts into HTML.

Our Blog’s Structure

To keep things organized, let’s define a simple folder structure for our blog:

my-flask-blog/
├── venv/                   # Our virtual environment
├── posts/                  # Where our Markdown blog posts will live
│   ├── first-post.md
│   └── another-great-read.md
├── templates/              # Our HTML templates
│   ├── index.html
│   └── post.html
└── app.py                  # Our Flask application code

Create the posts and templates folders inside your my-flask-blog directory.

Building the Flask Application (app.py)

Now, let’s write the core of our application in app.py.

1. Basic Flask Application

Create a file named app.py in your my-flask-blog directory and add the following code:

from flask import Flask, render_template, abort
import os
import markdown

app = Flask(__name__)

@app.route('/')
def index():
    # In a real blog, you'd list all your posts here.
    # For now, let's just say "Welcome!"
    return "<h1>Welcome to My Flask Blog!</h1><p>Check back soon for posts!</p>"

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

Explanation:
* from flask import Flask, render_template, abort: We import necessary components from the Flask library.
* Flask: The main class for our web application.
* render_template: A function to render HTML files (templates).
* abort: A function to stop a request early with an error code (like a “404 Not Found”).
* import os: This module provides a way of using operating system-dependent functionality, like listing files in a directory.
* import markdown: This is the library we installed to convert Markdown to HTML.
* app = Flask(__name__): This creates an instance of our Flask application. __name__ helps Flask locate resources.
* @app.route('/'): This is a “decorator” that tells Flask which URL should trigger the index() function. In this case, / means the root URL (e.g., http://127.0.0.1:5000/).
* app.run(debug=True): This starts the Flask development server. debug=True means that if you make changes to your code, the server will automatically restart, and it will also provide helpful error messages in your browser. Remember to set debug=False for production applications!

Run Your First Flask App

1. Save app.py.
2. Go back to your terminal (with the virtual environment active) and run:
   bash
python app.py
3. You should see output similar to:
   “`
   • Serving Flask app ‘app’
   • Debug mode: on
     WARNING: This is a development server. Do not use it in a production deployment.
     Use a production WSGI server instead.
   • Running on http://127.0.0.1:5000
     Press CTRL+C to quit
     “`
4. Open your web browser and go to http://127.0.0.1:5000. You should see “Welcome to My Flask Blog!”

Great! Our Flask app is up and running. Now, let’s make it display actual blog posts written in Markdown.

Creating Blog Posts

Inside your posts/ directory, create a new file named my-first-post.md (the .md extension is important for Markdown files):

Welcome to my very first blog post on my new Flask-powered blog!

This post is written entirely in **Markdown**, which makes it super easy to format.

## What is Markdown good for?
*   Writing blog posts
*   README files for projects
*   Documentation

It's simple, readable, and converts easily to HTML.

Enjoy exploring!

You can create more .md files in the posts/ directory, each representing a blog post.

Displaying Individual Blog Posts

Now, let’s modify app.py to read and display our Markdown files.

from flask import Flask, render_template, abort
import os
import markdown

app = Flask(__name__)
POSTS_DIR = 'posts' # Define the directory where blog posts are stored

def get_post_slugs():
    posts = []
    for filename in os.listdir(POSTS_DIR):
        if filename.endswith('.md'):
            slug = os.path.splitext(filename)[0] # Get filename without .md
            posts.append(slug)
    return posts

def read_markdown_post(slug):
    filepath = os.path.join(POSTS_DIR, f'{slug}.md')
    if not os.path.exists(filepath):
        return None, None # Post not found

    with open(filepath, 'r', encoding='utf-8') as f:
        content = f.read()

    # Optional: Extract title from the first heading in Markdown
    lines = content.split('\n')
    title = "Untitled Post"
    if lines and lines[0].startswith('# '):
        title = lines[0][2:].strip() # Remove '# ' and any leading/trailing whitespace

    html_content = markdown.markdown(content) # Convert Markdown to HTML
    return title, html_content

@app.route('/')
def index():
    post_slugs = get_post_slugs()
    # In a real app, you might want to read titles for the list too.
    return render_template('index.html', post_slugs=post_slugs)

@app.route('/posts/<slug>')
def post(slug):
    title, content = read_markdown_post(slug)
    if content is None:
        abort(404) # Show a 404 Not Found error if post doesn't exist

    return render_template('post.html', title=title, content=content)

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

New Additions Explained:
* POSTS_DIR = 'posts': A constant to easily reference our posts directory.
* get_post_slugs(): This function iterates through our posts/ directory, finds all .md files, and returns their names (without the .md extension). These names are often called “slugs” in web development, as they are part of the URL.
* read_markdown_post(slug): This function takes a slug (e.g., my-first-post), constructs the full file path, reads the content, and then uses markdown.markdown() to convert it into HTML. It also tries to extract a title from the first H1 heading.
* @app.route('/posts/<slug>'): This is a dynamic route. The <slug> part is a variable that Flask captures from the URL. So, if someone visits /posts/my-first-post, Flask will call the post() function with slug='my-first-post'.
* abort(404): If read_markdown_post returns None (meaning the file wasn’t found), we use abort(404) to tell the browser that the page doesn’t exist.
* render_template('post.html', title=title, content=content): Instead of returning raw HTML, we’re now telling Flask to use an HTML template file (post.html) and pass it variables (title and content) that it can display.

Creating HTML Templates

Now we need to create the HTML files that render_template will use. Flask looks for templates in a folder named templates/ by default.

templates/index.html (List of Posts)

This file will display a list of all available blog posts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask Blog</title>
    <style>
        body { font-family: sans-serif; margin: 20px; line-height: 1.6; }
        h1 { color: #333; }
        ul { list-style: none; padding: 0; }
        li { margin-bottom: 10px; }
        a { text-decoration: none; color: #007bff; }
        a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>Welcome to My Flask Blog!</h1>
    <h2>Recent Posts:</h2>
    {% if post_slugs %}
    <ul>
        {% for slug in post_slugs %}
        <li><a href="/posts/{{ slug }}">{{ slug.replace('-', ' ').title() }}</a></li>
        {% endfor %}
    </ul>
    {% else %}
    <p>No posts yet. Check back soon!</p>
    {% endif %}
</body>
</html>

Explanation of Jinja2 (Templating Language):
* {% if post_slugs %} and {% for slug in post_slugs %}: These are control structures provided by Jinja2, the templating engine Flask uses. They allow us to write logic within our HTML, like checking if a list is empty or looping through items.
* {{ slug }}: This is how you display a variable’s value in Jinja2. Here, slug.replace('-', ' ').title() is a simple way to make the slug look nicer for display (e.g., my-first-post becomes “My First Post”).

templates/post.html (Individual Post View)

This file will display the content of a single blog post.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - My Flask Blog</title>
    <style>
        body { font-family: sans-serif; margin: 20px; line-height: 1.6; }
        h1 { color: #333; }
        a { text-decoration: none; color: #007bff; }
        a:hover { text-decoration: underline; }
        .post-content img { max-width: 100%; height: auto; } /* Basic responsive image styling */
    </style>
</head>
<body>
    <nav><a href="/">← Back to Home</a></nav>
    <article class="post-content">
        <h1>{{ title }}</h1>
        {{ content | safe }} {# The 'safe' filter is important here! #}
    </article>
</body>
</html>

Explanation:
* {{ title }}: Displays the title of the post.
* {{ content | safe }}: This displays the HTML content that was generated from Markdown. The | safe filter is crucial here! By default, Jinja2 escapes HTML (converts < to <, > to >) to prevent security vulnerabilities like XSS. However, since we want to display the actual HTML generated from our trusted Markdown, we tell Jinja2 that this content is “safe” to render as raw HTML.

Running Your Complete Blog

1. Make sure you have app.py, the posts/ folder with my-first-post.md, and the templates/ folder with index.html and post.html all in their correct places within my-flask-blog/.
2. Ensure your virtual environment is active.
3. Stop your previous Flask app (if it’s still running) by pressing CTRL+C in the terminal.
4. Run the updated app:
   bash
python app.py
5. Open your browser and visit http://127.0.0.1:5000. You should now see a list of your blog posts.
6. Click on “My First Post” (or whatever you named your Markdown file) to see the individual post page!

Congratulations! You’ve just built a basic blog using Flask and Markdown!

Next Steps and Further Improvements

This is just the beginning. Here are some ideas to expand your blog:

• Styling (CSS): Make your blog look prettier by adding more comprehensive CSS to your templates/ (or create a static/ folder for static files like CSS and images).
• Metadata: Add more information to your Markdown posts (like author, date, tags) by using “front matter” (a block of YAML at the top of the Markdown file) and parse it in app.py.
• Pagination: If you have many posts, implement pagination to show only a few posts per page.
• Search Functionality: Allow users to search your posts.
• Comments: Integrate a third-party commenting system like Disqus.
• Database: For more complex features (user accounts, true content management), you’d typically integrate a database like SQLite (with Flask-SQLAlchemy).
• Deployment: Learn how to deploy your Flask app to a real web server so others can see it!

Building this basic blog is an excellent stepping stone into web development. You’ve touched upon routing, templating, handling files, and using external libraries – all fundamental concepts in modern web applications. Keep experimenting and building!

Hello there, aspiring web developers! Have you ever visited a website where the content changes based on what you click, or what time of day it is? That’s what we call a “dynamic” web page. Instead of just showing the same fixed information every time, these pages can adapt and display different data. Today, we’re going to dive into how to build such pages using two fantastic tools in Python: Flask and Jinja2.

This guide is designed for beginners, so don’t worry if these terms sound new. We’ll break everything down into easy-to-understand steps. By the end, you’ll have a clear idea of how to make your web pages come alive with data!

What is Flask? Your Lightweight Web Assistant

Let’s start with Flask. Think of Flask as a friendly helper that makes it easy for you to build websites using Python. It’s what we call a “micro web framework.”

• Web Framework: Imagine you want to build a house. Instead of making every single brick, window, and door from scratch, you’d use pre-made tools and construction methods. A web framework is similar: it provides a structure and ready-to-use tools (libraries) that handle common web tasks, so you don’t have to write everything from zero.
• Microframework: The “micro” part means Flask is designed to be lightweight and simple. It provides the essentials for web development and lets you choose additional tools if you need them. This makes it a great choice for beginners and for smaller projects, as it’s quick to set up and easy to learn.

With Flask, you can define specific “routes” (which are like addresses on your website, e.g., / for the homepage or /about for an about page) and tell Flask what Python code to run when someone visits those routes.

Here’s a tiny example of a Flask application:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

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

In this code:
* from flask import Flask: We bring in the Flask tool.
* app = Flask(__name__): We create a Flask application. __name__ simply tells Flask where to find things.
* @app.route("/"): This line is called a “decorator.” It tells Flask that when someone visits the main address of your website (represented by /), the hello_world function right below it should run.
* def hello_world(): return "<p>Hello, World!</p>": This function just sends back a simple HTML paragraph that says “Hello, World!”.
* if __name__ == "__main__": app.run(debug=True): This code makes sure that your Flask app starts running when you execute the Python file. debug=True is helpful for development because it shows you errors directly in your browser and automatically restarts the server when you make changes.

While this is nice for simple messages, what if you want to build a whole web page with lots of content, pictures, and styling? Sending all that HTML directly from Python code gets messy very quickly. This is where Jinja2 comes in!

What is Jinja2? Your Dynamic HTML Generator

Jinja2 is what we call a “templating engine” for Python.

• Templating Engine: Imagine you have a form letter. Most of the letter is the same for everyone, but you want to put a different name and address on each one. A templating engine works similarly for web pages. It allows you to create an HTML file (your “template”) with placeholders for data. Then, your Python code sends the actual data to this template, and Jinja2 fills in the blanks, generating a complete, dynamic HTML page.

Why do we need Jinja2?
* Separation of Concerns: It helps you keep your Python logic (how your application works, like fetching data) separate from your HTML presentation (how your web page looks). This makes your code much cleaner, easier to understand, and simpler to maintain.
* Dynamic Content: It enables you to display information that changes. For example, if you have a list of products, you don’t need to write separate HTML for each product. Jinja2 can loop through your list and generate the HTML for every product automatically.

Jinja2 uses a special syntax within your HTML files to indicate where dynamic content should go:
* {{ variable_name }}: These double curly braces are used to display the value of a variable that your Python code sends to the template.
* {% statement %}: These curly braces with percent signs are used for control structures, like if statements (for conditions) and for loops (to iterate over lists).
* {# comment #}: These are used for comments within your template, which won’t be shown on the actual web page.

Putting Them Together: Flask + Jinja2 for Dynamic Pages

The real magic happens when Flask and Jinja2 work together. Flask has a special function called render_template() that knows how to connect to Jinja2. When you call render_template('your_page.html', data=my_data), Flask tells Jinja2 to take your_page.html as the blueprint and fill it with the information provided in my_data.

For this to work, Flask has a convention: it expects your HTML template files to be stored in a folder named templates right inside your project directory.

Hands-on Example: Building a Simple Dynamic Page

Let’s build a simple web page that displays a welcome message and a list of programming languages.

1. Project Setup

First, create a new folder for your project. Let’s call it my_flask_app.
Inside my_flask_app, create two files and one folder:
* app.py (your Flask application code)
* templates/ (a folder to store your HTML files)
* Inside templates/, create index.html (your main web page template)

Your project structure should look like this:

my_flask_app/
├── app.py
└── templates/
    └── index.html

2. app.py (Your Flask Application)

Open app.py and add the following code:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    # Define some data we want to send to our HTML template
    user_name = "Beginner Coder"
    programming_languages = ["Python", "JavaScript", "HTML/CSS", "SQL", "Java"]

    # Use render_template to send data to index.html
    return render_template(
        "index.html", 
        name=user_name, 
        languages=programming_languages
    )

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

Explanation of app.py:
* from flask import Flask, render_template: We import both Flask and render_template. render_template is the key function that allows Flask to use Jinja2 templates.
* @app.route("/"): This defines our homepage.
* user_name = "Beginner Coder" and programming_languages = [...]: These are the pieces of data we want to display dynamically on our web page.
* return render_template("index.html", name=user_name, languages=programming_languages): This is the core part.
* "index.html" tells Flask to look for a file named index.html inside the templates folder.
* name=user_name sends the user_name variable from our Python code to the template, where it will be accessible as name.
* languages=programming_languages sends the programming_languages list, making it available as languages in the template.

3. index.html (Your Jinja2 Template)

Now, open templates/index.html and add this HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Dynamic Flask Page</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
        h1 { color: #0056b3; }
        ul { list-style-type: disc; margin-left: 20px; }
        li { margin-bottom: 5px; }
    </style>
</head>
<body>
    <h1>Welcome, {{ name }}!</h1> {# This will display the 'name' sent from Flask #}
    <p>This is your first dynamic web page built with Flask and Jinja2.</p>

    <h2>My Favorite Programming Languages:</h2>
    <ul>
        {# This is a Jinja2 'for' loop. It iterates over the 'languages' list. #}
        {% for lang in languages %}
            <li>{{ lang }}</li> {# This will display each language in the list #}
        {% endfor %}
    </ul>

    <h3>A little Flask fact:</h3>
    {# This is a Jinja2 'if' condition. #}
    {% if name == "Beginner Coder" %}
        <p>You're doing great learning Flask!</p>
    {% else %}
        <p>Keep exploring Flask and Jinja2!</p>
    {% endif %}

    <p>Have fun coding!</p>
</body>
</html>

Explanation of index.html:
* <h1>Welcome, {{ name }}!</h1>: Here, {{ name }} is a Jinja2 variable placeholder. It will be replaced by the value of the name variable that we sent from app.py (which was “Beginner Coder”).
* {% for lang in languages %} and {% endfor %}: This is a Jinja2 for loop. It tells Jinja2 to go through each item in the languages list (which we sent from app.py). For each lang (short for language) in the list, it will generate an <li>{{ lang }}</li> line. This means you don’t have to manually write <li>Python</li><li>JavaScript</li> and so on. Jinja2 does it for you!
* {% if name == "Beginner Coder" %} and {% else %} and {% endif %}: This is a Jinja2 if statement. It checks a condition. If the name variable is “Beginner Coder”, it displays the first paragraph. Otherwise (the else part), it displays the second paragraph. This shows how you can have content appear conditionally.

4. Running Your Application

1. Open your terminal or command prompt.
2. Navigate to your my_flask_app directory using the cd command:
   bash
cd my_flask_app
3. Run your Flask application:
   bash
python app.py
4. You should see output similar to this:
   “`
   • Serving Flask app ‘app’
   • Debug mode: on
     WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
   • Running on http://127.0.0.1:5000
     Press CTRL+C to quit
     “`
5. Open your web browser and go to http://127.0.0.1:5000.

You should now see your dynamic web page, greeting “Beginner Coder” and listing the programming languages! If you change user_name in app.py and save, the page will automatically update in your browser (thanks to debug=True).

Benefits of Using Flask and Jinja2

• Clean Code: Keeps your Python logic and HTML separate, making your project easier to manage.
• Reusability: You can create common template elements (like a header or footer) and reuse them across many pages, saving you time and effort.
• Power and Flexibility: Jinja2 allows you to implement complex logic directly within your templates, such as conditional display of content or looping through data.
• Beginner-Friendly: Both Flask and Jinja2 are known for their gentle learning curves, making them excellent choices for getting started with web development in Python.

Conclusion

Congratulations! You’ve just taken a significant step into the world of dynamic web development with Flask and Jinja2. You learned how Flask serves as your web application’s backbone, routing requests and managing data, while Jinja2 acts as your intelligent content renderer, transforming static HTML into engaging, data-driven web pages.

This combination is incredibly powerful and forms the basis for many Python web applications. Keep experimenting with different data and Jinja2 features. The more you play around, the more comfortable and creative you’ll become! Happy coding!

Welcome, budding developers! Have you ever wondered how websites show you the current weather for your city? It’s not magic, but rather a clever combination of web technologies talking to each other. In this blog post, we’re going to embark on an exciting journey to build our very own simple weather application using Flask, a lightweight web framework for Python, and a public API to fetch real-time weather data.

Don’t worry if these terms sound a bit daunting; we’ll break down everything into easy-to-understand steps. By the end of this guide, you’ll have a functional web app that can tell you the weather for any city you search for!

What You’ll Learn

• How to set up a basic Flask web application.
• What an API is and how to use it to get data.
• How to make web requests in Python to fetch external data.
• How to display dynamic (changing) data on a web page.
• The basics of JSON, a common format for sending data.

Prerequisites

Before we start coding, please make sure you have the following installed on your computer:

• Python 3: You can download it from the official Python website.
• pip: This is Python’s package installer, and it usually comes with Python.

Once Python is ready, open your terminal (on macOS/Linux) or Command Prompt/PowerShell (on Windows) and install the necessary libraries:

• Flask: Our web framework.
• Requests: A wonderful library for making web requests (like asking a server for data).

pip install Flask requests

Understanding APIs: Your Data Doorway

Before we dive into Flask, let’s understand the “API” part.

What is an API?

API stands for Application Programming Interface. Think of it like a menu at a restaurant. You don’t go into the kitchen to cook your food; you tell the waiter what you want from the menu, and the kitchen prepares it and sends it back to you.

Similarly, an API allows different software applications to talk to each other. In our case, our Flask app will “talk” to a weather service’s API, asking for weather information for a specific city. The weather service will then send that information back to our app.

Why use a Weather API?

Instead of trying to collect weather data ourselves (which would be incredibly complicated and require sensors and lots of complex calculations!), we can simply ask a specialized service that already collects and organizes this data. They provide an API for us to easily access it.

Choosing a Weather API: OpenWeatherMap

For this project, we’ll use OpenWeatherMap. It’s a popular and free-to-use (with limitations) service that provides current weather data.

Getting Your API Key

To use the OpenWeatherMap API, you’ll need a unique identifier called an API key. This key tells OpenWeatherMap who is asking for the data.

1. Go to the OpenWeatherMap website.
2. Sign up for a free account.
3. Once logged in, go to your profile (usually found by clicking your username) and then navigate to the “API keys” tab.
4. You’ll see a default API key, or you can create a new one. Copy this key; we’ll need it soon!
   • API Key (Supplementary Explanation): Think of an API key as your unique password or ID card that grants you access to use a specific service’s API. It helps the service know who is making requests and manage usage.

Setting Up Your Flask Project

Let’s organize our project files. Create a new folder for your project, say weather_app, and inside it, create the following structure:

weather_app/
├── app.py
└── templates/
    └── index.html

• app.py: This will be our main Python file where our Flask application lives.
• templates/: Flask looks for HTML files (our web page designs) inside this folder by default.
• index.html: Our single web page where users will enter a city and see the weather.

Fetching Weather Data with Python’s requests Library

First, let’s see how we can get weather data from OpenWeatherMap using Python.

The API Endpoint

Every API has specific web addresses, called endpoints, that you send your requests to. For current weather data from OpenWeatherMap, the endpoint looks something like this:

https://api.openweathermap.org/data/2.5/weather?q={city_name}&appid={your_api_key}&units=metric

Let’s break down the parts:

• https://api.openweathermap.org/data/2.5/weather: The base URL for current weather data.
• ?: Separates the base URL from the parameters (extra information) we’re sending.
• q={city_name}: This is where we tell the API which city we want weather for.
• appid={your_api_key}: This is where you put the API key you copied earlier.
• units=metric: This tells the API to give us temperatures in Celsius (use units=imperial for Fahrenheit).

Making the Request and Handling JSON

When the API sends back the weather data, it typically does so in a format called JSON.

• JSON (Supplementary Explanation): Stands for JavaScript Object Notation. It’s a simple, human-readable way to store and exchange data, often looking like a dictionary or list in Python. For example: {"city": "London", "temperature": 15}.

Here’s how we’d make a request and print the JSON response using Python:

import requests # We need this to make web requests

API_KEY = "YOUR_OPENWEATHERMAP_API_KEY"
BASE_URL = "https://api.openweathermap.org/data/2.5/weather"

def get_weather(city):
    params = {
        'q': city,
        'appid': API_KEY,
        'units': 'metric' # Or 'imperial' for Fahrenheit
    }
    response = requests.get(BASE_URL, params=params)

    # Check if the request was successful (status code 200 means OK)
    if response.status_code == 200:
        data = response.json() # Convert the JSON response into a Python dictionary
        return data
    else:
        print(f"Error fetching data: {response.status_code} - {response.text}")
        return None

if __name__ == "__main__":
    city_name = input("Enter city name: ")
    weather_data = get_weather(city_name)
    if weather_data:
        # You can explore the 'data' dictionary to find specific info
        # For example, to get temperature:
        temperature = weather_data['main']['temp']
        description = weather_data['weather'][0]['description']
        print(f"Weather in {city_name}: {temperature}°C, {description}")

Try running this script! It should ask for a city and then print out some weather info.

Integrating with Flask: Building Our Web App

Now, let’s bring Flask into the picture to create a web interface.

Building app.py

This file will handle our web requests, call the get_weather function, and then show the results on our web page.

from flask import Flask, render_template, request
import requests

app = Flask(__name__)

API_KEY = "YOUR_OPENWEATHERMAP_API_KEY"
BASE_URL = "https://api.openweathermap.org/data/2.5/weather"

def get_weather_data(city):
    params = {
        'q': city,
        'appid': API_KEY,
        'units': 'metric'
    }
    response = requests.get(BASE_URL, params=params)

    if response.status_code == 200:
        data = response.json()
        return {
            'city': data['name'],
            'temperature': data['main']['temp'],
            'description': data['weather'][0]['description'],
            'humidity': data['main']['humidity'],
            'wind_speed': data['wind']['speed']
        }
    else:
        return None

@app.route('/', methods=['GET', 'POST'])
def index():
    weather_info = None
    error_message = None

    if request.method == 'POST':
        city = request.form['city'] # Get the city name from the form
        if city:
            weather_info = get_weather_data(city)
            if not weather_info:
                error_message = "Could not retrieve weather for that city. Please try again."
        else:
            error_message = "Please enter a city name."

    # Render the HTML template, passing weather_info and error_message
    return render_template('index.html', weather=weather_info, error=error_message)

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

In this app.py file:

• @app.route('/'): This tells Flask what to do when someone visits the main page (/) of our website.
• methods=['GET', 'POST']: Our page will handle both GET requests (when you first visit) and POST requests (when you submit the form).
• request.form['city']: This is how we get the data (the city name) that the user typed into the form on our web page.
• render_template('index.html', weather=weather_info, error=error_message): This tells Flask to load our index.html file and pass it the weather_info (if available) and any error_message we might have. These pieces of data will be available inside our index.html file.

Creating the HTML Template (templates/index.html)

Now, let’s create the web page itself. This file will contain an input field for the city and display the weather data. We’ll use Jinja2 syntax (Flask’s templating engine) to show dynamic data.

• Jinja2 (Supplementary Explanation): A templating engine helps you mix Python code (like variables and loops) directly into your HTML. It allows you to create dynamic web pages that change based on the data you pass to them.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Weather App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            flex-direction: column;
        }
        .container {
            background-color: #fff;
            padding: 20px 40px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 400px;
            width: 100%;
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        form {
            margin-bottom: 20px;
        }
        input[type="text"] {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: calc(100% - 22px);
            margin-right: 10px;
            font-size: 16px;
        }
        button {
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .weather-result {
            margin-top: 20px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        .weather-result h2 {
            color: #555;
            margin-bottom: 10px;
        }
        .weather-result p {
            font-size: 1.1em;
            color: #666;
            margin: 5px 0;
        }
        .error-message {
            color: red;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Weather Checker</h1>
        <form method="POST">
            <input type="text" name="city" placeholder="Enter city name" required>
            <button type="submit">Get Weather</button>
        </form>

        {% if error %}
            <p class="error-message">{{ error }}</p>
        {% endif %}

        {% if weather %}
        <div class="weather-result">
            <h2>{{ weather.city }}</h2>
            <p><strong>Temperature:</strong> {{ weather.temperature }}°C</p>
            <p><strong>Description:</strong> {{ weather.description.capitalize() }}</p>
            <p><strong>Humidity:</strong> {{ weather.humidity }}%</p>
            <p><strong>Wind Speed:</strong> {{ weather.wind_speed }} m/s</p>
        </div>
        {% endif %}
    </div>
</body>
</html>

Key things to note in index.html:

• <form method="POST">: This form will send its data back to our Flask app using a POST request.
• <input type="text" name="city">: The name="city" part is crucial! This is how Flask identifies the data when you submit the form (remember request.form['city'] in app.py).
• {% if weather %}… {% endif %}: This is Jinja2 syntax. It means “if the weather variable has data (i.e., we successfully got weather info), then display the content inside this block.”
• {{ weather.city }}: This is also Jinja2. It means “display the city value from the weather variable that was passed from app.py.”

Running Your Application

1. Save everything: Make sure app.py is in your weather_app folder and index.html is inside the weather_app/templates folder.
2. Open your terminal/command prompt and navigate to your weather_app folder using the cd command.
   bash
cd weather_app
3. Run your Flask app:
   bash
python app.py
   You should see output similar to:
   “`
   • Serving Flask app ‘app’
   • Debug mode: on
     INFO: This is a development server. Do not use it in a production deployment.
     Use a production WSGI server instead.
   • Running on http://127.0.0.1:5000
     Press CTRL+C to quit
     “`
4. Open your web browser and go to http://127.0.0.1:5000.

You should now see your simple weather app! Enter a city name, click “Get Weather,” and behold the real-time weather information.

Conclusion

Congratulations! You’ve successfully built a basic weather application using Flask and integrated a public API to fetch dynamic data. You’ve touched upon core concepts like web frameworks, APIs, HTTP requests, JSON, and templating engines.

This is just the beginning! You can expand this app by:

• Adding more styling with CSS.
• Displaying additional weather details (like wind direction, sunrise/sunset times).
• Implementing error handling for invalid city names more gracefully.
• Adding a feature to save favorite cities.

Keep experimenting and happy coding!

Welcome, aspiring web developers! Are you looking for a fantastic way to showcase your skills and projects to the world? A personal portfolio website is an excellent tool for that, and building one from scratch is a rewarding experience. In this guide, we’re going to walk through how to create a simple yet effective portfolio website using Flask, a beginner-friendly Python web framework.

What is a Portfolio Website?

Imagine a digital resume that’s alive, interactive, and fully customized by you. That’s essentially what a portfolio website is! It’s an online space where you can:

• Introduce yourself: Tell your story, your interests, and your professional goals.
• Showcase your projects: Display your coding projects, designs, writings, or any work you’re proud of, often with links to live demos or code repositories (like GitHub).
• Highlight your skills: List the programming languages, tools, and technologies you’re proficient in.
• Provide contact information: Make it easy for potential employers or collaborators to reach out to you.

Having a portfolio website not only demonstrates your technical abilities but also shows your initiative and passion.

Why Choose Flask for Your Portfolio?

There are many ways to build a website, but for beginners using Python, Flask is an excellent choice.

• Flask Explained: Flask is a “micro” web framework for Python. What does “micro” mean? It means Flask is lightweight and doesn’t come with many built-in features like a database layer or complex form validation. Instead, it provides the essentials for web development and lets you choose what additional tools you want to use. This makes it very flexible and easy to understand for newcomers.
• Beginner-Friendly: Its simplicity means less boilerplate code (pre-written code you have to include) and a shallower learning curve compared to larger frameworks like Django. You can get a basic website up and running with just a few lines of code.
• Flexible and Customizable: While it’s simple, Flask is also incredibly powerful. You can extend it with various add-ons and libraries to build almost any kind of website. For a portfolio, this flexibility allows you to tailor every aspect to your unique style.
• Python Integration: If you’re already familiar with Python, using Flask feels very natural. You can leverage all your Python knowledge for backend logic, data processing, and more.

Getting Started: Setting Up Your Development Environment

Before we write any code, we need to set up our computer so Flask can run smoothly.

Prerequisites

To follow along, you’ll need:

• Python: Make sure you have Python 3 installed on your computer. You can download it from the official Python website (python.org).
• Basic HTML & CSS Knowledge: You don’t need to be an expert, but understanding how to structure web pages with HTML and style them with CSS will be very helpful.

Creating a Virtual Environment

A virtual environment is like a separate, isolated container for your Python projects. It ensures that the libraries you install for one project don’t conflict with libraries used by another project. This is a best practice in Python development.

1. Create a project folder:
   First, create a new folder for your portfolio website. You can name it my_portfolio or anything you like.
   bash
mkdir my_portfolio
cd my_portfolio

2. Create a virtual environment:
   Inside your my_portfolio folder, run the following command. venv is a module that creates virtual environments.
   bash
python3 -m venv venv
   This command creates a new folder named venv inside your project directory, which contains a separate Python installation.

3. Activate the virtual environment:
   Now, you need to “activate” this environment. The command depends on your operating system:

   • macOS / Linux:
     bash
source venv/bin/activate
   • Windows (Command Prompt):
     bash
venv\Scripts\activate.bat
   • Windows (PowerShell):
     bash
venv\Scripts\Activate.ps1
     You’ll know it’s active when you see (venv) at the beginning of your command line prompt.

Installing Flask

With your virtual environment activated, we can now install Flask.

pip install Flask

pip is Python’s package installer, used to install libraries like Flask.

Building Your First Flask Application

Every Flask application needs a main file, usually named app.py, and a place for your web pages (HTML files) and other resources.

Basic Application Structure

Let’s create the basic folders and files:

my_portfolio/
├── venv/
├── app.py
├── templates/
│   ├── index.html
│   └── about.html
└── static/
    └── css/
        └── style.css

• app.py: This is where your Flask application logic lives. It tells Flask which pages to show and what to do when a user visits them.
• templates/: Flask looks for your HTML files (your web pages) in this folder.
• static/: This folder is for static files like CSS (for styling), JavaScript (for interactivity), and images.

Your First Flask Code (app.py)

Let’s create a very simple Flask application that shows a “Hello, World!” message. Open app.py in your code editor and add the following:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    # render_template looks for an HTML file in the 'templates' folder.
    # It sends the content of index.html to the user's browser.
    return render_template('index.html')

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

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

Creating Your HTML Templates

Now, let’s create the index.html and about.html files inside the templates folder.

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio - Home</title>
    <!-- link_for is a Jinja2 function (Flask's templating engine)
         that helps generate URLs for static files.
         It makes sure the path to your CSS is correct. -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About Me</a>
            <!-- Add more links later -->
        </nav>
    </header>
    <main>
        <h1>Welcome to My Portfolio!</h1>
        <p>This is the home page. Learn more about me <a href="/about">here</a>.</p>
    </main>
    <footer>
        <p>&copy; 2023 My Awesome Portfolio</p>
    </footer>
</body>
</html>

templates/about.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio - About</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About Me</a>
        </nav>
    </header>
    <main>
        <h1>About Me</h1>
        <p>Hi, I'm [Your Name]! I'm a passionate [Your Profession/Interest] learning to build amazing things with Python and Flask.</p>
        <p>This section is where you'd write about your journey, skills, and aspirations.</p>
    </main>
    <footer>
        <p>&copy; 2023 My Awesome Portfolio</p>
    </footer>
</body>
</html>

Adding Some Style (static/css/style.css)

Let’s add a tiny bit of CSS to make our pages look less bare. Create style.css inside static/css/.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

footer {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    background-color: #333;
    color: #fff;
}

Running Your Application

Now that everything is set up, let’s see your portfolio website in action!

1. Make sure your virtual environment is active. If not, activate it using the commands mentioned earlier (e.g., source venv/bin/activate on macOS/Linux).
2. Navigate to your project’s root directory (where app.py is located) in your terminal.
3. Run the Flask application:
   bash
python app.py
   You should see output similar to this:
   “`
   • Serving Flask app ‘app’
   • Debug mode: on
     WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
   • Running on http://127.0.0.1:5000
     Press CTRL+C to quit
   • Restarting with stat
   • Debugger is active!
   • Debugger PIN: …
     “`
4. Open your web browser and go to http://127.0.0.1:5000. This is the local address where your Flask application is running.

You should now see your “Welcome to My Portfolio!” home page. Click on “About Me” in the navigation to go to the about page!

Expanding Your Portfolio

Now that you have the basics, here are ideas to make your portfolio shine:

• Projects Page: Create a /projects route and a projects.html template. Each project could have its own section with a title, description, image, and links to the live demo and code repository.
• Contact Page: Add a /contact route with a contact.html template. You can simply list your email, LinkedIn, and GitHub profiles, or even explore adding a simple contact form (which is a bit more advanced).
• Resume/CV: Link to a PDF version of your resume.
• Images: Use the static/ folder for images (static/img/your_project_screenshot.png) and reference them in your HTML using url_for('static', filename='img/your_image.png').
• Advanced Styling: Experiment more with CSS to match your personal brand. Consider using CSS frameworks like Bootstrap for responsive designs.
• Base Template: For larger sites, you’d typically create a base.html template with common elements (like header, navigation, footer) and then have other templates extend it. This avoids repeating code.

What’s Next? Deployment!

Once your portfolio website is looking great, you’ll want to share it with the world. This process is called deployment. It means taking your local Flask application and putting it on a public server so anyone can access it.

Some popular options for deploying Flask applications for free or at a low cost include:

• Render
• Heroku
• PythonAnywhere
• Vercel

Each platform has its own set of instructions, but they generally involve pushing your code to a Git repository (like GitHub) and then connecting that repository to the deployment service. This step is a bit more advanced but definitely achievable once you’re comfortable with the basics.

Conclusion

Congratulations! You’ve just built the foundation of your very own portfolio website using Flask. This project is not just about having an online presence; it’s a fantastic way to practice your Python, Flask, HTML, and CSS skills. Remember, your portfolio is a living document – keep updating it with your latest projects and learning experiences. Happy coding!