วันอาทิตย์ที่ 29 มกราคม พ.ศ. 2560

Building Software II : Django tutorial 4

จาก Tutorial 4 ของ Django นั้น จะมี อยู่ 2 หัวข้อใหญ่ๆ
( เนื้อหา ส่วนใหญ่ อยู่ใน slide วันที่ 30/1/2560)

1 การทำ หน้าโหวดคะแนน ให้กับ ตัวเลือกในแต่ละคำถาม การแสดง ผลออกในหน้า detail result นั้นเอง ส่วน vote นั้นจะเป็นการทำงานที่ไม่แสดงออกมาเป็นหน้าจอ แต่เป็นส่วนตัดสินใจว่าจะให้ทำยังไงต่อไป

เมื่อ ทำตาม จะได้ผลลัพ ประมาณนี้ คือ

เมื่อคลิกเข้าไปในแต่ละคำถามก็จะพบ กับ หัวข้อคำถามและตัวเลือก มาให้เลือก

จากนั้นเมื่อทำการกดโหวด ในตัวเลือกที่ต้องการแล้วจะขึ้นหน้าผลลัพธ์

ซึ่อต่อไป

2 เป็นเรื่องของ generic views เนื่องจาก คำสั่ง ดึงค่าข้อมูล และการ บันทึกขึ้นมูล การอ่าน template และการ แสดง ผล render template เป็นเรื่องที่ทำบ่อย Django จึงได้ ทำ shortcut ชื่อว่า Generic system ขึ้นมา
     - Less code is better
โดยที่ ผลลัพธ์หลังจากการ ทำตาม ในหัวข้อนี้เสร็จแล้ว ผลลัพธ์ที่ได้จะเหมือนกับหัวข้อที่ 1 แต่โค้ดด้านในจะไม่เหมือนกัน
ซึ่งเมื่อเราทำส่วนนี้เสร็จ เราจะสามารถ แก้ไขชื่อตัวแปร ที่ส่งให้กับ template ได้ง่ายขึ้น (ทำให้มันเข้ากันได้ง่าย)
ซึ่ง generic มัน สามารถกำหนด ว่ามันจะใช้ กับ model ตัวไหน กำหนดชื่อตัวแปรที่จะส่งค่าไป กำหนดว่าจะใช้ template ตัวไหน เป็นต้น ทำให้เราสามารถแก้ไข path หรือ ตัวแปรที่จะส่ง หรือ model ที่จะใช้งานได้ง่ายขึ้น

เนื้อหาเพิ่มเติม : https://drive.google.com/file/d/0B7asHdbzNieldFA1M1BzTk5ERDQ/view?usp=sharing

ฺBuilding Software II : Slide 30 / 1 / 2560

https://drive.google.com/file/d/0B7asHdbzNieldFA1M1BzTk5ERDQ/view?usp=sharing

วันอาทิตย์ที่ 22 มกราคม พ.ศ. 2560

Building Software II : สิ่งที่ได้ทำ 19-23/1/2560

สิ่งที่ได้ไปทำในช่วง วันที่ 19 - 23 /1/2560 คือ
    - ได้ไปลง Django ใน Ubunto
    - ศึกษา Tutorial 1 - 2 ของ Django ในเว็ป https://docs.djangoproject.com/en/1.10/intro/tutorial01/ และ https://docs.djangoproject.com/en/1.10/intro/tutorial02/
    ซึ่งเนื้อหา ของบทที่ 1 จะเป็นการสร้าง โปรเจค Django และ อธิบายไฟล์ต่างๆในโปรเจค รวมถึงการ ทำ webapp คร่าวๆ
    ส่วนในส่วนที่ 2 จะเป็น การอธิบายการทำฐานข้อมูลคร่าวๆ ซึ่ง เนื้อหามีเยอะมากยิบย่อย ซึ่งก็ยังไม่ได้เข้าใจทั้งหมด แต่พอจะเข้าใจคร่าวๆว่ามันมีอะไรบ้าง ทำอะไรได้
    - ศึกษา จาก youtube อีกทางนึง https://www.youtube.com/watch?v=qgGIqRFvFFk เป็นชาแนลที่ทำเพื่อแนะนำการใช้งาน Django ซึ่งมี 40 part ตอนนี้ ดูไปจนถึง part 18 ซึ่งเนื้อหาก็จะคล้ายๆกับ ในเว็ปของ Django เลย
   
..........................................................................................................................
สิ่งที่ได้ลองไปเช่น
การสร้างโปรเจค Django โดยเข้า Directory ที่ต้องการก่อน จากนั้น พิม
- django-admin startproject [name of project]
ในส่วนชื่อของโปรเจคนั้นจะเป็นชื่ออะไรก็ได้ไม่มีผลต่อการรันโค้ดภายใน
โดยผม ได้สร้างภายใต้ชื่อโปรเจคว่า bs2 ได้ไฟล์ดังนี้
- ต่อมาได้ลองสร้าง web app ดู โดยใช้ คำสั่งภายในdirectory โปรเจคว่า
    *$python3 manage.py startapp [app name]
 โดยผมใช้ชื่อว่า bmi เมื่อเสร็จแล้วจะได้ไฟล์ในโฟล์เดอร์ประมาณนี้
 จะเห็นได้ว่ามีโฟล์เดอร์ ใหม่ขึ้นมาเป็นชื่อตาม web app ภายในจะมีไฟล์ python ที่เป็นตัว models views และอื่นๆอยู่ ซึ่งจากการศึกษาคร่าวๆ พบว่า models จะสามารถสร้าง class ที่ใช้ในเรื่องเกี่ยวกับ การเก็บข้อมูล datatbase ได้ ส่วน views จะเป็นส่วนที่ใช้ในการส่งค่ากลับไปให้ตอบสนอง

ต่อมาจะเริ่มเขียนโค้ดให้แสดงผลง่ายๆ โดยเขียนในไฟล์ Views.py
  คือ จะมีการสร้าง ฟังก์ชั่น index ขึ้นมามี มีการส่งค่ากลับเป็น HttpResponse("html code")
  และเราต้องการที่จะ เชื่อมต่อ กับ URL จึงได้สร้างไฟล์ชื่อ urls.py ขึ้นมา โดยมีโค้ดภายในดังนี้
คือจากภาพคือมีการ import module Views เข้ามาใช้งาน และมีการกำหนด urlpatterns
เพื่อเชื่อมต่อว่าถ้ามีการเรียนก localhost:8000/bmi นั้นจะให้ใช้งานฟังก์ชั่นในไฟล์ views.py
ที่ชื่อ index
จากนั้นเราต้องไปเชื่อมกับ ไฟล์ urls ของตัวโปรเจคหลักอีกรอบนึงดังนี้
 - import include เพื่อมาใช้งาน
 - เพิ่มเนื้อหาส่วน url(r'^bmi/', include('bmi.urls')), ขึ้นมา เพื่อเชื่อมต่อไปที่ urls.py ของ app bmi
(ทำงานเมื่อ localhost:8000/bmi จะทำการทำตามคำสั่งbmi.urls )
การเชื่อมต่อแบบนี้มีข้อดูคือ ไม่ว่าbmi จะไปอยู่ที่ไหน เราแค่เชื่อมไปที่ไฟล์หลัก urls.py ก็พอ ก็ใช้งานได้แล้ว

จากนั้นลอง ใช้คำสั่งเปิดเซิฟเวอร์
     - python3 manage.py runserver
   or - python3 manage.py runserver xxxx (xxxx คือพอร์ทที่ต้องการใช้)
   or - ptthon3 manage.py runserver x.x.x.x:yyyy (xคือ ip y คือ port ที่ต้องการ)
ผมใช้ python3 manage.py runserver ผลคือ
เมื่อเข้า 127.0.0.1:8000/bmi จะเข้าไปที่หน้าเว็ปแอปที่ได้เขียนไป คือแสดงผล Hello Django

...................................................................................................................................

ต่อมาในส่วนที่2 ที่เข้าใจค่อนข้างยากและคำสั่งเยอะ ส่วนแรกคือการตั้งค่า DATABASE
ในไฟล์ setting.py ในโฟล์เดอร์โปรเจคเรานั้นจะมีการตั้งค่าประมาณนี้คือ
.
ในส่วน default นั้นจะมีค่าเป็นการใช้งาน sqlite ซึ่งหากต้องการใช้ อย่างอื่นก็สามารถลงและเปลียนได้ 
ต่อมาในไฟล์ model.py ของ web app ที่เรามี ได้เพิ่มส่วนที่เป็น class มา ซึ่งเวลาเก็บข้อมูล class
 
 จะมีส่วนประกอบต่างๆ เช่น question_text = models.CharField(max_length=200) นี้จะเป็นการกำหนดคุณสมบัติ อย่างนึง เป็น ตัวอักษร ความยาวไม่เกิน 200 และ ส่วนนี้จะเป็น 1 colum เวลา เก็บข้อมูล

การทำแค่นี้ยังไม่เป็นการ Active models ซึ่งเราต้องไปทำการดังนี้ 
ในไฟล์ setting.py เพิ่มส่วนที่ครอบไว้ในรูป
จากนั้นพิม
python3 manage.py makemigrations bmi 
และจะขึ้นดังภาพ(ล่างๆ)
การใช้คำสั่ง makemigrations นั้นจะเป็นการบอก Django ว่าเราได้แก้ไขบางอย่างใน models และเราต้องการใช้การเปลี่ยนแปลงนั้นในการเก็บข้อมูล
และมีไฟล์เพิ่มขึ้นมาในโฟล์เดอร์ app/migration ดังนี้
คาดว่าเป็นประวัติการแก้ไข และข้อมูลของการเก็บข้อมูล(รายละเอียดต่างๆ)
ลองเช็คผ่านcommandline ตามนี้
python3 manage.py sqlmigrate bmi 0001 
(จะมีรายละเอียดขึ้นมาให้อ่านได้เช่นกัน)
และด้านล่าง การพิม python3 manage.py migrate จะเป็นการสร้าง model table ในdatabase ซึ่งจะไปอ่านค่าในไฟล์ setting.py ในส่วน INSTALLED_APPS เท่านั้น

ซึ่งจะมี ส่วนที่เขาแนะนำ 3 ขั้นตอนการเปลียนแปลง model ว่า
1 เปลี่ยน model ใน models.py
2 ใช้คำสั่ง python3 manage.py makemigrations เพื่อบันทึกการเปลียนแปลง
3 python3 manage.py migrate เพื่อใช้งานสิ่งที่เปลียนแปลงกับส่วนdatabase
.....................................................................................................................................
เพิ่มเติม
จากภาพนั้น ได้ลองทำการสร้าง objects มีคุณสมบัติคือ question_text = what are you looking for? และไปเพิ่ม pub_date = time_now ทีหลัง และทำการsave() (หากไม่ใช้คำสั่งนี้ จะไม่มีการอัพเดทค่าลงไปให้กับ database จากนั้นเช็ค id, pk (เนื่องจากผมเคยสร้างมาแล้วครั่งนึง นี้เลยเป็น ชิ้นที่2 เลยขึ้นที่ 2) แะลเช็คค่าคุณสมบัติว่า มี question_text ตรงมั้ย และ ในส่วนคำสั่งสุดท้ายเป็นการเช็คว่า ใน colum Question นั้น มี objects อะไรบ้าง ซึ่งหากว่า
ไม่มีส่วนในภาพนี้
(__str__) จะมีการreturn ประมาณนี้ แทน
            <QuerySet [<Question: Question object>]>
             
และได้ไปลอง การค้นหาแบบเจาะจง id ที่ต้องการ โดยใช้คำสั่ง
 Question.objects.all()
 Question.objects.filter(id=2)
 Question.objects.filter(question_text__startswith="xxx")
 
.......................................................
ลอง โหมด Admin
 
python manage.py createsuperuser
จากนั้นจะมีให้กรอก user email password ต่างๆ
 
และหลังจากเปิดเซิฟเวอร์แล้วก็ลองเข้าหน้า admin 
 127.0.0.1:8000/admin
 จะเห็นว่ามีอะไรบ้าง 
 
 มีข้อมูลที่เราได้ใส่เข้าไป สามารถกดเข้าไปแก้ไขได้
 
     
ด้านขวาบนมีปุ่ม HISTORY แสดงประวัติการแก้ไข
 

วันพุธที่ 18 มกราคม พ.ศ. 2560

Building Software ll : slide ของวันที่ 19/1/60

https://drive.google.com/file/d/0B7asHdbzNielZXRSaFU0UF85Nms/view?usp=sharing

Building Software II : อ่านไฟล์ CSV โดย python และเขียนข้อมูล

ได้เพิ่มหน้าเว็ป admin ขึ้นมา เพื่อใช้ในการ หา จำนวนของ คนที่มีค่า BMI ตามที่ต้องการและแสดง ข้อมูลออกมา โดย ในหน้า admin จะมีการให้กรอกตัวเลข ค่า bmi ที่ต้องการจะหา แล้วกด ยืนยัน

  หน้า Admin.html สามารถกรอกค่า bmi ที่ที่ต้องการได้
หน้าแสดงผลลัพธ์การค้นหา ด้านบนจะมี ลิงค์ 2 จุด จุดแรก จะทำการเลื่อนลงไปดูจำนวน ทั้งหมดได้ จุดที่ สอง จะเป็นการ ย้อนกลับไปหน้า admin.html
  แสดงจำนวนข้อมูลที่ตรงทั้งหมด (เลขที่ต้องการ ถึง เลขที่ต้องการ+0.99)
  ไฟล์ ที่ใช้ในการเก็บข้อมูล
  ตรงส่วนที่เป็น หาหลักของเพจ จะมีช่องติ๊กเพิ่มขึ้นมา เป็นช่องที่จะให้เลือกให้ ไม่บันทึกข้อมูล ได้

.............................................................................................................................
ในส่วนของ โค้ด admin.py (จะไม่ขอ ลงในส่วน html หน้าหลักของหน้า admin เนื่องจาก ไม่มีอะไรมาก)
     ส่วนที่ใช้ในการรับ ค่าจากมา หา ค่าสูงสุด และ ต่ำสุด ที่ต้องการ
ส่วนที่ใช้ในการแสดงผล
ใช้ api csv ในการอ่านไฟล์ และข้อมูล
.......................................................................................................................
ทดสอบการอ่านไฟล์ CSV
  ไฟล์ ที่ถูกเปิด
 การใช้คำสั่ง อ่านแถว ทีละแถว นั้นจะได้ ผลลัพธ์ ตามนี้ คือ จะมี หัวแถวปนมาด้วย

 เราสามารถกำหนด การเข้าถึงข้อมูลได้โดยการใส่ key หัวแถวเข้าไปตามภาพ

วันอาทิตย์ที่ 15 มกราคม พ.ศ. 2560

Building Software ll : slide ของวันที่ 16/1/2560

https://drive.google.com/file/d/0B7asHdbzNielNTJxbjFIN1o4Qnc/view?usp=sharing

Building Software ll : BMI เว็ป สิ่งที่ได้เรียนรู้และใช้งานบางส่วน

สิ่งที่ได้เรียนรู้ในช่วง 1 สัปดาห์ที่ผ่านมา :
  web มี 3 แบบ คือ static dynamic active
  อ้างอิงเว็ป http://www.genstyles.com/tips-4.html
  ตามความเข้าใจคือ static จะไม่มีการตอบสนองผู้ใช้งาน แต่ dynamic จะตอบสนองเมื่อผู้ใช้งานกระทำบางอย่าง ส่วน active จะตอบสนองตลอดเวลา

  ส่วนเรื่อง html นั้น เนื่องด้วยมันมีจำนวนเยอะมาก จึงได้สรุปว่า ได้ศึกษา จากเว็ป
http://www.w3schools.com/html/ ในส่วนของ Tutorial กับ Form ทั้งหมดแล้ว ได้ทดลองในเว็ปบ้าง แต่เนื่องจากที่เยอะมากจึง ไม่เอาทั้งหมดมาลงในบล๊อกนี้ และต้องใช้เวลาในการจดจำ รูปแบบการเขียน เพราะว่า มันมีจำนวนมาก เลยยังจำได้ไม่หมด แต่ในส่วนของพื้นฐานก็พอจะได้แล้ว (เช่นตัวเล็กตัวใหญ่ ตาราง การใส่สี style พื้นหลัง เป็นต้น) จึงได้คิดว่า จะอธิบายไปพร้อมกับงานที่ได้ทำไปเลย ทีเดียว ซึ่งอาจจะไม่ได้ใช้คำสั่งทั้งหมดมาแต่ก็ถือเป็นส่วนหนึ่งของที่ได้ศึกษาไป

.............................................................................................................................

การจำลองเซิฟ โดยใช้ python
ใน ubuntu นั้น ทำใด้โดยการเปิด Terminal ขึ้นมา และ เข้าไปที่ Directery ที่ต้องการ
จากนั้น พิม python -m baseHTTPServer 
 แต่ ผมจะใช้ python -m CGIHTTPServer เพื่อที่จะใช้ module cgi ของ python ใด้

จากนั้น ลองเข้าเว็ปBrowser และ เข้า localhost:8000 หรือ 0.0.0.0:8000 เพื่อเข้าหน้าเพจที่ทำไว้
 (path- ไฟล์ ตัวหน้าเพจ)
จะได้ผลลัพคือ
....................................................................................................................................
การใช้งาน CGI
ตัวอย่างโค้ด
    ด้านบนสุดไฟล์ จำเป็นต้องใส่ เป็นที่อยู่ของ python ส่วนบรรทัดต่อมา ที่เขียนว่า
     #-*- coding: utf-8 -*- นั้น จะช่วยให้ python รองรับภาษาไทย(ใช้การแปลงโค้ด utf-8)
    เอาไว้แก้ปัญหา ที่ว่า python ไม่สามารถ อ่านโค้ดที่มีภาษาไทยได้ นั้นเอง และการจะใช้ cgi ได้ ก็ต้อง import module cgi, cgitb มาใช้งาน
     cgi.FieldStorage() เข้าใจว่าเป็นคำสั่งในการ รับค่าจาก ที่ๆเก็บไว้
     fileCGI.getvale('value') รับค่าที่ต้องการ
     ไฟล์นี้ ถ้าไม่ได้ตั้งค่าอะไรให้กับ cgi ไฟล์นี้ต้องอยู่ใน cgi-bin เท่านั้น แต่เหมือนกับว่ามีวิธีที่ทำให้ไว้ที่อื่นได้ด้วยเช่นกัน ซึ่งยังไม่ได้ศึกษา
    ต้องตั้งค่าไฟล์ file.py ให้สามารถ รันโปรแกรมได้ โดยผ่าน terminal แล้ว พิม cmod 755 filename.py หรือสามารถ ทำได้โดยคลิกขวาที่ไฟล์แล้วปรับตามนี้
  ตรงส่วนเรียกใช้ ให้ติ้ก ถูก
.............................................................................................................................................

งาน ที่ได้ทำมา 



 เป็นหน้าเพจที่ จะช่วยให้ ผู้ใช้งาน หา ค่าBMI และประเมิณ ผล ต่างๆให้ โดย ผู้ใช้ต้องกรอก ชื่อ น้ำหนักส่วนสูง แล้วกด ยืนยัน (ตั้งไว้ว่าต้องกรอก ทุกช่อง และ ส่วนสูงต้องมากกว่า 100 และ น้ำหนักต้องมากกว่า 20) จากนั้น เซิฟเวอร์จะรับข้อมูลเหล่านั้น ไปคำนวน ผ่าน python และให้ แสดงผลออกมาทาง ด้านล่าง


 ซึ่งจะมีข้อความกล่าวทักทาย ค่า BMI วิเคราะห์ว่าอยู่ในเกณไหน เสี่ยงต่อโรคแค่ไหน ข้อแนะนำการ ปฏิบัติตัว เป็นต้น

............................................................................................................................................
ไฟล์ทั้งหมด :


.......................................................................................
code:
index.html
ไฟล์นี้ จะเป็นหน้าเริ่มต้นของเพจ
  - คำสั่ง meta charset="UTF-8" ใช้ในการ กำหนดการถอดรหัส ของเพจ
 - การกำหนด style ในส่วน head นั้นจะทำให้ เป็นการตั้งค่าให้กับทั้ง เพจนี้โดยไม่ต้องไปเขียนใหม่ทุกครั้ง ซึ่งบางครั้ง จะใช้ร่วมกับ class เพื่อที่จะมีความหลากหลาย
 - width:% กำหนด เป็น %ของbrowser แต่ถ้าใส่ตัวเลขจะเป็นค่าคงที่
 - border:ขนาดกรอบ สีกรอบ
 - background-color:สีพื้นหลัง
 - table,tr,th,td ใช้ในการทำตาราง
 - <br> เว้นบรรทัด
 - <h(number> ขนาดหัวเรื่อง
  - form ใช้ในการสร้างแบบฟอร์ม
 - input ใช้ในการสร้างตัวรับข้อมูล
  - iframe ใช้ในการทำหน้าต่างย่อย ในหน้าเพจ 
  - required ใช้กับ input เพื่อหมายความว่าต้องกรอกเท่านั้นถึงจะยืนยันได้
  - name ชื่อที่กำหนดให้กับ value นั้น
  - type ชนิดของข้อมูล ใช้กับ input และอื่นๆ ในที่นี้ใช้ text กับ number และ submit
  - action กดsubmit จะเรียกไฟล์ไหน target เลือกเป้าหมายว่าจะให้ทำที่ไหน 
  - <center>สิ่งที่ต้องการให้อยู่กลางหน้า</center> 
 
 ผลการใช้ input type > > > text, number input

 ช่องบนสุดคือ text ต่อมาเป็น number ล่างสุดเป็น submit

ไฟล์ result.html
 คือส่วนที่แสดงผลลัพในตอนแรกนั้นเองคือส่วนนี้


ไฟล์ text ในโฟล์เดอร์ result เป็นไฟล์รวมคำแนะนำตาม ค่า bmi ที่แต่ละไฟล์จะมีรูปแบบข้างใน เป็น html ในส่วน <p>
(พารากราฟ)

ไฟล์ bmi.py 
จะรับข้อมูล จากเซิฟเวอร์ มาใช้ในการคำนวนและ แสดงผลลัพธ์ไปให้กับ cliant
 - คำสั่ง file("pathfile","mode") ใช้ในการเปิดไฟล์ text ขึ้นมาอ่าน 
 -จะเห็นได้ว่า ตรงส่วนที่ใช้รับข้อมูลมานั้นมีการกำหนด ค่าทีจะรับ ตรงกับที่ ส่งมา (ในhtml file)

...............................................................................
สิ่งที่สังเกตุได้จาก หน้าเทอมินอลที่เปิดจำลองเซิฟ
 จะเห็นว่า มีการบันทึกว่ามี ip ไหนทำอะไร เป็นต้น 127.0.0.1 เป็น ip เน็ทบ้านที่ผมใช้ ส่วน 0.0.0.0 เป็น local ผมใช้ เน็ทบ้านในการเข้า และมีการแสดงเวลา ด้วย ซึ่ง ต่อมา ในชวง GET
 มันเกิดขึ้นตอนที่ผมเข้ามาในเพจครั้งแรก กับตอนที่กด ยืนยัน จะเห็นว่า เซิฟเวอร์ ได้รับ
  /cgi-bin/bmi.py?name=sarik&.............. ซึ่งเป็นค่าที่ได้กรอกเข้าไป ด้วย