Making a URL Shortener With 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.
In this blog post, we will discuss making a URL Shortener With Django with complete source code so you can just copy and paste them into your own project. Happy exploring and learning !!
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 start project 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 URL shortener folder, the first one, and type
django-admin startapp app_name
Restaurant Website Using HTML and CSS
I named it a shortener, because, you know, it shortens the URL. How creative!
Open the âsettings.pyâ file in URL shortener 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 URL patterns 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")
]How to design Bootstrap ribbon | Bootstrap 4 Corner Ribbon &Codewithandom
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>
me interesa el proyecto, espero arregles pronto la info, se ve genial