How to WRITE, READ, UPDATE and DELETE data with Firebase database using JavaScript

rhyme bill is now online hey guys and girls today i'm going to show you how to write read update and delete data with firebase database let's go [Music] [Music] all right so the first thing you want to do is to go to your firebase console here in your console we're going to go ahead and create a new project i'm going to call mine write read update delete we're going to go ahead and finish off the process awesome let's add our web app to our project now we gotta initialize our real-time database so over the real-time database tab you want to hit create database now we're going to switch up in a test mode just because why not we'll practice with it great now your database should be up and running all right so i already went ahead and created an index.html and an index.js and the most important thing i got a form container which just has all my input boxes your implementation might be different from this but as long as you got something that you're happy with that's fine now lastly i got a script tag which i'm going to use to connect to index.js awesome so let's go back to our firebase and here we need to go to our project settings this is going to give us some code which is going to connect our html website to our firebase project great so now we can just copy this above our index.js grip file and notice i'm keeping all of this below the body so that way the webpage loads and then it loads our script this is very important and don't forget to duplicate your firebase app and change it up to database so we can use our firebase app and our firebase database alright so lastly we're going to copy our firebase config and paste it in our index.js great so once you got that done we're going to create a new variable database and this database is going to be equal to firebase.database so that way we don't have to write this out every time [Music] all right so here in our save or write function we're going to declare variables for all our input boxes it's going to allow us to get all the values first before we actually save them to firebase database to save this data to firebase database we simply have to say database.ref and here we're going to say a users which is going to be a category in our database in our database we're going to save a users slash our username and in here we're just simply going to set our data here which is our email our password username favorite food etc [Music] lastly one alert the user that the data has been saved and depending on how you set up your buttons i'm just going to use the same button for all the functions but for now i'm going to use it and set it to save so whenever we click our button it's going to save our data to our database awesome so when we go back to our website refresh and put in some pseudo data when you hit submit we should now see our data should be saved to our firebase database [Music] great so now when we go back to firebase we can see our users category and in there we see our test which is our username and inside our test we see all the data associated with that user awesome great so now i'm going to go ahead and create another user just because it's fun [Music] alright so in our get or read function we're going to create a variable call it user ref user ref is going to be equal to our database dot ref users and we'll just leave that blank for now sweet below this we're going to say user ref dot on value i'm going to pass in a function which takes in a snapshot and this is going to allow us so anytime a value is added on it's going to print out the data so here we're going to use the user lucky just because feeling lucky today i'm going to print out the data so inside this function we're going to say var data is equal to snapshot.val and this is going to grab the value of our lucky data which is our user we see an object is printed out which is our user data sweet now we can simply print out a specific data we want for example data.email awesome so instead of hard-coding our username into the script let's create a variable which is going to grab the username from our input box so that way we don't have to type it in code but simply enter it into our input [Music] box [Music] great so when we go back to our website and refresh type in the username test we now see our email for test is being displayed which is awesome so now we can get users in firebase database great so in our update function all we need to do is to create a variable updates which is going to be equal to an object and in this object we can pass in any parameter we want to update for example let's update our email to do this we simply type in email and put in and set the value of that equal to our updated email and we can also update other parameters by adding in into our updates object nice so instead of hard coding our updated values and our objects i'm just going to create a variable like i did before which just gets the updated email from our input box rather than in code but depending on how you're gonna use this it might look different for you for example you can use this to reset passwords or reset email addresses and you might have a special token you send out to the user or something like that great so now we have the things we want to update we simply need to type in database dot ref and we're going to say user is slash plus the user name or the user we want to update so i'm just going to create another variable so we don't have to hard code it and this is going to allow us to update individual users i'm going to say dot update passing our update now we just slap on alert updated now when we go back to our website refresh and now when we add in our username new email and our new password should now see when we hit submit it should actually update our user which is awesome last but not least our move or delete function i'm going to start off this by creating a variable username which is going to be our input once again and down below we're going to say database dot ref user slash plus our username so this is going to reference the username in our database that we want to remove we're going to end off with dot remove simple as that it's going to remove this user from our database [Music] now when we check our firebase database we can see our test user or our user with the test username has been removed which is awesome and that's it guys that's how to write read update and delete using firebase database it's pretty easy hopefully you guys like this and use it in your own various projects but until next time rhyme below

Channel: Melvin Adekanye

Views: 41,942

Keywords: Rhymbil, rhymbil out, How to WRITE, READ, saving data to firebase database, how to write data to firebase database javascript, javascript, firebase database, firebase realtime database, firebase realtime database tutorial, how to read data in firebase, how to read data from firebase in web, firebase database tutorial, firebase database saving data, read and write in firebase database, firebase tutorial, UPDATE and DELETE data with Firebase database using JavaScript

Id: GPCjffQex-M

Length: 8min 55sec (535 seconds)

Published: Fri Apr 02 2021