آموزش جانگو - قسمت پنجم : تکمیل اپلیکیشن

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 22 مرداد 1397
دسته بندی ها : پایتون

تا به اینجای کار ما هیچ توجهی به کاربر اپلیکیشن نکردیم. در حقیقت کاربران این اپلیکیشن نمی‌توانند به صورت مستقیم از آن استفاده کنند. ما اپلیکیشن را با آدرس‌هی به آن و ایجاد برگه‌هایی برای اضافه کردن To-Do توسط کاربران تکمیل می‌کنیم. 

حال می‌توانیم ساختار کامل template را ایجاد کنیم. برای اینکار ما partialهایی را ایجاد کرده و بعد به template اضافه می‌کنیم. حال به پوشه templates رفته و یک دایرکتوری جدید با نام partials ایجاد کنید. در داخل این دایرکتوری دو فایل با نام‌های header.html و footer.html را ایجاد کنید.

بعد از آن به فایل index.html رفته و قسمت مربوط به header را به header.html منتقل کنید. برای footer.html هم می‌توانید قسمت‌های نهایی فایل index.html را قرار دهید. در نهایت تمام موارد را ذخیره کنید.

حال به index.html برگشته و کدهایی که کپی کردید را پاک کنید. بعد از آن خطوط زیر را به ابتدای فایل index.html اضافه کنید. 

{% include 'partials/header.html' %}

بعد از آن کدهای زیر را به انتهای فایل اضافه کنید:

{% include 'partials/footer.html' %}

کلیت فایل در حال حاضر باید به صورت زیر باشد:

{% include 'partials/header.html' %}

    <ul>

        {% for todo in todos %}

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

        {% endfor %}

    </ul>

{% include 'partials/footer.html' %}

فایل را ذخیره کرده و اینبار به سراغ header.html بروید. قرار است در این مرحله از کار عنوان TodoList را به عنوان title در صفحه اضافه کنیم.

<title>TodoList</title>

حال باید همین کار را نیز در فایل details.html انجام دهیم. کدهای مربوط به این فال به صورت زیر خواهند بود:

{% include 'partials/header.html' %}

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

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

    <br>

    Created on {{todo.created_at}}

{% include 'partials/footer.html' %}

حال اگر روی یکی از to-doها کلیک کنید، همان header را در برگه اصلی نیز مشاهده خواهید کرد. این قسمت چیزی به زیر خواهد بود.

تا به اینجای کار ما یک اپلیکیشن که قسمت فرانت-اند و بک-اند آن به صورت درست و کامل ایجاد شده (همراه با صفحه admin) را در اختیار داریم. حال می‌توانیم موارد بیشتری را به قسمت فرانت‌اند اضافه کنیم. برای اینکار قصد داریم یک لینک برای ایجاد To-Do اضافه کنیم. برای این کار تگ زیر را در فایل قرار دهید:

<a href="todos/add">Add Todo</a>

حال برای اینکه لینک بدرستی بتواند کار کند، نیاز است که به فایل todos/urls.py رفته و یک مسیر دیگر را برای urlpatterns ایجاد کنیم:

urlpatterns = [
    re_path(r'^$', views.index, name='index'),
    re_path(r'^details/(?P<id>\w{0,50})/$', views.details),
    re_path(r'^add/', views.add),
]

حال، به دایرکتوری templates رفته و یک فایل جدید با نام add.html ایجاد کنید. در داخل این فایل، ابتدا باید partials را اضافه کنیم. بعد از آن فرم‌های لازم را نیز وارد می‌کنیم. به کدهای زیر نگاه کنید:

{% include 'partials/header.html' %}

    <form action="{% url 'add' %}" method="post">

    {% csrf_token %}

        <label for="title">Title</label>

        <input type="text" name="title" id="title">

        <br>

        <label for="text">Text</label><br />

        <textarea name="text" id="text"></textarea>

        <br><br>

        <input type="submit" value="Submit" />

    </form>

    <br>

    <a href="/">Go Back</a>

{% include 'partials/footer.html' %}

اتفاقات بسیاری در این قسمت رخ می‌دهند، بنابراین بیایید کمی جزئی تر مسائل را نگاه کنیم. ابتدای کار، from action برابر با url 'add' قرار گرفته که به معنای یک تابع است که فراخوانی می‌شود. بعد از آن یک درخواست post را ایجاد می‌کنیم که با استفاده از method انجام می‌شود. بعد از این موارد با تعدادی ورودی و دکمه همراه هستیم که می‌توانید از طریق کد آن‌ها را مطالعه کنید.

حال بیایید فایل را ذخیره کنیم و به views.py برگردیم. در این فایل یک تابع با نام add ایجاد کنید. همراه با تابع می‌توانیم متد درخواستی post را نیز با تابع بررسی کنیم. برای انجام چنین کاری باید یک دستورالعمل if را در کدهای‌مان قرار دهیم. 

کدهای زیر را در فایل views.py قرار دهید:

def add(request):

    if(request.method == 'POST'):

    return

else:

    return render(request, 'add.html')

حال فایل را ذخیره کرده و صفحه وب را رفرش کنید. هم اکنون باید فرم‌ها به درستی برای شما ظاهر شود.

از آنجایی که درخواست از متد Get بهره می‌برد، این قسمت تنها برای ما ظاهر URL را نمایش می‌دهد. بعد از اینکه این قسمت ارسال شد، باید درخواست POST را ایجاد کنیم. بنابراین حال نیاز داریم که به تابع add برگشته و تغییراتی در آن اعمال کنیم.

ابتدای کار باید مقادیر را دریافت کرده و آن‌ها را در یکسری از متغیرها ذخیره کنیم. تابع را به صورت زیر تغییر دهید:

def add(request):

    if(request.method == 'POST'):

        title = request.POST['title']

        text = request.POST['text']

        todo = Todo(title=title, text=text)

        todo.save()

        return redirect('/todos')

    else:

        return render(request, 'add.html')

همچنین نیاز است که ویژگی redirect را وارد پروژه کنیم. برای اینکار دستور import زیر را وارد پروژه کنید:

from django.shortcuts import render, redirect

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

روی دکمه Submit کلیک کنید و حال باید به آدرس localhost:8000/todos منتقل شوید. همچنین باید ببینید که Test Todo به لیست todos اضافه شده است:

حال ما یک اپلیکیشن که به خوبی کار می‌کند را در اختیار داریم!

اگر می‌خواهید به کار کردن روی آن ادامه دهید می‌توانید روی رابط کاربری آن کار کرده و با استفاده از CSS به آن استایل‌های بیشتری را بدهید. همچنین می‌توانید پنل ادمین را تغییر دهید. برای انجام چنین کاری یک دایرکتوری جدید در قسمت templates با نام admin ایجاد کرده و یک فایل base_site.html در آن قرار دهید. حال اگر به پنل ادمین بروید با یک صفحه خالی مواجه خواهید شد. البته در کنار فرانت‌اند می‌توانید قابلیت‌های بیشتری را نیز به اپلیکیشن اضافه نمایید.

منبع

مقالات پیشنهادی

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

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

آموزش جانگو - قسمت اول : جانگو چیست؟

وقتی که شروع به فرایند توسعه وب می‌کنید، ممکن است انتخاب مسیر از ابتدای کار کمی سخت باشد و شما در این روند سردرگم شوید. همانطور که وب پیشرفت کرد و تغی...

آموزش جانگو - قسمت سوم: ایجاد بانک‌ اطلاعاتی

در این مقاله ما روش پیاده‌سازی یک بانک‌ اطلاعاتی و پنل مدیریت را برای وبسایت جانگو خودمان یاد خواهیم گرفت. این قسمت به احتمال بسیار زیاد، پیچیده‌ترین...

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

حال که قسمت بک‌-اند ما به صورتی درست کار می‌کند، می‌توانیم به فرانت-اند وبسایت بپردازیم. در حال حاضر آدرس Localhost:8000/todos به ما چیزی جز یک متن سا...