CREATING A DJANGO WEB APPLICATION - CREATING A HOME PAGE

---

Creating urls in a Django web application

The url address that the user types in the web browser should be connected to the corresponding function in the controller, which will be executed by calling that address. Those links are entered in the corresponding urls.py file of the specific application.
In the main urls.py file of the project, the url links written in the urls.py files of the installed applications are imported.
We will create the corresponding url link to Django's admin functions within the main urls.py:

---

Adding the urls.py file inside the home application

​Each added module should have its own file where its rooting maps are located.
We will add the urls.py file inside the header(module) folder with the following content:Figure 1: url.py file of the title class inside the Django web applicationInside it are the name of the application, because the name connects this file to the main urls.py file of the project and the redirect map for the home page index. When the user looks for the home page of the application on the address bar, the index method inside the view will be executed.
U glavnom urls.py dodato je:

Figure 2: url.py file of the title class inside the Django web application-2​​Let's comment out the inclusion of title.urls because we haven't prepared view.index yet,
and then start the application with the command
The default django page will be displayed:

---

Creation of views and templates

Note that the logo_creator application does not yet have a home page.

Creating a view

​Let's create an html home page within the home application, respecting the MVC architecture, i.e. let's separate the model (eng. model), the controller (eng. controller) and the visual part (view).
When the Home application was created, the files model.py, view.py were created. We will now focus on creating a view, that is, on the code that should be written in that file. This is where we actually write the functions that need to be linked to the corresponding urls. We write that link in the urls.py file
To get the home page. Let's first create a link in urls.py (see Figure 1)Let's look at the first url. It associates the address (www.logo_creator.heroku.com/) with the index function that will be defined in the view.py file. Now let's create that function in the view.py file:
​ ​Sada treba povezati funkciju index sa index.html fajlom. Putanja do tog fajla je “naslovna/index.html”. To je relativna putanja od templates foldera koji ćemo kreirati root folderu:
Prvo moramo podesiti putanju do templates foldera u settings.py fajlu:

---

​So the structure of folders and files inside the project folder (root):
logo_kreator/
   manage.py
   requirements.txt
   Procfiles
   Procfile.windows
   naslovna
   templates/
       naslovna/
              index.html

---

Creating the base template base.html

That part of the template that is repeated in all web pages can be separated separately, and then included at the top of the page index.html or some other.
Contents of base.html :

---

Bootstrap 4 and static files are inserted at the top of the file. More words about it will be written later. Next, the html page is inserted and the first image shows the head header. Here you need to insert links and scripts, ie connect to css and javascript files.
base.html- body tag:
​ Here it can be seen that the body consists of the main div tag, arranged by the container class, which is further divided into 3 parts: 

• Top header
• Contents - central part
• Bottom header

The upper and lower headers will be contained in multiple html pages and we can say that this is the part that does not change. What differs from side to side is its central part. Everything except the central part can be transferred from the front page that we created in the blog:
Creating web site simple
​

Let's pay attention to the content:​

---

---

The html that will be created in index.html will be inserted between {% block content %} and {% endblock %}

---

---

​In order to link this html file with base.html, you should write at the beginning of this file
{% extends 'naslovna/base.html' %}
The content between the block content tags will be inserted between the same tags within the base.html file.
​After starting the server, we start the application on the premises and the front page will be displayed:

---

---

​It can be seen that no style has been applied. It can be seen that the style is not applied.  It is necessary to define "static" files, css, images, etc., place them in a separate folder, and create a suitable link to those files (links) in the template.

---

Creating static files - Django

Static files are additional files used in the project, such as images, css, javascript files. The static folder is usually placed in the root of the project. In settings.py, the path to the STATIC_ROOT folder and the url must be set, which is usually /static/ , but can be defined differently with STATIC_URL .Static files will be copied to the location defined by STATIC_ROOT, after the command python manage.py collectstatic in the command prompt. Static files are stored on the bone before that in the directory defined by
STATICFILES_DIRS=[(os.path.join(BASE_DIR,'assets'))] in settings.py
This directory must not be the same as STATIC_ROOT. Normally assets is left empty at the beginning
Inside settings.py:Within the template html files this must be included. At the beginning of the base.html file we will include the static files:
{% load static %}
​Assets folder se nalazi u root-u aplikacije, što je prikazano na sledećoj slici: The contents of the assets folder are static files, such as images, css, which is shown in the following image It should also be noted that for each application (module) within the main application, static files are created separately for each of those applications, so that a separate subfolder is created for each of them. For example, "cover" for the application of the same name, which can be seen in the picture in the path (circled).

---

Continued creation of the front page

On the front page, there is a welcome text, a background image and a button that leads to choosing a logo. Clicking the button will prompt the user to login first. If the user does not have an account, then registration is required.
The index.html page that we got from the central part of the front page that we created in the previous blog needs to be modified, by adding "load static" to the beginning, as shown in the following image:

---

---

It is also necessary to change the path in the src attribute of the img tag, which displays the image, by adding the word static, which is actually the path to the assets folder where the static files are located, as shown in the following image:

---

---

After refreshing the page, you will see the front page shown in the image below:​

---

---