Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Making a URL shortner app in Django
In this article, we will see how to make a URL shortener app in Django. It is a simple app which will convert a long URL into a short one using the pyshorteners library.
First, create a Django project and an app. Do some basic settings like including URLs of app and adding the app to INSTALLED_APPS in settings.py.
Installing Required Package
Install the pyshorteners module ?
pip install pyshorteners
Setting Up URLs
In app's urls.py ?
from django.urls import path
from .views import url_shortener
urlpatterns = [
path('', url_shortener.as_view(), name="url-shortener"),
]
Creating the View
In views.py ?
from django.shortcuts import render
import pyshorteners
from django.views import View
class url_shortener(View):
def post(self, request):
long_url = request.POST.get('url')
if long_url:
pys = pyshorteners.Shortener()
short_url = pys.tinyurl.short(long_url)
return render(request, 'urlShortener.html',
context={'short_url': short_url, 'long_url': long_url})
return render(request, 'urlShortener.html')
def get(self, request):
return render(request, 'urlShortener.html')
The view has two request handler methods: get() renders the frontend template, while post() processes the long URL and returns the shortened version.
Creating the Template
Create a templates folder in the app's directory and add urlShortener.html ?
<!DOCTYPE html>
<html>
<head>
<title>URL Shortener</title>
<style>
body { font-family: Arial, sans-serif; margin: 50px; }
.container { max-width: 600px; margin: auto; }
input[type="url"] { width: 300px; padding: 10px; margin: 5px; }
button { padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<div class="container">
<h1>URL Shortener Application</h1>
<form method="POST">{% csrf_token %}
<input type="url" name="url" placeholder="Enter the link here" required>
<button type="submit">Shorten URL</button>
</form>
{% if short_url %}
<div style="margin-top: 30px;">
<h3>Your shortened URL</h3>
<div>
<input type="text" id="short_url" value="{{short_url}}" readonly>
<button onclick="copyToClipboard()">Copy URL</button>
<small id="copied"></small>
</div>
<br>
<span><b>Original URL: </b></span>
<a href="{{long_url}}" target="_blank">{{long_url}}</a>
</div>
{% endif %}
</div>
<script>
function copyToClipboard() {
var shortUrl = document.getElementById("short_url");
shortUrl.select();
shortUrl.setSelectionRange(0, 99999);
document.execCommand("copy");
document.getElementById("copied").innerHTML = "Copied!";
setTimeout(function(){
document.getElementById("copied").innerHTML = "";
}, 2000);
}
</script>
</body>
</html>
How It Works
The application follows this workflow:
- User enters a long URL in the input field
- Form submits via POST to the same view
- The
pyshortenerslibrary creates a shortened URL using TinyURL service - Both original and shortened URLs are displayed
- User can copy the shortened URL to clipboard
Key Features
- Simple Interface: Clean form for URL input
- Copy Functionality: JavaScript function to copy shortened URL
- URL Validation: HTML5 URL input type ensures valid URLs
- External Links: Original URL opens in new tab
Conclusion
This Django URL shortener app demonstrates how to integrate external Python libraries with Django views. The pyshorteners library handles the URL shortening, while Django manages the web interface and user interactions.
445 Views
