Lekcije

Čas br. 1 – Django

Programski jezik Django se može opisati kao mešavina Pythona i HTMLa. Uglavnom se koristi za pravljenje sajtova. HTML se koristi za frontend, odnosno za onaj deo sajta koji se prikazuje korisniku, a Python se koristi za backend, odnosno onaj deo koji osposobljava sajt da izvršava željene funkcije.

Za početak ćemo se podsetiti nekih osnova HTMLa i Pythona. Na ovom kursu koristićemo Sublime Text 3 radno okruženje, koje možete preuzeti na sajtu: https://www.sublimetext.com/3 .

Pokrenite Vaš Sublime i otvorite novi fajl. Svaki put kada kreirate novi fajl, sačuvajte ga tako da na kraju piše “.html” . U novom fajlu ukucajte “html” i pritisnite Tab na tastaturi. Ispisaće Vam se sledeći tekst:

Ovo predstavlja osnovnu strukturu jednog HTML fajla. Ona se sastoji iz nekoliko tagova. Možete da vidite da se svaki tag ponavlja, samo što svaki drugi ima kosu crtu ( / ). To su otvarajući i zatvarajući tagovi određenog segmenta i oni uvek idu na početak i kraj svakog koda.

Tagovi “html” nam govore da će ono što stoji unutar tih tagova biti HTML stranica. Svaka HTML stranica ima “glavu” (head) i “telo” (body). Head segment je potreban za funkcionisanje stranice, ali ga krajnji korisnik ne vidi. Body segment je sve ono što treba da se prikaže korisniku, odnosno predstavlja sadržaj jedne HTML stranice.

Prvi tag (<!DOCTYPE html>) je samozatvarajući i on u suštini govori pretraživaču koja verzija HTMLa je korišćena za izradu tog sajta. Ovaj tag obavezno ide na početak svakog koda. Na ovom kursu, mi ćemo koristiti najnoviju verziju HTML5.

Tekst je radi primera, kopiran je sa sajta https://www.rnids.rs/. Vi možete da unesete bilo koji tekst.

Tagovi “h1” predstavljaju naslov nekog teksta koji prikazujemo u telu našeg sajta. Tagovi “p” predstavljaju paragraf teksta. Zapamtite da tagove možete da napravite tako što ćete ukucati odgovarajuci naziv taga (“h1” npr.) i tasterom Tab možete da generišete ulazni i izlazni tag.

Možemo da dodamo neograničen broj paragrafa u naš sajt. Bitno je da zapamtimo da su to odvojene celine kojima posle možemo individualno da manipulišemo. Tag “h2” predstavlja podnaslov u okviru Glavnog naslova “h1”.

Stranica može da ima samo jedan glavni naslov, odnosno samo jedan “h1, ali zato možemo imati više podnaslova. Kada bismo hteli da dodamo jos jedan podnaslov u okvir glavnog naslova, dodali bismo još jedan “h2” tag. Ako bismo hteli da dodamo podnaslov u okvir tog podnaslova, koristili bismo tag “h3” i tako dalje.

Tekst unutar “strong” tagova biće boldovan, dok će tekst u “em” tagovima biti italic (iskošen). Tag “a” koristimo za kreiranje linka u našem tekstu. Unutar tagova pišemo tekst koji će biti hyperlink, u ovom slučaju to je “РИНДС”. U otvarajućem tagu, pod atributom “href=”, upisujemo sajt na koji naš link treba da vodi.

Ako hoćete da proverite izgled Vašeg sajta, najlakši način da to uradite je da jednostavno prevučete Vaš sublime fajl do Vašeg internet pretraživača. Ako to uradite sada, videćete da je naziv taba u kome ste otvorili fajl ime tog sublime fajla.

U tagovima “title” u head delu naše stranice, postavljamo naziv koji će pretraživač prikazati korisniku. Ovaj tag je veoma bitan i ne sme da ostane prazan. Ako sada osvežite stranicu, videćete da se promenio naziv taba.

Takođe je veoma bitno i da navedemo na kom jeziku je sadržaj našeg sajta. To radimo atributom “lang=” u otvarajućem “html” tagu. Skraćenicom “sr” mi kažemo da je to srpski jezik. Postoje različite skraćenice za ćirilicu i latinicu. Ove skraćenice ne morate pamtiti, možete ih naći na internetu.

Tagom “ol” pravimo uređenu listu (ol – ordered list). Unutar toga, tagovima “li” pojedinačno kreiramo elemente u toj listi. Osvežite stranicu i videćete da je dodata lista sa numerisanim elementima. Ako ne želimo da lista bude numerisana, nego da se elementi samo nabroje, koristićemo tag “ul” (unordered list).

Tagom “img” dodajemo sliku na naš sajt. Ovo je samozatvarajući tag i sadrži dva obavezna atributa (src i alt). U “src” unosimo link koji vodi do slike, u ovom slučaju to je slika sa sajta https://www.researchgate.net/figure/Modified-TCP-Packet-Header-Format_fig6_221444638. Link koji smo uneli dobićete tako što željenu sliku otvorite u novom tabu u Vašem pretraživaču. U “alt” unosimo tekst koji će se prikazati korisniku u slučaju da dođe do nekih problema prilikom pozivanja slike iz “src”.

To bi bile neke osnove HTMLa kojih je bilo bitno da se podsetimo. Sada nam je cilj da Vaš računar osposobimo za rad u Djangu. Potrebno je da instalirate najnovije verzije Pythona (https://www.python.org/) i Djanga (https://www.djangoproject.com/).

Kako je Django u stvari jedan od paketa u Pythonu, možete da ga instalirate i preko Windows Command Prompta na sledeći način:

Radi lakšeg snalaženja, preporučujemo Vam da koristite Command Prompt da napravite novi Django projekat.

Sada, kako biste otvorili svoj Django projekat u Sublimeu, dovoljno je da folder “nulti” prevučete na Sublime.

Za rad u Djangu, potrebno je još da pokrenete lokalni server na računaru.

U command prompt unesite prve dve linije sa slike i ispisaće Vam se dalji tekst. U liniji “Starting development server at…” dobićete link preko kojeg pristupate Vašem lokalnom serveru. Unesite ovaj link u svoj pretraživač kako biste proverili da li ste uspeli. Trebalo bi da Vam se prikaže nešto nalik ovome:

Vaš lokalni server će biti dostupan sve dok je otvoren command prompt, tako da ga ne bi trebalo zatvarati dok radite na svom sajtu. Server gasite sa CTRL+C.

Strukture Vašeg Django projekta možete da vidite u Sublimeu, pod “Open Files”.

U slučaju da Vam ovo nije prikazano, u Sublime prozoru idite na View>Side Bar>Show Open Files.

Vratite se na command prompt, prekinite rad servera sa CTRL+C i unestite komadu iz prve linije sa slike. Ispisaće Vam se dalji tekst. Unesite komandu:

Command prompt će Vam tražiti da izaberete korisničko ime, unesete e-mail i postavite i potvrdite šifru. Ovim mi u stvari kreiramo administrativni nalog koji će imati pristup backend delu našeg sajta. Kada završite sa unosom podataka, ponovo pokrenite server komandom:

Sada, ako odete na Vaš browser i u search bar na link Vašeg servera dodate “/admin”, Vaš sajt će tražiti da unesete korisničko ime i šifru administrativnog naloga koji ste kreirali.

Sada kada smo ovo završili, možemo da počnemo sa pravljenjem aplikacija za naš sajt.

Primer 1:

Hoćemo da napravimo aplikaciju koja će nam omogućiti da na našem sajtu unesemo podatke nekih knjiga koji će se zapamtiti u bazi podataka našeg sajta. Pre nego što počnemo sa tim, pređite na Command Prompt (u nastavku CMD) i prekinite rad Vašeg lokalnog servera (CTRL+C). Unesite sledeću komandu:

Ako sada pređete na Sublime, u Open Files videćete da smo ovim kreirali novi folder, “knjige”. Posle toga ponovo pokrećemo naš server. U Sublimeu, u folderu “knjige”, uđite u potfolder “migrations” i nađite “models.py”.

Ovde pravimo klasu Knjige. Obratite pažnju da ovde klasu pišemo sa zagradama, zato što će naša klasa Knjige u stvari biti potklasa klase models.Model. To u principu samo znači da će naša klasa Knjige naslediti neke osobine od ove natklase.

Kreiramo tri promenljive (naslov, autor i isbn) u kojima ćemo sačuvati vrednosti koje će korisnik uneti. TextField() je objekat koji naša klasa nasleđuje od klase Model, i to je u stvari polje za unos. Na ovaj način mi govorimo da se unete vrednosti zapamte u našim promenljivim.

Kada završimo sa ovim, moramo našu klasu da registrujemo i ubacimo u našu stranicu.

U Sublimeu iz “models.py” pređite u “admin.py”. Na ovaj način mi registrujemo aplikacije u onom administratorskom delu našeg projekta, gde smo se malopre ulogovali.

Iz potfoldera “knjige” pređite u potfolder “nulti”. Idite na “settings.py” i pronađite deo INSTALLED_APPS. Možete da vidite da je tu Django već uneo neke predefinisane aplikacije. Na kraju samo dodajte i našu aplikaciju “knjige”.

Svaki put kada promenimo nešto kod našeg sajta, mi moramo da ga ažuriramo, odnosno da uradimo migraciju. Pređite na CMD i prekinite rad servera.

Nakon toga unesite komandu “makemigrations”. Na ovaj način govorimo programu da detektuje koje promene smo mi izvršili i da ih pripremi za migraciju. Komandom “migrate” mi ažuriramo sajt sa detektovanim promenama. Kada ovo odradite, ponovo pokrenite lokalni server. U pretraživaču osvežite stranicu ili se ulogujte ponovo (nije isto na svakom računaru) i videćete da je sajtu dodata sekcija “Knjige”.

Sada na sajtu, klikom na “Add”, možete da uneste informacije za neku knjigu. Primetićete da, iako smo promenljive u klasi Knjige pisali malim slovima, ovde je početno slovo veliko. Ako unesete dodatke za knjigu i zapamtite ih, Vi time u stvari kreirate jedan objekat klase Knjige.

Vraćamo se na našu klasu knjige i hoćemo da dodamo još jednu promenljivu u koju ćemo uneti cenu. Treba napomenuti da Django prati Vaš rad i ukoliko dođe do greške pri kucanju koda, to će se ispisati u CMD.

DecimalField je isto polje za unos, ali za razliku od TextFielda ovde možemo da unesemo samo broj. Parametri “decimal_places” i “max_digits” su obavezni i njima postavljamo koliko uneti broj treba da ima decimala (sa decimal_places) i koliko uneti broj može ukupnom da sadrži cifara(sa max_digits).

Probajte da unesete samo “cena=models.DedcimalField()”. Ako pređete na CMD, videćete da je Django registrovao dve greške u Vašem kodu. Reći će Vam da niste uneli obavezne parametre i koji su parametri u pitanju. Zapamtite da u CMD uvek možete da proverite da li Vaš kod sadrži greške, ubuduće će to biti veoma korisno.

Kako smo napravili izmenu na našem sajtu, potrebno je da ga opet ažuriramo. Kao i prošlog puta, u CMD prekidamo rad servera, komandom “makemigrations” detektujemo promene i primenjujemo ih komandom “migrate”. Onda opet pokrećemo server.

Ako ste prethodno na sajtu kreirali neke objekate klase Knjige, oni neće imati vrednost “cena”, tako da tokom izvršavanja “makemigrations” u CMD, Django će Vam tražiti da unesete default vrednost koju će on dodeliti promenljivoj “cena” u svakom već postojećem objektu.

Primer 2:

Hoćemo da napravimo aplikaciju koja će da predstavlja stranice na našem sajtu koje kasnije možemo da definišemo.

Kao i u prošlom primeru, u CMD prekinite server i kreirajte novu aplikaciju komandom “startapp”.

U sublimeu ćete videti da se u našem projektu “nulti” napravio novi potfolder “stranice”. U tom folderu ulazimo u potfolder “migrations” i ovog puta umesto na models, idemo na “views.py”. Za razliku od models.py gde smo koristili klase, u views.py ćemo koristiti funkcije.

Pored već importovanog rendera, mi importujemo “HttpResponse” iz http biblioteke. Funkcija pocetna_view() biće funkcija za našu početnu stranicu. Mi ovom funkcijom u stvari šaljemo zahtev serveru da nam prikaže nešto. Pošto šaljemo zahtev, kao argument u funkciju unosimo “request”. HttpResponse je funkcija kojom će server odgovoriti na naš zahtev. Za sada mi od servera tražimo da nam prikaže samo naslov stranice (h1 tagovi).

Kada smo definisali našu funkciju, prelazimo u potfolder “nutli”, u “settings.py”, gde ćemo u INSTALLED_APPS delu pored naše aplikacije “knjige” dodati i našu aplikaciju “stranice”.

Nakon ovoga, i dalje u folderu “nulti”, pređite na “urls.py”. Ovde povezujemo funkcije sa stranicama koje će one prikazivati. Videćete da u urls.py imate napisano uputstvo kako se to radi, tako da to može ubuduće da Vam služi kao podsetnik.

Iz foldera “stranice” importujemo views, zato što se tu nalazi naša funkcija. Sa path() mi govorimo koja će se stranica otvoriti i koja će funkcija da se izvrši za otvaranje te stranice. Prvi argument (‘ ‘) predstavlja stranicu koja će se otvoriti. Ako je to prazan string, kao u ovom slučaju, to znači da će to biti početna stranica, odnosno prva stranica koja će se otvoriti kada pristupimo tom sajtu.

Kao drugi argument unosimo funkciju koja će prikazati tu stranicu, ovde je to naša funkcija pocetna_view() iz views.py. Trećim argumentom mi zadajemo naziv toj stranici. Ako pogledate uputstvo koje imate u urls.py, videćete da imate ispisanu sintaksu za path(), tako da ubuduće možete samo da je kopirate i unesete odgovarajuće argumente.

Pređite u views.py u folderu stranice.

Dodajte novu funkciju, ovoga puta neka to bude za “kontakt” stranicu.

Vraćamo se na urls.py u “nulti” folder kako bismo povezali i ovu funkciju.

Ovoga puta u path() unosimo funkciju “kontakt_view” i stranici dajemo naziv “kontakt”. Za razliku od prošlog puta, sada umesto praznog stringa kao prvi argument imamo ‘kontakt‘. Šta to u stvari znači?

Pokrenite ponovo Vaš lokalni server. Idite na Vaš pretraživač i osvežite stranicu. Trebalo bi da Vam se prikaže prazna stranica sa naslovom “Početna strana” (ako se ne prikazuje, obrišite iz linka “/admin” deo). Ako na kraj linka dodate “/kontakt”, prikazaće Vam se prazna stranica sa naslovom “Kontakt”. To su u stvari one dve stranice koje smo mi kreirali.

U prvom slučaju nam se prikazuje naša početna stranica jer linku koji vodi do našeg servera nije dodato ništa. Mi smo u path() definisali da to znači da server treba da prikaže početnu stranu, praznim stringom. Tako da taj prvi argument u path() u stvari predstavlja koja će se stranica pozivati preko linka u pretraživaču.

Mi za sada korisniku prikazujemo samo prazne stranice sa naslovom, tako što funkcijom tražimo da nam server vrati samo jednu liniju stranice. Možete i sami da zamislite kako nije efikasno da funkcijom pozivamo svaku liniju neke stranice pojedinačno. Zato ćemo mi napraviti šablon u kome ćemo definisati izgled cele stranice i kasnije ćemo funkcijom pozivati samo taj šablon.

U glavnom folderu “nulti” napravite novi potfolder “templates”. To možete da uradite preko Open Files bara.

U ovom folderu napravite novi fajl “pocetna.html”. Ovde ćemo napraviti našu početnu stranicu, koristeći html.

Radi primera, za sada imamo samo jedan naslov i jedan paragraf. Sada moramo ovaj šablon da povežemo sa ostatkom našeg projekta.

Pređite u potfolder “nulti”, u settings.py. Ispod INSTALLED_APPS imate i deo TEMPLATES. Ovde pod DIRS dodajemo naš folder “templates”. Funkcijom os.path.join() našem glavnom direktorijumu (BASE_DIR) dodajemo folder “templates”. BASE_DIR je predefinisana lokacija gde se nalazi Vaš projekat.

Pređite u folder “stranice”, pa u potfolder “migrations” u views.py.

Sada u funkciji pocetna_view() umesto HttpResponse, koristićemo render. Uglavnom uvek ovako pišemo argument. To u principu znači da će naš zahtev program protumačiti kako treba. U “template_name” upisujemo koji šablon koristimo za ovu stranicu. Dovoljno je da upišemo naziv šablona, zato što smo prethodno u settings.py naveli gde se on nalazi. Argument “context” koristimo kada našoj stranici hoćemo da prosledimo neke podatke, obavezan je da se upiše, ali može da ostane prazan.

Sada, ako osvežite stranicu, videćete da je ispod naslova ispisan i paragraf koji smo uneli u pocetna.html.

Preostaje nam još da povežemo naše dve aplikacije, knjige i stranice.

Prvo moramo da importujemo klasu Knjige u folder “stranice”.

U “context” kod pocetna_view() funkcije, prosleđujemo sve objekte koje smo kreirali u onom administratorskom delu našeg sajta (/admin). Podatke prosleđujemo u obliku rečnika, gde je “podaci” ključ, a vrednost su kreirani objekti. U našem pocetna.html fajlu sada možemo da manipulišemo ovim podacima.

Na ovaj način mi for petljom prolazimo kroz objekte i za svaki ispisujemo autora. Koristimo <br> tag da bi svaki put kada nam se ispiše novi podatak prešli u novi red. Ako osvažite stranicu, u pretraživaču ćete videti da su ispisana imena autora.

Umesto <br> možemo da iskoristimo i tagove za paragraf.

Ovde smo dodali i podnaslov.

Moramo da koristimo {} i % zato što je jednostavno takva sintaksa u Djangu (biće dalje objašnjeno u narednim lekcijama).