Login + Registration Page in Django using HTML, CSS, JavaScript (Part I)

#django #html #css #javascript

Some of the most common pages found in websites are the login and registration pages. There are many templates out there from where to choose from. In fact, there are too many of them. However, one question that comes up often is how to integrate these templates/files (HTML, CSS, and JS) into Django (Python-based web framework).

I decided to create a template myself to add to the pile of designs. This design is very straightforward and simple. I have also added some CSS to style it and JavaScript to make it do stuff.

Before we start creating templates and integrating them with Django, we need to do some initial setup.

To get yourself up to speed, check out these posts.

Chapter 1 - Django Web App Setup
(Required - This post has all the necessary information to complete this tutorial)

Chapter 2 - Django Basics
(Optional)

Chapter 3 - Homepage
(Optional - Recommended to have open next to this post since we will follow a similar process to create the login and registration pages)

After you have checked out the Django setup post and learned how to create a simple web app, you can pick up from here.

Project - urls.py

Open urls.py from your project's folder (folder called example as in the Django setup post).

We need to include the URLs from the app that we created in order to be found by the main urls.py file which sits in our project folder. We do this every time that we create a new app.

To include the path to the URLs of your app, add the following code.

# path -> example/urls.py
# "listings" is the name of my app (same name as in the Django setup post) 

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('listings.urls')),
]


#baltlogs.com

App - urls.py

Now we need to create a urls.py file in the directory of your app (listings) that will match the path set in the urls.py of the project.

This is how the listings app directory should look like after you create the new urls.py file.

Open the newly created urls.py from your app’s folder and add the following code. This is the path to the login/registration page.

# path -> listings/urls.py

from django.urls import path 
from .import views

app_name = 'listings'

urlpatterns = [
    path('login_page/', views.login_page, name='login_page'), 
]


#baltlogs.com

Now we just need to create a view and a template for the login/registration page.

Notice that I keep calling the page that we are building "login/registration". This is because I have included both forms; the login and the registration forms, in one page. However, they will be displayed separately by using a toggle effect.

Login/Registration Page View

Open views.py in your app’s directory and add the following code.

# path -> listings/views.py

from django.shortcuts import render

def login_page(request):

    return render(request, 'listings/login_page.html')


#baltlogs.com

Login/Registration Page Template

We need to create a template which will be displayed to users. However, first we need to do some setup work.

Create a folder called templates inside your app’s directory and then inside the templates folder create a folder with the name of your app (listings). This helps Django interpret and find the templates for your app without any ambiguity. Inside that last folder created, let’s create a file named login_page.html.

Check that your app's directory looks like the image below.

Open login_page.html and add the following code.

<!-- Login/Registration Page - HTML -->

<div class="login">
    <div class="form">
        <form class="registration-form">
            <input type="text" placeholder="name" />
            <input type="password" placeholder="password" />
            <input type="text" placeholder="email" />
            <button>create</button>
            <p><a href="#">Log In</a></p>
        </form>
        <form class="login-form">
            <input type="text" placeholder="username" />
            <input type="password" placeholder="password" />
            <button>Login</button>
            <p><a href="#">Register</a></p>
        </form>
    </div>
</div>

<!-- baltlogs.com -->

The div tags

These tags divide the HTML document in sections. The div tags act as containers, so you want to put other HTML elements inside these tags.

The form tags

The name gives it away. These tags are used to create HTML forms where users can input data. There are other elements which can go inside these tags such as input, button, label, etc.

The tags explained above are the main ones used in this example, you can google the other tags if you want to know more about them.

We have created two forms, one for registration and one for logging in.

Lastly, issue the command python manage.py runserver and go to http://127.0.0.1:8000/ to see the login/registration page.

You should get something similar to the image below.