การออกแบบและพัฒนาเว็บไซด์

วันจันทร์ที่ 10 กรกฎาคม พ.ศ. 2560

ใบงานที่ 4 HTML forms

ใบงานที่ 4

คำสั่ง ที่ 1 ดาวน์โหลดไฟล์บีบอัด จาก ใบงานที่ 4ขยายไฟล์ลงในโฟลเตอร์ /home/document

ข้อ 1. เปิดไฟล์ /home/document/job4/index.html ด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger

รูปภาพที่ 1 ผลการทำงานของโปรแกรม

บรรยายการทำงานของโปรแกรม

1. การทำงานของโปรแกรม คือ ใส่ข้อมูลและจะแสดงข้อมูลที่ URL

2. ข้อผิดพลาดที่พบ เมื่อกรอกข้อมูลไปแล้วมันแสดงที่ URL อาจทำให้โดนแฮ็คได้

เมื่อกด submit จะส่งข้อมูลผ่าน url

คำสั่งที่ 2 ปรับปรุงให้เว็บเพจแสดงจากตัวอย่างให้ซ่อนข้อมูลลงทะเทียนในช่อง url และเพิ่มช่องกรอกข้อมูล เกี่ยวกับการศึกษา ประวัติการทำงาน งานอดิเรกและความสนใจพิเศษให้สมบูรณ์และมีการแสดงผลสวยงาม
ข้อ 1. เปิดเอกสารเว็บเพจที่แก้ไขแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger

รูปภาพที่ 2 ผลการทำงานของโปรแกรม

บรรยายการทำงานของโปรแกรม

การทำงานของโปรแกรม คือ ใส่ข้อมูลและจะแสดงข้อมูลที่ URL

ข้อผิดพลาดที่พบ คือ

แก้ไขโปรแกรม คือ โดยดารเป็น get เป็น post ทำให้ไม่ส่งข้อมูลทาง url

ข้อ 2. เขียนอธิบายคำสั่งในเอกสารเว็บเพจที่แก้ไขแล้ว

อธิบายคำสังโปรแกรม

1. <!DOCTYPE html>
   - การประกาศกำหนดเอกสารนี้เป็น HTML5

2. <html>
   - องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น

3. <head>
   - องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML

4. <meta charset=utf-8>
   - กำหนดอักขระตามแบบตัวอักษรที่ต้องการ

5. <style>
   - ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้

6. form{
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}
   - สร้างฟอร์ม พื้นหลัง:สีดำ ตัวอักษร:สีขาว หางจากหน้าจอ 20 px 0 20 px 0 ขอบหนา 20 px

7. </style>
   - ปิดคำสั่ง Style

8. </head>
   - ปิดคำสั่ง head

9. <body>
   - องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้

10. <form action="index.html" method = post>
   - ไม่แสดงค่าที่ป้อนที่ URL ของเว็บไซด์

11. ชื่อ-นามสกุล:<br>
   - แสดงข้อความ "ชื่อ-นามสกุล:" และ เว้น 1 บรรทัด

12. <input type="text" name="firstname" value="" size=30>
   - ช่อง input รับประเภทตัวอักษร ชื่อว่า firsrtname ทั้งหมด 30 ตัว

13. <br>   - เว้น 1 บรรทัด

14. ที่อยู่:<br>
   - แสดงข้อความ "ที่อยู่:" และ เว้น 1 บรรทัด

15. <input type="text" name="lastname" value="" size=60>
   - ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 60 ตัว

16. <br>
    - เว้น 1 บรรทัด

17. โทรศัพท์ มือถือ:<br>
   - แสดงข้อความ "โทรศัพท์ มือถือ:"และ เว้น 1 บรรทัด

18. <input type="text" name="lastname" value="" size=10>
   - ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 10 ตัว

19. <br><br>
   - เว้น 2 บรรทัด

20. <input type="submit" value="Submit">
    - ช่อง input รับประเภทแสดงผลลัพธ์

21. </form>
   - ปิดคำสั่ง Form

22. <p>หมายเหตุ ตัวอย่างนี้ ยังไม่ได้นำข้อมูลไปดำเนินการอื่น ให้ทดลองและสังเกตที่ ช่อง urlเว็บเบาว์เซอร์ การวิธีส่งข้อมูล แบบ get และแบบ post</p>
   - องค์ประกอบกำหนดย่อหน้า

23. </body>
   - ปิดคำสั่ง Body

24. </html>
   - ปิดคำสั่ง HTML

วันอังคารที่ 4 กรกฎาคม พ.ศ. 2560

ใบงานที่ 3 HTMLClasses

ใบงานที่ 3

คำสั่ง ที่ 1 ดาวน์โหลดไฟล์บีบอัด จาก ใบงานที่ 3 ขยายไฟล์ลงในโฟลเตอร์ /home/document

ข้อ 1. เปิดไฟล์ /home/document/job3/index.html ด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger

รูปภาพที่ 1 ผลการทำงานของโปรแกรม

บรรยายการทำงานของโปรแกรม

1. การทำงานของโปรแกรม คือ แสดงข้อมูลแหล่งท่องเที่ยวเมืองสองแควพิษณุโลกและร้านอาหารที่น่าสนใจ

2. ข้อผิดพลาดที่พบ ภาพบางภาพไมขึ้นจัดรูปแบบไม่เหมาะสม

   3. แนวทางแก้ไข คือ

ข้อ 2. เปิดไฟล์ /home/document/html/index.html ด้วยโปรแกรมแก้ไขข้อความ เขียนอธิบายคำสั่งการทำงานที่ Blogger

อธิบายคำสังโปรแกรม

1. <!DOCTYPE html>
   - การประกาศกำหนดเอกสารนี้เป็น HTML5

2. <html>
   - องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น

3. <head>
   - องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML

4. <meta charset=utf-8>
   - กำหนดอักขระตามแบบตัวอักษรที่ต้องการ

5. <style>
   - ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้

   div.cities {
   background-color: black;
   color: white;
   margin: 20px 0 20px 0;
   padding: 20px;
   }
   - การสร้างคลาสสำหรับสีพื้นหลัง สถานที่ท่องเที่ยว

   div.food {
   background-color:Bisque;
   color: blue;
   margin: 20px 0 20px 0;
   padding: 20px;
   }
   - การสร้างคลาสสำหรับสีพื้นหลัง ร้านอาหารที่น่าสนใจ

   </style>
   - ปิดคำสั่ง Style

6. </head>
   - ปิดคำสั่ง head

7. <body>
   - องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้

โค้ชของสถานที่น่าท่องเที่ยว

8. <h1>5 แหล่งท่องเที่ยวเมืองสองแควพิษณุโลกต้องห้ามพลาด</h1>
   - องค์ประกอบกำหนดหัวข้อใหญ่

9. <div class="cities">
   - เป็นองค์ประกอบระดับบล็อกใช้คลาสของ cities

10. <h2>1. วัดพระศรีรัตนมหาธาตุวรมหาวิหาร (วัดใหญ่)</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

11. <img src = pic01.jpeg >
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้

12. <p>วัดพระศรีรัตนมหาธาตุวรมหาวิหาร จังหวัดพิษณุโลก เรียกกันทั่วไปว่าวัดใหญ่หรือวัดหลวงพ่อพระพุทธชินราช เป็นพระอารามหลวงมาแต่เดิมสร้างขึ้นในสมัยกรุงสุโขทัย ต่อมาเมื่อ ปีพุทธศักราช ๒๔๕๘ พระบาทสมเด็จพระมงกุฎเกล้าเจ้าอยู่หัว ทรงพระกรุณาโปรดเกล้า ฯให้ยกขึ้นเป็นพระอารามหลวงชั้นเอก ชนิด วรมหาวิหาร เมื่อ พ.ศ. ๒๔๕๘ ปัจจุบันจึงมีชื่อเต็มว่า วัดพระศรีรัตนมหาธาตุวรมหาวิหาร เป็นวัดเก่าแก่ที่มีความสำคัญยิ่งทั้งทางประวัติศาสตร์และโบราณคดี
เมื่อกล่าวถึงพระพุทธรูปที่มีความงามเป็นเลิศ ทุกคนต้องนึกถึงพระพุทธชินราช วัดพระศรีรัตนมหาธาตุ จังหวัดพิษณุโลก อย่างแน่นอน เพราะเป็นพระพุทธรูปที่สง่างามล้ำค่าไปด้วยศิลปกรรมเลิศล้ำด้วยคุณลักษณะ กว่าพระพุทธรูปทั้งหมดในแผ่นดิน นักประวัติศาสตร์และนักโบราณคดีทุกสมัย ต่างตกลงใจเป็นอย่างเดียวกันว่าพระพุทธชินราชนั้นงามเป็นหนึ่ง ประดุจดั่งเพชรเม็ดงามที่ล้ำค่ามหาศาล</p>
   - องค์ประกอบกำหนดย่อหน้า

13. </div>
   - ปิดคำสั่ง div

โค้ชของร้านอาหารที่น่าสนใจ

14. <h1>5 แหล่งอาหารการกินเมืองสองแควพิษณุโลกที่ต้องห้ามพลาด</h1>
   - องค์ประกอบกำหนดหัวข้อใหญ่

15. <div class="food">
   - เป็นองค์ประกอบระดับบล็อกใช้คลาสของ food

16. <h2>1.ร้าน ศ.โภชนา</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

17. <img src = pic06.jpeg >
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้

18. <p>
ศ.โภชนา เป็นอีกหนึ่งร้านอาหารพิษณุโลกที่มีชื่อเสียงมาก ๆ เพราะเมนูต้มเลือดหมูที่นี่มีรสชาติอร่อยเป็นเอกลักษณ์ ตัวน้ำซุปมีรสชาติกลมกล่อม ให้เครื่องต่าง ๆ มาแบบเต็มชาม ทั้งเครื่องใน, หมูสับ, เลือดหมู, ตับ, ใบจิงจูฉ่าย ฯลฯ </p>
   - องค์ประกอบกำหนดย่อหน้า

19. <img src = pic061.jpeg >
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้

20. <img src = pic062.jpeg >
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้

21. <p>วัตถุดิบแต่ละอย่างก็มีการคัดสรรมาอย่างดี ใช้แต่ของสดใหม่ เกรดพรีเมียม จึงทำให้เมนูต้มเลือดหมูที่นี่อร่อยแบบไม่ต้องปรุงรส นอกจากนี้ที่ร้านยังมีเมนูอื่น ๆ ให้ลิ้มลองกันอีกด้วย อาทิ ข้าวหมูทอด, ข้าวกะเพราหมู, ข้าวไข่เจียว, ข้าวผัดพริก เป็นต้น
</p>
   - องค์ประกอบกำหนดย่อหน้า

22. </div>
   - ปิดคำสั่ง div

ปิดท้ายทั้ง 2 โปรแกรม ด้วย

23. </body>
   - ปิดคำสั่ง Body

24. </html>
   - ปิดคำสั่ง HTML

คำสั่งที่ 2 ปรับปรุงให้เว็บเพจแสดงจากตัวอย่างให้เนื้อสมบูรณ์และมีการแสดงผลสวยงาม
ข้อ 1. เปิดเอกสารเว็บเพจที่แก้ไขแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger

รูปภาพที่ 2 ผลการทำงานของโปรแกรม

บรรยายการทำงานของโปรแกรม

2. ข้อผิดพลาดที่พบ

   3. แนวทางแก้ไข คือ
ข้อ 2. เขียนอธิบายคำสั่งในเอกสารเว็บเพจที่แก้ไขแล้ว

อธิบายคำสังโปรแกรม

1. <!DOCTYPE html>
   - การประกาศกำหนดเอกสารนี้เป็น HTML5

2. <html>
   - องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น

3. <head>
   - องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML

4. <meta charset=utf-8>
   - กำหนดอักขระตามแบบตัวอักษรที่ต้องการ

5. <style>
   - ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้

   div.cities {
   background-color: black;
   color: white;
   margin: 20px 0 20px 0;
   padding: 20px;
   }
   - การสร้างคลาสสำหรับสีพื้นหลัง สถานที่ท่องเที่ยว

   div.food {
   background-color:Bisque;
   color: blue;
   margin: 20px 0 20px 0;
   padding: 20px;
   }
   - การสร้างคลาสสำหรับสีพื้นหลัง ร้านอาหารที่น่าสนใจ

   div.text0{
      background-color:#0C090A;
      border-radius: 15px;
   border: 5px solid Black;
   color: #FFFFFF;
   width: 90%;
   margin: 20px 0 20px 0;
   padding: 20px;
   }
   - การสร้างคลาสสำหรับหัวข้อใหญ่ของ สถานที่ท่องเที่ยวและร้านอาหารที่น่าสนใจ

   div.text3{
   background-color:#0C090A;
   border-radius: 15px;
   border: 5px solid White;
   color: #FFFFFF;
   width: 90%;
   margin: 20px 0 20px 0;
   padding: 20px;
   }
   - การสร้างคลาสสำหรับเนื้อหาของ สถานที่ท่องเที่ยว

   div.text1{
   background-color:#000000;
   border-radius: 15px;
   border: 5px solid Black;
   color: #4EE2EC;
   width: 50%;
   margin: 20px 0 20px 0;
   padding: 20px;
   }
   - การสร้างคลาสสำหรับหัวข้อของ ร้านอาหารที่น่าสนใจ

   div.text2{
   background-color:#C2DFFF;
   border-radius: 15px;
   border: 5px solid Black;
   color: #1569C7;
   width: 70%;
   margin: 20px 0 20px 0;
   padding: 20px;
   }
    - การสร้างคลาสสำหรับส่วนแหล่งที่มา

   img.cities{
   border-radius: 25px;
   border: 8px solid Black;
   width: 50%;
   }
    - การสร้างคลาสสำหรับกำหนดขนาดและใส่ขอบของ ร้านอาหารที่น่าสนใจ

   img.cities2{
   border-radius: 25px;
   border: 8px solid White;
   width: 50%;
   }
    - การสร้างคลาสสำหรับกำหนดขนาดและใส่ขอบของ สถานที่ท่องเที่ยว

   img.citiessm{
   border-radius: 25px;
   border: 8px solid Black;
   width: 20%;
   }
    - การสร้างคลาสสำหรับกำหนดขนาดและใส่ขอบของ ร้านอาหารที่น่าสนใจ

   img.citiessm2{
   border-radius: 25px;
   border: 8px solid White;
   width: 30%;
   }
    - การสร้างคลาสสำหรับกำหนดขนาดและใส่ขอบของ สถานที่ท่องเที่ยว

   </style>
   - ปิดคำสั่ง Style

6. </head>
   - ปิดคำสั่ง head

7. <body>
   - องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้

โค้ชของสถานที่น่าท่องเที่ยว

8. <div class="text0"><h1>5 แหล่งท่องเที่ยวเมืองสองแควพิษณุโลกต้องห้ามพลาด</h1></div>
   - องค์ประกอบกำหนดหัวข้อใหญ่ใช้คลาส text0

9. <div class="cities">
   - เป็นองค์ประกอบระดับบล็อกใช้คลาสของ cities

10. <h2>1. วัดพระศรีรัตนมหาธาตุวรมหาวิหาร (วัดใหญ่)</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

11. <img class="cities2" src = pic01.jpeg >
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้ใช้คลาส cities2

12. <div class="text3">
   - เป็นองค์ประกอบระดับบล็อกใช้คลาสของ text3

13. <p>วัดพระศรีรัตนมหาธาตุวรมหาวิหาร จังหวัดพิษณุโลก เรียกกันทั่วไปว่าวัดใหญ่หรือวัดหลวงพ่อพระพุทธชินราช เป็นพระอารามหลวงมาแต่เดิมสร้างขึ้นในสมัยกรุงสุโขทัย ต่อมาเมื่อ ปีพุทธศักราช ๒๔๕๘ พระบาทสมเด็จพระมงกุฎเกล้าเจ้าอยู่หัว ทรงพระกรุณาโปรดเกล้า ฯให้ยกขึ้นเป็นพระอารามหลวงชั้นเอก ชนิด วรมหาวิหาร เมื่อ พ.ศ. ๒๔๕๘ ปัจจุบันจึงมีชื่อเต็มว่า วัดพระศรีรัตนมหาธาตุวรมหาวิหาร เป็นวัดเก่าแก่ที่มีความสำคัญยิ่งทั้งทางประวัติศาสตร์และโบราณคดี
เมื่อกล่าวถึงพระพุทธรูปที่มีความงามเป็นเลิศ ทุกคนต้องนึกถึงพระพุทธชินราช วัดพระศรีรัตนมหาธาตุ จังหวัดพิษณุโลก อย่างแน่นอน เพราะเป็นพระพุทธรูปที่สง่างามล้ำค่าไปด้วยศิลปกรรมเลิศล้ำด้วยคุณลักษณะ กว่าพระพุทธรูปทั้งหมดในแผ่นดิน นักประวัติศาสตร์และนักโบราณคดีทุกสมัย ต่างตกลงใจเป็นอย่างเดียวกันว่าพระพุทธชินราชนั้นงามเป็นหนึ่ง ประดุจดั่งเพชรเม็ดงามที่ล้ำค่ามหาศาล</p>
   - องค์ประกอบกำหนดย่อหน้า

14. </div>
   - ปิดคำสั่ง div

15. <div class="text2">
   - เป็นองค์ประกอบระดับบล็อกใช้คลาสของ text2

16. แหล่งที่มาจาก http://www.painaidii.com/diary/diary-detail/002004/lang/th/
   - แสดงข้อความ "แหล่งที่มาจาก http://www.painaidii.com/diary/diary-detail/002004/lang/th/"

17. </div>
   - ปิดคำสั่ง div

18. </div>
   - ปิดคำสั่ง div

โค้ชของร้านอาหารที่น่าสนใจ

19. <div class="text0"><h1>5 แหล่งอาหารการกินเมืองสองแควพิษณุโลกที่ต้องห้ามพลาด</h1></div>
   - องค์ประกอบกำหนดหัวข้อใหญ่

20. <div class="food">
   - เป็นองค์ประกอบระดับบล็อกใช้คลาสของ food

21. <div class="text1"><h2>1.ร้าน ศ.โภชนา</h2></div>
   - องค์ประกอบกำหนดหัวข้อใหญ่

22. <img class="cities" src = pic06.jpeg >
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้

23. <div class="text2">
   - เป็นองค์ประกอบระดับบล็อกใช้คลาสของ text2

24. <p>
ศ.โภชนา เป็นอีกหนึ่งร้านอาหารพิษณุโลกที่มีชื่อเสียงมาก ๆ เพราะเมนูต้มเลือดหมูที่นี่มีรสชาติอร่อยเป็นเอกลักษณ์ ตัวน้ำซุปมีรสชาติกลมกล่อม ให้เครื่องต่าง ๆ มาแบบเต็มชาม ทั้งเครื่องใน, หมูสับ, เลือดหมู, ตับ, ใบจิงจูฉ่าย ฯลฯ </p>
   - องค์ประกอบกำหนดย่อหน้า

25. </div>
   - ปิดคำสั่ง div

26. <img class="citiessm" src = pic061.jpeg >
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้

27. <img class="citiessm" src = pic062.jpeg >
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
28. <div class="text2">
   - เป็นองค์ประกอบระดับบล็อกใช้คลาสของ text2

29. <p>วัตถุดิบแต่ละอย่างก็มีการคัดสรรมาอย่างดี ใช้แต่ของสดใหม่ เกรดพรีเมียม จึงทำให้เมนูต้มเลือดหมูที่นี่อร่อยแบบไม่ต้องปรุงรส นอกจากนี้ที่ร้านยังมีเมนูอื่น ๆ ให้ลิ้มลองกันอีกด้วย อาทิ ข้าวหมูทอด, ข้าวกะเพราหมู, ข้าวไข่เจียว, ข้าวผัดพริก เป็นต้น
</p>
   - องค์ประกอบกำหนดย่อหน้า

30. </div>
   - ปิดคำสั่ง div

31. </div>
   - ปิดคำสั่ง div
ปิดท้ายทั้ง 2 โปรแกรม ด้วย

32. </body>
   - ปิดคำสั่ง Body

33. </html>
   - ปิดคำสั่ง HTML