Membuat Create Sederhana Dengan PHP & Ajax

Membuat Create Sederhana Dengan PHP & Ajax

Membuat Create Sederhana Dengan PHP & Ajax

Kali ini kita akan sama-sama membuat crud item sederhana menggunakan PHP dan jQuery Ajax.

Pertama-tama buatlah table pada database yang sudah dibuat sebelumnya dengan sql berikut:

CREATE TABLE IF NOT EXISTS `profil` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT,

`nama` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`telp` text COLLATE utf8_unicode_ci NOT NULL,

`created_at` timestamp,

`updated_at` datetime,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=63 ;

Selanjutnya mari kita buat proyek di localhost di dalam folder crud dan buat file baru bernama index.php dengan isi:

<!DOCTYPE html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css” integrity=”sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M” crossorigin=”anonymous”>
</head>
<body>
<h4>Crud</h4>

<form>

<div class=”col-md-6 mr-md-auto”>
<div class=”form-group”>
<label class=”control-label” for=”title”>Nama:</label>
<input type=”text” name=”nama” id=”nama” class=”form-control” data-error=”Masukkan nama” required />
<div class=”help-block with-errors”></div>
</div>
<div class=”form-group”>
<label class=”control-label” for=”telp”>Telp:</label>
<input type=”text” name=”telp” id=”telp” class=”form-control” data-error=”Masukkan telp” required />
<div class=”help-block with-errors”></div>
</div>

<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
<button onclick=”saveData()” class=”btn btn-primary”>Simpan</button>
</div>

</form>

<!– Optional JavaScript –>
<!– jQuery first, then Popper.js, then Bootstrap JS –>
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js” integrity=”sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4″ crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js” integrity=”sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1″ crossorigin=”anonymous”></script>

<script>
function saveData(){
var nama = $(‘#name’).val();
var telp = $(‘#telp’).val();

$.ajax({
type: ‘POST’,
url: “server.php?p=add”,
data: “name=”+nama+”&telp=”+telp,
dataType: ‘json’,
success:function(){
alert(‘Data berhasil disimpan’);
}
});
}
</script>
</body>
</html>

Setelah itu buat server.php dengan kode

<?php
$db = new PDO(“mysql;host=localhost;dbname=ajax”,”root”,”toor”);

$page = isset($_GET[‘p’]) ? $_GET[‘p’]:”;
var_dump($page);die;
if ($page == ‘add’) {
$name = $_POST[‘name’];
$telp = $_POST[‘telp’];

$stmt = $db->prepare(‘insert into profil values(”,?,?)’);
$stmt->bindParam(1,$name);
$stmt->bindParam(2,$telp);
$stmt->execute();
}
?>

Nah dengan 3 langkah di atas kita sudah memiliki kode untuk membuat sebuah data di dalam database.

Ditulis oleh : Labib Muhajir (Peserta didik MIT school)

Related posts:

Loading Facebook Comments ...