API tools faq
paste
Advertisement
Azura044

Form Data Siswa

Azura044
Feb 24th, 2021
345
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>Membuat Aplikasi Sederhana dengan HTML</title>
  5.         <script src="files/js/jquery.min.js"></script>
  6.         <script src="files/bootstrap/js/bootstrap.min.js"></script>
  7.         <link rel="stylesheet" href="files/bootstrap/css/bootstrap.min.css">
  8.     </head>
  9.     <body onload="muatDaftarData();">
  10.  
  11.         <div class="col-md-8 col-md-offset-2" ng-controller="listContactCtrl">
  12.             <div class="page-header">
  13.                 <h1>
  14.                     FORMULIR DATA SISWA SMAN 6 TANGSEL
  15.                 </h1>
  16.                 <ul class="nav nav-pills">
  17.                   <li><a id="nav-list-data" href="javascript:void(0);" onclick="gantiMenu('list-data');">list of data</a></li>
  18.                   <li><a id="nav-tambah-data" href="javascript:void(0);" onclick="gantiMenu('tambah-data');">add data</a></li>
  19.                 </ul>
  20.  
  21.             </div>
  22.             <div id="tambah-data" class="well" style="display:none;">
  23.                 <form id="form-data">
  24.                     <div id="name-group" class="form-group">
  25.                         <label>Name:</label>
  26.                         <input type="text" class="form-control" id="nama" name="nama" placeholder="example: Purnama Raya" /><br/>
  27.                     </div>
  28.                     <div id="alamat-group" class="form-group">
  29.                         <label>Class:</label>
  30.                         <input type="text" class="form-control" id="alamat" name="alamat" placeholder="example: XI IPS 5" /><br/>
  31.                     </div>
  32.                     <div id="ket-group" class="form-group">
  33.                         <label>address:</label>
  34.                         <textarea class="form-control" id="ket" name="ket" placeholder="example: Jl. raya pamoelang"></textarea><br/>
  35.                     </div>
  36.                     <input type="button" value="Simpan" onclick="simpanData();" class="btn btn-success btn-small"/>
  37.                     <input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
  38.                 </form>
  39.             </div>
  40.             <div id="edit-data" class="well" style="display:none;">
  41.                 <form id="eform-data">
  42.  
  43.                     <div id="name-group" class="form-group" style="display:none;">
  44.                         <label>id data:</label>
  45.                         <input type="text" class="form-control" id="eid_data" name="nama" placeholder="" /><br/>
  46.                     </div>
  47.  
  48.                     <div id="name-group" class="form-group">
  49.                         <label>Nama Lengkap:</label>
  50.                         <input type="text" class="form-control" id="enama" name="nama" placeholder="contoh: Ramadhan Abiyasa Harianto" /><br/>
  51.                     </div>
  52.                     <div id="alamat-group" class="form-group">
  53.                         <label>Kelas:</label>
  54.                         <input type="text" class="form-control" id="ealamat" name="alamat" placeholder="contoh: XI IPS 5" /><br/>
  55.                     </div>
  56.                     <div id="ket-group" class="form-group">
  57.                         <label>Alamat:</label>
  58.                         <textarea class="form-control" id="eket" name="ket" placeholder="contoh: Griya Jakarta Blok M5/No. 8"></textarea><br/>
  59.                     </div>
  60.                     <input type="button" value="Simpan" onclick="simpanEditData();" class="btn btn-success btn-small"/>
  61.                     <input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
  62.                     <input type="button" value="Cancel" onclick="gantiMenu('list-data');" class="btn btn-warning btn-small"/>
  63.                 </form>
  64.             </div>
  65.             <div id="list-data" class="well">
  66.                 , Tidak ada data...
  67.             </div>
  68.         </div>
  69.  
  70.     </body>
  71.     <script type="text/javascript">
  72.         function muatDaftarData(){
  73.             if (localStorage.daftar_data && localStorage.id_data){
  74.  
  75.                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
  76.  
  77.                 var data_app = "";
  78.  
  79.                 if (daftar_data.length > 0){
  80.                     data_app = '<table class="table">';
  81.                     data_app += '<thead>'+
  82.                                         '<th>ID</th>'+
  83.                                         '<th>NAMA</th>'+
  84.                                         '<th>KELAS</th>'+
  85.                                         '<th>ALAMAT</th>'+
  86.                                         '<th>aksi</th>'+
  87.                                         '<th>aksi 2</th>'+
  88.                                       '</thead><tbody>';
  89.  
  90.                     for (i in daftar_data){
  91.                         data_app += '<tr>';
  92.                         data_app += '<td>'+ daftar_data[i].id_data + ' </td>'+
  93.                                           '<td>'+ daftar_data[i].nama + ' </td>'+
  94.                                           '<td>'+ daftar_data[i].alamat + ' </td>'+
  95.                                           '<td>'+ daftar_data[i].ket + ' </td>'+
  96.                                           '<td><a class="btn btn-danger btn-small" href="javascript:void(0)" onclick="hapusData(\''+daftar_data[i].id_data+'\')">Hapus</a></td>'+
  97.                                           '<td><a class="btn btn-warning btn-small" href="javascript:void(0)" onclick="editData(\''+daftar_data[i].id_data+'\')">Edit</a></td>';
  98.                         data_app += '</tr>';
  99.  
  100.                     }
  101.                    data_app += '</tbody></table>';
  102.  
  103.                 }
  104.                 else {
  105.                     data_app = "oops! no data...";
  106.                 }
  107.  
  108.  
  109.                $('#list-data').html(data_app);
  110.                $('#list-data').hide();
  111.                $('#list-data').fadeIn(100);
  112.             }
  113.         }
  114.  
  115.         function editData(id){
  116.  
  117.             if (localStorage.daftar_data && localStorage.id_data){
  118.                 daftar_data = JSON.parse(localStorage.getItem('daftar_data'));         
  119.                 idx_data = 0;
  120.                 for (i in daftar_data){
  121.                     if (daftar_data[i].id_data == id){
  122.                         $("#eid_data").val(daftar_data[i].id_data);
  123.                         $("#enama").val(daftar_data[i].nama);
  124.                         $("#ealamat").val(daftar_data[i].alamat);
  125.                         $("#eket").val(daftar_data[i].ket);
  126.                         daftar_data.splice(idx_data, 1);
  127.                     }
  128.                     idx_data ++;
  129.                 }
  130.                 gantiMenu('edit-data');
  131.  
  132.             }
  133.  
  134.         }
  135.  
  136.  
  137.         function simpanData(){
  138.             nama = $('#nama').val();
  139.             alamat = $('#alamat').val();
  140.             ket = $('#ket').val();
  141.  
  142.             if (localStorage.daftar_data && localStorage.id_data){
  143.                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
  144.                 id_data = parseInt(localStorage.getItem('id_data'));
  145.             }
  146.             else {
  147.                 daftar_data = [];
  148.                 id_data = 0;
  149.             }
  150.  
  151.             id_data ++;
  152.             daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
  153.             localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
  154.             localStorage.setItem('id_data', id_data);
  155.             document.getElementById('form-data').reset();
  156.             gantiMenu('list-data');
  157.  
  158.             return false;
  159.         }
  160.  
  161.         function simpanEditData(){
  162.             id_data = $('#eid_data').val();
  163.             nama = $('#enama').val();
  164.             alamat = $('#ealamat').val();
  165.             ket = $('#eket').val();
  166.  
  167.             daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
  168.             localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
  169.             document.getElementById('eform-data').reset();
  170.             gantiMenu('list-data');
  171.  
  172.             return false;
  173.         }
  174.  
  175.         function hapusData(id){
  176.             if (localStorage.daftar_data && localStorage.id_data){
  177.                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
  178.  
  179.                 idx_data = 0;
  180.                 for (i in daftar_data){
  181.                     if (daftar_data[i].id_data == id){
  182.                         daftar_data.splice(idx_data, 1);
  183.                     }
  184.                     idx_data ++;
  185.                 }
  186.  
  187.                 localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
  188.                 muatDaftarData();
  189.             }
  190.         }
  191.  
  192.  
  193.         function gantiMenu(menu){
  194.             if (menu == "list-data"){
  195.                 muatDaftarData();
  196.                 $('#tambah-data').hide();
  197.                 $('#list-data').fadeIn();
  198.                 $('#edit-data').hide();
  199.             }
  200.             else if (menu == "tambah-data"){
  201.                 $('#tambah-data').fadeIn();
  202.                 $('#list-data').hide();
  203.                 $('#edit-data').hide();
  204.             }else if (menu == "edit-data"){
  205.                 $('#edit-data').fadeIn();
  206.                 $('#tambah-data').hide();
  207.                 $('#list-data').hide();
  208.             }
  209.         }
  210.     </script>
  211. </html>
  212.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!