Create a Secure Password Generator Using Django

By Faraz - July 27, 2024

Learn how to create a secure and stylish password generator using Django. Step-by-step guide with Bootstrap integration for modern design and enhanced functionality.

Join us on Telegram

Read Also

Income Calculator Using HTML, CSS, and JavaScript (Source Code)

Creating a secure password generator is an essential project for anyone looking to improve their web development skills using Django. This tutorial will guide you through building a functional and aesthetically pleasing password generator, incorporating Bootstrap for a modern design. By following this step-by-step guide, you'll learn how to set up a Django project, create views and templates, and style your application with custom CSS and Bootstrap. Whether you're a beginner or an experienced developer, this project will enhance your understanding of Django and web development best practices.

Setting Up Your Django Project

Installing Django

First, you'll need to install Django. Open your terminal and run:

pip install django

Creating a New Django Project

Once Django is installed, create a new project:

django-admin startproject password_generator
cd password_generator

Understanding Django Project Structure

Project vs. App

In Django, a project is a collection of settings for an instance of Django, including database configuration, Django-specific options, and application-specific settings. An app is a web application that does something — for example, a blog system, a database of public records, or a simple survey.

Key Files and Directories

manage.py: A command-line utility that lets you interact with this Django project.
settings.py: Contains all the settings/configuration of your Django project.
urls.py: Contains URL declarations for this Django project.
wsgi.py: A simple entry-point for WSGI-compatible web servers to serve your project.

Creating a Django App

Setting Up the App

Create a new app within your project:

python manage.py startapp generator

Adding the App to the Project

In password_generator/settings.py, add the new app to the INSTALLED_APPS list:

INSTALLED_APPS = [
    'generator',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Create URL Patterns

In password_generator/urls.py, include the URLs for the generator app:

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

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

Create a generator/urls.py file in the generator app directory and add the following:

from django.urls import path
from . import views

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

Integrating the Password Generator into Django

In generator/views.py, create a view to handle the password generation:

from django.shortcuts import render
import random

def home(request):
    return render(request, 'home.html')

def password(request):
    characters = list('abcdefghijklmnopqrstuvwxyz')
    if request.GET.get('uppercase'):
        characters.extend(list('ABCDEFGHIJKLMNOPQRSTUVWXYZ'))
    if request.GET.get('special'):
        characters.extend(list('!@#$%^&*()'))
    if request.GET.get('numbers'):
        characters.extend(list('0123456789'))

    length = int(request.GET.get('length', 12))

    the_password = ''
    for x in range(length):
        the_password += random.choice(characters)

    return render(request, 'password.html', {'password': the_password})

Designing the Frontend with HTML and CSS

Create Templates

Create a templates directory within the generator app and then create home.html and password.html inside this directory.

Create a template for the homepage in generator/templates/home.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Password Generator</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
    <div class="container text-center">
        <h1>Password Generator</h1>
        <form action="/password/" method="get">
            <div class="form-group">
                <label for="length">Password Length:</label>
                <input type="number" class="form-control" id="length" name="length" value="12" min="6" max="20">
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="uppercase" name="uppercase" checked>
                <label class="form-check-label" for="uppercase">Include Uppercase Letters</label>
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="special" name="special" checked>
                <label class="form-check-label" for="special">Include Special Characters</label>
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="numbers" name="numbers" checked>
                <label class="form-check-label" for="numbers">Include Numbers</label>
            </div>
            <button type="submit" class="btn btn-primary">Generate Password</button>
        </form>
    </div>
</body>
</html>

In generator/templates/password.html, display the generated password:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Password</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
    <div class="container text-center">
        <h1>Your Password</h1>
        <div class="password-result">
            <p>{{ password }}</p>
            <a href="/" class="btn btn-link">Generate another password</a>
        </div>
    </div>
</body>
</html>

Set Up Static Files

In your password_generator/settings.py, make sure you have the static files settings configured:

STATIC_URL = '/static/'

Create a Static Directory

Create a static directory in your generator app. Inside this directory, create a css folder.

Create a CSS File

Inside the static/css folder, create a file named style.css. Add some custom styling to complement Bootstrap:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}

.container {
    margin-top: 50px;
}

h1 {
    color: #007BFF;
    margin-bottom: 30px;
}

form{
    max-width: 400px;
    margin: auto;
}

.form-group label {
    font-weight: bold;
}

.btn-primary {
    background-color: #007BFF;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 20px;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.password-result {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.password-result p {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.password-result a {
    display: block;
    margin-top: 20px;
    text-decoration: none;
    color: #007BFF;
}

.password-result a:hover {
    text-decoration: underline;
}

Update Static Files in Views

Make sure you load static files by adding {% load static %} at the top of each template.

Run the Project

Run your server to test the password generator with the new layout and styles.

python manage.py runserver

Visit http://127.0.0.1:8000/ in your browser, and you should see the styled password generator with a modern look.

Full Project Structure

password_generator/
├── password_generator/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── generator/
│   ├── migrations/
│   │   └── __init__.py
│   ├── static/
│   │   └── css/
│   │       └── style.css
│   ├── templates/
│   │   ├── home.html
│   │   └── password.html
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
└── manage.py

Conclusion

Building a password generator using Django is an excellent way to practice your web development skills and create a practical tool that can be used in various applications. By following this tutorial, you have learned how to set up a Django project, create dynamic views, and implement modern design elements with Bootstrap and custom CSS. This project not only strengthens your understanding of Django but also demonstrates how to build secure and user-friendly web applications. Keep experimenting with additional features and styles to further enhance your password generator and your Django expertise.