Create a system admin panel using Firebase #4 : Edit, Update, and Delete in firebase database

Repository

https://github.com/firebase

What Will I Learn?

• Delete data
• Set Attribute in element
• Edit and Update data

Requirements

• Basic HTML, CSS, and javascript
• Use firebase
• Local server (Xampp, Wampp, or etc)

Resources

• Firebase - https://firebase.google.com/

Difficulty

Basic

Tutorial Content

We will continue the series of tutorials about firebase, for those of you who have not followed the previous tutorial I suggest you take part in the previous tutorial in the curriculum section. In previous tutorials, we have created a CRUD system in Firebase and learn about unique IDs in our firebase database. But we only learn how to create data in the database. now we will continue by learning how to delete and update. For that, we just start this tutorial.

CRUD in firebase database

We will do the CRUD system applied by the firebase that we have created. in the previous tutorial, we made CREATE. in this tutorial, it goes on and we will DELETE the database in firebase.

• Create elements for unique id

to delete. naturally, we need a unique ID so that the data we delete is appropriate, In previous tutorials, we have learned how to create unique IDs. firebase does not recognize the system of relations between tables, therefore we cannot create PRIMARY KEY and FOREIGN KEY. so we must create an own unique ID. The following is a unique ID that we have made in the previous tutorial.

We already have a unique id that represents each data. as we see above the unique id is KEY of the JSON object.

We will put the id into the additional element that we created with the tag element <a>. The unique id that we mean is the time that is in the object.

time we can make unique id because time has unique and special values and it is different from other keys on the object. Therefore time can be a marker to represent an object. well after we get key time. We will put it in the <a> element tag like the following:

Function showData()

 function showData(items) {
    var content = document.getElementById('content');
    var data    = '';

    items.forEach(function(item) {
      console.log(item.val())
      data += '<div class="col-md-4"> <h2>'+ item.val().title + '</h2> <p>'+ item.val().desc +'</p> <p><a class="btn btn-danger" href="#" role="button" onclick="removeItem('+item.val().time+')">Delete &raquo;</a></p> </div>';
    })
    content.innerHTML = data;
  }

We can put the onclick event on the <a> element. in the onclick event we will call the removeItem(item.val().time) and will pass the unique id. that is item.val().time and we can see the HTML element event and time is attached to the element.

• Create a remove function

Now it will start creating a function to delete data in the database. In firebase we can delete data using the remove() method. The following is an example:

function removeItem(id) {
    database.ref('/blogs/'+ id).remove()
}

• Because we will use the function or event from firebase.database. We must first define a variable in this tutorial we have defined the database variable var database = firebase.database();.

• and then we have to select data that we will delete with ref (). We will delete /blogs/'+ id.It's means blogs is the parents of the object id that we get from the parameters we receive in the removeItem(id) function. We can see the database directory as shown below:

We can see the database directory as shown below '/blogs/1542198684582'.

• If all have been completed we can test to delete one of the data in the database. the following are the results

We have been successful to delete data in the database in real-time. Next, we will learn how to edit data.

Edit data firebase

as well as updating data on other databases. to edit we need a unique id that represents that data. not much different from the delete function we will also use a unique id which in this tutorial we get from time.

• Create edit function

Before we make the edit function. We have to make a button so that the user can interact with our system. I add the following button to the HTML element:

function showData(items) {
    var content = document.getElementById('content');
    var data    = '';

    items.forEach(function(item) {
      //render html
      data += '<div class="col-md-4"> <h2>'+ item.val().title + '</h2> <p>'+ item.val().desc +'</p> <p><a class="btn btn-danger" href="#" role="button" onclick="removeItem('+item.val().time+')">Delete &raquo;</a></p> <p><a class="btn btn-primary" href="#" role="button" onclick="editItem('+item.val().time+')">Edit &raquo;</a></p> </div>';
    })
    content.innerHTML = data;
  }

We will use the onclick event on the element we created and in that event we will call the editItem () and in this function we will pass the unique id from key time item.val().time.


function editItem()

in the editItem() function we can received the id parameter that we will use as a marker of the data object we will edit. For more details, we can see the code below:

function editItem(id) {
    document.getElementById('btnEditData').setAttribute('data-id', id);
    blogsRef.child(id).once('value', function(item){
      console.log(item.val().title)
    })
}

• Because what we are editing is the specific data we need to reference the parent data or table that we will edit. We have defined blogs in variable references var blogsRef = database.ref('blogs');.

• to access child data we can use the child () method and pass the unique ID (id) and then we can use once(), because we will only run it once.

• We can see the data in callback function function(item) before we go far we can check whether the data can be taken properly. to get the data using the val ().

• We will use the setAttribute method to add attributes to the button element that we press. we will add the data-id attribute document.getElementById('btnEditData').setAttribute('data-id', id);. we need an id to update specific data, so we need id by using the attribute in the element.

Create function onclick in update button

After we have got the data we need, we will create a new button that will be used to update the data, the element like this:

Element

<button id="btnEditData" class="btn btn-success">Update</button>

Defined in javascript

var btnEdit = document.getElementById('btnEditData');

Create function onclick in button update

btnEdit.addEventListener('click', function() {
    var id = document.getElementById('btnEditData').getAttribute('data-id'); // get data id that we set in editItem()

    blogsRef.child(id).update({ //Use event update()
      title: title.value,
      desc: desc.value
    })

    title.value =  '';
    desc.value  = '';
  })

• In the editItem() function we have set data-id based on the unique id. Now we will get the data-id that we get from var id = document.getElementById('btnEditData').getAttribute('data-id');.

• Because we will update data that comes from the child, we have to access child, we can access the child with child() and we pass the parameter id that we get from data-id.

• to update we can use the update() method and we pass the new value from the object we are editing.

{
      title: title.value,
      desc: desc.value
 }

After all the steps are done we can run our application and see the results as shown below:

We can see in the picture above. We have done to edit and update the data that is in our firebase database. this means we have completed the CRUD system on our application. the tutorial that we follow is just an illustration so you can understand how firebase databases work. the implementation may be different but the concepts we learn are the same. I hope this tutorial is useful for you. thank you

Curriculum

Create a system admin panel using Firebase #1 : initialization, user admin settings, and authentication user admin

Create a system admin panel using Firebase #2 : Use database and Add child data

Create a system admin panel using Firebase #3 : Create a system admin panel using Firebase #3 : Generate unique ID and Retrieve data

Proof of work done

https://github.com/milleaduski/firebaseAdminPanel