Dheeraj Yadav
How to upload data in firebase real time database using JavaScript
Hey guys firstly create a new project in your firebase panel and take out firebase configurations and put the copied in the given code as per code.
<html>
<head>
<title>upload data to firebase</title>
</head>
<body>
<center>
<h2>name:</h2>
<input type="text" id="name" required="required"><br>
<h2>Gender:</h2>
<input type="text" id="gender" required="required"><br>
<h2>Country:</h2>
<input type="text" id="country" required="required"><br>
<button type="button" onclick="insert();">Upload</button>
</center>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBK-juZ6krPJCHHELQgOW9sFUXsS9h3wHI",
authDomain: "fir-web-b823f.firebaseapp.com",
databaseURL: "https://fir-web-b823f.firebaseio.com",
projectId: "fir-web-b823f",
storageBucket: "fir-web-b823f.appspot.com",
messagingSenderId: "463332404757",
appId: "1:463332404757:web:68d04d3fdeeb333f"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script>
function insert() {
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
var country=document.getElementById("country").value;
//pre built function to upload data to firebase
//path where your data will be stored
firebase.database().ref('user/'+name).set({
userName: name,
userGender: gender,
userCountry: country
});
}
</script>
</body>
</html>In this code we are uploading tree details from the user side to the firebase Realtime database and kindly paste your own configuration to work with your account
In order to increase or decrease the data fields you can edit the code as per your demand guys.
we are storing the data in userName , userGender, userCountry from the input boxes.
you can create such more data variable to store more values.
How to retrieve data from firebase real time database using JavaScript
so we are here going to retrieve data from firebase in our frontend code given below
<html>
<head>
<title>Retrieve data</title>
</head>
<body>
<center>
<h2>Enter name of user to get information</h2>
<input type="text" id="user" required="required"><br>
<button type="button" onclick="getdata();">Get</button>
</center>
<center>
<p>Name: <strong id="name"></strong></p>
<p>Gender: <strong id="gender"></strong></p>
<p>Country: <strong id="country"></strong></p>
</center>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBK-juZ6krPJCHHELQgOW9sFUXsS9h3wHI",
authDomain: "fir-web-b823f.firebaseapp.com",
databaseURL: "https://fir-web-b823f.firebaseio.com",
projectId: "fir-web-b823f",
storageBucket: "fir-web-b823f.appspot.com",
messagingSenderId: "463332404757",
appId: "1:463332404757:web:68d04d3fdeeb333f"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script>
function getdata() {
var user=document.getElementById("user").value;
//firebase data retrieval function
//path of your data
//.once will get all your data in one time
firebase.database().ref('user/'+user).once('value').then(function (snapshot) {
//here we will get data
//enter your field name
var name=snapshot.val().userName;
var gender=snapshot.val().userGender;
var country=snapshot.val().userCountry;
//now we have data in variables
//now show them in our html
document.getElementById("name").innerHTML=name;
document.getElementById("gender").innerHTML=gender;
document.getElementById("country").innerHTML=country;
})
}
</script>
</body>
</html>Here is the above code to retrieve the data from the firebase real time database you can change the code as per your demands.
Note: Please change the firebase configuration code before applying the code .
