১৩.৯ : base html তৈরী

আমরা আজকে আমাদের base.html টা রেডি করে ফেলবো তবে একটু ডিফারেন্ট ভাবে। বেস্ট প্রাকটিস হচ্ছে ওয়েবসাইট এত হেডার,ফুটার, base.html কে core নামে একটা অ্যাপ তৈরি করে সেখানে রাখা। আমরাও সেটাই করবো।

django-admin startapp core

অ্যাপ তৈরির পর সেটাকে আমরা সেটিংস এ রেজিষ্টার করাবো অবশ্যই। এই অ্যাপ এর মধ্যে templates নামে একটা ফোল্ডার করে সেখানে base.html ইউজ করবো। এর মধ্যে আমরা ব্লক ট্যাগ ইউজ করবো, tailwand সিএসএস কে অ্যাড করে দিবো। আমাদের nav বার এর জন্যে আমরা আলাদা একটা ফাইল navbar.html নামে খুলে নিবো। এখন চিন্তা করে দেখো যে এই navbar.html এ একটা navbar থাকবে যেটা আসলে সব পেজ এর জন্যেই কমন তার মানে এটার মধ্যে base.html কে ইনহেরিট করার প্রয়োজন নেই, আমরা include ট্যাগ দিয়ে base.html এ এটাকে ইউজ করবো। এভাবে ভেঙে ভেঙে কাজ করলে আমাদের কোড দেখতে খুব বেশি বড়ো মনে হয় না সেই সাথে ছোটো পার্ট গুলা ম্যানেজ করাও অনেক ইজি হয়ে যায়।

এখন nav বার এ logged ইন ইউজার এর জন্যে আমরা report, deposit, withdraw,logout মেনু দেখাবো আর non logged in ইউজার এর জন্যে register,login মেনু দেখাবো। এখন কোনো একজন ইউজার লগ ইন অবস্থায় আছে বুঝবো কিভাবে টেমপ্লেট থেকে? আমরা যদি request.user.is_authenticated ইউজ করি এবং সেটা যদি ট্রু হয় তাইলে সেই ইউজার টা loggedin অবস্থায় আছে অন্যথায় নাই।

core/templates/navbar.html

<nav class="flex items-center justify-between flex-wrap bg-white p-6 px-10">
    <div class="flex items-center flex-shrink-0 text-white mr-6">
        <span class="font-semibold text-xl tracking-tight text-blue-900"><a href="/">Mamar Bank</a></span>
    </div>
    <div class="block lg:hidden">
        <button class="flex items-center px-3 py-2 border rounded text-white border-white-400 hover:text-white hover:border-white">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
    </div>
    <!-- Register Login non logged in user er jonne -->
    <!-- Report , Withdraw, Deposit       Profile Logout logged in user -->
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto px-10">
        {% if request.user.is_authenticated %}
            <div class="text-md lg:flex-grow">
                <a href="{% url 'transaction_report' %}" class="block mt-4 lg:inline-block lg:mt-0 text-blue-900 hover:text-red-900 hover:font-black mr-4">
                    Report
                </a>
                <a href="{% url 'deposit_money' %}" class="block mt-4 lg:inline-block lg:mt-0 text-blue-900 hover:text-red-900 hover:font-black mr-4">
                    Deposit
                </a>
                <a href="{% url 'withdraw_money' %}" class="block mt-4 lg:inline-block lg:mt-0 text-blue-900 hover:text-red-900 hover:font-black mr-4">
                    Withdraw
                </a>
                <a href="{% url 'loan_request' %}" class="block mt-4 lg:inline-block lg:mt-0 text-blue-900 hover:text-red-900 hover:font-black mr-4">
                    Loan Request
                </a>
            </div>
            <div class="flex w-auto">
                <div class="text-blue-900 my-auto font-black px-5">Welcome, {{ request.user.first_name }} (balance : {{request.user.account.balance}}) </div>

                <a href="{% url 'profile' %}" class="mx-2 inline-block font-medium text-sm px-4 py-2 leading-none bg-blue-900 rounded text-white border-white hover:border-transparent hover:text-dark hover:bg-red-700 mt-4 lg:mt-0">Profile</a>
                <a href="{% url 'logout' %}" class="mx-2 inline-block font-medium text-sm px-4 py-2 leading-none bg-blue-900 rounded text-white border-white hover:border-transparent hover:text-dark hover:bg-red-700 mt-4 lg:mt-0">Logout</a>
            </div>
        {% else %}
            <div class="text-md lg:flex-grow"></div>
            <div>
                <a href="{% url 'login' %}" class="mr-2 inline-block font-medium text-sm px-4 py-2 leading-none bg-blue-900 rounded text-white border-white hover:border-transparent hover:text-gray-800 hover:bg-red-700 mt-4 lg:mt-0">Login</a>
            </div>
            <div>
                <a href="{% url 'register' %}" class="inline-block font-medium text-sm px-4 py-2 leading-none bg-blue-900 rounded text-white border-white hover:border-transparent hover:text-gray-800 hover:bg-white mt-4 lg:mt-0">Register</a>
            </div>
        {% endif %}
    </div>
</nav>

core/templates/base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="Dummy Banking System" />
        <title>
            {% block head_title %}Banking System{% endblock %}
        </title>
        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    </head>
    <body class="bg-indigo-600">
        {% include 'navbar.html' %}
        {% block body %}

        {% endblock %}
    </body>

</html>

এখন আমরা আমাদের home পেজ এর জন্যে index.html নামে একটা ফাইল খুলবো সেখানে আমাদের base.html ইনহেরিট করে navbar.html কে ইনক্লুড করে নিবো। এই হোম পেজ এর জন্যে একটা ভিউজ লিখবো, যেহেতু সেখানে কোনো লজিক্যাল কাজ, ফরম এর ব্যাপার, ডিটেইলস দেখার কোনো ব্যাপার নাই জাস্ট একটা টেমপ্লেট কে রেন্ডার করবো সেজন্যে আমরা class based ভিউ এর টেমপ্লেট ভিউ কে ইউজ করতেছি।

core/views.py

from django.shortcuts import render
from django.views.generic import TemplateView
# Create your views here.

class HomeView(TemplateView):
    template_name = 'index.html'

core/templates/index.html

{% extends 'base.html' %} 

{% block content %}

<h1>this is inside index.html</h1>
{% endblock %}

এখন যেহেতু আমাদের হোম পেজ টা core অ্যাপ এর মধ্যে আছে সো তুমি চাইলে সেটার জন্যে ইউআরএল টা core অ্যাপ এর urls.py এও লিখতে পারো অথবা inner প্রজেক্ট ফোল্ডার এর urls.py এও লিখতে পারো। আমরা inner প্রজেক্ট এ অ্যাড করতেছি।

mamar_bank/urls.py

from django.contrib import admin
from django.urls import path, include
from core.views import HomeView
urlpatterns = [
    path('', HomeView.as_view(), name='home'),
    path('admin/', admin.site.urls),
    path('accounts/', include('accounts.urls')),
]