READ, WRITE, UPDATE, DELETE Data | Firebase Realtime DB v7, v8 | JavaScript

was a beautiful come to a video in this video we learned how we can read write update and delete data from firebase using javascript so let's begin let's go to the firebase website now go to console for this you have to logged into your Google account at Project firebase Java Script you can enable this but we don't need it for this project now we will go into the develop section and database so so here is the real time database which we will gonna use in this project so now we will go into the project settings and we will add a web app so by clicking here and giving it a name fire gs app and we can also setup the firebase hosting but we don't need it right now click continue to console this is enough for now we will focus on our HTML page here we are trying to savor the information of a student so we need four text boxes one for the name other for the rule number one for the gender I will also put two line breaks at the end of each of the inputs now let me create four buttons some line breaks over here too now buttons so first is going to be the insert button insert and let me copy and paste this four times the second is going to be the select button which we will use to read the data the third is going to be the update button and the last one is without delete button for our project we need these three libraries these all will be given in the description so you can copy from there but make sure that this version matches the version given over here so this is currently seven point fifteen point five so this this version in your web app should match the version over here so all of the three now here we will write the main script I will write all my code under one file which is this for the sake of simplicity but you can write the JavaScript code the main script code in another file so everything will remain the same you just have to link the file over here in this cube tag so now let me continue now we will bring our firebase configuration over to our HTML code firebase configuration into our HTML file so we will copy this configuration and paste it here now comes the section of a reading the data so here I will initialize some variables which are named B role V section V and gender V then we will create a function to ready all the values which is now now we will create a function which will fill our variables with values so function ready and inside this function named V equals true document dot get element by ID and the element is named box dot value now I will copy this and paste it multiple times so now our data is ready now we will continue to code the insert button but before that let me check the so it looks alright let me zoom it a little bit now let's work on our insert process now we will write the code for the insert button so the insert button has a ID inside so document dot get element by ID insert dot on click equals to function first I will call the ready function what what it's gonna do is it's gonna fill our variable with the newest values present in the text boxes and then we will gonna write the data to the firebase so for dead firebase dot database dot reference and the reference is actually the address so inside the student folder I need a folder with the student roll number so roll V and inside this roll number folder all of the information of the student will be stored so inside this set function I will provide the data which is need to be stored on the firebase so name of student equals to name V and then so this is how you insert data into the firebase now let us try it I'm gonna save the file then refresh here take we roll number is 15 section is B and gender is male press insert and now let us go to the database starting test mold the data is not here because I forgot to create the database first now if we press the insert button the data would be inserted so inside the student we have 15 which is a roll number and inside this all the information of the student so this is how you insert the data now we will come to the selection part now to select data document dot get element by ID select dot on click equals to function so first the ready function and then firebase dot database dot reference and the reference would be the same dot on value function snapshot so snapshot is basically capturing a small part of data or pointing towards a particular point of data from the larger database and then we can fetch out even deeper fields or deeper nodes by getting deep into the snapshot now we will fetch the data from the snapshot into our fields so first document dot get element by ID the first is the name box dot value equals two and copied three times the second would be the section box and the third would be the gender box we don't need to fill the rule number box so now snapshot dot well which is a method to fetch out the value dot now we have to give the exact field name which we have given to the firebase so first is the name of student we can copy it from here so the name of student so they must be exactly the same as the firebase data so this is how we face the data from firebase now let's check this out to refresh and let's remove all these now I want to face the data of role number 15 so select and I have all the data of the rule number 15 now the update and the delete process is very simple for the upgrade process we will copy all this paste it here let's change the name to update process so all of this thing will remain the same we will just remove the set and add update here and let me remove the rule number because we don't want to update the rule number we can also use said to update our data but it will delete all the previous field and add the new fields but update would only update the given fields which are these three right now so it would update only these three and it will not touch any previous field so this is how you update our data and to delete a data let me copy this so to delete a data is very easy you just say remove and that's it so this is the way to delete that data now we just have to change this to update and this to delete now let's check this out now first refresh the page now I want to update the data of rule number 15 so let me get its original information now I wanted this to be updated to amazing let's remove this amazing code words and the section 2a now let me update it the data is updated now let us delete now let us add a new member rule number 17 which is a female insert the data so there is the data of rule number 17 now to delete the data of the rule number 17 I just need the rule number and delete and data is being deleted so this is all for the video if you liked it give it a thumbs up and do subscribe to the channel see you next time

Channel: The Amazing Codeverse

Views: 75,664

Keywords: firebase version 7 javascript tutorial, how to create firebase database javascript, how to insert data firebase using javascript, store and retrieve data firebase javascript, how to read data from firebase using javascript, read write data javascript firebase, how to use firebase in javascript, insert. select firebase javascript, update delete data firebase javascript, set data in firebase js, get data from firebase js, add data to firebase, firebase beginner

Id: oxqVnWPg0So

Length: 13min 54sec (834 seconds)

Published: Thu Jul 02 2020