React JS CRUD с CodeIgniter 4 и MySQL 8
В этом руководстве вы узнаете, как создать пример React CRUD с Codeigniter 4 и MySQL.
Это руководство покажет вам шаг за шагом, как создать React JS в качестве интерфейсной технологии, используемой для создания пользовательского интерфейса, веб-фреймворк CodeIgniter 4 на основе PHP будет использоваться для создания API-интерфейсов REST (передача репрезентативного состояния) и База данных MySQL будет использоваться в качестве постоянного хранилища.
А также узнайте, как создать приложение CRUD с использованием CodeIgniter 4, MySQL и React JS framework. CRUD - это аббревиатура, обозначающая операции создания, чтения, обновления и удаления в конкретном приложении. Таким образом, вы в основном создаете запись, читаете одну или все записи, обновляете существующую запись и удаляете существующую запись.
И это руководство покажет вам, как выполнять операции CRUD с использованием API-интерфейсов REST php codeigniter 4 в React js. И создаст три отдельных файла jаvascript (js) для выполнения операций CRUD.
Пример React JS CRUD с CodeIgniter 4 и MySQL 8
Выполните следующие шаги и создайте приложение response js crud, используя php codeigniter 4 и mysql rest apis:
Шаг 1: Загрузите проект Codeigniter
На этом этапе вы загрузите последнюю версию Codeigniter 4, перейдите по этой ссылке https://codeigniter.com/download и загрузите последнюю версию Codeigniter 4. Разархивируйте установку в вашей локальной системе.
Шаг 2: Основные конфигурации
Затем установите базовую конфигурацию в файле app/Config/App.php, так что давайте перейдем в app/Config/ и откроем файл App.php в текстовом редакторе.
Установите базовый URL следующим образом
public $baseURL = 'http://localhost:8080';
//Замените на
public $baseURL = 'http://localhost/demo/';
Шаг 3: Создайте базу данных с таблицей
На этом этапе вам нужно создать базу данных с именем demo, поэтому давайте откроем ваш PHPMyAdmin и создадим базу данных с именем demo. После успешного создания базы данных вы можете использовать приведенный ниже SQL-запрос для создания таблицы в своей базе данных.
CREATE TABLE `product` (
`id` int unsigned COLLATE utf8mb4_unicode_ci NOT NULL AUTO_INCREMENT,
`name` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
`price` double COLLATE utf8mb4_unicode_ci NOT NULL,
`sale_price` double COLLATE utf8mb4_unicode_ci NOT NULL,
`sales_count` int unsigned COLLATE utf8mb4_unicode_ci NOT NULL,
`sale_date` VARCHAR(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
insert into product(id,name,price,sale_price,sales_count,sale_date) values(1, 'Desktop','30000','35000','55','02-04-2018');
insert into product(id,name,price,sale_price,sales_count,sale_date) values(2, 'Desktop','30300','37030','43','03-04-2018');
insert into product(id,name,price,sale_price,sales_count,sale_date) values(3, 'Tablet','39010','48700','145','04-04-2018');
insert into product(id,name,price,sale_price,sales_count,sale_date) values(4, 'Phone','15000','17505','251','05-04-2018');
insert into product(id,name,price,sale_price,sales_count,sale_date) values(5, 'Phone','18000','22080','178','05-04-2018');
insert into product(id,name,price,sale_price,sales_count,sale_date) values(6, 'Tablet','30500','34040','58','05-04-2018');
insert into product(id,name,price,sale_price,sales_count,sale_date) values(7, 'Adapter','2000','2500','68','06-04-2018');
insert into product(id,name,price,sale_price,sales_count,sale_date) values(8, 'TV','45871','55894','165','07-04-2018');
Шаг 4: Настройка учетных данных базы данных
На этом шаге вам нужно подключить наш проект к базе данных. вам нужно перейти в app/Config/Database.php и открыть файл Database.php в текстовом редакторе. После открытия файла в текстовом редакторе вам необходимо настроить учетные данные базы данных в этом файле, как показано ниже.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'demo',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !== 'production'),
'cacheOn' => false,
'cacheDir' => '',
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];
Шаг 5: Создайте файл модели
На этом этапе зайдите в app/Models/ и создайте здесь одну модель с именем User.php. Затем добавьте следующий код в этот файл:
<?php
namespace App\Models;
use CodeIgniter\Model;
class ProductModel extends Model {
protected $table = 'product';
protected $primaryKey = 'id';
protected $returnType = 'array';
protected $allowedFields = ['name', 'price', 'sale_price', 'sales_count', 'sale_date'];
protected $validationRules = [];
protected $validationmessages = [];
protected $skipValidation = false;
}
Шаг 6: Создайте Контроллер
На этом этапе перейдите в app/Controllers и создайте контроллер с именем Product.php. В этом контроллере вам необходимо добавить в него следующие методы:
<?php
namespace App\Controllers;
use CodeIgniter\RESTful\ResourceController;
use CodeIgniter\HTTP\RequestInterface;
class Product extends ResourceController {
protected $modelName = 'App\Models\ProductModel';
protected $format = 'json';
// получить все продукты
public function index() {
return $this->respond($this->model->findAll());
}
// сохранить информацию о новом продукте
public function create() {
// get posted JSON
//$json = json_decode(file_get_contents("php://input", true));
$json = $this->request->getJSON();
$name = $json->name;
$price = $json->price;
$sale_price = $json->sale_price;
$sales_count = $json->sales_count;
$sale_date = $json->sale_date;
$data = array(
'name' => $name,
'price' => $price,
'sale_price' => $sale_price,
'sales_count' => $sales_count,
'sale_date' => $sale_date
);
$this->model->insert($data);
$response = array(
'status' => 201,
'messages' => array(
'success' => 'Product created successfully'
)
);
return $this->respondCreated($response);
}
// получить один продукт
public function show($id = null) {
$data = $this->model->where('id', $id)->first();
if($data){
return $this->respond($data);
}else{
return $this->failNotFound('No product found');
}
}
// обновить продукт по id
public function update($id = NULL){
//$json = json_decode(file_get_contents("php://input", true));
$json = $this->request->getJSON();
$price = $json->price;
$sale_price = $json->sale_price;
$data = array(
'id' => $id,
'price' => $price,
'sale_price' => $sale_price
);
$this->model->update($id, $data);
$response = array(
'status' => 200,
'messages' => array(
'success' => 'Product updated successfully'
)
);
return $this->respond($response);
}
// удалить товар по id
public function delete($id = NULL){
$data = $this->model->find($id);
if($data) {
$this->model->delete($id);
$response = array(
'status' => 200,
'messages' => array(
'success' => 'Product successfully deleted'
)
);
return $this->respondDeleted($response);
} else {
return $this->failNotFound('No product found');
}
}
}
Шаг 7: Настройка приложения React
На этом этапе вам нужно настроить приложение React. Вы можете прочитать руководство о том, как создать новое приложение React.
Шаг 8: Создайте файл List.js
На этом этапе вам нужно создать файл list.js. Посетите каталог src/components и создайте list.js, а затем добавьте в него следующий код:
import React from 'react';
import { Link } from 'react-router-dom';
class Products extends React.Component {
constructor(props) {
super(props);
this.state = {products: []};
this.headers = [
{ key: 'id', label: 'Id'},
{ key: 'name', label: 'Name' },
{ key: 'price', label: 'Price' },
{ key: 'sale_price', label: 'Selling Price' },
{ key: 'sales_count', label: 'Sales Count' },
{ key: 'sale_date', label: 'Sale Date' }
];
this.deleteProduct = this.deleteProduct.bind(this);
}
componentDidMount() {
fetch('http://localhost:8080/product')
.then(response => {
return response.json();
}).then(result => {
console.log(result);
this.setState({
products:result
});
});
}
deleteProduct(id) {
if(window.confirm("Are you sure want to delete?")) {
fetch('http://localhost:8080/product/' + id, {
method : 'DELETE'
}).then(response => {
if(response.status === 200) {
alert("Product deleted successfully");
fetch('http://localhost:8080/product')
.then(response => {
return response.json();
}).then(result => {
console.log(result);
this.setState({
products:result
});
});
}
});
}
}
render() {
return (
<div id="container">
<Link to="/create">Add Product</Link>
<p/>
<table>
<thead>
<tr>
{
this.headers.map(function(h) {
return (
<th key = {h.key}>{h.label}</th>
)
})
}
<th>Actions</th>
</tr>
</thead>
<tbody>
{
this.state.products.map(function(item, key) {
return (
<tr key = {key}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.price}</td>
<td>{item.sale_price}</td>
<td>{item.sales_count}</td>
<td>{item.sale_date}</td>
<td>
<Link to={`/update/${item.id}`}>Edit</Link>
<a href="jаvascript:void(0);" onclick={this.deleteProduct.bind(this, item.id)}>Delete</a>
</td>
</tr>
)
}.bind(this))
}
</tbody>
</table>
</div>
)
}
}
export default Products;
Шаг 9: Создайте файл Create.js
На этом этапе вам нужно создать файл create.js. Посетите каталог src/components и создайте create.js, а затем добавьте в него следующий код:
import React from 'react';
import { Link } from 'react-router-dom';
class Create extends React.Component {
constructor(props) {
super(props);
this.state = {name: '', price:'', sale_price:'', sales_count:'', sale_date:''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const state = this.state
state[event.target.name] = event.target.value
this.setState(state);
}
handleSubmit(event) {
event.preventDefault();
fetch('http://localhost:8080/product', {
method: 'POST',
body: JSON.stringify({
name: this.state.name,
price: this.state.price,
sale_price: this.state.sale_price,
sales_count: this.state.sales_count,
sale_date: this.state.sale_date
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
}).then(response => {
if(response.status === 201) {
alert("New product saved successfully");
}
});
}
render() {
return (
<div id="container">
<Link to="/">Products</Link>
<p/>
<form onsubmit={this.handleSubmit}>
<p>
<label>Name:</label>
<input type="text" name="name" value={this.state.name} onchange={this.handleChange} placeholder="Name" />
</p>
<p>
<label>Price:</label>
<input type="text" name="price" value={this.state.price} onchange={this.handleChange} placeholder="Price" />
</p>
<p>
<label>Selling Price:</label>
<input type="text" name="sale_price" value={this.state.sale_price} onchange={this.handleChange} placeholder="Selling Price" />
</p>
<p>
<label>Sales Count:</label>
<input type="text" name="sales_count" value={this.state.sales_count} onchange={this.handleChange} placeholder="Sales Count" />
</p>
<p>
<label>Sale Date:</label>
<input type="text" name="sale_date" value={this.state.sale_date} onchange={this.handleChange} placeholder="Sale Date" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</div>
);
}
}
export default Create;
Шаг 10: Создайте файл Update.js
На этом этапе вам нужно создать файл update.js. Посетите каталог src/components и создайте update.js, а затем добавьте в него следующий код:
import React from 'react';
import { Link, withRouter } from 'react-router-dom';
class Update extends React.Component {
constructor(props) {
super(props);
this.state = {id: '', name: '', price:'', sale_price:'', sales_count:'', sale_date:''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
fetch('http://localhost:8080/product/' + this.props.match.params.id)
.then(response => {
return response.json();
}).then(result => {
console.log(result);
this.setState({
id:result.id,
name:result.name,
price:result.price,
sale_price: result.sale_price,
sales_count: result.sales_count,
sale_date: result.sale_date
});
});
}
handleChange(event) {
const state = this.state
state[event.target.name] = event.target.value
this.setState(state);
}
handleSubmit(event) {
event.preventDefault();
//alert(this.props.match.params.id);
fetch('http://localhost:8080/product/' + this.props.match.params.id, {
method: 'PUT',
body: JSON.stringify({
name: this.state.name,
price: this.state.price,
sale_price: this.state.sale_price,
sales_count: this.state.sales_count,
sale_date: this.state.sale_date
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
}).then(response => {
if(response.status === 200) {
alert("Product update successfully.");
}
});
}
render() {
return (
<div id="container">
<Link to="/">Products</Link>
<p/>
<form onsubmit={this.handleSubmit}>
<input type="hidden" name="id" value={this.state.id}/>
<p>
<label>Name:</label>
<input type="text" name="name" value={this.state.name} onchange={this.handleChange} placeholder="Name" />
</p>
<p>
<label>Price:</label>
<input type="text" name="price" value={this.state.price} onchange={this.handleChange} placeholder="Price" />
</p>
<p>
<label>Selling Price:</label>
<input type="text" name="sale_price" value={this.state.sale_price} onchange={this.handleChange} placeholder="Selling Price" />
</p>
<p>
<label>Sales Count:</label>
<input type="text" name="sales_count" value={this.state.sales_count} onchange={this.handleChange} placeholder="Sales Count" />
</p>
<p>
<label>Sale Date:</label>
<input type="text" name="sale_date" value={this.state.sale_date} onchange={this.handleChange} placeholder="Sale Date" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</div>
);
}
}
export default Update;
Шаг 11: Создайте файл Style.css
На этом этапе вам нужно создать файл style.css. Посетите каталог src/ и создайте style.css, а затем добавьте в него следующий код:
#container {
width: 800px;
margin: auto;
}
table {
border-collapse: collapse;
width: 800px;
margin: 10px auto;
}
th,
td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
tr:hover {
background-color: #ddd;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
В этом примере вы узнали, как создать пример React CRUD с Codeigniter 4 и MySQL.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.