Kirim Data Tanpa Refresh Halaman Menggunakan MySQLi
Dalam tutorial ini kita akan membuat Kirim Data Tanpa Refresh Halaman Menggunakan MySQLi . PHP adalah bahasa skrip sisi server yang dirancang terutama untuk pengembangan web. Ini adalah cara yang ramping dan konsisten untuk mengakses database. Ini berarti pengembang dapat menulis kode portabel dengan lebih mudah. Itu sebagian besar digunakan oleh coders baru untuk lingkungan yang ramah pengguna. Jadi mari kita lakukan pengkodean ...
Mulai:
Pertama, kita harus mengunduh & menginstal XAMPP atau server lokal yang menjalankan skrip PHP. Berikut tautan untuk server XAMPP https://www.apachefriends.org/index.html .Baca Juga
Dan ini adalah tautan untuk jquery yang saya gunakan dalam tutorial ini https://jquery.com/ .
Terakhir, ini adalah tautan untuk bootstrap yang saya gunakan untuk desain tata letak https://getbootstrap.com/ .
Membuat Database
Buka server web database kita kemudian buat nama database di dalamnya db_student , setelah itu klik Impor kemudian cari file database di dalam folder aplikasi kemudian klik ok.Membuat koneksi basis data
Buka segala jenis editor teks (notepad ++, dll.). Kemudian cukup salin / tempel kode di bawah ini, beri nama conn.php .<?php
$conn = mysqli_connect("localhost", "root", "", "db_student") or die(mysqli_error());
if(!$conn){
die("Error: Failed to connect to database");
}
?>
Membuat Front-End
Di sinilah kita akan membuat formulir sederhana untuk aplikasi kita. Untuk membuat formulir cukup salin dan tulis ke editor teks kita, lalu simpan sebagai index.php .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="<a href="https://sourcecodester.com">Sourcecodester</a>
" rel="nofollow">https://sourcecodester.com">Sourcecodester</a>
</a> </div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">PHP - Submit Data Without Page Refresh Using Ajax</h3>
<hr style="border-top:1px dotted #ccc;"/>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#form_modal"><span class="glyphicon glyphicon-plus"></span> Add Student</button>
<br /><br />
<table class="table table-bordered">
<thead class="alert-success">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
</thead>
<tbody id="data" style="background-color:#fff;"></tbody>
</table>
</div>
<div class="modal fade" id="form_modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST">
<div class="modal-header">
<h3 class="modal-title">Add Student</h3>
</div>
<div class="modal-body">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="form-group">
<label>Firstname</label>
<input type="text" id="firstname" class="form-control"/>
</div>
<div class="form-group">
<label>Lastname</label>
<input type="text" id="lastname" class="form-control"/>
</div>
<div class="form-group">
<label>Age</label>
<input type="number" min="0" max="200" id="age" class="form-control"/>
</div>
<div class="form-group">
<label>Gender</label>
<select class="form-control" id="gender">
<option value="">--Please select an option--</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label>Address</label>
<input type="text" id="address" class="form-control"/>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="modal-footer">
<button type="button" id="save" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Save</button>
<button class="btn btn-danger" type="button" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Membuat Query PHP
Kode ini berisi permintaan php aplikasi. Kode ini akan menyimpan data ke server database dan mengambilnya menggunakan permintaan ajax. Untuk melakukannya, cukup salin dan tulis blok kode ini di dalam editor teks, lalu simpan seperti yang ditunjukkan di bawah ini.save_student.php
<?php
require 'conn.php';
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$age = $_POST['age'];
$gender = $_POST['gender'];
$address = $_POST['address'];
mysqli_query($conn, "INSERT INTO `student` VALUES('', '$firstname', '$lastname', '$age', '$gender', '$address')") or die(mysqli_error());
echo "Save Data";
?>
data.php
<?php
require 'conn.php';
if(ISSET($_POST['res'])){
$query = mysqli_query($conn, "SELECT * FROM `student` ORDER BY `lastname` ASC") or die(mysqli_error());
while($fetch = mysqli_fetch_array($query)){
echo
"<tr>
<td>".$fetch['firstname']."</td>
<td>".$fetch['lastname']."</td>
<td>".$fetch['age']."</td>
<td>".$fetch['gender']."</td>
<td>".$fetch['address']."</td>
</tr>";
}
}
?>
Membuat Fungsi Utama
Kode ini berisi fungsi utama aplikasi. Kode ini akan mengirimkan permintaan ajax ke server database tanpa menyegarkan halaman web untuk mengambil hasilnya. Untuk melakukannya, cukup salin dan tulis blok kode ini di dalam editor teks, lalu simpan di dalam direktori js sebagai script.js .
$(document).ready(function(){
displayData();
$('#save').on('click', function(){
var firstname = $('#firstname').val();
var lastname = $('#lastname').val();
var age = $('#age').val();
var gender = $('#gender').val();
var address = $('#address').val();
if($('#firstname').val() == "" || $('#lastname').val() == "" || $('age').val() == "" || $('gender').val() == "" || $('address').val()){
alert("Please complete the required field");
}else{
$.ajax({
type: 'POST',
url: 'save_student.php',
data: {
firstname: firstname,
lastname: lastname,
age: age,
gender: gender,
address: address
},
success: function(data){
$("#form_modal").modal('hide');
$('#firstname').val('');
$('#lastname').val('');
$('#age').val('');
$('#gender').val('');
$('#address').val('');
alert(data);
displayData();
}
})
}
});
function displayData(){
$.ajax({
type: 'POST',
url: 'data.php',
data: {res: 1},
success: function(data){
$('#data').html(data)
}
});
}
});
Di sana kita memilikinya, kami berhasil membuat Kirim Data Tanpa Refresh Halaman Menggunakan MySQLi . Saya harap tutorial sederhana ini membantu kita mendapatkan apa yang kita cari. Untuk pembaruan dan tutorial lainnya, silakan kunjungi situs ini. Nikmati Pengodean!
0 Response to "Kirim Data Tanpa Refresh Halaman Menggunakan MySQLi"
Posting Komentar