মডিউল ৭-৮ঃ ফ্রন্ট-এন্ডে পোস্ট দেখানো
এই মডিউলে আমরা দেখব 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 মডেলের রেকর্ডগুলো দেখতে পারব-
Last updated