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")
]
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>
me interesa el proyecto, espero arregles pronto la info, se ve genial
ReplyDeletePost a Comment