Basic Laravel 8 and React JS With Docker Online

วันที่
วิทยากร Frontend
Angular, React, NextJS, VueJS,
Bootstrap,TailwindCSS
Backend
PHP, Python, Java, NodeJS, ASP.net
อ.สามิตร โกยม
ปริญญาโทคณะเทคโนโลยีสารสนเทศ
Database
มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ MySQL, PostgreSQL, MS SQL Server,
MongoDB
Mobile
Java, Kotlin, Objective C, Swift, Cordova,
ionic, Flutter
DevOps
Git, Github, Gitlab, Docker,
Kubernetes
ดาวน์โหลดเอกสารประกอบการอบรม
bit.ly/3oZq9RI
www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส
Course Outline
Basic Laravel 8 and React JS with Docker
Module 1: การเตรียมเครื่องมือและความพร้อมทั้งบน Mac และ Windows

Module 2: แนะนาภาพรวมการใช้งาน Docker
Module 3: พื้นฐานการทางานกับ Laravel 8
Module 4: พื้นฐานการทางานกับ React.js
Module 5: การใช้ React กับ REST API
วันที่
https://drop.com/buy/stack-overflow-the-key-
macropad?clickid=wE6VhJ23jxyIUEQVtuydD0F3UkBVIJx0%3A0rn1M0&irgwc=1&utm_term=252901&utm_content=Skimbit%20Ltd.&utm_medium=affiliate&utm_source=impactradius&utm_placement=theverge.com&utm_keyword=&mode=shop_o
pen&utm_campaign=10078&utm_network=4148#overview&referrer=theverge.com&sref=https://www.theverge.com/2021/9/29/22700522/stack-overflow-macropad-mechanical-keyboard-specs&xcust=___vg__p_22464563__t_w__d_D
Module 1:
การเตรียมเครื่องมือและความ
พร้อมทั้งบน Mac และ Windows
• แนะนาสเปกและคุณสมบัติเครือ ่ งที่จะติดตัง
้
เครื่องมือสาหรับ docker
• ขั้นตอนการติดตั้ง Docker desktop บน Windows
10 Pro
• ขั้นตอนการติดตั้ง Docker Toolbox สาหรับ
Windows รุ่นเก่ากว่า 10 Pro
• การติดตั้ง Docker desktop บน MacOS
• ติดตั้ง Visual Studio Code และส่วนเสริม Docker
ที่จาเป็น

โปรแกรม (Tool and Editor) ที่ใช้อบรม
1. Docker Desktop
2. Visual Studio Code พร้อมส่วนเสริมที่จาเป็น
3. Node.js 14.x+ (ใช้งานได้ตั้งแต่ V.14 ขึ้นไป)
4. Git 2.3.x
System Requirements Windows
Docker Engine 20.10.9

Docker Desktop 4.10
• Windows 10 64-bit: Pro 2004 (build 19041) or higher, or Enterprise or Education

1909 (build 18363) or higher.
• For Windows 10 Home, see System requirements for WSL 2 backend.
• Hyper-V and Containers Windows features must be enabled.
• The following hardware prerequisites are required to successfully run Client Hyper-
V on Windows 10:
• 64 bit processor with Second Level Address Translation (SLAT)
• 4GB system RAM
• BIOS-level hardware virtualization support must be enabled in the BIOS settings
https://docs.docker.com/desktop/windows/install/

System Requirements Old Windows
Windows 7/8 or Windows 10 Home Edition
https://github.com/docker-archive/toolbox/releases

ติดตั้ง Docker Desktop
วิดีโอแนะนาขั้นตอนการติดตั้ง Docker Desktop อย่างละเอียด
https://www.youtube.com/watch?v=Uo5rkcZFHcA

Download Docker Desktop for Windows
https://hub.docker.com/editions/community/docker-ce-desktop-windows

ติดตั้ง Docker Desktop
วิดีโอแนะนาขั้นตอนการติดตั้ง Docker Desktop อย่างละเอียด
https://www.youtube.com/watch?v=Lbr3FnsfAAU

Download Docker Desktop for MacOS
https://hub.docker.com/editions/community/docker-ce-desktop-mac

ติดตั้ง Visual Studio Code
ติดตั้ง Visual Studio Code พร้อมส่วนเสริมที่จาเป็น
เข้าไปดาวน์โหลด Visual Studio Code ได้ที่ https://code.visualstudio.com

การติดตั้งส่วนเสริม (Extension) ของ Visual Studio Code

Extension พื้นฐานสาหรับ Docker & Laravel & React
1. Beautify by HookyQR
2. Color Picker by anseki
3. AutoFileName by JerryHong
4. Material Icon Theme by Philipp Kief
5. Docker by Microsoft
6. Laravel Snippets by Winnie Lin
7. Laravel Blade Snippets by Winnie Lin
8. Laravel Artisan by Ryan Naddy
9. ES7 React/Redux/GraphQL/React-Native snippets by dsznajder
10.html to JSX by Riaz Laskar
11.Bracket Pair Colorizer by CoenraadS
12.One Dark Pro by binaryify
การเปลี่ยน Theme และ Config ค่าเริ่มต้น

การเปลี่ยน Theme และ Config ค่าเริ่มต้น

การตรวจสอบความเรียบร้อยของเครือ
่ งมือที่ติดตั้ง
เปิด Command Prompt บน Windows หรือ Terminal บน Mac ขึ้นมาป้อนคาสั่งดังนี้
Docker
docker --version
VS Code
code -v
ติดตั้ง Node.js
Download Node.js V.14.15.x
https://nodejs.org/download/release/v14.15.0/
หมายเหตุ
ใช้ Node.js V 16.14LTS หรือ 17 ก็ได้เช่นเดียวกัน

แต่เครื่องผู้สอนใช้ Node.JS V 14.x ครับ
ติดตั้ง Node.js V.14.15.x




node -v npx -v
npm -v

ติดตั้ง git
www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

https://git-scm.com/

git --version

Module 2:
แนะนาภาพรวมการใช้งาน Docker
• Workflow ในการทางานกับ Docker
• เริ่มต้นใช้งาน Hello World Docker กัน
• เริ่มต้นสร้าง Container แรกจาก Images ที่ดึงมา
• การ Stop และ Start Container
• การแสดงข้อมูลของ Container
• สรุปคาสั่งพื้นฐานที่จาเป็นในการทางานกับ
Docker

รู้จัก Virtual Machine VMware ESXi
Windows Server Linux Ubuntu
2 CPU 1 CPU
4 GB Ram 2 GB Ram
Lenovo ThinkServer RD340

70AB001UUX 1U Rack Server - 1 x
Intel Xeon E5-2407 v2 2.40 GHz
Ram 16GB

รู้จัก Virtual Machine
Windows Server
Ubuntu
CentOS
Debian
Hyper visor (vmware)
Hardware
คืออะไร
คือ Software Container ถูกออกแบบมาเพื่อสร้างสภาพแวดล้อม

ให้ Application ของเราทางานร่วมกันได้บน OS เดียวกัน ช่วยให้การ
Setup และจัดการ Application ต่าง ๆ ทาได้ง่ายขึ้น

Container คืออะไร
เปรียบเสมือนการ Pack รวม
App/Bins/Libs ต่างๆ เป็นก้อน
เดียวกัน แล้วทาการกาหนดสภาพแวด
ล้อมการทางานไว้ภายในตัวมันเอง
เมื่อต้องการนาไปใช้งานที่อื่นหรือบน
Production จริง ก็นาไปทั้งก้อน
Container นี้เลย ทาให้สภาพแวดล้อม
เหมือนกันทุกประการ

ความแตกต่างระหว่าง Virtual Machine • Lightweight
และ Docker Container • Fast!
• Isolated
Container
Micro Computer
• OS
• CPU
Windows Server
Windows
• Mem
CentOS
Debian
Fedora
Ubuntu
CentOS
Debian
• Network
Docker Engine
Hyper visor (vmware) Ubuntu
Hardware Hardware
VM Container Credit: NetworkChuck

ความแตกต่างระหว่าง Virtual Machine และ Docker Container
Virtual Machine Docker Container

ทาไมต้องใช้ Docker และ Containers









Kubernetes หนทางสู่การทาระบบที่ไม่มีวันล่ม

Other Software Container
LXC (Linux)
containerd

โครงสร้างและสถาปัตยกรรมของ Docker
Windows/macOS/Linux
Docker Machine / Host Machine

Workflow ในการทางานกับ Docker



Hello World
Docker Basic Command แสดง version ของ docker แสดงสถานะของ docker
$ docker version $ docker stats
รายการ Images ทั้งหมด รายการ Images ทั้งหมด

$ docker images $ docker image ls
รายการ Container ที่ทางานอยู่
$ docker ps $ docker ps -a
ดึงรายการ image จาก registry
$ docker pull <imagename:tag>
ลบรายการ image ที่ไม่ต้องการ

ลบรายการ image ทั้งหมด
$ docker image prune -a $ docker rmi <imagename:tag>
สร้าง Container
Container Management $ docker create <imagename|id>
สร้างและรัน Container (create + start)
$ docker run <imagename|id>
Start/Stop Container
$ docker [start|stop] <container_id>
Stop All Container
$ docker stop $(docker ps -a -q)
ลบรายการ Container (ที่ stop แล้ว)

$ docker rm <container_id>
ลบรายการ Container ทั้งหมดที่ stop อยู่
ลบรายการ Container (ที่ start อยู่)
$ docker container prune
$ docker rm -f <container_id>
Docker Start Container
$ docker start -a <container_id>
$ docker start -a 170e4d580833

Overriding Default Comamnd
$ docker run busybox echo ‘Hello world in my docker’

$ docker run busybox ls

$ docker run busybox ping google.com



Filter container
$ docker ps -a -f status="exited"

Stop Container
$ docker stop ce9d3abd97f3

Docker Container Life Cycle
$ docker run <image> 1
Docker registry , docker hub
Has
No
Image
$ docker pull <image> 2
Yes
$ docker create <container> 3
$ docker create <container> 2
$ docker start <container> 4
$ docker start <container> 3
Docker Image
NodeJS Chat App
Vote App
Ecommerce App

Docker Image
Windows/macOS/Linux
Docker Machine / Host Machine Chat App with NodeJS V14
NodeJS V14 Container

Image
Vote App with NodeJS V14
NodeJS V16 Container

Image
Ecommerce App with NodeJS V16
Container
Docker Image

เรียนรู้การส่งคาสั่งเข้าไปยัง Container ที่ทางานอยู่
$ docker run nginx

$ docker exec <container_id> ls

$ docker exec <container_id> echo ‘Hello nginx’

การ Shell เข้าไปยังใน Container
$ docker exec -it <container_id> sh

$ docker exec -it <container_id> bash




การทา Port Mapping ให้กับ Container
Windows/macOS/Linux
Docker Server/Docker Host
Container
80 80 80

Windows/macOS/Linux
Docker Server/Docker Host
Container
8800 80 80

$ docker run –p 8800:80 nginx

$ docker run –p 8800:80 nginx

สั่งให้ Container ทางานแบบ Foreground และ Detached
$ docker run –p 9900:80 nginx Foreground run
$ docker run -d –p 9900:80 nginx Background run

การตั้งชื่อให้กับ Container
$ docker run --name mynginx -d -p 7700:80 nginx

การแสดง Log ของ Container
$ docker logs <container_id>

การแสดง Log with follow ของ Container
$ docker logs -f <container_id>

การดูข้อมูลระบบของ Docker
$ docker info
$ docker system df

การดูข้อมูลระบบของ Docker
$ docker system events

การดูข้อมูล images
$ docker image inspect <image_name:tag>

การลบ images ออก
$ docker image rm <imagename:tag>

การลบ images ออก
$ docker image rm -f <imagename:tag>

Docker Image Layers
Docker Image Layers
Docker Image Layers
Docker File
Docker File Structure
คาสั่งหลัก ๆ ของ Dcokerfile
คำสั่ง คำอธิบำย
FROM กำหนด Base Image
LABEL กำหนด Metadata เช่น ชื่อ version หรือเจ้ำของ Image
ENV กำหนด Environment Variable ภำยใน Container
RUN สำหรับติดตัง
้ Packages ให้ Container
COPY สำหรับคัดลอกไฟล์และโฟลเดอร์ไปยัง Container
ADD สำหรับคัดลอกไฟล์และโฟลเดอร์ไปยัง Container โดยสำมำรถแตกไฟล์ .tar และคัดลอกจำก
Host ภำยนอกได้
CMD ่ ที่ตอ
สำหรับรันคำสัง ้ งกำรขณะรัน Container
WORKDIR กำหนด Working Directory ของ Container
ARG กำหนด Variable ขณะสร้ำง Image
ENTRYPOINT ่ ที่ตอ
สำหรับรันคำสัง ้ งกำรขณะรัน Container
EXPOSE กำหนด Port ที่เปิดให้ Container อื่นติดต่อเข้ำมำ
VOLUME สร้ำง Folder เก็บข้อมูลแบบถำวรให้ Container
DOCKER HOST
CONTAINERS
CONTAINER
CONTAINER
CONTAINER

DOCKER HOST
CONTAINERS
CONTAINER
CONTAINER
CONTAINER

Create docker-compose.yml for WordPress+MySQL+PHPMyAdmin
DOCKER HOST
CONTAINERS
CONTAINER
CONTAINER
CONTAINER

โครงสร้างโปรเจ็กต์

Create file Dockerfile in php
# Base Image PHP 7 with FPM Alpine
FROM php:7.4-fpm-alpine
# ติดตั้ง extension mysqli สำหรั บไว้ เชื่ อมต่ อกับฐำนข้ อมูล mysql/mariadb
RUN docker-php-ext-install mysqli

Config file Nginx nginx.conf
worker_processes 1;
daemon off;
events {
worker_connections 1024;
}
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
http {
include /etc/nginx/conf/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request"'
'$status $body_bytes_sent "$http_referer"'
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss
text/javascript;
# tells the server to use on-the-fly gzip compression.
include /etc/nginx/conf.d/*.conf;
}

Config file Nginx default.conf
server {
charset utf-8;
client_max_body_size 128M;
listen 80; ## listen for ipv4
#listen [::]:80 default_server ipv6only=on; ## listen for ipv6
root /var/www/html;
index index.php;
location / {
# Redirect everything that isn't a real file to index.php
try_files $uri $uri/ /index.php$is_args$args;
}
# uncomment to avoid processing of calls to non-existing static files by Yii
#location ~ \.(js|css|png|jpg|gif|swf|ico|pdf|mov|fla|zip|rar)$ {
# try_files $uri =404;
#}
#error_page 404 /404.html;
location ~ \.php$ {
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_pass php:9000;
try_files $uri =404;
}
location ~ /\.(ht|svn|git) {
deny all;
}
}

Create file docker-compose.yml

Create file docker-compose.yml
version: '3.9'
services:
db:
image: mariadb:latest
container_name: lemp_mariadb
volumes:
- ./mariadb/initdb/:/docker-entrypoint-initdb.d
- ./mariadb/data/:/var/lib/mysql/
environment:
- MYSQL_ROOT_PASSWORD=1234
- MYSQL_DATABASE=sample_db
- MYSQL_USER=admin
- MYSQL_PASSWORD=1234
restart: always
networks:
- web_network
php:
depends_on:
- db
build: php/
container_name: lemp_php
volumes:
- ./public_html/:/var/www/html
expose:
- "9000"
restart: always
networks:
- web_network
nginx:
image: nginx:stable-alpine
container_name: lemp_nginx
volumes:
- ./public_html/:/var/www/html
- ./nginx/conf/nginx.conf:/etc/nginx/conf/nginx.conf:ro
- ./nginx/conf.d:/etc/nginx/conf.d:ro
ports:
- "88:80"
restart: always
networks:
- web_network
networks:
web_network:
name: lemp
driver: bridge
Create index.php
<?php
$servername = "db";
$username = "admin";
$password = "1234";
$dbhandle = mysqli_connect($servername, $username, $password);

$selected = mysqli_select_db($dbhandle, "titanic");
echo "Connected database server<br>";

echo "Selected database";
?>

เช็คความถูกต้องของไฟล์ docker-compose.yml
$ docker-compose config
$ docker-compose config -q
การรัน docker-compose.yml เพื่อสร้าง images และ containers
$ docker-compose up -d
ทดสอบเรียกใช้งาน
ทดสอบเรียกใช้งาน
การบังคับให้ docker-compose re-build ใหม่
$ docker-compose up -d --build
การเรียกดู log
$ docker-compose logs <service_name>
การเรียกดู log แบบต่อเนื่อง (follow)

$ docker-compose logs -f <service_name>
วันที่
Module 3:
พื้นฐานการทางานกับ Laravel 8
• การติดตั้ง Laravel 8 ผ่าน Docker

• พื้นฐานการสร้างและจัดการ Routing บน Laravel 8
• พื้นฐานการทางานกับ Controller บน Laravel 8
• การทางานกับ View บน Laravel 8
• การวาง Layout เพื่อแยกส่วนโค๊ดให้ทางานกับเว็บ
ขนาดใหญ่ได้บน Laravel 8
• Laravel 8 กับการเชื่อมต่อและจัดการฐานข้อมูล
• การสร้าง Rest API ใน Laravel 8

การติดตั้ง Laravel 8
ผ่าน Docker

Server Prerequisites to Install Laravel 8
• PHP Version 7.3+ or 8.x
• BCMath PHP Extension
• Ctype PHP Extension
• Fileinfo PHP extension
• JSON PHP Extension
• Mbstring PHP Extension
• OpenSSL PHP Extension
• PDO PHP Extension
• Tokenizer PHP Extension
• XML PHP Extension

Laravel development environment using Docker
6 services (containers)
• PHP 8.0 (application code)

• MySQL 8.0 (database)
• NGINX (webserver)
• phpMyAdmin (database managment)
• Redis (caching)
• MailHog (local mail testing)
DOCKER HOST
CONTAINERS
CONTAINER CONTAINER
CONTAINER CONTAINER CONTAINER CONTAINER

โครงสร้างของโปรเจ็กต์ Laravel 8

major.minor.patch
7.0.1
~7.0.1 ~7.0.4
^7.0.1 ~7.1.0
พื้นฐานการทางานกับ Routes ใน Laravel 8

REQUEST
Routes
Model Controller View

Laravel Basic Routing
Basic Routing
Route::get('/', function () {
return 'Hello World!';
});
Route::get('about', function(){
return 'My about page';
});
Routing with Parameters
Route::get('user/{id}', function($id){
return 'User: '.$id;
});
Route::get('posts/{post}/comments/{comment}', function(
$postID,$commentID){
return 'Post: '.$postID.'<br>Comment: '.$commentID;
});
Route::get('member/{name?}', function ($name=null) {

return 'Hello '.$name;
});
Route post, put, delete
Route::get('token', function(){
return csrf_token();
});
Route::post('product', function () {
return 'This is my product';
});
Route::put('product', function () {
return 'Update product';
});
Route::delete('product', function () {
return 'Delete product';
});
พื้นฐานการทางานกับ Controller และ View ใน Laravel 8
▪ พื้นฐานการทางานกับ Controllers ใน Laravel 8

▪ พืน้ ฐานการทางานกับ Views ใน Laravel 8
▪ การทางานกับ Blade Templating ใน Laravel 8

การสร้าง Controller ใหม่
php artisan make:controller [Name]Controller

php artisan make:controller HomeController
IT GENIUS ENGINEERING 171

การสร้าง HomeController
// Route to HomeController
Route::get('/','HomeController@home');
Not working !!!!

// From HomeController
// Laravel 8 Route change Use with namespace replace

Method 1:
Route::get('/', 'App\Http\Controllers\HomeController@home');
Method 2:
use App\Http\Controllers\HomeController;
Route::get('/', [HomeController::class, 'home']);
Route
Route::get('user/{name?}', [HomeController::class, 'user']);
Controller
public function user($name=null){
return 'สวัสดี '.$name;
}
การทางานกับฐานข้อมูล
▪ พื้นฐานการทางานกับฐานข้อมูล (database)
▪ การทางานกับ Query Builder ใน Laravel 8
▪ การทางานกับ Database Eloquent / ORM

ขั้นตอนการเชื่อมต่อฐานข้อมูล
MySQL ใน Laravel 8

เตรียมฐานข้อมูล

สร้างฐานข้อมูลใหม่กันครับ
ชื่อฐานข้อมูล “myblogdb”

Database configuration
ตั้งค่าการเชื่อมต่อฐานข้อมูลในไฟล์ .env

Database configuration
แก้ไข charset ในไฟล์ config/database.php

Database: Migrations

https://laravel.com/docs/8.x/migrations#introduction
รู้จักไฟล์ migrations






แก้ไขไฟล์ create_users_table.php
คาสั่ง Running Migrations
php artisan migrate

จะได้ตารางใหม่ในฐานข้อมูลดังนี้

โครงสร้างตาราง users เหมือนกับที่กาหนดไว้ใน migrations

คาสั่ง Rollback Migrations (ลบตารางออกจากฐานข้อมูล)
php artisan migrate:rollback

ตารางต่างๆ จะถูกลบทั้งหมดเหลือไว้เพียง migrations

คาสั่ง rollback และ run (ลบและสร้างในคาสั่งเดียวกัน)
php artisan migrate:refresh

การสร้าง Migration ใหม่
Create migration for new table
php artisan make:migration create_employees_table

ได้ไฟล์ migration มาดังนี้
ลองมาเพิ่มฟิลด์ต่างลงในตาราง
ทาการ migrate

ได้ตาราง Employee ดังภาพ

วันที่
การสร้าง Rest API ใน Laravel 8
รูปแบบลักษณะงานเว็บไซต์ในปัจจุบัน เกิน 80 – 90 % ต้องมีการทาระบบ
RESTful API เพื่อให้บริการข้อมูลกับ Application platform รูปแบบต่าง ๆ ไม่
ว่าจะเป็น mobile และ web เพราะเป็นรูปแบบการพัฒนาที่ได้รบั ความนิยมมาก
ในปัจจุบัน กล่าวคือการเชื่อมโยง application ด้วยข้อมูลจากแหล่งเดียวกัน
นั้นเอง
การพัฒนา RESTful API Service สามารถทาได้กับหลาย ๆ ภาษาโปรแกรม

มิ่งทั่วไป (ถ้าภาษาโปรแกรมมิ่งมี feature http ต้องสามารถทา RESTful API
ได้อย่างแน่นอน) แต่สิ่งที่จะทาให้การพัฒนา RESTful นั้นง่ายและสะดวกยิ่งขึ้น
ก็คือเครื่องมือ หรือ cli (command line user interface ) สาหรับช่วยทาให้
การเขียนโปรแกรมของเราง่าย และสะดวกมากยิ่งขึ้นไปอีก
laravel มี artisan cli (symfony class console) ช่วยทาให้งาน develop

สะดวกและง่ายยิ่งขึ้น

สร้าง Resource Controller RESTful API แรกกัน
Laravel มี feature Resource Controllers ที่จะช่วยสร้าง RESTful function template controller ขึ้นมาให้ เรา
เพียงแค่ implement function ตาม RESTful action เท่านั้นก็สามารถเรียกใช้งานได้เลย โดยมีวิธีการเรียกใช้
งานตามตัวอย่าง ข้างล่างนี้
$ php artisan make:controller PhotoController --api

สร้าง Resource Controller RESTful API แรกกัน

เพิ่ม routes mapping ที่ไฟล์ /routes/api.php
Laravel มี feature Resource Controllers ที่จะช่วยสร้าง RESTful function template controller ขึ้นมาให้ เรา
เพียงแค่ implement function ตาม RESTful action เท่านั้นก็สามารถเรียกใช้งานได้เลย โดยมีวิธีการเรียกใช้
งานตามตัวอย่าง ข้างล่างนี้
Route::resource('photos', PhotoController::class);

แสดง routes ทั้งหมด
php artisan route:list
แสดง routes เฉพาะ api

php artisan route:list –-path=api

class PhotoController extends Controller
{ implement PhotoController ตาม function การทางานเพื่อใช้ตรวจสอบการ call จาก REST client
public function index()
{
return ['name' => 'index'];
}
public function store(Request $request)

{
return ['name' => 'store', 'payload' => $request->all()];
}
public function show($id)

{
return ['name' => 'show', 'id' => $id];
}
public function update(Request $request, $id)

{
return ['name' => 'update', 'payload' => $request->all(), 'id' => $id];
}
public function destroy($id)
{
return ['name' => 'destroy', 'id' => $id];
}
}
ทดสอบ Rest API
GET http://blog.site/api/photos
POST http://blog.site/api/photos
GET http://blog.site/api/photos/1
PUT http://blog.site/api/photos/1
DELTET http://blog.site/api/photos/1
Laravel Sanctum (แซงทั้ม)
คือ official package ของทาง laravel
เอาไว้ใช้จัดการ Authentication API โดย
สามารถรับส่งข้อมูลข้าม Server ได้ (API
Token Authentication)

สร้างโปรเจ็กต์ใหม่ Laravel 8
-------------------------------------------------------------
laravel-store
|-- backend Laravel 8
|-- frontend React JS
ขึ้นโปรเจ็กต์ฝั่ง frontend สร้าง rest api ด้วย laravel 8
-------------------------------------------------------------
Step 1: docker-compose exec app composer create-project
laravel/laravel:^8.0 .
Step 4: เรียกดูหน้าเว็บที่
---
http://localhost:8008
http://127.0.0.1:8008

สร้าง migration resource conrtroller and model
docker-compose exec app php artisan make:model --migration --

controller Product --api
หรือเขียนแบบย่อ
docker-compose exec app php artisan make:model Product -mc --api
กาหนดโครงสร้าง migrations
create_users_table.php
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('fullname');
$table->string('username');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->tinyInteger('role')->default(1);
$table->rememberToken();
$table->timestamps();
});
}
กาหนดโครงสร้าง migrations
create_products_table.php
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('slug');
$table->string('description')->nullable();
$table->decimal('price', 9, 2);
$table->timestamps();
});
}
migrate
docker-compose exec app php artisan migrate
Enable Sanctum's middleware to your api middleware group
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],

Add Sanctum's middleware to your api middleware group

Issuing API Tokens
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable

{
use HasApiTokens, HasFactory, Notifiable;
}

Issuing API Tokens

Protecting Routes
use Illuminate\Http\Request;
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {

return $request->user();
});

Protecting Routes

Create Auth Controller
$ php artisan make:controller AuthController --model=User

Create Register function
// Register
public function register(Request $request){
$fields = $request->validate([
'fullname' => 'required|string',
'username' => 'required|string',
'email'=> 'required|string|unique:users,email',
'password'=>'required|string|confirmed',
'tel'=>'required',
'role'=> 'required|integer'
]);
$user = User::create([
'fullname' => $fields['fullname'],
'username' => $fields['username'],
'email' => $fields['email'],
'password' => bcrypt($fields['password']),
'tel' => $fields['tel'],
'role' => $fields['role']
]);
$token = $user->createToken($request->userAgent(),[$fields['role']])->plainTextToken;
$response = [
'user' => $user,
'token' => $token
];
return response($response, 201);

}

Add Route Register

Test Register API

Test Register API

Test Product route

Create Login method
// Login
public function login(Request $request){
$fields = $request->validate([
'email'=> 'required|string',
'password'=>'required|string'
]);
// Check email
$user = User::where('email', $fields['email'])->first();
// Check password
if(!$user || !Hash::check($fields['password'], $user->password)){
return response([
'message' => 'Invalid login!'
], 401);
}else{
// ลบ token เก่ ำออกแล้ วค่ อยสร้ ำงใหม่
$user->tokens()->delete();
$token = $user->createToken($request->userAgent(),["$user->role"])->plainTextToken;
$response = [
'user' => $user,
'token' => $token
];
return response($response, 201);

}

Test Login API

Create Logout method
// Logout
public function logout(Request $request){
auth()->user()->tokens()->delete();
return [
'message' => 'Logged out'
];
}

Test Logout method

Test Logout method

วันที่
React Docker Stack
DOCKER HOST
CONTAINERS
CONTAINER CONTAINER
Module 4:
พื้นฐานการทางานกับ React.js
• ทาไมต้องใช้ JSX
• ข้อกาหนดพืน ้ ฐานของ JSX
• การแสดงค่าของตัวแปรใน JSX
• การคานวณค่าในและแสดงผล (Expression) ใน JSX
• การแสดงหรือซ่อนเนื้อหาใน JSX
• คุณสมบัติพื้นฐานของคอมโพเนนต์
• วิธีสร้างคอมโพเนนต์ใช้เอง
• การใช้งาน css และ Bootstrap 5 framework ใน
React

รู้จัก React.js
React.js คืออะไร React เป็น Javascript Library หรือจะเรียกว่าเป็น
Javascript Framework ก็ได้ ที่เราใช้สาหรับสร้างหน้า
เว็บ พร้อมด้วย action ต่างๆ ที่ทาให้เว็บของเราดูน่าสนใจ
จุดเด่นของ React ที่ทาให้มันน่านามาใช้งานนั้นก็คือ มันมี

ระบบแคชในตัวทาให้หน้าเว็บของเรามีการตอบสนองที่เร็ว
เหมาะแก่การนาไปทา SPA เป็นอย่างยิ่ง
• Javascript Library การเขียน React เรายังสามารถแยกองค์ประกอบของหน้า

เว็บเรา ออกเป็นส่วนๆ เรียกว่าเป็น component แล้ว
• SPA นามาประกอบกันเป็นหน้าเว็บได้ ซึ่งทาให้เราสามารถ นา
• Component component ของเราไปใช้ซ้าที่อื่นได้ ไม่ต้องเสียเวลา
เขียนใหม่

What is React JS?
In short, React JS is a JavaScript library for building user
interfaces. It was created and released by Facebook as an
open-source framework in 2013. Since then, React has
become one of the top loved and wanted frameworks. It
happened because of the focus on user experience and
development simplicity. But don’t take our word for granted
— you can check the results of the survey conducted every
year by StackOverflow:

What can you build using React JS?
Single Page Application (SPA)

It’s the most often example of using React JS. As a reminder,
Single Page Application is an application that doesn’t
require page reloading on the user’s side. In other words, a
visitor will keep interacting with the same page without the
necessity of loading new pages. The great examples of
Single Page Applications are Gmail and Facebook.

Cross-platform mobile applications (with React Native)

If you want to create a cross-platform native-like
application, you can do it with React and the help of React
Native. It’s cross-platform because you need to build only
one app instead of two native apps, and it’s native-like
because the apps built with React Native perform like

Dashboard or Data Visualization tools
If you somehow rely on data, it’s crucial to display it in an
understandable and visually attractive way to the end-user.
Although you can find many ready-to-use dashboard
templates, it’s hard to maintain them in the long term, and
the price you would have to pay is pretty high. Because of
that, it’s better to build it from scratch. And actually, React
comes with some features to help you with that task:
reusable components and the virtual DOM.

eCommerce or retail websites

In contrast to standard business websites, eCommerce and
retail sites contain many more advanced elements like APIs,
filters, internal search engine, etc. Thanks to React,
developers can implement all of those things by building
separate and easy-to-scale components.

Enterprise Web Apps

Component-based architecture is the reason why such
enterprises as Walmart or AirBnB decided to incorporate
React in their tech stacks. Such an approach allows for
dividing the enterprise application development process
into smaller parts using single UI components.

Messaging app
Since Facebook created and released React, it’s a bit
surprising that its development team don’t use it for
building Messenger. Still, it’s possible to create an instant
messaging app with the usage of React because it acts as
a WebSocket client. It’s responsible for two-way

Personal or professional blogs (with Gatsby)

Although it’s possible to create a website with the React.js
itself, it’s even better to use Gatsby for such a task. It’s a
modern front-end framework gaining popularity among
front-end developers and JavaScript lovers. You can use it
to create super-fast business and personal websites in no
time that will pull data from many different sources like
WordPress or Contentful.

Social network
This point is highly connected with the previous one
because it’s recommended to build social networks as
Single Page Applications (SPAs). Since the SPA user doesn’t
have to reload the page, i.e. to check new messages, it
strongly improves user experience.

สารวจเว็บไซต์ที่พัฒนา
ด้วย React

Companies Using React.js

Start React.js

Create
React.js
App

Getting Started
The easy way

You can use creat-react-app to get started very quickly.
npm
$ npx create-react-app [project_name]
yarn
$ yarn create react-app [project_name]

Getting Started
$ npx create-react-app frontend

Open your project in VSCode

RUN
REACT
> npm start
Run React.js Project
$ npm start

Run React.js Project

โครงสร้าง
โปรเจ็กต์
React

แนะนา JSX

ทาไมต้อง
ใช้ JSX

What Is JSX?
JSX คือ ส่วนขยายของ JavaScript (JavaScript Extension) ที่ใช้สาหรับสร้างส่วน
ติดต่อกับผู้ใช้ (UI) โดย JSX มีลักษณะคล้ายกับโค้ด HTML แต่มก
ี ฏเกณฑ์บางอย่างที่
แตกต่างจาก HTML
HTML
<div class=“myElement”>This is HTML Element</div>
JSX
<App className=“App”>This is JSX Element</App>

Why use JSX?
โดยพื้นฐานแล้ว หากต้องการแสดงคอมโพเนนต์ในแอพพลิเคชั่น เราจะใช้
method ชื่อ createElement() ของ React เพื่อกาหนดอิลิเมนต์ต่างๆ
ภายในคอมโพเนนต์
createElement()
React.createElement(type, props, children);

createElement()
import React from 'react'
function App() {
return (
React.createElement(
'div',
{className: 'App'},
React.createElement('h1',null,'Hello React JS')
)
);
}
export default App

ข้อกาหนดของ JSX
JSX ทั้งหมดต้องอยู่ภายใน Element เดียว (Single Parent)
Right Wrong
function App(){ function App(){
return ( return (
<div className="App">
<div className="App"> <div>เนื้อหาส่วนที่ 1</div>
<div>เนื้อหาส่วนที่ 1</div> </div>
<div>เนื้อหาส่วนที่ 2</div> <div className="App">
</div> <div>เนื้อหาส่วนที่ 2</div>
) </div>
)
} }

การแสดงค่าของตัวแปรใน JSX
function App(){
const myName = 'Samit Koyom'
return (
<h1>ชื่อของผมคือ { myName }</h1>
</div>
)
}

การแสดงค่าจากการคานวณ (Expression) ใน JSX
function App(){
const mySalary = 24000
const myWifeSalary = 16000
return (
<h1>รายได้รวมของภรรยา { mySalary + myWifeSalary }</h1>
</div>
)
}

การแสดงหรือซ่อนเนื้อหาในคอมโพเนนต์
function App(){
const randomNumber = Math.random()
return (
<p>Random value: { randomNumber }</p>
{
randomNumber < 0.5 ? <div>คุณแพ้</div> : <div>คุณชนะแล้ว</div>
}
</div>
)
}

Return โค้ดหลายบรรทัดต้องใส่วงเล็บ
function App(){
return <div className="App">Live สดถือทะเบียนสมรสไปงานแต่ง</div>
}
function App(){
return (
<h1>Live สดถือทะเบียนสมรสไปงานแต่ง</h1>
<h2>ล่าสุดฟ้องศาลแล้ว เรียกเงินจากเจ้าสาว</h2>
</div>
)
}

Styles JSX

Styled JSX
สามารถใส่ CSS ลงไปใน JSX ได้ 2 แบบด้วยกันคือ
1. กาหนดแบบ Inline CSS
2. กาหนดแบบ Link Style

Inline CSS
style={{color:'green', fontSize:'24'}}
<div style={{color:'green', fontSize:'24'}}>เวลาเป็นเครื่องพิสูจน์ ใบมะกรูดเป็นเครื่องต้มยา</div>

Inline CSS
<p style={
{
color:'blue',
fontSize: 18,
border:'1px solid red',
textAlign:'left',
padding: 20
}
}>
"มิตรภาพ" ไม่ได้เริ่มจากวงเหล้า "มิตรภาพ" ไม่ได้เริ่มจากวงไพ่ <br />
"มิตรภาพ" ไม่ได้เริ่มจากวงหมอลา<br />
แต่จากการศึกษาค้นคว้า ของหลายๆ สถาบัน สรุปตรงกันว่า<br />
"มิตรภาพ" เริ่มจากสระบุรี และ ไปสิ้นสุดที่หนองคาย<br />
ฉะนั้น...อย่าไปหนองคาย<br />
มิตรภาพ...จะสิ้นสุดทันที<br />
</p>

การกาหนด CSS แบบ Link Style
src/App.css
.myStyle {
color: teal;
font-size: 30px;
border:2px solid #61dafb;
border-radius: 10px;
padding: 10px;
text-align: left;
}

การกาหนด CSS แบบ Link Style
import React from 'react'
import './App.css'
function App(){
return (
<p className="myStyle">
เธอบัญชีอะไรฉันจะโอน<br />
ถึงหน้าตาของฉันเหมือนกันโจร<br />
เบอร์เธอเบอร์อะไรฉันจะโทร<br />
อย่าทาให้ฉันเหงา เหงา Alone
</p>
</div>
)
}

แนะนา
React Component

Creating components

React สามารถสร้าง Component ได้ 2 รูปแบบ
1. Class Component
2. Function Component

คลาสคอมโพเนนต์ (Class Component)
import React, { Component } from 'react';
class Post extends Component {
render() {
return (
<div>
<p>Hello Class Component!!!</p>
</div>
);
}
}
export default Post;

ฟังก์ชันคอมโพเนนต์ (Function Component)
import React from 'react';

const Post = () => {
return (
<div>
<p>Hello Function Component!!!</p>
</div>
);
}
export default Post;

การใช้งาน
React
Router

Module 5:
การใช้ React กับ REST API
• สร้างโปรเจ็กต์ React JS สาหรับเชื่อมต่อ Web

API ด้วย Laravel 8
• ทดสอบการทางาน Create-Read-Update-
Delete (CRUD) ของ API
• ใช้งาน HTTP Request อย่างง่ายด้วย Axios
• ฝึกเขียน CRUD Rest API ใน React.js ร่วมกับ
Bootstrap 5

อาจารย์สามิตร โกยม
samitkoyom@gmail.com
iamsamit
faecebook.com/iamsamit
twitter.com/iamsamit
github.com/iamsamitdev
linkedin.com/in/samit-koyom-72173348

Basic Laravel 8 and React JS With Docker Online

Uploaded by

Copyright:

Available Formats

You might also like

Basic Laravel 8 and React JS With Docker Online

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic Laravel 8 and React JS With Docker Online

Uploaded by

Copyright:

Available Formats

วันที่

Module 1: การเตรียมเครื่องมือและความพร้อมทั้งบน Mac และ Windows

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

Docker Engine 20.10.9

• Windows 10 64-bit: Pro 2004 (build 19041) or higher, or Enterprise or Education

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

เข้าไปดาวน์โหลด Visual Studio Code ได้ที่ https://code.visualstudio.com

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

ใช้ Node.js V 16.14LTS หรือ 17 ก็ได้เช่นเดียวกัน

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-570-8449 IT Genius Engineering | สถาบันไอทีจีเนียส

Lenovo ThinkServer RD340

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

คือ Software Container ถูกออกแบบมาเพื่อสร้างสภาพแวดล้อม

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

VM Container Credit: NetworkChuck

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

www.itgenius.co.th | 02-933-0427 IT Genius Engineering | ไอทีจีเนียส

$ docker version $ docker stats

รายการ Images ทั้งหมด รายการ Images ทั้งหมด

รายการ Container ที่ทางานอยู่

ดึงรายการ image จาก registry

$ docker pull <imagename:tag>

ลบรายการ image ที่ไม่ต้องการ

สร้างและรัน Container (create + start)

$ docker run <imagename|id>

$ docker [start|stop] <container_id>

Stop All Container

$ docker stop $(docker ps -a -q)

ลบรายการ Container (ที่ stop แล้ว)