Nashik Gramin Shikshan Prasarak Mandal’s

BRAHMA VALLEY COLLEGE OF TECHNICAL

EDUCATION, ANJANERI, NASHIK Department

of Computer Technology

PROJECT WORK BOOK

YEAR 2024 -2025

Project Title: Building and testing registration and login page

Sr.No. Student Name Seat No. Enrollment No.

Avdhoot deshmuk
1 2207780021

Pratap Bhavale
2 2207780034

Vedant patil
3 23611480178

Project Guide: Prof. N.P. AHER

 MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION (MSBTE), MUMBAI

Brahma Valley College of Technical Education, Anjaneri, Nashik

Department of Computer Technology

2023-2024

A
Project Report
On
[Building and testing registration and login
page]
By
[Avdhoot Deshmukh ] [2207780021]

[Pratap Bhavale] [2207780034]

[Vedant Patil] [23611480178]

Under the guidance of

[Prof. N.P. AHER]

 Brahma Valley College of Technical
Education,
Anjaneri, Nashik

Department of Computer Technology

CERTIFICATE
This is to certify that

[Avdhoot Deshmukh]
[Pratap Bhavale]
[Vedant Patil]

have successfully completed their Project on “Building and testing registration

and login page” at Brahma Valley College of Technical Education, Anjaneri,
Nashik in the partial fulfillment of the Diploma course in Computer Technology
in the academic Year 2024-2025.

Prof. N.P. AHER

Guide External

Prof. M. M. Kulkarni Prof. V. P. Nikhade

Head of the Department Principal
 Brahma Valley College of Technical
Education,
Anjaneri, Nashik

Department of Computer Technology

CERTIFICATE

This is to certify that Pratap Bhavale from Computer Technology Department

has successfully completed his/her Project on “Building and testing

registration and login page” at Brahma Valley College of Technical Education,

Anjaneri, Nashik in the partial fulfillment of the Diploma course in Computer

Technology in the academic Year 2024-2025.

Prof. N.P. AHER

Guide External

Prof. M. M. Kulkarni Prof. V. P. Nikhade

Head of the Department Principal
 ACKNOWLEDGEMENT
We would like to deeply thank the various people who, during the several months which
this endeavor lasted, provided us with useful and helpful assistance. Without care and
consideration, this seminar would likely not have matured.

First we would like to thank our project guide Head of Dept. Prof. M. M. Kulkarni Sir
for his guidance and interest. Her guidance reflects expertise we certainly do not master
ourselves. We also thank him for his patience throughout, in cross-reviewing which
constitutes a rather difficult balancing act.

Second, We would like to thank all the Staff Members of Computer Department for
providing us their admirable feedback and insights whenever We discussed we project with
them. We also extend we thanks to our lab assistants who guided us in implementation of
our seminar.

We would like to extend we special thanks to our Principal, Prof. V. P. Nikhade for his
encouragement and words of wisdom.

Finally, we express my deepest gratitude to we family and friends who encouraged me since
the beginning and provided we with their insightful reviews to help me make our Project
successful.

[Avdhoot Deshmukh ]

[Pratap Bhavale]

[Vedant patil]
 Index
Sr. contents Page
No.
No.
1 Abstract 1
2 Introduction 2
3 Aim Of The Project 4
4 Key Comonents 5
5 Data Flow Diagram 6
6 Program Code 7
7 Output 8-12
8 Conclusion 13
9 Reference 14
1.Abstract

This micro project focuses on developing a secure and user-friendly login and registration
page as part of a web application. The primary objective is to facilitate user authentication
while ensuring data protection and enhancing user experience. The registration process allows
new users to create an account by providing essential information, such as username,
password, and email, with validation checks to ensure data integrity. The login functionality
enables existing users to access their accounts securely.

Key features include password encryption, session management, and error handling to
improve security and usability. The project is implemented using HTML, CSS, and
JavaScript for the front end, with a backend supported by technologies such as Node.js and
MongoDB. This micro project serves as a foundational component for larger applications,
demonstrating best practices in web security and user interface design.

2.Introduction:

In today's digital age, secure and efficient user authentication is essential for any web
application. This micro project focuses on developing a user-friendly login and registration
form, which serves as the gateway for users to access various features of an application. The
project aims to implement fundamental web development concepts, including HTML, CSS,
and JavaScript, to create an intuitive interface.

The registration form allows new users to create accounts by providing essential information,
while the login form enables existing users to access their accounts securely. By
incorporating validation techniques and basic security measures, this project not only
enhances user experience but also emphasizes the importance of protecting user data.

Through this project, we will explore key aspects of web development, including form
handling, data validation, and user authentication processes, laying the groundwork for more
advanced topics in web security and application development.

1
3.Aim of the Project:

The aim of a project on building and testing a login and registration form is to create a secure,
user-friendly, and scalable system that can gather user information and authenticate users:

Security
The login and registration pages should be secure and protect user data. For example, the
registration page should validate user input and reject harmful characters, and test for
vulnerabilities like cross-site scripting (XSS) and cross-site request forgery (CSRF).

Scalability
The login page should be able to handle a large number of users, so the server should have
enough resources to handle authentication and login requests.

User experience
The login and registration pages should be easy to use, and reflect the visual identity and
branding of the company or application.

Data collection
The login and registration pages should gather important user information, such as mobile
phone number and real name. This information can be used to promote operations and guide
product development.

2
4. Key Components

1. Form Fields:
- Username: A unique identifier for the user.
- Email: For communication and account recovery.
- Password: Should include guidelines for strength (length, complexity).
- Confirm Password: To ensure the user enters the correct password.
- Additional Fields: (optional) First name, last name, phone number, etc.

2. Validation
- Client-side Validation:Immediate feedback for incorrect inputs (e.g., using JavaScript).
- Server-side Validation:Additional checks to ensure data integrity and security.

3. Security Measures:
- Password Hashing:Store passwords securely using hashing algorithms.
- Captcha:To prevent automated submissions.
- HTTPS:Ensure secure data transmission.

4. User Experience (UX:

- Clear Instructions: Provide guidance on filling out the form.
- Error Messages: Display specific messages for incorrect entries.
- Responsive Design:Ensure the form is accessible on various devices.

5. Submission Handling:
- Feedback Mechanism: Notify users upon successful registration or errors.
- Redirects : Optionally redirect users to a login page or dashboard after registration.

6. Testing:

3
 - Functional Testing:Verify all functionalities work as intended.
- Security Testing:Check for vulnerabilities like SQL injection, XSS, etc.
- Usability Testing: Gather user feedback to improve the form’s design and usability.

5.Data Flow Diagram

4
5
6. Program Code
<!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">

<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

<link rel="stylesheet" href="login.css">

<title> Login & Registration</title>

</head>

<body>

<div class="wrapper">

<nav class="nav">

<div class="nav-logo">

<p>I N F I N I T Y</p>

</div>

<div class="nav-menu" id="navMenu">

<ul>

<li><a href="#" class="link active">Home</a></li>

<li><a href="#" class="link">Shopping</a></li>

<li><a href="#" class="link">Services</a></li>

<li><a href="#" class="link">About</a></li>

</ul>

</div>

<div class="nav-button">

<button class="btn white-btn" id="loginBtn" onclick="login()">Sign In</button>

<button class="btn" id="registerBtn" onclick="register()">Sign Up</button>

</div>

<div class="nav-menu-btn">

6
 <i class="bx bx-menu" onclick="myMenuFunction()"></i>

</div>

</nav>

<!----------------------------- Form box ----------------------------------->

<div class="form-box">

<!------------------- login form -------------------------->

<div class="login-container" id="login">

<div class="top">

<span>Don't have an account? <a href="#" onclick="register()">Sign Up</a></span>

<header>Login</header>

</div>

<div class="input-box">

<input type="text" class="input-field" placeholder="Username or Email">

<i class="bx bx-user"></i>

</div> <br>

<div class="input-box">

<input type="password" class="input-field" placeholder="Password">

<i class="bx bx-lock-alt"></i>

</div><br>

<div class="input-box">

<input type="submit" class="submit" value="Sign In">

</div>

<div class="two-col">

<div class="one">

<input type="checkbox" id="login-check">

<label for="login-check"> Remember Me</label>

</div>

<div class="two">

<label><a href="#">Forgot password?</a></label>

7
 </div>

</div>

</div>

<!------------------- registration form -------------------------->

<div class="register-container" id="register">

<div class="top">

<span>Have an account? <a href="#" onclick="login()">Login</a></span>

<header>Sign Up</header>

</div>

<div class="two-forms">

<div class="input-box">

<input type="text" class="input-field" placeholder="Firstname">

<i class="bx bx-user"></i>

</div>

<div class="input-box">

<input type="text" class="input-field" placeholder="Lastname">

<i class="bx bx-user"></i>

</div>

</div> <br>

<div class="input-box">

<input type="text" class="input-field" placeholder="Email">

<i class="bx bx-envelope"></i>

</div> <br>

<div class="input-box">

<input type="password" class="input-field" placeholder="Password">

<i class="bx bx-lock-alt"></i>

</div> <br>

<div class="input-box">

<input type="submit" class="submit" value="Register">

</div>

8
 <div class="two-col">

<div class="one">

<input type="checkbox" id="register-check">

<label for="register-check"> Remember Me</label>

</div>

<div class="two">

<label><a href="#">Terms & conditions</a></label>

</div>

</div>

</div>

</div>

</div>

<script>

function myMenuFunction() {

var i = document.getElementById("navMenu");

if(i.className === "nav-menu") {

i.className += " responsive";

} else {

i.className = "nav-menu";

</script>

<script>

var a = document.getElementById("loginBtn");

var b = document.getElementById("registerBtn");

var x = document.getElementById("login");

var y = document.getElementById("register");

function login() {

9
 x.style.left = "4px";

y.style.right = "-520px";

a.className += " white-btn";

b.className = "btn";

x.style.opacity = 1;

y.style.opacity = 0;

function register() {

x.style.left = "-510px";

y.style.right = "5px";

a.className = "btn";

b.className += " white-btn";

x.style.opacity = 0;

y.style.opacity = 1;

</script>

</body>

</html>

css
/* POPPINS FONT */

@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

10
body{

background: url("img222.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

overflow: hidden;

.wrapper{

display: flex;

justify-content: center;

align-items: center;

min-height: 110vh;

background: rgba(39, 39, 39, 0.4);

.nav{

position: fixed;

top: 0;

display: flex;

justify-content: space-around;

width: 100%;

height: 100px;

line-height: 100px;

background: linear-gradient(rgba(39,39,39, 0.6), transparent);

z-index: 100;

.nav-logo p{

color: white;

font-size: 25px;

font-weight: 600;

11
.nav-menu ul{

display: flex;

.nav-menu ul li{

list-style-type: none;

.nav-menu ul li .link{

text-decoration: none;

font-weight: 500;

color: #fff;

padding-bottom: 15px;

margin: 0 25px;

.link:hover, .active{

border-bottom: 2px solid #fff;

.nav-button .btn{

width: 130px;

height: 40px;

font-weight: 500;

background: rgba(255, 255, 255, 0.4);

border: none;

border-radius: 30px;

cursor: pointer;

transition: .3s ease;

.btn:hover{

background: rgba(255, 255, 255, 0.3);

#registerBtn{

12
 margin-left: 15px;

.btn.white-btn{

background: rgba(255, 255, 255, 0.7);

.btn.btn.white-btn:hover{

background: rgba(255, 255, 255, 0.5);

.nav-menu-btn{

display: none;

.form-box{

position: relative;

display: flex;

align-items: center;

justify-content: center;

width: 512px;

height: 420px;

overflow: hidden;

z-index: 2;

.login-container{

position: absolute;

left: 4px;

width: 500px;

display: flex;

flex-direction: column;

transition: .5s ease-in-out;

13
.register-container{

position: absolute;

right: -520px;

width: 500px;

display: flex;

flex-direction: column;

transition: .5s ease-in-out;

.top span{

color: #fff;

font-size: small;

padding: 10px 0;

display: flex;

justify-content: center;

.top span a{

font-weight: 500;

color: #fff;

margin-left: 5px;

header{

color: #fff;

font-size: 30px;

text-align: center;

padding: 10px 0 30px 0;

.two-forms{

display: flex;

gap: 10px;

14
.input-field{

font-size: 15px;

background: rgba(255, 255, 255, 0.2);

color: #fff;

height: 50px;

width: 100%;

padding: 0 10px 0 45px;

border: none;

border-radius: 30px;

outline: none;

transition: .2s ease;

.input-field:hover, .input-field:focus{

background: rgba(255, 255, 255, 0.25);

::-webkit-input-placeholder{

color: #fff;

.input-box i{

position: relative;

top: -35px;

left: 17px;

color: #fff;

.submit{

font-size: 15px;

font-weight: 500;

color: black;

height: 45px;

width: 100%;

15
 border: none;

border-radius: 30px;

outline: none;

background: rgba(255, 255, 255, 0.7);

cursor: pointer;

transition: .3s ease-in-out;

.submit:hover{

background: rgba(255, 255, 255, 0.5);

box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);

.two-col{

display: flex;

justify-content: space-between;

color: #fff;

font-size: small;

margin-top: 10px;

.two-col .one{

display: flex;

gap: 5px;

.two label a{

text-decoration: none;

color: #fff;

.two label a:hover{

text-decoration: underline;

@media only screen and (max-width: 786px){

16
.nav-button{

display: none;

.nav-menu.responsive{

top: 100px;

.nav-menu{

position: absolute;

top: -800px;

display: flex;

justify-content: center;

background: rgba(255, 255, 255, 0.2);

width: 100%;

height: 90vh;

backdrop-filter: blur(20px);

transition: .3s;

.nav-menu ul{

flex-direction: column;

text-align: center;

.nav-menu-btn{

display: block;

.nav-menu-btn i{

font-size: 25px;

color: #fff;

padding: 10px;

background: rgba(255, 255, 255, 0.2);

border-radius: 50%;

17
 cursor: pointer;

transition: .3s;

.nav-menu-btn i:hover{

background: rgba(255, 255, 255, 0.15);

@media only screen and (max-width: 540px) {

.wrapper{

min-height: 100vh;

.form-box{

width: 100%;

height: 500px;

.register-container, .login-container{

width: 100%;

padding: 0 20px;

.register-container .two-forms{

flex-direction: column;

gap: 0;

18
7. Output/Screenshots

19
8.Conclusion
.

In conclusion, creating and testing a login and registration form page is essential for ensuring
user accessibility and security in any application. A thoughtfully designed interface enhances
user experience, while rigorous testing helps identify vulnerabilities and ensures proper
functionality. Key aspects include implementing validation checks, maintaining data security,
and accommodating various user scenarios. By focusing on these elements, developers can
build a reliable and efficient authentication system that instills user confidence.
A well-structured registration form page is vital for user engagement and security. By
focusing on key components, implementing robust validation, and prioritizing security,
developers can create an efficient and user-friendly registration process. Proper testing further
ensures that the form meets the needs of users while safeguarding their information
The page was designed in such a way that future modifications can be done easily. The
following conclusions can be deduced from the development of the project.

➢ Automation of the entire system improves the efficiency

➢ It provides a friendly graphical user interface which proves to be better when

compared to the existing system.

➢ It gives appropriate access to the authorized users depending on their permissions.

➢ It effectively overcomes the delay in communications.

➢ Updating of information becomes so easier.

➢ System security, data security and reliability are the striking features.

➢ The System has adequate scope for modification in future if it is necessary.

20
9.Reference