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&.............. ซึ่งเป็นค่าที่ได้กรอกเข้าไป ด้วย