Cara Menyimpan Form Otomatis Menggunakan Cookies pada HTML PHP – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan memposting tentang cara mengembalikan isian form yang belum disimpan. Biasanya saat pengguna sedang mengisi form dan tiba-tiba terjadi masalah dan saat kembali ke menu form tersebut pasti data isian yang telah diisikan sebelumnya akan hilang. Hal ini tentu akan membuat pengguna malas karena harus mengetikkan lagi dari awal apa yang sudah diketikkan sebelumnya. Oleh karena itu saya akan membahas tentang cara menyimpan form isian yang telah diinputkan oleh pengguna sehingga isian pada form akan selalu ada / dapat direstore walaupun kita sudah pindah halaman atau refresh halaman.
Pada contoh kali ini saya tidak akan menyimpan ke dalam database, melainkan disimpan ke dalam cookies pada browser dengan menggunakan javascript. Sudah ada yang namanya plugin savy jadi kita tidak perlu membuat dari awal. Caranya sangat mudah yaitu
1. Pertama kita membutuhkan jquery.min.js dan savy.min.js, sobat bisa mendownloadnya terlebih dahulu dengan search di google atau bisa juga mendownload bersama project ini di akhir postingan.
2. Kemudian kita masukkan pada file kita dan pada contoh saya akan membuat file index.php jadi akan saya masukkan kode dibawah pada file index.php pada tag <body> paling bawah.
|
1 2 3 4 5 6 7 8 9 10 |
<script src="js/jquery.min.js"></script> <script src="js/savy.min.js"></script> <script> $(document).ready(function(){ $('.auto-save').savy('load'); $( "#hapus" ).click(function() { $('.auto-save').savy('destroy'); }); }); </script> |
3. Kemudian saya buat formnya sebagai contoh, pada file index.php dengan mengisikan seperti kode dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<form method="post" action="" id="form-input"> <div class="row"> <div class="col-sm-5 offset-sm-3"> <div class="form-group"> <label>Nama Mahasiswa</label> <input type="text" name="nama_mahasiswa" id="nama_mahasiswa" class="form-control auto-save" required="true"> </div> <div class="form-group"> <label>Jurusan</label> <select name="jurusan" id="jurusan" class="form-control auto-save" required="true"> <option value=""></option> <option value="Sistem Informasi">Sistem Informasi</option> <option value="Teknik Informatika">Teknik Informatika</option> </select> </div> <div class="form-group"> <label>Jenis Kelamin</label><br> <input class="auto-save" type="radio" name="jenkel" id="jenkel1" value="Laki-laki"> Laki-laki <input class="auto-save" type="radio" name="jenkel" id="jenkel2" value="Perempuan"> Perempuan </div> <div class="form-group"> <label>Alamat</label> <textarea name="alamat" id="alamat" class="form-control auto-save" required="true"></textarea> <p class="text-danger" id="err_alamat"></p> </div> <div class="form-group"> <label>Hobi</label><br> <input class="auto-save" type="checkbox" name="hobi" id="hobi1" value="Memancing" required="true"> Memancing <input class="auto-save" type="checkbox" name="hobi" id="hobi2" value="Membaca"> Membaca <input class="auto-save" type="checkbox" name="hobi" id="hobi3" value="Programming"> Programming </div> <div class="form-group"> <button type="submit" name="simpan" id="simpan" class="btn btn-primary"> Simpan </button> <button type="submit" name="hapus" id="hapus" class="btn btn-primary"> Simpan & Hapus History </button> </div> </div> </div> </form> |
Penjelasan :
Pada javascriptnya kita sudah membuat dengan menambahkan kode dibawah
|
1 |
$('.auto-save').savy('load'); |
yang berarti savy akan menyimpan isian form dengan elemen yang mempunyai class .auto-save. oleh karena itu kita menambahkan auto-save pada nama classnya setiap elemen inputan.
Kemudian pada tombol dengan id #hapus akan menghapus semua cookies yang sudah dibuat jadinya jika pengguna sudah submit form dan jika pengguna belum submit form maka cookies akan tetap ada.
4. Dengan sedikit modifikasi untuk mempercantik tampilan menggunakan bootstrap maka kodenya akan menjadi seperti dibawah dan setelah di jalankan akan jadi seperti gambar dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <link rel="icon" href="dk.png"> <title>Dewan Savy - www.dewankomputer.com</title> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-dark bg-primary"> <a class="navbar-brand" href="index.php" style="color: #fff;"> Dewan Komputer </a> </nav> <div class="container"> <h2 align="center" style="margin: 30px;">Dewan Savy Menyimpan History Form Input</h2> <form method="post" action="" id="form-input"> <div class="row"> <div class="col-sm-5 offset-sm-3"> <div class="form-group"> <label>Nama Mahasiswa</label> <input type="text" name="nama_mahasiswa" id="nama_mahasiswa" class="form-control auto-save" required="true"> </div> <div class="form-group"> <label>Jurusan</label> <select name="jurusan" id="jurusan" class="form-control auto-save" required="true"> <option value=""></option> <option value="Sistem Informasi">Sistem Informasi</option> <option value="Teknik Informatika">Teknik Informatika</option> </select> </div> <div class="form-group"> <label>Jenis Kelamin</label><br> <input class="auto-save" type="radio" name="jenkel" id="jenkel1" value="Laki-laki"> Laki-laki <input class="auto-save" type="radio" name="jenkel" id="jenkel2" value="Perempuan"> Perempuan </div> <div class="form-group"> <label>Alamat</label> <textarea name="alamat" id="alamat" class="form-control auto-save" required="true"></textarea> <p class="text-danger" id="err_alamat"></p> </div> <div class="form-group"> <label>Hobi</label><br> <input class="auto-save" type="checkbox" name="hobi" id="hobi1" value="Memancing" required="true"> Memancing <input class="auto-save" type="checkbox" name="hobi" id="hobi2" value="Membaca"> Membaca <input class="auto-save" type="checkbox" name="hobi" id="hobi3" value="Programming"> Programming </div> <div class="form-group"> <button type="submit" name="simpan" id="simpan" class="btn btn-primary"> Simpan </button> <button type="submit" name="hapus" id="hapus" class="btn btn-primary"> Simpan & Hapus History </button> </div> </div> </div> </form> <hr> </div> <div class="text-center">© <?php echo date('Y'); ?> Copyright: <a href="https://dewankomputer.com/"> Dewan Komputer</a> </div> <script src="js/jquery.min.js"></script> <script src="js/savy.min.js"></script> <script> $(document).ready(function(){ $('.auto-save').savy('load'); $( "#hapus" ).click(function() { $('.auto-save').savy('destroy'); }); }); </script> </body> </html> |
Hasil :
Cara diatas adalah menyimpan history dari inputan ke dalam cookies pada browser. Jika sobat belum klik simpan dan hapus history maka saat membuka halaman/form maka akan selalu muncul inputan sebelumnya yang sudah sobat inputkan pada form tersebut. Sebenarnya seharusnya tombolnya hanya ada 1 saja yaitu tombol Simpan jadi waktu disimpan maka history akan secara otomatis terhapus namun karena ini untuk demo jadi saya bedakan menjadi “Simpan” dan “Simpan & Hapus History“. Untuk mautosave ke dalam database juga akan saya posting nanti pada postingan saya selanjutnya yang tentunya menyimpan menggunakan Ajax tiap beberapa waktu yang telah ditentukan.
Sekian postingan saya tentang Cara Menyimpan Form Otomatis / AutoSave Menggunakan Cookies pada HTML PHP. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :