1) Initial Set Up
- mkdir My_Django_Folder
- cd My_Django_Folder
- pipenv install django
- pipenv shell
- django-admin startproject PROJECT_FOLDER_NAME .
- python manage.py migrate
- python manage.py createsuperuser
- python manage.py startapp APP_FOLDER_NAME
- python manage.py runserver
mkdir My_Django_Folder
cd My_Django_Folder
pipenv install django
pipenv shell
django-admin startproject PROJECT_FOLDER_NAME .
python manage.py migrate
python manage.py createsuperuser
python manage.py startapp APP_FOLDER_NAME
python manage.py runserverYour project folder structure should look like this when you type 'tree' on the command prompt:-
It should also contain two files ("Pipfile" and "Pipfile.lock") that makes the virtual environment work properly.
2) Add HTML/CSS/JS templates
At this point, you want to display a custom front-end the user instead of the default seen above. A front-end framework such as Bootstrap can be use, however, I will keep it simple by using a simple html/css/js files.
Recall from the step above, we create a django PROJECT and APP. Now, we need to edit some files within both folders like this:-
- PROJECT folder: here we will edit these files - settings.py and urls.py
- APP folder: here we will edit/create these files - urls.py, views.py, and models.py. Note we could also add our templates folder here for the index.html but I prefer to create a root templates folder and point to it by updating the TEMPLATES list in PROJECT settings.py.
The following code snippets will add HTML/CSS/JS templates
- mkdir templates
- echo > templates/index.html (touch templates/index.html)
- add your html code to the templates\index.html file
- Update INSTALLED_APPS and TEMPLATES from PROJECT's settings.py
- Update urls.py file from PROJECT's folder
- Create a new urls.py file in app folder 'APP_FOLDER_NAME' and add view path
- Update views.py file from the app folder 'APP_FOLDER_NAME' by defining the view added above. Since the name was called 'home', it most be the same in the views.py file.
If you do python manage.py runserver, this should load our html page from the templates folder as seen below:-
Notice that this is a very basic web page that didn't make use of a database, hence we didn't talk about the models.py file.
To add more pages for example, lets add contact page. We will create the contact.html file in the templates folder and update urls.py and views.py file in the app folder.
Note: If you don't want the .html extension to appear in the url like this "http://localhost:8000/contact.html", the edit urls.py file to remove the extension so that the path is like so... "http://localhost:8000/contact"
3) Adding Static file
In django, to use external CSS, JS, or Image files within HTML document you need to tell it how to get them by creating a root folder named "static" to house all the static files. The steps involved are as follow:-
- First thing is to update PROJECT's settings.py file by adding STATICFILES_DIRS
- Create a root folder named "static" and create another sub-folder with name of the app 'APP_FOLDER_NAME'
- Add your static files there, for example I added an image 'buhari.jpg'
- Update the html file by first typing "{% load static %}" on the very first line. Then point to the file using this "{% static 'APP_FOLDER_NAME/buhari.jpg' %}"
The new home page should look like this...
This is the django way of doing things! In normal html, the inserted image tag will just look like this: <img src="APP_FOLDER_NAME/buhari.jpg " />
Likewise inserting a css or js file like this: <link rel="stylesheet" type="text/css" href="style.css"> in normal html will look like this: <link rel="stylesheet" type="text/css" href="{% static 'APP_FOLDER_NAME/style.css' %}"> in django way.
