Beranda · Tips Trick · Film · Lagu · PHP · Tutorial Umum · jQuery · Otomotive
» » » Insert dan load data tanpa refresh halaman PHP

Insert dan load data tanpa refresh halaman PHP

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:




 

 Update cara insert Update Delete tanpa loading halaman

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:
    

  1. 
CREATE TABLE IF NOT EXISTS `add_delete_record` (

    

    2. 

  2. 
`id` int(11) NOT NULL AUTO_INCREMENT,

    

    3. 

  3. 
`content` text NOT NULL,

    

    4. 

  4. 
PRIMARY KEY (`id`)

    

    5. 

  5. 
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;
    

    6.

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.
    

  1. 
<html>

    

    2. 

  2. 
<head>

    

    3. 

  3. 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    

    4. 

  4. 
<title>Ajax Add/Delete a Record with jQuery Fade In/Fade Out</title>

    

    5. 

  5. 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

    

    6. 

  6. 

    7. 

  7. 
<script type="text/javascript">

    

    8. 

  8. 
$(document).ready(function() {

    

    9. 

  9. 
 

    

    10. 

  10. 
//##### Add record when Add Record Button is click #########

    

    11. 

  11. 
$("#FormSubmit").click(function (e) {

    

    12. 

  12. 
e.preventDefault();

    

    13. 

  13. 
if($("#contentText").val()==='')

    

    14. 

  14. 
{

    

    15. 

  15. 
alert("Please enter some text!");

    

    16. 

  16. 
return false;

    

    17. 

  17. 
}

    

    18. 

  18. 
var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure

    

    19. 

  19. 
jQuery.ajax({

    

    20. 

  20. 
type: "POST", // Post / Get method

    

    21. 

  21. 
url: "response.php", //Where form data is sent on submission

    

    22. 

  22. 
dataType:"text", // Data type, HTML, json etc.

    

    23. 

  23. 
data:myData, //Form variables

    

    24. 

  24. 
success:function(response){

    

    25. 

  25. 
$("#responds").append(response);

    

    26. 

  26. 
},

    

    27. 

  27. 
error:function (xhr, ajaxOptions, thrownError){

    

    28. 

  28. 
alert(thrownError);

    

    29. 

  29. 
}

    

    30. 

  30. 
});

    

    31. 

  31. 
});

    

    32. 

  32. 
 

    

    33. 

  33. 
});

    

    34. 

  34. 
</script>

    

    35. 

  35. 
<style>

    

    36. 

  36. 
.form_style #textarea {

    

    37. 

  37. 
border: 1px solid #CCCCCC;

    

    38. 

  38. 
}

    

    39. 

  39. 
 

    

    40. 

  40. 
.form_style #FormSubmit {

    

    41. 

  41. 
display: block;

    

    42. 

  42. 
background: #003366;

    

    43. 

  43. 
border: 1px solid #000066;

    

    44. 

  44. 
color: #FFFFFF;

    

    45. 

  45. 
margin-top: 5px;

    

    46. 

  46. 
}

    

    47. 

  47. 
#responds{

    

    48. 

  48. 
margin: 0px;

    

    49. 

  49. 
padding: 0px;

    

    50. 

  50. 
list-style: none;

    

    51. 

  51. 
}

    

    52. 

  52. 
#responds li{

    

    53. 

  53. 
list-style: none;

    

    54. 

  54. 
padding: 10px;

    

    55. 

  55. 
background: #D1CFCE;

    

    56. 

  56. 
margin-bottom: 5px;

    

    57. 

  57. 
border-radius: 5px;

    

    58. 

  58. 
width: 400px;

    

    59. 

  59. 
font-family: arial;

    

    60. 

  60. 
font-size: 13px;

    

    61. 

  61. 
}

    

    62. 

  62. 
.del_wrapper{float:right;}.content_wrapper {

    

    63. 

  63. 
width: 500px;

    

    64. 

  64. 
margin-right: auto;

    

    65. 

  65. 
margin-left: auto;

    

    66. 

  66. 
}

    

    67. 

  67. 
</style>

    

    68. 

  68. 
</head>

    

    69. 

  69. 
<body>

    

    70. 

  70. 
<div class="content_wrapper">

    

    71. 

  71. 
<div class="form_style">

    

    72. 

  72. 
<textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea>

    

    73. 

  73. 
<button id="FormSubmit">Add record</button>

    

    74. 

  74. 
</div>

    

    75. 

  75. 
<ul id="responds">

    

    76. 

  76. 
<?php

    

    77. 

  77. 
//include db configuration file

    

    78. 

  78. 
include_once("config.php");

    

    79. 

  79. 
 

    

    80. 

  80. 
//MySQL query

    

    81. 

  81. 
$Result = mysql_query("SELECT id,content FROM add_delete_record");

    

    82. 

  82. 
 //get all records from add_delete_record table

    

    83. 

  83. 
while($row = mysql_fetch_array($Result))

    

    84. 

  84. 
{

    

    85. 

  85. 
echo '<li id="item_'.$row["id"].'">';

    

    86. 

  86. 
echo $row["content"].'</li>';

    

    87. 

  87. 
}

    

    88. 

  88. 
 

    

    89. 

  89. 
//close db connection

    

    90. 

  90. 
?>

    

    91. 

  91. 
</ul>  

    

    92. 

  92. 
</div>

    

    93. 

  93. 
 

    

    94. 

  94. 
 

    

    95. 

  95. 
 

    

    96. 

  96. 
</body>

    

    97. 

  97. 
</html>
    

    98.

Step 3: Membuat koneksi Database 

Copy kode dibawah ini dan simpan dengan nama file "config.php".
    

  1. 
<?php

    

    2. 

  2. 
$username = "root"; //mysql username

    

    3. 

  3. 
$password = ""; //mysql password

    

    4. 

  4. 
$hostname = "localhost"; //hostname

    

    5. 

  5. 
$databasename = 'ajaxphp'; //databasename

    

    6. 

  6. 
 

    

    7. 

  7. 
$connecDB = mysql_connect($hostname, $username, $password)or die('could not connect to database');

    

    8. 

  8. 
mysql_select_db($databasename,$connecDB);

    

    9. 

  9. 
 

    

    10. 

  10. 
?>
    

    11.

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".
    

  1. 
<?php

    

    2. 

  2. 
//include db configuration file

    

    3. 

  3. 
include_once("config.php");

    

    4. 

  4. 
 

    

    5. 

  5. 
if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0) 

    

    6. 

  6. 
{ 

    

    7. 

  7. 
$contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);

    

    8. 

  8. 
if(mysql_query("INSERT INTO add_delete_record(content) VALUES('$contentToSave')"))

    

    9. 

  9. 
{

    

    10. 

  10. 
$my_id = mysql_insert_id();

    

    11. 

  11. 
echo '<li id="item_'.$my_id.'">';

    

    12. 

  12. 
echo $contentToSave.'</li>';

    

    13. 

  13. 
}

    

    14. 

  14. 
}

    

    15. 

  15. 
?>

    

    16.
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:

Ditulis oleh pada tanggal Thursday, July 24, 2014

1 Tanggapan untuk "Insert dan load data tanpa refresh halaman PHP"