อธิบาย Commit ต่างๆของเว็บแอพ Animals (เพิ่มเติม)

Commit 17 (44ad761) - add message in add animal page / add test_add_animal / rename test_common -> test_simple_view_data

• เพิ่มข้อความแจ้งเตือนหลังจากกดปุ่ม submit ในหน้า add animal 
• หากไม่กรอกชื่อ และชื่อไทยจะแสดงข้อความว่า "กรุณากรอกชื่อของสัตว์ด้วยจ้า"
• แต่ถ้ามีการกรอกชื่อ และชื่อไทยแล้ว จะเป็นข้อความว่า "ขอบคุณที่ช่วยเพิ่มข้อมูลให้กับเรา :)"
• สร้างไฟล์เทสการเพิ่มข้อมูลสัตว์
• แก้ไขชื่อไฟล์ test_common เป็น test_simple_view_data เพื่อให้สื่อความหมายว่าเป็นการเทสการดูข้อมูลสัตว์แบบพื้นฐาน(คลิกเข้าดูจากหน้ารายชื่อสัตว์)

User Story

- test_add_animal

#คุณสมิธอยากจะเพิ่มข้อมูลของเจ้าแมวเหมียว ให้กับเว็บแอพ Animal

#คุณสมิธทำการตรวจเช็คดูว่าเขาเข้าถูกแอพหรือไม่

#จากนั้นเขาจึงกดไปที่ปุ่ม add animal เพื่อที่จะเพิ่มข้อมูลของเจ้าแมวเหมียว

#เขาทำการเช็คหน้าเว็บแอพให้แน่ใจว่าเขาเข้ามาที่หน้า add animal แลัว

#แต่คุณสมิธดันมือลั่นไปกดปุ่ม submit ก่อนที่จะกรอกข้อมูล

#เว็บแอพจึงแสดงข้อความแจ้งเตือนขึ้นมา

#จากนั้นคุณสมิธจึงค่อย ๆกรอกข้อมูลทั้งหมดของเจ้าแมวเหมียวลงไป แล้วจึงกดปุ่ม submit

#จากนั้นว็บแอพก็แสดงข้อความแจ้งขึ้นมาขอบคุณ เมื่อคุณสมิธเห็นข้อความแล้วเขาก็เลยปิดคอมแล้วไปเล่นกับแมวของเขาต่อไป

อธิบาย Commit ต่างๆของเว็บแอพ Animals #2

Commit 9 (f9090ea) - create main div(wrapper,header,content,footer) / add BG

• แยกไฟล์ CSS ของหน้า Home
• สร้าง div แบ่งส่วนต่างๆของหน้าเว็บใน base.html ได้ wrapper header content และ footer
• เพิ่มฟอนต์สำหรับหัวข้อ และพื้นหลังของหน้าเว็บ

Commit 10 (ffedf1b) - edit list.css(block-list float:left when screen width < 1300px)

• มีการใช้ JS มาช่วยกำหนดว่า หากความกว้างของจอน้อยกว่า 1300px จะให้ float ใน block-list มีค่าเป็น left

Commit 11 (583568c) - make web to beauty

• มีการแยกไฟล์ css และตกแต่งเพิ่มเติม จัดรูปแบบหน้าต่างๆให้มีความสวยงามน่าใช้มาขึ้น

Commit 12 (710c1e2) - add about page

• สร้างหน้า About ขึ้นมาเพื่อแนะนำการใช้งานเว็บแอพ

Commit 13 (aa93bc7) - add 'no page' page / edit list page(edit button color/ add image)

• สร้างหน้า no page ขึ้นมาสำหรับหน้าเว็บที่ไม่มีอยู่ หรือสัตว์ที่สถานะยังไม่เป็น Published
• แก้ไขสีของปุ่มรายชื่อสัตว์
• เพิ่มรูปภาพของสัตว์ให้กับปุ่มรายชื่อสัตว์

Commit 14 (5e43717) - add functional text/test_common

• เพิ่มฟังก์ชั่นนอลเทส โดยเทสนี้จะเป็นการเทสการเข้าไปดูข้อมูลสัตว์แบบธรรมดา

Commit 15 (c3b63ed) - unit test complete

• เพิ่ม Unit Test ซึ่งจะเป็นส่วนที่ใช้ทดสอบ Method ต่างๆใน views.py ว่าทำงานถูกต้องหรือไม่

Commit 16 (3db483c) - add functional test/test_search & user story

• เพิ่มฟังก์ชั่นนอลเทสอีกหนึ่งตัว โดยเทสนี้จะเป็นการทดสอบการดูข้อมูลสัตว์ผ่านระบบเสิร์จ
• เพิ่ม User Story

User Story

- test_common

#คุณสมิธอยากจะรู้เรื่องข้อมูลถิ่นที่อยู่ของเจ้าแมวเหมียว เขาจึงเปิดเว็บแอพ Animal ขึ้นมา

#คุณสมิธทำการตรวจเช็คดูว่าเขาเข้าถูกแอพหรือไม่

#คุณสมิธนั่งเพ่งมองไปที่ปุ่มประเภทของสัตว์ว่ามีอะไรบ้าง

#แต่คุณสมิธไม่รู้ว่าเจ้าแมวเหมียวเป็นสัตว์ประเภทไหน เขาจึงกดเลือกไปที่ปุ่มสัตว์ทั้งหมด

#อ่า นั่นไงปุ่มของเจ้าแมวเหมียว เขาไม่รีรอที่จะเลื่อนเมาส์ไปกดที่ปุ่มนั่น

#คุณสมิธทำการตรวจเช็คให้แน่ใจว่านี่คือข้อมูลของเจ้าแมวเหมียว

#ในที่สุด คุณสมิธก็พบว่าถิ่นที่อยู่ของเจ้าแมวเหมียวนั่นก็คือ ทุกๆที่บนโลกน้นั่นเอง!!

-test_search

#คุณสมิธอยากจะรู้เรื่องข้อมูลถิ่นที่อยู่ของเจ้าแมวเหมียว เขาจึงเปิดเว็บแอพ Animal ขึ้นมา

#คุณสมิธทำการตรวจเช็คดูว่าเขาเข้าถูกแอพหรือไม่

#จากนั้นเขาจึงกดไปที่ปุ่ม search เพื่อที่จะค้นหาข้อมูลของเจ้าแมวเหมียว

#เขาทำการเช็คหน้าเว็บแอพให้แน่ใจว่าเขาเข้ามาที่หน้า search แลัว

#จากนั้นคุณสมิธจึงทำการค้นหาข้อมูลด้วยคำว่า "แมว"

#คุณสมิธนั่งดูผลลัพธ์ที่ค้นหาออกมาว่ามีข้อมูลของเจ้าแมวเหมียวหรือไม่

#อ่า นั่นไงปุ่มของเจ้าแมวเหมียว เขาไม่รีรอที่จะเลื่อนเมาส์ไปกดที่ปุ่มนั่น

#คุณสมิธทำการตรวจเช็คให้แน่ใจว่านี่คือข้อมูลของเจ้าแมวเหมียว

#ในที่สุด คุณสมิธก็พบว่าถิ่นที่อยู่ของเจ้าแมวเหมียวนั่นก็คือ ทุกๆที่บนโลกน้นั่นเอง!!

อธิบาย Commit ต่างๆของเว็บแอพ Animals #1

Commit 1 (78cb7cb) - Create Park app & Model

• เริ่มต้นสร้างเว็บแอพ
• สร้าง model ประกอบไปด้วย thai_name, name, class_name, order, family
• สร้าง template สำหรับหน้าแรก

Commit 2 (afbc979) - edit model & template, create search

(จริงๆแล้วควรจะเป็น edit model & create template)

• สร้าง template ต่างๆ ได้แก่
• หน้าเว็บแสดงรายชื่อสัตว์
• หน้าเว็บแสดงข้อมูลสัตว์
• หน้าเว็บสำหรับค้นหาข้อมูลสัตว์
• ปรับปรุงหน้า Home ให้สวยงามขึ้น
• เพิ่มส่วนของ info, habitat และ picture ใน Model
• เพิ่มเมนู Animals ในหน้า Admin เพื่อใช้สำหรับจัดการฐานข้อมูลของสัตว์
• ทำการแก้ไขและเพิ่ม Method ใน views.py ดังนี้
• แก้ไข index ให้ส่งค่าจำนวนสัตว์ในแต่ละหมวดหมู่ออกมาแสดงด้วย
• animal_list จะรับค่า class_name เข้ามาแล้วส่งรายชื่อสัตว์เฉพาะ class ที่รับมาออกไปแสดงผล
• animal_data จะรับค่า id เข้ามาแล้วส่งข้อมูลของสัตว์ id นั้นๆออกไปแสดงผล
• search ภายใน method นี้จะมีการรับคำค้นหาจากแบบฟอร์มที่หน้าเว็บเข้า แล้วคัดกรองรายชื่อสัตว์เพื่อนำออกไปแสดงผล (ดูคำอธิบายเรื่องการคัดกรองและ Q ได้ที่นี่)

Commit 3 (215916c) - test advance search / add database file

• ทดสอบระบบ Advance Search ค้นหาเฉพาะส่วน 
• เพิ่มไฟล์ดาต้าเบส

Commit 4 (8e74660) - advance search

• ปรับปรุง Advance Search ให้ใช้งานผ่านทางหน้าเว็บแอพได้ โดยหมวดหมู่ในการค้นหา ได้แก่
• ค้นจากชื่อสัตว์
• ค้นจากลำดับ
• ค้นจากวงศ์
• ค้นจากข้อมูลทั่วไป
• ค้นจากถิ่นที่อยู่
• ค้นจากทั้งหมด

Commit 5 (44d70c8) - add pending model / user add animal

• ทำหน้าเว็บสำหรับให้ผู้ใช้สามารถเพิ่มข้อมูลสัตว์ได้
• ข้อมูลที่ผู้ใช้เพิ่มจะถูกเก็บไว้ Model ที่ถูกสร้างขึ้นมาใหม่ชื่อว่า Pending
• เพิ่มฟังก์ชั่นสำหรับย้ายข้อมูลจาก Pending ไปใส่ Animals แทน เพื่อให้ข้อมูลสัตว์ตัวนั้นๆแสดงผลออกในหน้าเว็บแอพ

Commit 6 (bd9edf9) - edit model

• เปลี่ยนจากการใช้ Model Pending มาใช้ตัวแปร status ใน Animal แทนตามคำแนะนำของอาจารย์
• ตัวแปรนี้จะประกอบไปด้วย Published และ Pending
• แก้ไขส่วนอื่นๆให้ใช้งานร่วมกับตัวแปร status

Commit 7 (ceb73c6) - add animal image model

• เพิ่ม Model AnimalImage เพื่อมาใช้เก็บรูปของสัตว์แต่ละตัว
• เพิ่มเมนู AnimalImage ในหน้า Admin เพื่อใช้สำหรับจัดการฐานข้อมูลของรูปภาพสัตว์
• แก้ไขการแสดงผลของรายชื่อสัตว์ ให้แสดงเฉพาะสัตว์ที่มีสถานะเป็น Published เท่านั้น

Commit 8 (f6c0e08) - add base.html

• แยกส่วนของ CSS ออกมาเป็นไฟล์แยกต่างหาก
• ทำการสร้าง base.html ขึ้นมาใช้งาน เรียกว่า Template Extending
• เพิ่มส่วนที่ให้ผู้ใช้สามารถเพิ่มรู้ภาพของสัตว์ได้ทางหน้าเว็บข้อมูลสัตว์

สิ่งที่ได้ทำเพิ่มเติม

แก้สีของปุ่มรายชื่อสัตว์ในหน้ารายการสัตว์ และเพิ่มรูปสัตว์ของสัตว์ตัวนั้นๆเข้าไปในปุ่ม

ทำหน้า Error สำหรับสัตว์ที่ไม่มีอยู่หรือยังไม่ Published

วิดีโอนำเสนอแอพ Animals

bitbucket >> https://bitbucket.org/thakdanai_khunsaen/park

pythonanywhere >> http://thakdanai.pythonanywhere.com/

Assignment : ทำแอพ Animals รวมข้อมูลสัตว์ #6

    - ตกแต่งหน้าตาเว็บแอพให้ดูสวยงาม

    - ทำหน้า About

    - push โค้ดขึ้น bitbucket >> https://bitbucket.org/thakdanai_khunsaen/park

    - นำเว็บแอพขึ้น pythonanywhere >> http://thakdanai.pythonanywhere.com/park

Assignment : ทำแอพ Animals รวมข้อมูลสัตว์ #5

    - ปรับปรุง model อีกครั้ง โดยมีการรวม Pending เข้าไปใน Animal และสร้างตัวแปร status มาใช้แยกเอาว่าอยู่ในระหว่างรอการตวรจสอบ หรือเผยแพร่แล้ว และแยก image ออกไปเป็น class AnimalImage เพื่อที่จะได้เก็บรูปของสัตว์แต่ละตัวได้หลายรูป

    - แก้ไขส่วนที่ส่งข้อมูลออกไปแสดงผลให้ filter เฉพาะที่มี status เป็น published เท่านั้น

    - แก้ไข admin.py เพื่อให้ส่วนของ model AnimalImage มารวมอยู่ในหน้าเดียวกับการเพิ่มข้อมูลสัตว์ โดยจะสร้างเป็น class Inline

เสริม class Inline จะมีอยู่สองแบบ ซึ่งจะแตกต่างกันแค่ส่วนแสดงผลแค่นั้น ดังนี้

Assignment : ทำแอพ Animals รวมข้อมูลสัตว์ #4

    - ปรับปรุงหน้าค้นหาให้สามารถค้นหาเฉพาะส่วนได้

ซึ่งเมดธอดก็จะทำการรับค่าเข้ามาเช็คด้วยว่า ให้ค้นหาจากทั้งหมดหรือค้นหาเฉพาะส่วนไหน

    - สร้าง model ที่ใช้เก็บข้อมูลสัตว์ที่เพิ่มโดยผู้ใช้ ซึ่่งต้องแยกไว้ต่างหาก เพื่อทำการตรวจสอบก่อนนำขึ้นหน้าเว็บแอพ

    - สร้างหน้า template ที่จะให้ผู้ใช้เพิ่มข้อมูล และรับค่าจากหน้านั้นไปเพิ่มใน model Pending

    - สร้างเมธอดใน admin.py เพื่อเพิ่มคำสั่งในหน้า admin ของ Pending สำหรับโอนย้ายข้อมูลจาก model Pending ไป model Animal หลังจากตรวจสอบแล้ว

Assignment : ทำแอพ Animals รวมข้อมูลสัตว์ #3

    - จากแก้ไข model ใหม่ โดยจะเพิ่ม info habitat แทนการดึงข้อมูลจากไฟล์ text และ picture เข้าไป(ไม่ต้องก็อปรูปไปใส่โฟลเดอร์เองแล้ว เย้!)

    แต่จากที่หาข้อมูลพบว่ารูปที่อัพโหลดผ่าน model ต้องเก็บในโฟลเดอร์ media แทน static เนื่องจากเหตุผลทางความปลอดภัยบางอย่าง ดังนั้นจึงต้องทำการเพิ่มการตั้งค่าใน setting.py เล็กน้อย

    - สร้างเมธอดแก้ไขชื่อไฟล์ที่อัพโหลดเข้า model ให้เป็นชื่อของสัตว์ เพื่อง่ายต่อการเรียกใช้

    - เนื่องจาก info และ habitat เป็น TextField เมื่อแสดงผลข้อความออกมาจะได้เป็นข้อความต่อกันยาวๆ ดังนั้นจึงต่อมีการใช้คำสั่งเพื่อกำหนดรูปแบบของ TextField ในหน้า template ด้วย

    - ทำส่วนของการค้นหารายชื่อสัตว์ โดยจะรับค่าจากช่อง input ไป filter หารายชื่อออกมา

    ซึ่งตรงนี้จะต้องใช้ Q เข้ามาช่วยให้สามารถ filter ในรูปแบบของการ OR ได้ หรือก็คือ หากข้อความที่รับมาอยู่ในส่วนใดส่วนนึงของ model ของสัตว์ ก็จะนำรายชื่อของสัตว์ตัวนั้นๆออกไปแสดงด้วย

Assignment : ทำแอพ Animals รวมข้อมูลสัตว์ #2

    - ทำการตกแต่งหน้ารายชื่อสัตว์ให้มีสีสันต์ขึ้นมาหน่อย และเพิ่มปุ่มเพื่อลิงค์ไปหน้ารายชื่อหมวดอื่นๆได้

    - พยายามทำการเรียกใช้ไฟล์ text ในหน้าข้อมูลสัตว์ แต่ก็พบกับหน้า Error จึงต้องรอกลับไปแก้ไขก่อน

Assignment : ทำแอพ Animals รวมข้อมูลสัตว์ #1

    ช่วงก่อนสงกรานต์ ได้มี Assignment มาว่า ให้ทำเว็บแอพอะไรก็ได้ที่อยากทำ และเนื่องจากช่วงนั้นนั่งดูสารคดี NAT GEO WILD อยู่บ่อยๆพอดี จึงปิ๊งไอเดียตัดสินใจทำแอพรวบรวมข้อมูลสัตว์ขึ้น เพราะงั้นบทความต่อจากนี้ก็จะเป็นการอัพเดทความคืบหน้า Assignment กัน

    - สร้าง model ที่คิดว่าจะใช้ในการเก็บข้อมูลขึ้นมาก่อน ซึ่งจะประกอบไปด้วย

• thai_name ชื่อไทย
• name ชื่ออังกฤษ
• class_name ประเภทหรือชั้นของสัตว์
• order อันดับของสัตว์
• family วงศ์ของสัตว์

    - การเพิ่มข้อมูลสัตว์ในตอนนี้ต้องไปเพิ่มที่หน้า admin และต้องก็อปรูปภาพสัตว์ไปใส่ในโฟลเดอร์เอง โดยจะแยกโฟล์เดอร์เป็นไอดีของสัตว์แต่ละตัว

    - ทำการสร้างหน้าหลักๆขึ้นมาสามหน้า คือ หน้าแรก หน้ารายชื่อสัตว์ และหน้าข้อมูลของสัตว์

urls.py

template ที่ใช้

    - ในหน้าแรกนั้นจะมีปุ่มลิงค์ไปหาหน้ารายชื่อสัตว์ แบ่งเป็นหมวดหมู่ต่างๆ ซึ่งจะมีจำนวนสัตว์ในแต่ละหมวดหมู่แสดงบอกไว้ด้วย โดยจะรับค่าจำนวนสัตว์มาจาก views.py

    - หน้ารายชื่อสัตว์ที่ตอนนี้ยังขาวโพลนอยู่นั้น จะเป็นหน้าที่ลิงค์มาจากหน้าแรกโดยจะรับค่าหมวดหมู่จากปุ่มของหน้าแรกด้วย เพิ่มนำมา filter แสดงรายชื่อเฉพาะหมวดหมู่นั้นๆ

    - หน้าข้อมูลสัตว์ ในตอนนี้ยังให้มีการแสดงผลแค่รูปและข้อมูลจากโมเดลอยู่