URL Shortener Project using Django with Source Code
The URL Shortener Project using Django is created using Python Django Framework. The system is built fully in Django Framework in back-end and HTML, CSS in front-end. Django is a high-level Python Web framework encouraging rapid development and pragmatic, clean design.
This URL Shortener Project using Django can perform all the tasks such as customizing the shortened URL code to your desired code or programming it to create random slugs for the shortened URL. This system project also provides an admin panel from which, along with its redirected links, all shortened URLs can be monitored.
To start creating a URL Shortener Project using Django with Source Code, makes sure that you have PyCharm Professional IDE Installed in your computer.
Watch the video here to see the full running URL Shortener Project Using Django With Source code
This URL Shortener Project using Django also includes a Download Source Code for free, just find the downloadable source code below and click download now.
Steps on How to Create a URL Shortener Project using Django with Source Code
URL Shortener Project using Django with Source Code
- Step 1: Open file.
First , open “pycharm professional” after that click “file” and click “new project“.
- Step 2: Choose Django.
Second, after click “new project“, choose “Django” and click.
- Step 3: Select file location.
Third, select a file location wherever you want.
- Step 4: Create application name.
Fourth, name your application.
- Step 5: Click create.
Fifth, finish creating project by clicking “create” button.
- Step 6: Start Coding.
In this final step, we will now start adding functionality to our Django Framework by adding some functional codes.
This are the module to add functionality for URL Shortener Project using Django
- Create Models in URL Shortener Project using Django.
In this section, we will learn on how to create a model events. To start with, add the following code in your models.py under the folder of router files to build two tables in your database.
|
1 2 3 4 5 6 7 8 9 |
from django.db import models # Create your models here. class Route(models.Model): original_url = models.URLField(help_text= "Add the original URL that you want to shorten.") key = models.TextField(unique= True, help_text= "Add any random characters of your choice to shorten it.") def __str__(self): return f"{self.key}" |
In the code above starting by importing the models from django.db and creating a class for route. Which is it has two fields such as original_url and the key.
- Create Migration in URL Shortener Project using Django.
Add the following code in your 0001_initial.py under the folder of migration file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
from django.db import migrations, models class Migration(migrations.Migration): initial = True dependencies = [ ] operations = [ migrations.CreateModel( name='Route', fields=[ ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), ('short_url', models.URLField()), ('original_url', models.URLField()), ], ), ] |
In the code given above, which is for the function to stores changes to our models in the Django application.
Create Design in URL Shortener Project using Django.
In this section, we will learn on how to put a design to our website. To start with, add the following code in your main.css under the folder of router/static/router files.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
body { background: navajowhite; color: black; margin-top: 5rem; } h1, h2, h3, h4, h5, h6 { color: black; } ul { margin: 0; } .bg-steel { background-color: darkblue; } .site-header .navbar-nav .nav-link { color: white; } .site-header .navbar-nav .nav-link:hover { color: yellow; } .site-header .navbar-nav .nav-link.active { font-weight: 500; } .content-section { /* background: #ffffff; */ padding: 10px 20px; /* border: 1px solid #dddddd; */ border-radius: 3px; margin-bottom: 20px; } .article-title { color: green; } a.article-title:hover { color: green; text-decoration: none; } .article-content { white-space: pre-line; } .article-img { height: 65px; width: 65px; margin-right: 16px; } .article-metadata { padding-bottom: 1px; margin-bottom: 4px; border-bottom: 1px solid #e3e3e3 } .article-metadata a:hover { color: #333; text-decoration: none; } .article-svg { width: 25px; height: 25px; vertical-align: middle; } .account-img { height: 125px; width: 125px; margin-right: 20px; margin-bottom: 16px; } .account-heading { font-size: 2.5rem; } |
In the code given above, which is for the design of a header title, navigation bar and background for a website.
- Create Templates for the base in URL Shortener Project using Django.
In this section, we will learn on how create a templates for the base. To start with, add the following code in your base.html under the folder of router/templates files.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="{% static 'router/main.css' %}"> <title>URL Shortener Project</title> </head> <body> <header class="site-header"> <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top"> <div class="container"> <a class="navbar-brand mr-4" href="{% url 'home' %}">URL Shortener</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarToggle"> <div class="navbar-nav mr-auto"> <a class="nav-item nav-link" href="{% url 'home' %}">Home</a> <a class="nav-item nav-link" href="{% url 'how-to' %}">How to Use</a> <a class="nav-item nav-link" href="{% url 'url-list' %}">List of All URLs</a> </div> </div> </div> </nav> </header> <main role="main" class="container"> <div class="row"> <div class="col-md-8"> {% if messages %} {% for message in messages %} <div class="alert alert-{{ message.tags }}"> {{ message }} </div> {% endfor %} {% endif %} {% block content %}{% endblock %} </div> </div> </main> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
After adding the code, you may click the run button to test the code. The output should look like as shown below.
- Viewing the list of URLs for URL Shortener Project using Django.
In this section, we will learn how to view the list of URLs for Voting System with Charts using Django. To start with, add the following code in your “router_list.html“ under the folder of router/templates files.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
{% extends 'router/base.html' %} {% block content %} <h2>List of all the Links Shortened till date:</h2> {% for url in urls %} <article class="media content-section"> <div class="media-body"> <h5>Shortened Link: <a class="mr-2" target="_blank" href="https://{{ request.get_host }}/{{ url.key }}">https://{{ request.get_host }}/{{ url.key }}</a></h5> <div> <h5>Original Link: <a class="mr-2" target="_blank" href="{{ url.original_url }}">{{ url.original_url }}</a></h5> </div> </div> </article> {% endfor %} {% if is_paginated %} {% if page_obj.has_previous %} <a class="btn btn-success mb-4" href="?page=1">&laquo; First</a> <a class="btn btn-success mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a> {% endif %} {% for num in page_obj.paginator.page_range %} {% if page_obj.number == num %} <a href="?page={{ num }}" class="btn btn-info mb-4">{{ num }}</a> {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3'%} <a class="btn btn-success mb-4" href="?page={{ num }}">{{ num }}</a> {% endif %} {% endfor %} {% if page_obj.has_next %} <a class="btn btn-btn-success mb-4" href="?page={{ page_obj.next_page_number }}">Next</a> <a class="btn btn-btn-success mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last &raquo;</a> {% endif %} {% endif %} {% endblock content %} |
After adding the code, you may click the run button to test the code. The output should look like as shown below.
Run Quick Virus Scan for secure Download
Run Quick Scan for safe DownloadDownloadable Source Code Below.
Anyway, if you want to level up your programming knowledge, especially python, try this new article I’ve made for you Best Python Projects with source code for Beginners. But If you’re going to focus on web development using Django, you can download here from our list of Best Django Projects with source code based on real-world projects.
How To Run The URL Shortener Project using Django with Source Code?
Step 1: Extract/unzip the file
Step 2: Go inside the project folder, open cmd and type the following commands to install Django Framework and run the webserver:
• pip install -r requirements.txt
• python manage.py runserver
Step 3: Finally, open the browser and go to localhost:8000
Summary
In summary, this 2020 URL Shortener Project using Django with Source Code can be useful to students or professional who wants to learn python programming language. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy Coding!
- How To Make A Point Of Sale System In Python
- Best Python Projects for Beginners
- Python MySQL Connection: Simple Python Step by Step Guide
- Python PIP Command Set-up / Fix: Step by Step Guide
- Random Password Generator in Python Projects With Source Code 2020
- Python Range Function|Range in Python Explained with Examples 2020
- School Management System Project In Django With Source Code
- Django Login And Registration With Source Code
- CRUD App In Django With Source Code
- Drag And Drop JavaScript With Source Code
- Todo List App Django With Source Code
Inquiries
If you have any questions or suggestions about URL Shortener Project using Django with Source Code, please feel free to leave a comment below.
