Build Django Required Login Apps with Custom Login-Logout Page

Adi Ramadhan
3 min readJul 23, 2020

Django web application, simple secure page with custom login and logout page. Using Bootstrap styles.

With unsecure page, secure page, custom login page and custom logout page

Step 1: Preparation, Create Django Project, Initial Migration
create virtualenv: virtualenv venv
start virtualenv: venv/Scripts/activate
install Django in virtualenv: pip install django==3.0
Create Django: django-admin startproject myproject
Go to myproject folder: cd myproject
Initial Migration: python manage.py migrate
Create superuser: python manage.py createsuperuser
then type username, email and password

Step 2: Create Django Apps
Create apps: python manage.py startapp myapp
Add myapp to INSTALLED_APPS in myproject/settings.py

INSTALLED_APPS in myproject/settings.py

Step 3: Set up Templates Folder
Create folder templates in myapp

Add template directory in TEMPLATES parameter in myproject/settings.py

os.path.join(BASE_DIR, 'myapp', 'templates')
TEMPLATES in myproject/settings.py

Step 5: Create HTML Files in myapp/templates Folder
Create bootstrap base, create myapp/templates/base.html CDN Bootstrap.

myapp/templates/base.html

Create login.html, myapp/templates/login.html

myapp/templates/login.html

Create logout.html, myapp/templates/logout.html

myapp/templates/logout.html

Create secure.html, myapp/templates/secure.html

myapp/templates/secure.html

Create unsecure.html, myapp/templates/unsecure.html

myapp/templates/unsecure.html

Step 6: Create Function Based View in myapp/views.py
Update myapp/views.py. Add Function Based View method.
For secure page, add login_required annotation.

myapp/views.py

Step 7: Setup URLs in myapp and myproject Folder
Create myapp/urls.py

myapp/urls.py

Update myproject/urls.py

myproject/urls.py

Step 8: Setup Login URL and Login Redirect Page
Add in myproject/setting.py

LOGIN_URL = '/login/'LOGIN_REDIRECT_URL = '/secure'

Step 9: Run Server and Testing
Run Server: python manage.py runserver
Testing:
http://127.0.0.1:8000/unsecure

http://127.0.0.1:8000/unsecure

Click ‘Go To Secure Page’ or try access http://127.0.0.1:8000/secure this page will redirect to login page.

http://127.0.0.1:8000/secure

after login with superuser in step 1 will redirect to secure.html page

secure page
logout page

--

--