IT241-Lab05 WordPress Installation

การติดตั้ง MySQL Server

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

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

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

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

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

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

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

การติดตั้ง phpMyAdmin service

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

version: "3.8"
services:
  mysql:
    image: "mysql:8.0.33"
    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_ARBITRARY=1

การติดตั้ง WordPress service

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

version: "3.8"
services:
  mysql:
    image: "mysql:8.0.33"
    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_ARBITRARY=1

  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

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

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

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

ขั้นตอนที่ 4. Start ทุก Docker services ด้วยคำสั่ง docker-compose up -d ดังแสดงต่อไปนี้

PS C:\workspaces\it241> docker-compose up -d
[+] Running 4/4
 ✔ Network it241_default         Created         0.0s
 ✔ Container it241-mysql-1       Started         0.7s
 ✔ Container it241-wordpress-1   Started         1.2s
 ✔ Container it241-phpMyAdmin-1  Started         1.3s

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

PS C:\workspaces\it241> tree
C:.
└────workspaces
     └───it241
         ├───mysql-data
         │   └─── ...
         ├───wordpress
         │   └─── ...
         └───docker-compose.yaml

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

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

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

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

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

...
/** 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

Server: mysql
Username: root
Password: 1234

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

การตั้งค่า WordPress

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

ให้เลื่อกรายการ English (United States) จากนั้นกดปุ่ม Continue จากนั้น WordPress จะแสดงหน้าจอให้ตั้งค่าครั้งแรกต่าง ๆ ดังแสดงต่อไปนี้

เมื่อกรอกข้อมูลเสร็จแล้ว

จะแสดงหน้าเว็บให้ลงชื่อเข้าสู่ระบบ ในตอนนี้เรามีแค่ผู้ใช้เดียวคือ Admin

เมื่อเข้าสู่หน้าเว็บด้วยผู้ใช้ที่เป็น Admin จะมีรายการเมนูให้สร้าง post, page, media, user, และเครื่องมือต่าง ๆ

หากไม่ได้ลงชื่อเข้าสู่ระบบให้เข้าไปที่ลิงค์ url: http://localhost:3002

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

เพิ่ม "define('FS_METHOD', 'direct');" ลงไปไปไฟล์ wp_config.php ในตำแหน่งต่อไปนี้
...
/** The database collate type. Don't change this if in doubt. */
define('DB_COLLATE', getenv_docker('WordPress_DB_COLLATE', ''));

define('FS_METHOD', 'direct');  
...

แบบฝึกหัดเพิ่มเติม

ให้นักศึกษาแก้ไขหน้า page “Simple Page” ของ WordPress โดยแสดงข้อมูล Profile ของนักศึกษาดังแสดงในตัวอย่างต่อไปนี้

** นักศึกษาทำเป็นภาษาไทยหรืออังกฤษก็ได้

** ให้นักศึกษาเพิ่มเติมข้อมูลอื่น ๆ เช่น ประวัติการศึกษา ความสามารถพิเศษ และอื่น ๆ พร้อมทั้งตกแต่งให้สวยงาม