2026-08-02 · 5 min read

10306241 Lab05: ระบบฐานข้อมูลเบื้องต้นด้วย phpMyAdmin และ WordPress บน XAMPP และ Docker

ITSCI LaboratoryLab05 WordPress phpMyAdmin MySQL Docker XAMPP WebDevelopment Database ITLab

title: ระบบฐานข้อมูลเบื้องต้นด้วย phpMyAdmin การทำงานร่วมกับ Wordpress

ระบบฐานข้อมูลเบื้องต้นด้วย phpMyAdmin การทำงานร่วมกับ Wordpress

บทนำ
การติดตั้ง MySQL Server, phpMyAdmin และ WordPress ด้วยโปรแกรม XAMPP สำหรับระบบปฏิบัติการ Window
Pre-Lab
การติดตั้ง MySQL Server
การติดตั้ง phpMyAdmin service
การติดตั้ง Wordpress service
การตั้งค่า Wordpress
แบบฝึกหัดเพิ่มเติม

บทนำ {#overview}

ปฏิบัติการนี้คือการติดตั้ง MySQL Server, phpMyAdmin, และ WordPress ด้วย Docker โดยนักศึกษาทำตามลำดับขั้นตอนที่กำหนดให้ โดยนักศึกษาพิมพ์คำสั่งต่าง ๆ ของ Docker ตามที่กำหนดให้ ซึ่งความหมายและการทำงานต่าง ๆ ของคำสั่ง Docker จะอธิบายอีกทีภายหลัง อย่างไรก็ตามคำสั่งต่าง ๆ ของ Docker ไม่ใช่วัตถุประสงค์หลักของวิชา ดังนั้นเราจะใช้ค่า config ของ Docker ต่าง ๆ ที่จำเป็นต้องใช้เท่านั้น

วัตถุประสงค์หลักในปฏิบัติการนี้คือนักศึกษาทุกคนจะต้องติดตั้ง MySQL Server, phpMyAdmin, และ WordPress โดยใช้คำสั่ง Docker ที่กำหนดให้

การติดตั้ง MySQL Server, phpMyAdmin และ WordPress ด้วยโปรแกรม XAMPP สำหรับระบบปฏิบัติการ Window {#xampp-install}

ขั้นตอนที่ 1: ดาวน์โหลดโปรแกรม XAMPP installer package จากเว็บไซต์ ให้เลือกดาวน์โหลดเวอร์ชั่นล่าสุด และตามระบบปฏิบัติการทีใช้ได้ที่ https://www.apachefriends.org/index.html

ขั้นตอนที่ 2: เลือกดาวน์โหลดโปรแกรม XAMPP for Windows ขึ้นอยู่กับระบบปฏิบัติการ (OS) ของเครื่องผู้ใช้งาน เวอร์ชัน XAMPP 8.2.12 (PHP 8.2.12) ณ วันที่ 15 สิงหาคม 2563 จากนั้นกด Save ไฟล์ตัวติดตั้งไว้ที่เครื่องก่อน หรือจะเลือก Run ติดตั้งโปรแกรมก็สามารถทำได้เลย

ขั้นตอนที่ 3: จากนั้นไปที่ไฟล์ติดตั้งทำการติดตั้งโปรแกรม กด OK เมื่อระบบมีการแจ้งเตือนเรื่องของการกำหนดสิทธิ์การใช้งานระบบกับการติดตั้งโปรแกรม XAMPP เพื่อป้องกันปัญหานักศึกษาอาจติดตั้งไปยังไดร์อื่นนอกจากไดร์ C เช่น D หรือ E เป็นต้น

ขั้นตอนที่ 4: คลิกเลือกส่วนประกอบของโปรแกรมที่ต้องการติดตั้ง โดยในที่นี้ให้เลือกคลิกทุกตัว

ขั้นตอนที่ 5: เปิดโปรแกรม XAMPP จาก Control Panel Application โดยไปที่ directory ที่นักศึกษาติดตั้งโปรแกรมไว้ เช่น D:\xampp จากนั้นเรียกใช้คำสั่ง xampp-control

ขั้นตอนที่ 6: Start Apache, MySQL services โดยกดปุ่ม start

ขั้นตอนที่ 7: เปิดบราวเซอร์ไปที่ http://localhost ดังแสดงในรูป

นักศึกษาสามารถเปิด phpMyAdmin จากเมนูด้านบนขวา

ขั้นตอนที่ 8: คลิกเมนู phpMyAdmin จะปรากฎดังรูป

ขั้นตอนที่ 9: คลิกลิงค์ New เพื่อสร้างฐานข้อมูลสำหรับ WordPress ตั้งชื่อเป็น wordpress_db จากนั้นกดปุ่ม Create

ขั้นตอนที่ 10: ดาวน์โหลด WordPress จากลิงค์ https://itsci.mju.ac.th/~watcharin/downloads/it241/wordpress-6.6.zip หรือนักศึกษาอาจดาวน์โหลดจาก Official Site ได้ https://wordpress.org/download/ จากนั้นแตกไฟล์ไว้ใน directory ที่ติดตั้งโปรแกรม xampp เช่น D:\xampp\htdocs แต่ก่อนคัดลอกให้ลบไฟล์ต่าง ๆ ใน D:\xampp\htdocs ก่อน (นักศึกษาอาจ backup โดยคัดลอกไปเก็บไว้ที่อื่นก่อนได้) หลังจากแตกไฟล์ wordpress-6.6.zip แล้วดังแสดงในรูป

ขั้นตอนที่ 11: เปิดบราวเซอร์ไปที่ http://localhost ดังแสดง ให้กดปุ่ม Let's go!

ขั้นตอนที่ 12: กรอกข้อมูลดังแสดงในรูป (Password ให้ว่างไว้)

ขั้นตอนที่ 13: กดปุ่ม Run installation

ขั้นตอนที่ 14: ตั้งชื่อเว็บและรหัสผ่านของ Admin จากนั้นกดปุ่ม Install WordPress เมื่อระบบติดตั้งเสร็จจะปรากฎหน้าจอให้กดลิงค์ Log In ให้นักศึกษากรอกรหัสที่ตั้งไว้ Username: admin และ Password: 1234

ขั้นตอนที่ 15: เสร็จสิ้นขั้นตอนการติดตั้ง

Pre-Lab {#prelab}

ให้นักศึกษาเปิดโปรแกรม Docker โดยโปรแกรมจะแสดงหน้าจอดังแสดงต่อไปนี้

การติดตั้ง MySQL Server {#mysql-server}

การติดตั้ง MySQL Server ด้วย Docker ประกอบไปด้วยขั้นตอนต่าง ๆ ดังต่อไปนี้

ขั้นตอนที่ 1. ให้นักศึกษาสร้าง directory ชื่อ it241 ในเครื่องคอมพิวเตอร์ของตัวเอง เช่นสร้างไว้ที่ C:\workspaces\it241

หรือนักศึกษาอาจสร้างใน directory อื่นได้ตามต้องการ เช่น D:\workspaces\it241 หรือ E:\workspaces\it241 เป็นต้น

TEXT

PS C:\workspaces\it241> tree
C:.
└────workspaces
     └───it241

ขั้นตอนที่ 2. ให้นักศึกษาสร้างไฟล์ชื่อ docker-compose.yaml ไว้ใน directory ที่นักศึกษาได้สร้างขึ้น เช่น C:\workspaces\it241\docker-compose.yaml

TEXT

PS C:\workspaces\it241> tree
C:.
└────workspaces
     └───it241
         └───docker-compose.yaml

ขั้นตอนที่ 3. สร้าง MySQL Server service โดยพิมพ์คำสั่งดังต่อไปนี้ลงในไฟล์ docker-compose.yaml

YAML

services:
  mysql:
    image: "mysql:latest"
    restart: always
    volumes:
      - ./mysql-data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=1234
      - MYSQL_DATABASE=wordpress_db

ขั้นตอนที่ 4. รันและทดสอบ โดยใช้คำสั่ง docker-compose up -d (Docker compose คือคำสั่ง command line ดังนั้นจำเป็นต้องเปิด Terminal เพื่อให้ Docker Compose ทำงาน)

หากเป็นการรันครั้งแรก Docker จะโหลด MySQL Image และติดตั้งระบบฐานข้อมูลให้รอประมาณ 1-2 นาที

ขั้นตอนที่ 5. เมื่อ Docker ติดตั้งค่าต่าง ๆ เสร็จเรียบร้อยให้รันคำสั่ง docker-compose down เพื่อหยุดการทำงานก่อนเพื่อติดตั้ง service อื่น ๆ ในขั้นตอนต่อไป

การติดตั้ง phpMyAdmin service {#phpmyadmin}

ขั้นตอนที่ 1. เพิ่ม phpMyAdmin service โดยเพิ่มคำสั่งดังต่อไปนี้ในไฟล์ docker-compose.yaml ให้ต่อจาก mysql service ดังแสดงต่อไปนี้

YAML

services:
  mysql:
    image: "mysql:latest"
    restart: always
    volumes:
      - ./mysql-data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=1234
      - MYSQL_DATABASE=wordpress_db
 
  phpMyAdmin:
    image: phpmyadmin:latest
    restart: always
    ports:
      - "3001:80"
    depends_on:
      - mysql
    environment:
      - PMA_HOST=mysql
      - PMA_PORT=3306
      - MYSQL_ROOT_PASSWORD=1234
      - UPLOAD_LIMIT=200M

ขั้นตอนที่ 2. รันและทดสอบ โดยใช้คำสั่ง docker-compose up -d

ขั้นตอนที่ 3. เปิดบราวเซอร์พิมพ์ URL http://localhost:3001/ ดังแสดงต่อไปนี้ (กรอก Username: root และ Password: 1234)

ขั้นตอนที่ 4. รันคำสั่ง docker-compose down เพื่อหยุดการทำงานก่อนเพื่อติดตั้ง service อื่น ๆ ในขั้นตอนต่อไป

หมายเหตุ: นักศึกษาสามารถศึกษาการติดตั้งค่าต่าง ๆ ของ Docker phpMyAdmin เพิ่มเติมได้ที่ https://github.com/wildscamp/docker-phpmyadmin

การติดตั้ง Wordpress service {#wordpress}

ขั้นตอนที่ 1. เพิ่ม Wordpress service โดยเพิ่มคำสั่งดังต่อไปนี้ในไฟล์ docker-compose.yaml

YAML

services:
  mysql:
    image: "mysql:latest"
    restart: always
    volumes:
      - ./mysql-data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=1234
      - MYSQL_DATABASE=wordpress_db
 
  phpMyAdmin:
    image: phpmyadmin:latest
    restart: always
    ports:
      - "3001:80"
    depends_on:
      - mysql
    environment:
      - PMA_HOST=mysql
      - PMA_PORT=3306
      - MYSQL_ROOT_PASSWORD=1234
      - UPLOAD_LIMIT=200M
 
  wordpress:
    image: wordpress:latest
    restart: always
    ports:
      - "3002:80"
    depends_on:
      - mysql
    environment:
      - WORDPRESS_DB_HOST=mysql
      - WORDPRESS_DB_USER=root
      - WORDPRESS_DB_PASSWORD=1234
      - WORDPRESS_DB_NAME=wordpress_db
    volumes:
      - ./wordpress:/var/www/html
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini

ขั้นตอนที่ 2. สร้างไฟล์ uploads.ini ไว้ที่เดียวกับไฟล์ docker-compose.yaml

TEXT

C:.
└───workspaces
    └───it241
        ├───mysql-data
        │   └───...
        ├───docker-compose.yaml
        └───uploads.ini

ขั้นตอนที่ 3. กรอกข้อมูลในไฟล์ uploads.ini การกำหนดค่านี้จะทำให้สามารถติดตั้ง Extension หรือ Plugin โดยการ upload ขั้นตอนนี้จะทำให้ WordPress สามารถ download และติดตั้ง plugins ไฟล์ที่มีขนาดใหญ่ได้ ซึ่งปกติแล้ว PHP จะจำกัดขนาดไฟล์ในการ upload เพิ่มโค้ดดังแสดงต่อไปนี้

INI

file_uploads = On
memory_limit = 500M
upload_max_filesize = 500M
post_max_size = 500M
max_execution_time = 600

ขั้นตอนที่ 4. รันและทดสอบ Docker services ด้วยคำสั่ง docker-compose up -d ดังแสดงต่อไปนี้ (รอประมาณ 1-2 นาทีเพื่อให้ wordpress โหลดและติดตั้งค่าต่าง ๆ)

หลังจากรันคำสั่ง รายการ files และ directories ใน C:\workspaces\it241\wordpress ควรแสดงดังต่อไปนี้

TEXT

C:.
└───workspaces
    └───it241
        ├───mysql-data
        │   └───...
        ├───wordpress
        │   └───...
        ├───docker-compose.yaml
        └───uploads.ini

ตรวจสอบความถูกต้องของการติดตั้ง

รายละเอียดของ services ต่าง ๆ ที่ปรากฎในหน้า Docker Desktop ทุก services จะต้องมีสถานะ Running ดังแสดงต่อไปนี้

ขั้นตอนที่ 5. เพิ่มโค้ดในไฟล์ wp_config.php ด้วยโค้ดด้านล่างต่อไปนี้

TEXT

C:.
└───workspaces
    └───it241
        ├───mysql-data
        │   └───...
        ├───wordpress
        │   ├───...
        │   ├───wp_config.php  <<- แก้ไขไฟล์นี้
        │   └───...
        ├───docker-compose.yaml
        └───uploads.ini

แทรกโค้ดไปในตำแหน่งที่กำหนดให้ดังต่อไปนี้ จะทำให้การติดตั้ง Extension สามารถติดตั้งได้โดยไม่ต้องใช้ FTP Protocol (ประมาณบรรทัดที่ 66)

PHP

...
/** The database collate type. Don't change this if in doubt. */
define('DB_COLLATE', getenv_docker('WordPress_DB_COLLATE', ''));
 
define('FS_METHOD', 'direct');
...

เข้าสู่ phpMyAdmin โดยพิมพ์ที่ url: http://localhost:3001

TEXT

Username: root
Password: 1234

เมื่อ login แล้วจะเข้าสู่หน้าจอ

การตั้งค่า Wordpress {#wordpress-setting}

เข้าสู่ Wordpress โดยไปที่ url: http://localhost:3002/wp-admin จะปรากฎหน้าเว็บดังแสดงต่อไปนี้

ให้เลือกรายการ English (United States) จากนั้นกดปุ่ม Continue จากนั้น Wordpress จะแสดงหน้าจอให้ตั้งค่าครั้งแรกต่าง ๆ ดังแสดงต่อไปนี้ (บางครั้งหน้านี้อาจไม่ปรากฎขึ้นอยู่กับเวอร์ชัน wordpress ในช่วงเวลาที่นักศึกษาทำการติดตั้ง)