Django employee website 2

Now the next step is to customise the login page. I want to use the template for the homepage for the login page. As right now it looks like this:

image001.png

A plain page without CSS. So we need to extend to template to page. When we add the extending tag to the login HTML we get this:

image003.png

So the template of the website shows up but not the username and login. Later on, I found a somewhat fix by change by changing the {% block content  %} tag with an {% block body  %}. But as we can see the below the login title is blocked by the header in the way. So we need it so the text can be visible.

image005.png

Was able to find a fix by designing the template based on the flask tutorial earlier. So I added some div class and line breaks.

image005.png

Testing in the logging again, get the page stuck on the loading section

image009.png

But when I manually changed into the home it is logged in.

image011.png

Not to sure what is the problem with redirecting.

Now we should change the navigation bar links now that I’ve logged in with test employee. We need to have based if the user is logged in so menu options changes. Instead of keeping the menu of register, login and home.

Also the footer below:

Now we have this result when logged in:

image013.png
image015.png

Now but the links of the page are still dead so they need to be changed. As the homepage is already in the url.py file it should be simply link to add. And the logout page will be part of the built-in authentication views.

Now we have added the links we test them out. First is the logout link, when clicking it we get this:

image017.png

I didn’t know why it redirects me into Django admin page, when first tested it. I later found out that it gives the admin page as it doesn’t have a redirect URL to route to. So I need setup a LOGOUT_REDIRECT_URL variable in the app settings to fix the problem. I choose the same option as the login page as it will route to the homepage.

LOGOUT_REDIRECT_URL = '/employee_web'

By logging again we are also testing the login link as well.  I was able to get to the login page and login to the website. Now to login back out again to see if redirects to another page.

This page when logged:

image019.png

When logged out:

image021.png



The redirect URL changes works as we can see. As this text used from the flask tutorial, I’m basing this website on. The profile link is left dead because I needed to create a template for it with other features. And were only testing the links.

Now to start the building the profile page. The idea of the page is to display information about the user. Email, name. department role etc. First, I’m going to keep the page simple like so:

{% extends "employee_web/base.html" %}


{{ user.username }}
{{ user.email }}
{{ user.first_name }}
{{ user.last_name }}

The next thing I need to do adds to the views and URLs file as this is a new page. And this is not using built-in views or URLs, unlike the authentication views.

The profile view:

def profile(request):
    return render(request, 'employee_web/profile')

And the URLs file:

from django.urls import path

from . import views

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

When trying to test it got this error:

image023.png

As we can see it can not find the template. Later found the issue which was a simple of mistake of not adding a .html to the end of the template name in the view file. Like so:

def profile(request):

    return render(request, 'employee_web/profile.html')

 

After I loaded the page I got this:

image025.png

But the problem is similar to the login page issue from earlier. So I just added content block tag. Also has the same out place text issue from earlier:

image027.png

Which should be fixed with the centre tag and content section. Now the issue is fixed:

image029.png

But the page is not displaying all the details. Only the username. To make it clearer I added more details to the page to highlight the issue

image032.png

I think the issue is that in the template I’m accessing the User model not the employee model were all the data is. So I will change the tags in the template to the employee objects. When testing this out it did not work:

image033.png

And the code:

<h1>Profile</h1>
           <h1>Profile</h1>
            username: {{ Employee.username }} <br>
            email: {{ Employee.email }}<br>
            first_name: {{ Employee.first_name }} <br>
            secord_name: {{ Employee.last_name }} <br>
            role: {{Employee.role}} <br>
            department: {{Employee.department}} <br>

I decided to add names to the User model to see if it would appear in website

image035.png

So needed to edit the HTML again to display the User model variable. Testing it again it did not work:

image037.png

I may fix this issue later on as I couldn’t find the fix for problem. I will end the article on this almost complete website.

Tobi Olabode