แนะนำการ ใช้งาน codeigniter 4 ร่วมกับ reactjs สำหรับผู้เริ่มต้น โดยในบทความนี้ จะมีเนื้อหาดังนี้ครับ
- การใช้งาน reactjs เบื้องต้น และ jsx ( ตัว jsx จะทำให้เราสามารถเขียน html tags ภายใน javascript ได้ง่ายขึ้น )
- การเชื่อมต่อ api ใน codeigniter 4 และการ response json ที่มีข้อแตกต่างจาก codeigniter 3
- พื้นฐานการสร้าง CI Model และ Connect Database
- พื้นฐานการวาง Folder Path เช่น assets ( css,js,image,etc) api path เบื้องต้น
เริ่มต้น Create Database Table ออกแบบตารางฐานข้อมูล
ให้สร้างตารางฐานข้อมูล สำไว้ทดสอบตามนี้ จากนั้นก็ให้ insert ข้อมูลเข้าไปเพื่อไว้เรียกมาทดสอบแสดงผล
CREATE TABLE jobs (
jobs_id int(11) NOT NULL,
jobs_name varchar(200) NOT NULL,
jobs_company varchar(200) NOT NULL,
timestamp timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;สร้าง Controller, Model, View และ JSX
จากนั้นให้เริ่มสร้างไฟล์ Controller, Model, View และ JSX ตามลำดับ โดยในโปรเจคนี้เราจะตั้งชื่อไฟล์โดยใช้หลักการตั้งชื่อแบบ camelCase เพื่อให้เหมือนกับตัวเฟรมเวิร์คที่ใช้หลักการตั้งชื่อไฟล์และตัวแปรแบบนี้
- สร้าง Home Controller
<?php namespace App\Controllers;
class Home extends BaseController
{
public function index()
{
echo view('homeView');
}
}- สร้าง Home Model
<?php namespace App\Models;
use CodeIgniter\Model;
class ModelHome extends Model
{
protected $table = 'jobs';
protected $primaryKey = 'jobs_id';
protected $returnType = 'array';
}- สร้าง Home View
เราจะ include babel.js เข้ามาด้วย เพื่อให้สามารถเขียน jsx หรือเขียน html syntax ใน javascript ไฟล์ได้ ดูตัวอย่างที่หัวข้อ สร้าง jsx assets และสร้าง div id homeContainer ไว้รอให้ react dom เรียกใช้งาน
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="homeContainer"></div>
</body>
</html>
- สร้าง Home Api สำหรับ Response Json
ก่อนให้อื่นสร้าง Folder ตั้งชื่อว่า Api ภายใน Controller และตั้งชื่อคลาสว่า HomeApi จากนั้นเขียนคำสั่งเพื่อเตรียม json ให้กับฝั่ง javascript ดังนี้
ใน Codeigniter 4 ให้ใช้คำสั่ง $this->response สำหรับจัดการ content type รูปแบบต่าง ๆ และใช้ setJSON แทน json_encode กรณีใช้ json_encode จะเกิด error เพราะข้อมูลจะไปชนกับส่วน debug toolbar
<?php namespace App\Controllers\api;
use App\Controllers\BaseController;
use App\Models\ModelHome;
class HomeApi extends BaseController
{
public function getJobs()
{
$modelHome = new ModelHome();
$result = $modelHome->findAll();
$this->response->setContentType('Content-Type: application/json');
return $this->response->setJSON($result);
}
}- สร้าง JSX assets
ก่อนอื่นให้สร้าง Folder ภายใน public default folder ตั้งชื่อว่า assets และทำการสร้างไฟล์ Home.jsx และเขียนคำสั่งเพื่อโหลดข้อมูล json จาก HomeApi มาแสดงดังนี้
'use strict';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
this.loadJobs();
}
loadJobs(){
fetch("api/HomeApi/getJobs")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
items.map((item, index) => (
<PostColumn key={item.jobs_id} items={item}/>
))
);
}
}
}
ReactDOM.render(<Home/>, document.getElementById("homeContainer"));class PostColumn extends React.Component {
constructor(props){
super(props);
this.state = {
items: props.items,
};
}
render(){
return (
<div className="jmg-right-caption-text">
<ul>
<li><b>Job Title:</b> {this.state.items.jobs_name}</li>
<li><b>Company Name:</b> {this.state.items.jobs_company}</li>
</ul>
</div>
);
}
}เรียกใช้งาน home.jsx ในส่วนของ homeView
<script type="text/babel" src="<?php echo site_url('public/assets/home.jsx'); ?>"></script>ทดสอบเรียกใช้งาน Home Controller ผลลัพธ์ที่ได้ เมื่อในตารางฐานข้อมูล Jobs มีข้อมูล 3 Record ก็จะเป็นการโหลดข้อมูล json มา loop แสดงผล โดยมีขั้นตอนการทำงาน คือ
- ModelHome ทำหน้าที่จัดเตรียมข้อมูล
- HomeController ทำหน้าที่แปลงข้อมูลเป็น Json
- ReactJS ทำหน้าที่ Connect API และนำข้อมูล JSON มาจัดรูปแบบ html โดยอาศัยความสามารถของ JSX และนำไปแสดงผลที่ HomeView
- จะเห็นว่าเราแทบไม่ได้ยุ่งเกี่ยวกับส่วนของ View เลย สามารถแยกการทำงานกันได้อย่างชัดเจน
