آموزش جانگو - قسمت چهارم: ایجاد فرانت-اند

حال که قسمت بک‌-اند ما به صورتی درست کار می‌کند، می‌توانیم به فرانت-اند وبسایت بپردازیم. در حال حاضر آدرس Localhost:8000/todos به ما چیزی جز یک متن ساده را نمی‌دهد. بنابراین بیایید به فایلی که متن در داخل آن قرار دارد برگشته و تغییراتی در آن اعمال کنیم. فایل views.py را در تکست ادیتور باز کنید. حال قصد داریم براساس پاسخی که برگشت داده می‌شود، یک فایل index.html ایجاد شود. برای اینکار بجای HttpResponse(‘your text’) دستور render(request, index.html) را قرار دهید. در نهایت فایل‌ ما به صورت زیر خواهد بود:

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return render(request, ‘index.html’)

render شامل یک قالب (در این مثال index.html) با یک دایرکتوری محتوایی (request) می‌شود. در نهایت یک درخواست HttpResponse با متن رندر شده برگشت داده می‌شود.

حال که ما این قسمت از کار را انجام دادیم نیاز است که فایل index.html را ایجاد کنیم. یک دایرکتوری جدید در todos با نام templates ایجاد کنید. بعد از آن، در داخل دایرکتوری فایل index.html را ایجاد کنید. برای این قسمت از کار تنها کافی‌ست که در داخل فایل HTML یک متن مانند HELLO FROM INDEX یا هر چیز دیگری وارد کرده و در نهایت ذخیره کنید.

کاری که قصد انجام آن را داریم این است که یک کوئری برای دریافت todos ایجاد کنیم. برای انجام چنین کاری ابتدا نیاز است که ماژول مورد نظرمان را به فایل views.py اضافه کنیم. کدهای زیر را به فایل views.py اضافه کنید:

from .models import Todo

بعد از آن در داخل تابع index، کدهای زیر را وارد کنید:

todos = Todo.objects.all()[:10]

[:10] تعداد مواردی که ما می‌خواهیم را تعیین می‌کند.

حال نیاز است که کدهای بالا را در template قرار دهیم. برای این کار یک متغیر با نام context اضافه کرده و کدهای زیر را به آن اعمال کنید:

context = {
    ‘Todos’ :todos
}

کدهای این فایل تا به اینجای کار باید به این صورت بوده باشد:

from django.shortcuts import render
from django.http import HttpResponse
from .models import Todo

def index(request):
    todos = Todo.objects.all()[:10]
    context = {
        'todos' :todos
    }

    return render(request, 'index.html', context)

اگر دقت کنید به این موضوع پی خواهید برد که قسمت context بخشی از دستور return نیز است. بدون این قسمت to-dos ما نمایش داده نمی‌شود.

حال می‌خواهیم که به فایل html بازگردیم. قصد داریم که این فایل یک حلقه را برای to-doها اجر کنید. تمام کدهای قبلی را در این فایل پاک کرده و بعد کدهای زیر را وارد کنید:

<ul>

{% for todo in todos %}

    <li>{{todo.title}}: {{todo.text}}</li>

{% endfor %}

</ul>

این کد قرار است که to-do را به صورت لیست نمایش دهد. می‌توانید کارهای دیگری را نیز با HTML و CSS انجام دهید، اما ما قصد نداریم تمرکز زیادی را روی این موضوع بگذاریم، به همین دلیل از آن می گذریم.

فایل را ذخیره کرده و صفحه وب را باری دیگر رفرش کنید. حال باید با چیزی شبیه به زیر مواجه شوید:

حال که می‌دانیم تمام این موارد به درستی کار می‌کند، باید به فایل HTML بازگشته و تگ‌های کلی را در آن قرار دهیم. با وجود آنکه خروجی به صورت درست نمایش داده شد اما در پروژه‌ها باید توجه داشته باشید که سینتکس درستی را به کار ببرید. کدهای زیر را به فایل HTML اضافه کنید.

<!DOCTYPE html>

<html lang="en" dir="ltr">

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <ul>

        {% for todo in todos %}

            <li>{{todo.title}}: {{todo.text}}</li>

        {% endfor %}

        </ul>

    </body>

</html>

بعد از این قسمت می‌توانید یک header نیز به صورت زیر در کدهای‌تان داشته باشید:

<header>

    <h1>To-Do List</h1>

    <hr>

</header>

حال باید یک صفحه جزئیات را برای هر کدام از to-doها ایجاد کنید. برای انجام چنین کاری، نیاز است که todo.title را در یک لینک قرار دهیم. تگ li را به صورت زیر تغییر دهید:

<li><a href="/todos/details/{{todo.id}}">{{todo.title}}</a>: {{todo.text}}</li>

حال اگر صفحه وب مورد نظرمان را نوسازی کنیم، می‌توانیم روی هر کدام از todoها به صورت جداگانه کلیک کنیم. اگر روی اولین مورد کلیک کنید، در آدرس بار می‌توانید جزئیات را مشاهده نمایید: /details/1.

حال بیایید کاری کنیم که این لینک‌ها واقعا کار بکنند. برای این کار فایل urls.py را در دایرکتوری todos باز کنید. در داخل این فایل یک مسیریابی جدید را ایجاد کنید. برای انجام چنین کاری به صورت زیر عمل نمایید:

re_path(r'^details/(?P<id>\w{0,50})/$', views.details)

کدهای مربوط به این فایل به صورت زیر خواهد بود:

from django.urls import re_path

from . import views

urlpatterns = [

    re_path(r'^$', views.index, name='index'),

    re_path(r'^details/(?P<id>\w{0,50})/$', views.details)

]

قسمت (?P<id>\w{0,50}) برای ما آی‌دی‌های مربوط به هر todo را اجرا می‌کند. فایل را ذخیره کرده و به views.py برگردید. در این قسمت قصد داریم یک تابع جدید با نام details ایجاد کنیم. این تابع دو پارامتر request و id را دریافت می‌کند. این موارد برای مسیر‌یابی مهم هستند:

def details(request, id):
    todo = Todo.objects.get(id=id)
    context = {
        'todo' :todo
    }

    return render(request, 'details.html', context)

این تابع یک آیتم از لیست to-do را دریافت کرده و بعد یک برگه جزئیات را برای آن آیتم برگشت می‌دهد. حال که ما چنین کاری را انجام دادیم نیاز است که یک فایل details.html ایجاد کنیم. فایل html را در پوشه templates ایجاد کنید.

در داخل این فایل کدهای زیر را قرار دهید:

<h1>{{todo.title}}</h1>

حال اگر به localhost:8000/todos مراجعه کنید و روی Todo One کلیک کنید، یک برگه مانند زیر را دریافت خواهیم کرد:

از این خروجی می‌توانیم نتیجه بگیریم که همه چیز به صورت درست کار می‌کند. برگه جزئیات با وجود آنکه به درستی کار می‌کند اما فضای بسیار خالی دارد و اطلاعات چندانی در آن قرار نگرفته است. به این منظور در فایل html متن اصلی را نیز به صورت زیر قرار دهید:

<p>{{todo.text}}</p>

همچنین قصد داریم که این برگه به ما تاریخ و زمان را نیز نشان دهد. برای اینکار کد زیر را قرار دهید:

<br>
Created on {{todo.created_at}}

این کد یک خط جدید اضافه کرده و سپس تاریخ و زمان را نمایش می‌دهد.

حال اگر صفحه را رفرش کنید می‌توانید صفحه را به صورت زیر مشاهده کنید:

اتمام اپلیکیشن جانگو

مقاله بعدی آخرین مطلب از این سری خواهد بود. به شما در مقاله بعدی شیوه دسته‌بندی برگه‌های HTML، افزودن فرم‌ها، ایجاد To-Do توسط کاربران و... را آموزش خواهیم داد.

منبع