Hey, just wanted to thank you so much for making these tutorials they are an absolute life saver. And I mean i can't express how useful and how much they have helped me. Thanks
Tried to find a solution of firebase, and you made the exact tutorial. Saw a lot of tutorials on youtube, but first time commenting thanks to someone. Thank you man. Keep it up with professionality.
such a handy tutorial. I think you want to specify text when you set values in the document elements, and also to normalize the data, you can use the rollcall as the studentnumber, and the unique ID of the record and you don't need to reuse it in the data itself. We made the same mistake on user profile GUIDs, and now we use those as the lookup number, following proper database normalization theory (Chris Brown, University of Manitoba). Thanks for the tutorial, it is, again, so handy and needed. Subscribed.
Thank you very much, this is really useful. You've demonstrated how hassle free this is :) Just to share a thought. If you give each input a name property that matches the database's corresponding property and wrap them in a form element, then in your JS you can use a 'formData' object instead of searching the document with Ready() each time. So something like set( Object.fromEntries( new FormData( yourFormElementHere ) ) ) Object.fromEntries will automatically return an object with all your form inputs as name: value pairs ready to go. Just thought I would share, and thanks again :)
Can you make tutorial on storing the form data in firebase of the live website?? Suppose i have a website hosted in firebase and i have a contact pg in it...So if a user fills the contact form and click on submit, that data needs to go the firebase database where i can view later...
This tutorial amazing no wasting time in styling and all the shit just, what is needed to be done thanks for giving knowledge, and thanks for saving our time😁.
actually the firebase object is not defined by us but it is found inside the libraries used above. it is must that all three library have the same version. version 9 is not supported by this mehtod, read the pinned comment for more info.
hello brother. first of all kudos to your explanation, I appreciate that. I have no idea about this firebase and all, then found your video, need a small help...while inserting, its not getting inserted in new line, instead it is getting replaced, can you please resolve this issue..
Can anyone help me with my project . I made a note webapp The problem is I store my notes on firebase with all proper indentation and space. And when I retrieve it to edit it just forgets all indentation and gives me everything as one paragraph.
Man I need your help , I am trying to calculate prices from an array I created which gets all data from firebase into it like in the example below it only works if I create a simple array and add pre values keys but from firebase it does not count the total value u need to get all value sum of prices as a total like below var array = new Array() array.push(snap.child('/').val()) var sum = 0; for (i = 0;i
I wrote the same code till insert, I am getting the following error: Uncaught TypeError: firebase.database is not a function. Can you pls help. My version is 8.4.2
@@HassaanRaza THere is an error. plants.html:71 Uncaught ReferenceError: plant is not defined at HTMLButtonElement.document.getElementById.onclick (plants.html:71) document.getElementById.onclick @ plants.html:71
@@HassaanRaza SO I am trying to make something like this. User will have a input box and have to enter how many plants theyy planted, and then we will tell them how many plants are planted after adding all users input So like I am a user and I entered 3 as a number and after few days or weeks or years you entered 2 so the computer will add 3 + 2 and give result as 5 plants planted
@@HassaanRaza it is exact same. EXACT SAME. i always try but firebase doesn't work I followed your steps exactly , still not working. :( I know this might sound silly, but in vs code, in my mac, firebase is not coming in yellow colors like yours, hehe . please help
Thanks for your video it is the only one that worked for me. But I need the data to go to my Firestore bucket not the Realtime Database. How do I do that?
Also Watch: Get & Show All Firebase Data: ua-cam.com/video/O4N7yfaJYhI/v-deo.html Upload image on Firebase Storage: ua-cam.com/video/ZH-PnY-JGBU/v-deo.html
Hello. Thanks for this simplified and detailed tutorial. I have a form with select tags in it. Can you please show the codes to use that as project bucket or tag in firebase. Or if this cannot be done then how to get a selected item into a textbox. Thanks again.
@@HassaanRaza I have a drop-down menu (select tag) from which user can pick an option. I want to get that value and save it in firebase along with other text boxes that I have in my form.
@@HassaanRaza It has been solved actually I was using push so I replaced it with set to get rid of those extra keys but thank you so much for replaying.
This is a really nice video with detailed explanation of the working. But I'm having troublw withe the select code where you enter the roll no and we get the other details of the student.
Great tutorial..Kudos...Thank you for such a great tutorial to under stand firbase. it is really very handy for the beginners like me. could you please make similar video on tracking events in html.
@@HassaanRaza I want data in some specific field by not entering anything (like you entered roll number to recognize), just to get data from firebase in an input field
this is not 'fixing a bug video' where you say not working for me, javascript is same for everyone. try debugging your code. if you know what the error is, i may be able to help you.
the code i taught is perfectly fine, you might be mastekin somewhere... if there is an error in javascript it usually stop the script at the error line but sometimes does not even show the error, its usally when you do syntax error. come at my fb page with screenshot of where you think error prevails we will try to fix it.
Your video is great!!! How do we get this to work with the current version of Firebase, which is 8.7.1. I tried this method, but for some reason, I'm unable to get it to work. (NEVER MIND. SEE REPLY)
@@veerab907 of course it is possible, where i did the part where i added the list items with javascript you have to create a table and add items to a table.
Thanks, but find data i think should be something like this: firebase.database().ref('student/' + msg.data.number).once('value').then(function (snapshot) {
Hi, tx for this nice tutorial ! How can I do if I want to display all the informations from firebase inside the webpage in JS ? I Did this function : function loadBody () { const database = firebase.database() const ref = database.ref('users') ref.on('value', function (snapshot) { snapshot.forEach(function (childSnapshot) { const name = [childSnapshot.val().NameA] const type = [childSnapshot.val().TypeA] console.log(name, type) }) }) } I don't know how to display datas outside the function with an ID and how to apply on the index.html. If my explanation isn't very clear, The function on the top gives me the name and the type of all users added in firebase. My objectif is to take this two informations and associate an ID to apply in my position defined in my index.html. Maybe i should use an API ? I don't know if you can help me to do it but thanks in advance :)
after you have defined const type.. and before console.log(name,type) define a var id = GedIDFunction(); then console.log(id,name,type) and define the getidfunction outside of these paranthesis somewhere in the script. if you want to generate id through firebase its not possible (that i know of) so do it in JavaScript either before saving the data on firebase or when retrieving data whatever suits you.
@@HassaanRaza Hey tx for your reply ! If i've a good understand is it good if I do it like that : var name = document.getElementById('nameuser').value = childSnapshot.val().NameA var type = document.getElementById('typeuser').value = childSnapshot.val().TypeA inside of my html I create 2 differents div with an ID 'nameuser' and another one div with 'typeuser' id . Console log(name, type) works and show me the users but nothing display in the index.html (when I load the page) thanks again for your help ;)
there should not be more than one item with the same id ! and you are saying nothing is displayed on the page you are using console.log this is used just for testing purpose (for developers) it does not show anything on the frontend, its only to show something on the console.
Attention:
This video is valid for firebase Library upto version 8.0.
so for this method to work (use below libraries):
current firebase version is 9.1.0.
New Video for Firebase version 9.x.x :
ua-cam.com/video/BOITPwChVP4/v-deo.html
ohhh please!!!! I'm stuck in this 9.1.0 version for 3 days now. Still no solution. Please make it quick. Thanks in advance.
@@sajanakavindawickramarathn7199 working on it, it will be released within 2 days probably.
@@HassaanRaza wow. nice to hear that. Thanks a lot.
@@HassaanRaza Please Release It As Iam Getting Many Issues
you'll see it in about 7 hours from now.
Hey, just wanted to thank you so much for making these tutorials they are an absolute life saver. And I mean i can't express how useful and how much they have helped me.
Thanks
Best video related to firebase! Keep it up
Wow. I have been looking for so long for a normal and understandable tutorial. Thank you so much!
so glad to hear this, i noticed there are no good tutorial on this, so made one.
Mashaallaah!!!! Bohot hi simple tha jo ki ek Absolute beginner ki zarurat hai .....
Thank you very much. I realized I can interact with firebase's database without running as server
At 5:34 on line 44, I'm getting an error,
TypeError: document.getElementbyId is not a function
Corrected: document.getElementById
(notice the capital B).
Finally!!! Thank you so much!!! this really helped me and saved me a lot of time!!! I have been searching for years.
its great video is helping so many and is growing so fast.
Years????
@@HassaanRaza So much thank you...😊😊really a very helpful video....
Tried to find a solution of firebase, and you made the exact tutorial. Saw a lot of tutorials on youtube, but first time commenting thanks to someone. Thank you man. Keep it up with professionality.
thanks for commenting brother, means alot.
Thank you so much !! Your tutorials save my life!!!
Wishing you good health and happiness always!
thank you so much for the prayers :)
just what i need in my project
thanks bro less talk on point
Great, this actually worked!!! Tried many other tutorials and they didn't work. Thanks !!!
yeah i noticed that there were no good tutorials on this topic and he google docs are a mess 😀 so im glad its helpful.
taking a software dev course for a job right now and this video helped me immensely on a project. thank you for the help bro
that is superb!
how to make index number represent automatically the db node number not just a random number we input ?
There is a problem my database is only showing null like what happened here 7:46
such a handy tutorial. I think you want to specify text when you set values in the document elements, and also to normalize the data, you can use the rollcall as the studentnumber, and the unique ID of the record and you don't need to reuse it in the data itself. We made the same mistake on user profile GUIDs, and now we use those as the lookup number, following proper database normalization theory (Chris Brown, University of Manitoba). Thanks for the tutorial, it is, again, so handy and needed. Subscribed.
Where to get MainScript? a lilttle bit i didnt understand wher to get it.
i just wrote the name as mainScript
we are not getting the mainscript
the code inside here is the
mainscript code
Thanks. I have been searching for along time about this.
This tutorial was on point, you are a boss. thank yoU!
One Suggestion: For arranging (indenting your code) press: Alt+Shift+F on VS code
Nice
Keep making more videos
hi,how can i fetch only the last inserted value to the database and display it on the webpage
You would have to convert. snapshot.val() to an array. Then grab the last index. This tutorial could help: ua-cam.com/video/GPCjffQex-M/v-deo.html
Thank you very much, this is really useful. You've demonstrated how hassle free this is :)
Just to share a thought.
If you give each input a name property that matches the database's corresponding property and wrap them in a form element, then in your JS you can use a 'formData' object instead of searching the document with Ready() each time.
So something like set( Object.fromEntries( new FormData( yourFormElementHere ) ) )
Object.fromEntries will automatically return an object with all your form inputs as name: value pairs ready to go.
Just thought I would share, and thanks again :)
Can you make tutorial on storing the form data in firebase of the live website?? Suppose i have a website hosted in firebase and i have a contact pg in it...So if a user fills the contact form and click on submit, that data needs to go the firebase database where i can view later...
This tutorial amazing no wasting time in styling and all the shit just, what is needed to be done thanks for giving knowledge, and thanks for saving our time😁.
thank you for commenting.
Can you help me? I have done everything as you did but my database is not inserting data..How can I fix this issue..It did insert data once..
Hello sorry I've got a problem ! I'va had an error in my console. 'firebase is not defined'. Would you please help me ?
Is it because Firebase version is 9.x.x ? How can I resolve it ?
new video will come for the 9.x.x versions.
for now use any version 8.x.x.
@@HassaanRaza Thank you ! I can use firebase 8 ? How ? Please
use these:
Thank u sooo muchh bro, u really help me with my task🔥
Thank you very much sir, It's my first time creating a database and this was a lot of fun, and a lot of very useful learning, greetings from Brazil
that's great! have a great year of learning.
Straight to the point! Great video!
lit 🔥🔥🔥🔥🔥🔥 Cleared all my points... Thanks a lottttt
thanks for commenting!
so this mean source code is visible and could be mised used.... any way to hide the firebase config??
i got error
I am getting "firebase is not defined" error message for Line 31. Where in your code are you defining firebase?
actually the firebase object is not defined by us but it is found inside the libraries used above.
it is must that all three library have the same version.
version 9 is not supported by this mehtod, read the pinned comment for more info.
Nevermind, I found the updated video: ua-cam.com/video/BOITPwChVP4/v-deo.html
Thank you!! the simplest video ive ever seen
its nice of you to say that.
Great tutorial!! Thank you!!
very nice concept...do u have other conceot videos of firebase with js apart from these ...any project..and react native platform??
no haven't worked on react.
Works perfectly ,, saved me a lot of time!!
Thank you very much :)
sir agar hame insert kiya huva data android pe show karna ho to vo kaise kare
how can we do it for signed in user . I am making a note website. Please help
hello brother. first of all kudos to your explanation, I appreciate that. I have no idea about this firebase and all, then found your video, need a small help...while inserting, its not getting inserted in new line, instead it is getting replaced, can you please resolve this issue..
i don't get your question, can you explain more
it's easy and it works , thanks you !
Can anyone help me with my project . I made a note webapp The problem is I store my notes on firebase with all proper indentation and space. And when I retrieve it to edit it just forgets all indentation and gives me everything as one paragraph.
even me.......
Man I need your help , I am trying to calculate prices from an array I created which gets all data from firebase into it like in the example below it only works if I create a simple array and add pre values keys but from firebase it does not count the total value u need to get all value sum of prices as a total like below
var array = new Array()
array.push(snap.child('/').val())
var sum = 0;
for (i = 0;i
show me your code screenshot on my fb page facebook.com/TheGreatWarHero/
I wrote the same code till insert, I am getting the following error: Uncaught TypeError: firebase.database is not a function. Can you pls help. My version is 8.4.2
send me screenshot of your code at my fb page.
Thanks a lot man, this was a nice tutorial.
If u put the firebase API key on the web. Then anyone can access the API data??
my database??
yes anyone can inspect the page and get it, its just that this is a basic tutorial so securing the config info is not part of it.
Thank you so much!
It works well for me i really appreciate it, no wonder why this video has 0 dislikes
Keep up the amazing work!
thanks man :)
steam wallpaper engine
THE WEBSITE WONT CONNECT WITH THE FIREBASE DATABASE
this video works for firebase version 7 or 8,
for version 9
ua-cam.com/play/PLrb70iTVZjZMQGywkJ8nsXG7_ZyHc_rAV.html
Hey Bro, I am trying to insert data but not inserting it into the database.
Did you set up your Firebase config? Maybe try this tutorial. It could help you out. ua-cam.com/video/GPCjffQex-M/v-deo.html
Nice tutorial
Just add event to get updated data when done by other sources
Also share source code
I tried same code but the database is not changing according to this. Can you say how should I solve it?
inspect your javascript during runtime (check what causing the javascript to not execute) generally that is the problem.
@@HassaanRaza THere is an error. plants.html:71 Uncaught ReferenceError: plant is not defined
at HTMLButtonElement.document.getElementById.onclick (plants.html:71)
document.getElementById.onclick @ plants.html:71
@@HassaanRaza SO I am trying to make something like this. User will have a input box and have to enter how many plants theyy planted, and then we will tell them how many plants are planted after adding all users input
So like I am a user and I entered 3 as a number
and after few days or weeks or years you entered 2 so the computer will add 3 + 2 and give result as 5 plants planted
facebook.com/TheGreatWarHero/
i need to see the screenshot to help, of js file where you are doing these stuff
@@HassaanRaza I sent
what about firestore?
ua-cam.com/video/Ck0eyJoWPgg/v-deo.html
Really Helpful, But w how to add progress bar when data is faching..??
And Show No result Found error message
I did exaclty what you did, still not working....:(
JavaScript can get annoying pretty fast, search for the line where you have mistaken.
track where the bug is.
@@HassaanRaza it is exact same. EXACT SAME. i always try but firebase doesn't work I followed your steps exactly , still not working. :( I know this might sound silly, but in vs code, in my mac, firebase is not coming in yellow colors like yours, hehe . please help
add this script
don't know why but mine is not working I tried hol day
tried houres and hours sitting in front of the screen checking every word from 9am to 10:17pm I am tired
Can you plz update the code of your gitrespository
Bro can you also add the display of data in a grid format
Thanks man.. Vary helpful!
So clear and detailed tutorial thanks a lot;
Thanks for your video it is the only one that worked for me. But I need the data to go to my Firestore bucket not the Realtime Database. How do I do that?
this is the video for using firestore database
ua-cam.com/video/Ck0eyJoWPgg/v-deo.html
@@HassaanRaza thank you very much
Also Watch:
Get & Show All Firebase Data:
ua-cam.com/video/O4N7yfaJYhI/v-deo.html
Upload image on Firebase Storage:
ua-cam.com/video/ZH-PnY-JGBU/v-deo.html
Sir my version is 8.0.0 how can i download library for this
Please tell me
codepen.io/TACV/pen/oNbomYM
just changed the version to 8.0.0 on all scripts.
@@HassaanRaza Thankyou sir
Hello. Thanks for this simplified and detailed tutorial.
I have a form with select tags in it. Can you please show the codes to use that as project bucket or tag in firebase. Or if this cannot be done then how to get a selected item into a textbox.
Thanks again.
i don't understand, thats what i have shown in the tutorial.. get values into the textbox?
@@HassaanRaza
I have a drop-down menu (select tag) from which user can pick an option. I want to get that value and save it in firebase along with other text boxes that I have in my form.
@@idiotsinaccidents
var drop = document.getElementById("selectID");
var selectedIndex = drop.options[drop.selectedIndex].text;
alert(selectedIndex);
@@HassaanRaza Great thanks! I have zero coding knowlegde so this is huge help for me!
A beginner tutorial that never exist except here
that's why i made it, I'm so glad its helping thousands of developers
Thanks a lot for this, you are awesome TACV
its good to know so many are talking advantage of this tutorial, thanks for all the love.
How your keys aren't getting generated while inserting data into realtime database? Is there any way to stop those keys? Let me know.
if you don't give a name to a document, an id is auto generated and your document is named after that id.
or are you talking about some other keys?
@@HassaanRaza It has been solved actually I was using push so I replaced it with set to get rid of those extra keys but thank you so much for replaying.
VERY NICE LOVE IT :-) and very-much thankyou ..
Thanks a lot, brother.❤❤ I went to make firebase counter like button .. how to make it ?
i did not understand what you want to do?
firebase counter button?
to count what?
@@HassaanRaza like button. when I click then increase the number one by one.
Thanks for the tutorial :-).
How to update live data?
8:36 if you use "on" then data will update live, (if you use "once", then data will come once).
thank you so much, You really helped me :)
its really nice to hear that.
This is a really nice video with detailed explanation of the working. But I'm having troublw withe the select code where you enter the roll no and we get the other details of the student.
what problem are you having?
@@HassaanRaza The select code is not running where in you put the roll no but name,section and gender are nit displayed.
@@18_shamikakarnik35 I need to see your code
facebook.com/TheGreatWarHero/
screenshots here
@@HassaanRaza Okay....I'll send you
This really help me. Many thanks to you
You're welcome!
Nice vidéo 👍
Useful video but no longer works. latest video would help as some configuration code seems to have changed. Keep getting error of firebase undefined.
it will work for firebase libraries version 8.x.x.
does not work with version 9 libraries new video will come soon
@@HassaanRaza I just figured that out. Thanks for the comment.
How to store data in folder??
in folder?
simply awesome ...you made my day
good to know
Great tutorial..Kudos...Thank you for such a great tutorial to under stand firbase. it is really very handy for the beginners like me.
could you please make similar video on tracking events in html.
i will see but can't be soon
Where can I get Code?
Can you please help in getting data in a disable text field from firebase database?
it same for disabled and enabled
@@HassaanRaza I want data in some specific field by not entering anything (like you entered roll number to recognize), just to get data from firebase in an input field
@@haadshakeel1384 facebook.com/TheGreatWarHero/
1) send some screenshot to explain what you want.
2) where did i put "roll no", but you dont want to.
Very straight thanks
Thank You Very Much Man You doing Great!
thanks for saying that :)
hello can you make a video about reading a Database on a table form?
you mean put firebase data in a html table?
@@HassaanRaza Yes with pagination if necessary :D
and with edit and delete every table
i hope you can make it...
I will try to make it during December.
thank you bro please make more video type of this
sure i do this all the time:
also look at the playlist:
FIREBASE JAVASCRIPT (English): ua-cam.com/play/PLrb70iTVZjZNYatuSv-4jREH2RYpzp5iu.html
not working for me also
this is not 'fixing a bug video' where you say not working for me, javascript is same for everyone.
try debugging your code.
if you know what the error is, i may be able to help you.
@@HassaanRaza i tried the same code to create another table but the table is not created
the code i taught is perfectly fine, you might be mastekin somewhere...
if there is an error in javascript it usually stop the script at the error line but sometimes does not even show the error, its usally when you do syntax error.
come at my fb page with screenshot of where you think error prevails we will try to fix it.
try with this
Your video is great!!! How do we get this to work with the current version of Firebase, which is 8.7.1. I tried this method, but for some reason, I'm unable to get it to work. (NEVER MIND. SEE REPLY)
That is so beautiful
How did you put a video desktop background
steam wallpaper engine.
@@HassaanRaza thanks
Good job bro, very good video
sir how to fetch full table details without mention values
ua-cam.com/play/PLrb70iTVZjZNYatuSv-4jREH2RYpzp5iu.html
3rd video does that.
@@HassaanRaza thank you sir it works... Is it possible to get all data's and view it in HTML table
@@veerab907 of course it is possible, where i did the part where i added the list items with javascript you have to create a table and add items to a table.
@@veerab907 i will create a tutorial about it possibly during this december.
@@HassaanRaza ok sir... Also show all content including image in same Row...
Thanks, awesome video, somehow my select function is not working
Thank you very much brother, It is working fine. I want this to host and see how it works. can you please show that
can you make video about rules firebase? how to hide Api key firebase, while the owner has the right to update data. tks!
yes i will make a video about firebase rules, but can't say it will too soon
Does it work in win 7 32 bit please tell
it should, the browser should be up to date, there is no limit of operating system.
Hye do you provide sourcecode
please share code.
Thanks, but find data i think should be something like this:
firebase.database().ref('student/' + msg.data.number).once('value').then(function (snapshot) {
bro mera error aa raha hai
Hi, tx for this nice tutorial !
How can I do if I want to display all the informations from firebase inside the webpage in JS ?
I Did this function :
function loadBody () {
const database = firebase.database()
const ref = database.ref('users')
ref.on('value', function (snapshot) {
snapshot.forEach(function (childSnapshot) {
const name = [childSnapshot.val().NameA]
const type = [childSnapshot.val().TypeA]
console.log(name, type)
})
})
}
I don't know how to display datas outside the function with an ID and how to apply on the index.html.
If my explanation isn't very clear, The function on the top gives me the name and the type of all users added in firebase.
My objectif is to take this two informations and associate an ID to apply in my position defined in my index.html.
Maybe i should use an API ?
I don't know if you can help me to do it but thanks in advance :)
after you have defined const type..
and before console.log(name,type)
define a var id = GedIDFunction();
then console.log(id,name,type)
and define the getidfunction outside of these paranthesis somewhere in the script.
if you want to generate id through firebase its not possible (that i know of) so do it in JavaScript either before saving the data on firebase or when retrieving data whatever suits you.
@@HassaanRaza Hey tx for your reply !
If i've a good understand is it good if I do it like that :
var name = document.getElementById('nameuser').value = childSnapshot.val().NameA
var type = document.getElementById('typeuser').value = childSnapshot.val().TypeA
inside of my html I create 2 differents div with an ID 'nameuser' and another one div with 'typeuser' id .
Console log(name, type) works and show me the users but nothing display in the index.html (when I load the page)
thanks again for your help ;)
there should not be more than one item with the same id !
and you are saying nothing is displayed on the page you are using console.log this is used just for testing purpose (for developers) it does not show anything on the frontend, its only to show something on the console.
you can have multiple elements with the same class if you want but fetching data from them is a little harder than just document.getelementbyid()