Building a Web App CRUD using Firebase Realtime Database Tutorials

Overview

In this tutorial, we show you how to building a web app CRUD with Firebase Realtime Database

Building a Web App CRUD using Firebase Realtime Database

Video Tutorials

Create a Firebase project in the Firebase console

Go to https://console.firebase.google.com and sign up for an account
Click "Add Project" button from the project overview page.
Type "Firebase Realtime DB Web" in the "Project name" field.
Click "CREATE PROJECT" button
Finish.

Add Firebase to your web app

You can find your Realtime Database URL in the Database tab (DEVELOP -> Database -> Realtime Database -> GET STARTED) in the Firebase console. It will be in the form of https://<databaseName>.firebaseio.com

Create a firebase_web.html file
Open firebase_web.html file with Notepad
The following code:

The snippet contains initialization information to configure the Firebase JavaScript SDK to use the Realtime Database. You can find initialization information following step below:

Add <table>...</table> tags into <body></body> tags below following code:

<html>
<head>
 <title>Firebase Realtime Database Web</title>
 <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
 <script>
   // Initialize Firebase
   var config = {
  apiKey: "<apiKey>",
  authDomain: "<projectId>.firebaseapp.com",
  databaseURL: "https://<projectId>.firebaseio.com",
  projectId: "<projectId>",
  storageBucket: "<projectId>.appspot.com",
  messagingSenderId: "<senderId>"
   };

   firebase.initializeApp(config);
 </script>
</head>
<body>
 <table>
  <tr>
   <td>Id: </td>
   <td><input type="text" name="id" id="user_id" /></td>
  </tr>
  <tr>
   <td>User Name: </td>
   <td><input type="text" name="user_name" id="user_name" /></td>
  </tr>
  <tr>
   <td colspan="2">
    <input type="button" value="Save" onclick="save_user();" />
    <input type="button" value="Update" onclick="update_user();" />
    <input type="button" value="Delete" onclick="delete_user();" />
   </td>
  </tr>
 </table>
 
 <h3>Users List</h3>
 
 <table id="tbl_users_list" border="1">
  <tr>
   <td>#ID</td>
   <td>NAME</td>
  </tr>
 </table>
</body>
</html>

This is a simple CRUD Pages:

Add <script>...</script> block following below code:

<html>
<head>
 <title>Firebase Realtime Database Web</title>
 <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
 <script>
   // Initialize Firebase
   var config = {
  apiKey: "<apiKey>",
  authDomain: "<projectId>.firebaseapp.com",
  databaseURL: "https://<projectId>.firebaseio.com",
  projectId: "<projectId>",
  storageBucket: "<projectId>.appspot.com",
  messagingSenderId: "<senderId>"
   };

   firebase.initializeApp(config);
 </script>
</head>
<body>
 <table>
  <tr>
   <td>Id: </td>
   <td><input type="text" name="id" id="user_id" /></td>
  </tr>
  <tr>
   <td>User Name: </td>
   <td><input type="text" name="user_name" id="user_name" /></td>
  </tr>
  <tr>
   <td colspan="2">
    <input type="button" value="Save" onclick="save_user();" />
    <input type="button" value="Update" onclick="update_user();" />
    <input type="button" value="Delete" onclick="delete_user();" />
   </td>
  </tr>
 </table>
 
 <h3>Users List</h3>
 
 <table id="tbl_users_list" border="1">
  <tr>
   <td>#ID</td>
   <td>NAME</td>
  </tr>
 </table>
 
 <script>
 
  var tblUsers = document.getElementById('tbl_users_list');
  var databaseRef = firebase.database().ref('users/');
  var rowIndex = 1;
  
  databaseRef.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
   var childKey = childSnapshot.key;
   var childData = childSnapshot.val();
   
   var row = tblUsers.insertRow(rowIndex);
   var cellId = row.insertCell(0);
   var cellName = row.insertCell(1);
   cellId.appendChild(document.createTextNode(childKey));
   cellName.appendChild(document.createTextNode(childData.user_name));
   
   rowIndex = rowIndex + 1;
    });
  });
   
  function save_user(){
   var user_name = document.getElementById('user_name').value;
  
   var uid = firebase.database().ref().child('users').push().key;
   
   var data = {
    user_id: uid,
    user_name: user_name
   }
   
   var updates = {};
   updates['/users/' + uid] = data;
   firebase.database().ref().update(updates);
   
   alert('The user is created successfully!');
   reload_page();
  }
  
  function update_user(){
   var user_name = document.getElementById('user_name').value;
   var user_id = document.getElementById('user_id').value;

   var data = {
    user_id: user_id,
    user_name: user_name
   }
   
   var updates = {};
   updates['/users/' + user_id] = data;
   firebase.database().ref().update(updates);
   
   alert('The user is updated successfully!');
   
   reload_page();
  }
  
  function delete_user(){
   var user_id = document.getElementById('user_id').value;
  
   firebase.database().ref().child('/users/' + user_id).remove();
   alert('The user is deleted successfully!');
   reload_page();
  }
  
  function reload_page(){
   window.location.reload();
  }
  
 </script>
 
</body>
</html>