การเก็บข้อมูลแบบ CSV

        SPN ได้บอกว่าถ้าหากนำการเขียนเว็บแบบ Dynamic มาใช้ในการเก็บข้อมูลว่าคนที่เข้าใช้เว็บไซต์ของเรานั้นเกิดวันไหนบ้าง แล้วเก็บเป็นสถิติเอาไว้ เราจะมีวิธีการเก็บข้อมูลอย่างไร โดยอาจารย์ได้แนะนำให้ลองใช้ CSV File ในการเก็บข้อมูล โดยในการทำงานได้ไปค้นคว้าข้อมูลจาก https://docs.python.org/3/library/csv.html ซึ่งมีประโยชน์อย่างมากถึงมากที่สุด หน้าตาของเว็บไซต์ที่เสร็จแล้วจะหน้าตาประมาณนี้

        เวลาจะใช้งานก็ติ๊กว่าเกิดวันไหนตามดังนี้แล้วก็กด Submit แล้วจะไปดึงไฟล์ Python มารันโปรแกรมที่ได้เขียนเอาไว้ โดยหน้าตาจะเป็นแบบนี้

HTML Code

ส่งค่า key ให้เป็นตัวย่อของวันต่างๆไปให้กับ ไฟล์ python เพื่อทำการคำนวณ

Python Code

    ในไฟล์ python จะ import cgi กับ csv มาโดยจะมีการรับค่า key ที่จะรับมาเป็นตัวย่อของแต่ละวันเข้ามาเพื่อทำการคำนวณ เริ่มแรกก็จะทำการเปิดไฟล์ days.csv โดยใช้คำสั่ง DictReader() โดยจะเปิดแบบ r หรือ read only หลังจากนั้นก็จะเก็บข้อมูลไว้ในลิสต์ 2 ชุด ชุดแรกจะเก็บ keyword หรือตัวย่อ ของแต่ละวันในไฟล์ csv ไปใส่ในลิสต์ อีกชุดจะเอาไว้เก็บชุดตัวเลขที่เป็นจำนวนคนที่เกิดในวันนั้นๆ หน้าตา default ของไฟล์ csv จะเป็นดังนี้

    การใช้คำสั่ง csv.DictReader() และ csv.DictWriter() จะแตกต่างกับการ write และ read ธรรมดาตรงที่จะมีส่วนของหัว (fieldnames) มาเป็นตัวกำหนดคอลัมน์ โดยในงานนี้จะเป็น d , number ดังรูปภาพด้านบน หลังจากที่เก็บข้อมูลแล้วก็จะมีการสร้างลูปเพื่อเช็คว่า key ที่รับมานั้นตรงกับ key ในลิสต์วันไหน โดย date จะเป็น list ที่เก็บวัน และ number จะเป็น list ที่เก็บจำนวนคน

    โดยถ้าหากตัวแปร days ที่เป็นตัวแปรที่รับค่า key มาจากไฟล์ html ตรงกับวันใดก็จะให้บวกจำนวนคนเพิ่มขึ้นไปซึ่งจะเป็น index ตัวเดียวกัน 

    ขั้นตอนสุดท้ายจะเป็นการเขียนทับไฟล์ csv เพื่อไว้ใช้ในการคำนวณครั้งต่อไป

    ปัญหาที่พบในการเขียนไฟล์คือในการเขียนแบบ DictWriter เมื่อเขียนไปแล้วส่วนหัวจะหายไปหรือ d,number จะหายไปทำให้การอ่านไฟล์ นั้นจะไม่สามารถอ่านได้ ก็เลยทำการเขียนในส่วนหัว แล้วก็วนลูบเขียนในส่วนเนื้อหาแยกส่วนกัน

    ในส่วนของโค้ด html ก็จะให้แสดงวันแล้วก็จำนวน โดยจะเอา list number มาใส่ให้ตรงกับวันเป็นอันเสร็จสิ้น

Area of circle

    ทดลองการทำ website (dynamic) โดยเป็นการคำนวณพื้นที่ของวงกลม

    หน้าตาของตัว website จะเป็นดังนี้โดยวิธีใช้ คือ ใส่รัศมีของวงกลมที่อยากรู้พื้นที่ลงไปในช่องแล้วกดปุ่ม Submit

HTML Code

    input type จะเป็นแบบ number หรือ ตัวเลขโดยจะให้ name เป็น rads โดยเมื่อกดปุ่ม Submit จะไปดึงไฟล์ python myscript-3.py 

Python --> myscript-3.py

    โดยจากโค้ดก็จะนำค่าของตัวแปร rads มาทำการคำนวณ โดยใช้สูตรพื้นที่วงกลม 3.14(r^2) หลังจากนั้นก็จะไปแสดงผล

HANDOUT

Week 1 => Click
Week 2 - 1 => Click
Week 2 - 2 => Click
Week 3 - 1 => Click
Week 3 - 2 => Click
Week 4 - 1 => Click
Week 4 - 2 => Click
Week 5 - 1 => Click
Week 5 - 2 => Click
Week 6 => Click
Week 7-1 => Click
Week 7-2 => Click
Week 8-1 => Click
Week 8-2 => Click
Week 11-1 => Click

Website (Dynamic)

        SPN ได้พูดให้ฟังว่าเว็บไซต์จะมีทั้งแบบ static และ dynamic ซึ่งสิ่งที่ผมได้ทำไปแล้วนั้นก็คือแบบ static ซึ่งจะเป็นประเภทที่ไม่มีการเปลี่ยนแปลงอะไรทั้งสิ้นจนกว่าจะมีการลงไฟล์ใหม่ไปทับ ส่วนแบบ dynamic คือแบบที่สามารถเปลี่ยนแปลงได้ด้วยตัวเอง ซึ่งตอนแรกก็ยังไม่เห็นภาพก็เลย ลองไปเล่นกับ CGI ซึ่งจากการอ่านเว็บต่างก็สรุปได้ว่ามันคือ โปรแกรมที่อยู่บน Web Server เพื่อทำการตอบโต้กับ Web Browser  (cr. ===> http://www.siaminterhost.com/kb/index.php?mod_id=2&id=57 )

        ในการทดลองที่ได้ทำก็จะทำจาก ตัวอย่างการสอนใช้จากในเว็บ
(cr. ===> http://xmodulo.com/create-use-python-cgi-scripts.html ) โดยในเว็บค่อนข้างจะอธิบายวิธีการทดลองละเอียดมาก ซึ่งเว็บนี้ได้คุณ Thakdanai Kunsaen เป็นคนแนะนำมา ต้องขอขอบพระคุณอย่างสูง โดยเมื่อเอาสิ่งที่เว็บที่เพื่อนแนะนำมา มาบวกกับเนื้อหาที่อยู่ในลิ้งค์ก่อนหน้านี้ ก็จะทำให้เห็นภาพชัดเจนยิ่งขึ้น

        ขั้นแรกก็ได้ใช้คำสั่ง python -m CGIHTTPServer 8000 เพื่อทำการเปิด Server โดยหน้าตาที่ได้ก็จะเป็นดังนี้

        โดยการทำงานแบบ dynamic จะมีหน้าเว็บ เว็บหนึ่งไว้เพื่อทำการรับข้อมููลแล้วเมื่อทำการ กดปุ่ม submit หรือ การใส่ข้อมูลในรูปแบบต่างๆ ก็จะไปดึง เอาไฟล์ที่อยู่ใน  โฟลเดอร์ชื่อ cgi-bin ออกมาเรนเดอร์แสดงผลออกมาผ่านทาง Web browser

        ในไฟล์ cgi_test1.html จะมีหน้าตาดังนี้

html

on web browser

         จะเห็นว่าใน code html จะมี คำสั่ง form โดยจะระบุ action ว่าให้ดึงไฟล์ในโฟล์เดอร์ cgi-bin ที่มีชื่อว่า myscript.py โดยจะเป็นไฟล์ python ที่เขียนให้แสดงผลเป็น html โดยเหตุผลที่ใช้ไฟล์ python คุณ Sarik Kampan ได้บอกว่าเพราะว่า python มีการคำนวณที่เร็วกว่า html ซึ่งผมก็ยังไม่ได้ไปหาข้อพิสูจน์ในเรื่องนี้

        

โดยเมื่อกด Submit แล้วผลก็จะได้ออกมาดังนี้

        ก็เป็นอันเรียบร้อยสำหรับการทดลองการเขียน website แบบ dynamic 

แต่ในการทดลองจะมีปัญหาดังนี้

1. เมื่อทำการกดเรียกไฟล์ cgi_test1.html จะไม่สามารถเรียกดูหน้าเว็บได้ มันจะให้โหลดแทน ซึ่งวิธีแก้ก็ทำได้โดยการกำหนดสิทธ์ โดยใช้คำสั่ง chmod 755 filename เพื่อให้สามารถใช้งานได้

2. เมื่อหมดปัญหาจากข้อ 1. ก็ต้องมาเจอกับการที่ว่าเมื่อกดปุ่ม Submit แล้วดันไม่ขึ้น ซึ่งปัญหานี้ก็แก้ปัญหาได้โดยการที่ คุณ Sarik K. ได้บอกว่า "เพื่อนลองไปดูหน้า terminal ของ server สิ" เมื่อผมได้ไปดูก็ได้กระจ่าง ในหน้า terminal ของ server หลังจากที่กดปุ่ม submit ก็ได้มีข้อความ error ว่าไฟล์ที่จะดึงนั้นไม่มี permission เช่นกัน ผมเลยต้องไปกำหนดสิทธิ์ให้ไฟล์ที่จะดึง หรือ ก็คือไฟล์ myscript.py นั้นเอง ซึ่งก็ใช้คำสั่งเดิมก็คือ chmod 755 filename หลังจากนั้น ปัญหานี้ก็จะหมดไป

        ส่วนด้านล่างนี้จะเป็นการทดลอง แบบที่มีการใส่ข้อมูลแบบฟอร์มลงไป แล้ว กดปุ่ม submit

ผลที่ได้จะเป็นดังนี้

        ซึ่งจะมีการใส่คำสั่ง cgi.FieldStorage() เพื่อใช้ในการเรียกข้อมูล โดยจะมีการกำหนด ชื่อ หรือ คล้ายๆ ID ในไฟล์ html ตัวแรก พอใส่ลงไป ก็จะไปถูกดึงมาใส่กับ python มาคำนวณและ render ออกมาบน Web Browser ให้ได้ดูกัน

Web Server with python

        ในวิชา BS 2 ในชม.ได้ลองทำ web server แบบอย่างง่าย โดยใช้คำสั่ง
python -m SimpleHTTPServer 8000
ก็จะเป็นการสร้าง Server โดยมี port 8000 ผลออกมาก็จะได้หน้าตาดังนี้

ต่อไปเราก็ลองนำ IP Address ของ server ที่เปิดไปใส่ในช่องใส่ url ของ server โดยถ้าในกรณี จะเป็น 0.0.0.0:8000 หรือ localhost:8000 แล้วผลที่ได้จะเป็นดังนี้

โดยไฟล์ต่างๆที่ถูก browse ขึ้นมาให้เห็นจะเป็น ไฟล์ที่อยู่ใน directory ที่เราได้ทำการเปิด server

จะเห็นได้ว่าตรงกับไฟล์ที่ browse มาด้านบนทุกประการ โดยเราสามารถจะลอง click เล่นได้ผลที่ได้ก็จะเป็นดังนี้

เมื่อกดดูไฟล์รูปภาพ 1.jpg

เมื่อลองกดดูไฟล์ html 

        โดยทั้งนี้ผมก็ได้ไปลองให้เพื่อนผมลองเสียบสายแลน หรือ ไม่ก็ใช้ไวไฟตัวเดียวกัน ให้อยู่ในเครือข่ายเดียวกันแล้วเอา IP Address ของผมให้กับเขาแล้วให้เขาเข้ามาลองดู Server ที่ผมเปิด ก็สามารถที่จะเปิดได้ แล้วก็กดดูได้ตามปกติเช่นกัน

ทดลองเขียน HTML

        ในวิชา Building Software II จะเน้นไปเรื่องการเขียน web application เป็นหลัก SPN จึงให้ทดลองการเขียนเว็บโดยใช้ HTML โดยใช้ text editor แบบธรรมดา ทางกระผมจึงได้ทดลองเขียนโดยใช้ gedit ซึ่งเป็น text editor ที่ทาง ubuntu มีให้อยู่แล้ว มาเขียนภาษา HTML โดยจะเขียนหน้าเว็บเกี่ยวกับไอดอลที่ตัวเองชื่นชอบ

        ในการเขียน HTML ก็ได้หาความรู้พื้นฐานมาจากเว็บไซด์ http://www.w3schools.com/html/ 

ซึ่งเป็นเว็บไซด์ที่ส่วนตัวผมเองว่าเป็นเว็บที่ดีมาก เพราะจะมีข้อมูลที่ครอบคลุมแล้วยังมีการทดสอบระหว่างการอ่านเนื้อหาในส่วนๆนั้นจบ ซึ่งจะมีเนื้อหาของส่วน css มาให้ด้วย

        หลังจากที่ได้ทดลองเขียนนี้คือผลงานของผม

HTML

        จากโค้ดด้านบนกระผมก็พอจะเข้าใจภาษา HTML ขั้นพื้นฐานได้แล้ว โดยความรู้พื้นฐานก็อย่างเช่นว่า <> คือ tag ในการเขียนโค้ด HTML <> จะเป็นหัวใจหลัก ในการเขียน โดยในโค้ดจะมีส่วนสำคัญๆคือ <html> <head> <body> โดยจะต้องมี tag ปิดด้วย </html> ฯลฯ ในส่วนของ <head> จะเป็นการกำหนดส่วนหัวของเว็บเพจ หรือ ก็คือส่วนนี้

        ในส่วนของ <body> ก็จะเป็นการใส่เนื้อหาต่างๆ โดยคำสั่งที่ใช้ไปก็จะมี 

<h1-h6> เป็นส่วนของ heading หรือหัวข้อ จะต้องมี tag ปิดด้วย

<p> เป็นส่วนของการใส่ข้อความเป็นย่อหน้า จะต้องมี tag ปิดด้วย

<br> เป็นการเว้นบรรทัด หรือ ขึ้นบรรทัดใหม่

<div> เป็นการสร้าง block ให้กับส่วนต่างๆของข้อความ จะต้องมี tag ปิดด้วย

<ul> เป็นการสร้าง listing โดยจะใช้คู่กับ <li> โดยจะสามารถใส่ style กำหนดได้ว่าต้องการรูป                แบบใด โดยผมเลือกแบบวงกลม

จะได้ผลเป็นดังนี้

<table> เป็นการสร้างตาราง โดยจะใช้คู่กับ <tr> เป็นการสร้างแถว <th> เป็นการใส่หัวข้อในแนวหลัก <td> เป็นการใส่เนื้อหาในแนวหลัก

<img src=""> เป็นการใส่รูปโดยใน "" จะสามารถใส่ได้ทั้งชื่อไฟล์รูปภาพที่อยู่ในเครื่อง หรือ อาจจะเป็นลิ้งค์ของรูปภาพที่ต้องการก็ได้ 

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

<div style="background-color:#ffb67a;border:3px solid black;"> จะเป็นการใส่สีพื้นหลัง แล้วใส่เส้นขอบขนาด 3 พิกเซล แล้วมีลักษณะของเส้นเป็นสีดำทึบ

<h2 align="left"> จะทำให้ข้อความ heading ของเรานั้นถูกจัดอยู่ในด้านซ้าย

แล้วก็ได้รู้จักกับ HTML entities จากเว็บไซด์นี้ http://www.w3schools.com/html/html_entities.asp

ซึ่งตัวที่ได้ลองใช้คือ $nbsp ซึ่งจะทำให้ผลที่ออกมาเป็นการเคาะ spacebar 1 ครั้ง หรือ non-breaking space นั้นเอง

Welcome to BS2

ในตอนนี้ได้เริ่มต้นการศึกษาในวิชา Building Software II