Django employee website — Tobi Olabode

This project is about creating software that can be used in an enterprise context. So I settled on an employee management system. Mainly an internal website used by the company. This has been done before I will be using this article an inspiration. I will probably use Django instead as the library has more built-in resources for making a tool like this. Useful features such as password management and built-in admin page. I want to make the app with a workable database and website. Not sure if I will deploy the website. If I do deploy I will google cloud services as I have experience with that product or try amazon web services.

First thing is to start creating the database. This is done in Django by making models. From the Django documentation, it defines models as ‘A model is the single, definitive source of information about your data.’ We need to make an model for the employee. The class will the features of first names, last names, id numbers (Django does this automatically), departments and roles.

I briefly forgot I had make an Django app not just use the admin folder given to me. But a simple python manage.py startapp employee_web created the app with an models.py file. So just pasted code for the employee class there.

Now I just to migrate it, using python manage.py migrate. This installs the databases necessary for the installed apps in the settings. The installed apps are these:

django.contrib.admin — The admin site. You’ll use it shortly.

django.contrib.auth — An authentication system.

django.contrib.contenttypes — A framework for content types.

django.contrib.sessions — A session framework.

django.contrib.messages — A messaging framework.

django.contrib.staticfiles — A framework for managing static files.

Writing your first Django app, part 2 | Django documentation | Django

Now with python manage.py makemigrations employee_web we can update the employee model to Django.

Now the next step is to set up the admin website. Where we can add users, departments, etc.

python manage.py createsuperuser creates an admin for us.

Email address: admin@example.com
Password:
Password (again):
This password is too common.
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.

After logging in you get to see the admin website:

To see the employee model I’ve made earlier, I needed to do the admin.py file and import the employee model

When I click the add employee button it gives me this page:

Which are the fields that I coded in the model earlier. Which means we are making good progress.

Now the next step is to step the views for the website. I going to have a homepage view that will work as a placeholder. The page will have an image in the middle with text over it. Also, have an navigation bar for the employee’s status.

It will be based on this:

https://scotch.io/tutorials/build-a-crud-web-app-with-python-and-flask-part-on

Using the code from the tutorial above to develop the page. So I created a folder to hold the HTML file. Pasted the code like so:

Made a simple view function in a new view.py file. So the template can be rendered by Django.

Then next step is to add the view to the urls.py file of the employee_web app.

After then add the path to my employee_site url config.

 path(‘employee_web/’, include(‘employee_web.urls’))

This means I need to delete some of the code on the HTML as it’s not suited to Django parsing. I was able to fix the issue by deleting links that did not link any file or page. And turning other links into dead links so it does not crash the website.

Stuff like this:   <li><a href="{  }">Home</a></li>

As we can see the navigation bar loads but not the rest. So my task is not make sure an image is able show on the website. To do this I need to set up an CSS file and folder to host the image. I will the CSS from the same tutorial from earlier.

But some edits need to be made as it was originally designed in flask in mind.

background: url(../img/intro-bg.jpg) no-repeat center center;

will be replaced with:

background: url(“images/photo-of-people-sitting-beside-table-3182755.jpg”) no-repeat center center;

Also, I will need to add a link to the HTML file so it can get the CSS code.

<link rel="stylesheet" href="{% static 'employee_web/style.css' %}" type="text/css">

Later I found I needed to make a subdirectory to hold the images, so did like so:

Now running the server the again I get this result:

This means it has loads all loads CSS correctly expect the image.

To fix this issue I’m going to make a base HTML template rather using just the one file for homepage. From doing this I fixed the issue:

From looking at the code I noticed that the image that was in the CSS file was under a class that was not in the original homepage file.

Finding the element in the original homepage file:

I think I’ve should have followed the tutorial more closely rather than customising straight away.

Logging in

Now we have a working homepage page. We can start to develop an way for the employee can login into the website. So I have to develop a login page for this. From googling around I’ve found out that Django provides built-in views that handle authentication like login forms. To add the forms to the project just needed to add the views to my URLs file.

I made an folder under my templates called registration which will hold the login html file. I will using the code from this website for the login page. This is the result below:

Now we need to redirect user to the homepage when they can successfully logged in.

From lots of reading I’ve notice I made a major I mistake when making the models. Instead of creating an custom model eg employee. I’ve should have used Django built-in user model. As this is the model being used for the authentication.

To fix this I need to way to connect the employee model to an user class. To do so need to add a one to one field.

user = models.OneToOneField(User, on_delete=models.CASCADE)

The prompt gave an error about adding a new filid but his can be fixed by adding null=true to the user variable.

I added a non-admin user to test this stuff out. This is the employee object below:

Which means this test user has an login. So the user can be redirect into the homepage after logging in I need to change the LOGIN_REDIRECT_URL as the default is /accounts/profile/. I changed into LOGIN_REDIRECT_URL = ‘/employee_web’ which is the route of the homepage. (This will be changed later into something like home, to make it more clearer.)

In the homepage I added a if statement to write an message on the website if they logged on.

In the next version should add more features like customising login page, having an register page etc.

Originally published at https://www.tobiolabode.com on December 23, 2019.