วันพฤหัสบดีที่ 29 มิถุนายน พ.ศ. 2560

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


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

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


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

Commit 11 (583568c) - make web to beauty

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

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

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

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

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

  • เพิ่มฟังก์ชั่นนอลเทสอีกหนึ่งตัว โดยเทสนี้จะเป็นการทดสอบการดูข้อมูลสัตว์ผ่านระบบเสิร์จ
  • เพิ่ม 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 สำหรับหน้าแรก

(จริงๆแล้วควรจะเป็น 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 ได้ที่นี่)

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

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

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

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

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

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

วันพฤหัสบดีที่ 15 มิถุนายน พ.ศ. 2560

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

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




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