Open In App

Build a URL Shortener with Django

Last Updated : 03 Nov, 2025
Comments
Improve
Suggest changes
3 Likes
Like
Report

Django URL Shortener refers to a web application or reusable component built using Django that shortens long URLs into concise, shareable aliases making links easier to distribute on social media, emails, or documents while often tracking clicks for analytics.

Steps to create a URL Shortener

Consider a project named 'urlShort' having an app named 'url'. Create a model which will store original URLs and their shortened slugs.

Step 1: Creating the Models

A model is required to store both the original URL and its shortened version (slug).

In models.py:

Python
from django.db import models

class UrlData(models.Model):
    url = models.CharField(max_length=200)  # Store the original URL
    slug = models.CharField(max_length=15)  # Store the shortened slug

    def __str__(self):
        return f"Short URL for: {self.url} is {self.slug}"

In the above model:

  • url: This field stores the original URL.
  • slug: This field stores the shortened version of the URL (a 10-character string).

Step 2: Creating the Forms

A form is required to allow users to enter the URL they want to shorten.

Create a forms.py:

Python
from django import forms

class Url(forms.Form):
    url = forms.CharField(label="URL")  # Input field for the original URL

This form will be used in views to get the user’s original URL and process it.

Step 3: Creating the Views

Views handle the core logic of the URL shortener. In url/views.py:

1. urlShort(): Handle URL Shortening

This function takes the original URL from the form, generates a random 10-character slug, saves it in the database, and displays all shortened URLs.

Python
import random
import string
from django.shortcuts import render, redirect
from .models import UrlData
from .forms import Url

def urlShort(request):
    if request.method == 'POST':
        form = Url(request.POST)
        if form.is_valid():
            slug = ''.join(random.choice(string.ascii_letters) for _ in range(10))  # Generate slug
            url = form.cleaned_data["url"]  # Get original URL
            new_url = UrlData(url=url, slug=slug)  # Save to database
            new_url.save()
            return redirect('/')  # Redirect after saving
    else:
        form = Url()  # Empty form for GET request

    data = UrlData.objects.all()  # Fetch all shortened URLs
    context = {'form': form, 'data': data}
    return render(request, 'index.html', context)

2. urlRedirect(): Redirect to the Original URL

This function retrieves the original URL based on the slug and redirects the user to it. In url/views.py:

Python
from django.shortcuts import redirect
from .models import UrlData

def urlRedirect(request, slugs):
    # Find the original URL by the slug
    data = UrlData.objects.get(slug=slugs)
    return redirect(data.url)  # Redirect to the original URL

Step 4: Creating the Templates

The template displays the URL submission form and the list of shortened URLs.

Create a new file url/templates/index.html:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Shortener</title>
</head>
<body>
    <h1>Welcome to the URL Shortener</h1>

    <!-- Form to submit the original URL -->
    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Shorten URL</button>
    </form>

    <h2>Shortened URLs</h2>
    <ul>
        {% for entry in data %}
            <li>{{ entry.url }} → <a href="/u/{{ entry.slug }}">/u/{{ entry.slug }}</a></li>
        {% endfor %}
    </ul>
</body>
</html>

This template contains:

  • A form to input the original URL.
  • A list displaying all shortened URLs, each linked to its shortened path.

Step 5: Creating URL Routes

Connect the views to specific URLs by defining routes inside the urls.py file of the url app.

In url/urls.py:

Python
from django.urls import path
from . import views

app_name = "url"

urlpatterns = [
    path("", views.urlShort, name="home"),  # Home route for URL shortening form
    path("u/<str:slugs>", views.urlRedirect, name="redirect"),  # Redirect using the slug
]

In the above urls.py:

  • "" : Home route that displays the URL shortening form and list of shortened URLs.
  • "u/<str:slugs>" : Route to redirect users to the original URL based on the generated slug.

Step 6: Running the Project

Start the Django development server to test the URL shortener. In the project’s root directory, run:

python manage.py runserver

Open a web browser and visit:

http://localhost:8000/

Output

urlShortener
URL Shortener with Django

Article Tags :

Explore