Simpan Data ke Database

Install Axios

Buka terminal lalu ketik perintah berikut ini:

yarn add axios

Import Axios

Bukalah file src/pages/layout.js lalu masukan kode berikut ini:

import axios from ‘axios’;

Membuat Konstanta Simpan

Bukalah file src/pages/layout.js lalu masukan kode berikut ini dalam fungsi TambahDonasi:

const simpan = async (event) =>{

event.preventDefault()
let arrEl = Array.from(event.target.elements)

let judul = arrEl[0].value
let foto = arrEl[1].files[0]
let target_jumlah = arrEl[2].value
let tgl_expired = arrEl[3].value

const dataForm = {

judul:judul,
foto:foto,
target_jumlah:target_jumlah,
tgl_expired:tgl_expired

}

try{

let respon = await axios.post(“http://urlWebsitemu/apiSimpanDatadonasi.php”, dataForm,
{
headers: {‘Content-Type’: ‘multipart/form-data’}

})

alert(respon.data);

}catch(er){

console.log(er)

}

Keterangan:

Array.from(event.target.elements) : Membuat elemen form menjadi array
arrEl[0].value : digunakan untuk mengambil nilai dari elemen pertama form
arrEl[1].files[0] : digunakan untuk mengambil file dari elemen kedua form

Menambahkan Event onSubmit pada Form

Tambahkan atribut form seperti kode berikut ini:

Membuat Tabel wp_donasi

Masukan kode berikut ini pada query PHPMyAdmin:

CREATE TABLE `wp_donasi` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`judul` TINYTEXT NOT NULL COLLATE ‘utf8mb4_general_ci’,
`foto` VARCHAR(100) NOT NULL COLLATE ‘utf8mb4_general_ci’,
`jumlah_target` VARCHAR(10) NULL DEFAULT ” COLLATE ‘utf8mb4_general_ci’,
`tgl_expired` DATE NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
)
COLLATE=’utf8mb4_general_ci’
ENGINE=InnoDB;

Membuat File PHP penerima data

Buatlah sebuah file bernama apiSimpanDatadonasi.php lalu masukkan kode berikut ini:

<?php

header(‘Access-Control-Allow-Origin: http://localhost:3000′);

$target_dir = “uploads/”;
$extensi = pathinfo($_FILES[“foto”][“name”], PATHINFO_EXTENSION);
$waktu = time().’.’.$extensi;
$target_file = $target_dir .$waktu;
if (move_uploaded_file($_FILES[“foto”][“tmp_name”], $target_file)) {

error_log(“The file “. htmlspecialchars( basename( $_FILES[“foto”][“name”])). ” has been uploaded.”);

}

$servername = “localhost”;
$username = “userMySQLmu”;
$password = “passwordMySQLmu”;
$dbname = “namaDatabasemu”;
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {

die(“Connection failed: ” . $conn->connect_error);

}

$sql = “INSERT INTO wp_donasi (judul, foto,jumlah_target,tgl_expired) VALUES (‘{$_POST[‘judul’]}’, ‘$waktu’, ‘{$_POST[‘target_jumlah’]}’,'{$_POST[‘tgl_expired’]}’)”;

if ($conn->query($sql) === TRUE) {

echo “New record created successfully”;

} else {

echo “Error: ” . $sql . “<br>” . $conn->error;

}

$conn->close();

Keterangan:

Disini nama file yang akan disimpan itu adalah angka unix timestamp (waktu dalam satuan detik)

reactjs