ทบทวนความรู้ HTML ด้วยการเขียนเว็บเพจ My Idol

รู้จักกับ HTML กันก่อนนะ

    ในการเรียนวิชา Building Software II นั้นจะเป็นเรียนเกี่ยวกับเรื่องของ Web Application ดังนั้นจึงจำเป็นต้องมีการฝึกฝนความรู้ของ HTML กันสักหน่อย

    ภาษา HTML (Hypertext Markup Language) เป็นภาษาที่ใช้กำหนดการแสดงผลสิ่งต่างๆที่อยู่บนหน้าเว็บเพจ ไม่ว่าจะเป็นข้อความ รูปภาพ วิดีโอ เสียง หรือแม้แต่ไฟล์ชนิดอื่นๆ โดยภาษา HTML จะแบ่งออกเป็น 2 ส่วนคือ

        1. ส่วนของคำสั่ง หรือ Tag เป็นส่วนที่ใช้ในการกำหนดรูปแบบคำสั่งหรือการลงรหัสคำสั่ง โดยจะอยู่ในเครื่องหมาย < ... > แบ่งได้ 2 ลักษณะ คือ
            - Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <hr>, <br> เป็นต้น
            - Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
                    <tag> เราเรียกว่า tag เปิด

                    </tag> เราเรียกว่า tag ปิด

        2. ส่วนของบทความทั่วไป เป็นส่วนของข้อความที่ต้องการแสดงผล

    ถัดมาผมก็จะขอแนะนำเว็บ w3schools มันเป็นเว็บที่รวบรวมความรู้พื้นฐานและ Tag ต่างๆของภาษา HTML แถมด้วยความรู้พื้นฐานเกี่ยวกับ CSS JAVASCRIPT และอื่นๆที่เกี่ยวข้องกับการเขียนเว็บไว้อีกมากมาย

ทำเว็บเพจ My Idol

    หลังจากศึกษาพื้นฐาน HTML แล้ว งานแรกที่ต้องนั่นก็คือการเขียนหน้าเว็บเพจ "My Idol" หรือ "บุคคลที่อยากเอาเป็นแบบอย่าง" และด้านล่างนี้ก็คือหน้าเว็บที่ผมเขียนขึ้นมา บุคคลที่ผมยกให้เป็นไอดอลก็คือ "ฮิเดโอะ โคจิมะ" ผู้ผลิตและนักออกแบบเกมที่มีชื่อเสียงอันดับต้นๆของโลก(อวย)

Memo - Video

Memo - Trailer

Memo - Feature

Memo - My Commit

[bitbucket]  1.   Add Use Case.txt
[bitbucket]  2.   remove .pyc file
[bitbucket]  3.   Show Filename in Terminal when Select File [Link]
[bitbucket]  4.   remove .metadata / sceenmanager is main file
[bitbucket]  5.   edit show filename [Link]
[bitbucket]  6.   open text file(show data in terminal) [Link]
[bitbucket]  7.   open text file(show data in popup) [Link]
[bitbucket]  8.   merge
[bitbucket]  9.   edit : open text file(Popup) [Link]
[bitbucket]  10. Already Add Text File with Popup [Link]
[bitbucket]  11. merge and adapt
[bitbucket]  12. Already Edit textfile / Show Error Popup [Link]
[bitbucket]  13. Edit Empty Filename Alert [Link]
[bitbucket]  14. Edit Empty Filename Alert(Final) [Link]
[bitbucket]  15. Already Thai Font(except: FileChooser) [Link]
[bitbucket]  16. Merge
[bitbucket]  17. Already Raname File [Link]
[bitbucket]  18. Add head bar / Edit Setting System [Link]
[bitbucket]  19. Add logo [Link]
[bitbucket]  20. fix bug [Link]

Memo - fix bug

    หากทำการกด edit แล้วกด save จะทำให้เกิดชื่อไฟล์ .txt.txt จึงต้องสร้างเงื่อนไขว่า หากชื่อไฟล์ลงท้ายด้วย .txt อยู่แล้วก็ไม่ต้องเติมเพิ่มเข้าไป

Memo - Add logo

ทำการเพิ่มโลโก้ให้กับโปรแกรม Memo
( ออกแบบโดย Nitikarn )

Memo - Add head bar / Edit Setting System

[bitbucket]

    ตั้งแต่เริ่มทำมาจนถึงล่าสุด หน้าตาเจ้า Memo ของเรานั้นยังดูไม่ค่อยมีจุดเด่นอะไรเท่าไหร่นัก จึงต้องมีการปรับปรุง GUI กันสักหน่อย

    สิ่งแรกที่คิดจะปรับปรุงก็คือ เพิ่มส่วนของ head bar(แถบดำๆข้างบนนั่นแหละ) ขึ้นมา โดยวางแผนที่จะนำโลโก้ไปแปะไว้ที่ฝั่งซ้าย ส่วนฝั่งขวาก็จะเป็นปุ่มสำหรับเข้าหน้าของการตั้งค่า

    แต่ระบบการตั้งค่ายังไม่เสร็จ....

    เรื่องของระบบการตั้งค่า ก็ยังคงดำเนินการอยู่เรื่อยๆโดยตอนนี้ก็ได้ย้าย Method การตั้งค่าที่นิธิกานต์(เพื่อนร่วมทีม) ทดลองใส่ไว้ในไฟล์ต่างๆมารวมกันไว้ที่ไฟล์หลัก(Memo.py)เรียบร้อย โดยเมื่อตอนที่โปรแกรมกำลังจะรันขึ้นมา ก็จะมีดึงข้อมูลจากไฟล์ setting.ini มาเซ็ตตั้งค่าจุดต่างๆของโปรแกรมก่อนทันที

Memo - Already Raname File

[bitbucket]

    ในมุมมองของ user นั้น บางทีก็อยากเปลี่ยนชื่อไฟล์ที่บันทึกไว้ โดยเฉพาะกับรูปที่ import เข้ามานั้นมักจะมีชื่อไฟล์ที่เป็นตัวเลข ชื่อที่ยาวและไม่ค่อยสื่อความหมายเท่าไหร่นัก

   ฉนั้น Memo ของเราจึงต้องเพิ่มฟังก์ชั่นเปลี่ยนชื่อไฟล์ขึ้นมาเพื่อรองรับความต้องการนี้

    ทีนี้ในส่วนของโค้ดที่ทำให้สามารถเปลี่ยนชื่อไฟล์ได้นั้น ก็ยังคงใช้โมดูล os เช่นเดิม โดยจะใช้คำสั่ง os.rename(ชื่อไฟล์เก่า, ชื่อไฟล์ใหม่) ซึ่งชื่อไฟล์ที่ใส่เข้าไปทั้งเก่าและใหม่นั้น จะต้องรวมถึงที่อยู่ของไฟล์ด้วย เพราะคำสั่งนี้มันไม่ได้อัจฉริยะพอที่จะรับรู้ได้ว่าไฟล์ที่จะเปลี่ยนชื่อมันไปอยู่ซอกหลืบไหนของคอม
   

   พอได้ส่วนที่ใช้สำหรับแก้ไขชื่อแล้ว ก็ทำการสร้างส่วนของ GUI กันต่อ เริ่มจากสร้างหน้าตาของ Pop-up Rename และ ปุ่มที่จะใช้เรียก Pop-up ขึ้นมา

    เมื่อกดปุ่มแล้วจะมีเรียกใช้ Method rename_popup ซึ่งก็คือ Method ที่เราจะใช้เรียก Pop-up ขึ้นมานั่นเอง โดยภายในก็จะมีการส่งค่าและเรียกใช้ class rename ที่ได้สร้างไว้ตอนแรก เท่านี้ส่วนของฟังก์ชั่น Rename ก็เสร็จเรียบร้อย