
<h4 class="wp-block-heading">à¹à¸à¸°à¸à¸³à¸à¸²à¸£ à¹à¸à¹à¸à¸²à¸ codeigniter 4 รà¹à¸§à¸¡à¸à¸±à¸ reactjs สำหรัà¸à¸à¸¹à¹à¹à¸£à¸´à¹à¸¡à¸à¹à¸ à¹à¸à¸¢à¹à¸à¸à¸à¸à¸§à¸²à¸¡à¸à¸µà¹ à¸à¸°à¸¡à¸µà¹à¸à¸·à¹à¸à¸«à¸²à¸à¸±à¸à¸à¸µà¹à¸à¸£à¸±à¸</h4>



<ul class="wp-block-list"><li>à¸à¸²à¸£à¹à¸à¹à¸à¸²à¸ reactjs à¹à¸à¸·à¹à¸à¸à¸à¹à¸ à¹à¸¥à¸° jsx ( à¸à¸±à¸§ jsx à¸à¸°à¸à¸³à¹à¸«à¹à¹à¸£à¸²à¸ªà¸²à¸¡à¸²à¸£à¸à¹à¸à¸µà¸¢à¸ html tags ภายà¹à¸ javascript à¹à¸à¹à¸à¹à¸²à¸¢à¸à¸¶à¹à¸ )</li><li>à¸à¸²à¸£à¹à¸à¸·à¹à¸à¸¡à¸à¹à¸ api à¹à¸ codeigniter 4 à¹à¸¥à¸°à¸à¸²à¸£ response json à¸à¸µà¹à¸¡à¸µà¸à¹à¸à¹à¸à¸à¸à¹à¸²à¸à¸à¸²à¸ codeigniter 3</li><li>à¸à¸·à¹à¸à¸à¸²à¸à¸à¸²à¸£à¸ªà¸£à¹à¸²à¸ CI Model à¹à¸¥à¸° Connect Database </li><li>à¸à¸·à¹à¸à¸à¸²à¸à¸à¸²à¸£à¸§à¸²à¸ Folder Path à¹à¸à¹à¸ assets ( css,js,image,etc) api path à¹à¸à¸·à¹à¸à¸à¸à¹à¸</li></ul>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h5 class="wp-block-heading">à¹à¸£à¸´à¹à¸¡à¸à¹à¸ Create Database Table à¸à¸à¸à¹à¸à¸à¸à¸²à¸£à¸²à¸à¸à¸²à¸à¸à¹à¸à¸¡à¸¹à¸¥</h5>



<p class="wp-block-paragraph">à¹à¸«à¹à¸ªà¸£à¹à¸²à¸à¸à¸²à¸£à¸²à¸à¸à¸²à¸à¸à¹à¸à¸¡à¸¹à¸¥ สำà¹à¸§à¹à¸à¸à¸ªà¸à¸à¸à¸²à¸¡à¸à¸µà¹ à¸à¸²à¸à¸à¸±à¹à¸à¸à¹à¹à¸«à¹ insert à¸à¹à¸à¸¡à¸¹à¸¥à¹à¸à¹à¸²à¹à¸à¹à¸à¸·à¹à¸à¹à¸§à¹à¹à¸£à¸µà¸¢à¸à¸¡à¸²à¸à¸à¸ªà¸à¸à¹à¸ªà¸à¸à¸à¸¥</p>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph"></p>



<amp-fit-text layout="fixed-height" min-font-size="6" max-font-size="72" height="80"><pre title="jobs table" class="wp-block-code"><code lang="sql" class="language-sql">CREATE TABLE <code>jobs</code> (
 <code>jobs_id</code> int(11) NOT NULL,
 <code>jobs_name</code> varchar(200) NOT NULL,
 <code>jobs_company</code> varchar(200) NOT NULL,
 <code>timestamp</code> timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;</code></pre></amp-fit-text>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h5 class="wp-block-heading">สรà¹à¸²à¸ Controller, Model, View à¹à¸¥à¸° JSX</h5>



<p class="wp-block-paragraph">à¸à¸²à¸à¸à¸±à¹à¸à¹à¸«à¹à¹à¸£à¸´à¹à¸¡à¸ªà¸£à¹à¸²à¸à¹à¸à¸¥à¹ Controller, Model, View à¹à¸¥à¸° JSX à¸à¸²à¸¡à¸¥à¸³à¸à¸±à¸ à¹à¸à¸¢à¹à¸à¹à¸à¸£à¹à¸à¸à¸à¸µà¹à¹à¸£à¸²à¸à¸°à¸à¸±à¹à¸à¸à¸·à¹à¸à¹à¸à¸¥à¹à¹à¸à¸¢à¹à¸à¹à¸«à¸¥à¸±à¸à¸à¸²à¸£à¸à¸±à¹à¸à¸à¸·à¹à¸à¹à¸à¸ camelCase à¹à¸à¸·à¹à¸à¹à¸«à¹à¹à¸«à¸¡à¸·à¸à¸à¸à¸±à¸à¸à¸±à¸§à¹à¸à¸£à¸¡à¹à¸§à¸´à¸£à¹à¸à¸à¸µà¹à¹à¸à¹à¸«à¸¥à¸±à¸à¸à¸²à¸£à¸à¸±à¹à¸à¸à¸·à¹à¸à¹à¸à¸¥à¹à¹à¸¥à¸°à¸à¸±à¸§à¹à¸à¸£à¹à¸à¸à¸à¸µà¹</p>



<ul class="wp-block-list"><li>สรà¹à¸²à¸ Home Controller</li></ul>



<amp-fit-text layout="fixed-height" min-font-size="6" max-font-size="72" height="80"><pre title="app/Controllers/Home.php" class="wp-block-code"><code lang="php" class="language-php line-numbers"><;?php namespace App\Controllers;
class Home extends BaseController
{
	public function index()
	{
	 echo view('homeView');
	}
}</code></pre></amp-fit-text>



<ul class="wp-block-list"><li>สรà¹à¸²à¸ Home Model</li></ul>



<pre title="app/Models/ModelHome" class="wp-block-code"><code lang="php" class="language-php line-numbers"><;?php namespace App\Models;
use CodeIgniter\Model;
class ModelHome extends Model
{
	protected $table = 'jobs'; 
	protected $primaryKey = 'jobs_id';
	protected $returnType = 'array';
}</code></pre>



<ul class="wp-block-list"><li>สรà¹à¸²à¸ Home View</li></ul>



<p class="wp-block-paragraph">à¹à¸£à¸²à¸à¸° include babel.js à¹à¸à¹à¸²à¸¡à¸²à¸à¹à¸§à¸¢ à¹à¸à¸·à¹à¸à¹à¸«à¹à¸ªà¸²à¸¡à¸²à¸£à¸à¹à¸à¸µà¸¢à¸ jsx หรืà¸à¹à¸à¸µà¸¢à¸ html syntax à¹à¸ javascript à¹à¸à¸¥à¹à¹à¸à¹ à¸à¸¹à¸à¸±à¸§à¸à¸¢à¹à¸²à¸à¸à¸µà¹à¸«à¸±à¸§à¸à¹à¸ <span style="font-size: Revert; color: initial;">สรà¹à¸²à¸ jsx assets </span>à¹à¸¥à¸°à¸ªà¸£à¹à¸²à¸ div id homeContainer à¹à¸§à¹à¸£à¸à¹à¸«à¹ react dom à¹à¸£à¸µà¸¢à¸à¹à¸à¹à¸à¸²à¸</p>



<pre title="app/Views/homeView.php" class="wp-block-code"><code lang="markup" class="language-markup line-numbers"><;!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>;
</code></pre>



<ul class="wp-block-list"><li>สรà¹à¸²à¸ Home Api สำหรัภResponse Json</li></ul>



<p class="wp-block-paragraph">à¸à¹à¸à¸à¹à¸«à¹à¸à¸·à¹à¸à¸ªà¸£à¹à¸²à¸ Folder à¸à¸±à¹à¸à¸à¸·à¹à¸à¸§à¹à¸² Api ภายà¹à¸ Controller à¹à¸¥à¸°à¸à¸±à¹à¸à¸à¸·à¹à¸à¸à¸¥à¸²à¸ªà¸§à¹à¸² HomeApi à¸à¸²à¸à¸à¸±à¹à¸à¹à¸à¸µà¸¢à¸à¸à¸³à¸ªà¸±à¹à¸à¹à¸à¸·à¹à¸à¹à¸à¸£à¸µà¸¢à¸¡ json à¹à¸«à¹à¸à¸±à¸à¸à¸±à¹à¸ javascript à¸à¸±à¸à¸à¸µà¹</p>



<p class="wp-block-paragraph">à¹à¸ Codeigniter 4 à¹à¸«à¹à¹à¸à¹à¸à¸³à¸ªà¸±à¹à¸ $this->;response สำหรัà¸à¸à¸±à¸à¸à¸²à¸£ content type รูà¸à¹à¸à¸à¸à¹à¸²à¸ ๠à¹à¸¥à¸°à¹à¸à¹ setJSON à¹à¸à¸ json_encode à¸à¸£à¸à¸µà¹à¸à¹ json_encode à¸à¸°à¹à¸à¸´à¸ error à¹à¸à¸£à¸²à¸°à¸à¹à¸à¸¡à¸¹à¸¥à¸à¸°à¹à¸à¸à¸à¸à¸±à¸à¸ªà¹à¸§à¸ debug toolbar</p>



<pre class="wp-block-code"><code lang="php" class="language-php line-numbers"><;?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);
 }
}</code></pre>



<ul class="wp-block-list"><li>สรà¹à¸²à¸ JSX assets </li></ul>



<p class="wp-block-paragraph">à¸à¹à¸à¸à¸à¸·à¹à¸à¹à¸«à¹à¸ªà¸£à¹à¸²à¸ Folder ภายà¹à¸ public default folder à¸à¸±à¹à¸à¸à¸·à¹à¸à¸§à¹à¸² assets à¹à¸¥à¸°à¸à¸³à¸à¸²à¸£à¸ªà¸£à¹à¸²à¸à¹à¸à¸¥à¹ Home.jsx à¹à¸¥à¸°à¹à¸à¸µà¸¢à¸à¸à¸³à¸ªà¸±à¹à¸à¹à¸à¸·à¹à¸à¹à¸«à¸¥à¸à¸à¹à¸à¸¡à¸¹à¸¥ json à¸à¸²à¸ HomeApi มาà¹à¸ªà¸à¸à¸à¸±à¸à¸à¸µà¹</p>



<pre title="public/assets/Home.jsx" class="wp-block-code"><code lang="javascript" class="language-javascript line-numbers">
'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"));</code></pre>



<pre class="wp-block-code"><code lang="javascript" class="language-javascript line-numbers">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>;
 );
 }
}</code></pre>



<p class="wp-block-paragraph">à¹à¸£à¸µà¸¢à¸à¹à¸à¹à¸à¸²à¸ home.jsx à¹à¸à¸ªà¹à¸§à¸à¸à¸à¸ homeView </p>



<pre class="wp-block-code"><code lang="markup" class="language-markup"><;script type="text/babel" src="<;?php echo site_url('public/assets/home.jsx'); ?>;">;<;/script>;</code></pre>



<p class="wp-block-paragraph">à¸à¸à¸ªà¸à¸à¹à¸£à¸µà¸¢à¸à¹à¸à¹à¸à¸²à¸ Home Controller à¸à¸¥à¸¥à¸±à¸à¸à¹à¸à¸µà¹à¹à¸à¹ à¹à¸¡à¸·à¹à¸à¹à¸à¸à¸²à¸£à¸²à¸à¸à¸²à¸à¸à¹à¸à¸¡à¸¹à¸¥ Jobs มีà¸à¹à¸à¸¡à¸¹à¸¥ 3 Record à¸à¹à¸à¸°à¹à¸à¹à¸à¸à¸²à¸£à¹à¸«à¸¥à¸à¸à¹à¸à¸¡à¸¹à¸¥ json มา loop à¹à¸ªà¸à¸à¸à¸¥ à¹à¸à¸¢à¸¡à¸µà¸à¸±à¹à¸à¸à¸à¸à¸à¸²à¸£à¸à¸³à¸à¸²à¸ à¸à¸·à¸</p>



<ul class="wp-block-list"><li>ModelHome à¸à¸³à¸«à¸à¹à¸²à¸à¸µà¹à¸à¸±à¸à¹à¸à¸£à¸µà¸¢à¸¡à¸à¹à¸à¸¡à¸¹à¸¥</li><li>HomeController à¸à¸³à¸«à¸à¹à¸²à¸à¸µà¹à¹à¸à¸¥à¸à¸à¹à¸à¸¡à¸¹à¸¥à¹à¸à¹à¸ Json</li><li>ReactJS à¸à¸³à¸«à¸à¹à¸²à¸à¸µà¹ Connect API à¹à¸¥à¸°à¸à¸³à¸à¹à¸à¸¡à¸¹à¸¥ JSON มาà¸à¸±à¸à¸£à¸¹à¸à¹à¸à¸ html à¹à¸à¸¢à¸à¸²à¸¨à¸±à¸¢à¸à¸§à¸²à¸¡à¸ªà¸²à¸¡à¸²à¸£à¸à¸à¸à¸ JSX à¹à¸¥à¸°à¸à¸³à¹à¸à¹à¸ªà¸à¸à¸à¸¥à¸à¸µà¹ HomeView</li><li>à¸à¸°à¹à¸«à¹à¸à¸§à¹à¸²à¹à¸£à¸²à¹à¸à¸à¹à¸¡à¹à¹à¸à¹à¸¢à¸¸à¹à¸à¹à¸à¸µà¹à¸¢à¸§à¸à¸±à¸à¸ªà¹à¸§à¸à¸à¸à¸ View à¹à¸¥à¸¢ สามารà¸à¹à¸¢à¸à¸à¸²à¸£à¸à¸³à¸à¸²à¸à¸à¸±à¸à¹à¸à¹à¸à¸¢à¹à¸²à¸à¸à¸±à¸à¹à¸à¸</li></ul>



<figure class="wp-block-image size-large"><a href="https://www.codebee.co.th/labs/wp-content/uploads/2021/12/Screen-Shot-2564-12-15-at-13.04.08.png"><img src="https://www.codebee.co.th/labs/wp-content/uploads/2021/12/Screen-Shot-2564-12-15-at-13.04.08-940x690.png" alt="" class="wp-image-6117" data-full="https://codebee.co.th/labs/wp-content/uploads/2021/12/Screen-Shot-2564-12-15-at-13.04.08.png" data-full-size="1442x1058" /></a></figure>

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