Create a Secure Password Generator Using Django

Faraz

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
create-a-secure-password-generator-using-django.webp
Read AlsoCreate Underline Hover Effect HTML & CSS Guide.jpgCreate Underline Hover Effect: HTML & CSS Guide (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.

FAQs

Q1. What is Django?

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.

Q2. Why is password security important?

Password security is crucial to protect sensitive information and prevent unauthorized access.

Q3. Can I customize the password generator?

Yes, you can customize the generator to include additional features and improve its functionality.

Q4. How do I deploy my Django project?

You can deploy your Django project using platforms like Heroku, AWS, or DigitalOcean.

Q5. Is Django suitable for beginners?

Yes, Django is suitable for beginners due to its comprehensive documentation and supportive community.

Read AlsoCreate a Fahrenheit to Celsius Range Slider HTML, CSS, JavaScript.jpgCreate a Fahrenheit to Celsius Range Slider Using HTML, CSS, JavaScript

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a password generator in django, step-by-step guide to django password generator, building a secure password generator using django, django password generator tutorial for beginners, password generator django project, python password generator using django, django password generator, password generator, django tutorial, secure password, password generator project
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺