A Dissertation submitted

for the partial fulfillment of the degree of

Bachelor of Engineering in
Name of the branch
(Session 2021 -2022)

Guided By: Submitted By:

Name of Project Guide – Name of Students (Roll No)
Mrs. Jyoti Haweliya Payal Mavi - 18C7034
Soniya Kori - 18C7055
Kanchan Ahirwar - 18C7022

Department of Department name

Institute of Engineering & Technology
Devi Ahilya Vishwavidyalaya, Indore (M.P.)
(www.iet.dauniv.ac.in)

Chapter 1: Introduction
1.1 Overview and issues involved Page No
1.2 Statement of Problem Page No
1.3 Significance of Problem Page No
1.4 Assumptions Page No
1.5 Proposed Solution Page No

Chapter 2: Literature Survey

2.1 Existing Papers Page No
2.2 Technologies and Research Tools Page No

Chapter 3: Design
3.1 Research Design and Procedure Page No
3.2 Data Sets Page No
3.3 Sampling of Data Page No
3.4 Statistical Treatment Page No

Chapter - 4 Implementation and Testing

4.1 Subsystem and their dependencies Page No
4.2 Test Cases Page No
4.3 Comparative Analysis Page No
Chapter 5: Conclusion
References Page No
Appendix Page No

Chapter 1 Introduction
1.1 Overview and issues involved
The overview of this project is to develop a Note Making App. It will
enable the user to create, view and store notes on a web interface.
The project is intended for generic users who wish to keep a tab of their
activities and make notes about various things. It is also suitable for
developers who wish to develop similar systems or improve upon the
same.

1.2 Statement of Problem

The purpose of this project is to develop a Note Making App. It will
enable the user to create, view and notes on a web interface.
The project is intended for generic users who wish to keep a tab of their
activities and make notes about various things. It is also suitable for
developers who wish to develop similar systems or improve upon the same.
In this project we are going to make an E-notes App in which we will
display the notes on a web interface. It can be scaled up according to
need of the users.

1.3 Significance of Problem

Notes app is used for making short text notes, update when you need
them, and trash when you are done. It can be used for various functions
as you can add your to-do list in this app, some important notes for
future reference, etc.
The app is very useful in some cases like when you want quick access to
the notes. We have built a Notes App in which the user can add, remove
and edit any data and also upload the pdf file.  
we are going to implement this project using the PHP language.

1.4 Assumptions
In this we use hardware elements to support the user load.

1.5 Proposed Solution

A user can create his account using the registration form. Then he
will be able to log in with it. The application will provide high
notes management system. The user can create, store , update and
delete the notes.
The scope of this application in education sector is very large. This
application is useful in e-learning concept.
A customer of E-notes. To become a user you need to create an account
using the registration form or using Rest API. Users can create and
manage their notes, combine them into notebooks, etc;
a simple note, which includes a header, a body, and a priority mark
(high, middle, low) . It can be created, modified and deleted by a
user. Also, can be combined into a notebook;
a comment for a note. Users can comment notes. Comments can be edited
and deleted.

Chapter 2: Literature Survey

2.1 Existing Papers
Google Keep: A note-making app by Google which enables users to login
using their Google Account. It was launched in 2008. It has features
such as typing words, adding images or drawing illustrations over the
cloud.
Microsoft OneNote: A note-making app by Microsoft. This program helps
user take notes, store basic tables, images, videos. The information
is also available offline with periodic synchronization. It was
launched in 2012.
Evernote: First launched in 2008. Evernote is one of the most popular
note-taking and task management apps. It has 225 million users.

2.2 Technologies and Research Tools

Server Side Programming Language: PHP , HTML , CSS
Tools: MySQL , XAMPP , VS Code.

Chapter 3: Design
An user is an actor. He perform many operation like edit the notes,
delete the notes, create the notes, and view the notes.
Step 1:
In this step, open CSS Bootstrap to create a Web page. CSS Bootstrap
is the tools to create a Web page in PHP. 
Step 2:
In this step, for selecting Language, CSS Bootstrap is opened. A list
of languages are shown,  and select PHP.
Step 3:
In this step, open PHP coding page. This coding page already has some
default code. Thus, there is no need to write
<html>,<head>,<title>,<body>.
Step 4:
This step is required to save the coding page. Now, go to the file
and select save option or CTRL+S.
Step 5:
This step is performed to select the location to save that page.
Select C drive and select the xampp.
Step 6:
In this step also, select the location to save the code. In xampp
location, show many files. Select htdocs.
Step 7:
In this step, create New File to save the page. In htdocs, create New
folder and change the name demo to save the code.
Step 8:
In this step, save the page on the demo file. Type file name
index.php and click save. Now, save the coding page.
Step 9:
In this step, select the title name. Name the untitled document in
the code page. Select the name and clear.
Step 10:
In this step, declare the document title. Type the document title
DESIGNING PHP and save or CTRL+S.
Step 11:
This step is for designing the page. This Web page is divided into
edit, create, delete, and view the notes.
Step 12:
This step is to view the content. In this page, click view. This page
shows our content page..
Step 13:
This step is to open XAMPP Control Panel Application, which is used
for running our web page application. Select XAMPP Control Panel
Application.
Step 14:
This step is to be followed to run the page. In this XAMPP, start
Apache. This is a Server to run the page.
Step 15:
In this step, run the Web page. Select any Web Browser and type the
link. This link is localhost/demo and press enter. Now, run the Web
page.
Step 16:
In this step, create stylesheet. In CSS Bootstrap, select CSS. CSS is
cascading Stylesheet. This is used to create style for Web page.
Step 17:
This step is required to open stylesheet coding page. This page is
used to develop the style and designing of the Web page.
Step 18:
This step is required to select the location to save the stylesheet.
Go to the file and select save option i.e. open save window. Select
file name and open demo file.
Step 19:
This step is required to save stylesheet. Declare the file name as
Style.css. and css is an extension of the stylesheet. Now, save the
stylesheet.
Step 20:
This step is required to develop the stylesheet coding. First create
the header page. Declare the #header and create the Background-color,
which shows the colors and select any one color.
Step 21:
In this step, create the stylesheet for the header. Declare the width
size and height size, color, border size,margin-left and right size.
Subsequently, close the header.
Step 22:
In this step, connect PHP and stylesheet. Link the stylesheet in PHP
coding. In the coding, after </title>, link the stylesheet. Browse
the stylesheet.
Step 23:
In this step, select the stylesheet location. Select the file name
and click OK. Now, the link is connected.
Step 24:
This step is required to link to stylesheet. This declares the type
and rel. Type is text/css and rel is Sttylesheet. Now, connect PHP
and stylesheet.
Step 25:
In this step, check the link. Go to the Browser and type
localhost/demo. Run DESIGNING PHP. Change the header design.
Step 26:
In this step, create style for menu. This menu bar has a background
color and select any one color, followed by choosing the size of
margin, weight and height. Now, save the file.
Step 27:
In this step, check the menu style. Go to the browser and type the
link localhost/demo. Now, run the demo document and menu style
changes
Step 28:
In this step, change the menu order from horizontal to vertical.
Develop unordered list style set to none. List style float is left
and declare that padding and margin size. Now, save stylesheet.
Step 29:
In this step, check the menu order. Go to the browser and type the
link localhost/demo. Run the demo document and change the menu order.
Step 30:
In this step, change the alignment and style of menu link. In
stylesheet, create background-color, color, height, width, font-size,
font-style and display alignment as table cell. Vertical align is
middle. Save the style.
Step 31:
In this step, check the menu style. Go to the browser and type the
link. Now, run the demo document and change the link style on menu
bar.
Step 32:
In this step, create a hover code for the style. In stylesheet,
create hover code for the link. Now, create color, font style and
transition. Create size of padding, left, top and position. Now, save
the stylesheet.
Step 33:
In this step, check the style. Go to the Browser and type the link.
Run the demo page. With the cursor's click, move to any link that
will be changing the link color.
Step 34:
In this step, change the size of the link. In stylesheet, at a link,
change the size of width and height. Now, save the stylesheet.
Step 35:
In this step, check the size of the link. Go to the browser and type
the link. Run the demo page and the link size will be changed on the
Web page.
Step 36:
In this step, create style for center page. This also creates
background color; color, width and height is auto, margin size. Save
the stylesheet.
Step 37:
In this step, check center page. Go to the browser and type the link.
Run the web page demo. Display the center page, using style.

Chapter - 4 Implementation and Testing

A user is an actor. Firstly he need to register their account through
registration form.

In this form you need to fill all the details like user name, email
id and password. after that you successfully registered.
If you already registered then you only need to login through login
button. Only you need to put email id or password .

After login, you directly go to the main page. In this page you
perform many operations like edit, delete, create, and view the
notes.
Chapter 5: Conclusion
We aim to provide a platform which is easy, simple and efficient to
use by any user.
We wish to provide a better alternative to the current existing
solutions, which is easy as well as economic to maintain
By making this project, we wish to provide a handy tool to users,
which improves the work that they are doing.