In my last tutorial I have explained how to create basic login logout using Django inbuilt authentication system. In this tutorial I will show you how to make stylish login logout system using Django.
Note: In this tutorial I will also use Django inbuilt authentication system to make login logout system
Prerequisites
While writing this tutorial, my system configurations are mentioning below.
Codes shared in this tutorial have been tested in the same configurations (mentioning below)
· Python: 3.6.3
· Django: Version: 2.1.5
Again before starting assuming you have at least basic knowledge of Django. Though I will explain everything basic level only.
Django Project Setup
Let’s create a Django project to make stylish login logout application. Type below command in cmd to create a Django project.
django-admin startproject login_app_p2
Note: Giving my project name login_app_p2
Now at this point project structure should looks like below:
login_app
├── login_app
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py
Now inside main project folder create another folder called ‘templates’ and follow steps mentioned below.
1. Create a HTML file named ‘home.html’ (code for home.html sharing below)
2. Create another folder inside ‘templates’ folder named ‘registration’
3. Inside ‘registration’ folder create another HTML file named ‘login.html’ (code will share below)
So now folder structure for entire project should looks like below:
login_app_p2
├── templates
| ├── home.html
| ├── registration
| └── login.html
├── login_app_p2
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py
home.html
login.html
Now inside second login_app_p2 folder (application folder) create another folder named ‘static’ and create another folder called ‘css’ inside static folder. Now do the following steps:
1. To style home.html create a CSS file named home.css inside css folder(code for home.css will share below)
2. To style login.html, create a CSS file named login.css inside css folder (code for login.css will share below)
3. For overall styling and alignments, create a CSS file named base.css inside css folder (sharing code for base.css below)
So now folder structure for entire project should looks like below:
login_app_p2
├── templates
| ├── home.html
| ├── registration
| └── login.html
├── login_app_p2
| └── static
│ | └── css
│ | ├── home.css
| | ├── login.css
│ | └── base.css
| |
| |
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py
home.css
Line number 4 of home.css is for background image of home page. You can use any image as your background image by replacing ‘HomePage_background.jpg’with your image name.
Note: Image should be inside ‘css’ folder
login.css
Line number 4 of login.css is for background image of login page. You can use any image as your background image by replacing ‘login_background.jpgyour image name.
base.css
Now inside login_app_p2 (application folder) folder you need to edit
1. settings.py
2. urls.py
In settings.py you need to add two things (listed below)
1. Add template folder address inside TEMPLATES list dictionary (inside DIR key). By default it will be like: ‘DIRS’: [],
TEMPLATES = [
{
‘BACKEND’: ‘django.template.backends.django.DjangoTemplates’,
‘DIRS’: [os.path.join(BASE_DIR, ‘templates’),],
‘APP_DIRS’: True,
‘OPTIONS’: {
‘context_processors’: [
‘django.template.context_processors.debug’,
‘django.template.context_processors.request’,
‘django.contrib.auth.context_processors.auth’,
‘django.contrib.messages.context_processors.messages’,
],
},
},
]
2. Add below two lines at the end of settings.py
# To use home.html as default home page
LOGIN_REDIRECT_URL = ‘home’
LOGOUT_REDIRECT_URL = ‘home’
# Define folder location of ‘static’ folder
STATIC_ROOT = os.path.join(BASE_DIR, ‘staticfiles’)
# ‘login_app_p2’: django app name
STATICFILES_DIRS = [
os.path.join(BASE_DIR, ‘login_app_p2’, ‘static’),
]
Now copy and paste below code to your urls.py (After removing everything from urls.py)
urls.py
Once you have done above steps successfully, run below commands in cmd to migrate
python manage.py migrate
And run Django server by executing below command in cmd
python manage.py runserver
Now you are done with the complete Stylish Djanog login logout application.
Open http://127.0.0.1:8000/ in your web browser to see and use that complete login logout application with Django.
But you can’t login now as you have not created any authenticated user name with password right.
Follow my previous article to create user to login.
Previous Article: Django Basic login logout tutorial
Now let me explain some issues I faced while writing above code.
Django won’t refresh static files
If you made some changes in css or javascript file and refresh the page, you can’t see the changes happen.
If you remove external css or js file from the static folder and put inside html code, it will work properly (in chrome incognito window it is working properly). But if you try to do it using external css or js file, it was not working.
Solution
This issue is happening because your browser has the js and css file cached. In Google Chrome you can clear the cache by pressing Ctrl + Shift + Del and ticking ‘Cached images and files’ and selecting a time range.
This tutorial is an extension of my previous article(Django Basic login logout tutorial
) where I showed to create basic login logout application using Django inbuilt authentication system.
In this tutorial I explained about how to create stylish login logout application using Django inbuilt authentication system.
If you have any question or suggestion regarding this topic see you in comment section. I will try my best to answer.
Similar Read:
- Roadmap to Learn Django for Beginners
- Getting Started with Django with Python – Easy Tutorial
- 6 Best Books to Learn Django with Learning Path
- Best Udemy Courses to learn Django with Learning Path
- Flask vs Django: Which One is Easier for Machine Learning
- Django Basic login logout tutorial
- Integrate Plotly Dash in Django
- How to Become a Python Backend Developer
Terrific article