URL Shortener Project using Django with Source Code

Posted by adones evangelistaPosted in Python Projects November 24, 2020

URL Shortener Project using Django with Source Code

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.

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}"

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.

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()),
],
),
]

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.

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;
}

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.

{% load static %}
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;

&lt;!-- Bootstrap CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
&lt;link rel="stylesheet" href="{% static 'router/main.css' %}"&gt;
&lt;title&gt;URL Shortener Project&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header class="site-header"&gt;
&lt;nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top"&gt;
&lt;div class="container"&gt;
&lt;a class="navbar-brand mr-4" href="{% url 'home' %}"&gt;URL Shortener&lt;/a&gt;
&lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation"&gt;
&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class="collapse navbar-collapse" id="navbarToggle"&gt;
&lt;div class="navbar-nav mr-auto"&gt;
&lt;a class="nav-item nav-link" href="{% url 'home' %}"&gt;Home&lt;/a&gt;
&lt;a class="nav-item nav-link" href="{% url 'how-to' %}"&gt;How to Use&lt;/a&gt;
&lt;a class="nav-item nav-link" href="{% url 'url-list' %}"&gt;List of All URLs&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;/header&gt;
&lt;main role="main" class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-md-8"&gt;
{% if messages %}
{% for message in messages %}
&lt;div class="alert alert-{{ message.tags }}"&gt;
{{ message }}
&lt;/div&gt;
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
&lt;/div&gt;
&lt;/div&gt;
&lt;/main&gt;
&lt;!-- Optional JavaScript --&gt;
&lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

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">

<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>

<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.

This output which is the home page of URL Shortener Project using Django.

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.

{% extends 'router/base.html' %}
{% block content %}
&lt;h2&gt;List of all the Links Shortened till date:&lt;/h2&gt;
{% for url in urls %}
&lt;article class="media content-section"&gt;
&lt;div class="media-body"&gt;
&lt;h5&gt;Shortened Link: &lt;a class="mr-2" target="_blank" href="https://{{ request.get_host }}/{{ url.key }}"&gt;https://{{ request.get_host }}/{{ url.key }}&lt;/a&gt;&lt;/h5&gt;
&lt;div&gt;
&lt;h5&gt;Original Link: &lt;a class="mr-2" target="_blank" href="{{ url.original_url }}"&gt;{{ url.original_url }}&lt;/a&gt;&lt;/h5&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/article&gt;
{% endfor %}
{% if is_paginated %}
{% if page_obj.has_previous %}
&lt;a class="btn btn-success mb-4" href="?page=1"&gt;&amp;laquo; First&lt;/a&gt;
&lt;a class="btn btn-success mb-4" href="?page={{ page_obj.previous_page_number }}"&gt;Previous&lt;/a&gt;
{% endif %}

{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
&lt;a href="?page={{ num }}" class="btn btn-info mb-4"&gt;{{ num }}&lt;/a&gt;
{% elif num &gt; page_obj.number|add:'-3' and num &lt; page_obj.number|add:'3'%}
&lt;a class="btn btn-success mb-4" href="?page={{ num }}"&gt;{{ num }}&lt;/a&gt;
{% endif %}
{% endfor %}

{% if page_obj.has_next %}
&lt;a class="btn btn-btn-success mb-4" href="?page={{ page_obj.next_page_number }}"&gt;Next&lt;/a&gt;
&lt;a class="btn btn-btn-success mb-4" href="?page={{ page_obj.paginator.num_pages }}"&gt;Last &amp;raquo;&lt;/a&gt;
{% endif %}
{% endif %}
{% endblock content %}

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.

This output which is the list of URLs of URL Shortener Project using Django.

Run Quick Virus Scan for secure Download

Run Quick Scan for safe Download

Downloadable 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!

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.

Author

adones evangelista

Hello Everyone , I'm Adones Evangelista. A writer and also a programmer of itsourcecode.com.

Leave a Comment! Cancel Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.