30 Mar 2020

Django stylish login logout tutorial

Django stylish login logout tutorial
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.jpgwith 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.


Conclusion

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.