This article is for Django junior developers that wish to do the front-end of their project themselves.
let's create our project folder. Open the project folder in your vs code, because that's the IDE I like to use for my projects. Then, create your virtual environment. run this command
python -m venv <the name you wish to call your virtual environment>
After installing. you've to activate your virtual environment
<the name you called your virtual environment>\scripts\activate
Then install django
pip install django
Create your first project
django-admin startproject <project name> .
Noticed that I used the dot(.) when creating my project. I just wanted Django not to add the outer project folder.
create your Django first app.
python manage.py startapp <your app name>
Please do your views and URLs. I want to jump into the main reason for this article.
Now to the main reason for this article I like to create a folder called in the same folder where i've my manage.py. The folder name is template there's where I put all my Html files to.
Now go to your project sitting.py and find a list called TEMPLATES Look for a dictionary key of ' DIRS' then add this line of code
'DIRS': [os.path.join(BASE_DIR, 'template')],
What this those, is that it tells Django to treat this folder as main template folder.
Now in my app views. I don't need to this again
def about(request):
return render(request, '../template/about.html')
but rather, i'll just do this
def about(request):
return render(request, 'about.html')
Now, if our html files has some external linking to it, like, CSS, IMG & JAVASCRIPT. We need to link those files in way that django can accept.
In your app folder, create folder call static. You can choose to name it something else. Now add all the files you wish to add, or folders.
Then go to your project folder and open setting.py Look for this comment # Static files (CSS, JavaScript, Images) you'll see STATIC_URL = '/static/'. Don't edit that line of code.
Above the static url line of code add this.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
Also add this line of code to tell django to save our static files after collecting them
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
#This will save your static files in a folder called static in your project root directory
Here's where our css, javascript file is located
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'mywebsite/static')
]
Now our static files are setup, let's start accessing it. Run this command.
python manage.py collectstatic
A new folder call static is going to be added to your root project folder.
This folder now have access to all our static files located in the mywebsite/static
folder.
We're going to make use of template tag {% %} and template variable {{ }}
In Html, to access your image and javascript. you've to do things like this
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
<img src="img/image.jpeg" alt=" />
In Django, things are a bit different. We need to import/load our static files into our HTML code.
{% load static %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
#Our css is now lined
<img src="{% static 'img/image.jpeg' %}" alt=" />
#image is now linked
In our Html files. it's recommended to create a file call base.html if all your pages are going to have the same header and footer. It's like the "header.php" in a php project, then after that we need to include them inside the main file
Inside the base.html, mine looks like this
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{% block title%} {% endblock title %}| Joseph Chinedu | python developer</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Favicons -->
<link href="{% static 'img/fav.png' %}" rel="icon">
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
<!-- Template Main CSS File -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>
<body>
<div class="collapse navbar-collapse custom-navmenu" id="main-navbar">
<div class="container py-2 py-md-5">
<div class="row align-items-start">
<div class="col-md-2">
<ul class="custom-menu">
<li
{% if '/' == request.path %}
class="active"
{% else %}
class=""
{% endif %}
><a href="{% url 'home' %}">Home</a></li>
<li
{% if 'about' in request.path %}
class="active"
{% else %}
class=""
{% endif %}
><a href="{% url 'about' %}">About Me</a></li>
<li><a href="https://josephchinedu.hashnode.dev/">Blog</a></li>
<li
{% if 'project' in request.path %}
class="active"
{% else %}
class=""
{% endif %}
><a href="{% url 'project' %}">Project</a></li>
<li
{% if 'contact' in request.path %}
class="active"
{% else %}
class=""
{% endif %}
><a href="{% url 'contact' %}">Contact</a></li>
</ul>
</div>
<div class="col-md-6 d-none d-md-block mr-auto">
<div class="tweet d-flex">
<span class=" text-white mt-2 mr-3"></span>
<div>
<p></p>
</div>
</div>
</div>
<div class="col-md-4 d-none d-md-block">
<h3>Hire Me</h3>
<p><br> <a href="#">joseph4jubilant@gmail.com</a></p>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-light custom-navbar">
<div class="container">
<a class="navbar-brand" href="{% url 'home' %}">Joseph.</a>
<a href="#" class="burger" data-toggle="collapse" data-target="#main-navbar">
<span></span>
</a>
</div>
</nav>
{% block content %}
{% endblock content %}
<footer class="footer" role="contentinfo">
</footer>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
Thi's template tag helps us to defind our page title
{% block title%} {% endblock title %}
in our home.html, we need to include the base.html into any page we want the navigation menu to appear. my home.html
{% extends 'base.html' %}
{% load static %}
{% block title %}
Home <!-- this's the page title that's going to be displayed on the running page -->
{% endblock title %}
To make a page active in the navigation bar when you click on them, we run this code
<ul class="custom-menu">
<li
{% if '/' == request.path %}
class="active"
{% else %}
class=""
{% endif %}
><a href="{% url 'home' %}">Home</a></li>
<li
{% if 'about' in request.path %}
class="active"
{% else %}
class=""
{% endif %}
><a href="{% url 'about' %}">About Me</a></li>
<li><a href="https://josephchinedu.hashnode.dev/">Blog</a></li>
<li
{% if 'project' in request.path %}
class="active"
{% else %}
class=""
{% endif %}
><a href="{% url 'project' %}">Project</a></li>
<li
{% if 'contact' in request.path %}
class="active"
{% else %}
class=""
{% endif %}
><a href="{% url 'contact' %}">Contact</a></li>
</ul>
to navigate/route another page, we use name in the url path
path('', views.home, name='home'),
We're goin to use the url names to access them
<!-- to go to home page -->
<li<a href="{% url 'home' %}">Home</a></li>
Our block content
{% block content %}
{% endblock content %}
This's where we'll wrap all our individual page code after extending the base.html file our home page for example will look like this
{% extends 'base.html' %}
{% block title %}
Home
{% endblock title %}
{% block content %}
<main id="main">
<h2> Home page </h2>
</main>
{% endblock content %}
Thanks for reading. please drop your comment if you have any tips or suggestions