Build a URL Size Reduce App with Django

We will build a simple Django app that shortens long URLs. Users will enter a URL on the homepage, submit it, and instantly get a shortened link on the next page. We’ll set up the Django project, connect to Bitly with an access token, handle user input, and display the results all in a clean, easy-to-follow way.

Setup a New Django Project

Prerequisites:

• Django Introduction and Installation
• Creating a Project

Open your terminal and run the following command to create a new Django project:

django-admin startproject URL_Shortner
cd URL_Shortner

Create an app named home where the logic for the URL shortener will be handled.

python manage.py startapp home

This is the final file structure after completing the project.

Add the app to INSTALLED_APPS:

Open URL_Shortner/settings.py and add home to the INSTALLED_APPS list:

Set the templates directory in the URL_Shortner/settings.py file.

Set Up URLs for the Project and App

1. Update the project’s urls.py:

Open URL_Shortner/urls.py and configure it to include URLs from the home app.

2. Set up URLs in the home app:

In home/urls.py, set up the routes for the home page and form submission.

Create the Views to Handle User Requests

Create the views:

In home/views.py, create functions to handle the form display and URL shortening process using the Bitly API.

Explanation:

• index() renders the homepage where users enter the URL.
• index_form() handles the form submission, calls the shorten_url() function, and renders the shortened URL.
• shorten_url() interacts with the Bitly API to shorten the given URL.

Create HTML Templates for the Form and Display

1. Set up the templates folder:

Create a templates directory inside the home app. Inside this directory, create the index.html and new_url.html files.

2. Create index.html:

This file displays the form where users can input a long URL.

3. Create new_url.html:

This file will display the shortened URL after processing.

Use the Bitly API Access Token

1. Generate an Access Token on Bitly:

• Visit "https://bitly.com/" and create an account if you haven't already.
• Go to Settings > API and generate an Access Token.

2. Use the Access Token:

• In home/views.py, set the BITLY_ACCESS_TOKEN to the token you generated.
• This will allow the app to authenticate with Bitly’s API to shorten the URLs.

Test the Application

1. Run the Django development server:

python manage.py runserver

2. Visit the app:

Open your browser and go to http://127.0.0.1:8000/ to view the homepage.

3. Submit a URL:

Enter a long URL in the form, and the app will redirect to the new_url.html page with the shortened URL.

Output:

On submitting the URL a new page appears with a new short link.