Build a URL Size Reduce App with Django
Last Updated :
26 Apr, 2025
Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. In this article, we will learn to build a URL shortener using Django. A URL shortener is used to reduce the size of long URLs. Short URLs are better for sharing purposes. In this article, we will use Bitly API to shorten our URL. For this, we will be having 2 pages, one to enter the URL and another to show shortened URL. When the user will visit the site, on the home page he can enter the URL and click on submit button. When the user will click on submit button, the URL will go to the backend and it will be processed. After processing, a new short URL is generated, which will be rendered on the next page from where the user can see it.
What is Bitly API?
Bitly is the most widely trusted link management platform in the world. By using the Bitly API, you will exercise the full power of your links through automated link customization, mobile deep linking, and click analytics.
Generating access tokens on Bitly website
Step 1: Create an account on https://bitly.com/.
Step 2: Login to Bitly and go to settings.
Step 3: In settings select API. Then Enter your password and Generate an access token.
Setup of a Django Project
This is the final file structure after completing the project.
File Structure
Step 1: Start a project with the following command, and Change the directory to URL_Shortner:
django-admin startproject URL_Shortner
cd URL_Shortner
Step 2: Create an app.
python manage.py startapp home
Step 3: In the current directory create a templates folder. In this, we will store our HTML files.
Step 4: Add the home app to the INSTALLED_APPS list in the URL_Shortner/settings.py file.
Step 5: Set the templates directory in the URL_Shortner/settings.py file.
Step 6: Update the urls.py of the project.
Python3
from django.contrib import admin
from django.urls import path, include
import home
urlpatterns = [
path('admin/', admin.site.urls),
path('', include(home.urls)),
]
|
Step 7: Create an urls.py file in the home directory(app).
Python3
from django.urls import path
from home import views
urlpatterns = [
path('',views.index),
path('index_form',views.index_form),
]
|
Step 8: As we have completed the basic setup, now we need to add functionality to it. Create index.html and new_url.html files in the templates folder. We will use Bootstrap in index.html and new_url.html files.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color: rgb(171, 240, 254);
}
.selfhead{
font-size: 90px;
font-weight: bolder;
font-family: 'Baloo Chettan 2', cursive;
}
@media only screen and (max-width:485px){
.selfhead{
font-size: 50px;
font-weight: bold;
}
}
</style>
<title>GFG</title>
</head>
<body>
<div class="container" id="Contact-us">
<div class="selfhead text-center py-0 ">
URL shortener
</div>
</div>
<div class="container my-3">
<form method="post" action="/index_form">
{%csrf_token%}
<div class="mb-3">
<label for="url" class="form-label fw-bold">Enter Long URL</label>
<input type="text" class="form-control" id="url" aria-describedby="emailHelp" placeholder="Enter your URL" name="long_url">
</div>
<p class="text-center"><button type="submit" class="btn btn-danger">Submit</button>
</p>
</form>
</div>
</body>
</html>
|
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color: rgb(171, 240, 254);
}
.selfhead{
font-size: 90px;
font-weight: bolder;
font-family: 'Baloo Chettan 2', cursive;
}
@media only screen and (max-width:485px){
.selfhead{
font-size: 50px;
font-weight: bold;
}
}
</style>
<title>GFG</title>
</head>
<body>
<div class="container" id="Contact-us">
<div class="selfhead text-center py-0 ">
URL shortener
</div>
</div>
<div class="container my-3">
<form method="post" action="/index_form">
{%csrf_token%}
<div class="mb-3">
<label for="url" class="form-label fw-bold">Enter Long URL</label>
<input type="text" class="form-control" id="url" aria-describedby="emailHelp" placeholder="Enter your URL" name="long_url">
</div>
<p class="text-center"><button type="submit" class="btn btn-danger">Submit</button>
</p>
</form>
</div>
</body>
</html>
|
home/views.py
In the views.py page, we have three functions that are index(),index_form(), and shorten_url(). When users visit our website, the index() function is called and it renders the “index.html” page. And when the user Enters the URL on the home page and then clicks on submit button, the form is submitted and this form submission is handled by the index_form() function. In this function, we get the URL that is entered by the user and use our shorten_url() function to call the API and shorten our URL. And finally, we render our shortened URL on a new page.
Python3
from django.shortcuts import render
import requests
import json
def index(request):
return render(request, 'index.html')
def index_form(request):
if request.method == "POST":
long_url = request.POST.get('long_url')
new_url = shorten_url(long_url)
return render(request, "new_url.html", context={'url': new_url})
return render(request, 'index.html')
def shorten_url(url):
headers = {
'Authorization': 'Bearer f87979ebfc5c57f24a00218b7f5e94f95669b568',
'Content-Type': 'application/json',
}
data_dict = {"long_url": url, "domain": "bit.ly"}
data = json.dumps(data_dict)
response = requests.post(
response_dict = json.loads(response.text)
print(response_dict)
return response_dict['link']
|
Step 10: Now we can run the server to see our URL shortener:
python manage.py runserver
Output:
On submitting the URL a new page appears with a new short link.
OUTPUT
Similar Reads
How to build a URL Shortener with Django ?
Building a URL Shortener, Is one of the Best Beginner Project to Hone your Skills. In this article, we have shared the steps to build a URL shortener using Django Framework. To know more about Django visit - Django Tutorial SetupWe need some things setup before we start with our project. We will be
4 min read
Building Web App with Django and FastAPI
Django is a powerful and popular web framework for building robust web applications with Python. It comes with a lot of built-in features, including an ORM, an authentication system, and a powerful admin interface. However, there are scenarios where you might want to integrate Django with FastAPI, a
4 min read
Building an Issue Tracker with Django
In this article, we will guide you through creating an Issue Tracker using Django. A Django issue tracker is a web-based application designed to help software development teams manage and track bugs, tasks, and feature requests efficiently. Leveraging Django's powerful framework, this project provid
6 min read
Building APIs using FastAPI with Django
Combining FastAPI and Django can leverage the strengths of both frameworks: FastAPI's high performance for building APIs and Django's powerful ORM and admin interface. In this guide, we'll outline how to integrate FastAPI into a Django project to build high-performance APIs. In this article, we will
3 min read
Build a Calculator with React, Tailwind, and Django
This article will guide you in creating a calculator using React and Tailwind with the Django Framework. We'll explore the integration of Django, React, and Tailwind, and go through the step-by-step process of implementing the calculator. What is a Calculator?A calculator is a device or tool designe
6 min read
Get the Absolute URL with Domain in Django
When developing web applications, generating the full URL (including the domain) is often necessary. For instance, sending confirmation emails with links, generating sitemaps, or creating social media share links require absolute URLs. Django provides several utilities and methods to achieve this se
3 min read
Django REST API - CRUD with DRF
Django REST Framework is used to create web APIs very easily and efficiently. This is a wrapper around the Django Framework. There are three stages before creating an API through the REST framework, Converting a Model’s data to JSON/XML format (Serialization), Rendering this data to the view, and Cr
7 min read
Build a Flashcards using Django
Flashcards are an effective tool for studying and memorizing information. Building a flashcards application using Django allows you to create a robust, scalable, and easy-to-maintain web application. This article will guide you through the process of creating a flashcard app using Django. In this ar
5 min read
Get the Current URL within a Django Template
Django, a high-level Python web framework, encourages rapid development and clean, pragmatic design. One common requirement when developing web applications is to access the current URL within a template. This can be useful for various purposes such as highlighting the active link in a navigation me
3 min read
Build a To-Do application Using Django, React and Tailwind
This article will guide you in creating a To-Do application using React and Tailwind with the Django Framework. We’ll explore the integration of Django, React, and Tailwind, and go through the step-by-step process of implementing the To-Do application. What is a To-Do application?A To-Do application
6 min read