การติดตั้งโปรแกรม Adobe Dreamweaver CS6 , AppServ , การเชื่อมฐานข้อมูล , หน้าต่างโปรแกรม

การติดตั้งโปรแกรม Adobe Dreamweaver CS6 เบื้องต้น

Adobe Dreamweaver เป็นโปรแกรมสาหรับพัฒนาเว็บไซต์ ซึ่งมีคุณสมบัติครอบคลุมตั้งแต่การออกแบบและสร้างเว็บและสร้างเว็บเพจ,การบริหารจัดการเว็บไซต์ ตลอดไปจนถึงการพัฒนาเว็บแอพพลิเคชั่นเบื้องต้น โปรแกรมนี้ได้รับความนิยมเป็นอย่างมากเพราะมีคุณสมบัติเด่นคือใช้งานง่าย มีเครื่องมือสำหรับวางข้อความ ภาพกราฟิก ตาราง แบบฟอร์ม มัลติมิเดีย รวมทั้งองค์ประกอบต่างๆเพื่อโต้ตอบกับผู้ชมลงบนเว็บเพจได้ง่าย โดยผู้ใช้ไม่จำเป็นต้องรู้จักภาษา HTML,CSS, JavaScript และภาษาสคริปต์อื่นๆ ดังนั้นจึงเหมาะสำหรับผู้เริ่มต้นและผู้ใช้ทั่วไป นอกจากนี้ยังมีคุณสมบัติขั้นสูงอีกมากมายสาหรับนักพัฒนาเว็บไซต์มืออาชีพด้วยเช่นกัน

Dreamweaver เป็นโปรแกรมที่ช่วยให้เขียนเว็บไซต์ได้ง่ายขึ้น แก้ไขได้ง่ายขึ้น และมีเครื่องมืออำนวยความสะดวกมากมายที่มีประโยชน์ในการทำเว็บไซต์

1. แนะนำ Dreamweaver

Dreamweaver เป็นโปรแกรมสำหรับมืออาชีพที่ใช้ในการพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยมมาก มีเว็บไซต์ดังๆ มากมายที่ใช้ Dreamweaver เพื่อพัฒนาเว็บไซต์ เราจะมาดูกันว่าทำไม Dreamweaver ถึงเป็นที่นิยมมีผู้ใช้งานกันมากมาย

ช่วยให้คุณทำงานได้เร็วขึ้น นี่คือข้อดีอันดับต้นๆ ของ Dreamweaver เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขึ้นมาเพื่อให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความออกมา ซึ่งทาให้เราทำงานได้ช้าลง เพราะเราจะต้องเขียน HTML ไปและดูการแสดงผลผ่าน browser ไปว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สาหรับใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเราได้เลย โดย Dreamweaver จะทำการเขียน HTML ให้เราเองเป็น Editor ที่มีประสิทธิภาพตัวหนึ่ง

ในกรณีที่เราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น

เป็นโปรแกรมจัดการเว็บไซต์ที่ดี Dreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้น โดยมีเครื่องมือมากมาย เช่น

2.1. FTP เราสามารถแก้ไขหน้าเว็บเพจของเราและส่งไปแสดงผลที่ server ได้ทันที เพราะ Dreamwerver จะติดต่อกับ server ให้เราและแสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและแก้ไขได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ของเราสารองไว้ในเครื่องเราตลอดด้วย

2.2 Site map เป็นเครื่องมือที่ช่วยแสดงผลเว็บไซต์ของเราให้เป็นรูปร่างขึ้นมา โดยจะแสดงให้เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทำการเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือที่ดีมาก เพราะความจริงแล้วเราต้องแก้เว็บเพจของเราตลอด

3. ช่วยให้เราทำเว็บได้ง่ายขึ้น สาหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสำหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamwerver มีเครื่องมือมากมายและทำงานเชื่อมต่อกับโปรแกรมดังๆ มากมายเช่น Photoshop ,Illustrator, Flash หรือแม้แต่กระทั่งการใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ, หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย ในบทความนี้ คงทำให้มองภาพของ Dreamwerver ว่าเป็นเครื่องมือที่อำนวยความสะดวกมากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆ ที่ออกมา และช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก

2. ความต้องการระบบของโปรแกรมสำหรับ Microsoft Windows

หน่วยประมวลผลกลาง (CPU) ความเร็ว 1 GHz ขึ้นไป

หน่วยความจำแรม (RAM) 512 MB ขึ้นไป

เนื้อที่ว่างของฮาร์ดดิสก์ อย่างน้อย 1 GB ขึ้นไป

จอภาพ ความละเอียด 1280 x 800 จุด

มีซีดีรอมไดรฟ์

ระบบปฏิบัติการ Window XP หรือสูงกว่า

3. ขั้นตอนการติดตั้งโปรแกรม มีวิธีการดังนี้

1. เปิดโฟลเดอร์โปรแกรม Adobe Dreamweaver CS6

2. ดับเบิ้ลคลิกที่ไฟล์ Set-up.exe จากนั้นโปรแกรมอ้างมีการแจ้งเตือนให้เรา restart เราเลือก Ignore เพื่อดำเนินการต่อ ดังรูป

3. โปรแกรมจะทำการตรวจสอบก่อนทำการติดตั้งโปรแกรม

4. เมื่อโปรแกรมตรวจสอบเสร็จแล้ว จะเข้าสู่หน้าจอข้อกำหนดในการติดตั้งโปรแกรม ให้เราคลิก Accept

5. กรอก Serial Number แล้วคลิกที่ปุ่ม Next

6. จะเข้าสู่หน้า Option ของโปรแกรม ให้เลือก Installs

7. รอให้โปรแกรมติดตั้งจนเสร็จ

8. เมื่อติดตั้งเสร็จจะปรากฏหน้าจอดังภาพ ให้เราคลิก Close

4. ขั้นตอนการเปิดโปรแกรม Adobe Dreamweaver CS6

สำหรับ Windows7 ทำการเปิดโปรแกรม Dreamweaver โดยเข้าไปที่ เมนู Start > All Programs > Adobe Dreamweaver CS6

สำหรับ Windows8 ทำการเปิดโปรแกรม Dreamweaver โดยเข้าไปที่ เมนู Start > Apps > Adobe Dreamweaver CS6

เมื่อเปิดโปรแกรมครั้งแรก จะพบหน้าจอดังภาพ ให้คลิก Select All >> OK

จากนั้นจะเข้าสู่หน้าจอ Welcome Screen ดังรูป

Welcome Screen เป็นเครื่องมือสำหรับช่วยเลือกขั้นตอนเริ่มต้นในการใช้งานโปรแกรมโดยตัวเลือกจะแบ่งออกเป็นกลุ่มๆ ดังภาพ

หมายเลขที่ 1 Open a Recent Item เปิดไฟล์ที่เคยใช้ โดยคลิกเลือกจากรายชื่อที่แสดงอยู่ (เรียงลำดับจากที่เคยเปิดหลังสุดเป็นต้นไปหรือคลิก Open เพื่อเปิดไฟล์อื่นๆ)

หมายเลขที่ 2 Create New สร้างไฟล์ใหม่ โดยถ้าคลิก HTML จะเป็นการสร้างเว็บเพจพื้นฐานแต่ถ้าคลิกหัวข้ออื่นจะเป็นการสร้างเว็บเพจหรือไฟล์ตามชนิดนั้นๆ

หมายเลขที่ 3 ŽTop Features (videos) เป็นเส้นทางลัดสำหรับเข้าดูรายละเอียดและเทคนิคในการใช้งานต่าง ๆ ของโปรแกรมผ่านทางเว็บไซต์ของ Adobe

หมายเลขที่ 4 เปิดดูคำแนะนำการใช้โปรแกรม

หมายเลขที่ 5 ดาวน์โหลดโปรแกรมหรือดูข้อมูลบนเว็บไซต์ของ Adobe

หมายเลขที่ 6 คลิกออปชั่นนี้หากไม่ต้องการแสดง Welcome Screen อีกในครั้งต่อไป

ขั้นตอนการติดตั้ง AppServ

1. ดับเบิ้ลคลิกไฟล์ appserv-win32-x.x.x.exe เพื่อทำการติดตั้ง จะปรากฏหน้าจอตามรูปที่ 1

รูปที่ 1 ขั้นตอนการติดตั้งโปรแกรม AppServ

2. เข้าสู่ขั้นตอนเงื่อนไขการใช้งานโปรแกรม โดยโปรแกรม AppServ ได้แจกจ่ายในรูปแบบ GNU License หากผู้ติดตั้ง
อ่านเงื่อนไขต่างๆ เสร็จสิ้นแล้ว หากยอมรับเงื่อนไขให้กด Next เพื่อเข้าสู่การติดตั้งในขั้นต่อไป แต่หากว่าไม่ยอมรับเงื่อนไข
ให้กด Cancel เพื่อออกจากการติดตั้งโปรแกรม AppServ ดังรูปตัวอย่างที่ 2

รูปที่ 2 แสดงรายละเอียดเงื่อนไขการ GNU License

3. เข้าสู่ขั้นตอนการเลือกปลายทางที่ต้องการติดตั้ง โดยค่าเริ่มต้นปลายทางที่ติดตั้งจะเป็น C:AppServ
หากต้องการเปลี่ยนปลายทางที่ติดตั้ง ให้กด Browse แล้วเลือกปลายทางที่ต้องการ ตามรูปที่ 3 เมื่อเลือกปลายทางเสร็จสิ้น
ให้กดปุ่ม Next เพื่อเข้าสู่ขั้นตอนการติดตั้งขั้นต่อไป

รูปที่ 3 เลือกปลายทางการติดตั้งโปรแกรม AppServ

4. เลือก Package Components ที่ต้องการติดตั้ง โดยค่าเริ่มต้นนั้นจะให้เลือกลงทุก Package แต่หากว่าผู้ใช้งาน
ต้องการเลือกลงเฉพาะบาง Package ก็สามารถเลือกตามข้อที่ต้องการออก โดยรายละเอียดแต่ละ Package มีดังนี้
– Apache HTTP Server คือ โปรแกรมที่ทำหน้าเป็น Web Server
– MySQL Database คือ โปรแกรมที่ทำหน้าเป็น Database Server
– PHP Hypertext Preprocessor คือ โปรแกรมที่ทำหน้าประมวลผลการทำงานของภาษา PHP
– phpMyAdmin คือ โปรแกรมที่ใช้ในการบริหารจัดการฐานข้อมูล MySQL ผ่านเว็บไซต์
เมื่อทำการเลือก Package ตามรูปที่ 4 เรียบร้อยแล้ว ให้กด Next เพื่อเข้าสู่ขั้นตอนการติดตั้งต่อไป

รูปที่ 4 เลือก Package Components ที่ต้องการติดตั้ง

5. กำหนดค่าคอนฟิกของ Apache Web Server มีอยู่ด้วยกันทั้งหมด 3 ส่วน ตามรูปที่ 5 คือ
Server Name   คือช่องสำหรับป้อนข้อมูลชื่อ Web Server ของท่านเช่น www.appserv.org
Admin Email    คือช่องสำหรับป้อนข้อมูล อีเมล์ผู้ดูแลระบบ เช่น root@appserv.org
HTTP Port       คือช่องสำหรับระบุ Port ที่จะเรียกใช้งาน Apache Web Server โดยทั่วไปแล้ว Protocol
HTTP นั้นจะมีค่าหลักคือ 80 หากว่าท่านต้องการหลีกเลี่ยงการใช้ Port 80 ก็สามารถแก้ไขได้
หากมีการเปลี่ยนแปลง Port การเข้าใช้งาน Web Server แล้ว ทุกครั้งที่เรียกใช้งานเว็บไซต์
จำเป็นที่ต้องระบุหมายเลข Port ด้วย เช่น หากเลือกใช้ Port 99 ในการเข้าเว็บไซต์ทุกครั้งต้องใช้
http://www.appserv.org:99 จึงจะสามารถเข้าใช้งานได้

รูปที่ 5 แสดงการกำหนดค่าคอนฟิกค่า Apache Web Server

6. กำหนดค่าคอนฟิกของ MySQL Database มีอยู่ด้วยกันทั้งหมด 3 ส่วน ตามรูปที่ 6 คือ
Root Password        คือช่องสำหรับป้อน รหัสผ่านการเข้าใช้งานฐานข้อมูลของ Root หรือผู้ดูแลระบบ
ทุกครั้งที่เข้าใช้งานฐานข้อมูลในลักษณะที่เป็นผู้ดูแลระบบ ให้ระบุ user คือ root
Character Sets        ใช้ในการกำหนดค่าระบบภาษาที่ใช้ในการจัดเก็บฐานข้อมูล, เรียงลำดับฐานข้อมูล,
Import ฐานข้อมูล, Export ฐานข้อมูล, ติดต่อฐานข้อมูล
Old Password          หากท่านมีปัญหาเกี่ยวกับการใช้งาน PHP กับ MySQL API เวอร์ชั่นเก่า
โดยเจอ Error Client does not support authentication protocol requested by server;
                                                             consider upgrading MySQL client
ให้เลือกในส่วนของ Old Password เพื่อหลีกเลี่ยงปัญหานี้
Enable MyISAM        หากท่านต้องการใช้งานฐานข้อมูลในรูปแบบ MyISAM ให้เลือกในส่วนนี้ด้วย

รูปที่ 6 แสดงการกำหนดค่าคอนฟิกของ MySQL Database

7. สิ้นสุดขั้นตอนการติดตั้งโปรแกรม AppServ สำหรับขั้นตอนสุดท้ายนี้จะมีให้เลือกว่าต้องการสั่งให้มีการรัน Apache และ MySQL
ทันทีหรือไม่ จากนั้นกดปุ่ม Finish เพื่อเสร็จสิ้นการติดตั้งโปรแกรม AppServ

รูปที่ 7 แสดงหน้าจอขั้นตอนสิ้นสุดการติดตั้งโปรแกรม AppServ

สร้างการเชื่อมต่อฐานข้อมูล MySQL ด้วยDreamweaver (PHP+MySQL)
ในDreamweaverเองมีเครื่องมือที่ใช้ในการสร้างWeb Applicationที่รองรับหลายภาษา อาทิ PHP, ASP, JSP และรองรับการเชื่อมต่อกับฐานข้อมูลMySQL โดยที่เราไม่จำเป็นต้องเขียนคำสั่งเองให้เหนื่อย แต่เราจำเป็นจะต้องมีความรู้ด้านการเขียนโปรแกรมอยู่บ้างเหมือนกัน เพราะบางอย่างDreamweaverทำให้เราไม่ได้ เราจำเป็นจะต้องเขียนคำสั่งหรือแทรกคำสั่งเอาเอง
บทความนี้จะสอนท่านใช้Dreamweaverเชื่อมต่อกับฐานข้อมูลMySQLกันก่อนครับ ก่อนอื่นต้องตั้งไซต์ให้กับเว็บไซต์ของท่านก่อนนะครับ อ่านได้จากบทความนี้ครับ->เซตค่า Manage Site ให้กับ Dreamweaver
+++ เมื่อตั้งไซต์เสร็จแล้ว จากนั้นให้สร้างโฟลเดอร์โปรเจ็คขึ้นมา ของผมตั้งชื่อว่า dreamtest และสร้างไฟล์ index.php ในโฟลเดอร์ ดังรูป

สร้างโฟลเดอร์และไฟล์โปรเจ็คของเรา

+++ คลิกเปิดไฟล์ index.php แล้วทำตามดังรูป

วิธีสร้างไฟล์เชื่อมต่อกับฐานข้อมูล(Database) MySQL

1.ไปที่ DATABASES Panel จะแสดงอยู่ทางขวามือ ถ้าไม่เจอให้ไปที่เมนู Window เลือก Databases จากนั้นให้คลิกที่ปุ่ม + แล้วเลือก MySQL Connection
2.ระบุข้อมูลเชื่อมต่อฐานข้อมูล DbConnect คือชื่อการเชื่อมต่อกับฐานข้อมูล
3.เมื่อระบุข้อมูลเชื่อมต่อกับฐานข้อมูลเสร็จแล้ว ให้คลิกที่ปุ่ม select
4.เลือกฐานข้อมูลของเรา ของผมเลือก db_exshop
5.คลิกปุ่ม OK เมื่อเลือกฐานข้อมูลตามที่ต้องการแล้วหน้าต่างนี้จะปิดลง
6.คลิกปุ่ม OK เพื่อสร้างการเชื่อมต่อกับฐานข้อมูล
จะได้ผลลัพธุ์ดังรูป

จะเห็นได้ว่าใน DATABAES Panel Dreameweaver จะแสดงรายละเอียดของฐานข้อมูลที่เราเลือกทั้งหมด ไม่ว่าจะเป็น Stored procedures, Tables และ Fields ทั้งหมด, views และใน FILES Panel มันจะสร้างโฟลเดอร์ Connections และข้างในจะมีไฟล์ชื่อ DbConnect.php ซึ่งเป็นไฟล์ที่ Dreamweaver สร้างให้เรา และข้างในไฟล์จะเก็บคำสั่งเชื่อมต่อกับฐานข้อมูล ซึ่งจะเขียนด้วยภาษาPHPดังรูป