Tutorial CRUD Firebase Real Time Database In Web Apps For Beginners

I will share about how to use Firebase real time database for web apps. learning Firebase to create both web and mobile apps are pretty cool too. In addition, the detailed documentation on the Firebase site is very easy to learn. If you are starting to learn Firebase real time database to make a web app, hopefully, this article can be useful for you. Follow the following tutorial.

What is Firebase?

Firebase is the BaaS (Backend as a Service) currently owned by Google. Firebase is a solution offered by Google to simplify Mobile Apps Developer jobs. With Firebase, apps developers can focus on developing applications without having to give big effort for backend affairs.

Some of the features owned by Firebase are as follows:

1. Firebase Analytics.
2. Firebase Cloud Messaging and Notifications.
3. Firebase Authentication.
4. Firebase Remote Config.
5. Firebase Real Time Database.
6. Firebase Crash Reporting.

From the six Firebase features above that, we discussed in this article is Firebase real time database.

Another tutorial : Create Simple CRUD with Datatables, Jquery and AdminLTE

What is Firebase Real Time Database?

Firebase Real Time Database is a NoSQL database feature that can be accessed in Real Time by application users. And amazingly, the app can store data locally when there is no internet access, then sync the data immediately after getting internet access.

There is no need to explain more about Firebase information, you can read it directly through the official website.

A brief tutorial on how to use real time Firebase database for web applications

Google provides 3 pricing packages for Firebase products like the following picture

Tutorial Crud Firebase Real Time Database In Web App For Beginners

As a learning material please choose Spark Plan

Create a new Firebase project on Firebase console

Create New Project Firebase Console Min

Then get the code for Firebase configuration in javascript like the following picture

Get Configuration Firebase For Web Application From Firebase Console Min

Firebase Configuration Code Min

As an initial experiment don’t forget to change the authentication on the rules tab so that all users can access the database as shown below

Change Rules Authentication For Database In Firebase Real Time Database Beginners Min

Up to this point, you have successfully created the initial configuration of Firebase for web applications

Firebase has provided a fully usable CRUD function. CRUD itself is a function to Create Read Update Delete data on an application.

As a reference to perform CRUD functions:

CREATE

READ

Firebase can display and restore data in real time, so we do not have to hassle to refresh the data. This is one of the most favorite features.

The above code will be explained more fully in the example of making crud application below

UPDATE

To perform data update function only need to use  update()  method like the following example:

DELETE

To perform the data delete function only need to call the  remove()  method as the following example:

The next step we will make a simple crud application to create a “person list“.

How to create CRUD Firebase Real Time Database In Web Apps

Get started
1. You have got the Firebase configuration code for Web APP as above tutorial.
2. Bulma CSS framework (We will learn this CSS framework because I’m a bit tired of using bootstrap: D LOL)
3. Jquery (To simplify DOM Element manipulation)

Let’s start
1. Create a new folder with fbase name and create an HTML file as index.html
2. Copy the following code and save it in the index.html file

 

a brief description:

Firebase Web Real Time Database Tutorial For Beginners Min

– The initial Firebase configuration code is placed on the top line.
– Data changes in the database are returned and displayed in real time, so we only need to generate code to display data 1 time. To display data we need 3 pieces of the event:  child_added , child_changed ,child_removed  . The three event functions are:

  • child_added: Retrieve lists of items or listen for additions to a list of items. This event is triggered once for each existing child and then again every time a new child is added to the specified path. The listener is passed a snapshot containing the new child’s data.
  • child_changed: Listen for changes to the items in a list. This event is triggered any time a child node is modified. This includes any modifications to descendants of the child node. The snapshot passed to the event listener contains the updated data for the child.
  • child_removed: Listen for items being removed from a list. This event is triggered when an immediate child is removed.The snapshot passed to the callback block contains the data for the removed child.

Show Data From Firebase Real Time Database Using Web App In 3 Method Events Min

When new data is added, the child_added event will be executed then javascript will call add_data_table() function.

When any database changes, the child_changed event will be executed then javascript will call update_data_table() function.

When deleting data on the database, the child_removed event will be executed then javascript will call the remove_data_table() function.

Save And Update Firebase Real Time Database For Beginner Min

To save, edit and delete data we just use the method  set()  update()  delete() .

Tutorial Firebase Api For Web Reference For Beginners

Firebase also provides many APIs that can be used for data manipulation such as finding the count of children on a node, checking whether a node has a child, checking whether a node exists or not. The full API documentation using Firebase can be found here.

If the above code is executed, the application will run like the following motion picture

How To Create Crud With Firebase Real Time Database With Web Apps

Firebase implementation is easy and very light to use. What about applying Firebase on angular 5? Maybe I will discuss in the next article.

To download Firebase real time database example project above, please use this link below

Another article: Angular 4 Tutorial For Beginner With Simple App Project

Similarly tutorial on CRUD Tutorial Real Time Database In Firebase Web For Beginners.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.