Create a URL Shortener app with Python and Django Part-3

In this part...

This will be the last part of the Create a URL Shortener app with Python and Django Series and if you have not read the last two parts yet please read them before you read this part. 

PART 1 - https://blogofchamodh.blogspot.com/2022/07/create-url-shortener-app-with-python.html

PART 2 - https://blogofchamodh.blogspot.com/2022/07/create-url-shortener-app-with-python-part2.html

we have discussed how to set up our virtual environment and start the project and apps in part 1 and learned the logic and some important views in part 2. So it is vital to read them first.

In this part, I will show you how to,

1. Create the URL patterns
2. Writing the template.
3. Write the redirect view

Create the URL patterns.

To handle the URL requests we can create the URL patterns as shown below.

from django.contrib import admin

from django.urls import path

from url_shortener import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('create/', views.create ),

    path('<str:slug>/', views.redirect), #new line

]

views.create uses the views.create that we created in the last part to shorten the URLs. 

We will discuss the other URL paths later in this post.

Writing the Template.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

    $(function () {

      $('#input-form').on('submit', function (e) {

        e.preventDefault();

        $.ajax({

          type: 'post',

          url: '/create/',

          data: $('#input-form').serialize(),

          success: function (response) {

            response = window.location.origin+"/"+response

            $(".success").html(

                "<p> URL shortened succesfully: <a href='"+response+"'>"+response+"</p>"

            )

          }

       

        });

      });

    });

  </script>

<form id="input-form" method="post"  action="/">

    {% csrf_token %}

    <div class="success">

       

    </div>

    <input type="url" name="url" id="url">

    <input type="submit" value="submit">

</form>

Here we use ajax requests and a form to shorten the URLs.

Write the Redirect view.

In our app, we have to redirect the user who requests a URL that is made with our app. For instance, if they request, http://127.0.0.1:8000/a/ we have to check if there is a record for the slug "a". if yes we redirect the user to the full URL of the slug and raise a 404 error if there is no record for slug  "a" in the database.  

To get the slug of the shortened URL we have to add this line to our URL patterns list in urls.py.

from django.contrib import admin

from django.urls import path

from url_shortener import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('create/', views.create ),

    path('<str:slug>/', views.redirect),] #new line

Then we can use the slug in the view as shown below.

def redirect(request,slug):

    url = get_object_or_404(Link, slug=slug)

    return HttpResponseRedirect(url.URL)

This three-line view, do the redirecting job.

To use the HttpResponseRedirectmethod and  get_object_or_404, we have to update the import list as shown below. 

That's all and It works as expected.

I am embedding all the files you want to edit in the Django project

	from django.apps import AppConfig
	class UrlShortenerConfig(AppConfig):
	default_auto_field = 'django.db.models.BigAutoField'
	name = 'url_shortener'

view raw apps.py hosted with ❤ by GitHub

	from django.db import models
	# Create your models here.
	class Link(models.Model):
	URL = models.URLField()
	slug = models.CharField(max_length=6)
	def _str__(self):
	return self.URL

view raw models.py hosted with ❤ by GitHub

	"""
	Django settings for Shortener project.
	Generated by 'django-admin startproject' using Django 4.0.6.
	For more information on this file, see
	https://docs.djangoproject.com/en/4.0/topics/settings/
	For the full list of settings and their values, see
	https://docs.djangoproject.com/en/4.0/ref/settings/
	"""
	from pathlib import Path
	# Build paths inside the project like this: BASE_DIR / 'subdir'.
	BASE_DIR = Path(__file__).resolve().parent.parent
	# Quick-start development settings - unsuitable for production
	# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/
	# SECURITY WARNING: keep the secret key used in production secret!
	SECRET_KEY = 'django-insecure-3xkywqu+)xjykb)%9oig!)p9syixt$nf)+2qiq09thsw_i(6ok'
	# SECURITY WARNING: don't run with debug turned on in production!
	DEBUG = True
	ALLOWED_HOSTS = []
	# Application definition
	INSTALLED_APPS = [
	'django.contrib.admin',
	'django.contrib.auth',
	'django.contrib.contenttypes',
	'django.contrib.sessions',
	'django.contrib.messages',
	'django.contrib.staticfiles',
	'url_shortener.apps.UrlShortenerConfig', #new
	]
	MIDDLEWARE = [
	'django.middleware.security.SecurityMiddleware',
	'django.contrib.sessions.middleware.SessionMiddleware',
	'django.middleware.common.CommonMiddleware',
	'django.middleware.csrf.CsrfViewMiddleware',
	'django.contrib.auth.middleware.AuthenticationMiddleware',
	'django.contrib.messages.middleware.MessageMiddleware',
	'django.middleware.clickjacking.XFrameOptionsMiddleware',
	]
	ROOT_URLCONF = 'Shortener.urls'
	TEMPLATES = [
	{
	'BACKEND': 'django.template.backends.django.DjangoTemplates',
	'DIRS': [BASE_DIR/'Shortener/templates'], #new
	'APP_DIRS': True,
	'OPTIONS': {
	'context_processors': [
	'django.template.context_processors.debug',
	'django.template.context_processors.request',
	'django.contrib.auth.context_processors.auth',
	'django.contrib.messages.context_processors.messages',
	],
	},
	},
	]
	WSGI_APPLICATION = 'Shortener.wsgi.application'
	# Database
	# https://docs.djangoproject.com/en/4.0/ref/settings/#databases
	DATABASES = {
	'default': {
	'ENGINE': 'django.db.backends.sqlite3',
	'NAME': BASE_DIR / 'db.sqlite3',
	}
	}
	# Password validation
	# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators
	AUTH_PASSWORD_VALIDATORS = [
	{
	'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
	},
	{
	'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
	},
	{
	'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
	},
	{
	'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
	},
	]
	# Internationalization
	# https://docs.djangoproject.com/en/4.0/topics/i18n/
	LANGUAGE_CODE = 'en-us'
	TIME_ZONE = 'UTC'
	USE_I18N = True
	USE_TZ = True
	# Static files (CSS, JavaScript, Images)
	# https://docs.djangoproject.com/en/4.0/howto/static-files/
	STATIC_URL = 'static/'
	# Default primary key field type
	# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
	DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

view raw settings.py hosted with ❤ by GitHub

	"""Shortener URL Configuration
	The `urlpatterns` list routes URLs to views. For more information please see:
	https://docs.djangoproject.com/en/4.0/topics/http/urls/
	Examples:
	Function views
	1. Add an import: from my_app import views
	2. Add a URL to urlpatterns: path('', views.home, name='home')
	Class-based views
	1. Add an import: from other_app.views import Home
	2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
	Including another URLconf
	1. Import the include() function: from django.urls import include, path
	2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
	"""
	from django.contrib import admin
	from django.urls import path
	from url_shortener import views
	urlpatterns = [
	path('admin/', admin.site.urls),
	path('create/', views.create ),
	path('<str:slug>/', views.redirect), #new line
	]

view raw urls.py hosted with ❤ by GitHub

	from django.http import Http404, HttpResponse, HttpResponseRedirect
	from django.shortcuts import get_object_or_404, render
	from django.shortcuts import render
	from . models import Link
	import random
	import string
	def create_slug(size = 6, chars = string.ascii_lowercase+string.digits):
	return "".join(random.choice(chars) for _ in range(size))
	def create(request):
	if request.method == 'GET':
	return render(request, 'create.html')
	else:
	url = request.POST['url']
	slug = create_slug()
	while Link.objects.filter(slug=slug).exists():
	slug = create_slug()
	url = Link(
	URL = url,
	slug = slug,
	)
	url.save()
	return HttpResponse(slug)
	def redirect(request,slug):
	url = get_object_or_404(Link, slug=slug)
	return HttpResponseRedirect(url.URL)

view raw views.py hosted with ❤ by GitHub