Make a simple Django 3.2 Portfolio Project as Data Scientist — Part 2

This is the second part of the blog, Before reading this blog I highly recommend reading the first part of this project.

In this second part, I will create an app called homepage that will show my portfolio’s home page. Mostly do the static part of the project. In part 3, I will make this static into a dynamic Django website.

For this project, I will use the Bootstrap 4 template which is written on simple HTML, CSS. And I have bought one template for this from this link. My template will look more like this:

fig:

It’s just a mock design with my dummy data. We will drive into more details on this blog!

Create a Django Application:

After creating the Django project the file will look like this (fig:1.2). our project folder is fully ready.

With pre-installed some Django apps like sessions, admin, auth, etc. but we should not worry about these things.

fig: 1.2

Now we have to create an app, for this run the following command:

$ python3 manage.py startapp home_page

This will create another directory called home_page with several files:

__init__.py: tells Python to treat the directory as a Python package.

admin.py: contains settings for the Django admin pages.

apps.py: contains settings for the application configuration.

models.py: contains a series of classes that Django’s ORM converts to database tables.

tests.py: contains test classes.

views.py: contains functions and classes that handle what data is displayed in the HTML templates.

As we’ve created the app, you need to install it in our project. In portfolio/settings.py, add the following line of code under INSTALLED_APPS:

I am continuously updating and pushing my files to the Github project. if any confusion arrives anyone can go through the git repository.

Now let’s write our first view in home_page/views.py and put the following Python code in it:

This view we have just created for a test to see if everything is working fine or not. This is the simplest view possible in Django. For Calling the View, we need to create a file called urls.py in our app directory. After creating the urls.py we will get this directory:

home_page/
__init__.py
admin.py
apps.py
migrations/
__init__.py
models.py
tests.py
urls.py
views.py

In the home_page/urls.py file include the following code:

The next step is to point the root URLconf at the home_page.urls module. In My-portfolio-project/urls.py, add an import for django.urls.include and insert an include() in the URLpatterns list.

My-portfolio-project/urls.py:

Now if we run in our terminal

python3 manage.py runserver

And go to http://localhost:8000/home/ , We will get this output:

Our view is working with URL.

Now let’s add our main homepage.

For this project, I have bought a Bootstrap 5 Portfolio Template from 3rd wave media.

After download, the files are in plain html5 and CSS. But for education purposes, I have uploaded my paid version on this Gdrive link. I have a license so I am publishing on the web, but anyone who is using the template(dev card) and publishing it on the web must have to buy it first from 3rd wave media in order to publish. But anyone can use it for education in their local server. But they have few free templates anyone can use, go to this link.

fig: DevCard

Let’s add a homepage first to our project. First, we have to create a templates folder inside the home_page app folder. Then create another folder inside the templates, name it the same as the app name, our app name is “home_page” so we are making the folder named “‘home_page”. Now we will copy the index.html file from our downloaded template and paste it in on the ‘templates/home_page’ folder.

Our entire index.html looks like this:

fig: index.html

Now we have to update our views.py file:

fig: views.py

Now save it and run: python3 manage.py runserver

And go to http://localhost:8000/home/ , We will get this output:

This means our index.html file is working fine, but to run a full template we have to add the assets like CSS, js, and other plugins in our static folder.

Now we have to create a “static” folder in our main project folder location which is called “My-portfolio-project”.

And copy all the assets folders file into the static folder.

fig: copy the files inside the assets folder (assets from template)

Fig: copied assets from template

Now add {% load static %} tag at the beginning of the index.html file in our templates/home_page/index.html

Now we have to update the location of the static files in the href tags. Now we have this:

We have to change it to our Django’s own way, we have to add and fix this :

<script defer src=”assets/fontawesome/js/all.js”></script>

To this:

<script defer src=”{% static ‘fontawesome/js/all.js’ %}”></script>

Now every src link we have in the html file, we have to change.

Now we have to change the location where the static file’s directory is in our settings.py, for some reason in my environment static_root was not working so comment out my STATIC_ROOT and I have added, STATICFILES_DIRS

Code:

STATICFILES_DIRS = [
 BASE_DIR / “static”,
]

Now for future media file upload I have added MEDIA_URL and MEDIA_ROOT

MEDIA_URL = ‘/images/’
MEDIA_ROOT = os.path.join(BASE_DIR, ‘images’)

Now settings.py last part looks like this:

Now if we run: python3 manage.py runserver

And go to http://localhost:8000/home/ , We will get this output:

This is just the static version of the website, the links and URLs are not touched yet, so for basic static jobs, this will work fine. Like the home page, I am adding other URLs and Html files into my app.

But before adding other html files first let’s separate the header and the footer section from my index.html . In this way, the header footer section and the side navigation bar will be separated from the other html files. Otherwise, it will be hard for us to change the same things again and again, and we don’t need to load the same header, footer, and navigation bar every time we load other pages.

We are using “block” for overriding specific parts of a template.

This Example is taken from Stackoverflow:

we have a block named content and this is supposed to be overridden by children that inherit from this template.

For example, Template to be extended, named base.html

<head>
 <link rel=”stylesheet” href=”style.css”>
 <title>{% block title %}My amazing site{% endblock %}</title>
</head>

Overriding Child template

{% extends “base.html” %}
{% block title %} My amazing blog {% endblock %}

“My amazing site” will be overridden by the child and then display “My amazing blog”

In my case, I am creating a header_footer.html file to keep the head section and last section.

From index.html I have taken the header and navbar section and added in the header_footer.html.

fig: header_footer.html (1st part)

And also the last section I have taken from index.html.

fig: header_footer.html (2nd part)

In the middle, I have added two lines of code.

{% block content %}

{% endblock content %}

fig: header_footer.html (middle part)

Now add these three lines to our index.html file.

{% extends ‘home_page/header_footer.html’ %}
{% load static %}

{% block content %}

And in the end please add:

{% endblock content %}

In settings, I have updated the BASE_DIR for templates,

os.path.join(BASE_DIR,’templates’)

After updating setting.py, it will look like this.

Let's add my portfolio page and other pages into my template folder.

I have added all the files into my templates/home_page folder. And also I have updated the header footer section just like before.

fig: I have added the first three lines and removed the header(navbar) and footer

Now we have to update the views and urls for showing the html files:

Make sure to add each name of the path because we need this name in the future link tagging.

And in the main project folders, urls.py let's just keep empty in our first path, because we are doing all the URLs setting in the home_page/urls.py file.

Now let’s add our urls in our html files. First I have fixed all the href links in my header_footer.html .In there I have updated my side navbar, and all the other page’s links. For example, before the href was “href = ‘portfolio.html’ “ but now I have replaced that with href=”{% url ‘portfolio’ %}” in this section we are using Django's own language. We are using the name from the urlpatterns section from home_page/urls.py, where we declared each view’s name.

fig: navbar with updated urls

In this section, I have also used another application named django active link. This app is easy to install and can be used in the html files to make each page navigation section bold while we are on the particular page. For example, if we click the portfolio page the portfolio will be active while showing the portfolio page.

Install Django Active Link:

pip install django-active-link

Add it to your INSTALLED_APPS:

INSTALLED_APPS = (
 …
 ‘active_link’,
 …
)

To use the active_link template tag you need to load active_link_tags template tags library:

{% load active_link_tags %}

I have followed Django-active-link’s documentation to activate this feature in my app. After install let's change some code in the navbar section. On the navbar section we can see I have added {% url ‘index’ as url %}, this is I have declared a url variable inside html to use it on the href section. Next in the <a tag i have used {{ url }}, this url is referring to the index name.

fig: navbar with django active link.

Now let’s make this static version dynamic using Django admin and model in the 3rd part of this blog series. The third part is coming withing next week.

Reference:

1. https://realpython.com/get-started-with-django-1/
2. https://docs.djangoproject.com/en
3. https://pypi.org/project/django-active-link/