logo
Blog single photo

Firebase Realtime Database - Add and Retrieving Data


                        

index.html


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Page Title</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-analytics.js"></script>
<script>
  var firebaseConfig =
  {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

<script>
  var database = firebase.database();

  function writeUserData() {
  var msg =$("#nnn").val();
  alert(msg);
  firebase.database().ref().set({
    Msg: msg
  });
}
</script>

<input type="text" id="nnn">
<input type="submit" onclick="writeUserData()">


</body>
</html>


index2.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Page Title</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-analytics.js"></script>
<script>

</script>
<h1 id="bigText"></h1>
<script>
 

  (function() {
  const config = {
    apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""

  };

  firebase.initializeApp(config);
  const bigText = document.getElementById('bigText');
  const dbRef = firebase.database().ref().child('Msg');
  dbRef.on('value', snap => bigText.innerText = snap.val());

 
 
}());
</script>
</body>
</html>

Top