Firebase + JavaScript: A CRUD Web App Tutorial – Part 2
Tags: javascript, programming, webdev, codenewbie
Published: 2021-03-22 17:14:37

In this Firebase CRUD JavaScript Web Tutorial, you will be learning how to do CREATE, UPDATE and DELETE operations with Firebase Real-time database using Firebase Functions such as **push()**, **update()** and **remove()**.

I will be showing you a simple web app example to demonstrate Firebase JavaScript CRUD operations.

This is the second part of the Firebase CRUD JavaScript Tutorial series.

The first part covers how to get started with Firebase from **setting up a project** to how to **READ** data from the Firebase database.

🔥 [Part #1: Firebase CRUD JavaScript Tutorial → Setup and Read Data](https://www.softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/)

🔥 Part #2: Firebase CRUD JavaScript Tutorial → Insert/Update/Delete data (you’re here)

This is the final outcome of this Firebase CRUD JavaScript tutorial.

* Add/Insert Data
* Update/Edit an Existing User Data
* Delete a User

###Add/Insert A New User Data using Firebase
There are **three** ways to save data to the Firebase Database:

* **Push()**
* **Set()** and
* **Update()**

####Push (data, callback):
* Firebase push() method will insert new data to a given Database reference path. It takes two arguments; one is the actual data that you want to insert and the second is the callback function that will run once the operation is done.
* This method will create a unique id/key in a given path as a key and it will add the data that we passed as a value of that key.

![alt text](https://www.softauthor.com/wp-content/uploads/2018/03/firabase-crud-javascript.png)

The image below shows the unique keys added to the given Firebase Database reference path when you use the push() method.

![alt text](https://www.softauthor.com/wp-content/uploads/2021/03/firabase-crud-javascript-1024x555-1.png)

>Note: As you know, in the first part, I imported JSON data to the Database on the firebase console which is index-based, like the image below.

![alt text](https://www.softauthor.com/wp-content/uploads/2018/03/firabase-crud-javascript.png)

I recommend using the push unique key because it has a timestamp in it to avoid overwrites when multiple users push() data at the same time.

[Here](https://github.com/softauthor/firebase-crud-javascript-02) is the starter project that you can download and follow along with me if you wish.

>Recommended
>[Learn Firebase Storage Quickly](https://www.softauthor.com/learn-firebase-cloud-storage-quickly-guide/)

1) **Add (+) button and  User Form**:  Add the following HTML code to your **index.html**. This HTML code contains a section element in which there is an (+) **add button** and a **New User Form**.

```html
<!-- add user module -->
<section id="add-user-module"> <button id="open-add-user-form-btn">+</button>
    <form>
        <h2>Add User</h2> name:<br> <input type='text' data-key='name' class='user-input'><br> age:<br> <input
            type='text' data-key='age' class='user-input'><br> email:<br> <input type='text' data-key='email'
            class='user-input'><br> <button type='button' id="add-user-btn">add user</button>
    </form>
</section>
```

Inside the **Add User Form**, I have three **input** fields for **name**, **age**, and **email** and each one contains a class called **user-input** and an attribute called **data-key**.

2) **Show the Add User Form when a user hovers (+) button**:  I have used CSS style to achieve this using **position absolute**. Go ahead and copy the code below and paste it into your style.css file.

```JavaScript
<!-- Add User Module -->
#add-user-module {
    width: 30px;
    margin-bottom: 1px;
    margin-left: 10px;
    margin-top: 10px;
}

#add-user-module #open-add-user-form-btn {
    background: #54bb7d;
    font-size: 1.5em;
    color: white;
    padding-bottom: 5px;
}

#add-user-module form {
    position: absolute;
    padding: 10px;
    width: 150px;
    background-color: #e1e1e1;
    border: 1px solid #999;
    display: none;
}

#add-user-module form input {
    width: 97%;
    margin: 2px 0;
}

#add-user-module form button {
    background: #54bb7d;
    font-size: 1em;
    padding: 0px 10px;
    color: white;
    margin-top: 10px;
}

#add-user-module:hover form {
    display: block;
}
```

At this stage, the form should show when you hover the (+) button.

**Note:** At the top of JavaScript, you need to replace the **config** object with your own credentials otherwise your app will NOT work.

3) **Attach Click Event to the Add User Button**: Cache **#add-user-btn** DOM element which is inside the **Add User Form**. Then, attach a click event to it with the callback function **addUserBtnClicked()**.

```JavaScript
const addUserBtnUI = document.getElementById("add-user-btn"); 
addUserBtnUI.addEventListener("click", addUserBtnClicked);
```
4) **Create a new user Object**: Inside the call back function, create a Firebase Database reference path where you want to insert the new user data.

```JavaScript
const usersRef = dbRef.child('users');
```
Then, get all the input fields from the Add User Form and cache them into an array variable **addUserInputsUI** like so.

```JavaScript
const addUserInputsUI = document.getElementsByClassName("user-input");
```
After that, create an empty JavaScript object in which I am going to store new user data as key-value pairs.

```JavaScript
// this object will hold the new user information 
let newUser = {};
```
Now, loop through the **addUserInputsUI** array that has three input fields. Then, inside each iteration, get the value of the input attribute **data-key** and store it into the variable **key**.

After that, create another variable called **value** and store it in the actual user typed value.

```JavaScript
// loop through View to get the data for the model 
for (let i = 0, len = addUserInputsUI.length; i < len; i++) {
    let key = addUserInputsUI[i].getAttribute('data-key');
    let value = addUserInputsUI[i].value;
    newUser[key] = value;
}
```
Assign the **key** and **value** variables to the **newUser** object on each iteration. You will have an object something like this:

```JavaScript
{
    "age": "21",
    "email": "rtamil@email.com",
    "name": "Raja Tamil"
}
```

[Continue Reading...](https://www.softauthor.com/firebase-javascript-crud-web-app-add-update-delete/#firebase-javascript-crud-add-data)