CREATING A DJANGO WEB APPLICATION - CREATING A HOME PAGE

In order for the front page to be displayed in the browser after entering the url address in the address bar, it is necessary to somehow call a function that will render the requested page. All the url addresses of an application, the functions that Django executes, the html code that displays the page and the data model are located in different files, according to the Model View Template architecture that is characteristic of the Django framework.

Creating a cover page in a Django application-video

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:

urlpatterns = {

from django.contrib import admin
from django.urls import path
from django.conf.urls import include, url
admin.autodiscover()
urlpatterns : [

url(r'^', include('naslovna.urls')),
url(r'^', include('registracija.urls')),
path('admin/', admin.site.urls),

}

]

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:

from django.conf.urls import url
from naslovna import views

app_name = 'naslovna'
urlpatterns = [

url(r'^$', views.index, name = 'index'),

]

Figure 1: url.py file of the title class inside the Django web application

Inside 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:

from django.conf.urls import url
from naslovna import views

app_name = 'naslovna'
urlpatterns = [

path('admin/', admin.site.urls),
url(r'^', include('naslovna.urls')),

]

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:

Figure 3: The default front page inside a Django web application

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:

Figure 4: Logo Creator view:-index method

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:

Figure 5: Logo Settings Creator:-Template Settings

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 :

Slika 6: Logo Kreator templejt:-base.html početak fajla

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:

Figure 7: Logo Creator template:-base.html page content

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:

Figure 8: Logo Creator template:-base.html -block content

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

Figure 9: Logo Creator template:-index.html

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:

Figure 10: Logo Creator cover:-display without style

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:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
STATIC_URL = '/static/'
STATICFILES_DIRS=[(os.path.join(BASE_DIR,'assets'))] u okviru 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:

Figure 10: Logo Creator - contents of the root folder

The contents of the assets folder are static files, such as images, css, which is shown in the following image

Figure 11: Logo Creator - contents of assets(static) folder

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:

Figure 11: Logo Creator template-index.html-load static

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:

Figure 12: Logo Creator template-index.html-adding "static" url to the path

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

Figure 13: Logo Kreator cover-full view

Previous
|< Creating a Django Web Application - Getting Started

Next
Django application and database >|