Read, Write, Update, Delete | Firebase Realtime Database v10.3 | Javascript

what's up YouTube Welcome to the video so we are talking about Firebase version 10 and in this video we will be creating a Firebase project then we will create a real-time database in it and perform credit operations on it all from scratch so let us begin so first of all search Firebase and click on this link then go to console click on ADD project name your project let's say Firebase version 10. click continue only check this if you need the Analytics create project click continue now go inside the build menu and click on Real Time database click the create database and click next start in test mode now click on Project settings and add a web app fire 10 app Register App click continue to console and you can see that the app is added here so now let us write some HTML and in this example I will be demonstrating how you can work with string numbers Boolean and object because these are the four data types that the real-time database supports so we will create a label first name then an input of type text and the ID will be first name input 2 BR tags and I need a last name and we will put the information of Department so consider this example the example of an employee and instead of using input we will use select and we will name it Department input it will have some options and then another select statement and this time it's gonna be then we will be asking for the cnic number which is gonna be a number then we just need four buttons now let's see how it looks like so without CSS it would look like this so let's add some CSS and this video isn't about CSS so let's skip that part so I have done this basic CSS so we're just making the entire thing look bearable so now it looks like this better now let's focus on the Firebase configuration so we need a script and let us go to the Firebase settings so we are already in the settings here copied the CDN code you can see that it says type module and this is required to use this import statement and there are some disadvantage to using this type module the first thing is we cannot access this data outside of this script so if we write another script over here we cannot access this data this works like a separate file so it cannot be accessed outside the second thing is if we want to write this code in a separate file and Link it through a script then we need to deploy this page so let us proceed remove these comments because we don't need it and we will Define another import statement and it will use get database ref child get set update and remove functions we will be getting all these functions from not Firebase app but Firebase database then I will Define a constant DB which will get a database now before proceeding we need to get the references of all the HTML inputs that we defined here this should be L name so copy the IDS from here let F name input equals to document dot get element by ID now let's start adding the functions so the first one is add data and it will use the set function of the Firebase which will get the reference which requires two arguments one is the DB the the constant that we defined earlier and the second one is the path so employee set and inside this folder cnic input dot value so we will save each of the employee based on their cnic number because the cnic will be different for each employee now the first argument of the set is this reference and the second argument is the object that holds the data so what we are going to save inside the database so it will be saved in the form of key and value so name of employee and I will save an object inside it which will contain two properties first name that will take F name input dot value and the second property will be last name which will take lname input dot value so we are creating a property named name of employee and saving this information on the database Department so this is the name of the second property and we will save the Department input dot value then inside the third property which will be can swim we will save the information of swim input dot value but here this time we want to save it as a Boolean so we will compare if thus swim input value is equal equal to yes then it will save true inside can swim now in the cnic I am choosing a number Constructor to convert the cnic input dot value into a number so these are the four examples of the four data types we are saving an object a string a Boolean and then a number and this doesn't end here we can use dot then to perform an action on the successful data entry and inside it we will say data added successfully and we can also put a catch this is also a function which takes another function that that is just how JavaScript works and inside this function so this is the entire function now let's write the function to retrieve the data retrieve data and it it is required to get a DB reference object which you can get by ref DB so this will get a DB reference then we will use the get function to get the data but inside this function there is another function which is the child function and inside that function we need to pass the DB reference with the path that we want to retrieve the data from so the same path from the add Dot then snapshot means we are not getting the entire database but but we are getting the snapshot of the database or we can say the part of the database if snapshot dot exist so we need to put an S at the end if the data exists then we map the data to the inputs so F name input dot value will be equals to snapshot dot well this is a function which gets the data from the snapshot now we need to enter the properties that we used to save the data can swim but it will return true or false but we need the answer in the form of yes or no so we can do this we treat this as a Boolean statement and decide on the basis of that if the can swim is true then yes otherwise no so this sums up our get functions but we also have the else condition where we Define if we don't get the data we will say and if we get an error the same thing from the add function now making the update and delete function is gonna be easy we will just copy this function change the name change the function update we will not update the cnic number so remove this data updated successfully and that's it so this is our update function now for the delete function we will use the remove function from the Firebase and this will not take an object because it's not required it will just remove the value at the path so this is our deleted function now we need to assign all of the events so add button dot add event listener this is the best way to assign events click and add data delete data add data added successfully let's see for ourselves so there is an employee set and the cnic number and inside it we have the information of the employee so this is Boolean this is a number this is a string and we have saved the name of the employee as an object so there are two properties first name and the last name and they both are string now refresh I have to copy this and let's try to retrieve the information you can see that the information is retrieved now we will update the can swim and one two update you can see that the information is getting updated let's change the cnic one two three add so we have this second employee and let's try to delete it so refresh delete you can see that the employee is deleted so this is all for the video if you like it give it a thumbs up and do subscribe to the channel see you next time

Channel: The Amazing Codeverse

Views: 18,939

Keywords: firebase 10 javascript tutorial, realtime database v10 javascript, store and retrieve data firebase javascript, firebase version 10 tutorial english, read write data javascript firebase 10.0, how to use firebase in javascript, update delete firebase javascript, get data from firebase js, add data to firebase 10.0, firebase database 10 tutoiral, firebase v10 tutorial, firebase crud, realtime database v10, modular firebase tutorial, modular firebase 10.0 using javascript

Id: 7hB2ASYBkXo

Length: 16min 48sec (1008 seconds)

Published: Tue Sep 05 2023