HANDWRITTEN NOTES UPLOADING AND

DOWNLOADING SYSTEM

A Project Report Submitted

In Partial Fulfillment of the Requirements for the Degree of

BACHELOR OF COMPUTER APPLICATION

by
Ujjwal Sinha
(Univ. Roll No. 180014045052)

Akash Maurya
(Univ. Roll No. 180014045021)

Sumit Gupta
(Univ. Roll No. 180014045027)

Vishal
(Univ. Roll No. 180014045058)

Under the Guidance of

Er. Priyanka Tripathi

(Assistant Professor)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING,

FACULTY OF ENGINEERING AND TECHNOLOGY,
UNIVERSITY OF LUCKNOW, LUCKNOW
2020-21
 DECLARATION

We hereby declare that this submission is our own work and that, to the best of our

knowledge and belief, it contains no material previously published or written by another person

or material which to a substantial extent has been accepted for the award of any other degree or

diploma of the University or other institute of higher education, except where due acknowledgement

has been made in the text.

Signature
Ujjwal Sinha
180014045052
Date:

Signature
Akash Maurya
180014045021
Date:

Signature
Sumit Gupta
180014045027
Date:

Signature
Vishal
180014045058
Date:

i
 CERTIFICATE

Certified that Ujjwal Sinha (Univ. Roll No. 180014045052), Akash Maurya (Univ. Roll No.

180014045021), Sumit Gupta (Univ. Roll No. 180014045027) and Vishal (Univ. Roll No.

180014045058) have carried out the project work presented in this project report entitled

“HANDWRITTEN NOTES UPLOADING AND DOWNLOADING SYSTEM” for the award

of Bachelor of Computer Application from Faculty of Computer Science and Engineering,

University of Lucknow, Lucknow under my guidance. The project report embodies results of

original work, and studies are carried out by the students themselves and the contents of the project

report do not form the basis for the award of any other degree to the candidate or to anybody else

from this or any other University/Institution.

(Supervisor)

Er. Priyanka Tripathi In-Charge

(Assistant Professor) (Department Of CSE)

ii
 ABSTRACT

Due to the advanced technology development, digital technology used in maximum area of day-to-day life of
working which are being developed for advancing technology for humanity. Digital technology in terms of
computer system has become an important part in education system of teaching and learning process. All other
teaching and learning process or methods used in educational system are under the influence of computer
technology and become a integral part of day-to-day life. In this research, it is going to discuss method of teaching
with the help of education technology and computer technology helps the students in improving learning skills of
computer science and engineering students related to programming subjects.

iii
 ACKNOWLEDGEMENTS

Presentation, inspiration and motivation have always played a key role in the success
of any venture. However, it would not have been possible without the kind support and help of many
individuals. I would like to express my gratitude towards my parents &friends for their kind co-
operation and encouragement which help me in completion of this project.

I would like to express my special gratitude and thanks to my professor Er. Priyanka
Tripathi who with his constant guidance and help made this project a successful effort.

My thanks and appreciations also go to my team members in developing the project who
helped me out with their abilities to complete this project.

Ujjwal Sinha

Akash Maurya

Sumit Gupta

Vishal

iv
 TABLE OF CONTENTS

Page No.
Declaration i
Certificate ii
Abstract iii
Acknowledgement iv
List of Tables viii
List of Figures ix
List of Symbols And Abbreviations x
CHAPTER 1: INTRODUCTION 1-7
1.1 Web Development 1
1.2 History of Web Development 2
1.3 Project Objectives 4
1.4 Scope of the Project 4
1.5 What is a Edtech Website? 5
1.6 Categories of Edtech websites include 6
..............................

CHAPTER 2: TECHNOLOGY DESCRIPTION 8-20

2.1 Front End Technologies 8
2.1.1 HTML 8
2.1.1.1. Applications of HTML 8
2.1.1.2. Basics of HTML 9
2.1.1.3. What are tags and Attributes? 9
2.1.1.4. What are HTML Tags? 9
2.1.1.5. What are HTML attributes? 10
2.1.1.6. Advantages 10
2.1.1.7. Disadvantages 10
2.1.2 CSS 10
2.1.2.1. Advantages of CSS 11
2.1.2.2. Disadvantages of CSS 11

v
 2.1.3 Bootstrap 12
2.1.3.1. History of Bootstrap 12
2.1.3.2. Features of Bootstrap 13
14
2.1.4 Javascript
2.1. 4.1. Applications of Javascript Programming 14
2.2 Back End Technologies 15
2.2.1 SQL 15
2.2.1.1. Need of SQL 15
2.2.1.2. SQL commands and syntax 15
2.2.1.3. Advantages of SQL 16
2.2.1.4. Disadvantages of SQL 16
2.2.2 PHP 16
2.2.2.1. Why use PHP? 17
2.2.2.2. PHP features 17
2.2.2.3. Advantages of PHP 18
2.2.2.4. Disadvantages of PHP 19
..............................

CHAPTER 3: PROJECT DESCRIPTION 21-34

3.1 Hardware Requirements 21
3.1.1 Programmers End 21
3.1.2 User End 21
3.2 Software Requirements 21
3.2.1 Programmer End 21
3.2.2 User End 21
3.3 Modules 22
3.3.1 Benefits of Modular Development 22
3.3.2 Functional Modules 22
3.3.3 Non-Functional Modules 23
3.3.4 Types of non-functional requirements 23
3.4 ER Diagram 25
3.4.1 Total Participation of Entity set 30
3.4.2 ER Diagram − NotezHub 31
3.5 Data Flow Diagram 32
3.5.1 External Entity 33
3.5.2 Process 33
3.5.3 Data Store 33
vi
 3.5.4 Data Flow 34

CHAPTER 4: DESIGN METHODOLOGY 35-36

4.1 Stages of project 35
..............................

CHAPTER 5: TESTING 37-39

5.1 Web Testing 37
5.2 Types of testing 38-39
..............................

CHAPTER 6: IMPLEMENTATION 40-41

6.1 Key Implementation practices 40
6.2 Implementation Principles 41
.............................

CHAPTER 7: WEBSITE OVERVIEW 42

7.1 Homepage 42
7.2 About Us Page 43
7.3 Downloads page 44
7.4 Login Page 45
7.5 Home Page After Login 46
7.6 Download Redirection Page 47
7.7 Contact Us Page 48
7.8 Upload page 48
..............................

CHAPTER 8: DATABASES IN NOTEZHUB 49

8.1 Admin’s Table 49

..............................

CHAPTER 9: CONCLUSION 51

vii
 LIST OF TABLE

Page No.

Table 1: Types of Testing 37−39

viii
 LIST OF FIGURES

Sr. No. Figure Name Page No.

1. ER Diagram : Entity 25
2. ER Diagram : Weak Entity 25
3. ER Diagram : Key Attribute 26
4. ER Diagram : Composite Attribute 27
5. ER Diagram : Multivalued and Derived Attribute 27
6. ER Diagram : One to One Relationship 28
7. ER Diagram : One to Many Relationship 28
8. ER Diagram : Many to One Relationship 29
9. ER Diagram : Many to Many Relationship 29
10. ER Diagram with total participation ‘College’
entity set in StudyIn Relationship Set 30
11. Project − NotezHub : User Interaction 31
12. Project − NotezHub : Structure downloading and uploading 32
13. DFD : External Entity 33
14. DFD : Process 33
15. DFD : Data Store 33
16. DFD : Date Flow 34
17. DFD : EdTech Website 34
18. Home Page of NotezHub 42
19. About Us Page 43
20. Downloads Page 44
21. Login Page 45
22. Home Page After Login 46
23. Download Redirection Page 47
24. Contact Us Page 48
25. Uploads Page 48
26. NotezHub : Admin’s table 49

ix
 LIST OF SYMBOLS AND ABREVIATIONS

➢ HTML − Hypertext Markup Language

➢ CSS − Cascading Style Sheets
➢ JS − Javascript
➢ PHP − PHP : Hypertext Preprocessor
➢ WAMP − Windows Apache MySQL PHP
➢ SQL − Structured Query Language
➢ AJAX − Asynchronous JavaScript and XML
➢ DML − Data Manipulation Language
➢ DDL − Data Definition Language
➢ SNMP − Simple Network Management Protocol
➢ LDAP − Lightweight Directory Access Protocol
➢ IMAP − Internet Message Access Protocol
➢ POP3 − Post Office Protocol
➢ LINUX − Lovable Intellect Not Using XP
➢ ODBC − Open Database Connectivity
➢ OS − Operating System
➢ UNIX − Uniplexed Information and Computing System
➢ ASCII − American Standard Code For Information
Interchange
➢ TB − Terabyte (unit of storage data measurement)
➢ LAN − Local Area Network
➢ AMD − Advanced Micro Devices
➢ APU − Accelerated Processing Unit
➢ GDRP − Gross Regional Development Product.
➢ ER DIAGRAM − Entity Relationship Diagram
➢ DFD − Data Flow Diagram
➢ CGI − Common Gateway Interface (CGI)

x
 CHAPTER 1

INTRODUCTION

Web Development

Web development refers in general to the tasks associated with developing

websites for hosting via intranet or internet. The web development process includes
web design, web content development, client-side/server-side scripting and network
security configuration, among other tasks. In a broader sense, web development
encompasses all the actions, updates, and operations required to build, maintain and
manage a website to ensure its performance, user experience,and speed are optimal.
It might also, but not necessarily, include all those strategic actions needed to ensure its
proper ranking on search engine results. Usually, those tasks pertain to a different
specialization, namely search engine optimization (SEO) Web development is also
known as website development, while the professionals that maintain a website are
called web developers or (more commonly) web devs.Most web devs use Hypertext
Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript to develop
websites. HTML defines the basic framework of a website – the foundation upon which
everything else is built upon. It forms the blocks that define a page’s layout, format, and
critical components. Although it is theoretically possible to code a website on HTML
only, it will be justa barebones site with no functions unless it’s enriched with CSS
and JavaScript. CSS is used to style the content of a website using a small set of files
that are kept across the entire site. This way, whenever a change must be applied to say,
consistently change the color of all the buttons found in every page of the website, a web
dev needs to edit only a single file in CSS. The JavaScript programming language is
used to take care of the interactivity of many unique website elements. It can be used to
create effects that alter the appearance of icons and dropdown menus, add animations,
games, and other interactive elements. Web developers are usually divided into front-
end devs, back-end devs, and full-stack devs. A front-end devtakes care of all the
visual aspects of the website (layout, navigation bar, etc.), its interactivity, and binds
together all its elements. Back-end devs take care of less visible tasks that ensure the
website runs smoothly, such as managing the website’s hosting services, database, and
applications. Back-end devs might need to engineer solution to server issues by using
additional server-side languages such as Python, Ruby, Java, and PHP. Full-stack devs
are developers able to do both front-end and back-end tasks at the same time.

1
 History of Web Development

It is estimated that as of 2017 October, over 8.4 Billion devices were

connected to the internet and projections point at the total increasing to about 50 Billion
devices by 2020.With the increase in the number of devices that can connectto the
internet, and the diversity of the devices increasing each day, the internet remains still
the fastest growing technology, not only in terms of usage but also in terms of the
constant financial returns different stakeholders derive. The internet has made it easier
to deliver specialized services to anyone in any part of the globe, making the world a
global market. From shopping, to entertainment, and education, to banking, the internet
has made it easier to offer these services to the clients. And with the age of Internet of
Things dawning, how we interact with the internet will change rapidly. At the heart of
the interaction with the internet are web applications. It is through these web
applications that the end user is able to receive the servicesthey seek in the form that
they can relate to. Web applications are the drivers of information in the internet world,
as they are used to acquire as well as present data. In this article, we are going to take
a look at some of the important steps that web development has undergone so as to ensure
that web applications keep up with the fast-changing digital age. As the internet age
started, the connection speeds were terrible and as so, design was not such a big issue as
the speeds would not allow for complicated purposes. In the mid 90’s web developers
(at that time web developers were not a job title but rather they were called web
masters) of that time so the needto present content in more than just text form as it was
previously being presented. During this time Web designs began incorporating the
following features: -

• Web designs began to incorporate background images.

• Web pages were divided into columns which contained related information. This
aided a lot in customization of the sites.
• Graphic elements began appearing on web applications.
• Real-time visitor counters were now common on websites.
• Scrolling marquees where a text would be made to scroll on a certain part of the
website came into the picture.
• Animated GIFs made appearances on the websites.

Come the late 90’s, most of the designers had shifted their focus onto
creating user-centered websites and applications, how the end users would interact with
what they were designing. A very key game-changer that was introduced during this
time was Flash, which was a software program whose role in the evolution of web
design cannot be under looked. Although in recent days developers are moving away
from Flash. In 1999, Microsoft created Ajax. Ajax is the idea of using JavaScript to
enhance performance of web browsers. Although awareness on existence of Ajax was
low due to the fact that developers had not acknowledged that one could use JavaScript
to program. By the early 2000s, Cascading Style Sheets

2
(CSS) had come into the picture and was being used widely. With CSS, the web
developer could determine their website’s layout on each page. While HTML contained
the text, CSS focused on the visual presentation. With CSS, one could separate the
information on the website and how it was represented, meaning the same content
would be presented in different ways depending on the CSS. This wasa game-changer
as it made it easier to personalize the websites. CSS also ensured that websites load
faster and could easily be maintained. In 2004, Google released Gmail. Gmail was very
responsive and therefore instantly got acceptance into the market. Its responsiveness was
attributed to the use of Ajax. Gmail had JavaScript incorporated into it. It was during
this time that programmers started focusing on JavaScript for more interactive and
responsive web developments. One year later in 2005, YouTube was launched. This was
a really big milestone as it was the dawn of online video streaming. This meant that
now the internet would be used for more.This paved a way to the really interactive
and entertaining services we currently experience on the internet as online videos are
core, from e-learning platforms to entertainment sites. In order to enhance
responsiveness as well as usability, in 2006, John Resig invented jQuery. Today, John
Resig is one of the most influential web developers, as opposed to back in 2006 when
he was just a graduate when he released jQuery.

In 2007, Apple released the first generation of iPhone. This was a game-
changer as it meant that now developers had to focus on designs that would also be
responsive in mobile phones.

This was very vital as from then onwards, mobile devices would be the
major source of interaction with the internet. In 2008, Apple released its App Store which
offered third party developers the chance to have their applications downloaded by
iPhone users. This was very critical in cultivating the app culture as now developers had
a market to sell their products and services which were adaptable with mobile devices.
The first JavaScript frameworks, BackboneJS was introduced into the technology world
in 2010, and it appealed to many developers hence the continuous uptake of JavaScript.

With the introduction of smartphones, and fast internet connectivity, web

development projects were now more focused on reducing loading time, security and
ease of usability. So, to solve the problem of fixed size webpages, and to ensure that as
many devices are adaptable as possible, the idea of “one web” comes into light. This is
where adaptive design and responsive features are embedded in the CSS code. This
allows the website or web application to automatically reorganize its structure and visual
presentation while ensuring the content is fully displayed. This has been enhanced by
the introduction of HTML5 and CSS3 in 2014, which have made it possible for modern
web applications to work under the “one web” concept

3
Project Objective

Throughout the project, our team vision to provide our Students with the best services we can
and help them with more and more facilities. We envision on following services to be provided
to the website viewers.

Scope of the Project

In the modern age, access to information is the key to professional success. Gone are the days when
education and learning were confined to colleges and universities. In the digital age, learning is open to
all. E-learning is a boon to people who face obstacles in getting a traditional college education. Online
learning has revolutionized the knowledge economy on a global scale. No matter which background one
comes from, there are a plethora of online courses certification programs that can expand your knowledge
arsenal and make you better equipped in today’s competitive job market.

Online Education Scenario in India:

A recent study made by the World Economic Forum showed that after the United States, India has the
largest number of online course enrollments with more than 2,00,000 students. Reputed universities offer
top-notch certified online courses, bringing world-class professors and instructors to impart learning to
the students.

Employment Opportunities:

Quality employment generation is the positive outcome of certified online courses from reputed
institutions. With access to skilled teachers and quality learning resources, the sky’s the limit for those
enterprising students who wish to expand their knowledge repository and land coveted jobs in the public
and private sector.

4
Scope of Online Learning:

The main purpose of education is to achieve upward mobility. Online courses certification
programs have been able to provide inexpensive education to the masses and also save time, energy
and money.

Electronic-learning through certified online courses provides a wide range of courses that caters to the
core interests of the student, thus creating a fertile arena for future advancement.
There is a misplaced notion, that employers prefer students with traditional brick and mortar college
degrees. On the contrary, corporate organizations in India are recognizing the high skill levels of students
who have undergone online courses certification programs from highly acclaimed educational
institutions.

The online circle:

Online learning is a relatively new form of education. Students, through the use of the internet, can easily
study their programmes via a new instructional medium. E-learning educates people of all different ages;
there are no leaps and bounds in the scheduling system rather online learning creates a momentum of
flexible academic scenario.
Keeping the facts in mind, the online education system has been in vogue since 20 years now. This method
has now been adopted on the primary level, as well as on a secondary level. Almost every third educational
institution gives you the freedom of online learning but ‘Talentedge’ — a pioneer of this arena not only
strives to give you the best online education but provides ‘Live video’ learning sessions with uniformity of
lecture content and interactive sessions with faculty. It is easily accessed anywhere and anytime; the
website is mobile friendly and gives a secure online learning environment.
Now you don’t have to depend on the level of interaction in a classroom setting. It has limited the
individual learning differences between students. Classroom environment tends to group students together
in large numbers, often making it difficult for instructors to isolate learning deficiencies and provide the
necessary close attention. But online education gives attention to all individuals.

5
What is An EdTech website?

A learning system based on formalised teaching but with the help of electronic resources is known as E-
learning. While teaching can be based in or out of the classrooms, the use of computers and the Internet
forms the major component of E-learning. E-learning can also be termed as a network enabled transfer of
skills and knowledge, and the delivery of education is made to a large number of recipients at the same or
different times. Earlier, it was not accepted wholeheartedly as it was assumed that this system
lacked the human element required in learning.

However, with the rapid progress in technology and the advancement in learning systems, it is now
embraced by the masses. The introduction of computers was the basis of this revolution and with the
passage of time, as we get hooked to smartphones, tablets, etc, these devices now have an importance
place in the classrooms for learning. Books are gradually getting replaced by electronic educational
materials like optical discs or pen drives. Knowledge can also be shared via the Internet, which is
accessible 24/7, anywhere, anytime.

Description: E-learning has proved to be the best means in the corporate sector, especially when training
programs are conducted by MNCs for professionals across the globe and employees are able to acquire
important skills while sitting in a board room, or by having seminars, which are conducted for employees
of the same or the different organizations under one roof. The schools which use E-learning technologies
are a step ahead of those which still have the traditional approach towards learning.

No doubt, it is equally important to take forward the concept of non-electronic teaching with the help of
books and lectures, but the importance and effectiveness of technology-based learning cannot be taken
lightly or ignored completely. It is believed that the human brain can easily remember and relate to what
is seen and heard via moving pictures or videos. It has also been found that visuals, apart from holding
the attention of the student, are also retained by the brain for longer periods. Various sectors, including
agriculture, medicine, education, services, business, and government setups are adapting to the concept of
E-learning which helps in the progress of a nation.

6
 CHAPTER 2

TECHNOLOGY DESCRIPTION

Front End Technologies

HTML:
HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages. HTML was created by Berners- Lee in late
1991 but "HTML 2.0" was the first standard HTML specification which was published
in 1995.Some of the key advantages of learning HTML:

• Create Web site - You can create a website or customize an existing web template
if you know HTML well.

• Become a web designer - If you want to start a career as a professional web designer,
HTML and CSS designing is a must skill.

• Understand web - If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield best results.

• Learn other languages - Once you understand the basic of HTML then other related
technologies like javascript, php, or angular are become easier to understand.

Applications of HTML

• Web pages development - HTML is used to create pages which are renderedover
the web. Almost every page of web is having html tags in it to render its details in
browser.

• Internet Navigation - HTML provides tags which are used to navigate from one
page to another and is heavily used in internet navigation.

• Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs,
desktop or laptops owing to responsive design strategy.

7
• Offline support-HTML pages once loaded can be made available offline on the
machine without any need of internet.

• Game development- HTML5 has native support for rich experience and is now
useful in gaming development arena as well.

Basics of HTML:

• All HTML documents must start with a document type declaration: <!DOCTYPE
html>.

• The HTML document itself begins with <html> and ends with </html>.

• The visible part of the HTML document is between <body> and </body>.

What are Tags and Attributes?

Tags and attributes are the basis of HTML.

They work together but perform different functions – it is worth investing 2 minutes
in differentiating the two.

What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually
enclosed in angle brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.

What are HTML Attributes?

Attributes contain additional pieces of information. Attributes take the form of an

opening tag and additional info is placed inside.
An example of an attribute is:
<imgsrc="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of
the <img> tag.

8
Golden Rules to Remember:

1. The vast majority of tags must be opened (<tag>) and closed (</tag>) with the
element information such as a title or text resting between the tags.
2. When using multiple tags, the tags must be closed in the order in which they
were opened. For example:

<strong><em>This is really important!</em></strong>

Advantages:

▪ HTML is widely used.

▪ Every browser supports HTML Language.
▪ Easy to learn and use.
▪ Do not need to purchase any extra software because it is by default in every
window.

Disadvantages:

▪ HTML can create only static and plain pages so if we need dynamic pages
then HTML is not useful.
▪ I need to write a lot of code for making a simple webpage.
▪ Security features are not good at HTML.
▪ If we need to write long code for making a webpage then it produces some
complexity.

CSS:

CSS is the language we use to style an HTML document.CSS describes how HTML
elements should be displayed.CSS is defined as a method sheet language that provides
web designers control over how an internet site communicates with web browsers
including the formatting and display of their HTML documents.CSS or cascading sheet
may be a text-based coding language that specifies the website formats and the way a
site communicates with web browsers. The language allows web developers to
regulate various style elements and functionalities, like layout, color, fonts, and
therefore the formatting and display of HTML documents.

CSS example:
body {
background-color: lightblue;
}

10
h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}

Advantages of CSS:

• CSS plays an important role, by using CSS you simply got to specify a repeated style
for element once & use it multiple times as because CSS will automatically apply the
required styles.

• The main advantage of CSS is that style is applied consistently across variety of sites.
One instruction can control several areas which is advantageous.

• Web designers needs to use few lines of programming for every page improving site
speed.

• Cascading sheet not only simplifies website development, but also simplifies the
maintenance as a change of one line of code affects the whole web site and maintenance
time.

• It is less complex therefore the effort is significantly reduced.

• It helps to form spontaneous and consistent changes.

• CSS changes are device friendly. With people employing a batch of various range
of smart devices to access websites over the web, there’s a requirement for responsive
web design.

Disadvantages of CSS:

• CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers.

• With CSS, what works with one browser might not always work with another.

• The web developers need to test for compatibility, running the program across
multiple browsers.

11
• There exists a scarcity of security.

• After making the changes we need to confirm the compatibility if they appear. The
similar change effects on all the browsers.

• The programming language world is complicated for non-developers and beginners.

Different levels of CSS i.e. CSS, CSS 2, CSS 3 are often quite confusing.

• Browser compatibility (some styles sheet are supported and some are not).

• CSS works differently on different browsers. IE and Opera supports CSS as different
logic.

• There might be cross-browser issues while using CSS.

Bootstrap:

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first

front-end web development. It contains CSS- and (optionally) JavaScript- based design
templates for typography, forms, buttons, navigation, and other interface components.

Bootstrap is among the most starred projects on GitHub, with more than
142,000 stars, behind freeCodeCamp (almost 312,000 stars) and marginally behind
Vue.js framework

History of bootstrap:

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto

and Jacob Thornton at Twitter as a framework to encourage consistency across internal
tools. Before Bootstrap, various libraries were used for interface development, which
led to inconsistencies and a high maintenance burden. According to Twitter developer
Mark Otto:A super small group of developers and I got together to design and build a
new internal tool and saw an opportunity to do something more. Through that process,
we saw ourselves build something much more substantial than another internal tool.
Months later, we ended up with an early version of Bootstrap as a way to document and
share common design patterns and assets within the company

12
Features of Bootstrap:

• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap

• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and

desktops

• Mobile-Friendly: Mobile-first approach: In Bootstrap 3, mobile-first styles are

part of the core framework

• Simple Integration: Bootstrap can be simply integrated along with distinct other
platforms and frameworks, on existing sites and new ones too and one more things
you can also utilize particular elements of Bootstrap along with your current CSS.

• Pre-styled Components: Bootstrap approaches with pre-styled components for

alerts, dropdowns, nav bars, etc.

• Customizable Bootstrap: The Bootstrap can be customized as per the designs of

your project.

• Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome,

Firefox, Internet Explorer, Safari, and Opera)

• Great grid system: Bootstrap is built on responsive 12-column grids, layouts and
components. Whether you need a fixed grid or a responsive, it's only a matter of a
few changes.

• Bundled JavaScript plugins: The components such as drop-down menu are made
interactive with the numerous JavaScript plugins bundled in the bootstrap package.

• Extensive list of components: Whether you need drop down menus, pagination
or alert boxes, Bootstrap has got your covered. Some of the components pre styled
are; Dropdowns, Button Groups, Navigation Bar, Breadcrumbs, Labels & Badges,
Alerts, Progress Bar, And many others.

• Base styling for most HTML elements: A website has many different elements such
as headings, lists, tables, buttons, forms, etc. The HTML elements for which styles
are provided are; Typography Code, Tables, Forms, Buttons, Images, Icons.

13
• Good documentation: Not only does Bootstrap offer styling for almost every
element a typical website or web application requires, it also provides a great
documentation with examples and demo that only make it more easier for even
someone new.

JavaScript

JavaScript is a lightweight, interpreted programming language. It is designed for

creating network-centric applications. It is complimentary to and integrated with Java.
JavaScript is very easy to implement because it is integrated with HTML. It is open
and cross-platform.

Applications of JavaScript Programming

As mentioned before, JavaScript is one of the most widely used programming

languages (Front-end as well as Back-end). It has its presencein almost every area of
software development. I'm going to list few of them here:

• Client-side validation - This is really important to verify any user input before
submitting it to the server and JavaScript plays an important role in validating
those inputs at front-end itself.

• Manipulating HTML Pages - JavaScript helps in manipulating HTML page on the

fly. This helps in adding and deleting any HTML tag very easily using JavaScript
and modify your HTML to change its look and feel based on different devices and
requirements.

• User Notifications - You can use JavaScript to raise dynamic pop-ups on the
webpages to give different types of notifications to your website visitors.

• Back-end Data Loading - JavaScript provides Ajax library which helps in loading
back-end data while you are doing some other processing. This really gives an
amazing experience to your website visitors.

• Presentations - JavaScript also provides the facility of creating presentations which

gives website look and feel. JavaScript provides RevealJS and BespokeJS libraries
to build a web-based slide presentation.

14
 • Server Applications - Node JS is built on Chrome's JavaScript runtime for building
fast and scalable network applications. This is an event-based library which helps in
developing very sophisticated server applications including Web Servers.

Back End Technologies

SQL:

SQL is a database computer language designed for the retrieval and management of
data in a relational database. SQL stands for Structured Query Language. SQL is
Structured Query Language, which is a computer language for storing, manipulating
and retrieving data stored in a relational database. SQL is the standard language for
Relational Database System. All the Relational Database Management Systems
(RDMS) like MySQL, MS Access, Oracle, Sybase, Informix, Postgres and SQL
Server use SQL as their standard database language.
Also, they are using different dialects, such as –
• MS SQL Server using T-SQL,
• Oracle using PL/SQL,
• MS Access version of SQL is called JET SQL (native format) etc.

Need of SQL

• It is widely used in the Business Intelligence tool.

• Data Manipulation and data testing are done through SQL.
• Data Science tools depend highly on SQL. Big data tools such as Spark, Impala
• are dependent on SQL.
• It is one of the demanding industrial skills.

SQL commands and syntax

SQL commands are divided into several different types, among them data manipulation
language (DML) and data definition language (DDL) statements, transaction controls
and security measures. The DML vocabulary is used to retrieve and manipulate data,
while DDL statements are for defining and modifying database structures. The
transaction controls help manage transaction processing, ensuring that transactions are
either completed or rolled back if errors or problems occur. The security statements are
used to control database access as well as to create user roles and permissions.

15
Advantages of SQL:

SQL has many advantages which makes it popular and highly demanded. It is a
reliable and efficient language used for communicating with the database. Some
advantages of SQL are as follows:

• Faster Query Processing: Large amount of data is retrieved quickly and efficiently.
Operations like Insertion, deletion, manipulation of data is also done in almost
no time.

• No Coding Skills: For data retrieval, large number of lines of code is not required.
All basic keywords such as SELECT, INSERT INTO, UPDATE, etc are used and
also the syntactical rules are not complex in SQL, which makes ita user-friendly
language.

• Standardised Language: Due to documentation and long establishment over years,

it provides a uniform platform worldwide to all its users.

• Portable: It can be used in programs in PCs, server, laptops independent of any

platform (Operating System, etc). Also, it can be embedded with other applications
as per need/requirement/use.

• Interactive Language: Easy to learn and understand, answers to complex queries

can be received in seconds.

Disadvantages of SQL:

Although SQL has many advantages, still there are a few disadvantages.
Various Disadvantages of SQL are as follows:

• Complex Interface: SQL has a difficult interface that makes few users
uncomfortable while dealing with the database.

• Cost: Some versions are costly and hence, programmers cannot access it.

• Partial Control: Due to hidden business rules, complete control is not given to
the database.

PHP:

The PHP Hypertext Pre-processor (PHP) is a programming language that allows web
developers to create dynamic content that interacts with databases. PHP is basically
used for developing web-based software applications.

16
Characteristics of PHP
Five important characteristics make PHP's practical nature possible –
• Simplicity
• Efficiency
• Security
• Flexibility
• Familiarity

Why use PHP?

PHP is a server-side scripting language, which is used to design the dynamic web
applications with MySQL database.

• It handles dynamic content, database as well as session tracking for the website.
• You can create sessions in PHP.
• It can access cookies variable and also set cookies.
• It helps to encrypt the data and apply validation.
• PHP supports several protocols such as HTTP, POP3, SNMP, LDAP, IMAP, and
many more.
• Using PHP language, you can control the user to access some pages of your website.
• As PHP is easy to install and set up, this is the main reason why PHP is the best
language to learn.
• PHP can handle the forms, such as - collect the data from users using forms, save
it into the database, and return useful information to the user. For example -
Registration form.

PHP Features

PHP is very popular language because of its simplicity and open source.
There are some important features of PHP given below:

• Performance: PHP script is executed much faster than those scripts which are
written in other languages such as JSP and ASP. PHP uses its own memory, so
the server workload and loading time is automatically reduced, which results in
faster processing speed and better performance.

• Open Source:
PHP source code and software are freely available on the web. You can develop all
the versions of PHP according to your requirement without paying any cost. All
its components are free to download and use.

17
• Familiarity with syntax:
PHP has easily understandable syntax. Programmers are comfortable coding
with it.

• Embedded: PHP code can be easily embedded within HTML tags and script.

• Platform Independent:PHP is available for WINDOWS, MAC, LINUX & UNIX

operating system. A PHP application developed in one OS can be easily executed in
other OS also.
• Database Support: PHP supports all the leading databases such as MySQL, SQLite,
ODBC, etc.

• Error Reporting: PHP has predefined error reporting constants to generate an error
notice or warning at runtime. E.g., E_ERROR, E_WARNING, E_STRICT,
E_PARSE.

• Loosely Typed Language:PHP allows us to use a variable without declaring its

datatype. It will be taken automatically at the time of execution based on the type
of data it contains on its value.

• Web servers Support: PHP is compatible with almost all local servers usedtoday
like Apache, Netscape, Microsoft IIS, etc.

• Security: PHP is a secure language to develop the website. It consists of multiple

layers of security to prevent threads and malicious attacks.

• Control: Different programming languages require long script or code, whereas

PHP can do the same work in a few lines of code. It has maximum control over the
websites like you can make changes easily whenever you want.

• A Helpful PHP Community: It has a large community of developers who regularly

updates documentation, tutorials, online help, and FAQs. Learning PHP from the
communities is one of the significant benefits.

Advantages of PHP:

• Most important advantage of PHP is that it’s open source and free of cost. It is often
downloaded anywhere and readily available to use for event of web applications.

18
• It is platform independent. PHP based applications can run on any OS like UNIX,
Linux and windows, etc.

• Application can easily be loaded which are based on PHP and connected to database.
it’s mainly used due to its faster rate of loading over slow internet and speed than
another programming language.

• It has less learning curve, because it is straightforward and straightforward to use.

If a private knows C programming can easily work on PHP.

• It is more stable from a few years with assistance of providing continuous support
to various versions.

• It helps in reusing an equivalent code and no got to write lengthy code and
sophisticated structure for event of web applications.

• It helps in managing code easily.

• It has powerful library support to use various function modules for data
representation.

• PHP’s built-in database connection modules help in connecting database easily

reduce trouble and time for development of web applications and content-based sites.

• Popularity of PHP gave rise to various community of developers, a fraction of which

may be potential candidates for hire.

• Flexibility makes PHP ready to effectively combine with many other programming
languages in order that the software package could use foremost effective technology
for every particular feature.

Disadvantages of PHP:

• It is not that secure due to its open-source, because the ASCII text file are often easily
available.

• It is not suitable for giant content-based web applications.

• It has a weak type, which can cause incorrect data and knowledge to user.

19
• PHP frameworks got to learn to use PHP built-in functionalities to avoid writing
additional code.

• Using more features of PHP framework and tools cause poor performance of online
applications.

• PHP don’t allow change or modification in core behaviour of online applications.

• The PHP frameworks aren’t an equivalent in behaviour so does their performance

and features.
• While PHP may be a powerful tool supported by an outsized community and
plentiful reference documentation, there are easier programming languages for web
apps.

• It is widely believed by the developers that PHP features a poor quality of handling
errors. PHP lacks debugging tools, which are needed to look for errors and warnings.
PHP has a smaller number of debugging tools in comparison to other programming
languages.

• It’s highly tough to manage because, it’s not competent modular. It already imitates
the features of Java language.

20
 CHAPTER 3

PROJECT DESCRIPTION

Hardware requirement:

Programmer End:

• Processor: AMD A6-7310 APU with AMD Radeon R4 Graphics 2.00 GHz
• RAM 4GB
• System type: 64-bit operating system, x64-based processor
• Windows specification
o Windows edition: Windows 10 pro Education
• Hard disk drive:1 TB

User End:

• Internet accessible devices such as Smart Phones, PC, Laptops, etc.

• Network Connection
o Ethernet cable (LAN) or wireless adapter(wi-fi)

Software requirement:

Programmer End:

• Server: WAMP
• Database: SQL
• Editor: VS Code
• Web Browsers: Chrome, Mozilla, Safari (for testing purposes…also some
browsers provide responsive or mobile view)
• Browser Add-ons: Firebug, Web Developer etc

User End:

• Web Browsers: Chrome (highly recommended)

• Compatible on other browsers as well such as Mozilla, Safari, etc.

21
Modules

Modules are common website components that are used like building blocks to create
pages. Each module is a collection of “generic” elements — images, text, buttons, etc.
Many modules are combined to build a page. This breaks complex problems into
smaller components that are easier to understand, communicate and build.

Benefits of Modular Development

Modular development has many benefits as modules are:

• Flexible – Content creators can mix and match design elements as needed.

• Adaptable – Page design can be easily amended based on a website’s needs.

• Testable – By quickly changing modules, marketers can A/B test and use analytics
to see what works.

• Easy to Maintain – Using pre-styled modules make it easy to maintain a consistent

look and feel across an entire website, even when the end user is a novice.

• Time Efficient – The biggest reason I love modular development is because it saves
time. Why recode what you’ve already coded? Don’t repeat yourself, and spend that
time on custom coding instead.

Functional Modules

➢ Home Page: This is the main page of our website containing options to navigate to
the services we provide, helping users to log in/sign up telling the viewersabout
our website. It also contains reviews by users about their experience withour
website.

➢ Services: This module contains different services provided by our website. These
facilities include –

22
➢ Log In: Students log in through their username and password. the system checks for
the username in database of WAMP Server and checks whether the entered
password is correct. If the password gets a match the user is directed to the user’s
account in the website, else a message is shown as:” Incorrect Password!”.

➢ Sign up: New Users can connect themselves with us by providing theiremail id,
name and other details.

➢ About Us: This module contains the information of the company/website our
contact details for users to check for any queries directly with us.

➢ Terms and Conditions: This module contains the terms and conditions that the
users are required to check as accepted while downloading.

➢ Settings: This module enables user to change their password and update their contact
details.

Non-functional Modules:

NFRs are among the most important things to define when building the specification
for any platform, as most have a direct impact on the experience and satisfaction of
your users.

Types of non-functional requirements:

There are many other types of NFRs, all of which can have a critical impact on the
performance, scalability, and usability of your e-commerce platform. These include:

➢ Security – it is important to specify the level of security that should be met such
as the OWASP top 10

➢ Privacy – meeting basic requirements for GDPR

➢ Scalability and performance – ensuring that the system can scale to meet expected
traffic and order volume at normal and peak times.

23
➢ Speed of key user journeys – defining how long each step with key user
journeys will take.

➢ Speed of web services – defining how long web services will take to provide a
response.

➢ Accessibility – ensuring that the platform meets the basic accessibility standards
throughout.

➢ Documentation – ensuring that the platform is sufficiently documented.

➢ Quality – even the best e-commerce platforms can be used badly so you should
insist that code is developed to a good quality standard.

➢ Extensibility – ensuring that the platform is extended in such a way to make

future development feasible.

➢ Data integrity and retention – defining how long data should be stored and
how the integrity of data is maintained.

➢ Testing – defining how unit testing will be built into the solution.

➢ Compatibility – ensuring that the platform can be easily integrated with 3rd
party systems.

➢ Search – defining how quickly the system will return search results.

➢ Availability – defining the agreed uptime of the platform under normal

conditions.

➢ Infrastructure – defining the infrastructure performance thresholds (CPU and

memory usage).

Following Non-functional requirements will be there in the Insurance on internet:

i). Secure access of confidential data (customer’s details).

ii). 24 X 7 availability.
iii). Better component design to get better performance at peak time.
iv). Flexible service-based architecture will be highly desirable for future extension.

Non-functional requirements define system properties and constraints. It

arises through user needs, because of budget constraints or organizational policies, or
due to the external factors such as safety regulations, privacy registration and so on.

24
ER diagram:

An Entity–relationship model (ER model) describes the structure of a database with

the help of a diagram, which is known as Entity Relationship Diagram (ER
Diagram). An ER model is a design or blueprint of a database that can later be
implemented as a database. The main components of E-R model are: entity set and
relationship set.ER diagram has three main components:
1. Entity
2. Attribute
3. Relationship

➢ Entity

An entity is an object or component of data. An entity is represented as

rectangle in an ER diagram.

For example: In the following ER diagram we have two entities Student and
College and these two entities have many to one relationship as many students study in
a single college.

▪ Weak Entity:

An entity that cannot be uniquely identified by its own attributes and relies
on the relationship with other entity is called weak entity. The weak entity is represented
by a double rectangle. For example – a bank account cannot be uniquely identified
without knowing the bank to which the account belongs, so bank account is a weak
entity.

25
 ➢ Attribute:

An attribute describes the property of an entity. An attribute is represented as an oval

in ER-diagram. Different types of attributes are:

o Key attribute
o Composite attribute
o Multivalued attribute
o Derived attribute

▪ Key attribute:

A key attribute can uniquely identify an entity from an entity set. For
example, student roll number can uniquely identify a student from a set of students. Key
attribute is represented by oval same as other attributes however the text of key attribute
is underlined.

Figure 3: ER Diagram : Key Attribute

▪ Composite attribute:
An attribute that is composed of multiple attributes is known as composite
attribute. For Example, a student address is a an attribute that is composed of its country,
state and pin code.

26
Figure 4: ER Diagram : Composite Attribute

▪ Multivalued attribute:

An attribute that can hold multiple values is known as multivalued attribute. It is

represented with double ovals in an ER Diagram. For example – A person can have more than
one phone numbers so the phone number attribute is multivalued.

▪ Derived attribute:

A derived attribute is one whose value is dynamic and derived from

another attribute. It is represented by dashed oval in an ER Diagram. For example –
Person age is a derived attribute as it changes over time and can be derived from another
attribute (Date of birth).

E-R diagram with multivalued and derived attributes:

Figure 5: ER Diagram : Multivalued and Derived Attribute

27
➢ Relationship

A relationship is represented by diamond shape in ER diagram, it shows

the relationship among entities. There are four types of relationships:

1. One to One
2. One to Many
3. Many to One
4. Many to Many

▪ One to One Relationship

When a single instance of an entity is associated with a single instance of another entity
then it is called one to one relationship. For example, a person has only one passport and
a passport is given to one person.

Figure 6: ER Diagram : One to One Relationship

▪ One to Many Relationship

When a single instance of an entity is associated with more than one instances of another
entity then it is called one to many relationship. For example – a customer can place
many orders but a order cannot be placed by many customers.

Figure 7: ER Diagram : One to Many Relationship

28
▪ Many to One Relationship

When more than one instances of an entity is associated with a single instance of
another entity then it is called many to one relationship. For example – many
students can study in a single college but a student cannot study in many colleges at
the same time.

Figure 8 : ER Diagram : Many to One Relationship

▪ Many to Many Relationship

When more than one instances of an entity is associated with more than one
instances of another entity then it is called many to many relationship. For example,
a can be assigned to many projects and a project can be assigned to many students.

Figure 9: ER Diagram : Many to Many Relationship

29
Total Participation of an Entity set

A Total participation of an entity set represents that each entity in entity set
must have at least one relationship in a relationship set. For example: In the below
diagram each college must have at-least one associated Student.

Figure 10: ER Diagram with total participation College entity set in StudyIn
Relatiosnhip Set

30
ER Diagram −

Admin and User Interaction:

Figure 11: Project – NotezHub

31
 Login Module

Figure 12: Project NotezHub

Data flow diagram:

Also known as DFD, Data flow diagrams are used to graphically represent the flow
of data in a business information system. DFD describes the processes that are
involved in a system to transfer data from the input to the file storage and reports
generation.
Data flow diagrams can be divided into logical and physical. The logical
data flow diagram describes flow of data through a system to perform certain
functionality of a business. The physical data flow diagram describes the
implementation of the logical data flow.

32
External Entity
An external entity can represent a human, system or subsystem. It is where certain
data comes from or goes to. It is external to the system we study, in terms of the
business process. For this reason, people used to draw external entities on the edge
of a diagram.

Figure 13: DFD : External Entity

Process
A process is a business activity or function where the manipulation and
transformation of data take place. A process can be decomposed to a finer level of
details, for representing how data is being processed within the process.

Figure 14: DFD :Process

Data Store
A data store represents the storage of persistent data required and/or produced by the
process. Here are some examples of data stores: membership forms, database tables,
etc.

Figure 15: DFD : Data Store

33
 Data Flow
A data flow represents the flow of information, with its direction represented by an
arrowhead that shows at the end(s) of flow connector.

Figure 16: DFD : Data Flow

DFD:

Figure 17: DFD : Notes Downloading and Uploading website

34
 CHAPTER 4

DESIGN METHODOLOGY

Design methods are procedures, techniques, aids, or tools for designing.

They offer a number of different kinds of activities that a designer might use within an
overall design process.
If you decided to order website development from the IT company, then you
will have to face the fact that sometimes you will contact with developers. Communicate
with people from another area of work, delve into the work process, control and test their
results. IT companies don’t work basing on the one principle, there are different
approaches to work with projects. And we want to applications.The differences are
due to the fact of how the workflow is built, which tools areused, what principles
and rules are emphasized. Recently, some of these methodologies found the application.
So, when you finish reading this article, youwill know something new and useful for
your business too.

4.1 Stages of project

• Getting to know a client: After the company gets a message from developers' team,
a project manager (PM from here) and a client’s representative discuss the client’s
needs (or the specifications if clients already know what they want).

• Discovery and Project Research: Discovery means that the development team only
investigates client’s business requirements and decide for themselves whether they
can really solve a client’s problem. An outcome is getting to knowa client's goal,
business specifics, and initial request If everything is good and the development team
can help the client, the PM passes the tech documentation and specifications to the
Lead Developer, makes the project aims and requirements clear.

• Wireframe and Prototypes creation: Following is the work on the wireframes and
prototypes in collaboration with the client and the team’s designer.

• Design: Working on design comps until final approval. The company carefully asks
for all the details about the impression a client’s project should create.

35
• Development: Initial installation and configuration go first. Then developers set
up all necessary settings of modules. They make sure every website page was
approved, and the client has gone through demo versions of every feature on the
website. It was a little hint from the development side to the client: check and test all
the options. There are no minor ones when it comes to website usage. Believe us,
your website’s visitors will notice every teeny-tiny bug. Depending on the project,
the front-end and back-end development can go either in parallel or the back-end is
followed by the front-end. A front-end developer implements all visual features and
makes sure everything is pixel-perfect, and that a website is cross browser
compatible.

• Quality Assurance: Remember the hint from stage 5? Never ever omit the testing
stage. After the integration test, we move to the functional and UI testsand end up
with manual tests.

• Post Launch QA and Maintenance: Besides maintenance and support, the dev-
team usually teaches the client how to use a website, manage it and add content, etc.

36
 CHAPTER 5

TESTING

Web Testing

Tourism website testing is defined as testing of an online tourism application. It helps

in the prevention of errors and adds value to the information related to any destination
and information provided by the users.
The objective of testing is to ensure:

• Software reliability
• Software quality
• System Assurance
• Optimum performance and capacity utilization

Setting up an E-commerce system is a complex process and subject to many

market-specific variables. To maintain the integrity of the E Commerce system, testing
becomes compulsory

Types of testing for e-commerce system:

Sr. No. Type of Testing Testing Process

1 Browser compatibility
• Lack of support for early browsers
• Browser specific extensions
• Browser testing should cover the
main platforms (Linux, Windows,
Mac etc.)

37
2 Page display • Incorrect display of pages
• Runtime error messages
• Poor page download time
• Dead hyperlink, plugin
dependency, font sizing, etc.

3 Session Management • Session Expiration

• Session storage

4 Usability • Non-intuitive design

• Poor site navigation
• CatLog navigation
• Lack of help-support

5 Content Analysis • Misleading, offensive and litigious

content
• Royalty free images and copyright
infringement
• Personalization functionality
• Availability 24/7

6 Availability • Denial of service attacks

• Unacceptable levels of
unavailability

7 Back-up and Recovery • Failure or fall over recovery

• Backup failure
• Fault tolerance

8 Transactions • Transaction Integrity

• Throughput
• Auditing

9 Shopping order processing • Shopping cart functionality

and purchasing • Order processing
• Payment processing
• Order tracking

38
 10 Internationalization • Language support
• Language display
• Cultural sensitivity
• Regional Accounting

11 Operational business • How well e-procedure copes

procedures • Observe for bottlenecks

12 System Integration • Data Interface format

• Interface frequency and activation
• Updates
• Interface volume capacity
• Integrated performance

13 Performance • Performance bottlenecks

• Load handling
• Scalability analysis

14 Login and Security • Login capability

• Penetration and access control
• Insecure information transmission
• Web attacks
• Computer viruses
• Digital signatures

Table 1: Types of Testing

39
 CHAPTER 6

IMPLEMENTATION

Implementation is the process of building the web according to its

design. A web implementing tool creates hypertext markup language (HTML),
Common Gateway Interface (CGI) programs, and/or Java scripts and/or applets.

The implementation process resembles software development because it

involves using a specific syntax for encoding web structures or a programming language
in a formal language in computer files. Although there are automated tools to help with
the construction of HTML documents, a thorough grounding in HTML enriches the web
implementor's expertise.

Key Implementation Practices

• At the outset, create an extendible directory and file structure to manage the
web's files and/or software components (CGI or Java programs).

• Use of HTML tools where helpful.

• Check the web's implementation in various browsers.

• Use templates or web generating schemes for supporting a consistent look and
feel.

Implementation Principles

Based on the principles for the Web's media characteristics and qualities, as well as user
needs and experience, web implementation consists of principles that can assist you in
decision making. Overall, these principles recognize the dynamic, porous nature of the
Web and how the strategies of the design process attempt to take these into account.
Web implementation

• Works continuously. Just as a web's development process often is continuous,

so is a web's implementation. Because of this, web-implementation procedures

40
 should be designed with process orientation, allowing for replication, improvement,
and reliability in file management and HTML coding techniques.In many cases, a
web, once implemented, might remain static. But the dynamic characteristic of the
Web often requires a web to be redesigned and implemented.

• Involves separation of tasks. All web-development processes involve separating

the processes of web development so that the implementer makes the decisions about
specific HTML structures "just in time." In other words, a web planner or a web
designer should not be making decisions about a web at the HTML level. Instead,
the web implementer makes decisions about the web based on tolerances and
instructions provided.

• Involves layering of detail. A web implementer can work most efficiently by

creating generic web components or software that works with templates for creating
HTML files. This same template idea can be used to design file systems as well as
page layout to achieve the goals of a consistent web.

41
 CHAPTER 7

NotezHub: HOME PAGE

Homepage :

Figure 18: Home Page of NotezHub

42
About Us :

Figure 19: About Us Page

43
Downloads page :

Figure 20: Downloads

44
Login Page:

Figure 21: login

45
Home Page After Login:

Figure 22: HomePage After Login

46
Contact Us:

Figure 23: Contact us

Upload Page:

Figure 24: Upload Page

47
Download Redirection:

Figure 25: Download Redirection

48
 CHAPTER 8

DATABASES IN NotezHub

8.1 Admin’s TABLE:

Figure 26: Admin’s table

49
50
 CHAPTER 9

CONCLUSION

The purpose and objective of project is achieved by providing extremely rich graphical
user interface, web page designing in an easy and aesthetic form. Flexibility in
designing makes user explore their imagination and thus, even a novice user can dream
and accomplish their wish of web page designing. The website will serve as an all-in-
one place for user who wants to study and understand concepts.

In general, today’s businesses must always strive to create the next best thing that
customers will want because customers continue to desire their products, services etc.
to continuously be better, faster, and cheaper. In this world of new technology,
businesses need to accommodate to the new types of customer needs and trends because
it will prove to be vital to their business’ success and survival. In the new generation of
technology, it has become necessary to bring our business in an online form. An easy-
to-use website will attract more users and increase the website’s business. More user
will also lead to increase of importance and necessity of notes for students.

The website is easy to access and can be run on any device irrespective of platform as
it is made with help of Visual Studio Code Software. The right resources also make it
easy for surfers to use our site. The standard tools used for creating the website will
ensure that things such as navigation, menus and layout conform to current practices
with which every web user is familiar with. Hence the website will provide the user
with easy and safe environment.

51
52
 CURRICULUM VITAE

UJJWAL SINHA
@ sinha.ujjwal221@gmail.com
 7459804045
PERSONAL STATEMENT:
I am a hardworking and efficient person in the field of management and
coding. My prior experience has been by working on a project of website
development. I seek more opportunity to work in the technical field to
enhance my knowledge.

EDUCATION:

Sr. no. Qualification Board Marks

1 Bachelor of Computer Application University Of
Lucknow
2 Intermediate CBSE 72%

3 High School CBSE 8.8 CGPA

SKILLS:
• Language- JavaScript, C++, HTML,CSS, PHP and SQL.
• Full Stack Development.
• Coordination Skills.

PROJECTS AND TRAININGS:

• Advertisement Maker Website
• Handwritten Notes Downloading and Uploading System Website
• Cocktail data fetching Web Application using ReactJS

CAREER OBJECTIVE:
• Want to gain experience of working in professional environments where my skills get tested.
• I want to learn more through the work I do and always keep on developing.

DECLARATION:
I, Ujjwal Sinha, declare that all the information provided are true as per the best of my knowledge.

(Ujjwal Sinha)

53
 CURRICULUM VITAE

AKASH MAURYA
@ maurya.akash2000@gmail.com
 8726661843
PERSONAL STATEMENT:
I am a hardworking and efficient person in the field of management and
coding. My prior experience has been by working on a project of website
development. I seek more opportunity to work in the technical field to
enhance my knowledge.

EDUCATION:

Sr. no. Qualification Board Marks

1 Bachelor of Computer Application University Of
Lucknow
2 Intermediate CBSE 89%

3 High School CBSE 9.2 CGPA

SKILLS:
• Language- Java, C++, HTML and CSS.
• Creative Writing.
• Coordination Skills.

PROJECTS AND TRAININGS:

• Restaurant management Website
• Handwritten Notes Downloading and Uploading System Website

CAREER OBJECTIVE:
• Want to gain experience of working in professional environments where my skills get tested.
• I want to learn more through the work I do and always keep on developing.

DECLARATION:
I, Akash Maurya, declare that all the information provided are true as per the best of my knowledge.

(Akash Maurya)

54
 CURRICULUM VITAE

VISHAL
@ vishalgautam00742@gmail.com
 7275555309
PERSONAL STATEMENT:
I am a hardworking and efficient person in the field of management and
coding. My prior experience has been by working on a project of website
development. I seek more opportunity to work in the technical field to
enhance my knowledge.

EDUCATION :

Sr. no. Qualification Board Marks

1 Bachelor of Computer Application University Of
Lucknow
2 Intermediate CBSE 62%

3 High School CBSE 9.6 CGPA

SKILLS:
• Language- Java, C++, HTML and CSS.
• Creative Writing.
• Coordination Skills.

PROFESSIONAL EXPERIENCE:
• E-Commerce website for university project
• Handwritten Notes Downloading and Uploading System Website

CAREER OBJECTIVE:
• Want to gain experience of working in professional environments where my skills get tested.
• I want to learn more through the work I do and always keep on developing.

DECLARATION:
I, Vishal , declare that all the information provided are true as per the best of my knowledge.

(Vishal)

55
 CURRICULUM VITAE

SUMIT GUPTA
@ sg8081198@gmail.com
 8081198934
PERSONAL STATEMENT:
I am a hardworking and efficient person in the field of management and
coding. My prior experience has been by working on a project of website
development. I seek more opportunity to work in the technical field to
enhance my knowledge.

EDUCATION :

Sr. no. Qualification Board Marks

1 Bachelor of Computer Application University Of
Lucknow
2 Intermediate UP 69%

3 High School UP 67%

SKILLS:
• Language- Java, C++, HTML and CSS.
• Creative Writing.
• Coordination Skills.

PROFESSIONAL EXPERIENCE:
• E-Commerce website for university project
• Handwritten Notes Downloading and Uploading System Website

CAREER OBJECTIVE:
• Want to gain experience of working in professional environments where my skills get tested.
• I want to learn more through the work I do and always keep on developing.

DECLARATION:
I, Sumit Gupta, declare that all the information provided are true as per the best of my knowledge.

(Sumit Gupta)

56