Creation of web pages for register,login ,logout (PART-2)

python

html

django

Soudhamini

Posted 3 years, 1 month ago

Views 610

4 min read

1 reaction

Hello techions,

Welcome back , I hope you have successfully completed the part-1 of creation of the web pages .

Now let's move to the part-2 I.e., login and logout pages.

So,to start the work first we have to activate the virtual environment.

The creation of login and logout web pages is pretty simple because we just have to write some code to the previous files.

And the models.py file will be same as the previous one

Step-1:

In views.py file we have to write two functions named as login and logout to represent the functionality of login and logout and to retrieve information from the client (user).

Views.py file

def login(request):
    if request.method=='POST':  (#receives information from the user)
        username=request.POST['username']
        password=request.POST['password']
 (# checks whether the user information is valid or not)
        user = auth.authenticate(username=username,password=password)

(# if the user with the valid information is found it redirects to home page)
        if user is not None:              
 auth.login(request, user)
            return redirect("/")
        else:
            messages.info(request,'invalid credentials')  (# if the information is incorrect it displays message)
            return redirect('login')    
    else:
        return render(request,'start/login.html')

def logout(request):
    auth.logout(request)
    return redirect('/')

Step-2:

Now we have to give path to login and logout functions(views) in accounts/urls.py file

So lets move to urls.py file of accounts app to give path

urls.py file

urlpatterns = [
     …...
    path("login",views.login,name="login"),
    path("logout",views.logout,name="logout")
]

Step-3:

Let us now write html file for login and at the same time logout in templates/start folder which we have created in

part-1.The file is named as login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>LOGIN PAGE</title>
</head>
<body>
 <div class="main">
      <div class="left">
          <div class="right" >
             <img src=" " alt="">
        </div>

         <div class="login">
              <h1>Login Form</h1>
                 <form method="POST">
                     {% csrf_token %}
                 <div class="form-group ">
                     <label ><b>username</b></label>
                     <input type="text" name="username" class="form-control">
              </div>  
               <div class="form-group">
                <label><b>Password</b></label>
                <input type="password" name="password"class="form-control" >
              </div>
              <button type="submit" class="btn btn-secondary ">Submit</button>
        </form>       
    </div>
    <div  style="text-align:center;">
        {% for message in messages %}
        <h4> {{message}}</h4>
        {% endfor %}
    </div>     
    </div>   
</div>

</body>
</html>

Step-4 :

After logging in we have to go the home page.

Let's take the home page as another app for more clarity so that there will be no

confusion.

Now let's create an another app for home page.

$ python manage.py startapp home

Step-5

Now we have to add the path of this app in regi/urls.py file.

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    …..
    path('',include('home.urls'))
]

Step 6:

Creation of views.py file and urls.py file for the home page .

views.py file


from django.shortcuts import render

def home(request):
    return render(request,'start/index.html')

urls.py fie

from django.urls import path
from . import views

urlpatterns = [
    path('',views.home,name="home"),
]

Step-7:

Creation of index.html file in templates/start for home page

index.html

<!DOCTYPE html>

<html>
<head>
  <title>HOME PAGE</title>
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/style3.css' %}">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>
<body>
<div class="index">
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    {% if user.is_authenticated %}
    <li><br>
      <h1>HEARTY WELCOME TO THIS WEBSITE </h1>
      <br>
       <h2><b>Hello, {{user.username}} You are sucessfully logged in</b></h2></li>
    <li class="nav-item">
      <a class="nav-link" href="accounts/logout">Logout</a>
    </li>
   
     {% else %}
    <li class="nav-item">
      <a class="nav-link" href="accounts/register">Register</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="accounts/login" >Login</a>
    </li>
    {% endif %}
  </ul>
</div>
</body>
</html>

Step-8 :

Styling the web pages by applying CSS.

Create a folder named as static and a sub folder as css (static/css)

Now in the settings.py file of regi folder ,add the static file path at the end of file.

STATIC_URL = '/static/'
STATICFILES_DIRS=[
   os.path.join(BASE_DIR,'static') ,
]

Step-9:

We should also add templates path in settings.py file by importing os.

import os
…..
…..
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
         ......
         .....

           },
]

Step-10:

Adding css files in static/css folder.

style.css

body{
    text-align:center;
    background: url(  ) no-repeat center center fixed;(#use any background image)

    -webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
    
    top: 0;
    left: 0;
    color: white;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main{
    margin: 70px 400px;
}
.left{
    margin: auto;
    float: right;
}
.login {
    color: white;
    padding:20px;
    float: left;
    line-height: 2;
}
.right{
    padding:30px;
    float: left;
}
.btn{
    margin-top: 30px;
}

style2.css

body{
    background-image: url(  ) ;  (#use any background image)

}
.right{
    color:black;
    padding: 10px 30px 10px 20px;
    background-image: url(http://test.ultralinx.co/wp-content/uploads/2020/02/41_4.jpg);
    margin: 30px auto;
    border-radius: 30px;  
    float: left;
}
.left{
    display: inline-block;
    padding: 0px;
    margin-top: 40px;  
}
h4{
    margin-left: 40px;
}
.main{
    padding: 0%;
    margin-left: 300px;
    display: inline-block;
}

input[type=text], select {
     background-color:white;
}
input[type=email], select {  
     background-color:white;
}
input[type=password], select {  
     background-color:white;

}

style3.css


 body{
    background-image: url(); (#use any background image)

    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;
}
.index{
    margin-left: 100px;
    width: 100%;
    margin-top: 20px;
}
li{    
    padding: 30px;
}

Finally apply migrations and we can see the output in