---Form---
1.เริ่มต้นด้วยการแก้ไข template detail.html ที่สร้างไว้ใน Part 3 กันเสียก่อนโดยแก้ตามนี้
<h1>{{ poll.question }}</h1>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
<form action="{% url 'polls:vote' poll.id %}" method="post">
{% csrf_token %}
{% for choice in poll.choice_set.all %}
<input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" />
<label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br />
{% endfor %}
<input type="submit" value="Vote" />
</form>
จาก Template ที่แก้ไขนั้นจะแสดงผลเป็น HTML โดยหากมี error_message ก็จะแสดงออกมาทาง Browser ด้วยและเป็นตัวหนาจากนั้นในส่วนของ form tag action มีหน้าที่เมื่อกดปุ่ม Vote จากโค้ด <input type="submit" value="Vote" /> แล้วจะเรียกหน้า vote ขึ้นมา ในส่วนของ method="post" ใส่เพื่อเป็นการบอกว่าข้อมูลจาก form นี้นำเข้าไปให้ทางฝั่ง server และ {% csrf_token %} มีไว้เพื่อป้องกัน Cross Site Request Forgeries ซึ่ง Cross Site Request Forgeries คือ รูปแบบของอันตรายของเว็บโดยส่งคำสั่งที่ไม่ได้รับอนุญาตจากผู้ใช้ที่เว็บไซต์
จากนั้นเข้า loop for poll.choice_set.all ซึ่งก็คือ List ที่มี Choice ทั้งหมดของ poll นั้นๆผ่านตัวแปร choice จากนั้นสร้างปุ่มกดแบบ Radio และมี label เพื่อบอกว่าปุ่ม Radio นั้นเป็นปุ่มของ choice ไหน
2.จากนั้นเข้าไปแก้ไข Function vote ในไฟล์ views.py ใน polls/views.py ดังนี้
def results(request, poll_id):
poll = get_object_or_404(Poll, pk=poll_id)
return render(request, 'polls/results.html', {'poll': poll})
def vote(request, poll_id):
p = get_object_or_404(Poll, pk=poll_id)
try:
selected_choice = p.choice_set.get(pk=request.POST['choice'])
except (KeyError, Choice.DoesNotExist):
# Redisplay the poll voting form.
return render(request, 'polls/detail.html', {
'poll': p,
'error_message': "You didn't select a choice.",
})
else:
selected_choice.votes += 1
selected_choice.save()
# Always return an HttpResponseRedirect after successfully dealing
# with POST data. This prevents data from being posted twice if a
# user hits the Back button.
return HttpResponseRedirect(reverse('polls:results', args=(p.id,)))
ซึ่ง Function vote เมื่อเรียกใช้แล้วจะดึง Objects ของ poll ที่ pk ตรงกับ poll_id ออกมาเก็บใน p หากไม่มี Objects นั้นก็จะแสดงหน้า Page not found 404 แบบที่ได้อธิบายไว้ใน Part 3 แล้วจากนั้น p.choice_set.get(pk=request.POST['choice']) จะได้ choice ที่เราทำการเลือกในหน้า detail โดย request.POST['choice'] จะได้ค่าของ String ซึ่งเป็น ID ของ choice ออกมาโดยเมื่อได้ choice ที่เลือกออกมาแล้วก็ให้ selected_choice ชี้ไว้ แต่หากไม่สามารถหา choice นั้นได้ก็จะกลับไปแสดงหน้า detail อีกครั้งผ่าน render โดยมี error_message กลับไปแสดงด้วย แต่ถ้าหากหาได้แล้วก็ให้บวกค่า votes ของ choice นั้น 1 แต้มแล้วทำการ save ลง Database จากนั้นก็จะ Redirect ไปยังหน้า results ของ poll นั้นเองโดยอัตโนมัติ
ส่วน Function results นั้นจะดึง Objects ของ poll ที่ pk ตรงกับ poll_id ออกมาเก็บใน p หากไม่มี Objects นั้นก็จะแสดงหน้า Page not found 404 แบบที่ได้อธิบายไว้ใน Part 3 แล้วจากนั้นจะ render template results.html ขึ้นมาแสดงผล
3.เพิ่ม template results.html โดยภายใน html มีโค้ดดังนี้
<h1>{{ poll.question }}</h1>
<ul>
{% for choice in poll.choice_set.all %}
<li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
{% endfor %}
</ul>
<a href="{% url 'polls:detail' poll.id %}">Vote again?</a>
โดยรูปแบบที่แสดงจะเริ่มด้วยคำถามของ poll นั้นๆเป็น Header จากนั้นจึงเข้าไปอ่านค่าใน choice ทั้งหมดของ poll นี้โดยนำทั้ง choice และจำนวนของการ vote ออกมาแสดงผลทั้งหมด จากนั้นมีลิ้งค์ขึ้นมาถามว่า Vote again? หาคลิกที่ลิ้งค์ก็จะกลับไปหน้า detail ของ poll นี้เพื่อเลือกโหวตอีกครั้ง
---Generic Views---
4.การที่โค้ดของเรานั้นอยู่ในรูปแบบ generic และ สั้นๆ ถือเป็น โค้ดที่ดีกว่าดังนั้นเราจะแก้ไขไฟล์ดังต่อไปนี้
4.1 แก้ไขไฟล์ polls/urls.py ในส่วนของ urlpatterns ดังนี้
url(r'^$', views.IndexView.as_view(), name='index'),
url(r'^(?P<pk>\d+)/$', views.DetailView.as_view(), name='detail'),
url(r'^(?P<pk>\d+)/results/$', views.ResultsView.as_view(), name='results'),
url(r'^(?P<poll_id>\d+)/vote/$', views.vote, name='vote'),
4.2 แก้ไขและเพิ่มบรรทัด import ในไฟล์ polls/views.py ดังนี้
from django.views import generic
class IndexView(generic.ListView):
template_name = 'polls/index.html'
context_object_name = 'latest_poll_list'
def get_queryset(self):
"""Return the last five published polls."""
return Poll.objects.order_by('-pub_date')[:5]
class DetailView(generic.DetailView):
model = Poll
template_name = 'polls/detail.html'
class ResultsView(generic.DetailView):
model = Poll
template_name = 'polls/results.html'
จากโค้ดที่ได้เปลี่ยนแปลงไปข้างต้นนั้นในส่วนของ views.py เราได้ import API ที่ชื่อ generic จาก django.views มาซึ่งเป็น API สำหรับการทำ generic views มาให้โดย template_name ในแต่ละ Class นั้นเอาไว้กำหนดไฟล์ templates ที่จะเอามาใช้ในการ render ส่วน context_object_name เอาไว้กำหนดชื่อของตัวแปรที่ใช้ใน context นี้สำหรับ model เอาไว้แสดงข้อมูลใน Objects ที่ระบุไว้
ในส่วนของ urls.py จะเห็นว่ามี .as_view() ต่อท้ายชื่อ Class ที่เราสร้างไว้ใน views.py ซึ่ง .as_view() มีหน้าที่ในการจัดการกับ request ที่เข้ามาแล้วตอบกลับไปซึ่งสิ่งที่ตอบกลับไปก็คือหน้า HTML ที่ render แล้วอีกส่วนที่เปลี่ยนไปก็คือ (?P<poll_id>\d+) ของ detail และ results เปลี่ยนไปเป็น (?P<pk>\d+) เพราะ DetailView นั้นสามารถจับ Primary Key จาก url ได้หรือที่เรียกกันว่า pk นั่นเองจึงเป็นเหตุผลให้เปลี่ยนไปเป็นแบบหลัง
จาก Tutorial Part 4 นี้ทำให้เรารู้จักการใช้ Form ใน HTML ผสมกับการใช้ Template ใน Django ไปด้วยซึ่งสามารถใช้ Form เป็น Input ในการเก็บข้อมูลเข้าไปยัง Database ของเราหรือจะเอามาเพิ่มแต้ม Vote แบบในตัวอย่างก็ได้ นอกจากนี้ยังมีส่วนของ Generic View ใช้เพื่อลดความยาวของโค้ดให้อ่านง่ายสบายตาขึ้นจากแบบเก่า
ข้อมูลเพิ่มเติมเรื่อง Cross Site Request Forgeries จากเว็บ wikipedia.org
ข้อมูลเพิ่มเติมเรื่อง Generic View แบบ Detail View จากเว็บ djangoproject.com
ข้อมูลเพิ่มเติมเรื่อง Generic View แบบ List View จากเว็บ djangoproject.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น