Final report

BTech (Kurukshetra University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Hritik Sharma
 INDUSTRIAL TRAINING REPORT
On

WEB DEVELOPMENT

Submitted by

Sarvesh Kumar Sharma

Roll No: 181500625

Department of Computer Engineering & Applications

Institute of Engineering & Technology

GLA University
Mathura- 281406, INDIA
2020

Downloaded by Hritik Sharma

 Department of computer Engineering and Applications
GLA University, Mathura
17 km. Stone NH#2, Mathura-Delhi Road, P.O. – Chaumuha,
Mathura – 281406

DECLARATION

I hereby declare that the work which is being presented in the Industrial Training on
<Web Development =, in partial fulfilment of the requirements for Industrial
Training viva voce, is an authentic record of my own work carried under the
supervision of
<Internshala= from May 15,2020 to June 26, 2020.

During the mentioned period I worked at Web Development and completed my

summer training project entitled <E-store= under the guidance of Mr. Pavan k.

Signature: Date:

Name: Sarvesh Kumar Sharma

Roll. No. : 181500625

Downloaded by Hritik Sharma

 SYNOPSIS

Student Information:
Name: Sarvesh Kumar Sharma University Roll. No. 181500625
Mobile: +91 8853393394 Email: [email protected]

Information about Industry/Organization:

Internshala
Industry/Organization
B-610, Unitech Business Zone Golf Course Extension
Name with full
Road, Nirvana Country, South City II, Sector 50,
Address
Gurugram, Haryana 122018
Mobile/email: 8448444851
Contact Information
Email: [email protected]

Project Information:
Title of
Project/Training/Task Web Development
Web Development Trainee
1. To understand the concepts of web
Role & Responsibility development.
2. practical implementation of learnt
technologies .
Hardware Requirements:
1. Processor Intel CORE i3 or above
2. RAM 4.0 GB Hard
3. Disk Drive 500 GB
Software Requirements:
Technical Details
 Windows 7,8,10
 HTML/CSS/Bootstrap.
 Apache server/ WAMPSERVER
 PHP 5.5.38 4 MySQL
 Compiler: MSVC11 (Visual C++ 2012)
Training Implementation Fully Implemented
Details
Start Date:15th May 2020
Training Period End Date: 26 June 2020
Duration of Training (In Weeks): 6 Weeks

Summary of the Training Work:

Downloaded by Hritik Sharma

In the Web Development training, I have learned all the basic technologies that are
required to work in the field of Web Development. Starting from the very basics of
HTML, the training was divided into 4 modules as:

 HTML / CSS
 Bootstrap
 SQL
 PHP

I have learned the syntax and tags used in HTML and their working, CSS for
styling and decorating the created a webpage, Bootstrap for giving beautiful styles
and making responsive webpages. SQL Querying for getting data from structured
Database. After that I have learnt PHP as a backend technology. I have given tests
after the completion of every module.
I have done small project on end of each module related to that technology and a
final project in the end.

Downloaded by Hritik Sharma

 CERTIFICATE

Downloaded by Hritik Sharma

 ACKNOWLEDGEMENT

“Gratitude is not a thing of expression; it is more matter of feeling."

There is always a sense of gratitude which one express towards others for their help
and supervision in achieving the goals. This formal piece of acknowledgement is an
attempt to express the feeling of gratitude towards people who helpful me in
successfully completing of my training. I would like to express my deep gratitude to
Mr. Pavan Singh, my training coordinator for their constant co-operation. He was
always there with his competent guidance and valuable suggestion throughout the
pursuance of this project. I would also like to place of appreciation to all the
respondents and group members whose responses and coordination were of utmost
importance for the project. Above all no words can express my feelings to my parents,
friends all those persons who supported me during my project. I am also thankful to
all the respondents whose cooperation & support has helped me a lot in collecting
necessary information.

Sarvesh Kumar Sharma Date:

University Roll number- 181500625

Downloaded by Hritik Sharma

 ABSTRACT

Industrial training is an important phase of a student life. A well planned, properly

executed and evaluated industrial training helps a lot in developing a professional
attitude. It develops an awareness of industrial approach to problem solving, based on
a broad understanding of process and mode of operation of organization. The aim and
motivation of this industrial training is to receive discipline, skills, teamwork and
technical knowledge through a proper training environment, which will help me, as a
student in the field of Information Technology, to develop a responsiveness of the
self- disciplinary nature of problems in information and communication technology.
During a period of six weeks training at INTERNSHALA, I was trained to create
web-pages and finally develop an E-Commerce website. Throughout this industrial
training, I have been learned new programming and Markup languages that required
for the web development.

Downloaded by Hritik Sharma

 TABLE OF CONTENTS

SYNOPSIS....................................................................................................................3

CERTIFICATE............................................................................................................5

ACKNOWLEDGEMENT...........................................................................................6

ABSTRACT..................................................................................................................7

1. INTRODUCTION.................................................................................................1

Organization Profile.................................................................................................1

1) Introduction:.....................................................................................................1

2) VISION:...........................................................................................................2

3) PARTENERSHIP............................................................................................2

4) PRODUCTS AND SERVICES.......................................................................3

Objective....................................................................................................................3

2. WEB DEVELOPMENT.......................................................................................4

Web-Site.....................................................................................................................5

Web Page...................................................................................................................6

3. TECHNOLOGIES................................................................................................8

Introduction to HTML.............................................................................................8

1) GENERAL SYNTAX OF HTML:..................................................................9

Introduction to CSS................................................................................................10

1) TYPES OF CSS.............................................................................................11

Introduction to BOOTSTRAP...............................................................................13

1) INSTALLING AND LINKING BOOTSTRAP............................................15

PHP..........................................................................................................................16

Downloaded by Hritik Sharma

 1) INSTALLING PHP:......................................................................................17

Wamp-Server..........................................................................................................18

1) FEATURES...................................................................................................18

2) USAGE..........................................................................................................18

Prerequisite:...........................................................................................................19

3) INSTALLATION..........................................................................................19

4) CONFIGURATION.......................................................................................20

Database...................................................................................................................22

SQL..........................................................................................................................22

1) QUERIES.......................................................................................................23

4. CONCLUSION....................................................................................................25

Outcomes.................................................................................................................25

Recommendation/Suggestions................................................................................26

5. PROJECT: E-STORE........................................................................................27

Introduction.............................................................................................................27

1) OBJECTIVE..................................................................................................27

2) SCOPE:..........................................................................................................27

3) TECHNOLOGIES USED:.............................................................................27

Technical Details.....................................................................................................28

Overall Description.................................................................................................28

A. DESCRIPTION..........................................................................................28

B. USING THE CODE:..................................................................................28

C. MASTER PAGE DETAILS......................................................................29

D. WEB PAGE DETAILS..............................................................................29

Downloaded by Hritik Sharma
 System Requirements.............................................................................................29

DATA FLOW DIAGRAM:..................................................................................29

I. CONTEXT-LEVEL DIAGRAM:..................................................................30

II. DFD1:.........................................................................................................30

III. DFD2:.........................................................................................................31

IV. USECASE DIAGRAM:.............................................................................32

E-store Shopping Application................................................................................33

a) HOME PAGE:...............................................................................................33

b) SIGNUP PAGE:............................................................................................34

c) LOGIN PAGE................................................................................................35

d) CONTACT US PAGE:..................................................................................35

f) SETTING PAGE...........................................................................................36

To change the Password for the user.....................................................................36

g) CART PAGE:................................................................................................37

h) SUCCESS PAGE:.........................................................................................37

Data management...................................................................................................38

i. DATA DESCRIPTION:................................................................................38

ii. DATA OBJECTS..........................................................................................38

iii. DATABASE TABLE DIAGRAM:...........................................................38

Conclusion...............................................................................................................39

BIBLIOGRAPHY.......................................................................................................41

REFERENCE BOOKS:............................................................................................41

REFERENCE WEBSITES.......................................................................................41

Downloaded by Hritik Sharma

 LIST OF FIGURES

Figure 1:Internshala Building.....................................................................................1

Figure 2:Web Development.........................................................................................4

Figure 3:Type of Website.............................................................................................6

Figure 4:Simple Web page...........................................................................................7

Figure 5:Website Description......................................................................................7

Figure 6:Basic HTML Page.......................................................................................10

Figure 7: Page without CSS.......................................................................................12

Figure 8: Page With CSS...........................................................................................13

Figure 9: Bootstrap Designed page...........................................................................14

Figure 10:Linking Bootstrap.....................................................................................15

Figure 11: PHP outputs HTML................................................................................16

Figure 12: PHP...........................................................................................................17

Figure 13: Wamp Server...........................................................................................19

Figure 14:Server Homepage......................................................................................20

Figure 15: Wamp server Application.......................................................................21

Figure 16: SQL database Connection.......................................................................22

Figure 17:Sql Queries example.................................................................................23

Figure 18: Context Level Diagram...........................................................................30

Figure 19: First Level DFD........................................................................................30

Figure 20: Second Level DFD....................................................................................31

Figure 21: Use Case Diagram....................................................................................32

Figure 22: Home Page................................................................................................33

Figure 23: Home page after login.............................................................................34

Figure 24: Signup page..............................................................................................34

Downloaded by Hritik Sharma

Figure 25: Login page................................................................................................35

Figure 26: Contact US page.......................................................................................35

Figure 27: About page................................................................................................36

Figure 28:SETTING PAGE.......................................................................................36

Figure 29:Cart Page...................................................................................................37

Figure 30:Success Page..............................................................................................37

Downloaded by Hritik Sharma

 LIST OF TABLES

Table 1:PHP DISCRIPTION....................................................................................16

Table 2:Users Table Diagram...................................................................................38

Table 3: Products Table.............................................................................................38

Table 4: Users Product Table....................................................................................39

Table 5: Query Table.................................................................................................39

Downloaded by Hritik Sharma

Web-Development Introduction

1. INTRODUCTION

Organization Profile

1) INTRODUCTION:

Internshala is an internship and online training platform, based in Gurgaon, India.

Founded by Sarvesh Agrawal, an IIT Madras alumnus, in 2010, the website helps
students find internships with organisations in India.

The platform, which was founded in 2010, started out as a WordPress blog that
aggregated internships across India and articles on education, technology and skill
gap. Internshala launched its online trainings in 2014. As of 2018, the platform had
3.5 million students and 80,000 companies.

Figure 1:Internshala Building

1
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Introduction

2) VISION:

Internshala is a dot com business with the heart of dot org.

Internshala is a technology company on a mission to equip students with relevant

skills & practical exposure through internships and online trainings with a vision of

world full of freedom and possibilities. A world where one can discover one9s

passion and turn it into their career. A world where your practical skills matter more

than your university degree. A world where you do not have to wait till 21 to taste

your first work experience (and get a rude shock that it is nothing like you had

imagine it to be). A world where you graduate fully assured, fully confident, and

fully prepared to stake claim on your place in the world.

3) PARTENERSHIP:

Internshala signed an MoU in 2017 with AICTE, the regulatory body governing
technical education in the country. As the official internship partner for AICTE,
Internshala is helping students in 10,000 colleges across India get an internship of
their dreams.

Apart from this, Internshala have also partnered with NPTEL and state level skill
development bodies like TASK (in Telangana), APSSDC (in Andhra Pradesh), and
ICTAK (in Kerala). With 2.5 Mn+ registered students, Internshala is just getting
started on our mission to equip each of the 30 Mn college students in India with
practical knowledge and skills so that they can build their dream careers.

While Internshala continue to help students from cities and metros, they have also
started concentrated efforts in smaller cities (and towns and villages subsequently) to
take the message of meaningful internships and trainings to youth there as well.
Historically, there is no dearth of talent in our Tier-2 or Tier-3 cities – Internshala just
need to bring awareness and opportunities to them if India were to reap true benefits
of its demographic dividend.
2
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Introduction

4) PRODUCTS AND SERVICES :

Internshala offers following products & services to its users :

1. Internship and job posting: Organization & individuals looking to hire

interns and/or full-time employees can post their internship and/or job
requirement on Internshala. Currently, internships are posted for free and a fee
of INR 4999 is charged from the employers for posting a full-time job.
2. Internship and job search: Internship and job seekers from all over India
can search and apply for internships and jobs relevant to their coursework and
interest free of cost.
3. Internshala Trainings: Internshala offers a variety of online training
programs across multiple disciplines (Machine Learning, Web Development,
Digital Marketing, Java, French and several others) which students can do
from the comfort of their homes and learn the skills needed in today9s
industry.

Objective

The Online Web Development Training by Internshala is a 6-weeks training program

in the fields of HTML, CSS, Bootstrap, PHP, and MySQLi with an aim to Learn how
to create a website from scratch. The side objective is to develop an E-commerce
website using the web development technologies.
 It helped to understand how to conduct user research related to web usability.
 Be able to embed social media content into web pages.
 It helped to make us familiar with a lot of basics related to web development
with the help of which we can create a great website in future.

3
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development Web Development

2. WEB DEVELOPMENT

Web development is a broad term for the work involved in developing a web site for
the Internet (World Wide Web) or an intranet (a private network). Web development
can range from developing the simplest static single page of plain text to the most
complex web-based internet applications, electronic businesses, and social network
services. A more comprehensive list of tasks to which web development commonly
refers, may include web engineering, web design, web content development, client
liaison, client-side/side scripting, web server and network security configuration, and
e-commerce development. Among web professionals, "web development" usually
refers to the main non-design aspects of building web sites: writing markup and
coding. Most recently Web development has come to mean the creation of content
management systems or CMS. These CMS can be made from scratch, proprietary or
open source. In broad terms the CMS acts as middleware between the database and
the user through the browser. A principle benefit of a CMS is that it allows non-
technical people to make changes to their web site without having technical
knowledge.

For larger organizations and businesses, web development teams can consist of
hundreds of people (web developers) and follow standard methods like Agile
methodologies while developing websites. Smaller organizations may only require a
single permanent or contracting developer, or secondary assignment to related job
positions such as a graphic designer or information systems technician. Web
development may be a collaborative effort between departments rather than the
domain of a designated department. There are three kind of web developer
specialization: front- end developer, back-end developer, and full-stack developer.

Figure 2:Web Development

4
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development Web Development

Web-Site

A website is a collection of related web pages, including multimedia content, typically

identified with a common domain name, and published on at least one web server.

A website may be accessible via a public Internet Protocol (IP) network, such as the
Internet, or a private local area network (LAN), by referencing a uniform resource
locator (URL) that identifies the site.

Websites have many functions and can be used in various fashions; a website can be a
personal website, a commercial website for a company, a government website or a
non- profit organization website. Websites are typically dedicated to a particular topic
or purpose, ranging from entertainment and social networking to providing news and
education.

All publicly accessible websites collectively constitute the World Wide Web, while
private websites, such as a company's website for its employees, and are typically a
part of an intranet. Web pages, which are the building blocks of websites, are
documents, typically composed in plain text interspersed with formatting instructions
of Hypertext Markup Language (HTML, XHTML).

They may incorporate elements from other websites with suitable markup anchors.
Web pages are accessed and transported with the Hypertext Transfer Protocol
(HTTP), which may optionally employ encryption (HTTP Secure, HTTPS) to provide
security and privacy for the user. The user's application, often a web browser, renders
the page content according to its HTML markup instructions onto a display terminal.
Hyperlinking between web pages conveys to the reader the site structure and guides
the navigation of the site, which often starts with a home page containing a directory
of the site web content.

Some websites require user registration or subscription to access content. Examples of

subscription websites include many business sites, news websites, academic journal
websites, gaming websites, file-sharing websites, message boards, web-based email,
social networking websites, websites providing real-time stock market data, as well as
sites providing various other services.

5
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Web Development

Figure 3:Type of Website

As of 2016 end users can access websites on a range of devices, including desktop
and laptop computers, tablet computers, smartphones and smart TVs. A web site
consists of web pages which are interconnected to each other and contain various data
and functionalities.

Web Page

A web page, or webpage, is a document that is suitable for the World Wide Web and
web browsers. A web browser displays a web page on a monitor or mobile device.
The web page is what displays, but the term also refers to a computer file, usually
written in HTML or comparable markup language.

Web browsers coordinate the various web resource elements for the written web page,
such as style sheets, scripts, and images, to present the web page. Typical web pages
provide hypertext that includes a navigation bar or a sidebar menu to other web pages
via hyperlinks, often referred to as links. On a network, a web browser can retrieve a
web page from a remote web server.

6
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Web Development

Figure 4:Simple Web page

On a higher level, the web server may restrict access to only a private network such as
a corporate intranet or it provides access to the World Wide Web. On a lower level,
the web browser uses the Hypertext Transfer Protocol (HTTP) to make such requests.

A static web page is delivered exactly as stored, as web content in the web server's
file system, while a dynamic web page is generated by a web application that is driven
by server- side software or client-side scripting. Dynamic website pages help the
browser (the client) to enhance the web page through user input to the server.

Figure 5:Website Description

7
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

3. TECHNOLOGIES

Technologies that are used to develop A website are:

 HTML
 CSS
 Bootstrap.
 Scripting Technologies like PHP.
 Database using MySQLi

Introduction to HTML

HTML Hypertext Markup Language (HTML) is the standard markup language for
creating web pages and web applications. With Cascading Style Sheets (CSS) and
JavaScript it forms a triad of cornerstone technologies for the World Wide Web. Web
browsers receive HTML documents from a webserver or from local storage and
render them into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs,
images and other objects, such as interactive forms, may be embedded into the
rendered page. It provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links, quotes and
other items.

HTML elements are delineated by tags, written using angle brackets. Tags such as
<img /> and <input /> introduce content into the page directly. Others such as
<p>...</p> surround and provide information about document text and may include
other tags as sub-elements. Browsers do not display the HTML tags, but use them to
interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript which
affect the behaviour and content of web pages. Inclusion of CSS defines the look and
layout of content. The World Wide Web Consortium (W3C), maintainer of both the
HTML and the CSS standards, has encouraged the use of CSS over explicit
presentational HTML since 1997.

8
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development Technologies

HTML markup consists of several key components, including those called tags (and
their attributes), character-based data types, character references and entity references.
HTML tags most commonly come in pairs like <h1> and </h1>, although some
represent empty elements and so are unpaired, for example <img>. The first tag in
such a pair is the start tag, and the second is the end tag (they are also called opening
tags and closing tags).
The following is an example of the classic Hello world program, a common test
employed for comparing programming languages, scripting languages and markup
languages. This example is made using 9 lines of code:

1) GENERAL SYNTAX OF HTML:

<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

(The text between <html> and </html> describes the web page, and the text between
<body> and </body> is the visible page content. The markup text "<title>This is a
title</title>" defines the browser page title.)

The Document Type Declaration <!DOCTYPE html> is for HTML5. If a declaration

is not included, various browsers will revert to "quirks mode" for rendering.

9
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

Figure 6:Basic HTML Page

Introduction to CSS

CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language. Although most often used
to set the visual style of web pages and user interfaces written in HTML and XHTML,
the language can be applied to any XML document, including plain XML, SVG and
XUL, and is applicable to rendering in speech, or on other media. Along with HTML
and JavaScript, CSS is a cornerstone technology used by most websites to create
visually engaging webpages, user interfaces for web applications, and user interfaces
for many mobile applications.

CSS is designed primarily to enable the separation of presentation and content,

including aspects such as the layout, colors, and fonts. This separation can improve
content accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple HTML pages to share formatting by
specifying the relevant CSS in a separate .css file, and reduce complexity and
repetition in the structural content.

Separation of formatting and content makes it possible to present the same markup
page in different styles for different rendering methods, such as on-screen, in print, by
voice (via speech-based browser or screen reader), and on Braille-based tactile
devices. It can also display the web page differently depending on the screen size
or viewing

10
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development Technologies

device. Readers can also specify a different style sheet, such as a CSS file stored on
their own computer, to override the one the author specified.

Changes to the graphic design of a document (or hundreds of documents) can be

applied quickly and easily, by editing a few lines in the CSS file they use, rather than
by changing markup in the documents.

The CSS specification describes a priority scheme to determine which style rules
apply if more than one rule matches against a particular element. In this so-called
cascade, priorities (or weights) are calculated and assigned to rules, so that the results
are predictable. The CSS specifications are maintained by the World Wide Web
Consortium (W3C). Internet media type (MIME type) text/css is registered for use
with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation
service for CSS documents.

1) TYPES OF CSS :

 Inline CSS: In this CSS is applied in between the tags. E.g.:

<tag style =” styling” > Hello World </tag>
 Internal CSS: In this the css code is defined inside the style tag in the head
section of the HTML page. General Syntax:
<html>
<head>
<style> <! -- CSS STYLING -- > </style>

</head>

</html>

 External CSS: In this the CSS code is written on another page and is linked
to the HTML page. It is advantageous to use this type of styling as we can use
the same file to style various HTML pages. External CSS uses the
extension .css and is applied using the following syntax:
<html>
<head>
<link relation=” stylesheet” type=”css” href=”URL to
the page”>

11
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

</head>

</html>

All the CSS style types are important but can be used in different situations.

 Inline CSS is used when only small changes are to be done to the HTML tag and
the changes are to be reflected only to that specific tag

 Internal CSS is used when the individual HTML pages have to be designed
differently. This also slows the page load system if the internal styling is long.

 External CSS files are maintained to design multiple pages and use common styles
over various pages. It is useful as it helps in managing the resources in an easy
manner.

Both HTML and CSS are used to create a UI but CSS behaves like a makeup on the
face of an actress which makes her look even more beautiful than she is in reality, and
here is the difference:

Before using CSS in HTML page:

Figure 7: Page without CSS

12
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development Technologies

After using CSS in HTML page:

Figure 8: Page With CSS

Introduction to BOOTSTRAP

Bootstrap is a free and open-source front-end web framework for designing websites
and web applications. It contains HTML- and CSS-based design templates for
typography, forms, buttons, navigation and other interface components, as well as
optional JavaScript extensions. Unlike many web frameworks, it concerns itself with
front-end development only.

Bootstrap is the second most-starred project on GitHub, with more than 107,000 stars
and 48,000 forks.

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:

13
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

<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.=

After a few months of development by a small group, many developers at Twitter

began to contribute to the project as a part of Hack Week, a hackathon-style week for
the Twitter development team. It was renamed from Twitter Blueprint to Bootstrap,
and released as an open source project on August 19, 2011. It has continued to be
maintained by Mark Otto, Jacob Thornton, and a small group of core developers, as
well as a large community of contributors.

On January 31, 2012, Bootstrap 2 was released, which added a twelve-column

responsive grid layout system, inbuilt support for Glyphicons, several new
components, as well as changes to many of the existing components.

On August 19, 2013, Bootstrap 3 was released, which redesigned components to use
flat design, and a mobile first approach.

On October 29, 2014, Mark Otto announced that Bootstrap 4 was in development.
The first alpha version of Bootstrap 4 was released on August 19, 2015.

Bootstrap 3 supports the latest versions of the Google Chrome, Firefox, Internet
Explorer, Opera, and Safari (except on Windows). It additionally supports back to
IE8 and the latest Firefox Extended Support Release (ESR).

Figure 9: Bootstrap Designed page

14
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

Since 2.0, Bootstrap supports responsive web design. This means the layout of web
pages adjusts dynamically, taking into account the characteristics of the device used
(desktop, tablet, mobile phone).

Starting with version 3.0, Bootstrap adopted a mobile-first design philosophy,

emphasizing responsive design by default. The version 4.0 alpha release added Sass
and flexbox support.

1) INSTALLING AND LINKING BOOTSTRAP:

 Install bootstrap from https://getbootstrap.com/

 Copy the bootstrap.min.css file to your CSS folder and link it to the HTML
page in the similar manner to how any other CSS file is linked.
 Link the bootstrap.min.js file which is present in the JS folder of the bootstrap.
It can be linked using script tag. E.g.:
<script src=”URL to bootstrap.min.js”></script>
 Now use bootstrap classes to reduce the work of designing which was earlier
done through CSS.

Figure 10:Linking Bootstrap

15
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

PHP

PHP Paradigm Imperative, Object-oriented, procedural, reflective

Designed by Rasmus Lerdorf
Developer The PHP Development Team, Zend Technologies
First appeared June 8, 1995; 21 years ago,
Stable release 7.4/ November 28, 2019
Implementation language C (primarily; some components C++)
OS Unix-like, Windows
Typing discipline Dynamic, weak, gradual (as of PHP 7.0.0)
License PHP License (most of Zend Engine under Zend Engine
License& The TSRM License)
Major implementations Zend Engine, HHVM, Phalanger, Quercus, Project
Zero, Parrot
Table 1:PHP DISCRIPTION

PHP is a server-side scripting language designed primarily for web development but
also used as a general-purpose programming language. Originally created by Rasmus
Lerdorf in 1994, the PHP reference implementation is now produced by The PHP
Development Team. PHP originally stood for Personal Home Page, but it now stands
for the recursive acronym PHP: Hypertext Pre-processor.

Figure 11: PHP outputs HTML

PHP code may be embedded into HTML or HTML5 markup, or it can be used in
combination with various web template systems, web content management systems
and web frameworks. PHP code is usually processed by a PHP interpreter
implemented as a module in the web server or as a Common Gateway Interface (CGI)
executable. The web server software combines the results of the interpreted and
executed PHP code, which may be any type of data, including images, with the
generated web page. PHP

16
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development Technologies

code may also be executed with a command-line interface (CLI) and can be used to
implement stand-alone graphical applications.

The standard PHP interpreter, powered by the Zend Engine, is free software released
under the PHP License. PHP has been widely ported and can be deployed on most
web servers on almost every operating system and platform, free of charge.

The PHP language evolved without a written formal specification or standard until
2014, leaving the canonical PHP interpreter as a de facto standard. Since 2014 work
has gone on to create a formal PHP specification.

1) INSTALLING PHP:

i. Step 1: Download the files. Download the latest PHP 5 ZIP package from
www.php.net/downloads.php.
ii. Step 2: Extract the files.
iii. Step 3: Configure php.ini.
iv. Step 4: Add C: php to the path environment variable.
v. Step 5: Configure PHP as an Apache module.
vi. Step 6: Test a PHP file.
vii. Step 7: Or we can install Wamp which have inbuilt php, MySQLi, apache
server

We have used Wamp to run the php files.

Figure 12: PHP

17
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

Wamp-Server

WampServer refers to a solution stack for the Microsoft Windows operating system,
created by Romain Bourdon and consisting of the Apache web server, OpenSSL for
SSL support, MySQL database and PHP programming language

Wamp is a free and open source cross platform web server solution stack package
developed by Apache Friends, consisting mainly of the Apache HTTP Server,
MariaDB database, and interpreters for scripts written in the PHP and Perl
programming languages.

It is a simple, lightweight Apache distribution that makes it extremely easy for

developers to create a local web server for testing and deployment purposes.
Everything needed to set up a web server – server application (Apache), database
(MariaDB), and scripting language (PHP) – is included in an extractable file.

WAMP is also cross-platform, which means it works equally well on Linux, Mac and
Windows. Since most actual web server deployments use the same components as
WAMP, it makes transitioning from a local test server to a live server extremely easy
as well.

1) FEATURES:

WAMP is regularly updated to the latest releases of Apache, MariaDB, PHP and Perl.
It also comes with a number of other modules including OpenSSL, phpMyAdmin,
MediaWiki, Joomla, WordPress and more. Self-contained, multiple instances of
WAMP can exist on a single computer, and any given instance can be copied from
one computer to another. WAMP is offered in both a full and a standard version
(Smaller version).

2) USAGE :

Officially, WAMP's designers intended it for use only as a development tool, to allow
website designers and programmers to test their work on their own computers without
any access to the Internet. To make this as easy as possible, many important security
features are disabled by default. WAMP has the ability to serve web pages on the
World

18
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development Technologies

Wide Web. A special tool is provided to password-protect the most important parts of
the package.

WAMP also provides support for creating and manipulating databases in MariaDB
and SQLite among others. Once WAMP is installed, it is possible to treat a localhost
like a remote host by connecting using an FTP client. Using a program like FileZilla
has many advantages when installing a content management system (CMS) like
Joomla or WordPress. It is also possible to connect to localhost via FTP with an
HTML editor.

Prerequisite:
1. You should be running any of the Windows operating system.
2. If you have any other server running – like IIS – stop and disable it for WAMP to
function correctly.

3) INSTALLATION :

Step 1: Download the WampServer installer by choosing among 32-bits and 64-bits
version depending on what Windows you are running. Also, see the required
configuration of all the components.

Example: WampServer 2.2D has Apache 2.2.21, Php 5.3.10, MySQLi 5.5.20,
XDebug 2.1.2, XDC 1.5, PhpMyAdmin 3.4.10.1, SQLBuddy 1.3.3 and web Grind
1.0.

Step 2: Run the downloaded installer to initiate the setup. If the option of Run as
administrator is available, make use of it. Complete the setup by following all wizard
instructions until the end. WampServer will require around 200MB+ space on the disk
you install it. It9s recommended to install WAMP on C:/wampserver or C:/wamp,
though not mandatory.

Step 3: Start WampServer by clicking the shortcut icon created on your desktop.
Again, use Run as administrator if available. The icon appears in Windows
Notification Area (right-bottom) turning from Red to Orange to Green. Red denotes
that the server is inactive/disabled. Orange indicates the server is processing or
starting up. Green indicates the server is active and running.

Figure 13: Wamp Server

To check whether WampServer is running correctly – open a browser and type

http://localhost

19
Downloaded by Hritik Sharma
Web-Development Technologies

Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

You should see a WampServer Homepage showing Server Configuration, Tools,

Your Projects, Your Virtual Hosts and Your Aliases.

Figure 14:Server Homepage

4) CONFIGURATION:

Once WampServer is installed, it9s time to configure the server environment as per your
requirements.

Single left-click on the WampServer icon shows a menu – localhost, phpMyAdmin,

www directory, Apache, PHP, MySQL, web Grind, Start All Services, Stop All
Services, Restart All Services, and Put Online/Offline.

Activate the required Apache modules from Apache > Apache Modules (ticked
indicate enabled). httpd.conf, Apache error log and Apache access log files are also
available.

Enable all required PHP settings and extensions via PHP > PHP Settings and PHP >
PHP Extensions. It9s recommended for novice users to not modify the php.ini file
manually, instead operate it via the menu only. Logged PHP errors can be found at
PHP > PHP Error Log.

20
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

Figure 15: Wamp server Application

You can also access http://localhost/?phpinfo=1 and http://localhost/phpmyadmin/ on

your browser. phpMyAdmin is used to manage MySQL databases and related
operations.

Test a Sample HTML File:

Create a simple HTML file called wamptest.html and copy it at C:/wamp/www/ or

C:/wampserver/www/ (or wherever you have installed it). Open your browser and
type localhost/wamptest.html and it should open the page.

21
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

Database

A database is an organized collection of data. It is the collection of schemas, tables,

queries, reports, views, and other objects. The data are typically organized to model
aspects of reality in a way that supports processes requiring information, such as
modelling the availability of rooms in hotels in a way that supports finding a hotel
with vacancies.

A database management system (DBMS) is a computer software application that

interacts with the user, other applications, and the database itself to capture and
analyse data. A general-purpose DBMS is designed to allow the definition, creation,
querying, update, and administration of databases. Well-known DBMSs include
MySQL, PostgreSQL, MongoDB, MariaDB, Microsoft SQL Server, Oracle, Sybase,
SAP HANA, MemSQL and IBM DB2. A database is not generally portable across
different DBMSs, but different DBMS can interoperate by using standards such as
SQL and ODBC or JDBC to allow a single application to work with more than one
DBMS.

Database management systems are often classified according to the database model
that they support; the most popular database systems since the 1980s have all
supported the relational model as represented by the SQL language. Sometimes a
DBMS is loosely referred to as a "database".

SQL

SQL Originally based upon relational algebra and tuple relational calculus, SQL
consists of a data definition language, data manipulation language, and data control
language. The scope of SQL includes data insert, query, update and delete, schema
creation and modification, and data access control.

Figure 16: SQL database Connection

22
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development Technologies

Although SQL is often described as, and to a great extent is, a declarative language
(4GL), it also includes procedural elements. SQL was one of the first commercial
languages for Edgar F. Codd's relational model, as described in his influential 1970
paper, "A Relational Model of Data for Large Shared Data Banks." Despite not
entirely adhering to the relational model as described by Codd, it became the most
widely used database language. SQL became a standard of the American National
Standards Institute (ANSI) in 1986, and of the International Organization for
Standardization (ISO) in 1987. Since then, the standard has been revised to include a
larger set of features.

1) QUERIES:

The most common operation in SQL, the query, makes use of the declarative
SELECT statement. SELECT retrieves data from one or more tables, or expressions.
Standard SELECT statements have no persistent effects on the database.

Some non-standard implementations of SELECT can have persistent effects, such as

the SELECT INTO syntax provided in some databases.

Figure 17:Sql Queries example

23
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Technologies

Queries allow the user to describe desired data, leaving the database management
system (DBMS) to carry out planning, optimizing, and performing the physical
operations necessary to produce that result as it chooses.

A query includes a list of columns to include in the final result, normally immediately
following the SELECT keyword. An asterisk ("*") can be used to specify that the
query should return all columns of the queried tables. SELECT is the most complex
statement in SQL, with optional keywords and clauses that include:

 The FROM clause, which indicates the table(s) to retrieve data from. The
FROM clause can include optional JOIN subclauses to specify the rules for
joining tables. The WHERE clause includes a comparison predicate, which
restricts the rows returned by the query. The WHERE clause eliminates all
rows from the result set where the comparison predicate does not evaluate to
True.
 The GROUP BY clause projects rows having common values into a smaller
set of rows. GROUP BY is often used in conjunction with SQL aggregation
functions or to eliminate duplicate rows from a result set. The WHERE clause
is applied before the GROUP BY clause.
 The HAVING clause includes a predicate used to filter rows resulting from the
GROUP BY clause. Because it acts on the results of the GROUP BY clause,
aggregation functions can be used in the HAVING clause predicate.
 The ORDER BY clause identifies which column[s] to use to sort the resulting
data, and in which direction to sort them (ascending or descending). Without
an ORDER BY clause, the order of rows returned by an SQL query is
undefined.

24
Downloaded by Hritik Sharma
Web-Development Technologies

Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Conclusion

4. CONCLUSION

Outcomes

After learn web development tools to create international standard websites by our own.
Following are the learning outcomes of the industrial training on web development.

 Able to use the HTML programming language.

o Resolves written HTML codes.
o Runs the page designed using HTML codes.
 Be able to use CSS for styling the web pages.
 Able to modify Site Designs to look how we Want Them to Look.
 Discover how does web works really, what makes web sites work.
 Able to use Simple and impressive design techniques, from basics till
advanced to focus on goal oriented and user centric designs.
 Able to plan for website & actually build excellent web sites.
 Pro level skills in SEO with keyword research and content strategy for our
website.
 Able to create web elements like buttons, banners & Bars and of course
complete UI designs.
 Ale to create Forms and validations for our website.
 Setting up page layout, color schemes, contract, typography in the designs.
 Writing valid and concise code for webpages.
 Best use of social media for revenue generation.
 Setting up a perfect landing page for business, clients and yourself.
 Publishes the site designed
 Be able to make changes on the Site.

25
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development Conclusion

Recommendation/Suggestions

Internshala is doing well to provide internship to college students on their choice on

time period and field of interest. Their student partner program is good to guide
student from normal college student where there is huge gap of information related to
internships and training.

As a student of their online training program I observed some drawbacks in their

working style-

1. They focus on more on increasing involvement of student without

providing them great facilities. Their student partner program
designed in such a way that they make more new registrations on
their website. Promotion of website is good but when it became only
reason then things not working well. They do not proper guide
students. If they focus more on quality improvement than only
promotion, it will help students.
2. If they improve their online training program it will help student to
learn new skills. Their online training is costly than other MOOC
like Udemy and Coursera . If they provide training in optimum cost
it will not create any burden to students.
3. If they provide some ranking according to student9s resume and add
a separate section of different companies9 selection criteria
information. This will help student to find where they are standing
and what skills required for different companies.

These are just some suggestions which may help directly to Internshala and indirectly
to students.

26
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

5. PROJECT: E-STORE

Introduction

1) OBJECTIVE:

Online Shopping is the process whereby consumers directly buy goods and services
without any intermediary service over the internet. The goal of this website is to
develop an e-commerce store where product like smartphones can be bought from the
comfort of home through the Internet. However, for implementation purposes, this
paper will deal with an online shopping for smartphones. An E-store is a virtual store
on the Internet where customers can browse the catalog and select products of
interest. The selected items may be collected in a shopping cart. At checkout time, the
items in the shopping cart will be presented as an order. Usually, the customer will be
asked to fill or select a billing address, a shipping address, a shipping option.

The main goal of this website is to develop an easy to use web-based interface where
Customer can search for products (Smartphones), view a complete description of the
product and order the product.

2) SCOPE:

Scope of this project is very broad in terms of other manually functioning.

• It can be used by user to get information about the latest smartphones.

• It can used for corporate world person to sell their products.

• It is based on web application we can easily access it from anywhere.

3) TECHNOLOGIES USED:

 HTML
 CSS
 BOOTSTRAP
 PHP

27
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

SERVER : Apache (WampServer)

DATABASE: MySQLi

IDE: NetBeans IDEs

Technical Details

 Front end is designed using HTML, CSS and Bootstrap.

 Backend is based on PHP + MySQLi based RDB (Relational Data Base) model.
 The SQL queries are run using the CI SQL library functions.
 Backend online host includes a centralized database resident on the server, the
script which is built in PHP used to SQL query the database on user9s request
for transaction of data.
 The forms are made using the HTML, Bootstrap for designing and Php, SQLi`
for back-end.

Overall Description

A. DESCRIPTION:

 Any member can register and view available products.

 Only registered member can purchase multiple products regardless of quantity.
 Contact Us page is available to contact Admin for queries.
 There are three roles available: Visitor, User and Admin.
 Visitor can view available products.
 User can view and purchase products.
 An Admin has some extra privilege including all privilege of
visitor and user.
o Admin can add products, edit product information
and add/remove product.
o Admin can add user, edit user information and can
remove user.

B. USING THE CODE:

1. Attach the database in your "SQL Server Management Studio Express".

28
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

2. Run the application on Apache server as web site.

3. Locate the database.

C. MASTER PAGE DETAILS:

Online Shopping Master Page (Similar Master Page for Visitor, User and Admin)

D. WEB PAGE DETAILS:

 Home Page
 About Us Page
 mobile Page
 Cart Page
 Contact Us
 Settings page
 Page
o Admin Page
o Login Page
o Register Page

System Requirements

DATA FLOW DIAGRAM:

DATA FLOW DIAGRAM Data Flow Diagrams show the flow of data from external
entities into the system, and from one process to another within the system. There are
four symbols for drawing a DFD: I. Rectangles representing external entities, which
are sources or destinations of data. II. Ellipses representing processes, which take data
as input, validate and process it and output it. III. Arrows representing the data flows,
which can either, be electronic data or physical items. IV. Open-ended rectangles or a
Disk symbol representing data stores, including electronic stores such as databases or
XML files and physical stores such as filing cabinets or stacks of paper. Figures
below are the Data Flow Diagrams for the current system. Each process within the
system is first shown as a Context Level DFD and later as a Detailed DFD. The
Context Level DFD provides a conceptual view of the process and its surrounding
input, output and

29
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development project: E-Store

data stores. The Detailed DFD provides a more detailed and comprehensive view of the
interaction among the sub-processes within the system.

I. CONTEXT-LEVEL DIAGRAM:

Figure 18: Context Level Diagram

II. DFD1:

Figure 19: First Level DFD

30
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

III. DFD2:

Figure 20: Second Level DFD

31
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

IV. USECASE DIAGRAM:

Figure 21: Use Case Diagram

32
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

E-store Shopping Application

Anyone can view Online Shopping portal and available products, but every user must
login by his/her Username and password in order to purchase or order products.
Unregistered members can register by navigating to registration page. Only Admin
will have access to modify roles, by default developer can only be an 8Admin9. Once
user register site, his default role will be 8User9.

a) HOME PAGE:

The Home Screen will consist of screen were one can browse through the products
which we have on our website.

Home Page before login.

Figure 22: Home Page

33
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

Home Page After login.

Figure 23: Home page after login

b) SIGNUP PAGE:

New users can register here

Figure 24: Signup page

34
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

c) LOGIN PAGE:

Figure 25: Login page

d) CONTACT US PAGE:

Figure 26: Contact US page

35
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

e) ABOUT US PAGE:

Figure 27: About page

f) SETTING PAGE :

To change the Password for the user.

Figure 28:SETTING PAGE

36
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

g) CART PAGE:

Figure 29:Cart Page

h) SUCCESS PAGE:

Figure 30:Success Page

37
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

Data management

i. DATA DESCRIPTION:

This database consists of

Users: User and Admin information is added to database with Unique ID
based on their roles.
Shopping: Complete products information is stored in this table.
Orders: Customer ordered products.

ii. DATA OBJECTS:

 User: ID, Name, Email, Password, Contact, City,

 Product: ID, Name, Price.
 User products: ID, UserId, ProductId.
 Query: ID, Name, Email, Message.

iii. DATABASE TABLE DIAGRAM:

USERS
ID PRIMERY KEY
NAME
EMAIL
PASSWORD
CONTACT
CITY

Table 2:Users Table Diagram

Products
ID PRIMARY KEY
NAME
PRICE
Table 3: Products Table

38
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development project: E-Store

USER Products
ID PRIMARY KEY
PRODUCTID
USERID
Table 4: Users Product Table

Query
ID PRIMARY KEY
NAME
EMAIL
MESSAGE
Table 5: Query Table

Conclusion:

The Internet has become a major resource in modern business, thus electronic
shopping has gained significance not only from the entrepreneur9s but also from the
customer9s point of view. For the entrepreneur, electronic shopping generates new
business opportunities and for the customer, it makes comparative shopping possible.
As per a survey, most consumers of online stores are impulsive and usually make a
decision to stay on a site within the first few seconds. <Website design is like a shop
interior. If the shop looks poor or like hundreds of other shops the customer is most
likely to skip to the other site. Hence, we have designed the project to provide the user
with easy navigation, retrieval of data and necessary feedback as much as possible. In
this project, the user is provided with an ecommerce web site that can be used to buy
books online. To implement this as a web application we used PHP as the
Technology. PHP has several advantages such as enhanced performance, scalability,
built-in security and simplicity.
A good shopping cart design must be accompanied with user-friendly shopping cart
application logic. It should be convenient for the customer to view the contents of
their cart and to be able to remove or add items to their cart. The shopping cart
application described in this project provides a number of features that are designed to
make the customer more comfortable.
This project helps in understanding the creation of an interactive web page and the
technologies used to implement it. The design of the project which includes Data
Model

39
Dept. of CEA, GLAU, Mathura
Downloaded by Hritik Sharma
Web-Development project: E-Store

and Process Model illustrates how the database is built with different tables, how the
data is accessed and processed from the tables. The building of the project has given
me a precise knowledge about how PHP is used to develop a website, how it connects
to the database to access the data and how the data and web pages are modified to
provide the user with a shopping cart application.

40
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma

Web-Development BIBLIGRAPHY

BIBLIOGRAPHY

REFERENCE BOOKS:

1. Forbes Alan9s The Joy of PHP Programming: A Beginner9s Guide to

Programming Interactive Web Applications with PHP and MySQL fifth
Edition, 2018.
2. Bryan Syverson, Joel Murach, Murach9s SQL Server 2012 for developers,
Murach, 2012.
3. Myers Mark9s Learn HTML and CSS faster, march 11, 2015.

REFERENCE WEBSITES.

1) http://www.w3schools.com/
2) http://msdn.microsoft.com/
3) http://agilemodeling.com/
4) https://trainings.internshala.com/web-development-training/
5) https://www.javatutpoint.com/
6) https://www.getbootstrap.com/
7) https://www.codeigniter.com/
8) https://www.stackoverflow.com/
9) https://www.fontawesome.io/
10) https://www.php.net/
11) Wikipedia

41
Dept. of CEA, GLAU, Mathura

Downloaded by Hritik Sharma