Business

Professional Open Source

โอเพนซอร์สมืออาชีพ

ออกแบบเว็บไซต์ด้วย Dreamweaver CS6 + MySQL (4)

การสร้างไฟล์ CSS สำ�หรับใช้ใน Webpage มีหลายวิธี ขึ้นอยู่กับความต้องการหรือพื้น
ความรู้ของเรา แต่การจะนำ�ไฟล์ CSS ไปใช้ใน Webpage นั้น เราจะต้องทำ�ให้ไฟล์ CSS ที่สร้าง
มานี้ รู้จักกับไฟล์ Webpage ก่อน โดยวิธีนำ�เข้า “import” และวิธีเชื่อมโยง Link มีวิธีดังนี้
1. เปิด Webpage ชือ่ index.php (เป็นไฟล์ทเ่ี ราต้องการเรียกใช้ไฟล์ CSS ชือ่ style.css)
2. ที่ Window > Extensions > Adobe BrowserLab เลือกคลิกที่แท็บ “CSS STYLES”
แล้วคลิกปุ่มการเชื่อมโยง
3. คลิกปุ่ม Browse แล้วเลือกไฟล์ชื่อ style.css ที่อยู่ในโฟลเดอร์ “myweb” ในไดร์ฟ C
4. เลือกวิธีนำ�เข้าไฟล์แบบ Link หรือ Import ในที่นี้เลือกเป็นแบบ Link
5. เลือกสื่อที่จะใช้แสดงผล เลือก All หมายถึง ใช้กับสื่อสารทุกประเภท
6. คลิกที่ OK บันทึกการเปลี่ยนแปลง
7. จะพบว่าไฟล์ CSS ชื่อ style.css ถูกนำ�เข้ามาโยงกับไฟล์ index.php เรียบร้อยแล้ว
8. ให้ลองพิมพ์ข้อความในไฟล์ index.php แล้วลอง Link ไปไฟล์อื่น จะพบว่าข้อความที่
เรา Link มีการเปลี่ยนแปลงตามที่ได้สร้างคำ�สั่งไว้ในไฟล์ style.css หากเราต้องการแก้ไขรูปแบบ
ข้อความให้เข้าไปแก้ไขที่ไฟล์ style.css เท่านั้น รูปแบบข้อความทุกไฟล์ที่ถูกเชื่อมโยงด้วย style.
css ก็จะเปลี่ยนแปลงด้วย
9. กดปุ่ม F12 ที่แป้นพิมพ์ เพื่อเข้าหน้า Webpage จะพบว่า รูปแบบข้อความที่เรา
Link จะมีการเปลี่ยนแปลงโดยเปลี่ยนจากสีน้ำ�เงินเป็นสีแดงสลับกัน เป็นต้น
กล่าวเน้นย้ำ�อีกครั้งว่า เราได้สร้างไฟล์ index.php และ style.css เก็บไว้ที่ไดร์ฟ C:/
AppServ/www/myweb เสร็จเรียบร้อยแล้ว ขั้นตอนถัดไปจะเป็นการสร้างไฟล์และการเชื่อมต่อ
ฐานข้อมูล
ในการสร้างเว็บไซต์ด้วย Dreamweaver CS6 ให้เปลี่ยนจาก “Webpage” ที่มีลักษณะ
ข้อมูลคงที่ หรือเว็บแบบ “Static Website” เว็บไซต์ที่ตอบสนองทางเดียว ไม่มีการติดต่อกับ
ฐานข้อมูล และไม่สามารถเก็บข้อมูลได้ เป็นการนำ�เสนอข้อมูลแบบทางเดียว การจัดการหน้า
“Webpage” ให้มีการโต้ตอบกับผู้ใช้งานหรือผู้ที่เข้ามาเยี่ยมชม โดยข้อมูลที่หน้า “Webpage”
สามารถเปลี่ยนแปลงได้ตลอดเวลาหรือเรียกว่า เว็บแบบ “Dynamic Website” จะแสดงผลแตก
ต่างกันไปเมื่อมีการเรียกใช้ในแต่ละครั้ง ตามเงื่อนไขที่กำ�หนด จะต้องอาศัยฐานข้อมูลตอบสนอง
“Database” เข้ามาช่วยในการจัดเก็บข้อมูล แล้วนำ�ข้อมูลมาแสดงหน้า “Webpage” การเตรียม
พร้อมก่อนสร้าง “Webpage” ประเภทนี้ เราจะต้องติดตั้งชุดโปรแกรม AppServ สำ�หรับทดสอบ
คำ�สั่งที่เกิดขึ้นหรือคำ�สั่งที่เราสร้างขึ้นมาจาก Dreamweaver CS6 ไว้แล้วก่อนหน้านี้ สามารถ
ดาวน์โหลดได้ฟรีที่ http://www.appservenetwork.com
ข้อมูลพื้นฐานของโปรแกรม
Apache Web Server: ใช้ทำ�หน้าที่จำ�ลองเครื่องของเราให้เป็น Web Server ใช้ทดสอบ
โปรแกรม
PHP Script Language: ทำ�หน้าที่เปนตัวแปรภาษา และประมวลผลคำ�สั่ง
MySQL Database: ไว้ทำ�หน้าที่เป็นฐานข้อมูล หรือเป็น Database Server
phpMyAdmin Database Manager: ทำ�หน้าที่ช่วยบริหารจัดการฐานข้อมูล MySQL
ผ่านหน้าเว็บไซต์ที่ Localhost หรือ ที่ http://127.0.0.1 ในเครื่องของเราหรือเครื่อง Server ที่ใช้
Apache ทดสอบโปรแกรม นั่นเอง
มีขั้นตอนการติดตั้งดังนี้
1.ดับเบิลคลิกไฟล appserv-win32-2.5.10.exe หลังจากนั้นคลิก Next
2.กําหนดไดเร็คทอรี่ที่จะติดตั้งและคลิก Next (ค่า defaultคือ C:\AppServ)
3.เลือกการติดตั้งแบบ Typical หลังจากนั้นคลิก Next
4.กําหนดชื่อ WebServer หลังจากนั้นคลิก Next
Server Name: localhost
HTTP Port: 80
5.กาํ หนด username, password และ Character set ของ MySQL หลังจากนัน้ คลิก Next
User Name: root
Password: 123456 อะไรก็ได้แต่ต้องจดจำ�
Charset: latin1
ชุดติดตั้งจะทำ�การติดตั้งโปรแกรมจนกระทั่งเสร็จสิ้น
6.คลิกเพื่อเช็คเลือกให้ Start Apache และ MySQL เมื่อเปิดเครื่องใหม่ทุกครั้งหลังจาก
นั้นคลิก Close
7.ทดสอบการติดตั้งโดยเปิดเว็บเบราเซอร์ ด้วยวิธีการพิมพ์ http://localhost
กลับมาสรุปให้เข้าใจ เราจะทำ�การสร้างเว็บไซต์ด้วย Dreamweaver CS6 ให้เป็น
“Webpage” แบบ “Dynamic” มีฐานข้อมูล MySQL แล้วตั้งชื่อไฟล์ที่ใช้ในโปรแกรมของเราให้มี
นามสกุล “.php” โดยลดการเขียนโค๊ดคำ�สั่งต่างๆลงไปนั่นเอง
การสร้างเว็บไซต์ด้วย Dreamweaver CS6 ให้เป็น “Webpage” แบบ Dynamic จะ
ต้องมีฐานข้อมูล “Database MySQL” ที่เป็นแหล่งในการเก็บรวบรวมข้อมูลประเภทตาราง
“Table” ต่างๆ แต่ละตารางประกอบด้วยข้อมูลที่อยู่ในรูปแบบของแถว “row” มีข้อมูลแต่ละแถว
เรียกว่า “record” และข้อมูลที่อยู่ในรูปแบบของ “column” มีข้อมูลแต่ละคอลัมน์ เรียกว่า ฟิลด์
“field” จะมีการเชื่อมโยงข้อมูลระหว่างตาราง “Table” ที่เกี่ยวข้องกันโดยอาศัยฟิลด์ “field” ที่มี
ค่าตรงกัน เรียกว่า คีย์ “Key” แบ่งเป็น 2 ประเภท ได้แก่
1. คีย์หลัก “Primary Key” เป็นคีย์ ที่มีข้อมูลในแต่ละฟิลด์ “field” ไม่ซ้ำ�กัน เช่น
รหัสโรงเรียน เลขบัตรประชาชน หรือที่เรียกกันว่า id หากมีการสร้างฐานข้อมูล “Database” ใน
phpMyAdmin มักจะมีชื่อ id ในตารางที่เราสร้างเสมอ ซึ่งสามารถเปลี่ยนชื่อได้
2. คีย์รอง “Foreign Key” เป็นฟิลด์ “field” ใช้สำ�หรับเชื่อมโยงกับคีย์หลัก “Primary
Key” ของตารางอื่นๆ มีค่าซ้ำ�กันได้
การเลือกใช้ชนิดของข้อมูลในฐานข้อมูล “Database MySQL” เราจำ�เป็นต้องเลือกใช้
ให้เหมาะสมเพื่อให้การทำ�งานได้อย่างมีประสิทธิภาพ รวดเร็ว ไม่ซับซ้อน เช่น ข้อมูลประเภท
ตัวเลข กำ�หนดเป็น INT, ข้อมูลประเภทตัวอักษร ที่มีการจำ�กัดความยาวไม่เกิน 255 ตัวอักษร จะ
กำ�หนดเป็น CHAR หรือ VARCHAR, ข้อมูลประเภทตัวอักษร ที่เก็บได้มากถึง 65,535 ตัวอักษร
จะกำ�หนดเป็น TEXT, ข้อมูลประเภทวันที่ จะกำ�หนดเป็น DATE, ข้อมูลประเภทเวลา จะกำ�หนด
เป็น TIME เป็นต้น

นายสายัน สุขเฉย
ผู้อำ�นวยการศูนย์เทคโนโลยีสารสนเทศเพื่อการศึกษา(ITEC)