search

মডিউল ৬-৫ঃ মডেল ডাটা ফ্রন্ট-এ্যান্ডে প্রদর্শন

মডিউলের হেডলাইন থেকেই বোঝা যাচ্ছে এই মডিউলে খুব ইন্টারেস্টিং একটা কাজ করা হবে, নিজেদের তৈরি করা মডেলে বিভন্ন সোর্স থেকে এ্যাড করা ডাটা ফ্রন্ট-এন্ডে দেখা হবে !

first_app/views.py ফাইলে home নামে একটি ফাংশন নিচের মত করে লিখে ফেলি-

Code:: 6.5.1 first_app/views.py

from django.shortcuts import render, redirect
from . import models
# Create your views here.
def home(request):
    student = models.Student.objects.all()
    return render(request,"home.html", {'data': student})

  • ৫ নং লাইনে models.Student.objects.all() ফাংশনের সাহায্যে Student মডেলের সবগুলো অব্জেক্ট student ভেরিয়েবলে রাখা হয়েছে

  • ৬ নং লাইনে "home.html" ফাইলটি রেন্ডার করা হয়েছে, সেই সাথে student ভেরিয়েবলের ডেটা 'data' নামক key হিসেবে কনটেক্সট আকারে পাঠানো হয়েছে

তাহলে এখন করনীয় হলো first_app ডিরেকটরিতে templates নামে একটি ফোল্ডার তৈরি করে সেখানে 'home.html' নামে একটি ফাইল তৈরি করে ফেলা-

Code:: 6.5.2 first_app/templates/home.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>this is home page</h1>
    {% if data %}
    <table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">Roll</th>
          <th scope="col">Student Name</th>
          <th scope="col">Father's Name</th>
          <th scope="col">Address</th>
        </tr>
      </thead>
      <tbody>
        {% for st in data %}
        <tr>
          <td>{{st.roll}}</td>
          <td>{{st.name}}</td>
          <td>{{st.father_name}}</td>
          <td>{{st.address}}</td>
        </tr>
        {%endfor%}
      </tbody>
    </table>
    {% else %}
    <h3>No data available to show</h3>
    {% endif%}
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

sixth_project/urls.py ফাইলে first_app এ্যাপের URL প্যাটার্ন গুলো include করে ফেলি

Code:: 6.5.3 first_app/views.py

এখন, first_app -এ urls.py নামে একটি ফাইল ক্রিয়েট করে home ফাংশনের জন্য একটা URL প্যাটার্ন এ্যাড করে ফেলি-

প্রজেক্টটি রান করে http://127.0.0.1:8000/home/arrow-up-right URL-এ গেলে নিচের মত করে Student মডেলের ডাটাগুলো দেখতে পাব-

Previousমডিউল ৬-৪ঃ জ্যাংগো এ্যাডমিন প্যানেল পরিচিতিNextমডিউল ৬-৬ঃ ফ্রন্ট-এ্যান্ড থেকে মডেল ডাটা ডিলিট করা

Last updated