মডিউল ৭-৮ঃ ফ্রন্ট-এন্ডে পোস্ট দেখানো

এই মডিউলে আমরা দেখব Post মডেলের ডেটাগুলো কিভাব ফ্রন্ট-এন্ডে দেখতে পারি

templates ডিরেকটরিতে home.html ফাইলটি তৈরি করি যেখানে Post এর ডেটাগুলো দেখানো হবে-

Code:: 7.8.1 templates\home.html

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

<div class="d-flex flex-wrap justify-content-center px-5 pt-5">
  {% for post in data %}
  <div class="col-sm-3">
    <div class="card m-2">
      <div class="card-body">
        <h5 class="card-title">{{post.title}}</h5>
        <p class="card-text">{{post.content}}</p>
        <p>Author : {{post.author.name}}</p>
        <p>
          Category : {% for cat in post.category.all %} 
          <button class="btn btn-primary btn-sm m-2" disabled >{{cat.name}} </button>
          {% endfor %}
        </p>
        <a href="{% url 'edit_post' post.id %}" class="btn btn-warning">Edit</a>
        <a href="{% url 'delete_post' post.id %}" class="btn btn-danger">Delete</a>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}

১২ নং লাইনে for লুপ লেখার কারন হলো একটি পোষ্টে একাধিক Category থাকতে পারে ( One to Many Relationship)

blog_project/urls.py-এ Post ডেটা দেখানোর জনা 'homepage' নামে নতুন একটি URL-প্যাটার্ন এ্যাড করি-

Code:: 7.8.2 blog_project/urls.py

from django.contrib import admin
from django.urls import path, include
from . import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name='homepage'),
    path('author/', include('author.urls')),
    path('profile/', include('profiles.urls')),
    path('post/', include('posts.urls')),
    path('category/', include('categories.urls')),
]

নতুন URL-প্যাটার্নটির জন্য blog_project এ views.py ফাইল ক্রিয়েট করে একটি view ফাংশন লিখে ফেলি-

Code:: 7.8.3 blog_project/views.py

from django.shortcuts import render
from posts.models import Post

def home(request):
    data = Post.objects.all()
    # print(data)
    # for i in data:
    #     print(i.title)
    #     for j in i.category.all():
    #         print(j)
    #     print()
    return render(request, 'home.html', {'data' : data})

এখন, base.html ফাইলের বেশ কিছু লিঙ্ক পরিবর্তন করে নিচের মত করে লিখি -

Code:: 7.8.4 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>Phitron Blog</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="{% url 'homepage' %}">P Blog</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 'homepage' %}">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_category' %}">Add Category</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'add_post' %}">Add Post</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>

এখন প্রজেক্ট রান করে http://127.0.0.1:8000/ URL-এ গেলে অথবা Home বাটনে ক্লিক করলে Post মডেলের রেকর্ডগুলো দেখতে পারব-

Previousমডিউল ৭-৭ঃ ক্যাটেগরি ও পোস্ট তৈরি Nextমডিউল ৭-৯ঃ পোস্ট এডিট করা

Last updated 1 year ago