Tag: phpmyadmin

#windows ตอนที่ 1 การแสดงคำว่า Hello World ใน Windows
จากข้อมูลใน MySQL บน IIS

การติดตั้ง IIS 8.5 + Web Platform Installer 5.0 +
PHP5.6.31 + MySQL 5.1 + PHPMyAdmin 4.0.10.20

<introduction>
“สวัสดีชาวโลก หรือ Hello World!” ซึ่งผมมีโจทย์ว่า “ต้องการแสดงข้อมูลที่เก็บไว้ใน Database บน Windows ผ่านบริการของ Web Server ต้องทำอย่างไร” ก็มีหลายทางเลือก และต้องใช้กันหลายโปรแกรมเข้ามาช่วยทำให้บริการเหล่านี้เป็นจริืงได้ การทดสอบของผมใช้ Remote Desktop และ VNC ในการเข้า Web Server ก็ได้ความช่วยเหลือจาก คุณเบนซ์ ช่วยดูเรื่องเครือข่าย เปิดให้ผมเข้าจากที่บ้านได้ แล้ว คุณเปรม ก็ช่วยทำให้มี IP จริง เชื่อมกับ Intranet IP ในที่ทำงาน ผ่านการ config ใน Firewall ขอขอบคุณฝ่ายไอทีทั้งสองท่าน น้าาาา

เดี๋ยวนี้ เทคโนโลยีพัฒนาไปเร็วมาก การจะติดตั้ง Web Server (Port 80) และ Database (Port 3306) ก็ไม่ยากที่จะทำแล้ว จะเข้าถึงบริการเหล่านี้ได้ง่าย เพียง click หรือ double click ไม่กี่ที สิ่งสำคัญคือ ผู้สนใจก็เพียงแต่หาอ่าน (read) สิ่งที่ Windows เค้ามีมาให้ (Services) ไม่มีในเครื่อง ก็ไปหา Download แล้วก็ไซร้ (Search) เข้าไปตามความสนใจ ลงลึกไปเรื่อย ๆ ถ้าสนใจซะอย่าง อะไรอะไร ก็ไม่ยาก เพราะอยู่ตรงหน้า หรือหา download ได้อยู่แล้ว

โปรแกรมบน Windows ที่ใช้ ประกอบด้วยดังนี้

1. IIS 8.5 on Microsoft Windows
2. Web Platform Installer 5.0
3. PHP 5.6.31
4. MySQL 5.1
5. PHPMyAdmin 4.0.10.20 [4.7.3]
6. Chrome Browser

</introduction>

<process>
มีขั้นตอนการติดตั้ง และเขียนโปรแกรม ดังนี้

1. โปรแกรม Remote Desktop เป็นบริการที่มากับ Windows
   ทำให้เราเข้าไปควบคุมจากระยะไกล เป็นที่นิยมกว่าโปรแกรมอื่น (สำหรับผมนะ)
   เพราะโปรแกรมนี้เป็นของ Windows อยู่แล้ว ใช้งานง่าย ไม่ซับซ้อน

   00_remote_desktop.png
   

2. โปรแกรม VNC เป็นบริการที่ คุณเบนซ์ แนะนำ
   ว่าใช้งานแทน Remote Desktop ทำให้เข้าเครื่องที่ทำงาน
   ขณะนั่งอยู่ที่บ้าน (Work at Home) ความสามารถคล้ายกัน แต่ตัวนี้มีรุ่นทดลอง 30 วัน

   00_vnc.png
   

3. เราตรวจสอบข้อมูลได้ว่าในเครื่องคอมพิวเตอร์ของเรา
   ปัจจุบันใช้ OS : Windows รุ่นอะไร
   มี RAM เท่าไร ดูใน System เมื่อเข้าผ่าน Control Panel
   นับว่าสิ่งที่ผู้ใช้ Windows ทุกคนคุ้นเคย เพราะอะไรอะไร ก็ต้องเข้าแผงควบคุม

   00_win81_64.png
   

4. การคลิ๊กที่ปุ่ม Windows หรือปุ่ม Start เดิม
   ถ้า Click ก็จะแสดง Metro UI (User Interface)
   ถ้า Right Click ก็จะแสดงรายการ ที่ต้องใช้บ่อย เริ่มจาก Program and Features

   01_start_by_click.png
   

5. การเข้า Control Panel
   สามารถเข้าผ่าน Right click ที่ปุ่ม Windows หรือ Windows-X แล้วมองขึ้นไป
   หรือพิมพ์ Control Panel ในช่อง Run หลังกด Windows-R

   02_control_panel.png
   

6. เครื่องมือบริหาร ก็จะมีอะไรให้บริหารมากมาย
   ผมทราบมาว่าในนี้ต้องมี IIS คือ Web Server ของ Windows
   แต่ไม่พบ ก็ไม่แปลก เพราะเค้าไม่ได้ติดตั้งมาให้แต่แรก
   จึงต้องไปหามาลงแล้ว มีแหล่งเก็บของ Windows ที่มี แต่ยังไม่ได้ลง

   03_administrative_tools.png

7. ใน Control Panel จะมี Program and Features
   และด้านซ้ายจะพบ Turn Windows Features on or off
   ให้คลิ๊กเข้าไป เพื่อเปิด Feature IIS ให้ทำงาน

   04_program_and_features.png

8. ไม่เห็นคำว่า IIS แต่เห็น Internet Information Services
   ก็คลิ๊ก Check เพื่อบอกว่าขอให้ติดตั้ง IIS ให้ด้วย
   ก็จะมีรายละเอียดโปรแกรมอีกมา ที่เราจะได้มากับ IIS หรือไม่ได้มาด้วย
   ถ้าไม่คลิ๊กบริการย่อย เค้าก็ติดตั้งเฉพาะ Web Server ซึ่งเป็นบริการที่ผมมองหา
   แต่บริการ FTP Server จะไม่มาด้วย อยากได้ต้องคลิ๊ก Check นะครับ
   เห็นใช่ไหมว่า FTP Server ยังไม่ถูกคลิ๊ก

   05_windows_feature_iis.png

9. เมื่อติดตั้งโปรแกรม IIS เสร็จแล้ว
   เมื่อเข้า Administrative Tools อีกครั้ง
   จะพบกับ Internet Information Services (IIS) Manager

   06_administrative_tools_iis.png

10. เมื่อเข้าไปคลิ๊กถึง Default Web Site
    จะพบว่าบริการถูก Start คือ พร้อมให้บริการ เป็น Web Server

    07_iis_start.png

11. กลับไปที่ Desktop หา Web Browser
    แล้วเปิด http://localhost

    08_localhost.png

12. ในเครื่องคอมพิวเตอร์ของเราน่าจะลง Web Browser ไว้หลายตัว
    ชื่อเรียกเครื่องก็มีหลายแบบ อาจเรียกว่า localhost
    เป็น local ip ก็ 127.0.0.1 หรือ ip จริงของเครื่องก็ได้ หรือชื่อ host ก็ได้อีก
    ลองเรียกว่า http://127.0.0.1 ก็ได้ครับ

    09_127001.png

13. ถ้าใช้ Winddows อยู่แล้ว Microsoft มีโปรแกรม Web Platform Installer
    แต่เตรียมโปรแกรมไว้มากทีเดียว ทำให้เราสั่งติดตั้งโปรแกรมในรายการ
    แล้วใช้งานได้ทันที ไม่ต้องไปทำ configuration เอง แบบ manual
    เริ่มต้นก็ไปดาวน์โหลดมาติดตั้งในเครื่องของเราก่อน ฟรีครับ

    10_web_platform_installer.png

14. ขณะดาวน์โหลด หรือติดตั้งก็รอแป๊ปนึง
    โปรแกรมไม่ใหญ่มาก แต่จะไปช้าอีกครั้งตอนติดตั้ง
    โปรแกรมย่อยที่เราเลือกในภายหลัง

    11_install_web_platform_5.png

15. มองหาคำว่า Products ด้านบน
    แล้วก็เลื่อนหาโปรแกรมที่เราสนใจ กรณีนี้ ผมสนใจภาษา PHP
    ซึ่งเป็น Server Sided Script ทำงานร่วมกับ IIS
    เมื่อเจอ PHP 5.6.31 ก็คลิ๊ก Add และ Install ด้านล่าง

    12_install_php5631.png

16. แม้จะเลือก PHP มาตัวเดียว แต่ระบบตรวจสอบว่าต้องลงโปรแกรมใดเพิ่ม
    เค้าเรียก Prerequisites เหมือนตอนเรียนหนังสือ
    จะลงวิชา Project ของปี 4 ต้องลงวิชาของปี 1 ก่อน เป็น pre กันอยู่

    13_download_php5631.png

17. จากนั้นก็รอ มี 2 progress bar คือ Download กับ Install
    โปรแกรมไม่ใหญ่ก็รอแป๊ปเดียว ขึ้นกับความเร็วเน็ตด้วย

    14_download_and_install_php5631.png

18. พอลงโปรแกรมเสร็จแล้ว
    ก็จะมีรายงานว่าลงโปรแกรมอะไรไปแล้วบ้าง
    อย่างที่เห็นผมเลือก PHP 5.6.31 ตัวเดียว แต่ชวนเพื่อนมาเพียบเลย

    15_iis_php_finish.png

19. โปรแกรม IIS มี Root Directory อยู่ที่ C:\Inetpub\wwwroot
    จะเขียนอะไรลงไป ก็เปิดให้เพื่อนมา Download หรือเข้าถึงได้
    แต่ Winddows 8 อาจกำหนด Permission  ว่า User ห้ามเขียน
    แล้วเราก็เป็น User หนึ่ง (บางกรณีเราก็เป็นเพียง User ของเครื่อง)
    ต้องเข้าไปแก้ Security ให้ User เป็นแบบ Full Control

    16_folder_permission.png

20. เปิดโปรแกรม Notepad แล้วพิมพ์ hello world
    เพราะคิดจะทำให้ใคร ๆ เข้าเครื่องของเรา และเห็นข้อมูลที่เราสร้างไว้

    17_notepad.png

21. สร้างแฟ้มชื่อ helloworld.php
    แล้วทดสอบเปิดด้วย Web Browser ในเครื่องของเรา
    ยังไม่ต้องไปลองที่ไหนไกลนัก

    18_local_hello.png

22. ลองเรียกใช้ function phpinfo() เพื่อแสดงข้อมูลของเครื่อง
    ที่ฟังก์ชันนี้พอจะแสดงออกมาได้ ก็เยอะครับ
    แล้ว save as เป็น “phpinfo.php”

    19_notepad_phpinfo_helloworld.png

23. หากเรียบร้อยแล้ว ผมอยากมี Database ไว้ใช้
    ก็เข้า Microsoft Web Platform Installer ผ่าน Metro UI
    ด้วยการคลิ๊กที่ปุ่ม Windows แล้วมองหาโปรแกรมนี้

    20_metro_screen.png

24. พบ MySQL Windows 5.1 ผมก็เลือก Add และ Install
    โปรแกรมจะถามให้เราใส่รหัสผ่านของ root
    ก็พิมพ์เข้าไปครับ เช่น “Song:letitbe” หรือ อะไรที่ชอบ

    21_mysql_51.png

25. หลังติดตั้งเสร็จก็จะรายงานว่า were successfully installed
    MySQL จะไม่ถูกติดตั้งลอย ๆ แต่เชื่อมกับ IIS และ PHP เรียกใช้กันได้เลย
    เพราะเป็นหน้าที่ของ Installer ที่ทำหน้าที่ config ให้อัตโนมัติ

    22_mysql_finish.png

26. MySQL จะเปิดบริการผ่าน port 3306
    ลองใช้ DOS ตรวจการเปิด port ด้วย
    DOS>netstat -na | find “:3306”

    23_netstat_3306.png

27. การบริหาร MySQL ผมมักใช้ phpmyadmin
    ใน xampp หรือ appserv เค้าก็ลงมาให้เลย แต่มองหาใน installer ไม่พบ
    จึงต้องหาดาวน์โหลดมาลงเองผ่านเว็บไซต์ของ phpmyadmin.net
    ได้ phpmyadmin รุ่น 4.7.3 ไม่ได้อ่านรายละเอียด
    เห็นเป็นรุ่นใหม่ ผมก็ Download มาเลย

    24_download_phpmyadmin.png

28. ทำการ unzip ลองห้อง c:\inetpub\wwwroot
    แล้วคาดว่าจะเรียกใช้งานผ่าน Web Server ได้ทันที

    25_phpmyadmin_unzip.png

29. ลองเปิดจากในเครื่อง มีหน้าจอเปิดรอรับ User และ Password
    ตามที่เคยตั้งว่า User = root Password = Song:letitbe หรือะไรที่ชอบ
    เปิดในเครื่องตนเอง เปิดจากเครื่องอื่นเรียก http://localhost ไม่ได้นะ

    26_phpmyadmin_login.png

30. ชมพูเต็มจอเลย เข้า google ใช้เลข 574 ไปช่วยหาสาเหตุ ก็ไม่พบ
    มีความเป็นไปได้หลายเรื่องที่เกิดปัญหา
    สิ่งที่ฉุกขึ้นมาในความคิดคือ รุ่นของ phpmyadmin ไม่ลงรอยกับที่อยู่ในเครื่อง
    ไปอ่านเงื่อนไขก็จริงครับ phpmyadmin 4.7.3 ต้องใช้กับ mysql 5.5
    แต่ของผมใช้รุ่น MySQL 5.1 เอง

    27_phpmyadmin_473_error.png

31. ไปสำหรวจในห้อง phpmyadmin พบแฟ้มเพียบเลย
    ในอดีตต้องมาแก้ไข config เดี๋ยวนี้ไม่ต้องล่ะครับ
    การแก้ไขก็ไม่ยากเลย ไปหา phpmyadmin รุ่นเก่า แล้วลบห้องนี้ทิ้ง

    28_phpmyadmin_folder.png

32. หลังติดตั้ง phpmyadmin 4.0.10.20 แล้ว
    ผมเรียกจากเครื่องที่บ้านผ่าน IP Address เพราะเครื่องที่ลงโปรแกรมอยู่ที่ทำงาน
    ก็ใช้งานได้ปกติ ไม่ใช่เรียกผ่าน localhost หรือ 127.0.0.1 นะครับ

    29_phpmyadmin_40.png

33. เริ่มงานจากการสร้างตาราง (Table) ในฐานข้อมูล Test
    มี 1 Field ชื่อว่า Test เป็นแบบ Integer

    30_phpmyadmin_create_table.png

34. ใส่ข้อมูลที่เป็นตัวเลขเข้าไป 1 ระเบียน
    มีค่าเท่ากับ 5

    31_phpmyadmin_insert_5.png

35. หากจะให้สมบูรณ์ต้องมีอย่างน้อย 2 Fields
    ตัวอย่างนี้สร้าง ID เป็น Auto_Increment และ Test เป็น Varchar ขนาด 50 ตัวอักษร

    32_phpmyadmin_varcha_2_fields.png

36. เขียนโปรแกรมด้วยภาษา PHP เพื่อเรียกข้อมูลจากตาราง Test มาแสดง
    โปรแกรมนี้เขียนแบบง่าย ๆ ไม่ซับซ้อน
    ผมแชร์เป็น ต.ย.23 ใน http://www.thaiall.com/php

    33_select_in_wwwroot.png

37. ผลลัพธ์กรณีเรียกข้อมูลที่มี 1 Field แต่มี 2 Records
    ผ่าน IP Address จริงจากที่บ้าน เข้าที่ทำงาน

    34_select_in_browser.png

38. ทำการ Insert ข้อมูลเข้าตารางที่มี 2 ระเบียน
    เป็นคำว่า สวัสดีชาวโลก กับ Hello world!

    35_phpmyadmin_insert.png

39. ข้อมูลเก็บแบบ UTF-8 สามารถอ่านได้ปกติ
    จากใน phpmyadmin ไม่พบปัญหาภาษาไทย
    เดี๋ยวนี้ใคร ๆ ก็ใช้ UTF-8

    36_phpmyadmin_browse.png

40. เขียนโปรแกรม และเตรียม code ให้รับกับ UTF-8
    ทั้ง charset หรือ set names หรือ encoding ของ source code

    37_select_with_utf8.png

41. ผลลัพธ์ก็ได้เห็นคำว่า สวัสดีชาวโลก สมดังมุ่งหมาย
    นี่ก็เป็นทั้งหมดที่อยากเล่าให้ฟังครับ .. ชาวโลก

    38_helloworld_in_browser.png

</process>