Showing posts with label FireBase. Show all posts
Showing posts with label FireBase. Show all posts

Wednesday, 21 November 2018

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

Friday, 14 September 2018

Firebase SAPUI5 - Simple Real Time Application

Halo...
pada postingan ini saya akan sharing membuat aplikasi real time sederhana dengan sapui5 dan firebase. sebelum mulai, bagi teman-teman yang belum tau apa itu firebase mungkin bisa dibaca-baca dulu diblog2 yang membahas firebase dan bagaimana cara mendaftar akun firebase dan cara membuat database firebase karena di postingan ini saya tidak menjelaskan itu dan hanya fokus pada pembuatan aplikasi real time sederhana sapui5 dan firebase.

ok langsung saja kita mulai, pertama kita masuk dulu ke firebase console dan kita buat project baru, dan kebetulan saya sudah membuat project dengan nama EXAM setelah itu masuk ke project EXAM dan atur rules dengan mengikuti step-step seperti berikut :




rubah menjadi true write and read


setelah itu klik bagian yang ditandai kotak merah diatas kemudian copy source berikut dan kita masukkan kedalam project ui5.



kemudian kita buka eclipse dan buat project baru sapui5, jika belum tau cara membuat project baru di sapui5 bisa dilihat DISINI , kita buat project baru dengan nama ui5FIrebase untuk default view kita buat dengan nama index, kemuadian buka file index.html lalu rubah source code nya menjadi seperti berikut :


buat folder baru dengan nama asset didalam WebContent dangan tambahkan file baru dengan nama frbs.js dan tambahkan source code berikut :


kemudian buka file index.view.js dan tambahkan source code berikut :

var label1 = new sap.m.Label({
text : 'Name'
})
var label2 = new sap.m.Label({
text : 'Email'
})
var label3 = new sap.m.Label({
text : 'Address'
})
var txtNama = new sap.m.Input({
id:'txtName',
showValueHelp:true
})
var txtEmail = new sap.m.Input({
id:'txtEmail'
})
var txtUrl = new sap.m.Input({
id:'txtImgURl'
})
var btnSave = new sap.m.Button({
text:'Save',
icon:'sap-icon://save',
press:function(){
if(action == "Add"){
oController.onAddData();
}else if(action == "Edit"){
press:oController.onEditData();
}
}
})
var btnEdit = new sap.m.Button({
text:'Edit',
icon:'sap-icon://edit',
press:function(){
action = 'Edit';
oController.onOpenDialog(action);
}
})
var btnHapus = new sap.m.Button({
text:'Delete',
icon:'sap-icon://delete',
press:oController.onDeleteData
})
var btnDialog = new sap.m.Button({
text:'Add',
icon:'sap-icon://add-document',
press:function(){
action = 'Add';
oController.onOpenDialog(action);
}
})
var btnCloseDialog = new sap.m.Button({
text:'Cancel',
icon:'sap-icon://close',
press:function(){
oController.onCloseDialog();
}
})
var oTableUI = new sap.ui.table.Table("uiTable",{
selectionMode : sap.ui.table.SelectionMode.Single,
navigationMode: sap.ui.table.NavigationMode.Scrollbar,
selectionBehavior: sap.ui.table.SelectionBehavior.Row,
alternateRowColors:true,
enableColumnReordering:true,
enableCellFilter:true,
visibleRowCount:8
})

oTableUI.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "User ID"}),
    template: new sap.ui.commons.TextField().bindProperty("value", "userid") 
  }));
oTableUI.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Name"}),
    template: new sap.ui.commons.TextField().bindProperty("value", "username") 
  }));

oTableUI.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Email"}),
    template: new sap.ui.commons.TextField().bindProperty("value", "email")
  }));

oTableUI.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Address"}),
    template: new sap.ui.commons.TextField().bindProperty("value", "address")
  })); 
oTableUI.attachRowSelectionChange(function(oEvent) { 
oController.onTableKlik(oEvent);
})
var oDialog = new sap.ui.commons.Dialog("oDialog",{
title: "Add New Data",
width: "500px",
height: "400px",  
resizable: true,
modal:true,
showCloseButton:false
});
var oPanel = new sap.m.Panel("oPanel",{
content:[label1,txtNama,label2,txtEmail,label3,txtUrl,btnSave,btnCloseDialog]
})
  return new sap.m.Page({
title: "CRUD SAPUI5 Firebase",
content: [btnDialog, btnEdit, btnHapus, oTableUI
]
});

dan tambahkan source berikut didalam index.controller.js

onInit: function() {
var oModel = new sap.ui.model.json.JSONModel();
var oTable = sap.ui.getCore().byId("uiTable");
database.ref('users').on('value', function(snapshot) {
dtJS = [];
oModel.refresh();
snapshot.forEach(function(childSnapshot) {
  items = {};
  items.userid   = childSnapshot.key;
  items.username = childSnapshot.val().username;
      items.email    = childSnapshot.val().email;
      items.address  = childSnapshot.val().address;
      dtJS.push(items);
      console.log(childSnapshot.key);
    });
oModel.setData(dtJS)
oTable.setModel(oModel);
    oTable.bindRows("/");
});
},
onAddData: function(){
if(key == 0){
key = 1;
}
var name = sap.ui.getCore().byId("txtName");
var email = sap.ui.getCore().byId("txtEmail");
var pic = sap.ui.getCore().byId("txtImgURl");
var dialog = sap.ui.getCore().byId("oDialog");
database.ref('users/' + key).set({
username: name.getValue(),
email   : email.getValue(),
address : pic.getValue()
});
name.setValue("");
email.setValue("");
pic.setValue("");
dialog.close();
},
onEditData: function(){
if(selectedKey == null){
alert("No Data Selected");
}else{
var name = sap.ui.getCore().byId("txtName");
var email = sap.ui.getCore().byId("txtEmail");
var pic = sap.ui.getCore().byId("txtImgURl");
var dialog = sap.ui.getCore().byId("oDialog");
database.ref('users/' + selectedKey).update({
username: name.getValue(),
email   : email.getValue(),
address : pic.getValue()
});
dialog.close();
}
selectedKey = null;
name.setValue("");
email.setValue("");
pic.setValue("");
},
onDeleteData: function(){
if(selectedKey == null){
alert("No Data Selected");
}else{
database.ref('users/' + selectedKey).remove();
}
var name = sap.ui.getCore().byId("txtName");
var email = sap.ui.getCore().byId("txtEmail");
var pic = sap.ui.getCore().byId("txtImgURl");
name.setValue("");
email.setValue("");
pic.setValue("");
selectedKey = null;
},
onTableKlik: function(oEvent){
var oTable = sap.ui.getCore().byId("uiTable");
var idx = oTable.getSelectedIndex()
if (oTable.isIndexSelected(idx)) {
var cxt = oTable.getContextByIndex(idx);
        var path = cxt.sPath;
        var obj = oTable.getModel().getProperty(path);
        
        selectedKey = obj.userid;
        
        var name = sap.ui.getCore().byId("txtName");
var email = sap.ui.getCore().byId("txtEmail");
var pic = sap.ui.getCore().byId("txtImgURl");
name.setValue(obj.username);
email.setValue(obj.email);
pic.setValue(obj.address);
}
},
onOpenDialog: function(action){
var dialog = sap.ui.getCore().byId("oDialog");
var panel = sap.ui.getCore().byId("oPanel");
var name = sap.ui.getCore().byId("txtName");
var email = sap.ui.getCore().byId("txtEmail");
var pic = sap.ui.getCore().byId("txtImgURl");
if(action == "Add"){
dialog.addContent(panel);
dialog.open();
}else if(action == "Edit"){
if(selectedKey == null){
alert("No Data Selected");
}else{
var oTable = sap.ui.getCore().byId("uiTable");
var idx = oTable.getSelectedIndex()
if (oTable.isIndexSelected(idx)) {
var cxt = oTable.getContextByIndex(idx);
        var path = cxt.sPath;
        var obj = oTable.getModel().getProperty(path);
        
        selectedKey = obj.userid;
       
name.setValue(obj.username);
email.setValue(obj.email);
pic.setValue(obj.address);
dialog.addContent(panel);
dialog.open();
}
}
}
},
onCloseDialog: function(){
var dialog = sap.ui.getCore().byId("oDialog");
dialog.close();
selectedKey = null;
}

sekarang coba jalankan aplikasi dan semoga bermanfaat
terimakasih :D

Thursday, 8 September 2016

Membuat Account Firebase

Pada postingan kali ini saya akan sharing tentang Firebase - Android Studio,,
Apa itu firebase...???

Firebase adalah layanan DbaaS (Database as a Service) dengan konsep realtimeFirebase merupakan penyedia layanan cloud dengan backend sebagai servis yang berbasis di San Fransisco, California. Firebase terdiri dari fitur pelengkap yang bisa dipadupadankan sesuai dengan kebutuhan Anda. Firebase memberikan anda perlengkapan dan infrastuktur untuk membangun suatu aplikasi yang lebih baik dan meningkatkan kesuksesan bisnis anda.

Ok, itu penjelasan singkat tentang Firebase, disini tidak saya jelaskan panjang lebar karena saya hanya akan fokus pada pembahasan cara mendaftar account firebase, sebeluam mendaftar diharuskan sudah memiliki account google (email). langkah pertama yang harus dilakukan adalah masuk ke websitenya firebase https://www.firebase.com/ setelah masuk klik LOGIN TO LEGACY CONSOLE di pojok kanan atas, setelah masuk di legacy console login, pilih sign in with google account


masukkan alamat email anda, jika berhasil akan muncul tampilan awal account firebase anda seperti berikut :



Belajar SAP ABAP RAP

  Belajar SAP ABAP RAP: Pengenalan dan Konsep Dasar Restful ABAP Programming Model Kalau kamu seorang ABAPer yang mulai terjun ke dunia SAP...