URL Shortener using HTML, CSS and Django

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!



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

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


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:

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,"shortener\index.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.....

1 Comments

  1. me interesa el proyecto, espero arregles pronto la info, se ve genial

    ReplyDelete

Post a Comment

Previous Post Next Post