A MAJOR PROJECT

REPORT ON
“CREATE LOGIN SYSTEM”

Submitted in partial Fulfilment for the award of

Diploma of Engineering in Computer Science
(2022)
Submitted to:
RAJIV GANDHI PROUDYIGIKI VISHWAVIDYALAYA BHOPAL (M.P.)
Submitted by:- Enrolment number:-

Aman Kumar Gupta (19047C04005)

Divyanshu Mishra (19047C04020)
Maneesh Gupta. (19047C04032)
Sankat Mochan Pandey (19047C04048)

Approved By, Under the Guidance of

Mr. Sanjay Gupta. Mr. Rajbhan Singh
(Head of Department). (Computer Lecture)

Department of Computer Science

Government Polytechnic College Satna (M.P.)
 CERTIFICATE

This is to certify that the project entitled a "Create Login System" which has
been completed & submitted by “Aman Kumar Gupta, Divyanshu Mishra,
Maneesh Gupta, Sankat Mochan Pandey” in partial fulfilment of the
requirement for the award of the diploma of Polytechnic Engineering of
Computer Science for the Session 2022 is a benefited work by them and
has been completed under my guidance and supervision. It has not been
submitted elsewhere for any other degree.

H.O.D Guided By
Mr. Sanjay Gupta Mr. Rajbhan Singh

Principal
Mrs. Kamla Agarwal
l
 ACKNOWLEDGEMENT

A project like this one involves many people and would incomplete without
the mention of all those people whose guidance and encouragement helped in
the successful completion of this project.
Our heartily thanks to all faculty member Department of Computer Science,
Government Polytechnic College Satna (M.P.) for their effort toward our
project .
We would like to thanks our H.O.D Mr. Sanjay Gupta who has been a great
source of inspiration for us and without whose humble guidance of project was
never to shape.
We are also indebted to our guide Mr. Rajbhan Singh for his encouragement,
guidance and support.
We are also thankful to many people whose timely help but paucity of space is
restricting us from mentioning their name. And finally, we also thank to all my
colleagues who were constant support during the whole project.

ASSOCIAT BY

 Aman Kumar Gupta (19047C04005)

 Divyanshu Mishra (19047C04020)
 Maneesh Gupta. (19047C04032)
 Sankat Mochan Pandey (19047C04048)
 DECLARATION

We hereby declare that the work which is being presented in the project report

entitle “Create Login System” in partial fulfilment of the requirement of the

diploma of “Computer Science Engineering” branch is an authentic record

of our work carried out under the able guidance of “Mr. Rajbhan Singh” .

The work has been carried out at Government Polytechnic College Satna

(M.P.).

PROJECT ASSOCIATE :-

 Aman Kumar Gupta (19047C04005)

 Divyanshu Mishra (19047C04020)
 Maneesh Gupta (19047C04032)
 Sankat Mochan Pandey (19047C04048)
 INDEX

Contents Page no.

 Login system 01
 What is the Login system 01
 Requirement 01
 Used Front end language 02
 HTML 02
 CSS 02
 Used Back end language 03
 PHP 03
 MySQL 03
 Environment Setup 04
 Create login system 05
 Front end Work 06-10
 Index.html 06-08
 Style.css 09-10
 Back end work 11-16
 Connection.php 15
 Authentication.php 16
 How to run login form 17-19
 Data flow diagram 20-21
 ER diagram 22-23
 Future scope of login system 24
 Login system

in computer security, logging in (or logging on, signing in, or signing on)
is the process by which an individual gains access to a computer system
by identifying and authenticating themselves. the user credentials are
typically some form of username and a matching password and these
credentials themselves are sometimes referred to as a login (or logon,
sign-in, sign-on). In practice, modern secure systems often require a
second factor such as email or SMS confirmation for extra security.
social login allows a user to use existing user credentials from a social
networking service to sign in to or create an account on a new website.
When access is no longer needed, the user can log out (log off, sign out
or sign off).

Definition
In general computer usage, logon is the procedure used to get access to an
operating system or application, usually in a remote computer.

Requirements

We should have knowledge of HTML, CSS, PHP and MySQL for creating
the login system.
Text Editor – For writing the code. We can use any text editor such as
Notepad, Notepad++, Dreamweaver, etc.
XAMPP – XAMPP is a cross-platform software, which stands for Cross-
platform(X) Apache server (A), MySQL (M), PHP (P), Perl (P). XAMPP is a
complete software package, so, we don’t need to install all these separately

01
 Used Front-end language

HTML (HyperText Markup Language):-

HTML stands for HyperText Markup Language. This is the most important
markup language that can be used to create a webpage. It is used to display
text, image, audio, and video in a webpage.

CSS (Cascading Style Sheets):-

CSS stands for Cascading Style Sheets. It is used to style HTML documents.
CSS can make responsive web pages and is used for styling and its collection
of formatting rules. It is used for designing purposes. The CSS extension is
(.CSS) There are three types of CSS:

 Inline CSS
 Internal CSS
 External CSS

02
 Used Back end language

PHP ( Hypertext preprocessor ):-

PHP is a server side scripting language that is classified as a backend

language. Unlike HTML or CSS, PHP does the heavy lifting behind the
scenes.

“PHP can be used to create a connection to a MySQL, Postgres, or

Mongo Database and quickly and dynamically create webpages. PHP
can be used in either a browser or in the command line.”

PHP is a server side scripting language where the web server runs the
script. This differs from client side scripting, where scripts are run on the
user’s computer. For instance, JavaScript is a client side language.

My SQL:-

MySQL is currently the most popular database management system software

used for managing the relational database. It is open-source database software,
which is supported by Oracle Company. It is fast, scalable, and easy to use
database management system in comparison with Microsoft SQL Server and
Oracle Database. It is commonly used in conjunction with PHP scripts for
creating powerful and dynamic server-side or web-based enterprise
applications.

Database:-

A database is an application that stores the organized collection of records. It

can be accessed and manage by the user very easily. It allows us to organize
data into tables, rows, columns, and indexes to find the relevant information
very quickly. Each database contains distinct API for performing database
operations such as creating, managing, accessing, and searching the data it
stores. Today, many databases available like MySQL,
Sybase, Oracle, MongoDB, PostgreSQL, SQL Server, etc. In this section, we
are going to focus on MySQL mainly.
03
 Environment Setup

Now, we need to start the webserver and create the files for the login system.
There are few steps that are given below to setup the environment.

 Open the XAMPP Control Panel.

 Start the Apache server by clicking on the Start button.
 Start the MySQL by clicking on the Start button.
 Create all the files needed for login.
 Create login table in the database using phpMyAdmin in XAMPP.

04
 Create login system

Now, we will create four files here for the login systems

index.html - This file is created for the GUI view of the login page and
empty field validation.

style.css - This file is created for the attractive view of the login form.
connection.php - Connection file contains the connection code for database
connectivity.

authentication.php - This file validates the form data with the database
which is submitted by the user.

Save all these files in the htdocs folder inside the Xampp installation folder.
The detailed description and code for these files are discussed below.

05
 Front-end Work

Index.html:-
First, we need to design the login form for the website user to interact with it.
This login form is created using html and also contains the empty field
validation, which is written in JavaScript. The code for the index.html file is
given below:
<html>

<head>

<title>PHP login system</title>

// insert style.css file inside index.html

<link rel = "stylesheet" type = "text/css" href = "style.css">

</head>

<body>

<div id = "frm">

<h1>Login</h1>

<form name="f1" action = "authentication.php" onsubmit = "return validation()" method = "

POST">

<p>

<label> UserName: </label>

<input type = "text" id ="user" name = "user" />

</p>

<p>

<label> Password: </label>

<input type = "password" id ="pass" name = "pass" />

</p>

<p>

<input type = "submit" id = "btn" value = "Login" />

</p>

</form>

</div>

// validation for empty field

<script>
06
function validation()

var id=document.f1.user.value;

var ps=document.f1.pass.value;

if(id.length=="" && ps.length=="") {

alert("User Name and Password fields are empty");

return false;

else

if(id.length=="") {

alert("User Name is empty");

return false;

if (ps.length=="") {

alert("Password field is empty");

return false;

</script>

</body>

</html>

07
After executing the above code on the browser, the login page will
appear as below if it does not contain style.css file.

08
Style.css:-

Now, we will create style.css file to provide a more attractive view to the
login form. The CSS code for the style.css file is given below:

Body
{
Background: #eee;
}

#frm

{
Border: solid gray 1px;
Width:25%;
Border-radius: 2px;
Margin: 120px auto;
Background: white;
Padding: 50px;
}

#btn

{
Color: #fff;
Background: #337ab7;
Padding: 7px;
Margin-left: 70%;
}

09
After including above CSS file in index.html, the login form will be
like –

10
 Back-end Work

Database and Table Creation:-

Now, the next step is to create the database and the login table inside the
database.
Access the phpMyAdmin on the browser using localhost/phpmyadmin/
and create a table in the database. Here we will create a database and
table using GUI based phpMyAdmin rather than queries execution.

Click on New and enter the database name and then click on Create
button.

11
Now we will create a login table in the database. Create a table by
name login in the database which you have created earlier.

12
Specify the column Name and their Type and Length in the table in
which we will store the username and password for the different
users and save it by clicking on the save button.

13
Click on the insert, from where we can insert the records in columns.
So insert the username and password here and click on Go button to
save the record.

14
Connection.php:-
Next step is to do the connectivity of login form with the database which we
have created in the previous steps. We will create connection.php file for
which code is given below:

<?php
$host = "localhost";
$user = "root";
$password = '';
$db_name = "javatpoint";

$con = mysqli_connect($host, $user, $password, $db_name);

if(mysqli_connect_errno()) {
die("Failed to connect with MySQL: ". mysqli_connect_error());
}
?>

15
Authentication.php:-

Now, we have our database setup, so we can go with the authentication of the
user. This file handles the login form data that sent through the index.html
file. It validates the data sent through the login form, if the username and
password match with the database, then the login will be successful otherwise
login will be failed.

<?php
include('connection.php');
$username = $_POST['user'];
$password = $_POST['pass'];

//to prevent from mysqli injection

$username = stripcslashes($username);
$password = stripcslashes($password);
$username = mysqli_real_escape_string($con, $username);
$password = mysqli_real_escape_string($con, $password);

$sql = "select *from login where username = '$username' and passwo

rd = '$password'";
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
$count = mysqli_num_rows($result);

if($count == 1){
echo "<h1><center> Login successful </center></h1>";
}
else{
echo "<h1> Login failed. Invalid username or password.</h1>";
}
?>

16
 How to run the login form?

To run the login form, open the xampp control panel and run the apache
server and PHP.

Now, type localhost/xampp/folder name/file name in the browser and press

Enter key.

All setup is done now. Enter the username and password in the login
form and click the login button.

17
Here, we have inserted an incorrect username, so the user is unable to
log in, and it will give the login failed error.

Now, we will provide correct value in the username and password.

So, the user will be successfully logged in. See in the below example.

18
Output:-

19
 DFD(Data flow diagram)

DFD is the abbreviation for Data Flow Diagram. The flow of data of a system
or a process is represented by DFD. It also gives insight into the inputs and
outputs of each entity and the process itself. DFD does not have control flow
and no loops or decision rules are present. Specific operations depending on
the type of data can be explained by a flowchart. Data Flow Diagram can be
represented in several ways. The DFD belongs to structured analysis
modeling tools. Data Flow diagrams are very popular because they help us to
visualize the major steps and data involved in software-system processes.

Process
Input to output transformation in a system takes place because of
process function. The symbols of a process are rectangular with
rounded corners, oval, rectangle or a circle. The process is named a
short sentence, in one word or a phrase to express its essence.

Data Flow
Data flow describes the information transferring between different
parts of the systems. The arrow symbol is the symbol of data flow. A
DFD is the abbreviation for Data Flow Diagram. The flow of data of
a system or a process is represented by DFD. It also gives insight into
the inputs and outputs of each entity and the process itself.

20
 Username
Check
Login and User
Password

Invalid user

Login successfully Valid user

21
 E-R Diagram

ER Diagram is known as Entity-Relationship Diagram, it is used to analyse to

structure of the Database. It shows relationships between entities and their
attributes. An ER Model provides a means of communication.
ER Diagrams contain different symbols that use rectangles to represent
entities, ovals to define attributes and diamond shapes to represent
relationships.
Following are the main components and its symbols in ER Diagrams:
 Rectangles: This Entity Relationship Diagram symbol represents entity
types
 Ellipses : Symbol represent attributes
 Diamonds: This symbol represents relationship types
 Lines: It links attributes to entity types and entity types with other
relationship types
 Primary key: attributes are underlined
 Double Ellipses: Represent multi-valued attributes

22
Password Username

Login

Invalid Invalid
username password

23
 Future scope in login page

• We can give more advance software for Login System including more
facilities.
• We will host the platform on online servers to make it accessible
worldwide.
• Integrate multiple load balancers to distribute the loads of the system.
• Create the master and slave database structure to reduce the overload of
the database queries.
• Implement the backup mechanism for taking backup of codebase and
database on regular basis on different servers.

The above mentioned points are the enhancements which can be done to
increase the applicability and usage of this project. Here we can maintain
the records of Username and Password. Also, as it can be seen that now-
adays the players are versatile, i.e. so there is a scope for introducing a
method to maintain the Login System. Enhancements can be done to
maintain all the Username, Password, Login, Register, and Programmer.

Conclusion:-

A login page is a web page or an entry page to a website that requires user
identification and authentication, regularly performed by entering a username
and password combination. Logins may provide access to an entire site or part
of a website. Logging in not only provides site access for the user, but also
allows the website to track user actions and behaviour. Logging off a webpage
or site may be manual by the user or they can occur automatically when certain
conditions (such as closing the page, turning off the computer, a long time
delay, etc.) occur.

24