Part 1: Review by following Django docs

Django doc

link : https://docs.djangoproject.com/en/dev/ (devlopment version)

 Start with " First steps " (intro)
Tutorial : Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Review by following Django docs

Tutorial : Part 1

link : https://bitbucket.org/5311565070/w4_1/commits/5edb7e348b596d6e98ec82712f75c446cdb5a373
       ใน part 1 จะเริ่มต้นด้วยการสร้าง app polls นะครับ 
       โดยใช้คำสั่ง python manage.py startapp polls เมื่อเราสร้างขึ้นมาแล้ว ก็จะได้ folder app ขึ้นมาที่ชื่อว่า polls ซึ่งภายใน polls ก็จะประกอบไปด้วย 4 ไฟล์ด้วยกัน ก็จะมี 
          - __init__.py
          - models.py
          - tests.py
          - views.py
       หลังจากนั้นเราต้องไปแก้ไขในส่วนของ settings.py ในส่วนของ INSTALLED_APPS โดยการเพิ่มชื่อ app ที่เราสร้างขึ้นใหม่ทุกครั้ง ( 'polls', )

link : https://bitbucket.org/5311565070/w4_1/commits/2993f812dae466c1d84bc76b4dc9cddb5b36f3da
       ต่อมาก็จะเป็นการสร้าง class ในไฟล์ polls/models.py เพื่อไว้สำหรับเก็บค่าของตัวแปร ใน commit นี้จะเป็นการเขียนโปรแกรมบนหน้าของ terminal เลย โดยใช้คำสั่ง python manage.py shell ซึ่งเป็นการเขียนโปรแกรมผ่านคำสั่ง shell เมื่อเขียนแล้วมันจะแสดงผลออกมาเลยทางหน้าของ terminal เลย โดยที่ไม่ต้องมีการ runserver ในที่นี้จะเขียนโปรแกรมเพื่อป้อนข้อมูลให้กับตัวแปร
 

Tutorial : Part 2

link : https://bitbucket.org/5311565070/w4_1/commits/db77fd1e045f41df73fe15eddb1964848c4e3583
       ใน part 2 จะเป็นการเรียกใช้หน้า admin site เพราะทาง django เค้ามีให้อยู่แล้ว เพียงแค่เราไปเรียกใช้มันอีกที และจะเป็นการเข้าไปตั้งค่าเพื่อที่จะสามารถเข้าไปใช้ admin site ได้ ก่อนที่จะเข้าหน้า admin นี้ก็จะมีการ login เพื่อเข้าสู่ระบบ โดยเราต้องทำการสมัครก่อน สมัครในที่นี้เป็นแค่การจำลอง user เพื่อใช้ในการเข้าระบบของ admin เท่านั้น โดยใช้คำสั่ง manage.py createsuperuser เมื่อเรา login แล้วก็จะพบว่ามีลิงค์ให้คลิกที่ชื่อว่า polls ซึ่ง polls นี้จะมาจากการสร้างจาก part 1 

       ใน commit นี้ จะมีการปรับเปลี่ยนรูปแบบในหน้าของ admin site โดยจะมีการเข้าไปแก้ไขในส่วนของไฟล์ admin.py จะทำให้เราสามารถดู history ได้ว่ามีการเปลี่ยนแปลงอะไรบ้างในการเข้าไปใช้ admin site ในแต่ละครั้ง

       ข้อดีของ admin site ก็คือ เราไม่ต้องไปสร้าง template เพื่อมารับข้อมูลจาก user ให้ยุ่งยาก เพราะ admin มีความสะดวกในการใช้งาน เราสามารถเพิ่มข้อมูลได้ตามต้องการ หรือจะเป็นการเข้าไปแก้ไขข้อมูล หรือแม้แต่จะลบข้อมูลใน admin ก็สามารถทำได้

 Tutorial : Part 3
link : https://bitbucket.org/5311565070/w4_1/commits/13ecbecea3972f189f65100ab8ed390986d3aab2
       ใน part 3 จะเป็นการนำข้อมูลจากในหน้าของ admin มาโชว์ในรูปแบบของไฟล์ template โดยใช้ภาษา HTML และจะมีการสร้างไฟล์ urls.py ขึ้นมาใหม่ให้กับ polls และรายละเอียดอื่นๆอีกมากมาย

Tutorial : Part 4

link : https://bitbucket.org/5311565070/w4_1/commits/d583e2772a4e507334098cae1bc8ff86f45f1a6f
       ใน part 4 จะเป็นการแก้ไขรูปแบบการโชว์ข้อมูล ( แก้ไขไฟล์ template ) และมีการปรับเปลี่ยนรูปแบบการเรียกข้อมูลขึ้นหน้า web page ( ในไฟล์ polls/urls.py )

Tutorial : Part 5

link : https://bitbucket.org/5311565070/w4_1/commits/d9ea09c129d70a53122ff58537cf596d4ebd5151
       ใน part 5 จะเป็นการแก้ไขไฟล์ tests.py เมื่อเราแก้ไขเสร็จแล้วต้องมีการเช็ค error ด้วยการใช้คำสั่ง python manage.py test polls ( เป็นการ running tests )

CSS Style and JavaScript Style

using CSS Style

link : https://bitbucket.org/5311565070/w4_1/commits/0e2e676c040b33efe6866d388854f4a0ff0b9300
       ใน commit เป็นการใช้ CSS ( Cascading Style Sheets ) ซึ่ง CSS จะทำงานร่วมกับ HTML โดย CSS นี้จะสามารถกำหนดการแสดงผลทาง web page อย่างพวก สีตัวอักษร สีพื้นหลัง ขนาดตัวอักษร เป็นต้น

using JavaScript Style

link : https://bitbucket.org/5311565070/w4_1/commits/0c35cde86eaa76295aad1d3e3a6abaf37224f647

 

       ใน commit เป็นการใช้ JavaScript เข้ามาทำงานร่วมกับ HTML ผมได้ใช้ JavaScript ในการสร้างหน้าต่าง หรือประมาณว่าเป็น bok message ( ผมก็ไม่รู้เหมือนกันเค้าเรียกกันว่าอะไร ) ดังรูปข้างต้น คือ ก่อนที่จะมายังหน้านี้ จะมีการคลิกปุ่ม delete Expenses เมื่อคลิกเเล้วก็จะมายังหน้าดังรูปที่เห็น เเล้วจะมี bok message ขึ้นมาถามว่า Are you sure to delete data (Expenses) ? ก็ให้คลิกที่ปุ่ม OK เพื่อที่จะทำการเข้าไปเลือกรายการที่เราจะต้องการลบได้

Draw Graph ( barChart , lineChart , pieChart )

     สร้างกราฟเพื่อเปรียบเทียบรายจ่ายของแต่ละชนิดใน 1 วัน โดยรายจ่ายจะแบ่งออกเป็น 4 ชนิด คือ Foods (อาหาร) , Drinks (เครื่องดื่ม) , Fare (ค่าเดินทาง) และ Other (อื่นๆ)

commit : Bar Chart

link : https://bitbucket.org/5311565070/w4_1/commits/28bf99d78e0e0bb96338fe970dfd0e5d130cac63
       ใน commit เป็นการส้รางกราฟแท่ง โดยใช้ SVG โดยข้อมูลที่ใช้ในการสร้าง bar chart นั้นจะใช้ข้อมูลจำนวนค่าใช้จ่าย (amount) - อยู่ในแกน x และชนิดของรายจ่าย (type expenses) - อยู่ในแกน y 

commit : Line Chart

link : https://bitbucket.org/5311565070/w4_1/commits/cd8c4c0b1b6a1bef6750924b3dc2fa317b972165
       ใน commit เป็นการส้รางกราฟเส้น โดยใช้ SVG โดยข้อมูลที่ใช้ในการสร้าง line chart นั้นจะใช้ข้อมูลจำนวนค่าใช้จ่าย (amount) - อยู่ในแกน x และชนิดของรายจ่าย (type expenses) - อยู่ในแกน y ค่าที่ใช้ผมใช้จะเป็นค่าเดียวกันกับ bar chart

commit : Pie Chart

link : https://bitbucket.org/5311565070/w4_1/commits/392b8cbab00d5e85f1145e4db29146bfad71d1de
       ใน commit เป็นการส้รางกราฟแบบวงกลมหรือพาย มีหน้าตาคล้ายๆกับการตัดแบ่งเค้กออกเป็นส่วนๆ ในการสร้างกราฟนี้จะสร้างโดยใช้ SVG ในการสร้าง โดยข้อมูลที่ใช้ในการสร้าง pie chart นั้นจะใช้ข้อมูลจำนวนค่าใช้จ่าย (amount) ของแต่ละชนิดมาคำนวณหาเปอร์เซนตของรายจ่ายใน 1 วัน โดยในส่วนของกราฟชนิดนี้จะแบ่งให้เห็นถึงความแตกต่างของปริมาณการใช้จ่ายใน 1 วัน ได้อย่างชัดเจนที่สุดในบรรดา 2 กราฟข้างต้น

 

Budget

Vertion 1 : start app budget
link : https://bitbucket.org/5311565070/w4_1/commits/591b6d39c63b90aeb13403f0f437941b1e4cc572

       ใน commit นี้เป็นการสร้าง app budget โดยใช้คำสั่ง python manage.py startapp budget ในที่นี้ budget คือชื่อ app ที่เราต้องการที่จะสร้างขึ้นมา ซึ่ง app ที่เราสร้างขึ้นมา ก็จะประกอบไปด้วยไฟล์ 4 ไฟล์ ด้วยกัน คือ

     1.) __init__.py

     2.) models.py

     3.) tests.py

     4.) views.py

Vertion 2 : create template ( homepage and inputform )
- create homepage
link : https://bitbucket.org/5311565070/w4_1/commits/3d2781d15f7095c785059cc8626b7de84d4f201c
- create inputform
link : https://bitbucket.org/5311565070/w4_1/commits/64bfc56e37af3559894365c3768268912005b3b9
     ใน commit นี้เป็นการสร้าง template โดยใช้รูปแบบคำสั่งภาษา HTML ในการสร้าง


Vertion 3 : create template ( show form ) and add simple info
link : https://bitbucket.org/5311565070/w4_1/commits/3b4e160b587da5d5b2fcba4d4b82a4877a2f0106
     ใน commit นี้เป็นการสร้าง template โดยใช้รูปแบบคำสั่งภาษา HTML ในการสร้าง และมีการป้อนข้อมูลลงใน inputform ตามที่เราออกแบบ หลังจากนั้นก็จะส่งค่าไปเก็บไว้ใน database โดยมีการสร้างฟังก์ชันเป็นตัวเช็คข้อมูลเพื่อเก็บค่าและฟังก์ชันเพื่อใช้ในการส่งข้อมูล เพื่อแสดงผลทาง template (show form) ซึ่งฟังก์ชันที่สร้างขึ้นมานั้นจะอยู่ในไฟล์ views.py (อยู่ใน folder budget) และจะมีการสร้าง class เพื่อมาเก็บค่า (ข้อมูลที่ถูกป้อน)

Update : STEP 3 (click link down)
link : https://bitbucket.org/5311565070/w4_1/commits/bdbe6721a0f43219cb3ace9e7c7e53fce5a406fc


Vertion 4 : delete data
link : https://bitbucket.org/5311565070/w4_1/commits/2489495bf7765cc2cc1f289f659726b70dfd4beb
     ใน commit นี้เป็นการสร้างฟังก์ชันเพื่อมาลบข้อมูลใน database ในการ delete สามารถเลือกข้อมูลที่ต้องการจะลบได้ การเลือกข้อมูลที่จะลบนั้น สามารถเลือกได้โดยผ่าน inputform ตามที่ออกแบบมา


Vertion 5 : pep8 code
ไฟล์ models.py 
link : https://bitbucket.org/5311565070/w4_1/commits/cbb37fb6666ede917b7806fe7d6f2291
ไฟล์ views.py ( ดูแค่ในส่วนของไฟล์ views.py นะครับ เพราะผมไป commit รวมกับอย่างอื่น )
link : https://bitbucket.org/5311565070/w4_1/commits/0e2e676c040b33efe6866d388854f4a0ff0b9300
     ใน commit นี้เป็น pep8 โค้ด ซึ่งการ pep8 นั้นเป็นการจัดรูปแบบของโค้ดให้มีความสวยงาม จะจัดพวกย่อหน้าของโค้ดแต่ละบบรรทัด หรือเเม้กระทั่งการเว้นบบรรทัดของโค้ดแต่ละชุด
     วิธีการ pep8 code มีอยู่ 2 แบบ คือ
     1.) เมื่อ pep8 ไปแล้ว เราจะต้องเป็นคนมาแก้ไขส่วนตรงที่มันบอก error ด้วยตัวเอง
ขั้นตอนที่ 1 : sudo apt-get install python-setuptool
ขั้นตอนที่ 2 : sudo easy_install pip && sudo pip install dotcloud 
ขั้นตอนที่ 3 : sudo pip install pep8
ขั้นตอนที่ 4 : ทำการ pep8 code โดย pep8 views.py 
         ( views.py คือชื่อไฟล์ที่เราต้องการจะ pep8 )
     2.) เป็นแบบ autopep8 คือ การทำงานแบบอัตโนมัติให้เลย ( ผมใช้วิธีนี้ครับ ) แต่วิธีนี้มีข้อเสียเหมือนกัน บางที autopep8 ไปเเล้วยังมีโค้ดบางส่วน error เราก็ต้องใช้วิธีที่ 1 ในการ pep8 ใหม่อีกครั้ง
ขั้นตอนที่ 1 : เลือกลงตัวใดตัวหนึ่งระหว่าง 
         - sudo install --upgrade autopep8 ( ผมใช้ตัวนี้ ) 
         - easy_install -ZU autopep8
ขั้นตอนที่ 2 : ทำการ pep8 code โดย autopep8 -i views.py 
         ( views.py คือชื่อไฟล์ที่เราต้องการจะ pep8 )

Reviews code ( Gang 5 Students )

List of students ( Gang 5 Students )

      1.) ธวัชชัย
      2.) ปิยวัช
      3.) ศศิธร
      4.) จิรวัฒน์
      5.) ชาญศักดิ์

Reviews code : ปิยวัช

Commits : [ b4ee4c3 ] add/show/clear data

link : https://bitbucket.org/piyawat/w4-1/commits/b4ee4c35f1c0a28e2f21190f5911ea35173d4319

     ในไฟล์ views.py  การจัดย่อหน้าของ code มีบางบรรทัดยังไม่ตรงกัน ทำให้ code ดูไม่มีความสวยงาม บางครั้งอาจทำให้ยากต่อการดู แล้วก็มีการตั้งชื่อให้กับฟังก์ชั่นที่ยาวเกินไป ควรตั้งแบบสั้นๆ แต่ต้องตั้งให้สอดคล้องกับฟังก์ชั่นภายในที่สร้าง เพราะถ้าชื่อมีความยาวจนเกินไป อาจจะทำให้เกิดความผิดพลาดได้ในการพิมพ์โค้ด เพื่อเรียกใช้ฟังก์ชั่นนั้นมาใช้

     ในไฟล์ urls.py ผมชอบการเข้าถึง urls

Reviews code : ศศิธร

Commits : [  bdb29f4 ] process input from

link : https://bitbucket.org/sporntip/w4_1-edit/commits/bdb29f40e92f2923888ee6ded22bd48ad5148fdf

     มีการลืมใส่เครื่องหมาย ดอลล่า ( $ ) มีหน้าที่ให้รู้ว่า เป็นตัวหยุด ประมาณว่าให้รู้ว่าเป็นการสิ้นสุดของการป้อน urls และการตั้งชื่อตัวแปร บางตัวมีการย่อตัวอักษร ( เขียนแบบย่อ ) อาจดูไม่มีความหมาย

Reviews code : จิรวัฒน์

Commits : [  2872457 ] ver 8 8 complate 

link : https://bitbucket.org/pondzacoct/w4-1/commits/28724577dcf84f2ec544e144a9680572e3ec0331
    การตั้งชื่อ commit มันยังดูไม่มีความหมายเท่าไร 

     ในการ commit ยังมีไฟล์ที่เป็น .py~ และ .html~ ( ควรทำการลบก่อนที่จะมีการ commit หรือตอนการ add ไฟล์ ควรเลือกไฟล์มา ไม่ควรที่จะ add มาหมดทั้งโฟรเดอร์ ) 

    การตั้งชื่อตัวแปร ควรตั้งชื่อ ขึ้นต้นด้วยตัวพิมพ์เล็ก มันจะดีกว่า

Reviews code : ชาญศักดิ์

Commits : [  73eca4c ] update homepage & template

link : https://bitbucket.org/ckornchaivorakul/w4_1/commits/73eca4c6af527b2a5f0cacf6288f04c8398542e2

     ในการ commit ยังมีไฟล์ที่เป็น .html~ 

10 Commit on Bitbucket

Commit 1 : start project

link : https://bitbucket.org/5311565070/w4_1/commits/e57c430a7f43e0a5d9f3d365424626ef0a2f5428

    เป็นการสร้าง project โดยผมจะใช้ชื่อ project ว่า w2
   โดยใช้คำสั่งว่า django-admin.py startproject w2 ก็จะได้ project ที่ชื่อว่า w2 ขึ้นมา ซึ่งภายใน project w2 นี้จะประกอบไปด้วย 2 ส่วน คือ 

    1.) ไฟล์ manage.py 

    2.) โฟลเดอร์ w2 ซึ่งภายในโฟลเดอร์ w2 ประกอบไปด้วย 4 ไฟล์ คือ
        - __init__.py

        - settings.py

        - urls.py

        - wsgi.py

Commit 2 : dynamic url

link : https://bitbucket.org/5311565070/w4_1/commits/c1e693f5bec2e01912623c5205ea8e0046d0fb1f

   เป็นการสร้าง function ที่ไว้ใช้แสดงข้อความตามจำนวนที่ต้องการ โดยวิธีการป้อนตัวเลขที่เป็นจำนวนเต็มต่อท้าย url ซึ่งในการสร้าง function นี้ ผมจะใช้ชื่อว่า hi รูปแบบในการเข้าถึง function hi นี้ คือ http:// ... /Hi/3 ซึ่งเลข 3 ในที่นี้จะเป็นตัวบอกจำนวนข้อความที่จะโชว์ เมื่อเราป้อนเลข 3 ไปข้อความที่ปรากฎก็จะเป็น Sawadee, Sawadee, Sawadee, welcome to my homepage ก็จะปรากฎ Sawadee, จำนวน 3 ครั้งตามจำนวนเต็มที่เราป้อน

Commit 3 : start app

link : https://bitbucket.org/5311565070/w4_1/commits/f69d9ccb9fd04b0d928e2177a14136dabe38eb78

    เป็นการสร้าง app โดยผมจะใช้ชื่อ app ว่า vegetable 

   โดยใช้คำสั่งว่า python manage.py startapp vegetable ก็จะได้โฟลเดอร์ app vegetable ขึ้นมา ซึ่งภายในจะประกอบไปด้วย 4 ไฟล์ คือ

   - __init__.py

   - models.py

   - tests.py

   - views.py

Commit 4 : add/show simple vegetable info

link : https://bitbucket.org/5311565070/w4_1/commits/46954890504dbab13f8e5501cec75f111e2156bd

    เป็นการสร้าง function 2 function คือ

    - function แรก ( function add ) เป็นการสร้าง function เพื่อรับข้อความหรือการ add ชื่อผัก เข้ามาเก็บไว้ใน class Vegetable

    - function ที่สอง ( function show ) เป็นการสร้าง function เพื่อโชว์ข้อความที่รับมาจาก function แรก

    สำหรับรูปแบบการเข้าถึง 2 function นี้ คือ

       - function add >> http:// ... /add/carrot/ ( ... /add/ตามด้วยชื่อผักที่เราต้องการเพิ่ม/ )

       - function show >> http:// ... /show/

Commit 5 : convert list to HTML

link : https://bitbucket.org/5311565070/w4_1/commits/695d616ca528822b5d0e20d5c2d709f5cfea8a9d

    เป็นสร้าง function ที่ไว้แสดงรูปแบบของข้อความที่รับ add เข้ามา ให้อยู่ในรูปแบบของภาษา HTML เป็น list อย่างเช่นเรา add ( carrot , onion , corn ) เข้ามาแล้ว เมื่อเข้า function นี้ รูปแบบที่จะแสดงออกทางหน้าจอก็จะเป็น

• carrot
• onion
• corn
  

  

Commit 6 : add/use template show_vegetable.html

link : https://bitbucket.org/5311565070/w4_1/commits/fa8e80700fe30f1d8a874ee9e8237f50f94256a3

    เป็นการสร้างไฟล์ template โดยใช้ภาษา HTML มาใช้ในการจัด format ของข้อความที่เราต้องการแสดง ให้อยู่ในรูปแบบตามความต้องการของเรา

Commit 7 : change format list to HTML

link : https://bitbucket.org/5311565070/w4_1/commits/3142e168c95ce532dc314ff008618cabb575dabb

    เป็นการเปลี่ยนรูปแบบ list ในการโชว์ของข้อความ โดยเปลี่ยนจาก <ul> ... </ul>

• carrot
• onion
• corn 

ให้อยู่ในรูปแบบของตัวเลข <ol> ... </ol>

1. carrot
2. onion
3. corn

Commit 8 : use shortcut render_to_response()

link : https://bitbucket.org/5311565070/w4_1/commits/de7cedd1219f85a61c87d3ea19e02e710f894fef

    เป็นการใช้ render_to_response() ในการดึงข้อมูลในไฟล์ .html มาใช้ได้โดยตรง โดยแทนการใช้แบบ HttpResponse ซึ่งจะสามารถลดความยาวบรรทัดของโค้ดเราได้เป็นอย่างมาก

Commit 9 : add template input_form.html and 

                   display input form only

link : https://bitbucket.org/5311565070/w4_1/commits/36dacd46560a191e9a7bd30ddfc88a9172e3f8db

    เป็นการสร้าง template ในรูปแบบของภาษา HTML ซึ่งใน commit นี้เป็นการสร้าง format ไว้สำหรับการรับค่า โดยวิธีการป้อนข้อมูลลงในช่องข้อความ ( ช่องสำหรับพิมพ์ข้อมูล ) ที่ถูกดึง format มาจากไฟล์ input_form.html หลังจากนั้นก็จะมีการ import RequestContext ขึ้นมา เพื่อใช้ในการรับข้อมูลที่ถูกพิมพ์ไว้

Commit 10 : delete string and delete all (vegetable)

link : https://bitbucket.org/5311565070/w4_1/commits/622f2ff4f6293fe79ff8de78d57936ed0936b6f0

    เป็นการสร้าง function 2 function มาเพื่อเอาไว้ลบข้อมูลใน vegetable
    - function แรก ( function deleteStr ) เป็น function ที่เอาไว้ลบคำตามที่เราต้องการ เราสามรถระบุคำได้ ว่าเราต้องการลบคำใดที่มีอยู่ใน vegetable แต่เราสามารถลบได้เพียงทีละหนึ่งคำเท่านั้น

    - function ที่สอง ( function deleteAll ) เป็น function ที่เอาไว้ลบข้อมูลทั้งหมดที่มีอยู่ใน vegetable

    สำหรับรูปแบบการเข้าถึง 2 function นี้ คือ

       - function deleteStr >> http:// ... /delete/carrot/ ( ... /delet/ตามด้วยชื่อผักที่เราต้องการจะลบ/ )

       - function deleteAll >> http:// ... /deleteAll/