Templates Folder

Step 6.1: login.html

This is an HTML template for a login page.

It uses Bootstrap 4.5.2 for styling, as indicated by the stylesheet link in the <head> section.
The form is enclosed in a <div> with the class container and additional styles for layout.

Inside the form:

The w3wiki title is centered and colored green.
A CSRF token is included for security (used to protect against cross-site request forgery attacks).
Error/success messages are displayed using Bootstrap’s alert component.
There are input fields for the username and password, both marked as required.
A link is provided to the registration page for users who do not have an account.
A submit button is provided to submit the login form.

This code creates a basic login page with fields for the username and password, along with error/success message handling and a link to the registration page for new users.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <!-- Login form -->
        <form class="col-6 mx-auto card p-3 shadow-lg" method="post" enctype="multipart/form-data">
            <h1 style="text-align: center;"><span style="color: green;">w3wiki</span></h1>
 
            {% csrf_token %}  <!-- CSRF token for security -->
 
            <!-- Login heading -->
            <h3>Login</h3>
            <hr>
 
            <!-- Display error/success messages -->
            {% if messages %}
            <div class="alert alert-primary" role="alert">
                {% for message in messages %}
                {{ message }}
                {% endfor %}
            </div>
            {% endif %}
 
            <!-- Username input field -->
            <div class="form-group">
                <label for="exampleInputEmail1">Username</label>
                <input type="text" class="form-control" name="username" id="exampleInputEmail1" aria-describedby="emailHelp"
                    placeholder="Enter username" required>
            </div>
 
            <!-- Password input field -->
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required>
            </div>
 
            <!-- Link to registration page -->
            <p>Don't have an account <a href="/register/">Register</a> </p>
 
            <!-- Submit button -->
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
</html>

Output

Loign.html

Step 6.2: register.html

This is an HTML template for a user registration form.

It uses Bootstrap 4.5.2 for styling, as indicated by the stylesheet link in the <head> section.
The form is enclosed in a <div> with the class container and additional styles for layout.

Inside the form:

A CSRF token is included for security (used to protect against cross-site request forgery attacks).
Error/success messages are displayed using Bootstrap’s alert component.
Input fields are provided for the user’s first name, last name, username, and password. All fields are marked as required.
A link is provided to the login page for users who already have an account.
A submit button is provided to submit the registration form.
This code creates a basic registration form with fields for user information, error/success message handling, and a link to the login page for existing users.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>Registration Form</title>
</head>
<body>
    <div class="container mt-5">
        <!-- Registration form -->
        <form class="col-6 mx-auto card p-3 shadow-lg" method="post" enctype="multipart/form-data">
            {% csrf_token %}  <!-- CSRF token for security -->
 
            <!-- Registration form heading -->
            <h1 style="text-align: center;"><span style="color: green;">w3wiki</span></h1>
            <h3>Register</h3>
            <hr>
 
            <!-- Display error/success messages -->
            {% if messages %}
            <div class="alert alert-primary" role="alert">
                {% for message in messages %}
                {{ message }}
                {% endfor %}
            </div>
            {% endif %}
 
            <!-- First Name input field -->
            <div class="form-group">
                <label for="exampleInputEmail1">First name</label>
                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                    placeholder="Enter First name" name="first_name" required>
            </div>
 
            <!-- Last Name input field -->
            <div class="form-group">
                <label for="exampleInputEmail1">Last name</label>
                <input type="text" name="last_name" class="form-control" id="exampleInputEmail1"
                    aria-describedby="emailHelp" placeholder="Enter Last name" required>
            </div>
 
            <!-- Username input field -->
            <div class="form-group">
                <label for="exampleInputEmail1">Username</label>
                <input type="text" class="form-control" name="username" id="exampleInputEmail1"
                    aria-describedby="emailHelp" placeholder="Enter email" required>
            </div>
 
            <!-- Password input field -->
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" name="password" id="exampleInputPassword1"
                    placeholder="Password" required>
            </div>
 
            <!-- Link to login page for users who already have an account -->
            <p>Already have an account <a href="/login/">Login</a> </p>
 
            <!-- Submit button -->
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
</html>

Output

Step 6.3: home.html

This is an HTML template for a welcoming webpage.
It includes a <title> tag with inline CSS to set the title text color to green.

Inside the <style> block:

The .container class styles the main content container, centering it on the page and adding a white background with a subtle shadow.
The h1 tag styles the page heading in green and makes it bold.
The img tag styles the animated GIF to be 60% of its original width.

Inside the <body> element:

The page content is placed within a <div> element with the class container.
The page heading, “Welcome to w3wiki ????,” is displayed in a green color and bold.
An animated GIF is included using the <img> tag. The source URL for the GIF is set to “https://i.ibb.co/RNB6jpM/welcome.gif,” which displays a cartoon character welcoming the user.

This code creates a simple webpage that welcomes users to w3wiki with a friendly cartoon GIF and styling for a clean and centered layout.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title style="color: green;">Welcome to w3wiki ????</title>
    <style>
        .container {
            text-align: center;
            margin: 100px auto;
            max-width: 500px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
 
        h1 {
            color: green;
            font-weight: bold;
        }
 
        img {
            width: 60%;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Page heading -->
        <h1>Welcome to w3wiki ????</h1>
         
        <!-- Animated GIF -->
        <!-- Use "welcome.gif" as the source for the GIF -->
        <img src="https://i.ibb.co/RNB6jpM/welcome.gif" alt="Welcome Cartoon">
    </div>
</body>
</html>

Output

home.html

Step 7: Now run the command

python manage.py runserver

Conclusion

User authentication in Django is a robust and flexible system that simplifies user account management, login, and registration processes while ensuring data security. With built-in views, password hashing, access control, and customization options, Django makes it easy to create secure and user-friendly authentication systems for web applications. Its integration with third-party packages and emphasis on testing helps developers build reliable and efficient authentication solutions, enhancing both security and user experience.

User Authentication System using Django

In this article, we will explore the process of creating a secure and efficient user authentication system in Django, a high-level Python web framework. Building upon Django’s built-in capabilities, we will cover user registration, login, and more, providing you with the knowledge and tools necessary to enhance the security and usability of your web applications. Whether you are a beginner or an experienced Django developer, this tutorial will empower you to implement a robust user authentication system that safeguards user data and delivers a seamless experience to your users.

Templates Folder

HTML

HTML

HTML

User Authentication System using Django

Categories

Contact US

Templates Folder

HTML

HTML

HTML

User Authentication System using Django

Similar Reads

Categories

Contact US