Create a Resume Builder website in django [2020]

How to Create website Dijango

Hi, in this article I will teach you how to create a resume builder website in django. By the end of reading this complete article you will have a complete website that you can edit and put online to provide resume building services online. So let’s get started.

Let’s discuss how we are going to create a resume builder website in django one by one.

  1. We will have a form in the homepage that we will use to get data from the user and then saves it inside our database.
  2. Once the user fills out the form and click on generate cv button then we will render the data onto a html template and you probably add some more functionality to it in order to make it better.

Requirements to make this project

To create our resume builder website in django we need to have python and django installed, if you haven’t till now go ahead and install them and after installing both of them just activate your virtual environment and follow along.

Inside command prompt type the following command to create a new project

django-admin startproject cvMaker

Then change your directory to cvMaker by typing the following command.

cd cvMaker

Running our project.

Now go ahead and check weather our project is successfully created or not by typing the below command.

Python manage.py runserver

This will run your server and know type the following address in any of your browser to see the results. 127.0.0.1:8000 and you will a page like this.

The above message indicates that we have created our project successfully. Now start editing this project.

To edit this project and make it according to our flavor, first we need to create an app so that we add some functionality to our project.

To create an app in django, type the following command in command prompt:

python manage.py createapp cv

This will create an app named cv inside your project root folder.

Open up your project in any text editor you want and you will see a folder structure like this:

mubashartech.com

Here cvMaker is the main project and cv is the app that we just created.

Registering our app.

Open up settings.py file inside cvMaker and register our cv app under installed apps.

mubashartech.com

Start coding resume builder website in django

Now let’s open up models.py file inside cv application folder and add these lines of code to it.

from django.db import models
# Create your models here.
class cv(models.Model):
    name = models.CharField(max_length=200)
    email = models.CharField(max_length=200)
    phone = models.CharField(max_length=50)
    # Address info
    country = models.CharField(max_length=20)
    state = models.CharField(max_length=20)
    city = models.CharField(max_length=20)
    address = models.TextField()
    # Education info
    lastDegree = models.CharField(max_length=50)
    degreeName = models.CharField(max_length=200)
    institute = models.CharField(max_length=200)
    dateOfJoining = models.DateField()
    dateofEnd = models.DateField()
    # Interest & Hobbies
    favSport = models.CharField(max_length=50)
    interest = models.CharField(max_length=50)
    shortBio = models.TextField()
    def __str__(self):
        return self.name

let’s know migrate our database by typing the following line inside command prompt.

python manage.py makemigrations

And then finally type the following command to sync our model into database.

python manage.py migrate

You will see some migrations taken place inside command prompt.

Then just go ahead and create a super user account that we will be using to manage our website administration. To do that just type the following command inside command prompt.

python manage.py createsuperuser

Then you will be asked to enter the username, email and password. Just fill out the info inside command prompt and a user with the username you provided is successfully created. Now open up admin.py inside cv application folder and add these lines of code to it.

from django.contrib import admin
from .models import cv
admin.site.register(cv)

Now go ahead and run your project again by typing python manage.py runserver

Open up any browser and in address bar type the following.

127.0.0.1:8000/admin

You will see a page like this.

mubashartech.com

Just enter the username and password you’ve just created to login.

Once you logged in then you will see a page like this.

Here the Cvs is the model that we had created before and we can add cvs from here and also can check the cv’s details from here by clicking on cvs link you have seen in the above screen shot.

Now go ahead and open up views.py file inside cv application folder and add these lines of code to it.

from django.shortcuts import render
from .models import cv
# Create your views here.
def homeView(request):
    return render(request, 'cv/cv_home.html')
def detailView(request):
    if request.method == 'POST':
        #Acessing data
        name = request.POST.get('name')
        email = request.POST.get('email')
        phone = request.POST.get('phone')
        country = request.POST.get('country')
        state = request.POST.get('state')
        city = request.POST.get('city')
        address = request.POST.get('address')
        lastDegree = request.POST.get('lastDegree')
        degreeName = request.POST.get('degreeName')
        institute = request.POST.get('institute')
        dateOfJoining = request.POST.get('dateOfJoining')
        dateOfEnd = request.POST.get('dateofEnd')
        favoriteSport = request.POST.get('favSport')
        interest = request.POST.get('interest')
        shortBio = request.POST.get('shortBio')
        #Adding to model
        new_data = cv(name=name, email=email, phone=phone, country=country,
                                            state=state, city=city, address=address,
                                            lastDegree=lastDegree, degreeName=degreeName,
                                            institute=institute, dateOfJoining=dateOfJoining,
                                            dateofEnd=dateOfEnd, favSport=favoriteSport,
                                            interest=interest, shortBio=shortBio)
        new_data.save()
        context = {
        'name':name, 'email':email, 'phone':phone, 'country':country,
                                            'state':state, 'city':city, 'address':address,
                                            'lastDegree':lastDegree, 'degreeName':degreeName,
                                            'institute':institute, 'dateOfJoining':dateOfJoining,
                                            'dateofEnd':dateOfEnd, 'favSport':favoriteSport,
                                            'interest':interest, 'shortBio':shortBio,
       }
    else:
        context = {'name': 'no_data found'}
    return render(request, 'cv/cv_detail.html', context)

In the above code we have just created two views. In homeView we are simply displaying the form and in detailView we are taking inputs from user and storing it inside database and also render the user details onto a html template by retrieving data from the database.

Now create a new file inside cv application folder and name it as urls.py and add these lines of code to it.

from django.urls import path
from . import views
urlpatterns = [
    path('', views.homeView, name='home'),
    path('detail/', views.detailView, name='detail')
]

In above code we are simply setting path to our pages or we are setting routes.

Adding templates in our website.

Create a new folder inside cv application folder and name it as templates. Then create a new folder inside that template folder and name it as cv. Our folder structure might look like this.

mubashartech.com

Now create a new file inside cv folder that we just created and name it as cv_home.html and add these lines of code.

{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" href="{% static 'cv/style_home.css' %}">
  </head>
  <body>
    <h1>Welcome to cv maker</h1>
    <p>Please enter your details to generate cv</p>
    <div class="container">
      <form action="{% url 'detail' %}" method="post">
      {% csrf_token %}
      Name: <input type="text" name="name" value="">
      <br>
      Email: <input type="text" name="email" value="">
      <br>
      Phone: <input type="text" name="phone" value="">
      <br>
      <hr>
      <div class="address">
      Country: <input type="text" name="country" value="">
      <br>
      State: <input type="text" name="state" value="">
      <br>
      City: <input type="text" name="city" value="">
      <br>
      Address: <textarea name="address" rows="8" cols="80"></textarea>
      <br>
      <hr>
      </div>
      <div class="education">
      Last Degree: <input type="text" name="lastDegree" value="">
      <br>
      Degree Name: <input type="text" name="degreeName" value="">
      <br>
      Institute: <input type="text" name="institute" value="">
      <br>
      Date of Joining: <input type="text" name="dateOfJoining" value="">
      <br>
      Date of Ending: <input type="text" name="dateofEnd" value="">
      <br>
      </div>
      <div class="fav_sport">
      Favorite Sport: <input type="text" name="favSport" value="">
      <br>
      Interest: <input type="text" name="interest" value="">
      <br>
      </div>
      <div class="short_bio">
      Short Bio: <textarea name="shortBio" rows="8" cols="80"></textarea>
      <br>
      </div>
      <input type="submit" name="" value="Submit">
    </form>
  </div>
  </body>
</html>

Create another file inside cv folder and name it as cv_detail.html and add these lines of code to it.

{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>detail</title>
    <link rel="stylesheet" href="{% static 'cv/style_detail.css' %}">
  </head>
  <body>
    <div class="container">
    <h1>{{name}}</h1>
    <hr>
    <p> Email: {{email}} </p>
    <p>Phone: {{phone}}</p>
    <hr>
    <h2>Address Detail</h2>
    <p>Country: {{country}}</p>
    <p>State: {{state}}</p>
    <p>City: {{city}}</p>
    <p>Parmanent Address: {{address}}</p>
    <hr>
    <h2>Educational Details</h2>
    <hr>
    <p>Education: {{lastDegree}}</p>
    <p>Degree Name: {{degreeName}}</p> <p>From {{dateOfJoining}} to {{dateOfEnd}}</p>
    <p>Institute: {{institute}}</p>
    <p>Favorite Sport: {{favSport}}</p>
    <p>Area of Interest: {{interest}}</p>
    <h2>A Short Description about myself</h2>
    <p>{{shortBio}}</p>
    </div>
  </body>
</html>

Start styling our website:

Now comes the styling part of our website. Create a new folder inside cv application folder and name it as static. Then again create a new folder inside static and name it as cv.

Create a new file inside cv folder we just created inside static folder and name it as style_home.css. You file structure should look like this.  Static/cv/style_home.css Add these lines of code to style_home.css.

.container {
  text-align: center;
  font-size: 20px;
}
h1{
  text-align: center;
}
p{
  text-align: center;
}

Create another file inside cv folder and name it as style_detail.css and add the following lines of code to it.

.container{
  text-align: center;
}
.container h1{
  font-size: 50px;
  font-family: Arial;
  font-weight: 400;
}
.container h2{
  font-size: 40px;
  font-family: Arial;
  font-weight: 400;
}
.container p{
  font-size: 20px;
  font-family: Arial;
  font-weight: 200;
}

Including application URL to the main URL file.

Now include the urls.py file of our cv application into the main urls.py file present at cvMaker.

Open up urls.py file inside cvMaker project folder and add these lines of code to it.

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('', include('cv.urls')),
    path('admin/', admin.site.urls),
]

Here we’ve just included our application urls.py file, rest of the code is already present there. Now lets test our website.

Running our cv maker project:

Run your project and open up any browser and type the following address.

127.0.0.1:8000 and press enter. You will see a page like this.

Once you fill out all the details and press the generate button then you will taken to cv detail page and your data will also be saved inside database and you can check that by simply going to 127.0.0.1:8000/admin and click on cv and you’ll see and cv will be added there.

With this our project is successfully created and now you can edit it according to your taste and you are free to use this project anywhere you want. I have also created a tutorial on creating a personal website in django, you can check it here Thanks for reading and if something didn’t work for you please ask it in the comment section and I will definitely answer.

Spread the love

2 thoughts on “Create a Resume Builder website in django [2020]

  1. Pingback: Online Teech
  2. Pingback: Online Teech

Leave a Reply

Your email address will not be published. Required fields are marked *