KREIRANJE DJANGO WEB APLIKACIJE- KREIRANJE NASLOVNE STRANE

Da bi se naslovna strana prikazala u pretraživaču posle unošenja url adrese u adres baru potrebno je na neki način pozvati funkciju koja će zahtevanu stranu renderovati. Sve url adrese jedne aplikacije, funkcije koje đango izvršava, html kod koji prikazuje stranicu i model podataka se nalaze u različitim fajlovima, shodno Model View Template arhitekturi koja je karakteristična za Django framework.

Kreiranje naslovne strane u Django aplikaciji-video

Kreiranje url-ova u Django web aplikaciji

Onu url adresu koja korisnik otkuca u web pretraživaču treba povezati sa odgovarajućom funkcijom u kontroleru, koja će se izvršiti pozivom te adrese. Te veze se unose u odgovarajućem urls.py fajlu određene aplikacije.
U glavnom urls.py fajlu projekta se importuju url veze napisane u urls.py fajlovima instaliranih aplikacija.
Odgovarajuću url vezu sa djangovim admin funkcijama kreiraćemo u okviru glavnog 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),

}

]

Dodavanje urls.py fajla unutar aplikacije naslovna

Svaki dodat modul treba da ima sopstveni fajl gde se nalaze njegove mape za preusmeravanje(rooting).
Dodaćemo urls.py fajl unutar foldera naslovna(modul) sa sledećim sadržajem:

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

app_name = 'naslovna'
urlpatterns = [

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

]

Slika 1: url.py fajl klase naslovna unutar Django web aplikacije

Unutar njega se nalaze naziv aplikacije, jer preko naziva se ovaj fajl povezuje sa glavnim urls.py fajlom projekta i mapa za preusmeravanje za početnu stranu index. Kada korisnik na adress bar-u potraži početnu stranu aplikacije, izvršiće se metoda index unutar pogleda(view).

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')),

]

Slika 2: url.py fajl klase naslovna unutar Django web aplikacije-2

Iskomentarišimo uključivanje naslovna.urls jer još nismo pripremili view.index,
a zatim startujmo aplikaciju komandom
Prikazaće se podrazumevana django strana:

Slika 3: Podrazumevana naslovna strana unutar Django web aplikacije

Kreiranje view-a i template-a

Primetimo da aplikacija logo_creator nema još početnu stranu.

Kreiranje view-a

Kreirajmo html početnu stranu u okviru aplikacije naslovna, poštujući MVC arhitekturu, tj. razdvojimo model (engl. model), kontroler(engl. controller) i vizuelni deo(view).
Kada je aplikacija Naslovna kreirana kreirani su fajlovi model.py, view.py. Mi ćemo se sada bazirati na kreiranje view-a, dakle na kod koji treba napisati u tom fajlu. Tu zapravo pišemo funkcije koje treba povezati sa odgovarajućim url-ovima. Tu vezu pišemo u fajlu urls.py
Da bi dobili početnu stranu. Kreirajmo prvo vezu u urls.py(vidi sliku 1)

Pogledajmo prvi url. On povezuje adresu(www.logo_creator.heroku.com/) sa funkcijom index koja će biti definisana u view.py fajlu.
Kreirajmo sad tu funkciju u fajlu fajlu view.py:

Slika 4: Logo Kreator view:-index metoda

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:

Slika 5: Logo Kreator podešavanja:-podešavanje templejta

Dakle struktura foldera i fajlova unutar foldera projekta(root):
logo_kreator/
   manage.py
   requirements.txt
   Procfiles
   Procfile.windows
   naslovna
   templates/
       naslovna/
              index.html

Kreiranje osnove templejta baze.html

Onaj deo templejta koji se ponavlja u svim web stranama može se izdvojiti posebno, a onda uključiti na vrh strane index.html ili neke druge.
Sadržaj base.html :

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

Na vrhu fajla ubacuje se bootstrap 4 i static fajlovi. Više reči o tome biće napisano kasnije. Dalje, se ubacuje html strana i na prvoj slici se vidi zaglavlje head. Ovde treba ubaciti linkove i scripte, tj povezati se sa css i javascript fajlovima.
base.html- body tag:

Slika 7: Logo Kreator templejt:-base.html sadržaj stranice

Ovde se može uočiti da se telo sastoji od glavnog div taga, uređenog klasom container, koji je dalje podeljen na 3 dela:

Gornje zaglavlje
Sadržaj -centralni deo
Donje zaglavlje

Gornje i donje zaglavlje će biti sadržanu u više html stranica i možemo reći da je to deo koji se ne menja. Ono što se razlikuje od strane do strane je njegov centralni deo. Sve osim centralnog dela možemo preneti iz naslovne strane koju smo kreirali u blogu:
Kreiranje web sajta

Obratimo pažnju na content:

Slika 8: Logo Kreator templejt:-base.html -block content

Onaj html koji se bude kreirao u index.html biće umetnut između {% block content %} i {% endblock %}

Slika 9: Logo Kreator templejt:-index.html

Da bi se ovaj html fajl povezao sa base.html , na početku ovog fajla treba napisati
{% extends ‘naslovna/base.html’ %}
Sadržaj koji se nalazi između tagova block kontent će se umetnuti između istih tagova u okviru base.html fajla.

Posle startovanja servera, pokrećemo aplikaciju na lokalu i prikazaće se naslovna strana:

Slika 10: Logo Kreator naslovna:-prikaz bez stila

Može se uočiti da stil nije primenjen. Može se uočiti da stil nije primenjen. Potrebno je definisati “static” fajlove, css, slike itd., smestiti ih u poseban folder, a u templejtu napraviti odgovarajuću vezu ka tim fajlovima(linkove).

Kreiranje static fajlova-Django

Static fajlovi su dodatni fajlovi koji se koriste u projektu, kao što su slike, css, javascript fajlovi. Folder static se obično stavlja u root projekta. U settings.py mora se podesiti putanja do foldera STATIC_ROOT i url, koji je obično /static/ , ali može se definisati i drugačije pomoću STATIC_URL .

Static fajlovi će se kopirati na lokaciju definisanu sa STATIC_ROOT, posle komande python manage.py collectstatic u command promptu. Static fajlovi se na kokalu pre toga cuvaju u direktorijumu koji se definiše sa
STATICFILES_DIRS=[(os.path.join(BASE_DIR,'assets'))] u okviru settings.py
Ovaj direktorijum ne sme biti isti sa STATIC_ROOT. Obično se ostavi da assets bude prazan na početku
Unutar 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

Unutar templejt html fajlova ov se mora uključiti. Na početku base.html fajla uključićemo static fajlove:
{% load static %}

Assets folder se nalazi u root-u aplikacije, što je prikazano na sledećoj slici:

Slika 10: Logo Kreator -sadržaj root foldera

Sadržaj assets foldera su static fajlovi, dakele, slike(images), css što je prikazano na sledećoj slici

Slika 11: Logo Kreator -sadržaj assets(static) foldera

Takođe treba uočiti da se za svaku aplikaciju(modul) u okviru glavne aplikacije, statični fajlovi posebno kreiraju za svaku od tih aplikacija, tako da se za svaku od njih kreira poseban podfolder. Npr "naslovna" za istoimenu aplikaciju, što se vidi na slici u putanji(zaokruženo).

Nastavak kreiranja naslovne strane

Na naslovnoj strani postavljen je tekst dobrodošlice, slika u pozadini i dugme koje vodi dalje ka izboru logoa. Klikom na dugme od korisnika će se prvo zatražiti da se uloguje. Ako korisnik nema svoj nalog, onda je potrebna registracija.
Stranu index.html koju smo dobili od centralnog dela naslovne strane koju smo kreirali u prethodnom blogu treba izmeniti, tako što se na početak doda "load static", kao što je prikazano na sledećoj slici:

Slika 11: Logo Kreator templejt-index.html-load static

Takođe je potrebno promeniti putanju u src atributu img taga, koji prikazuje sliku, tako što se doda reč static, koji je zapravo putanja do assets foldera gde se nalaze statični fajlovi, što je pokazano na sledećoj slici:

Slika 12: Logo Kreator templejt-index.html-dodavanje "static" url-a u putanju

Posle osvežavanja stranice, videće se naslovna strana prikazana na slici ispod:

Slika 13: Logo Kreator naslovna-kompletan prikaz

Prethodno
|< Kreiranje Django Web Aplikacije-početak

Sledeće
Django aplikacija i baza podataka >|