URL Shortener using HTML, CSS and Django







URL Shortener using HTML, CSS, and Django





You might have used a URL shortener like Bitly or TinyURL before. If you haven’t, a URL shortener is a simple tool that takes a long URL and turns it into a small one. Yup, as simple as that. And that’s exactly what we’ll be doing today. Why pay for a service if you can do it by yourself? So, tag along with me, and by the end, you’ll have your own URL Shortener.

To do this project, I’ll be using HTML and CSS for the looks and Django to work behind the stage. I’ll assume you’re aware of the basics of all three. And of course, as always here comes my unwanted advice part. V. S. Code. Get it! Get VS Code and it will make your life so much better! Or at least the coding part of it. With that out of the way, let’s get into it right away.


In the folder you’ll be working in, open the terminal and type:

django-admin startproject your_project_name

I chose URLshortener. It should create a folder by the project name. Inside the folder, you’ll find a folder with the same name. I wonder why Django thought this was cool, it gets really confusing man!

We also have to make an ‘app’ that will do the work we need. To make the app, change your directory in the terminal to the URLshortener folder, the first one, and type

django-admin startapp app_name

I named it shortener, because, you know, it shortens the URL. How creative!

URL Shortener using HTML, CSS and Django

Open the ‘settings.py’ file in URLshortener and add ‘shortener’ in the INSTALLED_APPS list.

URL Shortener using HTML, CSS and Django

Now add ‘templates’ and True in the TEMPLATES list.

URL Shortener using HTML, CSS and Django

See that’s the cool thing about Django. Half your code is already generated, just needs customizations here and there. Now in the ‘urls.py’, add:

from django.urls.conf import include 

and add a path like this in the urlpatterns list:

URL Shortener using HTML, CSS and Django

This way, when the site runs, it will look in the ‘urls.py’ of the shortener app to return a page to display. But you’ll notice that there is no ‘urls.py’ in the app directory. Well, not yet. So let’s make a file ‘urls.py’ in the folder and write the following code.

 from django.urls import path  
from .import views
urlpatterns = [
path('',views.index,name="home page"),
path('answer',views.answer,name="answer")
]

Now since we’re looking for the ‘index’ function in ‘views.py’, let’s define the function. Write the following code in the ‘views.py’.

 from django import http  
from django.shortcuts import render
from .models import Url
from django.http import HttpResponse
def index(request):
return render(request,"shortenerindex.html")

All the imports are necessary and you’ll realize why they are needed when you go through the code.

So we’ve specified that we want to display the ‘index.html’ file, but that does not exist yet. Let’s make the HTML file then. In your app folder, like the one named ‘shortener’ in my case, make two more folders namely ‘templates’ and ‘static’, which would contain our HTML and CSS files respectively. Now in the templates folder, make a ‘basic.html’ and enter the following code.

 <!doctype html>  
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'indexstyles.css' %}">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% comment %} <h1>Hello, world</h1> {% endcomment %}
{% block body %} {% endblock %}
</body>
</html>

Check out more…..

Share on:

0 thoughts on “URL Shortener using HTML, CSS and Django”

Leave a Comment