5 වන ඒකකය: Django Views සහ Templates
අපි database එකේ දත්ත ගබඩා කරන්න Model එකක් හැදුවා. දැන් වෙලාව හරි, ඒ දත්ත පරිශීලකයාට පෙන්වන HTML පිටු නිර්මාණය කරන්න. මේ සඳහා Django හි **Views** සහ **Templates** කියන කොටස් දෙක එකට ක්‍රියා කරනවා.
Views සහ Templates ක්‍රියා කරන්නේ කොහොමද?
- ඔයා (User) වේටර්ට (URL) කියනවා ඔයාට මොනවද ඕන කියලා.
- වේටර් කුස්සියට (View) ගිහින් ඒ බව කියනවා.
- කුස්සියේ ඉන්න කෝකියා (View) අවශ්‍ය දේවල් ගබඩාවෙන් (Model/Database) අරගෙන, කෑම එක හදලා පිඟානක (Template) ලස්සනට පිළිගන්වනවා.
- අවසානයේ වේටර් ඒ පිඟාන ඔයාට ගෙනත් දෙනවා.
පියවර 1: `base.html` - අපේ වෙබ් අඩවියේ අත්තිවාරම
අපේ වෙබ් අඩවියේ හැම පිටුවකම Navigation Bar එක, Footer එක වගේ පොදු දේවල් තියෙනවා. හැම HTML file එකකම මේ කේතය නැවත නැවත ලියන එක තේරුමක් නෑ. ඒකට විසඳුම තමයි `base.html` කියන ප්‍රධාන template එක හදන එක.
- ඔබේ `notes` app එක ඇතුළේ, `templates` නමින් අලුත් folder එකක් සාදන්න.
- ඒ `templates` folder එක ඇතුළේ, `base.html` නමින් අලුත් file එකක් සාදා පහත කේතය ඇතුළත් කරන්න.
<!-- notes/templates/base.html -->
<!DOCTYPE html>
<html lang="si">
<head>
<!-- අපේ අනෙක් පිටු වල තිබූ සියලුම meta tags, css links මෙතනට දාන්න -->
<title>My Notes App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/">NotesApp</a>
</div>
</nav>
<main class="container my-4">
{% block content %}
{% endblock content %}
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>මෙහි ඇති `{% block content %}` කියන කොටස තමයි අපේ "හිස් ඉඩ". අනෙක් හැම පිටුවක්ම මේ `base.html` එක extend කරලා, තමන්ට අදාළ HTML කේතය මේ හිස් ඉඩ ඇතුළට දානවා.
පියවර 2: මුල් පිටුව (`home.html`) සෑදීම
දැන් අපි මුල් පිටුව හදමු. `templates` folder එක ඇතුළේම `home.html` නමින් තවත් file එකක් සාදා පහත කේතය ඇතුළත් කරන්න.
<!-- notes/templates/home.html -->
{% extends 'base.html' %}
{% block content %}
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">My Notes App වෙත සාදරයෙන් පිළිගනිමු!</h1>
<p class="col-md-8 fs-4">ඔබගේ සියලුම සටහන් පහසුවෙන් කළමනාකරණය කරගන්න.</p>
<a class="btn btn-primary btn-lg" href="#">Login</a>
<a class="btn btn-secondary btn-lg" href="#">Register</a>
</div>
</div>
{% endblock content %}බලන්න, මෙතන `base.html` එකේ තිබුණු navigation bar එකවත්, head tag එකවත් නෑ. අපි `{% extends 'base.html' %}` මගින් ඒ සියල්ලම "උරුම" කරගෙන, අපිට අවශ්‍ය කොටස විතරක් `{% block content %}` එක ඇතුළේ ලියනවා.
පියවර 3: View එක සෑදීම සහ URL එකට සම්බන්ධ කිරීම
දැන් මේ `home.html` template එක user ට පෙන්වන්න view එකක් හදන්න ඕන.
1. **View එක සාදන්න:** `notes/views.py` ගොනුවට ගොස් පහත කේතය එක් කරන්න.
# notes/views.py
from django.shortcuts import render
def home(request):
return render(request, 'home.html')
2. **App එකේ URL එක සාදන්න:** `notes` folder එක ඇතුළේ `urls.py` නමින් අලුත් file එකක් සාදා, පහත කේතය ඇතුළත් කරන්න.
# notes/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
]
3. **ප්‍රධාන URL එකට සම්බන්ධ කරන්න:** දැන් `mysite/urls.py` ගොනුවට ගොස්, අපේ `notes` app එකේ URL ටික project එකට හඳුන්වා දෙන්න.
# mysite/urls.py
from django.contrib import admin
from django.urls import path, include # include එක import කරගන්න
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('notes.urls')), # notes app එකේ urls ටික මෙතනට සම්බන්ධ කරන්න
]