Membuat Time Save Data Otomatis Dengan phpmysql dan Javascript

-Membuat Time Save Data Otomatis Dengan phpmysql dan Javascript. Bertemu lagi dengan zlearn.id pada kesempatan ini saya akan membuat tutorial programing dan disertai source kodenya yaitu membuat Time Save Data Otomatis Dengan phpmysql dan Javascript.  nah kali ini saya akan membuat sebuah kontak atau komentar yang akan otomatis tersimpan dan terkirim ke database dengan pewaktu otomatis yang telah di atur sedemikian rupa.
Nah bagi anda yang mencari tutorial membuat form auto save  dengan js dan php anda menemukan tempat yang tepat.
http://www.zlearn.id/2017/08/membuat-timesavedata-otomatis-phpmysql-js.html


langsung saja masuk ke tutorial. Oh ya bagi yang mau mendownload source kode Time Save Data Otomatis Dengan phpmysql dan Javascript   bisa mendowloadnya di akhir tutorial.


 pertama buat buat 2 file php dan berinam file  tersebut dengan nama index.php dan data.php. seddikit penjelasang singkat file index.php berfungsi untuk menampilkan form pewaktu sedangkan data.php berfungsi untuk digunakan sebagai pemrosesan data dan men girimkannya ke webserver/localhost anda.

pertama buka text editor anda dan buat sebuah file dengan anam index.php kemudian ketikan kode di bawah ini:
<!DOCTYPE html>
<html>
    <head>
        <title>Simpan data aotomatis dengan pewaktu  </title>


        <style>
            .main { 
                width: 900px; 
                margin: 0 auto; 
                height: 900px;
                border: 1px solid #ccc;
                padding: 20px;
            }

            .header{
                height: 100px;    
            }
            .content{    
                height: 700px;
                border-top: 1px solid #ccc;
                padding-top: 15px;
            }
            .footer{
                height: 100px;  
                bottom: 0px;
            }
            .heading{
                color: #FF5B5B;
                margin: 10px 0;
                padding: 10px 0;
                font-family: trebuchet ms;
            }

            textarea{
                width: 878px;
                height: 310px;
                border: 3px solid #cccccc;
                padding: 5px;
                font-family: Tahoma, sans-serif;


            }
            #timer{
                width:400px;
                float:left;
                
            }
            #upd_div{
                float:left;                
                color:red;
            }

        </style>

    </head>
    <body>

        <div class="main">
            <div class="header"><a title="devzone.co.in"></a>

            </div>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script>
                $(document).ready(function() {
                    timePicker(10);
                });
            </script>
            <script>
            // timer code starts here --- 
            //var init2 = 50;
                var s;

                function timePicker(vr) {

                    if (vr > 0)
                    {
                        if (vr > 1) {
                              $('#timer').html('Data will be updated in next '+ vr+' secounds');
                          
                            
                        } else {
                          
                              $('#timer').html('Data will be updated in next 1 secound');
                        }
                        vr--;
                        s = setTimeout('timePicker(' + vr + ')', 1000);
                    } else {
                        clearInterval(s);
                        
                        $.post('data.php',{txt_area:$('#dstr').val()},function(r){                            
                             $('#upd_div').html("Last Updated: "+r);
                        $('#timer').html('Saved.. Data will be updated in next 10 secounds');
                        s = setTimeout('timePicker(' + 10 + ')', 5000);
                        return false;
                            
                        });
                    }
                }
            </script>

            <div class="content">
                <div class="heading">
                    Auto save data after specific time using JQuery, PHP
                </div>

                <div id='dv1'>
                    Enter Content For About Us
                    <textarea id="dstr"></textarea>
                    <div id="timer_upd_dev"><div id="timer">x Secs </div><div id="upd_div"> </div></div>
                </div>
            </div></div>
        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-43091346-1', 'devzone.co.in');
            ga('send', 'pageview');

        </script>

    </body>

</html>

kemudian buat satu file lagi dengan anam data.php dan ketika script dibawah ini:
<?php


$con=mysqli_connect("localhost","root","","a");

if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

if (isset($_POST['txt_area']) && $_POST['txt_area'] != '') {    
        
    $data = mysql_real_escape_string($_POST['txt_area']);

    $qry = "Select count(*) as cnt from tbl_cms";
    $res = mysqli_query($con,$qry);
    $row = mysqli_fetch_array($res);
            
    $date_last_modified = date('Y-m-d H:i:s');
    
    if ($row['cnt'] == 0) {
        $qry_ins = "INSERT INTO `tbl_cms` (`id`, `header`, `content`, `date_created`, `date_last_modified` ) 
 VALUES 
 ('1', 'About Us', '" . $data . "', '" . date('Y-m-d H:i:s') . "', '" . $date_last_modified . "' );";
        mysqli_query($con,$qry_ins);
    } else {

        $qry_upd = "Update `tbl_cms` set  `content`='" . $data . "',  `date_last_modified` ='" . $date_last_modified . "' where id=id";
        mysqli_query($con,$qry_upd);
    }

    echo $date_last_modified;
}
?>

Oh ya hampir ketinggalan kemudian buat sebuah database dengan nama a dan dengan sql seperti script dibawah ini.



CREATE TABLE `tbl_cms` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `header` varchar(255) DEFAULT NULL,
  `content` text,
  `date_created` datetime DEFAULT NULL,
  `date_last_modified` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

anda bisa menyalin script sql diatas dan kemudian save as sql atau langsung run sql di phpmyadmin anda.

nah sudah selesai lalu coba jalankan di web server anda dan jika anda mengikuti tutorial dengan be nar maka tampilannya akan seperti gambar di bawah ini:
http://www.zlearn.id/2017/08/membuat-timesavedata-otomatis-phpmysql-js.html
sekian tutorial dari zlearn.id semoga dapat bermanfaat dan apabila ada pertanyaan silahkan tuliskan di kolom komentar yang telah kami sediaan.

baca juga:
Tutorial Membuat Gallery Web Keren dan Source Kode
Membuat Desain Login Colorfull Web HTML5 dan CSS3
Kumpulan Source Kode Programing Gratis
Kumpulan Tips dan Trik Blogging
Kumpulan Tutorial Web Desain




Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...