เริ่มต้นใช้งาน-codeigniter-4-ร่วมกับ-reactjs

เริ่มต้น ใช้งาน codeigniter 4 ร่วมกับ reactjs

แนะนำการ ใช้งาน 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/babel-standalone@6.26.0/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 เลย สามารถแยกการทำงานกันได้อย่างชัดเจน

Leave a Reply