Hands-on with Django from Scratch

6 min readNov 11, 2020

We’ll build a small web application using Django to understand the concepts as well as the flow while working with the framework. By this end of this, you’ll have a clear understanding of ‘what does what’ in Django with a mini working project.

Creating a URL Shortner website from scratch

Best way to learn something is by hands-on approach for gaining practical exposure. We’ll be creating a URL Shortner website. Below three images depict an example of how it’ll work.

To begin, let’s create a folder for our project, say ‘myurl’ on Desktop (or any preferred location) and open the Command Prompt to that location.

Step 0. Virtual environment [Optional]

Creating a virtual environment is not mandatory but always a good practice. Let’s see how to get a virtual environment created.

Above commands will create a Pipfile inside our folder. This is one way to work in a venv. There is an another way to create our own virtual environment, say ‘urlenv’ as shown below.

Now, install Django using pip install django and let's begin -

Step 1. Create Project

a. Run command django-admin startproject urlShortner It'll create a folder named urlShortner inside myurl folder.

b. Open urlShortner in your preferred editor as shown below (command code . to open it directly in VS Code)

You can see the following built-in files in your project folder -

a. manage.py — To interact with our project.

b. Another folder with same name i.e. urlShortner containing the following files-

__init__.py — A non-editable empty file just to initialize our python package.
settings.py — It contains all configuration details for our project.
urls.py — It is the table of contents for our project.
wsgi.py — It is the Python standard for web servers and applications.
asgi.py — It is the Python standard for asynchronous web servers and applications.

Again, we’re not focusing much on theory. To dive deeper into these files, you may refer to the documentation links in the predefined comment section they come with. We will be editing the settings.py and urls.py files only. We deal with wsgi.py and asgi.py files while deploying the application on web.

Step 2. First Run

Check if our Django project is successfully created by running command -python manage.py runserver in the terminal.

It should appear on your localhost as below.

As soon as you run the project for the first time, a new folder __pycache__ and a db.sqlite3 file will be created. By default, Django provides us the SQLite Database in it’s configuration which is changeable.

Step 3. The Admin Page

By default, we get an in-built admin page as we can see in the urls.py file.

Run command python manage.py migrate in the terminal (ctrl+c to exit the previous command) Now, we’ll be able to see the page where we can login and access our admin area (by adding '/admin/' to the localhost URL) as shown below.

Create superuser using command - python manage.py createsuperuser and it’ll allow you to login to the admin area.

We use the command python manage.py makemigrations when we make changes in the settings.py file.

Note:- We can rename the outer urlShortner folder name but not the inner one which was created by Django. To avoid any confusion, let’s rename the outer folder as ‘src’. Now, check your editor is open in \..\myurl\src path.

Step 4. Add template and views.py

Create a folder named ‘template’ inside src (parallel to manage.py) and a file ‘views.py’ inside urlShortner.

The views.py will contain the main algorithm for our project i.e. logic for shortening a URL.
Add an ‘index.html’ file inside template for the home page of our website. Copy this code in it. I’ve used simple templates (the starter template and the form template) from https://getbootstrap.com/ and made necessary changes in the body section.

Step 5. Create an app (webpage)

We have the outer structure of our website. But, we must know how to create webpages in our website for every functionality. In Django, we refer to a webpage as an app. So, let’s create an app named ‘Authentication’ using command python manage.py startapp Authentication

The above command will create us a folder Authentication that contains important built-in files. So, till now, your file directory structure should look something like this (←)

Step 6. Edit files

We have created the skeleton for our project. Now, let’s get it working. Edit the following files as shown below.

a. src\urlShortner\settings.py —First, let’s inform Django that we’ve created an Authentication app and a template folder. For that, simply add the following in the INSTALLED_APPS and TEMPLATES section as shown below.

b. src\urlShortner\urls.py — This file is the ‘table of contents’ for our web application. We have an admin page, a home page (index.html) and the final outcome (the shortened URL). Since the admin URL is predefined, let’s add the other two as shown below.

You see we’ve imported views.py here (don’t forget!), so let’s edit it next.

c. src\urlShortner\views.py — This is the file that should contain the entire logic for shortening a URL in randomly generated six alpha-numeric characters. Then we’ll append these characters with our localhost to make a shortened URL link (new_url). We’re also making sure that if the shortened link is already generated for a URL, then we have to render it from our database rather than generating multiple new links for the same URL.

Now as we’ve imported models.py here, let’s edit it next.

d. src\Authentication\models.py — In this file, we’re creating models inside a class named ‘Url’ which majorly defines maximum length for our models that can be. For every unique URL entered, an object will be created. You can view it in the admin area under Authentication -> Url section.

Next and last is the admin.py, which is used to register the models that we just created. Let’s see how it goes.

e. src\Authentication\admin.py — This is to store our URLs in the admin area because we don’t want multiple shortened links for the same URL when entered multiple times. It’ll provide us the shortened link from the database if it has already been generated.

Step 7. Garnish with migrations and we’re done:)

Run command python manage.py makemigrations

and then, python manage.py migrate

Finally, run the project with python manage.py runserver

We’re done!

Wasn’t it easy peasy lemon squeezy? Yeah, I know!

Remember, our main focus was to understand Django which is why the project simply takes your localhost in creating the shortened link. You can upgrade it by adding APIs of a few web hosts like bit.ly, TinyURL, et al. where the user can choose one of the services for shortening a URL and it’ll be sharable too.

Refer to the source code here and for the upgraded project source code click here.