0% found this document useful (0 votes)

19 views

8 Dbms

Uploaded by

chaitanyachopde14

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

19 views

8 Dbms

Uploaded by

chaitanyachopde14

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 16

Database Management System Lab (PCCCS405P)

S. B. JAIN INSTITUTE OF TECHNOLOGY,

MANAGEMENT & RESEARCH, NAGPUR.

Practical No. 8
Aim: Design a Student registration form using HTML and connect it
with Firebase to add and retrieve data from firebase database.

Name of Student:
Roll No.:
Semester/Year:
Academic Session:
Date of Performance:
Date of Submission:

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)

AIM: Design a Student registration form using HTML and connect it with Firebase to add and
retrieve data from firebase database.

OBJECTIVE/EXPECTED LEARNING OUTCOME:

The objectives and expected learning outcome of this practical are:

∙ Handling Form Submission with HTML

∙ Connecting Realtime Database to the Registration Form using Firebase.

THEORY:
What is Firebase?
Firebase is a Backend-as-a-Service (Baas). It provides developers with a variety of tools and
services to help them develop quality apps, grow their user base, and earn profit. It is built on
Google’s infrastructure.
Firebase is categorized as a NoSQL database program, which stores data in JSON-like documents.
In Firebase, a document is a set of key-value pairs defined by a schema. A group of documents makes up a
collection.

Key Features of Firebase:

1. Authentication
It supports authentication using passwords, phone numbers, Google, Facebook, Twitter, and more.
The Firebase Authentication (SDK) can be used to manually integrate one or more sign-in
methods into an app.

2. Realtime database
Data is synced across all clients in realtime and remains available even when an app goes
offline.

3. Hosting
Firebase Hosting provides fast hosting for a web app; content is cached into content delivery
networks worldwide.

4. Test lab
The application is tested on virtual and physical devices located in Google’s data
centers.

5. Notifications
Notifications can be sent with firebase with no additional coding.

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)

Creating form in HTML:

Registration forms, which help with the collection of data, are essential components of web
applications. To create our registration form, we will not use any CSS frameworks like Bootstrap,
Tailwind CSS, or the like. Our registration form is going to be built from scratch, and it is also
going to be responsive. Here, we will make use of HTML5 and CSS to create and design the
registration form. Follow the steps given below:
 Create HTML template for registration form.
 Add CSS for design and responsiveness
 Connect form to Javascript
 Connect Firebase Realtime Database to Registration Form

Sample Html Template for Registration Form :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Registration Form</title>
</head>

<body>
<form action="" method="POST" id="registrationform">
<h1>Register</h1>
<div class="alert">Message Sent</div>

<fieldset>

<legend><span class="section">1</span>Your Basic Info</legend>

<label class="" for="name">Name:</label>

<label class="" for="email">Email:</label>

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)
<label for="password">password:</label>
<input type="password" name="password" value="" id="password" required
/> </fieldset>

<fieldset>

<legend><span class="section">2</span>Profile</legend>

<label class="" for="bio">Bio:</label>

<label for="job">Job Role:</label>

<optgroup label="Web">
<option value="front_end_developer" id="frontend">Frontend Developer</option>
<option value="back_end_developer" id="backend">Backend Developer</option>
<option value="fullstack_developer" id="fullstack">Fullstack Developer</option>
</optgroup>

<optgroup label="Mobile">
<option value="android" id="android">Android</option>
<option value="ionic" id="ionic">Ionic</option>
<option value="phonegap" id="phonegap">PhoneGap</option>
</optgroup>

</select>
<br /><br />
<label>Interest:</label>

<select id="interest" required>

<option value="development">Development</option>
<option value="design">Design</option>
<option value="business">Business</option>
</select>
<button type="submit" sendMessage()>Register</button>
</form>
<script
src="https://www.gstatic.com/firebasejs/5.10.0/firebase.js"></script>
<script src="app.js"></script>
</body>

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)
Upload file to Firebase Storage as a Form data :
Many times we need to upload files to some storage system using multipart/form-data as an
HTTP request body. And that could be the best way to upload files to any Cloud storage or server.

Let's see how we can do that using NodeJS and Firebase storage:-

Step 1: Firebase Account setup and enabled Firebase Storage.

Step 2: Make the Firebase storage publicly accessible.
Step 3: Save and keep google config (help to connect Firebase from NodeJS)
Step 4: Now create a NodeJS & TypeScript application.
Step 5: Configure Route path, Multer, and Firebase

CODE:

#<index.html>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registeration Page | Firebase</title>
<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase.js"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container">
<div class="alert">Your message sent</div>
<div class="inputBox">
<input type="text" name="fullname" id="fullname" placeholder="Full Name" />
</div>
<div class="inputBox">

<input type="text" name="Rollno" id="Rollno" placeholder="Rollno" />

</div>
<div class="inputBox">
<input type="text" name="coursename" id="coursename" placeholder="Course name" />
</div>
<div class="inputBox">
<input type="text" name="gender" id="gender" placeholder="Gender" />
</div>
<div class="inputBox">
<input type="text" name="phone" id="phone" placeholder="Phone no "/>
</div>
<div class="inputBox">
<input type="email" id="email" name="email" placeholder="Email ID" required/>

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)
</div>
<div class="inputBox">
<textarea id="address" cols="30" rows="10" placeholder="Address Type
here..."></textarea>
</div>
<div class="inputBox">
<button type="submit" id="submit">Submit</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/7.14.1-0/firebase.js"></script>
<script src="./mail.js"></script>
</body>
</html>

#<Styles.css>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.container{
width: 90%;
height: 80vh;
padding: 20px;
border-radius: 20px;
box-shadow: 0px 5px 25px rgba(0,0,0,0.2);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
}

.container form{
width: 100%;
height: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
}

.inputBox{
width: 100%;

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)
margin: 10px 0;
border-radius: 5px;
overflow: hidden;
}

.inputBox input[type="text"], .inputBox input[type="email"]{

width: 100%;
height: 50px;
border-radius: 5px;
border: none;
outline: none;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.2);
padding: 0px 10px;
font-size: 16px;
color: #444;
}

.inputBox textarea{
width: 100%;
height: 120px;
border-radius: 5px;
border: none;
outline: none;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.2);
padding: 0px 10px;
font-size: 16px;
color: #444;
}

.inputBox button{
width: 100%;
padding: 10px 20px;
border: none;
outline: none;
background: rgb(0, 119, 255);
color: #FFF;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}

.inputBox button:hover{
background: rgb(0, 17, 255);
transition: all 0.3s ease;
}

::placeholder{
font-size: 16px;
}

.alert{
Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur
Database Management System Lab (PCCCS405P)
width: 100%;
background: rgb(0, 255, 106);
padding: 10px 20px;
border-radius: 5px;
text-align: center;
font-size: 18px;
font-weight: 900;
display: none;
}

#<mail.js>
const firebaseConfig = {
apiKey: "AIzaSyDq9ia2DovYCY6TgDag6yapGGJuGKuCZd0",
authDomain: "dbms-project-43d5a.firebaseapp.com",
databaseURL: "https://dbms-project-43d5a-default-rtdb.firebaseio.com",
projectId: "dbms-project-43d5a",
storageBucket: "dbms-project-43d5a.appspot.com",
messagingSenderId: "239762829158",
appId: "1:239762829158:web:fe77ad7bea2e95e7e0a2a7",
measurementId: "G-Y7PHMHMFY9"
};
// initialize firebase
firebase.initializeApp(firebaseConfig);

// Declaring variables
var afullnamev, Rollnov, coursenamev, genderv, phonev, emailv, addressv;

// Reading form variables

function readFormVar() {
afullnamev = document.getElementById("fullname").value;
Rollnov = document.getElementById("Rollno").value;
coursenamev = document.getElementById("coursename").value;
genderv = document.getElementById("gender").value;
phonev = document.getElementById("phone").value;
emailv = document.getElementById("email").value;
addressv = document.getElementById("address").value;
};

// Saving data in Firebase

function submitForm() {
// Read form variables
readFormVar();

var emailCheck = emailv;

// Validating email pattern
var pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (pattern.test(emailCheck)) {
// Save data to Firebase
firebase.database().ref('/student/' + afullnamev).set({
a Full_name: afullnamev,
b Roll_no: Rollnov,
c Course_name: coursenamev,
d Gender: genderv,
Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur
Database Management System Lab (PCCCS405P)
e Phone_no:
phonev, f Email:
emailv,
g Address: addressv,
});
alert("Email is valid, Data Inserted");
} else {
alert("Please enter a valid email address, data is not inserted");
// Email is invalid, display error message
}
}
// Get reference to button
var btn = document.getElementById("submit");

// Add event listener for the button, for action

"click" btn.addEventListener("click", submitForm);

SCREENSHOT:

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)

Department of Computer Science and Engineering (CSE), S.B.J.I.T.M.R., Nagpur

Database Management System Lab (PCCCS405P)

CONCLUSION:

I have successfully understood how to design a student registration form using HTML and
connect it with Firebase to add and retrieve data from the Firebase database.

DISCUSSION QUESTIONS:
Q. 1) What is Firebase?
Q. 2) What are some of the advantages of Firebase?
Q. 3) What does FCM and GCM stand for?
Q. 4) What are the Firebase events?
Q. 5) What are the filtering methods in Firebase?
Q.6) What is the difference between Firebase and MongoDB?

REFERENCE:

∙ http://sage.virtual-labs.ac.in/home/pub/1/
∙ http://www.nptelvideos.in/2012/11/database-management-
system.html ∙ www.w3schools.com/sql
∙ SRM university DBMS Lab manual.
∙ OCA Oracle database 11G SQL Fundamentals1 Exam Guide by John watson.