MANUEL RADOVANOVIĆ : 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?

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 Django 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 se Django razvojni server pokrenuo i ne prijavljuje greške, onda možete početi sa kreiranjem NavBar-a u django_tutorial projektu. Ukoliko pogledate strukturu projekta django_tutorial možete videti da se početna stranica home.html nalazi u direktorijumu templates aplikacije main. To jeste u redu, ali mi želimo da se organizujemo i da u našem direktorijumu templates koristimo više različitih stranica. Zbog toga sve što je vezano za početnu stranicu ili neku drugu stranicu koja ima sasvim drugačiju kategoriju; treba da bude u posebnom direktorijumu. Zato u templates direktorijumu kreirajte novi direktorijum i nazovite ga isto kao i aplikaciju main. Zatim prebacite fajl home.html u novi direktorijum templates/main. Ako bi ste sada pokrenuli Django razvojni server i pogledali lokalnu adresu na portu 8000, dobili bi ste grešku. To je zato što ste promenili lokaciju fajla home.html. Tako da je neophodno promeniti kôd da Django razvojni server može pronaći početnu stranicu u njenom promenjenom direktorijumu. Pogledajte fajl urls.py u aplikaciji main.

from django.urls import path

from . import views

urlpatterns = [

path('', views.home, name='home'),

]

Kad su u pitanju URL-ovi, oni ne pozivaju određeni direktorijum, nego putanju funkcije home. Funkcija home u views – pregledima je zadužena da obezbedi putanju direktorijuma gde se nalazi početna stranica. Zato u ovom fajlu, nećete menjati ništa. Nego u fajlu views.py aplikacije main promenite putanju da kôd izgleda ovako:

from django.shortcuts import render

def home(request):

return render(request, 'main/home.html', {})

Sad kad pokrenete Django razvojni server, otvoriće se početna stranica i videćete da nemate grešku i da sve radi. Prebacite se sad iz IDE – integrisanog razvojnog okruženja u pretraživač i posetite zvaničnu prezentaciju Bootstrap-a, i u meniju kliknite stavku Docs ili jednostavno kliknite ovde. Kopirajte HTML sadržaj iz Quick Start-a, drugog textbox-a. Zatim se vratite u Visual Studio Code ili IDE – Integrisano razvojno okruženje i u direktorijumu templates/main kreirajte novi fajl i nazovite ga base.html. U njega smestite prethodni kod koji ste kopirali i zatim ga prepravite da izgleda ovako:

<!doctype html>

<head>

</head>

<body>

{% include 'main/navbar.html' %}

<br>

{% block content %}

{% endblock %}

</div>

</body>

</html>

Ukoliko se pitate zašto kreiramo fajl base.py i šta on predstavlja; jednostavno hoćemo da svaka stranica poziva ovu datoteku, da mi ne bismo ponavljali kôd i pisali ga na svakoj stranici ponovo. Na ovaj način svakoj HTML stranici koja poziva ovaj fajl imaće pristup Bootstrap-o. Ali ne samo to. Ako hoćete da vam se navigacioni bar vidi na svakoj veb stranici, dovoljno je da Bootstrap stranicu sa navigacionim menijem pozovete u base.py fajl kojeg će pozivati sve veb stranice projekta kojeg kreiramo. Zato ako pogledate u navedeni HTML sadržaj fajla kog ste prepravili, možete i sami zaključiti da on već poziva fajl navbar.html, kojeg još nismo kreirali i u kojem ćemo kreirati navigacioni meni i na taj način omogućiti da navigacioni meni bude dostupan svakoj veb stranici koja bude pozivala fajl base.py. Kreirajte novi fajl i nazovite ga navbar.py. Vratite se na Bootstrap stranicu i sa vaše leve strane pronađite NavBar link u kategoriji Components. Kopirajte HTML sadržaj iz prvog textbox-a i smestite ga u datoteku navbar.py. Ukoliko ste to uradili prepravite taj sadržaj da izgleda ovako:

<a class="navbar-brand" href="#">Navbar</a>

</button>

<!--

</li> -->

</li>

<a class="nav-link" href="{% url 'contents' %}">Contents</a>

</li>

<!--

Dropdown

</a>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><a class="dropdown-item" href="#">Something else here</a></li>

</ul>

</li> -->

<a class="nav-link disabled" aria-disabled="true">About</a>

</li>

</ul>

<button class="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</nav>

Ovo što smo do sada uradili je odlično, ali da bi smo videli rezultat promenićemo sadržaj početne stranice i fajla home.py tako da on poziva fajl base.py kada se prikaže u pretraživaču.

{% extends 'main/base.html'%}

{% block content %}

<h1>Hello World</h1>

{% endblock %}

Kad pokrenete Django razvojni server rezultat će biti kao na slici.

( Navbar kreiran u Django projektu koristeći Bootstrap )

Da bi se naš projekat razvijao pored početne stranice mi hoćemo da naš Django tutorijal sadrži i veb stranicu Contents – sadržaj. Zato kreirajte novi fajl i nazovite ga contents.py. Unesite sledeći HTML sadržaj.

{% extends 'main/base.html'%}

{% block content %}

<h1>Contents</h1>

{% endblock %}

Međutim da bi ste mogli videti ovu stranicu, kao i svaku sledeću koja treba da bude deo celine django_tutorial projekta, neophodno je da se pobrinete za URL-ove i views – poglede. Dodaj sledeće linije HTML sadržaja:

urls.py

from django.urls import path

from . import views

urlpatterns = [

path('', views.home, name='home'),

path('contents/', views.contents, name='contents'),

]

views.py

from django.shortcuts import render

def home(request):

return render(request, 'main/home.html', {})

def contents(request):

return render(request, 'main/contents.html', {})

Ukoliko ste odradili navedeno bez ijedne greške, pokrenite Django razvojni server i kliknete u navigacionom meniju link Contents. Dobićete sledeći rezultat kao na slici.