How to Build a Jobs Board Using Django, JavaScript, CSS and HTML.

Introduction

A job listing website is a website that minimizes the hassle between employers and employees/job seekers. Job portals also reduce the time and cost for employers and employees such that when hiring or looking for a job all you need is a job portal and you are good to go. When employees go to the portal, they sign up, upload their CV and apply to the jobs they match with their skills.

In this article, we will be building a job portal using Django, HTML, CSS and JavaScript and the use of Africa’s Talking API for OTP that will be sent for resetting the password. The project will have two main users for employers and employees.

Intended audience: Who the article is for

This article targets Python/Django developers who want to build projects after learning to program for a while and are stuck on which project to build.

Case Study: What the article is going to cover

The portal is going to have two users: employers and employees. The project will handle registration for both employers and employees, posting of jobs, password reset using otp via Africa’s Talking API, job applications online, job listing, uploading of cv’s, bookmarking of jobs, logging authentication using social accounts, editing profile among many other things.

Requirements/Prerequisites of the Project

  1. Knowledge of Python and Django, JavaScript, HTML and CSS.
  2. Installing packages using pip
  3. Knowledge of terminal
  4. Africastalking account, API key
  5. IDE-Pycharm /Vscode.
  6. Github, Gmail and LinkedIn account.

Setting Up The Project

Let’s create a virtual environment for our project by typing pip install virtualenv on the terminal

Lets now activate the virtual environment by typing:  

In windows, type “venv\Scripts\activate in the terminal and in Mac/Linux, type ”source venv/bin/activate

First, let’s create a directory for our project, still in the terminal type in cd softkenya for windows and in Linux $ mkdir softkenya to create the directory of our project.

Let’s now install Django by typing in pip install django on the terminal

Then start your project by typing: django-admin.py startproject softkenya.

We need to now install other dependencies that will be used our the project:

pip install africastalking – We shall use it in sending the OTP during password reset.

pip install django-ckeditor – This package provides a widget for a toolbar when writing job descriptions. It is like an editor that helps during job submission by employers. You can customize it according to your desire like having your own width, height, tab spaces etc:

CKEDITOR_CONFIGS = {
    'default': {
    'width': '100%',
    'tabSpaces': 3,
  }

Taggit – This is installed by adding it to the list of apps installed. This will help us to add tags during the job posting by the employer e.g. Python, Javascript, Java e.t.c

Now lets create the two apps that will be used in the project by typing:

 “python manage.py startapp accounts  to create accounts app and

 “python manage.py startapp jobosoft” to create jobosoft app.

The next step we will performing is creating the database that we will use in this project. This is done by typing the following on the terminal: python manage.py makemigrations”

Now let’s apply the database changes by typing python manage.py migrate on the terminal.

To see if our development environment is ok we will confirm this by starting the server. This is done by typing python manage.py runserver. If it starts successfully you will see a webpage http://127.0.0.1:8000 running and congratulating you for installing django meaning we are good to go.

You can stop the server by Ctrl+C on your keyboard. Now let’s define our static url in the settings.py after STATIC_URL = ‘/static/’. This one is used to serve static files which include CSS, bootstrap, images, Javascript. The static files are saved under their own directory. The static url will look like this:

Now let’s add our apps to the settings.py of our softkenya project. Go to the INSTALLED_APPS and add the following apps to the list.

All the CV’s uploaded to the system by the employees will be served by the following static url that’s why you will see all the CVs saved in a media folder under the softkenya directory.

Here is the full code of the settings.py of the softkenya project

Parts of Softkenya project.

Softkenya/asgi.py – It’s the entry point for ASGI web servers to serve Softkenya project.

Softkenya/settings.py – Contains the configurations of the softkenya project.

Softkenya/urls.py – Contains the url directories of the softkenya project.

Softkenya/wsgi.py – It’s the entry point for ASGI web servers to serve Softkenya project.

Now lets look at different functionalities of the apps

Accounts/apps.py

Contains the accounts app configurations.

Accounts/forms.py

It consists of all the forms we have included in our project. It contains employer/employee registration forms, login forms for both employee and employer, for profile editing (updating profile).It consists of the following classes:

EmployeeRegistrationForm class – Handles the registration of employees. It asks for gender, first name, last name, password 1, password 2, uploading cv in different formats, email, phone number for Kenyan users only.

EmployerRegistrationForm class – Handles the form of the employer. It prompts the user to enter the company name, company address, email, phone number, password1 and password 2.

UserLoginForm class – Handles the login of the employer and the employee.

EmployeeProfileEditForm class – It gives the employee the option of changing his details from names, CV, phone number and so on.

Accounts/managers.py

It helps in managing user authentication. It has different classes for different functions.

CustomerUserManager class – It is where you enable the email to be used as the default username. It has a function create_user which helps in creating a user with a given password and email. It has another function create_superuser which creates a superuser with an email and a password.

Acccounts/models.py

It creates different models for the database usage. From users, otpmodels where email is used to link OTP with the user.

Accounts/utils.py

It handles the OTP that will be used in resetting the password. We had installed Africastalking package during project setup. Am assuming you have an Africastalking account .Head over to https://account.africastalking.com/apps/sandbox and grab your user name and api key .We then create a send_sms for sending an otp and another function generate_code ,blur_phone function that shows certain numbers in your phone number not the whole phone number.

Accounts/validators.py

We use the function validate phone number that makes sure the number entered during reset of password starts with +2547 or +2541. It also validates to make sure that the number entered is not more than 13 digits. We also use validate to verify the type of file extension during the uploading of CV. If the employee provides unsupported formats like jpeg, bitmap, png instead of pdf, Docx, doc it throws an error of Incorrect file extension.

Accounts/views.py

It has a lot of functions with different functionalities.get_success_url redirects the user to home when he/she successfully logs in.employee_registration handles employee registration and redirects him to login after successful registration.emloyer_registration function handles employer registration and redirects the employer to login after successful registration.emloyee_edit_profile function allows  the employee to edit profile and need a login.user_logIN provides users to login.userlogOut provides the ability to logout.reset_password enables the user to reset password.otp_confirmation function helps in confirming if the entered otp is right or it has expired or even invalid.change_password functions helps the user in changing the password.

Accounts/urls.py

Handles the urls of the accounts app. The following are the URLs created:

employee/register/- a URL path that enables an employee to register.

employer/register/- a URL path that enables an employer to register.

profile/edit/<int:id>/-a URL path that enables one to edit his/her profile.

‘login/’, views.user_logIn-enables users to login

logout/’, views.user_logOut-enables users to log out.

reset_password/-url that enables the user to reset password

reset_password/otp/- the link to the page where you will will be sent to a page where you put your phone number and request for the OTP to be sent.

reset_password/change_password/<str:UUID>-  a URL path to a page a user will be redirected to change password.

Accounts/admin.py

AddUserForm class-It asks any new user to confirm password .It has a function clean_password2 which confirms if the two passwords entered meet.

UpdateUserForm class-It helps in managing the password. It doesn’t allow changing password in the admin. It has a function clean_password which ensures that password can’t be changed in the admin.

UserAdmin class-manages user and admin.

Jobosoft App

Jobosoft/models.py

This contains all the parameters that are relevant to employer. It tells the database which features will be available in each model. The models.py consists of :

Category class-It holds three parameters. It tells us whether the job is fulltime, part-time and internship.

Job Class-This is the class that tells all the information about the job. It is first linked to the default user .It contains the title of the job, the description of the job, the tags under which the job falls like :Python, JavaScript, Django, the location of the job, the type of the job whether it is fulltime, part-time or internship, the salary they are paying, the name of the company, more details of the company(description),the website of the company(url),timestamp, the date published and the deadline of the job.

Applicant class-It has the details about the applicant. it consist of user, job, cv and timestamp.

BookmarkJob class-It contains the jobs that have been bookmarked by the applicant. It contains user, job and timestamp.

jobosoft/admin.py

Helps in customizing the Django admin.

jobosoft/forms.py

It consists of different forms

Class JobForm-This one for the employer to post a job to the site. It will have different fields to be filled during posting and its compulsory to fill all the parts. It will have plaeholders to give the employers the idea on what to type. It consists of job title, location, salary, job description, tags, submission deadline, company name and url.

Class JobApplyForm-it contains the part to submit CV.

Class JobBookmarkForm-It gives the ability to bookmark a job.

Class JobEditForm-It gives the employer the ability to edit the job posted.

Jobosoft/permission.py

It controls the users on the project (employer and employee) on who can access certain features of the app.

Jobosoft/views.py

It contains all the views of the app. It consists of different functions.

Home_view function-It serves us to the home page. It shows the number of  jobs published, the total number of candidates(employees),the total number of companies(employer)pagination if jobs exceeds a certain number and so on. It also renders us to the index.html template.

Job-list-view function-It displays the number of jobs listed.

Create-job-view function-It enables the employer to create a job post. And for an employer to create a job post a login is required.

Single-job-view function-provides the ability to view the job details and description.

Search-result-view function-it provides the employee with the ability to search jobs by filtering using job title, company, job type and location. It displays the jobs according to the inputs and category chosen by the user. It will then render the result to result.html

Apply-job-view function-it enables the employee to apply for a job but it requires a login for him/her to apply for the job. It renders the Apply-job.html template.

Dashboard-view function-We have two dashboards for employer and for the employee. For the employer it shows the number of applied jobs, total applicants, and jobs saved and jobs posted. For employee dashboard it only shows saved and applied jobs. This renders the dashboard.html template.

Delete-job-view function-this function is only for employer’s .If an employer posted a job and he wants to delete it. After deletion of the job he is redirected to the dashboard.

Make-complete-job-view function-this enables the employer to close a job and a login is required for him to access this page.

All-applicants-view function-It shows all the applicants who have applied for a job posted by the employee. Employee requires to login to view this page.

Delete-bookmark-view-enables the employee to delete bookmarked job but it requires him to login first.

Applicant-details-view function-It enables the employer to view all the details of the employee. It requires a login.

Job-bookmark-view function-It enables the employee to bookmark/save a job maybe for further viewing. The employee must login.

Job-edit-view function-enables the employee to login and update profile

Jobosoft/urls.py

It enables us to get urls of all our functions. It enables users to move through the website easily. The following are the urls used in the Jobosoft app: home page, job list, creating a new job post, single job, job application, bookmarking jobs, redirects to about and contact page, search result, dashboard ,number of applicants ,url to edit job, url to delete job, get applicants details, deleting bookmarks.

Jobosoft/apps.py

It contains the app configuration for joboapp.

Remember to head over to http://127.0.0.1:8000/ admin and login using your email and password.After that go to categories and create job categories.

Jobosoft/templetags/jobosoft_tags.py

It is used for returning simple tags and can be used to store values for future use.It has different functions:get_number_of_applicant function that is used to return the number of job applicants,is_job_already_saved function is used to check if a user with that job still exists in bookmarks,is_job_already_applied function is used to check if the user with that job exists in applicant model.

Adding Social Authentication Login to the Project.

We shall then add social authentication for login tour app. In order for all this to be done we will be using the social-auth-app django library. In this app we will use GithubOAuth, GoogleOAuth and LinkedinOAuth.This will enable users to create accounts on the platform using Github,Google,Linkedin accounts. It will enable users to login without necessarily setting a password. After setting up this we shall run the project on http://localhost:8000/  not http://127.0.0.1:8000/  due to our redirecting links we will be using. Now let’s get started.

The first step is to install the social-auth-app django library by typing the following on the terminal: pip install social-auth-app-django.

Then head over to softkenya/settings.py and add social_django to the installed apps.

Then go to MIDDLEWARE_CLASSES and add social_django.middleware.SocialAuthExceptionMiddleware   at the end of it still under softkenya/settings.py

Lets then update TEMPLATES under settings.py by adding the following two codes: social_django.context_processors.backends’,  ‘social_django.context_processors.login_redirect,

Since we shall be dealing with Github, LinkedIn and Google lets add the three to AUTHENICATION_BACKENDS which is used for checking the user authenication. Add the following social_core.backends.github.GithubOAuth2, social_core.backends.linkedin.LinkedinOAuth2, social_core.backends.google.GoogleOAuth2

Go to sofkenya/urls and add the following to urls: path(“social-uth/”,include(include(social_django.urls”, namespace= “social”)),

social-auth-app django library comes with a mechanism called social_auth_pipeline which helps in managing the user authentication from registration,logging in and logging out. But you can customize it to fit how you want it used.We shall be using the default one which means the following:

  • social_core.pipeline.social_auth.social_details,-It gets more information about the user and returns it in a simple format.
  • social_core.pipeline.social_auth.social_uid,-gets the social unique identifier of a user
  • social_core.pipeline.social_auth.auth_allowed,-It verifies if the current authentication process is valid.
  • social_core.pipeline.social_auth.social_user,-It checks if the social account is existing already in the site.
  • social_core.pipeline.user.get_username,-it makes up the username of the users
  • social_core.pipeline.user.create_user,-It creates a user account if it founds out that there is no user existing.
  • social_core.pipeline.social_auth.associate_user,-it creates records that associates with the account of the users.
  • social_core.pipeline.social_auth.load_extra_data,-it populates the extra data field in the social record with new values
  • social_core.pipeline.user.user_details,-It updates the user details if the user exists in the system.

Add the following code to settings.py

Then add the following lines for redirecting the user after authentication: LOGIN_REDIRECT_URL= “/” ,

LOGOUT_REDIRECT_URL= “/”

Lets now create a superuser and when prompted fill the email and password: python manage.py  createsuperuser.

Github Authenication

Now let’s start with the Github Authenication.

Head over to github.com and sign in into your account.Head ove to the  settings ,then developer settings, click on create new Github app. You will be prompted for Github App Name, then  homepage url http://localhost:8000/

and under the callback url input the following url: http://localhost:8000/social-auth/complete/github/ .Then click on create Github App

After creating the app, click on it and copy the client ID and client secret. For me the following are my details.

Client ID=4a22e1e61fae75fa9c49

Client Secret=f03b853c9fe6ce30ab92b519abe30482102d25a5

Add them to your app :

Linkedin Authentication

Login into your LinkedIn account then head to https://www.linkedin.com/developers. Then click on create app.You will be prompted to provide app name, LinkedIn Page(which should be active on LinkedIn in case you don’t have create one), App logo and agree to the terms and conditions and then click create app. After the app has been created head over to Auth you will see the client ID and client Secret which we shall use in our app.Go to authorized redirect URLs for your app and input this url as the redirect url:http://localhost:8000/social-auth/complete/linkedin-oauth2/

Add the following code to softkenya/settings.py .Replace this with your keys.

We also add the scope which gives permission for us to access the client’s data while field selectors has the data that should be returned when a user is successfully authenticated with LinkedIn login.

Google Authentication

We are assuming you have gmail account for this if not create one.To add Google authentication we head over to Google Developers ,go to OAuth consent screen and choose external, it will ask for app name, email, app logo, developer email then click save and continue. After creating the app go back to the dashboard .Then on the left panel click on credentials it will redirect you to a place with create credentials. Click on it and select OAuth client id, It will ask the type of application choose web application, give it a name ,then on add URI put the following domain:http://localhost:8000/social-auth/complete/google-oauth2/

Then click create. The will be a popup saying OAuth client created with client id and client secret. Copy them as we will use them in our project.

Add the following code to settings.py

To apply the changes to our database type the following on the terminal: python manage.py migrate to effect changes.

If a user successfully logins using his/her social media handles above the details will show in the admin dashboard.

Templates

Under the softkenya directory, create html files under the templates folder. It enables the data to be displayed. Under the templates create another folder for accounts and jobosoft. Now let’s have a look at the templates:

accounts/change_password.html-This page will be used to display to the user to confirm his/her password during the reset process and enable her put a new password.

accounts/employee-edit-profile-This page will enable the employee if he has to change any details on his profile to change or update them.

accounts/employee-registration.html-This page enables the employee to sign up on the platform.

accounts/employer-registration.html-This page enables the employer to sign up on the platform.

accounts/enter_otp-This page displays the page where you input the otp code to your phone to enable resetting of the password.

accounts/login.html-This enables the login of the users.

accounts/reset_password-This displays the user to put the recovery email when resetting password so as to prompt for the OTP to be sent via the sms.

jobosoft/all-applicants.html-This page displays all the employees who have applied for the job.

jobosoft/applicant_details.html-This page displays all the details of the applicant/employee from names, email address etc.

jobosoft/Apply-job-this page enables the employee to apply for a job.

jobosoft/dashboard.html-This page displays the dashboard for both the employer and employee by showing the necessary tasks in the dashboard.

jobosoft/employer-edit-profile-this page enables the employer edit their profile.It enables the editing of firstname,lastname,phone number,reuploading of CV.

jobosoft/index.html-The default home page for the web app with brief instructions on how the web app works.