মডিউল ৭-৫ঃ Base HTML ও ফর্ম কনফিগারেশন

এই মডিউলে Base HTML নতুন Author এ্যাড করার জন্য ফর্ম ডিজাইন করে ফেলব

রুট ডিরেকটরিতে templates ফোলডার ক্রিয়েট করে এতে base.html ফাইল ক্রিয়েট করে ফেলি-

Code:: 7.5.1 templates\base.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="{% url 'add_author' %}">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'add_author' %}">Add Author</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'add_author' %}">Add Category</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'add_author' %}">Add Post</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
          <form class="d-flex">
            <input
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>

    {% block content %}
    {% endblock %}
    
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

  </body>
</html>

settings.py এ TEMPLATES লিস্টে বেস ডিরেকটরি 'templates' এ্যাড করি-

Author মডেলের জন্য মডেল ফর্ম তৈরি করি-

Code:: 7.5.2 author\forms.py

from django import forms
from .models import Author

class AuthorForm(forms.ModelForm):
    class Meta: 
        model = Author
        fields = '__all__'

মডেল-ফর্ম AuthorForm ম্যানেজ করার জন্য view ফাংশন add_author লিখে ফেলি-

Code:: 7.5.3 author\views.py

from django.shortcuts import render, redirect
from . import forms
# Create your views here.

def add_author(request):
    
    author_form = forms.AuthorForm()
    return render(request, 'add_author.html', {'form' : author_form})

author এ্যাপে templates ফোল্ডার ক্রিয়েট করে add_author.html ফাইলটি ক্রিয়েট করে ফেলি -

Code:: 7.5.2 author\templates\add_author.html

{% extends 'base.html' %}
{%  load crispy_forms_tags %}
{% block content %}


<form style="width:50% ; margin : auto" method="post">
    <h1>Add author page</h1>
    {% csrf_token %}
{{form | crispy}}

<button class="btn btn-warning">Submit</button>
</form>

{% endblock %}

এখন প্রজেক্ট রান করে http://127.0.0.1:8000/author/add/ URL -এ গেলে AuthorForm দেখতে পাব-

কিন্ত ফর্মের ডেটা ডেটাবেজে সেভ করার কাজটি অবশা এখনো করা হয় নাই তাই Submit বাটনে ক্লিক করলে আপাতত তেমন কোনো কাজ হবে না !

Previousমডিউল ৭-৪ঃ প্রজেক্টে এডমিন প্যানেলের ব্যবহারNextমডিউল ৭-৬ঃ Author ও Profile

Last updated