NavBar u Django projektu, kako kreirati navigacioni meni koristeći Bootstrap?

Bez obzira na kakvom Django projektu hoćete da radite, malom ili velikom; jedna od bitni stavki je planiranje i kreiranje NavBar-a. NavBar je skraćenica od Navigation Bar – navigacioni meni; često u Srbiji to nazivamo i navigator ili navigacija. Navigacioni meni se uglavnom nalazi na vrhu veb stranice ili aplikacije. Njegova osnovna svrha je pružiti korisnicima brz i lak način za navigaciju kroz različite sekcije veb stranice ili aplikacije; kao što su početna stranica, kontakt forma, kategorije proizvoda ili usluga, ili bilo koja druga sekcija. Kroz navigacioni meni takođe routing – rutirate tj. usmeravate URL-ove u Django u aplikaciji. To vam pomaže da lako prelazite između različiti views – pogleda aplikacija ili veb stranica. Ako vaša Django aplikacija ima korisničke naloge i funkcionalnosti kao što su prijava, registracija ili upravljanje profilom, navigacioni meni može sadržavati i linkove prema tim opcijama. Međutim, obratite pažnju da navigacioni meni takođe igra ulogu u estetici i identitetu vaše veb stranice ili aplikacije. Dizajniranje i pravilno stilizovanje NavBar-a može doprineti prepoznatljivosti i atraktivnosti vašeg brenda. Zato kod kreiranja navigacionog menija takođe koristimo i Bootstrap, bez obzira što je stara praksa da navigacioni meni možete odraditi profesionalno koristeći samo HTML i CSS. Naravno, izbor je uvek na vama osim u slučajevima kad klijent ili kompanija striktno zahtevaju da se zaobiđe Bootstrap. 

( Kreiranje NavBar-a koristeći Boostrap u Django projektima ima i estesku vrednost )

Ali šta je to zaista Bootstrap? Bootstrap je takođe framework – razvojni okvir za kreiranje veb aplikacija i stranica baziran na HTML i CSS-u. Bootstrap nije zamena za CSS, nego pre bi smo rekli da je nadogradnja. Inače Bootstrap je nastao kao interni alat za razvoj na Twitter-u, a kasnije je postao dostupan kao open-source projekat. Bootstrap se prvi put pojavljuje dostupan svima 2011 godine i od tada je postao izuzetno popularan među veb developerima. Bootstrap pruža veliko olakšanje, ali i donosi sa sobom kompleksnost novih mogućnosti u veb razvoju; pružajući niz unapred definisanih stilova, komponenti i JavaScript funkcionalnosti koje olakšavaju dizajniranje i izradu responzivnih, atraktivnih i funkcionalnih veb stranica. Bootstrap se automatski prilagođava različitim veličinama ekrana, što je posebno važno za mobilne uređaje. On sadrži moćan grid sistem koji olakšava postavljanje rasporeda elemenata na stranici. Bootstrap dolazi sa gotovim stilovima za dugmad, forme, tipografiju, karte i mnoge druge komponente uključujući i navigacioni meni; stilove koje se često koriste na veb stranicama. Bootstrap takođe uključuje JavaScript komponente kao što su modalni prozori i mnoge druge koje se lako mogu integrisati u vašu veb aplikaciju ili stranicu. Ako se pitate da li je Bootstrap bolji od CSS stilizovanja, onda treba da razumete prednosti Bootstrap-a uključuju ubrzanje razvojnog procesa, konzistentnost dizajna i responzivnosti. Međutim, Bootstrap može biti pretežak za jednostavne projekte i može ograničavati kreativnu slobodu u dizajniranju. Na primer, pogledajte ovde ovaj jednostavan digitron rađen u JavaScript-u ovde. On se može kreirati i sa Bootstrap-om, ali je u ovom slučaju CSS bolje rešenje. Vi sami odličite kad vam je bolje da koristite jedno, kada drugo ili koristite obadvoje u vašim projektima.

Kako da kreiramo NavBar koristeći Bootstrap?

Korak po korak, kako kreirati u Django-u jednostavnu tabelu i koristiti Django administraciju?

Ukoliko ste pročitali, prostudirali, instalirali i pripremili sve neophodno za početak učenja Django radnog okvira, pogledajte prethodni post ovde; onda ste spremni za prva, početna i osnovna podešavanja projekta django_tutorial. U prošlom postu našeg tutorijala smo pored kreiranja projekta, takođe kreirali aplikaciju main i super korisnika. Proverili smo da se naš projekat pokreće na lokalnom serveru, portu 8000 uspešno i da se možemo ulogovati na Django administraciju. Da bi nastavili dalje sve iz prethodnog posta mora biti odrađeno uspešno. Ukoliko to nije slučajno vratite se na prošli post ovog Django tutorijala ovde i sve korak po korak ponovo odradite. Ako ste sve uradili kako treba, pokrenite Visual Studio Code ili IDE – Integrisano razvojno okruženje, koje vi koristite; i u njemu otvorite projekat django_tutorial. Proverite da li je meni opcija File -> Auto Save čekirano da se vaš svaki progres automatski sačuva i da ne morate konstanto pritiskati Save dugme. Zatim otvorite panel terminal na View -> Terminal i pokrenite aktivaciju vašeg projekta na sledeći način:

manuel@manuel-virtual-machine:~/django_tutorial$ source env/bin/activate

(env) manuel@manuel-virtual-machine:~/django_tutorial$

Proverite da li vaš projekat ima grešaka, tako što ćete pokrenuti razvojni server:

(env) manuel@manuel-virtual-machine:~/django_tutorial$ cd django_tutorial/

(env) manuel@manuel-virtual-machine:~/django_tutorial:~/django_tutorial$

(env) manuel@manuel-virtual-machine:~/django_tutorial:~/django_tutorial$ python3.11 manage.py runserver

Ukoliko ste dobili rezultat kao na sledećoj slici, onda je sve u redu i možemo nastaviti tačno tamo gde smo stali u prethodnom postu.

( Uspešno pokrećanje Django razvojnog servera )

I pored toga što ste kreirali aplikaciju main u projektu django_tutorijal, to nije dovoljno; nego se kreirana aplikacija mora definisati u fajlu projekta koji se zove settings.py . To je bitan korak koji omogućuje Django radnom okviru da razume i pravilno konfiguriše vašu aplikaciju unutar projekta. Zato, prvo definišite aplikaciju, tako što ćete dodati sledeći kôd u fajl settings.py

# Application definition

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'main',

]

Sledeća podešavanja bez kojih aplikacija ne može funkcija su URL-ovi. Ali šta je URL? URL u Django-u predstavlja Uniform Resource Locator - uniformni resursni lokator, odnosno adresu na kojoj se može pristupiti određenom delu vaše veb aplikacije. URL-ovi se koriste za mapiranje zahteva od korisnika na odgovarajuće views - poglede u vašoj aplikaciji. Bez obzira koliko je mala ili velika vaša aplikacija u projektu, ona će da koristi URL-ove koje joj definišete. S obzirom da jedan projekat može imati mnogo URL-ova, Django preferira da svaka aplikacija ima svoj fajl u kojoj se definišu URL-ovi. Tako da se u glavnom projektu umesto URL-ova, pozivaju fajlovi koji imaju definisane URL-ove na nivou aplikacije. Zato sledeći korak je podešavanje URL-ova kako bi naša  aplikacija bila funkcionalna.

Podešavanja URL-ova u Django projektu i aplikaciji