Cara Membuat Aplikasi Sederhana Localstorage


kangpepe.com | Pada tutorial kali ini saya akan membuat sebuah aplikasi web sederhana tanpa menggunakan web server seperti apache dan MySQL hanya menggunakan javascript dan fitur canggih yang dimiliki HTML5. Web browser pada saat ini sudah mendukung semua fitur yang dimiliki HTML5 seperti canvas, WebGL, localStorage yang digunakan untuk menyimpan data dalam bentuk key value, video dan Audio dan lainya.

localStorage ini biasanya dapat kita gunakan untuk penyimpanan sementara sebelum ti teruskan pada Database agar data dapat di edit kembali sebelum finalisasi data pada sebuah sistem, kali ini kita akan berhubungan dengan Ajax JavaScript  dalam pembuatan Web App ini.

JavaScript saat ini sangat Fenomenal sehngga kita dapat melakukan kolaborasi dengan bahasa pemrograman lainya seperti HTML, untk langkah pada article ini nanti bisa di pelajari nantinya, saya haya membuat source yang nantinya mungkin anda gunakan pada pembelajarna, untuk coding jelasnya seperti dibawah ini :


 <!DOCTYPE HTML>
<html>
    <head>
        <title>LocalStorage JavaScript</title>
        <script src="files/js/jquery.min.js"></script>
        <script src="files/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="files/bootstrap/css/bootstrap.min.css">
    </head>
    <body onload="muatDaftarData();">     
        <div class="col-md-8 col-md-offset-2" ng-controller="listContactCtrl">
            <div class="page-header">
                <h1><img width='100%' src="files/bootstrap/kangpepe.com.png"></h1>
                <ul class="nav nav-pills">
                  <li><a id="nav-list-data" class='active' href="javascript:void(0);" onclick="gantiMenu('list-data');">LIST MEMBERS</a></li>
                  <li><a id="nav-tambah-data" href="javascript:void(0);" onclick="gantiMenu('tambah-data');">REGISTRASI MEMBERS</a></li>
                </ul>
            </div>
   
            <div id="tambah-data" class="well" style="display:none;">
                <form id="form-data">
                    <div id="name-group" class="form-group">
                        <label>NAME</label> 
                        <input type="text" class="form-control" id="nama" name="nama" placeholder="NAMA LENGKAP" /><br/>
                    </div>
                    <div id="alamat-group" class="form-group">
                        <label>ADDRESS</label> 
                        <input type="text" class="form-control" id="alamat" name="alamat" placeholder="ALAMAT LENGKAP" /><br/>
                    </div>
                    <div id="ket-group" class="form-group">
                        <label>ABOUT US</label> 
                        <textarea class="form-control" id="ket" name="ket" placeholder="TENTANG ANDA"></textarea><br/>
                    </div>
                    <input type="button" value="Simpan" onclick="simpanData();" class="btn btn-success btn-small"/>
                    <input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
                </form>
            </div>
            <div id="edit-data" class="well" style="display:none;">
                <form id="eform-data">
    
                    <div id="name-group" class="form-group" style="display:none;">
                        <label>ID</label> 
                        <input type="text" class="form-control" id="eid_data" name="nama" placeholder="" /><br/>
                    </div>
    
                    <div id="name-group" class="form-group">
                        <label>NAME</label> 
                        <input type="text" class="form-control" id="enama" name="nama" placeholder="contoh: Nyekrip Web" /><br/>
                    </div>
                    <div id="alamat-group" class="form-group">
                        <label>ADDRESS</label> 
                        <input type="text" class="form-control" id="ealamat" name="alamat" placeholder="contoh: Indonesia" /><br/>
                    </div>
                    <div id="ket-group" class="form-group">
                        <label>UBOUT US</label> 
                        <textarea class="form-control" id="eket" name="ket" placeholder="contoh: Web Tutorial Indonesia"></textarea><br/>
                    </div>
                    <input type="button" value="Simpan" onclick="simpanEditData();" class="btn btn-success btn-small"/>
                    <input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
                    <input type="button" value="Cancel" onclick="gantiMenu('list-data');" class="btn btn-warning btn-small"/>
                </form>
            </div>
            <div id="list-data" class="well">
                <h3>Tidak ada data...</h3>
            </div>
        </div>  
    </body>
    <script type="text/javascript">
        function muatDaftarData(){
            if (localStorage.daftar_data && localStorage.id_data){
            
                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
               
                var data_app = "";
                
                if (daftar_data.length > 0){
                    data_app = '<table class="table">';
                    data_app += '<thead>'+
                                        '<th>ID</th>'+
                                        '<th width="20%">NAMA LENGKAP</th>'+
                                        '<th>ALAMAT LENGKAP</th>'+
                                        '<th>ABOUT US</th>'+
                                        '<th colspan="2">ACTION</th>'+
                                      '</thead><tbody>';
                                      
                    for (i in daftar_data){
                        data_app += '<tr>';
                        data_app += '<td>'+ daftar_data[i].id_data + ' </td>'+
                                          '<td>'+ daftar_data[i].nama + ' </td>'+
                                          '<td>'+ daftar_data[i].alamat + ' </td>'+
                                          '<td>'+ daftar_data[i].ket + ' </td>'+
                                          '<td><a class="btn btn-danger btn-small" href="javascript:void(0)" onclick="hapusData(\''+daftar_data[i].id_data+'\')">TRUSH</a></td>'+
                                          '<td><a class="btn btn-warning btn-small" href="javascript:void(0)" onclick="editData(\''+daftar_data[i].id_data+'\')">EDIT</a></td>';
                        data_app += '</tr>';
                        
                    }
                   data_app += '</tbody></table>';
               
                }
                else {
                    data_app = "<h3> TIDAK ADA DATA TERSIMPAN ....</h3>";
                }
               
                
               $('#list-data').html(data_app);
               $('#list-data').hide();
               $('#list-data').fadeIn(100);
            }
        }
  
  function editData(id){
  
            if (localStorage.daftar_data && localStorage.id_data){
                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));   
    idx_data = 0;
                for (i in daftar_data){
                    if (daftar_data[i].id_data == id){
      $("#eid_data").val(daftar_data[i].id_data);
      $("#enama").val(daftar_data[i].nama);
      $("#ealamat").val(daftar_data[i].alamat);
      $("#eket").val(daftar_data[i].ket);
      daftar_data.splice(idx_data, 1);
                    }
                    idx_data ++;
                }
    gantiMenu('edit-data');
    
            }
   
  }
        
        
        function simpanData(){
            nama = $('#nama').val();
            alamat = $('#alamat').val();
            ket = $('#ket').val();
            
            if (localStorage.daftar_data && localStorage.id_data){
                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
                id_data = parseInt(localStorage.getItem('id_data'));
            }
            else {
                daftar_data = [];
                id_data = 0;
            }

            id_data ++;
            daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
            localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
            localStorage.setItem('id_data', id_data);
            document.getElementById('form-data').reset();
            gantiMenu('list-data');
            
            return false;
        }
  
        function simpanEditData(){
            id_data = $('#eid_data').val();
            nama = $('#enama').val();
            alamat = $('#ealamat').val();
            ket = $('#eket').val();
            
            daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
            localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
            document.getElementById('eform-data').reset();
            gantiMenu('list-data');
            
            return false;
        }
        
        function hapusData(id){
            if (localStorage.daftar_data && localStorage.id_data){
                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
                
                idx_data = 0;
                for (i in daftar_data){
                    if (daftar_data[i].id_data == id){
                        daftar_data.splice(idx_data, 1);
                    }
                    idx_data ++;
                }
               
                localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
                muatDaftarData();
            }
        }
  

        function gantiMenu(menu){
            if (menu == "list-data"){
                muatDaftarData();
                $('#tambah-data').hide();
                $('#list-data').fadeIn();
    $('#edit-data').hide();
            }
            else if (menu == "tambah-data"){
                $('#tambah-data').fadeIn();
                $('#list-data').hide();
    $('#edit-data').hide();
            }else if (menu == "edit-data"){
                $('#edit-data').fadeIn();
                $('#tambah-data').hide();
                $('#list-data').hide();
            }
        }
    </script>
</html>




NOTE : Namun Data yang disimpah hanya bersifat sementara, dan si setting dalam bentuk yang sedehana sebelum kita melakukan penyimpanan data dalam database. Disarankan tidak menggunakan sistem ini pada Aplikasi sistem yang besar karena dapat menggangu kinerja kerja seorang user.

Ingin mendoload App siap saji dapat di Download Disini

Demikian lah tutorial kali ini, semoga informasi dan ilmu yang saya tranfer dapat bermanfaat bagi kita semua dan dapat diamalkan dengan baik suatu hari nanti, tunggu artikel dan tutorial menarik dari blogs kami. 
Recommend Article × +

OWNER AND CO OF PT. TRANS TECHNO Freelance Web Design and Yii2 Development in ICT STKIP PGRI WEST SUMATRA. While Studying MAGISTER UPI-YPTK Padang,CEO CMS Codepedia, Lives in Padang - Indonesia | WhatsApp : 0853-7516-4491

Related Posts

Update Sesudahnya
« Prev Post
Update Sebelumnya
Next Post »