Connect an HTML webpage to a Firebase database for CRUD using vanilla JavaScript

all right so in this video we're going to make a really simple one-page html document that connects to a really simple database uh we're not going to do any front-end frameworks like react or view or anything else that you might have heard of like that although that is really going to be your next steps for making more complicated web apps that use databases but for today we're just going to keep it real simple this is kind of an introductory video to just getting some data that you might enter into a field like this from a simple html web page and getting it put to an external database so that you can store that data more permanently and update or remove or find and query that data from the database as well so it's going to end up looking something like this where we can do something like type in an id for the bit of data that we want we can type in a name i'll just use my name mr patterson and then the person's age so i'm obviously 21 and we just click insert and it adds the data to our external database then if we want to find that person we can enter the id of that bit of data and it just pops up into our actual web page the name and the age we can also change our mind or what their name is maybe i'm actually james and we can update that data and then if i were to refresh and to search by id for that data entry it now has updated that with james or i can take that same id and i can actually remove it completely from my database which means that if i were to search for it again by the id number it would come up blank and say no data found so that's what we're aiming for we're aiming to create a simple web page that allows us to insert update and remove and find data from an external database that we've connected to our html so let's get started first thing is you want to actually use firebase i'm going to suggest we use this as a nice simple database um to get started with and it's run by google and they do a lot of stuff that actually makes things nice and easy for us so if you're coming in for the first time and you know you just search for firebase you will come across something like this and it'll ask you to sign up i'm not going to teach you how to sign up and create an account because i'm sure you can do that but then you go to the console of your own um you know account and you can create a project and just give it a name so we'll just i'm just going to call this one video demo because that's what i'm doing and we're not going to worry about analytics or anything fancy like that just now this is just to get something simple started we're going to create a project and then once that's ready we just click continue and now we have our project up and running but we don't have a database yet so we're going to come to build and we're going to actually build our database for this project so i'm going to use a real-time database for this demo and we're just going to click create database and we need to select the closest sort of data store to where we are so for me that's singapore let's click next and i want to start this in test mode because that keeps it nice and open um just for testing out you probably want to use higher security rules for if you're doing something for real but for just for demo purposes and for just getting something started and i'm going to delete this as soon as i've done the video we're going to have a test mode just to make sure that it works straight away for us and click enable okay and now we have a space where our data can actually go so inside of our project this is the actual database itself and this is where our data is going to be stored just very quickly the rules include a cut off date for when this database won't actually work anymore so if you've tried and it stops working that's the that's the sort of dates that you know it's going to be doomed to not work anymore of course you can change it but that's one of the things about test mode okay so now that we have our database uh what we're going to do is actually come to our project settings and in the project settings this is where we can actually create an app or find code for an app that actually allows us to connect to now we're not going to do mobile android or apple today we're going to use a web app so we're going to use html there's our familiar html brackets we'll create a web app and i prefer to just call it exactly the same name uh video demo as i have for the project for me i just find that easier um we don't need to worry about hosting so i'm just going to click register app and once it's registered it actually gives us a piece of code that we can use to connect to our html so that's really useful i'm not going to use this just now i'm going to go continue to console because i want to emphasize that we can find this with the project settings the project settings for our project we can scroll down and this is where the code is going to be found now um we're going to want to use the cdn here and this cdn you can see we've got script tags here and these script tags allow us literally just to copy and paste the code into our html document to allow us to make that connection between the html web page and our actual database now for those of you that are lazy in the description of the video i've put a link to my github repository where all the code for the video is going to be so all the code that we're about to do together in this video i've put it here i highly recommend that you don't just copy and paste this because for start it's not going to work straight away there's things that need to be done but secondly if you then want to go and modify this code and make it your own and make it work for you it's going to be very tricky to do that if you don't actually understand what all this code is doing but more importantly it's not going to work unless you actually put the right code in this part here you can see this is comments at this point so it's not going to work as it is but what you will put in here is more or less going to be the code that you've got from uh the app um that you've set up in firebase for your database and during the video i'll show you exactly how to do that but for now let's get started let's create some code so i'm going to go to visual studio code here and i'm going to create a new text file and i'm just going to save this one on the desktop and i'll call it my simple simple database now dot html never forget the dot html okay so there's our html document and i'm going to use the exclamation mark and tab to autocomplete and get that nice boilerplate code started for us so um let's give it a title as well let you know i'll call it my simple database again oops my simple database so i'm going to make a couple of divs that's how i'm going to start so a div here and a div here and each of these divs do different things so the first div is going to be where i enter the details of you know the person's name or age or whatever so i'll give that an id and we'll give each div a name so i'm just going to call this one enter details uh because it means that i can actually find this element from my html later and i'm going to want to do things with either the styling or the javascript with different elements from my html so it's important that i give the essential elements a name so i'm going to call this one find details because this is where i'm going to do my querying and that second div i'm going to find or query the database at that point so firstly let's just make it clear to the user what we're doing here so i'll just make a heading for each one this one is the enter details space so i'll call it into details and then i'll grab something similar for the find details but um i'll just call it find and i'm gonna ask people to find by a particular id number so we're gonna give each entry into this database a particular id okay so underneath our h1s we want to have headings i might make these h4s headings for the type of data we want to put in so we're going to start with an id number for each separate piece of data we're dealing with names you might have like five john's for example but if they've each got their own unique id then it means that we can query the database and know which john exactly we're talking about so it's really useful in the database for each data entry to have its own separate id okay and then there needs to be a space for people to actually type in um you know this id number so we're going to put an input field in there now i'm going to name my input field it's really important to give these parts of your html a name so i'm going to call this one into id so that i can refer to it later and we'll give it a type as well let's just say text for now um it doesn't want to go inside my quotes there but there we go so um i'm going to do another couple of ids with inputs so i'm going to be a bit lazy here and just copy and paste however please be very careful when you're copying and pasting that if you're going to copy and paste you've got to change all the relevant bits that needs changed so i'm going to put a heading here that says name and the um id for it is going to say enter name so i'm going to call it enter name because that's the input field this input html element here is the input field where i enter their name so i think it's really important to have names or ids for your elements that make a lot of sense so don't just put random names here actually think of what what actually makes sense for what the element is and what it represents it does make things a lot easier later on if your variable names your id names etc if they all do make sense okay and then age is going to be my final heading and i'm obviously i'm going to call this one enter age nice logical system but we'll make this not a type equals text we'll say this should be type equals number because the age is going to be a number now underneath that i i want some buttons um so let's give myself some space actually i'm just going to put a couple of break elements in here so br is like a break element it kind of takes it down a line or two to the next part of your html and underneath all these input fields for id name and age i want the buttons i want to click on buttons to do various things with the data so the first one i'm going to say i'm going to put it in big bold capital letters i'm going to have a button that's that's called insert or it has the text insert inside the button and again i'm going to name it i need to give it an id so we'll call this one insert again nice and simple names that make sense and then i'm going to have another button that allows me to not just insert the data into the database but i want one that allows me to update the data once it's already there so update and we'll make sure that that button has a big label on it that says update okay and then last one um is going to be remove the last one for this div anyway we'll call that remove so giving each one an id because later with my javascript i'm going to want to grab these html elements and do something with them so those are my buttons and these are all my other the headings and the input variables up here now i don't like to go too far in coding before i actually stop i save and we want to actually test that this is working so let's actually come to the desktop what did i call it my simple database here it is let's bring it out here i'll open it up okay and that's what it's looking like at the moment so that's nice i've got a space to enter the id the name and age and i've got the buttons to insert update or remove them from my database there so that's exactly what i want okay so now let's come to my next div come back here and what i want with this div is um i want the i've got the find by id heading but obviously i need an input field for that as well so let's put a an h4 there for and just call it id to sort of prompt the user to type in the id you know that they're wanting to sort of search for in the database then we'll give them an input field and this input field uh id we're going to instead of enter id this one's going to be find id okay and we'll do type um we'll make that text as well because we've got to make it match what we had at the top for id um all right and then let's have a break or two to just move down and after that we're going to have a button a button to allow us to click on that button to say yep we want to we want to find it now um so we'll just type in the word find and bold capital letters and i'm going to give this button an id as well and we'll call it find which makes sense right so it's just setting up the html here now after that actually not done i want to put a couple of empty h3s here so my h3s i'm going to put a couple here but they're going to have nothing in them and the reason for this is that when i click the find button i want something to go i want to inject some data into these empty h3s and it's going to be the data that i'm searching for from my database we're going to put it into these h3s we're going to put it onto the web page but at the moment we don't know what they're looking for so we'll keep them empty but we will give them an id so that our javascript code can inject the data into these spaces in our web page later on when we want it to when we want to click that button okay so let's give it a good um id so we took we'll talk make the top one a name so this is where we're finding the name um that's going to be text so type equals text and let's do the same for the other h3 let's make this um but this one's not the name this is where we want to put the age so in other words we want to type in the id of what we're trying to search for we're going to click the find button and then hopefully inside the html here we're going to inject the name and the age of the person that we're going to try and find okay all right um might as well have another just move it down a little bit it's me being a bit pedantic okay so again let's just save this and see what it looks like i always like to check that because otherwise you can code for hours and go oh there's something went wrong ages ago so it's important to check regularly okay so that's um what we want in terms of the html it doesn't look good so let's do some css css help things to look a bit better this video is not focused on css so i'm not going to do too much but just in the head of my document here i'm going to put a style tag again you could make a separate css file but for now i'm wanting this to be a one page web document so let's just have some style tags up here and to start with for the entire body but like for everything i'm gonna have a text line in the center so that's going to apply to the entire body of the document so that's everything between these body tags here the opening and closing body tag it's all going to be centered so what that'll do is it will just bring everything into the middle like that but i actually don't want these divs one on top of the other i want them side by side so i'm going to style my into details div this first div and because it's an id i need to use the hashtag symbol so hashtag inter details would allow me to style that first div by its id and i want to i want to float both of these to the left a float left sort of makes them sort of float up and if it's left then they both come alongside each other and rather than being one on top of the other so i'll do this for both of them float left um but i want them to take up half the page each so we'll say width of each div is going to be 50 percent um i'm going to give each one a background color so background color it can be whatever you want i quite like dark slate gray um for the background color and then for the color of the actual text i'm going to make it floral white these are my go-to favorites um so now that's the end to details div and i'm going to copy and paste again remember to be very careful with copying and pasting i know i'm being lazy but it is quicker but so the second div was called find details i think let's check that yep fine detail so i'm going to style that div so hashtag fine details i want that to float to the left as well that's also going to have a width of 50 but to contrast them what i'll do is i'll swap these colors around so i'll make for this one the background can be floral white and i'll make the color of the text here i'll make that dark slate gray then we just got that nice contrast from one to the other so we can tell the difference between the divs now the the last thing i'm going to do here is just for the input fields so for all my input fields every single one i'm going to style them all in the same way and it's just to give them enough width so i'm going to say width equals let's make it 120 pixels just so there's enough room for people to enter their names um okay that should that should do it so again let's save that and check what it looks like so when i refresh my page now um there we go we've got some styling oh it's a bit tight up there so i might just um put a couple more breaks in let's see um oh yeah after here i might just put a break or two in just to yeah just to make it look like it has a bit more space um of course all the stuff you know you can play around with and get it looking the way you want you might be doing something completely different but just for demo purposes that's what i want it to look like all right so two contrasting divs where i can enter the details of that i want to be either inserted or updated or removed from the database and then i can go and find buy id a particular bit of data from the database as well okay so of course none of this does anything yet it's just my html and my css so now let's actually connect what i've done here to my actual firebase database that i set up and like i was referring to before the way that i do that is i come here to this code here so that's just in my project settings that's how i'm finding it in the project settings i just scroll down and i click on cdn and now i've got these script tags i'm just going to copy that whole thing and paste it in underneath my html there paste in and there's my script now of course you can have separate javascript files that are connected to your html but for now again i'm keeping it nice and simple we're just gonna have a one page document here this is all the information that we sort of need except there are some more there's more stuff that i need to do here so um what i'm gonna do is just add a couple of things um firstly i've got my app initialized here so that's good i need that code there for initializing the app but there's some other methods or sort of functions from the firebase library that i'm going to want to use later on and it's great that firebase has all these tools for us but i do need to actually import them so i'm going to use the keyword import and then in my fancy brackets i'm going to import the things that i need so the first method that i really need is one called get database let me spell it right otherwise it won't work so get database that's going to allow me to you know get my database from where i've created it so obviously i can't do anything with the data unless i you know get it initialize it and say yep here it is so that's important and then i'm going to use all the methods for um you know setting you know if i want to put data into the database so that's called set in fiber so i'm going to set data into the database that's important then i might want to get data from the database once it's in there so set get i want to update data possibly so i'm going to use the update method i need to import that in from firebase i may want to remove data once i've put it in there you know delete it so um those methods are all really important for me to import there's another couple that i need though one is this one here called ref so that allows me to get a specific reference in my database or to put data in with a specific reference so you know being really precise about exactly where in the database i want to put data or where in the database i want to get data from so we're not going to have a terribly complicated structure to this database again we're trying to keep it as simple as possible but we are still going to have you know a couple of scenarios where we want to refer to a specific part of the database so that's what ref is for and then like just in the same way we might have like a parent child situation so we're going to import the child method so that we can say yeah if there's a broader kind of folder as it were for data we want to go to one um specific part wanted like a child part of within that um within that data if that makes sense so we're going to import all these methods but where are we going to import them from um oops so import from use the keyword from uh where are we getting these from we're getting them from the same uh url here that we initialized the app from in the first place you know this is you know this is firebase itself with the current version and everything up there so that's the url that i want to import all of this from except that there's a there's a really important difference and it's not um firebase app it's not that library we're talking about we're looking at getting these tools from firebase database that's the library that we're getting it from so just change that url to database and then we can import all of the stuff from the firebase library which is great okay so that should hopefully allow us now to be connected to the database that we created in firebase but we actually haven't written any javascript code yet ourselves and that's the really important bit so this is what we're going to focus on now is actually writing some code that works to do something with our database and to do something with our html okay so firstly and it's a bit boring but we have to do it we need to create a whole lot of variables and initialize all our variables the first and probably the most important one i'm going to use the constant you know const to declare this variable we're just going to call it db short for database and what that variable will do is it'll call the the get database method that we've just imported from firebase don't forget the empty parentheses there okay so uh we need to actually get the database from where we've created it so we're going to store that in a variable that's important but then we've got all these elements here from our html that have these particular ids well i want to create variables for each of these so that i can actually do things with these with with my javascript okay so first one is where we actually entered the id name so i'm going to create a variable called enter id and what i'm going to store in this variable is you know something from the document so the document is everything between the opening and the closing html tags i'm talking about my entire document but i'm interested in this bit firstly this is where the person is entering the id number of whatever data they're adding and i've given um a name here which is enter id and i just for me personally i find it easier to name the variables the exact same thing that the id is in the html and what i'm going to do is i'm going to find this element by its id from the document so there's a couple of ways i could do this but i prefer the queryselector method so i'm going to say document.queryselector and that will find something from my html for me what i'm going to find i put it in brackets and then i need the string quotes and because it's by id and i'm using the query selector method again just like with the css i need to use the hashtag to find the id so hashtag into id and from now on that element is going to be stored in this enter id variable okay now a bit laborious but i'm going to do the same thing again for all of these different elements all of the important elements that i want i'm going to use a semicolon to end each instruction now into id i've also got one called intern oohs what did i do there um press the wrong button that's what i did okay enter name um and again if you're copying and pasting be very very careful to make sure you're changing everything that you need to but i'm going to query the enter name id from my html and grab that and store it in the enter name variable and then i'm going to do the same thing but for enter age being very careful that all the capital letters are in the right place when i'm referring to things by id it has to be spelled exactly the same way another really common error is to forget this hashtag if you forget that hashtag it won't know what you're talking about if you're using the query selector method so be careful of that as well okay um and then after all the entering ones i had the find id um input so you know when i'm on the other div and i'm wanting to find something by id i had an input field for that and i called that find id so we're storing that in a variable um and then i'm going to do the same for find name now find name is not an input field if you remember i create a variable called flight name but the the find name id here remember that's our empty h3 up here so that's this element that i'm grabbing now it's that empty h3 and i want to use that later so i'm creating this variable because i want to be able to inject some data into that space from my html that empty h3 space so find name and then we had find age as well and that's where the age bit is going to go so find age and that's going to be the part of my html that's got the id find age so some people might find it confusing that i've got the same variable name as the id names and it's up to you you could make these different personally just for some reason for me i find it easier to keep them the same because it just keeps things nice and organized in my head but if the double up confuses you then just keep them different as long as you're in control that's the most important thing just always be in control okay i've got more variables to declare because i made all these buttons and i want each button to be able to be used but by a variable as well so um actually i might break from my rule here this is called insert but i think i want to give it a variable name that distinguishes between the buttons and the other ones so i'm going to call this one insert but i'm just going to add camelcase btn there as well just to indicate that it's a button and that's going to be in my document i'm going to use the query selector method and i called this one so remember the hashtag remember the hashtag for because it's an id i called that insert um and again i'll just copy it copy this and paste it being slightly lazy had the insert button but there was another button that i called update so that's my update button but that id was update ah so many variables but it is very important this is the structure right we've got to structure it right and have all the variables named correctly remove where to remove button and that had the id remove okay and then the find button on the other side on the other div we had this find button which and the id for that was was fine so i use hashtag find okay so now that i've declared all of these variables that's great but i need some functions okay so when i click these buttons when i click insert i want a function to run okay so i'm going to use the keyword function to declare my function and i'm going to call this first one insert data you know empty parentheses and then the fancy brackets okay that's you know that's the syntax for writing a function keyword function name the function empty parentheses they don't have to be empty you can put parameters in there and then the fancy brackets that's your block of code and the code for the function goes in here as we know so i'm going to have four of these functions because there's four things i want to do i want to insert data excuse me then i also want to um find data okay i want to update data as well so if data is already in there but i want to change it because i'm going to do the update data function and the last one is i want to be able to remove data as well so i've got i've got buttons that do those things or that are supposed to do those things so i remove data update find and insert data and i've got variable names now for each of those buttons because each variable name refers to that button from the html that i've given an id to but if i click on a button at the moment the computer doesn't know that i've clicked on the button so what i'm going to do is i'm going to use these variables here to add an event listener and so that's exactly what it sounds like the computer is listening out for the event the event of me the user clicking on that button so let's start with the insert button so i'm going to find this insert button by using the variable that i've created which grabs it from my document and i'm going to use dots to add the method dot add event listener and that ad event listener method um allows me to listen out for an event of course the computer doesn't have ears it's not actually listening but i can name the event that i want it to sort of wait for as it were so in quotes i'm going to put click because you know it's when i click the button um that's the event that i'm talking about that's the that's the big event it's me clicking the button okay and then after a comma i'm going to write the name of the function that i want to run when that event happens and because it's my insert button the function that i want to run is the insert data function okay all right so i'm going to do this a few times so forgive me copying and pasting again let's do the same thing here but instead of the insert button we're going to do the next one here with the update button i'm going to add an event listener to that but obviously i don't want the insert data function to run when i click the update button i want the update data function to to be called when the event of me clicking the update button happens okay and then again for remove so for if i click the remove button i want the remove data function to run these are sort of slightly in the wrong order but in mind um and then the last one find when i click the find button then i want the find data function to be called or to run right okay great so this is the structure of it now i've got all my variables defined i've got all my functions declared and i've got the events listener so the computer knows when i'm clicking on each of these buttons and i've named which function i want to be called when each particular button is clicked on so let's actually write some functions this is the fun bit this is the cool bit so um when i want to insert data um what i'm going to do is i'm going to use the set method that i've imported from firebase um to sort of set or put in the data into the database so inside the um the set function here or the method or whatever we call it i actually want to i'm going to put a data structure in here so i'm going to put the fancy brackets in there for the data that i want to put in and i'm going to put in the person's name so name colon and what's the name where are we going to get this name from so i'm going to get it from up here where they have typed something in so they have typed in the person's name into this input field here that i've called into name now i've got a variable for that as well so that element from my html is called enter name but it's not the it's not the input html element that i want it's the value of whatever the person types in okay so if we can just distinguish between that let me just show you what i mean if i come back to my code here my my web page when the person types in their name if they type in mr patterson or whatever it's not this input element that i want it's the value of what i'm actually typing so for me to get the value of what's actually typed into that input field it's really important that i use the dot value method here so that i'm getting the actual you know the content of what's been put into that input field i'm going to store that um besides you know name and then i'm going to do the same for id and that's going to be the enter id input field and dot value to get the value of whatever the person is typed into that enter id field and then beside age i'm going to again i'm going to grab the enter age element from my html and i'm going to grab the value of whatever the user is typing into that okay so that's my data structure there and i'm going to set that into my database but whereabouts in the database so let's come here and i'm going to use the ref method here okay um and so inside these brackets and it's complaining here the reason it's complaining is because um i just need a comma here between my riff function and the data that i'm wanting to put in so i'm setting or another in other words sort of putting into the database all of this data that i've grabbed from my web page from whatever the user has put in there but i want to give it a specific reference to exactly where i'm putting it into my database okay and where that is is well it's in my database so let's not forget to use that db um variable um remember i got the you know i made this constant here this db so i have to i'm using the get database method from firebase just say yeah i've created this database let's actually get it let's let's refer to that i'm referring to the database as a whole but then after a comma i can be a bit more specific about it and what i want to do is i want to create like a bit of an overarching kind of like you could think of it as a folder and i'm going to just call this people it's sort of the general name so people this is where everyone goes in so people forward slash because it's kind of like a folder to begin with and then slightly more specifically after that i'm going to each person is going to have their own id so they're going to have their name in the age but that's going to be nested under the id so inside this people um folder i want a list of ids with their name and age and id with it so i'm going to get that into id dot value because people are going to type in an id into that um space so again just it's what i type in here so if i type in one for example um that's going to be the value of my id input field and that value there is going to go as a sort of a reference point in my database for where i'm storing all the rest of this data their name and their age etc okay so hopefully that makes sense it'll be easier to see what that means when you actually see it going into the database i'll show you in a second but i'm not done yet because i don't just want the data to go into the database you know for the sake of usability i also want people to be able to get that confirmation message i'm saying yeah it's worked so we're going to go dot then use the dot then method and inside our dot then brackets we're just going to use an arrow function so arrow function i sort of think of these as being like let's cut to the chase so i've got the empty parentheses followed by the arrow and then we're going to cut to the chase straight to the block of code that i want to run so um that's just going to be an alert so we'll get our success message popping up so an alert and inside the parentheses we'll have a in quotes for the message that we want uh let's just say data added successfully um all right let's throw it let's throw an exclamation mark in there let's give people some endorphins when it works all right um that's cool but you know sometimes it doesn't work sometimes it does go wrong so we need to have let's use dot catch for catching any errors so the dot catch um method in here again we're going to go use an arrow function here and in the fancy brackets here for you know again i see the arrows kind of cut into the chase again we're going to have an alert so what we'll put in this alert um actually even before that we're going to come up here and um we're going to catch the error so if there is an error we'll put that in as a parameter here um we're just going to throw up an alert that just tells us what it's complaining about so whatever is on the computer's mind if it's got an issue we'll say yeah all right just um pop up an alert and you you tell us what that issue is you pop that into the alert there and then we'll hopefully if what you say mr computer makes sense or misses computer then we will um hopefully be able to read that error and do something about it but the idea is that hopefully those errors don't happen all right okay so that is the insert data function but oh my goodness this is the moment of truth let's see if it actually works so i don't like to go too far without testing things out so let's save that and then let's come up here and refresh this okay let's actually give it a go so i'm going to use 0 1 as my id the name is mr patterson and you already know that i'm 21 and i click insert and thank goodness there are the endorphins data added successfully do i believe it well let's let's let's find out let's come to my to my database here let's go to the realtime database and um hopefully yeah there we go we can see it's changed we've got this people sort of folder here and if i expand on that i've got that id um and then within that there i've got all the data i'll probably oh maybe i need the id again i decided to do it that way but i've got the name and the age and then the id repeated inside the sort of the id folder which is inside the people folder and so i've set it up that way um so that's great okay awesome it's working lovely okay so then let's come to our find data function so with the find data function we're not just finding the entire database we're finding specific data from particular parts of the database so i'm just going to throw in another variable here a constant it's i'm going to put it inside the function and this is just going to help with the syntax a little bit and i'm going to call it dbreft just to indicate that i'm talking about a specific reference from the database and this will help things to be a little bit less nested and a little bit more straightforward from from here on in so this dbref variable i'm going to use the riff method or function from what i've imported from firebase and i'm just going to put db that db variable that i made before so i'm going to get the database sure i'm going to get the database but i'm looking for a specific reference within my database and i'm going to store all of that in this dbref variable um see me call on that just um doing that that steps is going to make the syntax a bit easier um for what we want to do next because what we're doing is we're getting data from the database that's already there so i'm going to use the get method that we've imported from firebase so get and inside get i'm immediately going to use another method because i'm actually wanting to get a child of you know a parent folder for of the data so i've got the people folder and then i've got each id it's got its own um sort of space in the database as well so i'm going to want to get a child from the each id so i'm going to use the child function that i've imported from the firebase library as well so child and then in the parentheses they're not going to be kept empty i'm going to use this dbref variable to say yep i'm wanting a specific reference from my database and then a comma and after the comma i'm going to actually name what that specific reference is so in string quotes i'm going to type in people with the forward slash because that's my sort of overarching folder of where the data is and then plus i'm going to add the plus what i what i want the specific part of the database that i want well i don't know yet it depends whatever the user types in right so just to remind you the user is going to type something into this field here so i've given this field an id and i've stored that in a variable and i've called it find id so find id that's going to grab that input field from my html but remember i need dot value to grab whatever they type in so if they type in 01 it's going to grab that value from that input field and then it's going to grab that as a child from the database of like yep that you know a child from within that of what i want to find from that part of my database whether it's their name or the age but it's going to pertain to that particular id that they've typed into that input field okay so now that i've got this you know specific reference of where i want to be in the database let's use dot then function and inside the parentheses of dot then i'm going to actually grab a snapshot of the database as it is right now you know because it needs to be current right so in brackets here i'm going to put snapshot um inside my brackets and then i'm going to use an arrow function cut straight to the chase of you know in in fancy brackets there what i want inside my my brackets is well it depends really okay if this id that the person's typed in if it exists then obviously i want to show them that data that person's name and the person's age but if it doesn't exist then i want it to pop up with a message that says hey there's no data of that id in my database so i'm going to use an if statement for this so the way an if statement works as you know is we have if and then in brackets we have the condition that is either met or not met and after that we have a block of code that runs if that condition is met or if it's true so the condition that i want to know whether it's true or not is whether the snapshot that i've grabbed from the database in particular you know the the id that i've typed in does that exist or not so if it exists and i'll use the dot i use exists method here so snapshot dot exists and then the empty parentheses there i'll leave those empty if it's true that the snapshot of that particular id that it exists then i'm going to put the name and the age of that person on my web page now remember i've got these empty h3s here and i've named them find name and find age because i'm finding things from the database now i want to put those up on the web page if they're there so i'm going to grab this firstly this find name element that's my empty html but i'm going to inject some html in there so i'm going to use dot inner html method so i'm going to put in the html well what am i going to put in i'm going to put the value of that database snapshot for that particular id so i'm going to put in snapshot dot val that's going to give me the value so dot valid it's a method so i'll use the empty brackets there and then dot name with the capital edit because i want to grab the name again this is the child that i'm grabbing is the person's name from that particular id section of my database so i want to put this data from my database into the html that empty h3 there the inner html of that is now going to be the value of that person's name from my database that i put in and just so that no one gets confused let's also add a string that just says name and then a colon and we'll give it a space and then let's concatenate so i'll use the plus symbol to concatenate this string of their name plus let's grab the actual snapshot of the person's name with that id from my database okay so again careful when i'm copying and pasting but basically i want pretty much the same thing underneath that but i'm just going to use the the find age element from my html that's the empty h3 that's reserved for the person's age and i'll just change this to a string that says age and then i'll grab the snapshot the value for my database of the person's age which is the child data from that particular id if that makes sense now that's all very well if it works but there's two reasons why it might not firstly there might not be data underneath that particular id value in the database so i'm going to put my else statement in there and then the block of code for my else statement so if it's not true that that snapshot exists i'm going to have an alert that just says um no data found which means you know it's not there um okay but there might also be some other error the computer might complain you know for some other reason and if that's the case then what we're going to do is we're just going to say dot catch use the dot catch method um and if there is let's use an arrow function cut straight to the chase and um we'll put an alert in here okay so as a parameter for this arrow function we'll say you know if the computer has some error something it wants to complain about we'll put that in there as a parameter and then we will put an alert up which with whatever the computer's issue is um so we'll put that in the alert just like we did before okay great so that should hopefully be the find data function but we're never quite sure unless we try it out so i'm going to save the code there i'm going to come up here and let's refresh and let's see if this actually works so i'm going to type in the 01 id which is the only bit of data i've put in there so far i'm going to click the find button and there we go there's my name and there's my age showing up in those they were empty h3s but now they're full with the data that i've got from the database hooray awesome brilliant yes this is working fabulous lovely but what if uh i want to change my name or something like that what if i don't want to be called mr patterson but anymore or i want zero one to to represent somebody else well if that's the case then i'm going to use again i i imported it from firebase i've got this update function that is specifically for exactly that okay and straight away inside the parameters here inside the brackets i mean i'm going to use the ref um function again that i imported from firebase and once again the the reference i need to have a specific part of the database that i'm referring to because the database needs to know what is the specific part that i'm wanting to update okay so obviously it's from my database somewhere so i use db to say yep let's get the database and within that again it's the string capital edit people and forward slash plus and then just the same as we did before it's it's that enter id part of you know the html dot value now let me just explain this if someone's going to update what they're going to do is they're going to need to name we need to put the id that they want to update in their first so before anyone clicks this update button which calls the update function that i'm writing now we need to have something in this field here because we need to tell the database exactly which part of it we want to update so that's what's happening here whatever is in that inter id input field the value of that whatever the number of the person is that they've typed in that's the part of the database that we're going to update okay so we're using the ref method to say yep the specific reference for the particular part of the database that we want to update um okay and then a comma and then we've actually got our block of code here so this is what we want to do we want to get the name you know if someone's typed in a new name they're going to put it into that enter name input field and again we want to grab the value so dot value so enter name dot value comma and let's have age um with a colon and again we're grabbing the enter age input field and grabbing the value of whatever the person has typed in there okay all right so once that's done it means that we should at least we know the part of the database that we want to update and we know the values of what we want to update them with but uh we need that success message so hopefully it's gone through the database and updated it but we're gonna go dot then um and use that method and then we're gonna use our arrow function so the empty parentheses and then the arrow and then our block of code and what we're going to want to have is our alert which let's make this one say data updated successfully and let's let's throw that exclamation mark in there because we need to feel good um if it doesn't work um semicolon don't forget um we're going to use the dot catch function one more time and then we're familiar with this now we've done it before we've got our arrow function here and the code that will run if there is an error is an alert that will show that error so we put the error in here as a as a parameter and if there is an error it's going to show it as the alert hopefully all right it's semicolon that as well why not actually semicolon that as well so it's you just got to throw the semicolons in there with javascript okay so let's save that and let's see if this works hopefully it does i'll refresh my browser here so i'm going to come to my um id up here i'm going to say okay oh one it was mr patterson but i'm gonna make i'm gonna call myself james from now on and maybe i'm you know what maybe i'm actually 23. okay so now i'm going to click update and it yay data updated successfully with a question with an exclamation point to give me extra endorphins but now let's test this out over here so now if i type in one and click find um yep it actually finds it from the database i can also check that out here in firebase in fact it's already updated there so you can see that person number 01 it's updated to be james with the age 23 so that's gone straight to my firebase database so you know that's what's happening when i enter these things in and click these buttons it's actually sending that data to my firebase database so that's awesome and there's just one thing now that's left to do and that is to write my function for removing the data and once again thanks to firebase we've got these built-in methods so remove and that's what it's going to do it's going to remove the data from my database once again exactly the same thing though we need us we need a specific reference for the the part of the database that we're wanting to remove so we we make this we call this room reference function um and what is it that we are what is the reference well it's from my database so db and then comma once again we've got this you know it's the people forward slash don't forget the capital letter um plus and once again we would expect them to have typed something into that enter id input field remember i've made the variable name for the for that input field where they enter the id um but dot value because it's the value of whatever they type in there that counts okay we'll use our dot then function again so dot then and inside that once more we will have our arrow function and the block of code will be our success message so again that's just going to be an alert that says well this one will say data removed successfully okay um semicolon on that one and then once again in case it doesn't work we'll just have dot catch um method and then um we'll pass in the parameter the error sorry as a parameter and then um our arrow function um and our block of code which again will just be an alert that will show us what the error is hopefully there aren't any errors but that should cover us if there are always important and we'll semicolon that why not okay so i'm going to save this and once again let's check that that works so refresh my browser and i'm actually going to delete myself so o1 i don't need to type in anything else it should know what i mean with that 01 id i click remove and nothing happens oh no i was so close to getting to the end here but what is going on i'm going to inspect the console into id is not defined but i thought i defined it i thought i defined enter id but of course when i defined enter id i used a capital d and down here i i have set into id with a lowercase d so javascript um it needs everything you know to be exactly the same so into id that's the name of my variable and i i essentially spelt it wrong so it needs a capital d there so right so let me save that and refresh and let's do that again let's get rid of this okay so i'm going to try and delete myself again one is the id i click remove now it says data removed successfully and if i try and find the o1 id um it says no data found because i'm gone i'm not there anymore and i can confirm that with um you know if i go into firebase it's gone it's not there anymore but no worries i can always put myself back you know i'm going to call myself john this time and i'm i'll be in the middle i'll be 22 this time i'll insert that data that's there and so now if i try and find one it will find john and i am 22. all right so there's basic functions of using an html page that's connected to a firebase database obviously what you can do from now on is you can take you know this simple starting point and use it to create your own web pages that are connected to a database and do all sorts of other things with it so have some fun be creative use these skills and do all sorts of awesome things

Channel: Keith Paterson

Views: 32,334

Keywords: Javascript, Firebase, Database, CRUD, HTML, user input, connect to database, vanilla javascript, JS

Id: _p4Hgzm_oNQ

Length: 60min 31sec (3631 seconds)

Published: Fri Jul 15 2022