Build a Job Search Portal with Django - Part 4
By: Kumar Shubham
Tags: Programming, Bycetutorial, Coding, Django, Python

Build a Job Search Portal with Django — Candidates App Templates (Part 4)

In this part, we will be dealing with all the templates part of the Candidates App section of our Job Search Portal Kumar Shubham Dec 15, 2020·8 min read

Photo by Andrew Neel on Unsplash

Hello friends! This is the fourth part of the new Django series I have started writing on, which is Building a Job Search Portal with Django. I hope every one of you has already read the first three parts of the tutorial series.

If you have not yet read the first three parts of this series, I would strongly recommend reading the first three parts first and then come back to this one. Here I am linking the first part, the second part and the third part of this tutorial series:-

So, as you remember, in the third part we started talking about the Candidates app of this job search portal. We have discussed all the backend related work for that App which included forms, models, views and URLs.

Now, in the fourth part, we will focus on the part that we left in Part 3, the templates. The templates are the part of the App which helps us to visually see whatever we have done in the backend part.

Here, I assume that almost all of you know basic HTML and CSS and so we would only discuss the logic part which connects it to backend and we would not be discussing on structure and design part.

So, let’s start discussing all templates one by one.

applied_jobs.html

This template lists out all the jobs which we have applied to. It starts by extending the layout.html file present in the Users folder.

We also describe the application status beneath each applied job post along with some details about the job post.

Here is the code for this template:-

Have a look at the Applied Jobs page on the website:-

Applied Jobs

details.html

This page is the page which details out the benefits of using the website and how does it help the candidates search for jobs in a faster and easier way. We list out the facilities present on our website.

This page has nothing to do with backend and is like an introduction page for a new user to the website. It has links to the job search page.

Here’s the code for this template:

Here’s how it looks when viewed on a browser:-

Details

edit_profile.html

This page allows you to edit your profile. It uses the ProfileUpdateForm to edit the profile details. It has a Save Button to save the changes. It also allows us to update our resume by uploading a new one or just clearing the old one. It uses crispy_forms to style it with Bootstrap 4 design.

Have a look at the code of this template:-

Here’s how it looks when viewed on a web browser:-

Edit Profile

home.html

This is the main page of the Candidate side of the website. It is the page which allows anyone to search for jobs by entering the two fields:

Job Title, Type, Company or Skill required for the Job The location where you need the job

Both these fields are optional and can be left blank. Leaving a field blank means we have no particular filter to be added and we need to show all jobs in such a case.

For e.g.: If I search for Python and leave the location part empty, I will be shown all Python jobs irrespective of location.

Also, we have a list of most popular search terms below which all are buttons which when clicked gives us the job results related to that term.

Here’s a look at the code of this template:-

Here’s how it appears when viewed on a web browser:-

Home (Job Search Page)

intelligent_search.html

This page displays the most relevant jobs that match the skill set of the candidate. It also displays the job types which candidate has opted for in their profile and not every job that has skill sets match.

Also, it displays how many of the required skills for the job have been fulfilled by the candidate.

It displays all the jobs that pass the criteria in a card-based layout which we followed in Applied Jobs page as well.

Let’s have a look at the source code of this template:

Here’s how this would appear when viewed on a browser:-

Intelligent Search Page

job_detail.html

This page is used to display any complete job post. It has an Apply button if the recruiter wishes to take in applications from the website otherwise it would display an Apply on Company Website button which when clicked takes you to the company website to apply for the job.

It also has a Save button which turns into a Remove button once we save the job and vice versa.

It displays all the details about the job along with the skills required. We also have a Relevant Jobs section where we show jobs which are related to this one and the candidate might be interested in them too.

Let’s look at the source code for this template:

Here’s a look at the template when viewed on a browser:-

Job Detail

job_search_list.html

It is the page we see whenever we search for a job. It also has the same two search fields and the search button but in a smaller footprint.

We have all the jobs listed with a Read More button to take us to the job detail page.

If in case we do not find any job relevant to the search query, we display a banner stating that no relevant jobs were found and then we display the same list of buttons for some quick job searches that we used on the home page.

Here’s a look at the source code for this page:

Have a look at the template when viewed on a browser:-

Job Search List

profile.html

This page displays all your profile data. It has three buttons beneath the Profile data which are:

Edit Profile — This button takes us to the Edit Profile page. Saved Jobs — This button takes us to the Saved Jobs page. Applied Jobs — This button takes us to the Applied Jobs page.

Also, we have a Skills section on the right side of the page. It lists all your skills and has a bar to write a new skill and add it to the list of skills. We can also select the skills by using checkboxes to delete them using Delete Skill Button.

Here’s a look at the source code for this page:

Here’s a look at the page when viewed on a web browser:-

Profile Page

saved_jobs.html

This page is very similar to Applied Jobs in the structure and functionality. It stores all the jobs which we have saved for future references.

Here’s a look at the source code for this page:

Here’s a look at the page when viewed on a web browser:-

Saved Jobs

So, we have finished all the template stuff related to the Candidates App. In the next two parts, we will deal with the backend of the Recruiters App and the templates of the Recruiters App respectively.

Hopefully, you enjoyed this one! Also, here is the GitHub Repository for this project which you can star and fork if you like and test it out on your own.

The next part of this tutorial is:-

Have a look at the five-part Social Media Website with Django series which was quite well received. It is a different project based on Django and you will surely love it.

Some more good articles to read after this one:-