HomeBlogs
Try Complier
HomeBlogsPython Complier

Django Framework : Build URL Shortener Application Using Django and Pyshorteners

Python
Django
Projects
Django projects
Jan 22 2024 . 5 min read
unsplashimagePhoto by Bilal O. on Unsplash

Table of Content

In this article, we are going to build a simple URL Shortener application using django and pyshortener package, that will going to short the long urls, so let's dive into.


img

Install Dependencies

We need to install these two dependencies to start with this project :


Install django and pyshorteners by this command

pip install django pyshorteners

It will install both dependencies in a single hit. Let's dive next to setup our django project.

Setup the Django Project

First, let's create a setup a simple django project by following these instructions :


  1. Let's create a django project i am giving a project name `urlshortener`.
    2. django-admin startproject urlshortener

  2. Next move inside to `urlshortener` project.
    3. cd urlshortener

  3. Now Let's create a app i am giving a app name `main`.
    4. python3 manage.py startapp main

  4. Next, register our app under `INSTALLED_APPS`.
    5. settings.py
    1. INSTALLED_APPS = [
    2.    ...
    3.    'main.apps.MainConfig'
    4.    ...
    5. ]

  5. All set, our project is setup successfully. Cheers

Design the URL Shortener Application UI

Next we are going to build the UI for our URL Shortener application using `django templates`.


We will create a `templates/url-shortener.html` folder and file inside our `main` app.

Next, we are going to write the UI code for our url shortener application in `url-shortener.html` template file.

url-shortener.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <title> URL Shortener </title>
  8.     <!-- Boostrap CDN -->
  9.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  11.     <!-- Google fonts CDN -->
  12.     <link rel="preconnect" href="https://fonts.googleapis.com" />
  13.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  14.     <link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
  16.     <!-- CSS Code -->
  17.     <style>
  18.       body {
  19.         font-family: 'Darker Grotesque', sans-serif;
  20.        }
  21.     </style>
  22.   </head>
  23.   <body class="bg-light">
  24.     <div class="container" style="width: 40%;margin-top: 5rem;">
  26.       <!-- Flash Message -->
  27.       <div class="p-5 text-center shadow bg-white" style="border-radius: 15px;">
  28.         {% if messages %}
  29.           {% for message in messages %}
  30.             <div class="alert alert-success text-center fs-5">
  31.               {{message}}
  32.               </div>
  33.           {% endfor %}
  34.         {% endif %}
  35.       </div>
  37.       <!-- Url Shortener Form -->
  38.       <h1>URL Shorter Application</h1>
  39.       <div class="mt-5">
  40.         <form action="" method="post">
  41.           {% csrf_token %}
  42.           <input type="url" name="url" value="{{url}}" required class="form-control py-3" placeholder="Enter long link here">
  43.           <div class="mt-3 d-grid">
  44.             <button class="btn btn-primary p-3 fs-4 text-white">Shorten url</button>
  45.           </div>
  46.         </form>
  47.       </div>
  49.       <!-- Result Container -->
  50.       {% if messages %}
  51.         <div class="mt-5 bg-white border p-3 shadow" style="border-radius: 15px;">
  52.           <div class="d-flex align-items-center justify-content-between">
  53.             <span id="short-url" class="fs-5">{{short_url}}</span>
  54.           </div>
  55.         </div>
  56.         <div class="mt-3">
  57.           <a href="" class="btn btn-success btn-sm fs-6">Shorten Another</a>
  58.           </div>
  59.       {% endif %}
  61.     </div>
  63.     <!-- Javascript Code -->
  64.     <script>
  65.       const copy_url = () =>
  66.         const short_url = document.getElementById("short-url").innerText
  67.         navigator.clipboard.writeText(short_url);
  68.       }
  69.     </script>
  70.   </body>
  71. </html>

Write the URL Shortener logic in view function

Next, we are going to create a view function, there we will implement the logic for url shortener

views.py
  1. from django.shortcuts import render
  2. import pyshorteners
  3. from django.contrib import messages
  6. def url_shortener(request):
  7.     try:
  8.         short_url = ""
  9.         url = ""
  10.         if request.method == "POST":
  11.              shortener = pyshorteners.Shortener()
  12.              url = request.POST.get("url")
  13.              short_url = shortener.tinyurl.short(url)
  14.              messages.success(request, "Generated")
  15.         return render(
  16.             request,"url-shortener.html", {"short_url": short_url, "url": url}
  17.         )
  18.     except:
  19.         returnrender(request, "url-shortener.html")

Next, just link the url to this view

urls.py
  1. from .views import url_shortener
  2. from django.urls import path
  5. urlpatterns = [
  6.     path("", url_shortener, name="url-shortener"),
  7. ]

Conclusion

This is the simple url shortener application we have build in the aricle. You can even add more features to this url shortener application like generate QRCode for this url etc.

You can find the complete code of this project on my github account. If you want add something you can feel free to reach out to me.

Latest Posts

BlogsAbout meContact me
Copyright © 2024 Pythonworld.