Flask: The Web Framework#

Flask is a lightweight Python web framework. It provides the necessary tools to handle HTTP requests, route URLs to specific functions, and manage web application logic. Its minimalist design makes it easy to learn and use for projects of varying sizes. For a URL shortener, Flask will manage the submission of long URLs, generate short codes, store mappings in the database, and handle redirection requests.

SQLite: The Database#

SQLite is a serverless, self-contained, file-based SQL database engine. It is ideal for smaller applications or development environments where setting up a separate database server is unnecessary. SQLite stores the data persistence for the URL shortener, specifically the table that pairs the unique short codes with their corresponding original URLs. The database operates as a single file, making setup and management straightforward.

Bootstrap: The Frontend Framework#

Bootstrap is a popular open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. Using Bootstrap simplifies the creation of a user-friendly interface for the URL shortener, ensuring it looks presentable and functions well across different devices without extensive manual CSS coding.

Short Code Generation#

A critical component of a URL shortener is the method used to generate unique short codes. These codes must be relatively short and unique to avoid collisions (two different long URLs mapping to the same short code). Common techniques include:

• Sequential IDs: Using a database primary key (auto-incrementing integer) and converting it to a different base (e.g., base62 using a-z, A-Z, 0-9). This guarantees uniqueness.
• Hashing: Using a cryptographic hash function and potentially truncating the output. Requires collision handling.
• Random String Generation: Creating random strings and checking for existence in the database, regenerating if a collision occurs.

For simplicity and guaranteed uniqueness, using a database’s auto-incrementing ID converted to a different base is a robust approach for a basic implementation.

Step-by-Step Guide to Building the Shortener

This section outlines the process of building the URL shortener using Flask, SQLite, and Bootstrap.

1. Project Setup and Dependencies#

Begin by setting up a project directory and installing the required Python packages.

1
mkdir url-shortener
2
cd url-shortener
3
pip install Flask Flask-SQLAlchemy shortuuid

• Flask: The web framework.
• Flask-SQLAlchemy: A Flask extension that adds support for SQLAlchemy, an Object-Relational Mapper (ORM), making database interactions simpler.
• shortuuid: A library for generating short, unique, unambiguous, and URL-safe UUIDs. This is an alternative to converting integer IDs and provides unique codes out-of-the-box.

2. Database Model Definition#

Define the database structure using Flask-SQLAlchemy. A single table is needed to store the original URL and its corresponding short code.

Create a file (e.g., app.py) and set up the basic Flask application and database connection.

1
from flask import Flask, render_template, request, redirect, url_for
2
from flask_sqlalchemy import SQLAlchemy
3
import shortuuid
4
import os
5

6
# Setup Flask application
7
app = Flask(__name__)
8
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///urls.db' # SQLite database file
9
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
10
db = SQLAlchemy(app)
11

12
# Define the database model
13
class URL(db.Model):
14
    id = db.Column(db.Integer, primary_key=True)
15
    original_url = db.Column(db.String(500), nullable=False)
16
    short_code = db.Column(db.String(10), unique=True, nullable=False)
17

18
    def __init__(self, original_url, short_code):
19
        self.original_url = original_url
20
        self.short_code = short_code
21

22
# Create database tables
23
# This should ideally be handled by Flask-Migrate for production, but for simplicity:
24
with app.app_context():
25
    db.create_all()

• The URL model represents a row in the urls table.
• id: An auto-incrementing primary key.
• original_url: Stores the long URL.
• short_code: Stores the generated short code, ensuring it’s unique.
• db.create_all() creates the table if it doesn’t exist when the application context is available.

3. Frontend Design with Bootstrap#

Create the HTML templates for the user interface. This requires a directory named templates in the project root.

Inside the templates directory, create index.html. This file will contain the form for submitting long URLs and display the resulting short URL. Include Bootstrap CSS for styling.

1
<!doctype html>
2
<html lang="en">
3
<head>
4
    <!-- Required meta tags -->
5
    <meta charset="utf-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7

8
    <!-- Bootstrap CSS -->
9
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
10

11
    <title>URL Shortener</title>
12
</head>
13
<body>
14
    <div class="container mt-5">
15
        <h1 class="text-center mb-4">Shorten Your URL</h1>
16
        <form method="POST" action="/">
17
            <div class="form-group">
18
                <label for="long_url">Enter Long URL:</label>
19
                <input type="url" class="form-control" id="long_url" name="long_url" required>
20
            </div>
21
            <button type="submit" class="btn btn-primary btn-block">Shorten</button>
22
        </form>
23

24
        {% if short_url %}
25
            <div class="mt-4 alert alert-success" role="alert">
26
                Your shortened URL: <a href="{{ short_url }}" target="_blank">{{ short_url }}</a>
27
            </div>
28
        {% endif %}
29

30
        {% if error %}
31
            <div class="mt-4 alert alert-danger" role="alert">
32
                {{ error }}
33
            </div>
34
        {% endif %}
35
    </div>
36

37
    <!-- Optional JavaScript -->
38
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
39
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
40
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
41
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
42
</body>
43
</html>

• This template uses Bootstrap classes (container, mt-5, form-group, btn, alert) for basic layout and styling.
• It includes a form to submit the long_url.
• Flask’s Jinja templating ({% if short_url %}, {{ short_url }}) is used to display the result or any error messages.

4. Implementing Flask Routes#

Now, add Flask routes to app.py to handle the homepage (GET and POST) and the redirection route.

1
# ... (previous imports and database setup) ...
2

3
@app.route('/', methods=['GET', 'POST'])
4
def index():
5
    if request.method == 'POST':
6
        original_url = request.form['long_url']
7
        if not original_url:
8
            return render_template('index.html', error="URL cannot be empty.")
9

10
        # Generate a short code
11
        # Using shortuuid ensures uniqueness reasonably well without checking DB every time initially
12
        short_code = shortuuid.uuid()[:7] # Generate a short, unique code
13

14
        # Check if code already exists (unlikely with shortuuid, but good practice)
15
        existing_url = URL.query.filter_by(short_code=short_code).first()
16
        while existing_url: # Rare, but handle collision
17
             short_code = shortuuid.uuid()[:7]
18
             existing_url = URL.query.filter_by(short_code=short_code).first()
19

20
        # Create new URL object and save to database
21
        new_url = URL(original_url=original_url, short_code=short_code)
22
        db.session.add(new_url)
23
        db.session.commit()
24

25
        # Construct the full short URL
26
        short_url = request.url_root + short_code
27
        return render_template('index.html', short_url=short_url)
28

29
    # Handle GET request for the homepage
30
    return render_template('index.html')
31

32
@app.route('/<short_code>')
33
def redirect_to_url(short_code):
34
    # Retrieve the original URL from the database using the short code
35
    url_mapping = URL.query.filter_by(short_code=short_code).first()
36

37
    if url_mapping:
38
        # Redirect to the original URL
39
        return redirect(url_mapping.original_url)
40
    else:
41
        # Handle cases where the short code does not exist
42
        return render_template('404.html'), 404 # Assume a 404.html template exists or render a simple message

• The / route handles both GET (displaying the form) and POST (processing the form submission).
• On POST, it retrieves the long_url from the form data.
• It generates a unique short_code using shortuuid. A basic collision check is included.
• A new URL object is created and added to the database session, then committed.
• The full short_url is constructed (e.g., http://127.0.0.1:5000/<code>).
• The / template is rendered again, passing the short_url to be displayed.
• The /<short_code> route handles incoming requests to the short URLs.
• It queries the database for the short_code.
• If found, it uses redirect() to send the user to the original_url.
• If not found, it renders a 404 error page (requires creating a simple 404.html or modifying the code to render text).

5. Running the Application#

Add the standard Flask runner code at the end of app.py.

1
# ... (previous code) ...
2

3
if __name__ == '__main__':
4
    app.run(debug=True) # Run the Flask application in debug mode

Now, from the project directory, run the application:

1
python app.py

The server will start, typically on http://127.0.0.1:5000/. Accessing this address in a web browser will show the form. Submitting a long URL will generate and display the short URL. Visiting the short URL will redirect to the original long URL.

Real-World Application Example

Consider a marketing campaign where a company wants to share a link to a specific product page on social media platforms like Twitter, which have character limits.

• Original URL: https://www.example.com/products/new-amazing-gadget-launch-special-offer (potentially very long)
• Using the Shortener: The marketing team enters this long URL into the built Flask shortener.
• Shortener Output: The shortener processes the request, generates a unique code (e.g., AbCd12), and saves the mapping in the SQLite database. It displays the short URL: http://yourshortenersite.com/AbCd12.
• Sharing: The team shares http://yourshortenersite.com/AbCd12 on Twitter. This concise link fits within the character limit and looks cleaner.
• User Experience: When a user clicks http://yourshortenersite.com/AbCd12, the request goes to the Flask application’s /<short_code> route. The application looks up AbCd12 in the SQLite database, finds the corresponding original URL, and redirects the user seamlessly to the product page.

This demonstrates the practical utility of the built shortener: providing a simple, effective way to manage and share long links using standard web technologies and a lightweight database.

Key Takeaways

• Building a URL shortener involves a backend for logic and data, a database for storage, and a frontend for user interaction.
• Flask provides a flexible framework for handling web requests and application flow.
• SQLite offers a simple, file-based database solution suitable for small to medium-sized applications or development.
• Bootstrap simplifies the creation of a responsive and user-friendly web interface.
• Generating unique short codes is crucial, with methods like converting sequential IDs or using libraries like shortuuid.
• The core functionality involves two routes: one to accept long URLs and return short codes, and one to accept short codes and redirect to original URLs.
• The shortener enables the use of concise links for sharing, improving readability and fitting within character constraints.