วันพุธที่ 15 มีนาคม พ.ศ. 2560

5. form สำหรับเพิ่มข้อมูล

    ทำการสร้าง form สำหรับ client หรือผู้ใช้สามารถเพิ่มข้อมูลของตนเองได้


 Template

    index

        เพิ่มส่วนของ form ในหน้า index

    <form action={% url 'accounts:add_account' %} method="post">
    {% csrf_token %}
     Account Name: <input type="text" name="account_name" >
    <input type = "submit" class="submit0" value = "Create">
    </form>
        {% url 'accounts:add_account' %} เป็น template tag ที่จะ link ไปยัง url ที่มี name=add_account ที่อยู่ใน app accounts
        {% csrf_token %} สำหรับป้องกันการเกิด Cross-site request forgery
        form จะเก็บค่า input เป็น text สำหรับ account name 

    detail

         ใน broswer firefox input ประเภท date จะไม่สามารถใช้ได้ต้องใช้ code ช่วยได้การแสดงผลเพิ่มในส่วน head ดังนี้
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    {#<link rel="stylesheet" href="/resources/demos/style.css">#}
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
        ส่วน form
        <form action={% url 'accounts:add_transaction' account.id %} method="post">  
        {% csrf_token %}
        <input type="datetime" id="datepicker" size="4" value={% now "SHORT_DATE_FORMAT" %} name="date">
        <input type="text" name="description" placeholder="Description">
        <input type="radio" name="type" value="Income"> Income    </option>
        <input type="radio" name="type" value="Expenses"> Expenses  </option>
        <input class="money" type="number" size=10 step="any" placeholder="money(THB)" name="value">
        <input type="submit" class="submit1" value="add">
    </form> 

 URL 

    เพิ่ม URL สำหรับ method เพิ่มบัญชีและเพิ่มรายการ ใน accounts/urls.py
url(r'^add_account/$', views.add_account, name='add_account'),
url(r'^(?P<account_id>[0-9]+)/add_transaction/$', views.add_transaction, name='add_transaction')

View

    import class ที่จำเป็นในการใช้งานดังนี้
from django.utils import timezone                                                                                  from django.http import  HttpResponseRedirect
from django.urls import reverse
from datetime import datetime
    เพิ่ม method สำหรับ เพิ่มบัญชี และรายการ

    add_accounts

def add_account(request):
    try:
        account_name = request.POST['account_name']
        if not account_name.strip():
            raise
    except :
        return HttpResponseRedirect(reverse('accounts:index',))
    else:
        a = Account(name=account_name, create=timezone.now())
        a.save()
        return HttpResponseRedirect(reverse('accounts:index',)
        method จะทำการรับ input text จาก form หากมีค่า input จะทำการเพิ่ม object ในฐานข้อมูล และ redirect ไปที่หน้า index หากไม่มี input จะไม่ทำการ เพิ่ม object 

    add_transaction

def add_transaction(request, account_id):
    account = get_object_or_404(Account, pk=account_id)
    try:
        date_str = request.POST['date']
        description = request.POST['description']
        actionType = request.POST['type']
        value = request.POST['value']
        if (not date_str.strip() or not description.strip() or not value.strip()):
            raise
    except :
        return HttpResponseRedirect(reverse('accounts:detail', args=(account_id)))
    date = datetime.strptime(date_str,"%m/%d/%Y")
    account.transaction_set.create( date=date, actionType=actionType,
                            description=description,
                            value=value)
    account.save()
    return HttpResponseRedirect(reverse('accounts:detail', args=(account_id)))
    method จะทำงานเช่นเดียวกับ add_account เพียงเปลี่ยน input จาก form ที่รับเข้ามา

ไม่มีความคิดเห็น:

แสดงความคิดเห็น