Introductions

`What is JavaScript?`

JavaScript is also used for building full-stack web applications, mobile apps, and even desktop applications using technologies like Electron. It has a vast ecosystem of libraries, frameworks, and tools that make it a versatile and powerful language for building all kinds of web-based applications.

How can we connect JavaScript with HTML file

There are two types to connect your JavaSCript with your HTML.

In the first method, you can use simple <script> tags inside HTML tags for example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

</body>
<script>
console.log("HELLO WORLD")
</script>
</html>

In the second method, You can use an external JS file to connect it with HTML. using

<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

</body>
<script src="filename">
</script>
</html>

`What is a Database?`

For websites, databases are used to store and manage the data associated with the website, such as user information, content, and settings. Some common examples of databases used for websites include:

Type of Database

MySQL
MongoDB
Firebase Realtime Database
PostgreSQL

`Firebase Realtime Database`

This is a cloud-hosted NoSQL database that is designed for real-time applications, such as chat apps and collaborative tools. It is known for its low-latency data synchronization and ease of use.

To start with Firebase you need to create an account at Firebase.

After creating an account you need to create a project and name it. After that you need to copy the CDN to copy CDN goto Project Overview > General scroll down and you will be able to see the following options.

This is My CDN.

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.21.0/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.21.0/firebase-analytics.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyCZw44EU90AY7qC5fiD6nnGqSZGmHeVmqg",
    authDomain: "login-6e5c8.firebaseapp.com",
    databaseURL: "https://login-6e5c8-default-rtdb.firebaseio.com",
    projectId: "login-6e5c8",
    storageBucket: "login-6e5c8.appspot.com",
    messagingSenderId: "107236860658",
    appId: "1:107236860658:web:e186bbbe541cb90468666b",
    measurementId: "G-LP3SCJTYK0"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
</script>

`Saving Data in Firebase`

In order to save/get/delete data you need to import some functions as well as database ref from the database you can do it by using the following commands.

Now to save data in Firebase you need to create a function. I will name the function saveData()

This function will save data in Database. This function will create a folder inside dataBase called "UserList" and Inside it, it will create another folder which will be given by the user i.e Username. Then it will store three Entities Username, Email and password.

`Fetching Data from DataBase`

Now in the following function we are fetching data from Firebase. This fuction have if and else condition. It will show "Data found" in console if there data exists else "no data found" in console log.

How to Connect your project with Firebase Database Using JavaScript.

By Hamza Shaukat

Table of contents