Hallo rekan dunia maya :), sempatkan lagi saya berbagi tips trik php jquery yang sebelumnya saya telah membagikan tips
Auto Load dan Refresh Div setiap 10 Detik dengan jQuery
Sekarang saya berbagi mengenai insert data sekaligus load data tanpa merefresh halaman php, tentunya sangat mengurangi bandwidth internet kita ya kan hehe :)
Berikut tipsnya:
Step 1: Membuat Database
Untuk membuat database:
1. Buka phpmyadmin
2. Click create database dan beri nama "ajaxphp".
3. Setelah membuat database lalu klik SQL dan paste kode berikut:
CREATE TABLE IF NOT EXISTS `add_delete_record` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`content` text NOT NULL,
-
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;
Step 2: Membuat Form Form
Disini kita akan membuat form yang akan menampilkan data dari database. Untuk membuat formnya copy kode berikut dan simpan dengan nama "index.php.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Add/Delete a Record with jQuery Fade In/Fade Out</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
-
<script type="text/javascript">
$(document).ready(function() {
//##### Add record when Add Record Button is click #########
$("#FormSubmit").click(function (e) {
e.preventDefault();
if($("#contentText").val()==='')
{
alert("Please enter some text!");
return false;
}
var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
jQuery.ajax({
type: "POST", // Post / Get method
url: "response.php", //Where form data is sent on submission
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
});
});
</script>
<style>
.form_style #textarea {
border: 1px solid #CCCCCC;
}
.form_style #FormSubmit {
display: block;
background: #003366;
border: 1px solid #000066;
color: #FFFFFF;
margin-top: 5px;
}
#responds{
margin: 0px;
padding: 0px;
list-style: none;
}
#responds li{
list-style: none;
padding: 10px;
background: #D1CFCE;
margin-bottom: 5px;
border-radius: 5px;
width: 400px;
font-family: arial;
font-size: 13px;
}
.del_wrapper{float:right;}.content_wrapper {
width: 500px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="content_wrapper">
<div class="form_style">
<textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea>
<button id="FormSubmit">Add record</button>
</div>
<ul id="responds">
<?php
//include db configuration file
include_once("config.php");
//MySQL query
$Result = mysql_query("SELECT id,content FROM add_delete_record");
//get all records from add_delete_record table
-
{
echo '<li id="item_'.$row["id"].'">';
echo $row["content"].'</li>';
}
//close db connection
?>
</ul>
</div>
</body>
</html>
Step 3: Membuat koneksi Database
Copy kode dibawah ini dan simpan dengan nama file "config.php".
<?php
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = 'ajaxphp'; //databasename
$connecDB = mysql_connect($hostname, $username, $password)or
die('could not connect to database');
-
?>
Step 4: Script insert (penyimpanan data)
Pada tahap ini kita menulis kode untuk penyimpanan data tanpa meload kembali halaman. Copy kode dibawah dan simpan dengan nama "response.php".
<?php
//include db configuration file
include_once("config.php");
if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0)
{
$contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING
, FILTER_FLAG_STRIP_HIGH
);
if(mysql_query("INSERT INTO add_delete_record(content) VALUES('$contentToSave')"))
{
-
echo '<li id="item_'.$my_id.'">';
echo $contentToSave.'</li>';
}
}
?>
Itu semua yang kita butuhkan untuk membuat insert dan load data tanpa refresh halaman, coba jalankan dan lihat hasilnya :). Selamat mencoba
Download Script
Insert dan load data tanpa refresh halaman PHP
Artikel keren lainnya:
dawdawda
ReplyDelete