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

Comments

  1. Kuplay Community14 March 2021 at 19:37

    gan semisal saya mau nambahin lagi varibel buat di imputny gmn gan..?
    trus mau saya ganti misal email jadi no hp gtu ?

    ReplyDelete

Post a Comment

Popular posts from this blog

PHP MySql CRUD Dengan Konsep MVC

-
Image
Pada postingan kali ini saya akan sharing cara membuat CRUD dengan php menggunakan konsep MVC, ok langsung saja buka code editor (saya menggunakan sublime text) dan buat folder baru dengan nama phpmvc didalam folder htdocs kalian dan tambah folder seperti berikut :  Setelah itu kita siapkan database di mysql, buat database dengan nama phpmvc dan tablenya seperti gambar berikut : tambahkan file config.php didalam folder app/config : <?php define('BASEURL', 'http://localhost:8181/phpmvc/public'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_NAME', 'phpmvc'); kemudian tambahkan 3 file controller didalam folder app/controllers, yaitu Home, About, dan Mahasiswa : Home.php <?php class Home extends Controller { public function index() { $data['nama'] = $this->model('User_model')->getUser()...
Read more

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

-
Image
Postingan kali saya akan sharing membuat aplikasi perpustakaan sederhana menggunakan laravel 5.8, dimana terdapan menu Anggota, Kategori Buku, Daftar Buku dan Transaksi (Peminjaman/Pengembalian Buku). ok langsung saja kita buat project laravel dengan nama perpus : composer create-project --prefer-dist laravel/laravel perpus setelah create project laravel-nya selesai kita buat database melalui localhost/phpmyadmin dengan nama db_perpus, lalu kita buka project laravel dengan code editor disini saya menggunakan visual studio code. Setelah project kita buka dengan code editor, pertama kita atur koneksi database yang ada di file .env, kita rubah menjadi seperti berikut : note : untuk db_username dan db_password di sesuiakan dengan configurasi masing-masing. Selanjutnya kita tambahkan 4 buah data migration yaitu : table_anggota, table_kategori, table_buku, table_transaksi, kita buka terminal dan jalankan command berikut :  php artisan make:migration crea...
Read more

IT Asset Management Dengan PHP MySQL

-
Image
Pada postingan kali saya akan share sebuah aplikasi IT Asset management yang fungsinya untuk memonitoring semua Asset khusus IT, contohnya : Laptop/komputer , Printer, Router, Hardisk, dll. Dalam aplkasi ini kita bisa mengetahui Asset IT posisinya dimana dan digunakan oleh siapa. untuk data-data yang dibutuhkan antara lain : 1. data kategori asset dalam menu ini kita bisa meng-input jenis2 kategory asset : tambah kategori asset : 2. data department 3. data karyawan 4. data department per karyawan 5. data asset location  6. data satuan asset dan untuk transaksi yang ada dalam aplikasi ini adalah,  1. create asset, pada menu create asset ini kita akan mengalokasikan sebuah asset ke karyawan/personnel tampilannya seperti berikut: setelah klik tombol save akan muncul seperti dibawah : untuk melihat detail asset yang sudah dibuat tadi, kita bisa pilih...
Read more