KREIRANJE DJANGO WEB APLIKACIJE- KREIRANJE NASLOVNE STRANE

---

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:

---

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:
Slika 1: url.py fajl klase naslovna unutar Django web aplikacijeUnutar 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:

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

---

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

---

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

---

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

---

---

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

---

---

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

---

---

​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: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: Sadržaj assets foldera su static fajlovi, dakele, slike(images), css što je prikazano na sledećoj slici 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.htmlkoju 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:

---

---

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:

---

---

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

---

---