Uvod u Django

3.deo

U današnjem tutorijalu, nastavićemo rad sa Djangom. Stilizovaćemo index stranicu i pošto će se na njoj nalaziti dugmad Sign Up ili Sign In, njih ćemo odgovarajuće linkovati ka novim stranicama.

Do sada imamo stranicu na kojoj samo imamo h1 naslov Index page. Pošto je poenta tutorijala Django, a ne HTML+CSS, neću ulaziti u to kako da stilizujete stranicu, okačiću svoj kod i izgled, pa ukoliko želite isto tako, kopirajte :)

Ono što se tiče Djanga jeste kako da linkujemo naše .css fajlove, slike ili bilo šta što nam je potrebno (ovo se zovu statični fajlovi) na stranici. U root direktorijumu, istom u kom su index i repz direktorijumi, pravimo direktorijum assets, a u njemu za sad samo direktorijum css i u taj direktorijum stavljamo fajl style.css.

U settings.py fajl dodajemo na dno fajla novu promenljivu STATICFILES_DIRS = (os.path.join(BASE_DIR), 'assets'). Šta radi os.path.join? Na BASE_DIR što je naš root direktorijum, dodaje 'assets' na putanju tako da će se statični fajlovi nalaziti na putanji BASE_DIR/assets.

U .html fajlovima statične fajlove učitavamo na sledeći način: 

<link rel="stylesheet" href="{% static 'css/style.css' %}">
Ključna reč static govori Djangu gde da traži fajl, a prethodno smo definisali da će to biti u direktorijumu assets. Sada možemo podešavati naš style.css po želji.

Nakon sređivanja, dobijamo:



Sada ćemo napraviti novu aplikaciju pod nazivom login_register koja će sadržati svu logiku i kod iza logovanja i registrovanja. 

python manage.py startapp login_register

Nakon toga, potrebno je da aplikaciju registrujemo u settings.py, pa na dno INSTALLED_APPS dodajemo 'login_register'. Django sada zna za postojanje ove aplikacije, a mi pravimo u templates direktorijumu novi .html fajl pod nazivom login.html. Ovo će nam biti stranica na koju dođemo kliktanjem na dugme Sign In. Pored toga pravimo i stranicu register.html za dugme Sign Up.

Header i footer

Napraviću malu digresiju, jer se sada pojavljuje više strana i samim tim se može desiti da se dosta koda ponavlja, što želimo da izbegnemo. U templates direktorijumu ćemo napraviti još dve stranice, header.html i footer.html. U header.html će ići sav kod pre otvarajućeg body taga (uključujući i njega) iz index.html, a u footer.html sve posle zatvarajućeg body taga (uključujući i njega). Sada će nam index.html izgledati ovako: 

<div class="container">
    <div class="row">
        <div class="col-md-12 welcome-index">
            <h1>Welcome to repz<b style="color: #ef3e36">.</b></h1>
            <h4>Track your training progress</h4>
            <br>
            
            <a href="login/"><button class="signin-button-index">Sign In</button></a>
            <a href="register/"><button class="signup-button-index">Sign Up</button></a>
            
            
            
        </div>
    </div>
</div>

Na vrh strane dodajemo {% include 'header.html' %}, a na kraj strane {% include 'footer.html' %}.
Sada index.html, izgleda ovako: 
{%include 'header.html'%}
  <div class="container">
  <div class="row">
      <div class="col-md-12 welcome-index">
          <h1>Welcome to repz<b style="color: #ef3e36">.</b></h1>
          <h4>Track your training progress</h4>
          <br>
          
          <a href="login/"><button class="signin-button-index">Sign In</button></a>
          <a href="register/"><button class="signup-button-index">Sign Up</button></a>
          
          
          
      </div>
  </div>
</div>
{%include 'footer.html'%}

Sada kada dodajemo neku novu biblioteku, možemo je dodati samo u header.html, ne moramo na svakoj strani pojedinačno (npr. da imamo 10 strana, 10 puta bismo radili istu stvar).


Sada možemo da se vratimo na naše login.html i register.html strane. U ovom tutorijalu ću samo linkovati ka njima, a u sledećem ih dorađivati. Za početak, na stranama dodamo samo h1 naslov sa imenom strane, dakle Login page i Register page. U views.py fajlu u login_register direktorijumu pravimo funkcije: 

def login(request):
      return render(request, 'login.html')

def register(request):
          return render(request, 'register.html')

Ove funkcije će nam prikazati naše strane prilikom poziva. Pravimo u direktorijumu login_register novi fajl urls.py i u njega stavljamo: 
from django.urls import path
from . import views

urlpatterns = [
    path('login/', views.login),
    path('register/', views.register)
]

Dakle, kada je u linku 'login/' zvaćemo funkciju login koja će renderovati login.html stranicu i slično za 'register/'. Sada, kada kliknemo na Sign In odvešće nas na Login stranicu, a kada kliknemo na Sign Up, odvešće nas na Register stranicu. Njih ćemo u sledećem tutorijalu detaljnije obraditi.

Ovde ću stati, ako nešto ne radi slobodno mi pišite na Instagramu ili Facebooku. Kodove ovog tutorijala možete naći na GitHubu.

Uvod u Django 1.deo
Uvod u Django 2.deo

Hvala što ste čitali, nadam se da je bilo korisno. :)

Lazar Ristić