Ledger use case

    Use case ผมต้องยอมรับเลยว่า เมื่อตอนวันพฤหัสบดีที่ผ่านมา ที่ Sarik Kampan ได้ออกไปนำเสนอ Use case ของ app บัญชีรายรับ รายจ่ายของเขานั้น ผมลืมเรื่องนี้ไปสนิทเลย เพราะฉะนั้น ผมจึงมาทำ Use case ของ app Ledger ของผมเองมั่ง

Ledger : Use Case

1. ผู้ใช้ใส่ url เข้าหน้า app

2. ผู้ใช้ใส่รายการบันทึกในช่องที่เขียนว่า Note

3. ใส่จำนวนเงินในช่องที่เขียนว่า Money

4. เลือกว่าเป็นรายรับหรือรายจ่าย โดยการติ๊กที่ตัวเลือก

5. กด Submit

6. ผลจะปรากฏที่หน้าต่าง browser เป็นแบบตาราง

Ledger pt.1

    ต่อไปนี้การลงบล็อกผมจะไม่อธิบายโค้ดทุกส่วน แต่จะอธิบายแนวคิดและหลักการเอาแทนนะครับ เพราะคิดว่าการอธิบายบางส่วนก็ไม่จำเป็น แนวคิด และ หลักการแก้ปัญหา สำคัญกว่า

    นี้ก็เป็นหน้าตาของ web app ledger ในตอนแรก 

สิ่งที่มันสามารถทำได้ในตอนนี้ก็ได้แก่

- สามารถเพิ่มบันทึกได้ 

- สามารถปริมาณเงินได้

ก็ยังทำได้แค่นี้ สิ่งต่อไปที่จะทำก็คือ

- แยกส่วนของรายรับรายจ่าย ทั้งนี้หมายถึงจะต้องทำตารางเพิ่มให้เห็นชัด ว่าอันไหนรายรับ อันไหนรายจ่าย และ ก็ต้องคิดวิธีคำนวณเงินสุทธิ

- แก้ไขการใส่เวลา เพราะว่าตอนนี้ใส่บันทึกตอนไหนเวลาจะฟิคเป็นของตอนที่บันทึกพอดี ซึ่งตอนเด็กๆจำได้ว่าตอนคุณครูสั่งให้ทำบันทึกรายรับ รายจ่าย ผมก็จะเขียนเวลาขึ้นมาเองไม่ได้ทำตามเวลานั้นจริงๆ เพราะงั้นผมก็จะทำให้มันสามารถตั้ง ว/ด/ป เวลาเองได้ 

- ใส่ลูกน้ำตามหลัก(ซึ่งวุ่นวายมาก(สำหรับผม))

ในตอนนี้ก็มีแค่นี้ก่อนนะครับ

pythonanywhere

    ห่างหายจากการอัพบล็อคไปนาน ครั้งนี้กลับมาพร้อมกับการนำ web app ที่สร้างมาไปไว้บน cloud ของ pythonanywhere.com ทำให้สามารถ เข้า web app ได้แบบออนไลน์แล้ว โดยที่ได้ใส่ไปตอนนี้มีทั้งหมด 2 ตัว คือ polls และ ledger

polls =====>  http://beardjango.pythonanywhere.com/polls/

ledger ====> http://beardjango.pythonanywhere.com/ledger/

    ซึ่ง app polls ก็จะเป็นของ tutorial ที่ได้ลองทำ แต่ ledger จะเป็นบัญชีรายรับ รายจ่ายซึ่งเป็น assignment ที่ได้รับคะแนนโหวตจากทางห้องมา

    แต่ผมไม่ได้กลับมาแค่นี้ ตอนนี้ได้ลองใช้ git เป็นที่เรียบร้อยแล้ว ซึ่งก็เกือบจะงงๆ แต่ตอนนี้ก็ใช้งานได้แล้ว

link =====> https://bitbucket.org/thanut_suwannawong/ledger

App polls modify

     จาก week 4-2 SPN ได้บอกว่าให้ลองไปพัฒนา app polls ต่อ ให้มันสร้างคำถามได้ สร้างตัวเลือกได้ผลที่ออกมาคือ ...

สามารถเพิ่มคำถามเพิ่มได้แล้ว !!!

ในส่วนนี้ก็ใช้เรื่องของ form มาช่วย โค้ดจะมีหน้าตาดังนี้

 
    โค้ดส่วนนี้จะอยู่ข้างล่างของโค้ด index.html โดยจะมี input แบบ text โดยเมื่อใส่คำถาม แล้วกด add ก็จะไปดึง function add_question มาทำงานต่อไป ปล.ในรูุป _ มันหายไปยังไงก็ไม่ทราบ

    ใน add_question ก็มีการรับค่าของ new_question หรือก็คือค่า text ที่ผู้ใช้ใส่มา เก็บไว้ในตัวแปร text_value หลักจากนั้นก็เอาไปใส่ใน model Question โดยอิงจาก tutorial ในส่วนของการเพิ่มคำถาม แล้วก็ redirect ไปยังหน้า index อีกครั้งเหมือนเป็นการ refresh หน้าให้ update คำถาม

ต่อไปแค่เพิ่มคำถามยังไม่พอ ต้องให้มันเพิ่มตัวเลือกได้ด้วย !! หน้าตาก็ออกมาประมาณนี้

    หลักการก็คล้ายๆกับการ add คำถามเลย เพียงแต่รอบนี้จะมีเรื่องของ id คำถามมาเกี่ยวด้วยเนื่องจากคำถามแต่ละคำถามต่างก็มี choice ของตัวเอง และ แต่ละคำถามก็มี id ของตัวเองเช่นเดียวกัน

    เริ่มต้นก็จะเหมือนกับส่วนตะกี้ ก็คือใน templates ของ detail.html เราก็เพิ่ม form อีกตัว แต่อันนี้ action หลังจากกดปุ่ม submit จะเป็นการดึง function add_choice และ ใส่ question.id ต่อท้ายไปด้วย

    ใน urls.py ก็จะใส่ regex เป็นดังรูป ใส่ค่าให้กับตัวแปรชื่อ question_id เพื่อไปให้กับ function add_choice 

    มีการรับค่า new_choice ซึ่งเป็นค่า text มาจากใส่ข้อมูลลงในหน้า detail มาเก็บไว้ในตัวแปรชื่อ text_value(อีกแล้ว) หลังจากนั้นก็ เอาค่า question_id ไปใช้ในการเรียก object คำถามที่มี ID นั้นๆ แล้วก็ create choice_text ใส่ไป และ default ค่า votes = 0 แล้วก็ redirect ไปหาหน้า detail เช่นเดิม พร้อมกับส่ง args เป็น question_id ไปด้วยจะได้แสดงถูกคำถาม

    ต่อมาก็จะทำให้หน้าแสดงผลลัพธ์ หรือ result แสดงผลออกมาเป็นแบบตารางเพื่อความเป็นระเบียบเรียบร้อย ผลที่ได้คือ .....!!

    ก็จะเป็นการแสดงผลแบบ ตารางอย่างง่ายๆ

    ก็จะกำหนด style ให้กับพวก table th td ให้เป็นแบบมีเส้นสีดำทั้งหมด แล้วก็จะปรับความกว้างไปสัก 50% จะได้ไม่ขยายไปเยอะเกินไป แล้ว ก็ใช้ ลูป for วนปริ้นท์ แยกระหว่างตัวเลือก และ ผลโหวต แค่นี้ก็เสร็จแล้ว !!

Django tutorial pt.3

        ใน tutorial 3 จะเป็นการอธิบายถึงการใช้ Templates ในการแสดงผลต่างๆ ซึ่งใน tutorial ก่อนๆเราจะใช้คำสั่ง HtttpResponse() ในการแสดงผล ซึ่งในการทำเช่นน้้นก็เหมาะสำหรับการแสดงผลเล็กๆน้อย แต่ถ้าหากเราต้องการที่จะแสดงผลที่มีรายละเอียดมากยิ่งขึ้นเราก็จะมี Templates มาช่วย ซึ่ง Template ก็คือแม่แบบในการแสดงผล ซึ่งสามารถเขียนให้อยู่ในรูป HTML ได้

        ส่วนแรก tutorial จะให้เราทำในส่วนของ view.py เพิ่มเพราะว่าในตอนแรกส่วนของ view.py นั้นจะยังไม่มีอะไร เราจึงจะต้องทำ function เพิ่มโดยจะมีหน้าตาดังนี้

        โดยแต่ละ function จะเป็นการแสดงผลที่แตกต่างกัน หลังจากที่สร้าง function เสร็จก็จะไปแก้ urls.py ในไฟล์ของ project เพื่อทำการ link หรือ เรียกใช้ function เหล่านี้

        จะเห็นได้ว่ามีการใช้ regex (regular expression) ในการเปรียบเทียบค่าที่เราใส่ใน url กับ regex ที่เราตั้งไว้ โดยจะมีรายละเอียดดังนี้

index ==> ถ้าหากไม่มีอะไรต่อท้าย url ของ localhost:8000/polls จะเรียกใช้ function index เพื่อแสดงหน้าคำถามของ project '^$' ^ เป็นการกำหนดจุดเริ่มต้น และ $ เป็นการกำหนดจุดสิ้นสุด ในกรณีนี้คือเปิดแล้วปิดเลย ทำให้แสดงว่าเป็นการเว้นว่าง

detail ==> ถ้าหากหลัง localhost:8000/polls ตามด้วยตัวเลข ID ของคำถาม จะเป็นการแสดงหน้า Detail อย่างเช่น localhost:8000/polls/1 จะเป็นการแสดงรายละเอียดของคำถามข้อที่ 1 

โดย '^(?P<question_id[0-9]+)/$' หมายถึง ?P<name> เป็นการส่งค่าไปให้กับ function ที่เรียก ในที่นี้คือมีการส่งค่า question_id ไปให้กับ function detail โดย [0-9]+ หมายถึงเป็นตัวเลขได้ตั้งแต่เลข 0-9 ส่วน + คือ สามารถใส่ได้ตั้งแต่เลข 1 หลักเป็นต้นไป

result ==> ถ้าหากหลัง localhost:8000/polls ตามด้วย /ID/results/ จะแสดงผลในหน้าของ result โดย  '^(?P<question_id[0-9]+)/results/$' ส่วนของด้านหน้าได้อธิบายไปแล้ว ที่เพิ่มเติมคือด้านหลัง ถ้าหากมีคำว่า results/ ก็จะเรียกใช้ function results 

vote ==> ถ้าหากหลัง localhost:8000/polls ตามด้วย /ID/vote/ จะแสดงหน้า vote ออกมา ส่วนของ regex ก็เหมือนเดิมเพียงเปลี่ยนจาก /results/ ไปตรวจจับ /vote/ แทน

        ต่อจากนั้นจะเป็นการทดลองใช้ template กับหน้าแสดงผลของ index หรือ หน้า list คำถามนั้นเอง เริ่มจากการแก้ไขไฟล์ views.py ใน function index 

         ซึ่งเราสามารถใช้ shortcut หรือ คำสั่งลัดได้ดังนี้

        จะเห็นได้ว่าไม่มีความจำเป็นในการ import HttpResponse อีกต่อไป แล้วก็ไม่ต้องวนลูป for เพียงแต่ใช้คำสั่ง render() ซึ่งจะเป็นการเรียกใช้หน้า template ชื่อ index.html แล้วส่งค่า context หรือในที่นี้คือ ค่า object ทั้งหมดของคำถามไปใช้ในการแสดงผล

        ในการสร้างไฟล์ template นั้นจะต้องมีโฟลเดอร์เฉพาะ โดยชื่อจะต้องเป็น "templates" แล้วในโฟลเดอร์นี้ก็ต้องมีอีกโฟลเดอร์คือ "apps_name" ( ชื่อ app ที่สร้าง ในที่นี้คือ polls) 

        ในไฟล์ detail.html จะเป็นตัว template ไว้เรียกใช้งานหน้าตาของไฟล์ด้านในจะเป็นดังนี้

           เป็นการเขียนด้วยภาษา html โดย มีการใช้เงื่อนไข if เช็คค่า latest_question_list ว่ามีคำถามหรือ เปล่า ถ้าหากมีก็ใช้ for loop ในการแสดงผล แต่ถ้าหากไม่มีจะขึ้น เออเร่อ "No polls....ble"โดยเมื่อมีการใช้คำสั่งอย่าง if for จะต้องใช้ {%__%} เพิ่มเข้าไปด้วย

        เมื่อมีการใช้คำสั่ง if for ฯลฯ จะต้องมีการ end ด้วยเพื่อเป็นการปิด 

       ตัวแปร latest_question_list จะเป็นตัวแปรที่ถูกส่งค่ามาโดยตัวแปร context ในส่วนก่อนหน้านี้ในไฟล์ views.py function index

Hardcoded URLs

<li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>

        ในโค้ดด้านบนจะเห็นได้ว่าเป็นการใช้ path ในการ link ไปส่วนอื่นๆ ซึ่งมันคือ hardcoded ส่วนด้านล่างจะเป็นการใช้ ชื่อที่กำหนดให้ใน urls.py ของเราเป็นการเรียก อย่างเช่น ต้องการเรียกหน้า detail ก็สามารถใช้ชื่อ 'detail' ได้เลยมีประโยชน์ในเรื่องการแก้ไข urls ซึ่งเวลาแก้จะได้ไม่ต้องมานั่งแก้ในไฟล์ template แก้แค่ในไฟล์ urls.py ทีเดียวเลย

<li><a href="{% url 'detail' question.id %}">{{ question.question_text }}</a></li>

Namespacing URL names

        ในการทำงานจริงๆ 1 Project อาจจะมีหลาย app ทำให้อาจเกิดปัญหาการตั้งชื่อ url ซ้ำกันได้เราจึงต้องกำหนดชื่อให้กับ app ติดไปให้กับ urls เผื่อการเรียกใช้งานด้วย

Django Tutorial pt.2

reference : https://docs.djangoproject.com/en/1.10/intro/tutorial02/

        ในส่วนบทที่ 2 จะเน้นเรื่องการสร้างฐานข้อมูล การสร้างคำถาม ตัวเลือก การตอบสนองของหน้าเว็บเพจ และ การตั้งค่า admin

        ในไฟล์ models.py ของ app polls จะเพิ่ม class Question,Choice โดยจะสืบทอด models.Model มาอีกที 

        โดยหลังจากนั้นก็จะไปเพิ่ม ส่วนของ setting.py เพื่อให้รู้ว่ามี app ตัวใหม่ชื่อ polls มาเพิ่มเติมอีกตัวหนึ่ง

        หลังจากที่มีการเปลี่ยนแปลงของไฟล์ที่เป็น model จะต้องใช้คำสั่ง 

    - python3 manage.py makemigrations

    - python3 manage.py migrate

        เพื่อเป็นการ apply การเปลี่ยนแปลงลงไปยัง Database โดยจะทำการตรวจสอบจากส่วน INSTALLED_APPS ถ้ามีเพิ่มเติมจะต้องทำ Migration ทุกๆครั้ง

Playing with API

        เป็นการสร้าง objects ให้กับทั้งส่วนของคำถาม และ ตัวเลือก (Question, Choice) โดยจะทำผ่าน shell วิธีการเปิด shell ก็ใช้คำสั่ง python3 manage.py shell

โดยอันดันแรกจะต้องทำการ import class ทั้งสองตัวก่อนซึ่งก็คือ Question, Choice ใช้คำสั่ง

    - from polls.models import Question, Choice

หลังจากนั้น ก็ต้อง import timezone เข้ามาด้วยเพื่อใช้ในการใส่ค่าให้กับทาง pub_date หรือ วันที่ตั้งกระทู้คำถาม

    - from django.utils import timezone

หากต้องการสร้างคำถามจะต้องใช้คำสั่งดังนี้

    - q = Question(question_text="What's your name?", pub_date=timezone.now())

จะเป็นการตั้งคำถามว่า What's your name? ซึ่งสามารถเช็คดูได้ว่ามีคำถามทั้งหมดกี่คำถามโดยใช้คำสั่ง Question.objects.all()

    การสร้างตัวเลือก หรือ Choice จะต้องทำการเก็บไอดีของคำถามก่อนเพราะว่าแต่ละ คำถามจะมีตัวเลือกไม่เหมือนกัน โดยวิธีการเก็บไอดีคือ

    - q = Question.objects.get(pk=?) 

โดย pk (Primary Key) จะเป็นไอดีเมื่อ get pk มาแล้วก็จะสามารถสร้าง Choice ตามคำถามได้

    - q.choice_set.all() เป็นการดูว่าchoice ทั้งหมดของคำถามนี้มีอะไรบ้าง

    - q.choice_set.create(choice_text="John", votes=0) ก็คือตัวเลือกชื่อ John ค่า votes = 0

นอกจากนี้ยังมีคำสั่งอื่นๆอีก ให้ลองดูตามนี้ กดสิกด!

การสร้าง admin

    ใช้คำสั่ง python3 manage.py createsuperuser

หลังจากนั้นก็ใส่ username , email และ password ลงไปซึ่งจะใช้ในการเข้าหน้า admin ของเว็บไซต์ของเราซึ่ง Django ได้มีหน้า admin แบบสำเร็จรูปอยู่แล้วมีหน้าตาแบบนี้ โดยวิธีการเข้าก็คือ localhost:8000/admin

    ในหน้า admin จะเป็นส่วนที่จัดการสิ่งต่างๆใน project นี้ โดยสามารถสร้างคำถาม ในนี้ได้ ตั้งค่ารหัสผ่านก็ได้ แล้วยังตั้งไอดีเพิ่มได้อีกด้วย

Django Tutorial pt.1

    จาก link ที่ อ.SPN แปะไว้ในบล็อกจะมีสองบท 1 กับ 2 โดยบท 1 จะมีรายละเอียดดังนี้

Creating Project
 
    django-admin startproject mysite ใช้คำสั่งนี้ในการสร้างโปรเจคท์ใหม่ของ Django โดย
mysite จะเป็นชื่อของตัวโปรเจคท์

    โดยในโฟล์เดอร์โปรเจคท์งานจะมีไฟล์ต่างๆที่มีคุุณสมบัติต่างกันประมาณนี้

    จากรูปด้านบน เนื่องจากภาษาอังกฤษของผมนั้นไม่ค่อยแข็งแรงเลยอาจจะแปลผิดๆถูกๆมั้ง แต่ก็ไม่น่าจะผิดเพี้ยนเกินไปเลยสรุปได้ดังนี้

    - โฟล์เดอร์ mysite ตัวนอกสุดจะเป็นเพียงที่เก็บโปรเจคท์เท่านั้นเราสามารถเปลี่ยนชื่อเป็นอะไรก็ได้

    - ไฟล์ manage.py เป็นไฟล์ cmd ที่จะทำให้เราใช้งาน django ได้ในหลายๆทาง

   

    - ไฟล์ mysite ตัวในจะเป็นโฟลเดอร์ที่เป็น python package ของจริง โดยจะชื่อของตัวนี้จะเป็นสิ่งที่จำเป็นในการ import สิ่งต่างๆ

    - ไฟล์ mysite/__init__.py เป็นไฟล์เปล่าๆที่ใช้ในการระบุกับตัว Python ว่าโฟลเดอร์นี้เป็น Python package 

    - ไฟล์ mysite/setting.py เป็นไฟล์ไว้สำหรับการตั้งค่าตัวโปรเจคท์ Django

    - ไฟล์ mysite/urls.py เป็นไฟล์ที่ใช้ประกาศ url ที่ใช้ในสำหรับโปรเจคท์นั้นๆ

    - ไฟล์ mysite/wsgi.py ยังไม่ทราบถ้าทราบเดียวจะมาอัพเดทอีกที

การรัน Server 

    ใน django ถ้าหากต้องการรัน server จะใช้คำสั่ง pyhon3 manage.py runserver ซึ่งใน tutorial จะบอกว่าเราสามารถที่จะ set ip และ port ได้ด้วยช่างสุดยอดจริงๆ โดยผมจะลองเปิดธรรมดาๆ ผลก็จะเป็นดังนี้ครับ

และเมื่อเข้าผ่านทาง web browser จะได้ดังนี้ (ip and port are default)

การสร้าง app

    ในโปรเจคท์ django เราสามารถจะสร้าง app เพื่อให้มีการแสดงผลได้ โดยใน 1 Project สามารถสร้างได้หลายๆ app ซึ่งวิธีการสร้างก็จะใช้คำสั่ง python3 manage.py startapp (app's name) ซึ่งในที่นี้จะขอใช้ชื่อ app ว่า polls 

  

    

เมื่อรันคำสั่งเสร็จแล้วจะได้โฟลเดอร์เพิ่มมาอีกโฟลเดอร์หนึ่ง

โดยในโฟลเดอร์จะมีลักษณะสถาปัตยกรรมการเขียนแบบ MCV

Write first view

     ใน tutorial จะให้ทดลองใส่คำสั่งเพื่อที่จะให้มีการแสดงผล โดยจะให้แก้ในไฟล์ views.py ในโฟลเดอร์ polls

คำสั่งด้านบนเป็นการสร้าง method และ return ประโยคกลับมาเมื่อเข้าหน้าเว็บ

    หลังจากนั้นจะต้องมีการ map ไปยัง url ของตัว project โดยเราจะต้องสร้างไฟล์ urls.py ในโฟลเดอร์ app ของเรา

    หลังจากนั้นก็เข้าไปแก้ไขในไฟล์ urls.py ของตัว project

จะเห็นได้ว่ามีการใช้ RegEx ต่างๆในการระบุ url

และมีการใช้ function include() เพื่ออ้างอิงไปยังไฟล์ polls.urls ที่สร้างไว้เมื่อกี้

อ่านเพิ่มเติมเกี่ยวกับ RegEx

    หลังจากนั้นก็เปิด server แล้วลองเข้า url => localhost:8000/polls

ผลที่ได้จากการทดลอง

Note

    

    url()argument: 

        - regex จากรูปด้านล่างจะใช้ '^polls/'  ^ จะเป็นการขึ้นไลน์ใหม่ โดย URLConf จะค้นหาแค่คำว่า polls/  จากรูปด้านบน '^$' ที่เป็นอย่างนี้ก็เพราะคิดว่าไม่มีการให้ลิงค์ไปที่ url ตัวใด (คิดว่าอย่างนั้น)

        - views เป็นการเรียกใช้ method ที่จะต้องการจะให้ทำงาน

        - kwargs อันนี้ขอข้ามเนื่องจากทาง tutorial ก็บอกว่าให้ข้ามไปเลย

        - name เป็นการกำหนดชื่อเพื่อใช้ในการแก้ไข url ได้สะดวก และ รวดเร็ว

credit => https://docs.djangoproject.com/en/1.10/intro/tutorial01/