in

Ajax, Jquery Kullanarak Php ‘de Mysql Otomatik Veri Kaydetmek

Php de veri otomatik nasıl kaydedilir, kaydet butonuna tıklamadan sadece form doldurulduktan sonra verinin kaydedilmesini isteyenler için örnek kodlamadan bahsedeceğiz.

Mesela wordpress panelde yazarken belli bir süre sonra yazıyı taslak olarak otomatik kayıt altına alıyor. Bunun gibi özelliği kendi projelerinizde kullanmak kullanıcılar için kolaylık olacaktır.

  • Formlara id verilecek,
  • İd ye sahip formlar ajax ile kontrol edilip belli sürede post edilecek
  • Post edilen değerler  bir php sayfasına gönderilecek
  • Php sayfasında bu veriler insert veya update yapılacak.

Adımlarımız bu şekil olacaktır.

index.php sayfası;

<html>  
     <head>  
          <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
          <meta charset="utf-8">  
          <title>Webslesson Tutorial</title>  
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
     </head>  
     <body>  
          <div class="container">  
               <br />  
               <h2 align="center">Otomatik Veri Kaydetme</h2>  
               <br />  
               <div class="form-group">  
                    <label>Başlık Girin<label>  
                    <input type="text" name="post_title" id="post_title" class="form-control" />  
               </div>  
               <div class="form-group">  
                    <label>Açıklama girin</label>  
                    <textarea name="post_description" id="post_description" rows="6" class="form-control"></textarea>  
               </div>
   <div class="form-group">
    <button type="button" name="publish" class="btn btn-info">Yayınla</button>
   </div>
               <div class="form-group">  
                    <input type="hidden" name="post_id" id="post_id" />  
                    <div id="autoSave"></div>  
               </div>  
          </div>  
     </body>  
</html>  
<script>  
$(document).ready(function(){  
     function autoSave()  
     {  
          var post_title = $('#post_title').val();  
          var post_description = $('#post_description').val();  
          var post_id = $('#post_id').val();  
          if(post_title != '' && post_description != '')  
          {  
               $.ajax({  
                    url:"save_post.php",  
                    method:"POST",  
                    data:{postTitle:post_title, postDescription:post_description, postId:post_id},  
                    dataType:"text",  
                    success:function(data)  
                    {  
                         if(data != '')  
                         {  
                              $('#post_id').val(data);  
                         }  
                         $('#autoSave').text("Kaydedildi");  
                         setInterval(function(){  
                              $('#autoSave').text('');  
                         }, 5000);  
                    }  
               });  
          }            
     }  
     setInterval(function(){   
          autoSave();   
          }, 10000);  
});  
</script>

save_post.php sayfası

<?php  
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["postTitle"]) && isset($_POST["postDescription"]))
{
 $post_title = mysqli_real_escape_string($connect, $_POST["postTitle"]);
 $post_description = mysqli_real_escape_string($connect, $_POST["postDescription"]);
 if($_POST["postId"] != '')  
 {  
   //update post  
   $sql = "UPDATE tbl_post SET post_title = '".$post_title."', post_description = '".$post_description."' WHERE post_id = '".$_POST["postId"]."'";  
   mysqli_query($connect, $sql);  
 }  
 else  
 {  
   //insert post  
   $sql = "INSERT INTO tbl_post(post_title, post_description, post_status) VALUES ('".$post_title."', '".$post_description."', 'draft')";  
   mysqli_query($connect, $sql);  
   echo mysqli_insert_id($connect);  
 }
}  
?>

Database

CREATE TABLE IF NOT EXISTS `tbl_post` (  
 `post_id` int(11) NOT NULL AUTO_INCREMENT,  
 `post_title` text NOT NULL,  
 `post_description` text NOT NULL,  
 `post_status` varchar(15) NOT NULL,  
 PRIMARY KEY (`post_id`)  
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Javascript kodlarında

setInterval(function(){ $('#autoSave').text(''); }, 5000);

Bu kısımda 5000 değerinde yane 5 saniyede bir  kaydedildi yazısını boş alanla değiştirmektedir.

setInterval(function(){ autoSave(); }, 10000);

10 saniyede bir autoSave fonksiyonu çalışıyor. Eğer formda veriler varsa kaydedildi yazısı yazıyor.

5 saniye sonrada kaydedildi yazısı yerine boş text gönderiyor. Yane yazı siliniyor. Kaydedildi yazısı kısmınıda boş yapabilirsiniz. Yazı yazdırmak zorunda değilsiniz.

<div id="autoSave"></div>

Yazılan kaydedildi metini id autosave olan div tagları arasında çıkmaktadır. Sayfanızın yapısına göre div tagını dilediğiniz yere yerleştirebilirsiniz.

 

<button type="button" name="publish" class="btn btn-info">Yayınla</button>

Sadece otomatik kayıt olmasını istiyorsanız yayınla butonunu da silebilirsiniz.

10 saniyede bir kontrol kısmını 3 saniye(3000 değeri) yapıp butonuda kaldırdığınızda yayınla butonuna  tıklamadan kaydetme işlemi gerçekleşecektir.

 

Göndereceğiniz post_id yi php değişkenine atayabilirsiniz.

 

url:"save_post.php",

bu kısımdaki url ye

url:"save_post.php?kayitid=<?=$kayitid?>",

gibi değer ekleyip save_post.php üstüne  $kayitid=$_GET[‘kayitid’]; kodunu ekleyerek değeri save_post.php de kullanabilirsiniz.

 

guest
0 Yorum
Inline Feedbacks
View all comments