Membuat CRUD Sederhana Dengan Firebase Javascript dan Bootstrap - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Membuat CRUD Sederhana Dengan Firebase Javascript dan Bootstrap, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel FireBase, Artikel javascript, Artikel web, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat CRUD Sederhana Dengan Firebase Javascript dan Bootstrap
link : Membuat CRUD Sederhana Dengan Firebase Javascript dan Bootstrap

Baca juga


Membuat CRUD Sederhana Dengan Firebase Javascript dan Bootstrap

Assalamu'alaikum warahmatullahiwabarokatuh, selamat malam teman-teman :D,
pada postingan kali ini saya akan berbagi cara membuat CRUD sederhana dengan firebase dan javascript yang di kombinasikan dengan bootstrap css framework, pertama teman2 harus download bootstrap dulu, atau kalau sudah punya file-nya tidak perlu download :D, untuk mengikuti tutorial ini teman-teman harus punya account firebase jika belum langsung saja daftar atau lihat DISINI cara membuat account firebase.

ok, teman2 buat folder dengan nama firebasejs atau apa saja terserah teman2, copy kan folder (css, js, fonts) yang ada pada bootsrap teman2 kedalam folder firebasejs. Setelah itu buat file baru didalam folder firebasejs dengan nama index.html dan tuliskan source code seperti berikut :


<!DOCTYPE html>
<html>
<head>
 <title>CRUD Firebase</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" >
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
 <script type="text/javascript">

  var config = {
   apiKey: "AIzaSyA71hPWUdEqgymNFTHg462yFJ_bWDAkHcA",
   authDomain: "exam-aff8f.firebaseapp.com",
   databaseURL: "https://exam-aff8f.firebaseio.com",
   projectId: "exam-aff8f",
   storageBucket: "",
   messagingSenderId: "133123398372"
  };

  firebase.initializeApp(config); 

 </script>
</head>
<body>
 <h1>Firebase JS CRUD</h1>
 <button class="btn btn-primary btnTambahData" data-toggle="modal" onclick="cleardata()" data-target="#exampleModal">Tambah Data</button>
 <table class="table table-striped" id="tbl_list_user">
  <thead>
   <tr>
    <th scope="col">No.</th>
    <th scope="col">Nama</th>
    <th scope="col">Email</th>
    <th scope="col">Alamat</th>
    <th scope="col">Aksi</th>
   </tr>
  </thead>
 </table>


 <!-- Modal -->
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header">
     <h5 class="modal-title" id="exampleModalLabel"></h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
     </button>
    </div>
    <form action="" method="POST" enctype="multipart/form-data">
     <div class="modal-body">     
      <input type="hidden" name="id" id="id">
      <div class="form-group">
       <label for="nama">Nama</label>
       <input type="text" name="nama" id="nama" class="form-control" placeholder="Masukkan nama" required="true">
      </div>
      <div class="form-group">
       <label for="email">Email</label>
       <input type="email" name="email" id="email" class="form-control" placeholder="Masukkan email" required="true">
      </div>
      <div class="form-group">
       <label for="alamat">Alamat</label>
       <input type="text" name="alamat" id="alamat" class="form-control" placeholder="Masukkan alamat" required="true">
      </div>
     </div>

     <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" onclick="tambahData()" data-dismiss="modal">Simpan</button>
     </div>
    </form>
   </div>
  </div>
 </div>

 <!-- <script src="js/jquery.js"></script>     -->

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="js/jquery.easing.1.3.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/hm.js"></script>

 <script type="text/javascript">
  var database = firebase.database();
  var key = 0;

  database.ref("users").orderByKey().limitToLast(1).on('child_added',function(data) {
   key = parseInt(data.key, 10);
   key = key + 1;
  });

  database.ref('users').on('value', function(snapshot) {
   var count = 0;
   if(snapshot.exists()){
    $("#tbl_list_user tbody").remove(); 
    var content = '<tbody>';
    snapshot.forEach(function(data) {
     count+=1;
     var val = data.val();
                 content +='<tr>';
                 content += '<td>' + count + '</td>';
                 content += '<td>' + val.username + '</td>';
                 content += '<td>' + val.email + '</td>';
                 content += '<td>' + val.address + '</td>';
                 content += '<td> <button class="btn btn-danger" onclick="hapusData(' + data.key + ')"> Hapus Data </button> <button class="btn btn-primary tampilModalUbah" onclick="setData('+ data.key +')" data-toggle="modal" data-target="#exampleModal">Edit Data</button>  </td>';
                 content +='</tr>';
                 key = 0;
     key = parseInt(data.key, 10);
     key = key + 1;
    });

    content += '</tbody>';
    $('#tbl_list_user').append(content);
   }else{
    $("#tbl_list_user tbody").remove(); 
   }  
  });


  function tambahData(){
   if($('#exampleModalLabel').text() == "Tambah Data Baru"){
    if(key == 0){
     key = 1;
    }

    database.ref('users/' + key).set({
     username: $('#nama').val(),
     email   : $('#email').val(),
     address : $('#alamat').val()
    });

    alert("Data Berhasil ditambah");
   }else if($('#exampleModalLabel').text() == "Ubah Data"){
    database.ref('users/' + $('#id').val()).update({
     username: $('#nama').val(),
     email   : $('#email').val(),
     address : $('#alamat').val()
    });
    alert("Data Berhasil diupdate");
   }
  } 


  function cleardata(){
   $('#id').val("");
   $('#nama').val("");
   $('#email').val("");
   $('#alamat').val("");
  }


  function setData(id){
   $('#exampleModalLabel').html('Ubah Data');   
   database.ref('users/').child(id).once('value').then( function(snap) {
       const user = snap.val()
       $('#id').val(id);
    $('#nama').val(user.username);
    $('#email').val(user.email);
    $('#alamat').val(user.address);
   });
  }


  function hapusData(id){
   var answer = confirm("Hapus Data..?");
   if (answer) {
       database.ref('users/' + id).remove();
       alert("Data Berhasil dihapus");
   }
  } 

$('.btnTambahData').on('click', function(){
        $('#exampleModalLabel').html('Tambah Data Baru');
    });

 </script>
</body>
</html>

Berikut contoh screen shot hasilnya :









Sekian sharing kali ini semoga bermanfaat, terimakasih :D


Demikianlah Artikel Membuat CRUD Sederhana Dengan Firebase Javascript dan Bootstrap

Sekianlah artikel Membuat CRUD Sederhana Dengan Firebase Javascript dan Bootstrap kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat CRUD Sederhana Dengan Firebase Javascript dan Bootstrap dengan alamat link https://dev-create.blogspot.com/2018/11/membuat-crud-sederhana-dengan-firebase.html