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

--

--