บทที่ 3

การวเิคราะห์และการออกแบบระบบ

การวิเคราะห์ระบบ เว็บไซด์ขององค์กร ไ ด้แบง่ออกเป็นหวัข้อตา่งๆ เพ่ือให้ง่ายตอ่การ

อา่นข้อมลู ซึง่จะประกอบไปด้วย

- ปัญหาของ เว็บไซต์เก่า

- วิธีแก้ปัญหา เว็บไซต์เก่า

- หลกัการออกแบบ เว็บไซต์ใหม ่

3.1 ปัญหาของ เวบ็ไซต์เก่า

การทําเว็บไซต์ท่ีดีจะเร่ิม ตัง้แตก่ารท่ีผู้ใช้เห็นเว็บ ไซต์เป็นครัง้แรก จะต้องสร้างความ

ประทบัใจให้กบัผู้ใช้งานตัง้แตค่รัง้แรกท่ีใช้งาน เพ่ือให้ผู้ใช้งานกลบัมาใช้เว็บไซต์อีกครัง้

ปัญหาของเว็บไซต์เก่า

3.1.1) เนือ้หาในเว็บไซต์แสดงรายละเอียด เยอะเกินไปจนบางครัง้ ทําให้ผู้ใช้งาน

สบัสน ผู้ใช้งานเว็บไซต์สว่นใหญ่ไม่ อา่นเนือ้หาของเว็บไซต์อยา่ง ละเอียด หรือ

ตัง้ใจอา่นอยา่งท่ีเจ้าของเว็บไซต์ต้องการ

3.1.2) ขนาดของตวัอกัษร และชนิดของตวัอกัษร ในบางครัง้การแสดงตวัอกัษรท่ี

เลก็เกินไป หรือใหญ่เกินไป ขึน้อยูก่บัการตัง้คา่ของ Browser ของผู้ใช้ ก็เป็น

อปุสรรคในการอา่นเนือ้หาของเว็บไซต์

3.1.3) การทําลงิค์ท่ีผิดพลาด ลงิค์เป็นสว่นท่ีสําคญัมากของ เว็บไซต์ เพราะจะ

เป็นสว่นท่ีนํา ผู้ใช้งานไปยงัสว่นอ่ืนๆของเว็บไซต์ ในเว็บไซต์ของทางองค์กร ได้มี

สว่นท่ีเปิดให้ Download และ ลงิค์ดาวโหลดเสียอยูบ่อ่ยครัง้

3.1.4) ไม่คอ่ยมีการอพัเดทเว็บไซต์ ทางองค์กรมีการอพัเดทเว็บไซต์เดือนละ 2

ครัง้ แตล่ะครัง้การอพัเดทของทางองค์กรจะไมไ่ด้มีการโชว์สิง่ท่ีอพัเดทขึน้ท่ีหน้า

แรกของเว็บไซต์ทําให้ผู้ใช้งานสว่นใหญ่ไมท่ราบ

3.1.5) รูปภาพ ของเว็บไซต์ มีขนาดเลก็เกินไป และบางหวัข้อรูปส่ือสารได้ไม่

ชดัเจนเท่าท่ีควรทําให้ผู้ใช้งานบางสว่นอาจจะไมเ่ข้าใจและอาจจะทําให้การ

ส่ือสารผิดพลาดได้

23

3.1.6) ไมส่ามารถแก้ไข Layout ได้ ไมส่ามารถแก้ไขผงัแก้ไขหน้าของเว็บไซต์บาง

หน้าได้

3.2 วธีิแก้ปัญหา เวบ็ไซด์เก่า

เม่ือพบปัญหาในเว็บไซด์ดงัท่ีได้กลา่วมาแล้วนัน้จงึได้ศกึษาแนวทางแก้ไขและนําไป

แก้ไขในเว็บไซต์ปัจจบุนัขององค์กร

วิธีปัญหาของเว็บไซต์เก่า

3.2.1) เนือ้หาในเว็บไซต์แสดงรายละเอียด ควรทําให้เนือ้หาของ อา่นได้ง่ายขึน้

เช่น ใช้การเว้นวรรค การใสย่อ่หน้า และการเขียนให้กระชั บท่ีสดุ เน้นสว่นของ

ข้อความท่ีต้องการส่ือให้มากท่ีสดุ

3.2.2) ขนาดของตวัอกัษร และชนิดของตวัอกัษร ข้อแนะนําคือควรใช้ CSS ใน

การควบคมุการแสดงผลตวัอกัษรให้เป็นไป ในทางเดียวกนั จะทําให้ ตวัอกัษร

เว็บไซต์อา่นได้ง่ายขึน้

3.2.3) การทําลงิค์ท่ีผิดพลาด ควรทําให้สว่นท่ีเป็นลงิค์มีความชดัเจนในตวัเอง

และถ้าไมจํ่าเป็นไมค่วรเปล่ียนสีของลงิค์

3.2.4) ไม่คอ่ยมีการอพัเดทเว็บไซต์ ควรปรับปรุงอพัเดทเว็บไซต์ให้สม่ําเสมอเป็น

อาทิตย์ละ 1 ครัง้ หรือ ควรอพัเดทขา่วสารทนัทีเม่ือมีข้อมลูใหม่ๆ เพิ่มเตมิ

3.2.5) รูปภาพ ควรปรับขนาดใ ห้มีความพอดี และควรใช้รูปท่ีสามารถส่ือ

ความหมายได้อยา่งชดัเจน สามารถเข้าใจได้ง่าย

3.2.6) การแก้ไข Layout ต้องตดิตอ่ไปทางบริษัทท่ีทางสมาคมฯวา่จ้างทําเว็บไซต์

ขึน้เพ่ือแก้ไข Layout หรือหน้าของเว็บไซต์บางหน้า

3.3 หลักการออกแบบเวบ็ไซด์ใหม่

การวิเคราะห์และ ออกแบบเว็บไซต์ คือ วิธีการท่ีใช้ในการสร้างระบบสารสนเทศขึน้มา

ใหม ่นอกจากการสร้างระบบสารสนเทศใหมแ่ล้ว การวิเคราะห์ระบบช่วยในการแก้ไขระบบ

สารสนเทศเดมิท่ีมีอยูแ่ล้วให้ดีขึน้ ดงันัน้ การวิเคราะห์ระบบ web design คือ การหาความ

ต้องการ (Requirements) ของระบบสารสนเทศ วา่คืออะไร หรือต้องการเพิ่มเตมิอะไรเข้ามาใน

ระบบ และการออกแบบ คือ การนําเอาความต้องการของระบบมาเป็นแบบแผนหรือเรียกวา่พิมพ์

เขียว ในการสร้างระบบสารสนเทศให้ใช้ในงานได้จริงนัน้ ผู้ ท่ีทําหน้านีก็้คือ นกัวิเคราะห์และ

24

ออกแบบระบบ (System Analysis: SA) นกัวิเคราะห์ระบบจงึทําหน้าท่ีเป็นผู้ เช่ือมช่องวา่งนี ้

นกัวิเคราะห์ระบบเป็นผู้ ท่ีเก่ียวข้องโดยตรงท่ีจะนําเอาความเข้าใจและเทคโนโลยีของคอมพิวเตอร์

มาใช้ในการพฒันาระบบงานข้อมลูเพ่ือช่วยแก้ปัญหาให้กบังานในหน่วยงานตา่งๆ

3.3.1 การสร้างหน้า Site Master

Master Page (.master) เป็นการรวมเอา Layout ทัง้ 3 สว่น มาไว้ในไฟล์

เดียวกนั จะทําการจําลอง Layout ท่ีได้ออกแบบไว้ใน Master Page มาแสดงท่ีหน้า Web Form

ปัจจบุนั และในหน้า Web Form จะสามารถใสเ่นือ้หาหรือรายละเอียดได้เฉพาะตรงสว่นท่ีเป็น

Content Place Holder ท่ีได้ออกแบบไว้ใน Master Page (.master) เท่านัน้ ซึง่การใช้ Master

Page (.master) เข้ามาจดัการหน้า Web Form จะช่วยในเร่ืองการปรับเปล่ียน Layout รวมทัง้

รายละเอียดอ่ืน ๆ ได้อยา่งสะดวก และง่ายตอ่การเขียนโปรแกรม ASP.NET มากเลยทีเดียว

รูปท่ี 3.1 การออกแบบ Master Page (.Master)

25

3.3.2 ขัน้ตอนในการสร้าง Web Form

ในการสร้าง Page ให้เราคลกิขวาท่ีช่ือโปรเจคแล้วเลือก Add จากนัน้เลือก New item

ดงัรูปท่ี 3.2

รูปท่ี 3.2 การสร้าง Page ใหม ่

26

จากนัน้เลือก Web Form Using Master Page จากนัน้กด Add ดงัรูปท่ี 3.3

รูปท่ี 3.3 ขัน้ตอนการสร้าง Page ใหม ่(1)

จากนัน้ เลือก (ช่ือไฟล์.master) ท่ีผู้ ใช้ได้สร้างไว้แล้วคลกิ OK ดงัรูปท่ี 3.4

รูปท่ี 3.4 ขัน้ตอนการสร้าง Page ใหม ่(2)

27

จะได้ Web Form ท่ีมี Layout เหมือนกบั Page.Master ท่ีผู้ ใช้งานกําหนดไว้ดงัรูปท่ี

3.5

รูปท่ี 3.5 หน้า Web Form

3.3.3 ขัน้ตอนการสร้าง Menu

ในขัน้ตอนการสร้าง Menu ให้เลือก Tools จากนัน้เลือก Navigation

จากนัน้ให้เลือก Menu แล้วลากนําไปวางไว้ตรงท่ีผู้ใช้งานต้องการ ดงัรูปท่ี 3.6

รูปท่ี 3.6 ขัน้ตอนการสร้าง Menu

28

จากนัน้ ให้เลือก ตวั Menu แล้วใส ่Code ดงัรูปท่ี 3.7

รูปท่ี 3.7 ขัน้ตอนการเปล่ียนรูปแบบของ Menu

จะได้ Menu ตามท่ีต้องการ จากนัน้คลกิลกูษรและเลือก Edit Menu Item ดงัรูปท่ี 3.8

รูปท่ี 3.8 การตัง้คา่ Menu (1)

29

จากนัน้เลือกเคร่ืองหมาย + ด้านบนซ้ายและ ตัง้ช่ือ Menu ดงัรูปท่ี 3.9

รูปท่ี 3.9 การตัง้คา่ Menu (2)

จากนัน้จะทําการเช่ือมหน้า Page กบั Menu ให้เลือก NavigateUrl จากนัน้เลือก

สญัลกัษณ์ “ ... “ ดงัรูปท่ี 3.10

รูปท่ี 3.10 การเช่ือมหน้า Page และ Menu

30

จากนัน้ เลือกหน้า Page ท่ีต้องการเช่ือมตอ่กบั Menu แล้วคลกิ OK ดงัรูปท่ี 3.11

รูปท่ี 3.11 การเลือก Page เพ่ือเช่ือมตอ่กบั Menu (1)

จะเห็นวา่ NavigateUrl จะมีช่ือ Page เพิ่มขึน้มา จากนัน้คลกิเลือก ok ดงัรูปท่ี 3.12

รูปท่ี 3.12 การเลือก Page เพ่ือเช่ือมตอ่กบั Menu (2)

31

จะได้ Menu ท่ีสามารถเช่ือมไปยงั Page ท่ีผู้ ใช้งานได้กําหนดไว้ได้ ดงัรูปท่ี 3.13

รูปท่ี 3.13 Menu ท่ีเช่ือมตอ่กบัหน้า Page