SUMMER TRAINING

ON
WEB DEVELOPMENT
(BCA 508P)

UNIVERSITY OF
LUCKNOW BATCH 2018-
2021
BCA – 3RD YEAR

SUBMITTED BY: SUBMITTED TO:

RITESH ROY ER. CHANDRABHAN SINGH
180010580036 ASSISTANT PROFESSOR
(BACHELOR OF COMPUTER (FACULTY OF ENGINNERING)
APPLICATIONS)
 WEB DEVELOPMENT
AT

UNDER THE GUIDANCE OF - REPORT PREPARED BY –

MR. PAVAN K MR. RITESH ROY (SUBJECT

MATTER EXPERT) (BACHELOR OF COMPUTER
MR. VIKRAM SHAH APPLICATIONS)
(IIT MADRAS 2007) UNIVERSITY OF LUCKNOW
CTO, INTERNSHALA
MR. AARTI GANDHI
(SENIOR SOFTWARE ENGINEER)
CERTIFICATE
 Acknowledgment

I, Ritesh Roy of Bachelors of Computer Application 3rd Year 5th semester, I am

very glad to present my Presentation on Web Development whose training I
have completed from Internshala. I am grateful to all my teacher’s for giving
me such an opportunity to present my project.
I am also thankful to my parents and friends who helped me in finalizing this
project in this limited time frame. I would like to thank all my teachers who
encouraged me and gave instructions and suggestions which were very helpful
for completing this project. I too want to thank my instructors of Internshala
who gave me the required knowledge to complete this project.
I hope whosoever goes through my project and presentation will find it
relevant, interesting. I hope you will also like my project and appreciate my
hard work.
 INDEX

Serial No. Topic Page No.

1 Title Page I
2 Certificate II
3 Acknowledgement III
4 Objective IV
5. Introduction 1
1.1 Definition
1.2 About web development training

6. About Organization 2
2.1 History
2.2 Partnership
2.3 Awards and Recognition

7. Technology Description 3
3.1 Software Requirements
3.2 Hardware Requirements

8. Project Description 4-12

4.1 Project Name

4.2 Objective
4.3 Modules
4.3.1 HTML & CSS
4.3.2 Bootstrap
4.3.3 JavaScript
4.3.4 MY SQLi
4.3.5 PHP
9 Design 13-18
5.1 Index Page
5.2 Login Page module
5.3 Sign-Up module
5.4 Settings Page
5.5 Product Page
5.6 Cart Page
5.7 Check Out page
5.8 Success Page
5.9 E-R Diagram
5.10 FAQ Page

10 Future Scope 19-20

11 Conclusion 21
12 Bibliography 22
 V. OBJECTIVE

 Learn Full – stack HTML, CSS, JavaScript, PHP development and build
E-commerce website from INTERNSHALA.

 Understand the principle of creating an effective web page, including an

in-depth consideration of information architecture.

 Develop skills in analyzing the usability of a website.

 Understand how to plan and conduct user research related to web usability.

 Learn the language of the web: HTML and CSS.

 Be able to embed social media content into web pages.

 Develop basic programming skills using My SQLi and PHP.

1
 1. INTODUCTION

1.1 Definition :

Web development is the building and maintenance of websites; it’s the work
that happens behind the scenes to make a website look great, work fast and
perform well with a seamless user experience.

Web developers, or ‘devs’, do this by using a variety of coding languages. The

languages they use depends on the types of tasks they are preforming and
the platforms on which they are working.

Web development skills are in high demand worldwide and well paid too –
making development a great career option. It is one of the easiest accessible
higher paid fields as you do not need a traditional university degree to
become qualified.

The field of web development is generally broken down into front-end (the
user-facing side) and back-end (the server side).

1.2 About web development Training :

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

program in the fields of HTML, CSS, Bootstrap, PHP, and MySQL. In this
training program, I have learn multiple web technologies that will enable me
to create my own web projects. This training program is created by
Internshala team of experts who

have built Internshala website, Android app and this awesome training platform.
I have learn through video tutorials. For a great hands-on learning
experience, this training program is packed with assignments, assessment
tests, code challenges, quizzes, and exercises. At the end of this training
program, I have build an e-commerce website that will work seamlessly
across different devices. For doubt clearing, I post my queries on the forum
and get answers within 24 hours.

1.3 Front-End and Back-End Development

A front-end dev takes care of layout, design and interactivity using HTML, CSS and
JavaScript. They take an idea from the drawing board and turn it into reality. The backend
developer engineers what is going on behind the scenes. This is where the data is stored,
and without this data, there would be no frontend. The backend of the web consists of the
server that hosts the website, an application for running it and a database to contain the
data

1
 2. ABOUT ORGANIZATION

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 organizations in India. Internshala is a dot com business
with the heart of dot org.
We are a technology company on a mission to equip students with relevant
skills & practical exposure through internships and online trainings. Imagine
a world full of freedom and possibilities. A world where you can discover
your passion and turn it into your career. A world where your practical skills
matter more than your university degree. A world where you graduate fully
assured, fully confident, and fully prepared to stake claim on your place in
the world.
2.1 History
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.

2.2 Partnerships
In August 2016, Telangana's not-for-profit organization, Telangana Academy
for Skill and Knowledge (TASK) partnered with Internshala to help students
with internship resources and career services In September 2016, Team Indus,
Google XPRIZE shortlisted entity has partnered with Internshala for college
outreach for its initiative, Lab2Moon.

2.3 Awards and recognition

In 2011, the website became a part of NASSCOM 10K Startups. In 2015, Internshala
was a finalist in People Matters TechHR 2015 Spotlight Awards under 'Futurism in
Recruitment' category.

1
 3.TECHNOLOGY DESCRIPTION

3.1 SOFTWARE REQUIREMENTS:

3.1.1 XAMPP SERVER:

o XAMPP 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. Since most actual web server
deployments use the same components as XAMPP, it makes transitioning
from a local test server to a live server possible.

3.1.2 XAMPP's ease of deployment means a WAMP or LAMP stack can be installed
quickly and simply on an operating system by a developer, with the advantage that
common add-in applications such as WordPress and Joomla! can also be installed
with similar ease using Bitnami.

3.1.3 NETBEANS:

o NetBeans IDE is a free, open source, integrated development environment

(IDE) that enables you to develop desktop, mobile and web applications. The
IDE supports application development in various languages, including Java,
HTML5, PHP and C++. The IDE provides integrated support for the complete
development cycle, from project creation through debugging, profiling and
deployment. The IDE runs on Windows, Linux, Mac OS X, and other UNIX-
based systems.

o The IDE provides comprehensive support for JDK 7 technologies and the
most recent Java enhancements. It is the first IDE that provides support for
JDK 7, Java EE 7, and JavaFX 2. The IDE fully supports Java EE using the
latest standards for Java, XML, Web services, and SQL and fully supports the
Glassfish Server, the reference implementation of Java EE.

3.2 HARDWARE REQUIREMENTS:

3.2.1 MINIMUM REQUIREMENTS :
o 2 GB RAM

1
 o 10 GB HDD SPACE
o I3 6TH GEN PROCESSOR

4. PROJECT DESCRIPTION

4.1 PROJECT NAME:

An E-commerce website

4.2 OBJECTIVE:

Applying Knowledge of HTML, CSS, Bootstrap, Javascript, My SQLi, and PHP

to create an E-Commerce website that works seamlessly on different devices.

4.3MODULES:

4.3.1 HTML & CSS:

Hypertext Markup Language (HTML) is the standard markup language for

documents designed to be displayed in a web browser. Web browsers receive
HTML documents from a web server or from local storage and render the
documents into multimedia web pages.

 HTML 5

HTML5 is a markup language used for structuring and presenting content on

the World Wide Web. It is the fifth and last major HTML version that is a World
Wide Web Consortium (W3C) recommendation.

 Cascading Style Sheets:

Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language such as
HTML. [1] CSS is s a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.

CSS: Types:

1
 1. Internal/Embedded CSS.
2. External CSS
3. Inline CSS

HTML & CSS to build structure of web pages and to style them.

 HTML Introduction
 HTML Page Structure
 Tags and Elements
 Text Formatting
 Attributes
 Hyperlinks
 Cascading Style Sheets
 Box Model
 Colors
 Fonts
 Lists
 Creating Layouts
 Images
 Tables
 Navigation
 Forms

4.3.2. Features of HTML and CSS

 Learned the basics of Web Development

 Define the Structure of a Webpage
 Major changes can be made easily in designing of Webpage
 Easy to understand and learn
 Non- case Sensitive tags and attributes

4.3.3. BOOTSTRAP :

Bootstrap is a free and open source front-end development

1
 framework for the creation of website and web pages.

 Introduction
 Breakpoints
 Containing elements
 Jumbotron & Glyphicons
 Tables
 Column / Rows
 Navbar
 Images
 Thumbnails
 Forms
 Panels
Original author(s) Mark Otto, Jacob Thornton

Developer(s) Bootstrap Core Team

Website getbootstrap.com

Stable release 4.5.3 / 13 October 2020 2 months ago

Repository Bootstrap Repository

Written in HTML, CSS, Less (v3), Sass (v4) and

JavaScript
Platform Web platform

License MIT License (Apache License 2.0 prior

4.3.4 JAVASCRIPT:

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming

language with first-class functions While it is most well-known as the scripting
language for Web pages, many non-browser environments also use it, such
as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based,
multi-paradigm, single-threaded, dynamic language, supporting object-oriented,
imperative, and declarative (e.g. functional programming) style.

1
  JavaScript Data Types
JavaScript variables can hold many data types: numbers, strings, objects and
more:

var length = 16;                               // Number

var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // ObjecT

 Functions:

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
};

A JavaScript function is defined with the function keyword, followed by

a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs
(same rules as variables).

The parentheses may include parameter names separated by commas:

(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly

brackets: {}

 Function Return:

When JavaScript reaches a return statement, the function will stop

executing.

If the function was invoked from a statement, JavaScript will "return" to

execute the code after the invoking statement.

Functions often compute a return value. The return value is "returned"

back to the "caller"

 Function Invocation

1
 The code inside the function will execute when
"something" invokes (calls) the function:

 When an event occurs (when a user clicks a button)

 When it is invoked (called) from JavaScript code
 Automatically (self invoked)

 Javascript Conditions

In JavaScript we have the following conditional statements:

 Use if to specify a block of code to be executed, if a specified condition is true

 Use else to specify a block of code to be executed, if the same condition is false
 Use else if to specify a new condition to test, if the first condition is false
 Use switch to specify many alternative blocks of code to be executed.

 Javascript Looping

JavaScript supports different kinds of loops:

 for - loops through a block of code a number of times

 for/in - loops through the properties of an object
 for/of - loops through the values of an iterable object
 while - loops through a block of code while a specified condition is true
 do/while - also loops through a block of code while a specified condition is
true.

4.3.5. MY SQL:

SQL is a programming language that is typically used in relational

database or data stream management system.

 Introduction to database
 Introduction to DBMS
 Creating the first database
 DDL
 Alter & Drop
 Foreign Key & Truncate
 DML
 SQL Joins

1
  Additional SQL features

 DATABASE :

A database in SQL Server is made up of a collection of tables that

stores a specific set of structured data. A table contains a collection
of rows, also referred to as records or tuples, and columns, also
referred to as attributes.

 DDL:
DDL refers to “Data Definition Language”, a subset
of SQL statements that change the structure of the database schema
in some way, typically by creating, deleting, or modifying schema
objects such as databases, tables, and views.

 ALTER & DROP:

The SQL ALTER TABLE command is used to add, delete or modify
columns in an existing table. You should also use the ALTER TABLE
command to add and drop various constraints on an existing table.

SYNTAX:
ALTER TABLE table_name ADD column_name datatype;
DROP is used to delete a whole database or just a table. The
DROP statement destroys the objects like an existing database,
table, index, or view.
SYNTAX:
DROP TABLE table_name;

 FOREIGN KEY & TRUNCATE:

The result of Truncate quickly removes all data from a table.
SYNTAX:
TRUNCATE TABLE table_name;
A FOREIGN KEY is a key used to link two tables together.
A FOREIGN KEY is a field (or collection of fields) in one table
that refers to the PRIMARY KEY in another table.

1
 SYNTAX:
CREATE TABLE Orders (
    OrderID int NOT NULL,
    OrderNumber int NOT NULL,
    PersonID int,
     PRIMARY KEY (OrderID),
     FOREIGN KEY (PersonID) REFERENCES Persons(PersonID);

 DML:
Data manipulation language (DML) statements add, change, and
delete Oracle Database table data.

 SQL JOINS:
 A JOIN clause is used to combine rows from two or more tables,
based on a related column between them.

 (INNER) JOIN: Returns records that have matching values in both

tables.
 LEFT (OUTER) JOIN:
o Returns all records from the left table, and the matched
records from the right table.

 RIGHT (OUTER) JOIN:

o Returns all records from the right table, and the matched
records from the left table.

 FULL (OUTER) JOIN:

o Returns all records when there is a match in either left or
right table.

1
  SYNTAX:
SELECT Orders. OrderID, Customers.CustomerName,Orders.OrderDate
FROM Orders
INNER JOIN Customers ON Orders.CustomerID=Customers.CustomerID;

 SELECT column_name(s)
FROM table1
LEFT JOIN table2
ON table1.column_name = table2.column_name;

 SELECT column_name(s)
FROM table1
RIGHT JOIN table2
ON table1.column_name = table2.column_name;

 SELECT column_name(s)
FROM table1
FULL OUTER JOIN table2
ON table1.column_name = table2.column_name
WHERE condition;

4.3.6 PHP :

PHP stands for “ Hypertext Preprocessor ” . PHP is an HTML-embedded web

scripting language. This means PHP code can be inserted into the HTML of
a Web page.

 PHP: Introduction

1
  Basics
 Functions/Arrays/Strings
 Loops
 Database Connection
 SELECT Query with PHP (Part I)
 SELECT Query with PHP (Part II)
 Form
 Sessions
 Basic security
 Validations with HTML5/PHP

 Functions/Arrays/Strings

The array functions allow you to access and manipulate

arrays.Simple and multi-dimensional arrays are supported.The
PHP string functions are part of the PHP core. No installation
is required to use these functions.

 LOOPS:

Loops are used to execute the same block of code again and again,
as long as a certain condition is true.

 SELECT QUERY WITH PHP:

After making a SQL query using the SELECT statement, after that

we will execute this SQL query through passing it to the
PHP mysqli_query () function to retrieve the table data.

1
1
 5.DESIGN

Figure 1

5.1 Index page

The index page is the URL or local file that automatically loads when a web
browser starts and when the browser's 'home' button is pressed. The term is also
used to refer to the front page, web server directory index, or main web page of
a website of a group, company, organization, or individual.

Figure 2
5.2 Log In Module
In this module, the user enters the username and password as an input, then the
system checks for the username in database of WAMP Server and checks for
correctness of corresponding password saved and entered.
If the password get a match the user id directed to the user’s account in the
website, else a message is shown as : “Incorrect Password !”.

1
 Figure 3
5.3 Sign Up Module
This module is for a new user/ new account creation. The user enters Name,
email, password, contact, City and Address. Then on clicking Submit, the
system checks for the existence of the username in WAMP Server Database. If
the username already exists, it prompts a message : “User Exists !” else it makes
a new user data in database filling up the details as provided in the Server and
directs to the user’s Account.

Figure 4
5.4 Settings

This page allows existing users to change their password. Old password, New
password and Confirmation of New Password is taken as input. Once the New
password and confirmation of new password matches the user is allowed to
click “Change” button. Then, the system changes the old password of currently
logged in user to new password specifies.

1
 Figure 5

5.5 Products Page

This section of the web page provides the user to select the products available in
the website. Clicking on any of the items will take the user to the add to cart
page.

Figure 6

1
5.6 Cart Page
A cart page is an essential part of an e-commerce applications. It is the page where users
can pile up what they want to buy from the app and then simply checkout by paying
online. To comprehend what a cart page does, think of it as a normal shopping cart in a
store.The cart page contains all the items added to the cart along with their individual
prices. A total cost of all the items should be displayed on the page.

Figure 7

5.7 Checkout Page

This page will contain the list of the products that you have
added to the cart from the products page. The details to be
provided on this page are:

1. Shipping address
2. Billing address
3. Country code/ ZIP code

1
 Figure 8

5.8 Success page

The success page informs the user that his/her order has been accepted and his
items would be delivered shortly. Also, there is a link to the home page where
the user can purchase more items. Also he/she can track their order.

5.9 E-R Diagram

ER model stands for an Entity-Relationship model. It is a high-level data model. This model is used to
define the data elements and relationship for a specified system.
It develops a conceptual design for the database. It also develops a very simple and easy to design
view of data.
In ER modeling, the database structure is portrayed as a diagram called an entityrelationship diagram.

Components of the ER Diagram

Figure 9

1
This model is based on three basic concepts:

 Entities
 Attributes
 Relationships

5.10 ER Diagram of an Online Shopping Website

Figure 10

This ER (Entity Relationship) Diagram represents the model of Shopping System Entity. The
entity-relationship diagram of Shopping System shows all the visual instrument of database
tables and the relations between Shopping Cart Payment, Shopping, Delivery etc. It used
structura data and to define the relationships between structured data groups of Shopping
System functionalities. The main entities of the Shopping System are Shopping, Shopping
Cart, Order, Payment, Product and Delivery.

6. FUTURE SCOPE

1
 Web Designing has become the primary source for web developers
and websites to place their foot in the digital world. Almost every
website requires a proper Web Designing candidate which allows it
to stand tall for a proper result. Thus, choosing Web Designing as a
career option will indeed give great results to any candidate. The
scopes of career success with Web Designing are vividly increasing
throughout the world and not it has become a major development in
India. But to get the best Web Designing career options, you need to
undergo a proper Web Designing from a reliable institution. This
allows you to learn all about the subjects, the languages involved
with it and the creative skills.

6.1 Job Opportunities in Web Designing

6.1.1 . Front End Developer

The job role of a front end developer means to develop the website
visually. It is more focused on proper navigation, landing pages,
checking the user interface and much more. However, this also
means that you can attract a high salary capacity which gives you a
great choice in your career. So being a front end developer can be a
great option for you.

6.1.2 Back End Developer

The back end developer means that you need to mainly work with
the three web languages including HTML, CSS, and JavaScript. The
back end developer has a job role to design everything specifically
from padding, headers, footers and even structuring the website.
Without any proper web designer, a website will never have a
proper structure.

6.1.3 Web Application Developer

Being a Web application developer can also be a great career option

if you are a web designing expert. Almost most of the websites are
not willing to make an additional application which will bring in the
exposure for you to get the best results. Being a professional web
designer and developing the web application will earn you a
lucrative salary opportunity.

6.1.4 Design and Layout Analyst

Being a Design and Layout Analyst means that you need to have

1
 complete command over the HTML and PHP . The main job role of
a Design and Layout Analyst is to figure out a structure on how the
website will design and will be implemented on the users. So it is all
about creating the structure through HTML and PHP web languages.

6.1.5 UI Designer

Being a UI Designer means that you need to focus completely on the

User Interface. It is a technical role that is responsible for presenting
product development in many ways. So basically the main
responsibility for a UI Designer is to think from the audience’s
perspectives and build up a website according to it. But for this, you
need to understand coding and multiple web languages and know
how it all works to design a website.

1
 7. Conclusion

 We want to conclude that Web Designing and Web Developing services

are used in every kinds of business. Even small scale business will grow to
large extent after creating their business website.

 The standard tools used for creating the website will ensure that things
such as navigation, menus and layout confirm to current practices with
which every web user is familiar with.

 For Building a website we must use right tools and resources.

 There are huge opportunities available for the students who want to work
in this field. Many private and public organizations hire web designer for
their online work and website development.

1
 8. Bibliography

 Internshala.com

 www.stackoverflow.com

 www.google.co.in

 W3shool.com