WEB DESIGN AND APPLICATIONS

INTERNSHIP REPORT

Submitted by

A. NITHIN SRI 20DX13

S. DARSHAN 21XH02
THIYAGARAJAN VENKATESAN 21XH08

Under the guidance of

M. KRITHIKA

In partial fulfillment of the requirement for the award of

DIPLOMA IN COMPUTER ENGINEERING
STATE BOARD OF TECHNICAL EDUCATION
GOVERNMENT OF TAMILNADU

AUGUST 2022

DEPARTMENT OF COMPUTER ENGINEERING

PSG POLYTECHNIC COLLEGE
(Autonomous and an ISO 9001 certified Institution)
COIMBATORE – 641 004
 PSG POLYTECHNIC COLLEGE
(Autonomous and an ISO 9001 certified Institution)
DEPARTMENT OF COMPUTER ENGINEERING
COIMBATORE – 641 004

CERTIFICATE

A. NITHIN SRI 20DX13

S. DARSHAN 21XH02
THIYAGARAJAN VENKATESAN 21XH08

This is to certify that the Internship report entitled

WEB DESIGN AND APPLICATIONS
has been submitted by
A. NITHIN SRI
S. DARSHAN
THIYAGARARAJAN VENKATESAN

In partial fulfillment for the award of

DIPLOMA IN COMPUTER ENGINEERING
of the State Board of Technical Education,
Government of Tamil Nadu.

during the academic year 2021-2022

Ms. M. KRITHIKA Ms. P. RAJESWARI

Faculty guide Head in charge

Certified that the candidate was examined by us in the Internship examination held on
………………….

(Internal Examiner) (External Examiner)

 ACKNOWLEDGEMENT

We express our deep sense of gratitude and sincere thanks to beloved

principal Dr.B.Giriraj, for keeping interest in this internship training work, which has
been an inspiration to us.

We are highly indebted to Ms. P. Rajeswari, for her valuable guidance and
constant supervision. Without his able guidance, this project would not have been
possible and we shall eternally be grateful to her for her assistance.

We wish to express our sincere gratitude and heartfelt thanks to our Internship
guide Ms. M. Krithika, Lecturer, Department of Computer Engineering who has be a
source of encouragement and moral strength from the beginning to the end for the
success of our Internship.

II
 ABSTRACT

This report outlines the result of web design and applications under the
concepts of Front-end Elements such as HTML, CSS, JavaScript and Back-end
Elements such as PHP and web frameworks. SQL Database is also used in result
of web development in this report. Using Web Application tools, user can create,
modify, and publish their own websites and can use it anywhere on the internet with
responsive on all computing devices.

III
 ABOUT THE COMPANY

Gateway Software Solutions gives immense opportunities for the Final year
College Students especially for all Engineering students from Computer Science,
Electrical and Electronics, Electronics and Communication and Master Degree
students to develop their skills and work on real time projects. Gateway Software
Solutions offers Internship and Internship project works. The Company helps lift
academic results and improves the eligibility criteria for the students for their On
Campus and Off Campus Opportunities and Job assistance or placement
opportunities with IT & Software Companies.

IV
 TABLE OF CONTENTS

TABLE OF CONTENTS
CHAPTER PG.NO
Acknowledgement ………………………………………………………….......I
Abstract……………………………………………………………………………II
About the Company…………………………………………………………......III
1. INTRODUCTION……………………………………………………………….01
1.1 Web Development 01
1.2 Web Development Components 03
2. WEB TERMINOLOGY……..………...........................……..........................04
2.1 Network Protocols 04
2.2 Web Applications 05
2.3 Uniform Resource Locator 06
2.4 Hypertext Transfer Protocol 07
2.5 Client-Server model 07
3. WEB DESIGN CONCEPTS.………...........................……..........................08
3.1 User Interface 08
3.2 Front-End 09
3.3 Back-End 10
3.4 Web Frameworks 11
4. FRONTEND DEVELOPMENT………………………………………………..12
4.1 HTML 12
4.2 CSS 13
4.3 JavaScript 14
4.4 Goals for Development 15
5. BACKEND DEVELOPMENT……………………………………………….…16
5.1 PHP 16
5.2 MySQL 18
6. PROJECT…………………………..…………….……………………………..19
6.1 Project Description 19
6.2 Project Modules 19
CONCLUSION……………………………………...……………………………..26
BIBLIOGRAPHY……………………………………………………….................IV
APPENDICES………………………………………………………………….…..V
 LIST OF FIGURES

LIST OF FIGURES

FIG.NO NAME OF THE FIGURE PG.NO

1.1 Static and Dynamic websites 02
2.1 Client-Server Model 07
3.1 UI & UX Designs 09
3.2 Front-End & Back-End 10
3.3 Database Connectivity 11
4.1 Web Programming 13
4.2 Web Platform 15
5.1 MySQL Database 17
5.2 Features of PHP 17
5.3 MySQL 18
6.1 Homepage 1 19
6.2 Homepage 2 20
6.3 Signup Page 20
6.4 Login Page 21
6.5 Product View 21
6.6 New Products 22
6.7 Special Products 23
6.8 Contact Page 23
6.9 Checkout Cart 24
6.10 Login Database 24
6.11 Register Database 25
6.12 Bill Database 25
INTRODUCTION CHAPTER 1

CHAPTER 1
INTRODUCTION
In 2022 the Internet will be celebrated its 53th anniversary, and the World Wide Web
had been in existence for over 28 years. The concepts of computer networks and
hypertext on which these technologies rely are only a little older. And yet the speed of
development of these technologies, the speed of uptake by companies, and the speed of
acceptance by consumers is unlike anything mankind has witnessed. Although both the
Internet and the Web are firmly rooted in academic, there is no doubt that the commercial
interests are currently driving much of the technological development.

1.1 WEB DEVELOPMENT

Web development is the work involved in developing a website for the Internet (World Wide
Web) or an intranet (a private network).
Web development can range from developing a simple single static page of plain text to
complex web applications, electronic businesses, and social network services.

1.1.1 WEBSITES
A website is a collection of web pages and related content that is identified by a common
domain name and published on at least one web server.
Examples of notable websites are Google, Facebook, Amazon, and Wikipedia. All
publicly accessible websites collectively constitute the World Wide Web.

1.1.2 TYPES OF WEBSITES

 Dynamic Websites

 Static Websites
1.1.3 DYNAMIC WEBSITES
Built using server side language and technology, dynamic websites allow for
the content of each page to be delivered and displayed dynamically according to user
behaviour or from user-generated content. With a dynamic website all of your data and

1
INTRODUCTION CHAPTER 1

content are organized in a database or backend Content Management System, which

connects to your website pages.

1.1.4 STATIC WEBSITES

A static website is made up of web pages created using HTML, CSS and
JavaScript. Each page on a static website is stored as a single HTML file , which is delivered
directly from the server to the webpage exactly as is. Changes to a static website can be
done manually, and will only be made page by page, HTML file by HTML file.

Fig 1.1 Static and Dynamic websites

1.2 WEB DEVELOPMENT COMPONENTS

There are various components in developing a website. some of them are given below:

1.2.1 Front End Elements

People often describe the website as having a front end and back end. In this analogy,
front end is what you see, back end is what you don’t. Simple enough, except that you
can’t really see the navigation structure, not all at once. But it’s a place to start. Good
front-end components include the following:

 The navigation structure - This is the representation and structure of order of

the pages, the collection of what links to what. Usually it is held together by at
least one navigation menu.

 The page layout - Good layout is as important as any other element of design.
Bad layout makes a website look crowded and slapdash. Good layout allows the
2
INTRODUCTION CHAPTER 1

eye to find what it seeks easily.

 Logo - A good website has a unifying graphic around which it is built. The graphic
represents your company, your organization. It often sets up the color scheme
and the style elements used throughout.

 Images - Photos, graphics, navigation bars, lines and flourishes, animations can
all be placed on a website to bring it to life. Or, in some cases, bury it

 Contents - Internet began as a method of sharing information. As it evolved into

the World Wide Web, it became rich in all kind of media. It is formatted to be
easily scanned, and it is often optimized for search engines.

 Forms - If you want to find something on the website, there is no search box, you
just look around until you find it. But such sites are growing more rare as the
internet becomes an ever greater part of people’s lives.

 Blogs - Blogs are much in the news these days. Blogs can be done
independently, or as part of your website. Some content management systems
have blog modules.

1.2.2 Back End Elements

Back-end Development refers to the server-side development. It focuses on databases,

scripting, website architecture. It contains behind-the-scene activities that occur when
performing any action on a website.

 Servers - A server is a computer that gathers details about the interactions users
have with a website, interprets them and sends them across a network.

 Logic - Logic is the sequence of operations that programmers code into the
backend to accomplish specific tasks. Website logic contains algorithms and
functions that allow for websites to perform different actions and output
information depending on how users behave and interact with website features.

 Frameworks - A framework is a guide that you use to structure your code, logic

3
INTRODUCTION CHAPTER 1

and other aspects of your web architecture. Frameworks are like templates for a
website's backend that software programmers user to facilitate writing and editing
code for their server.

 Databases - Databases contain the information that servers access to direct

website functions. In website backend architecture, databases include information
such as integers, characters and arrays, which are sets of variables that have
something in common.

 API - APIs, or application programming interfaces, allow software programs to

communicate with other servers and databases to exchange information. APIs
exist in the backend to simplify the presentation of information from multiple
databases.

4
WEB TERMINOLOGIES CHAPTER 2

CHAPTER 2
WEB TERMINOLOGIES

2.1 Network Protocols

A network protocol is a standard way of regulating data transmission between

computers. They have to obey agreed rules if they are to communicate and 'get on with
each other'. After many years of both public and private research and development,
two network protocols are now dominant:

TCP (Transaction Control Protocol) and IP (Internet Protocol), together known as

TCP/IP. These were actually unlikely protocols to be so widely accepted, as faster,
standardized protocols had been agreed upon, but none had the same robustness and
extensibility as TCP/IP.) Very often protocols were implemented without any formal
acceptance and, because they worked most of the time, they became standards by default.
Although TCP/IP is an accepted, de facto standard, work on Internet protocols continue in
order to improve communication quality and support the continued growth of the Internet.

There is no dictating authority for the Internet. Without a controlling authority, interim
proposals about protocol changes are made by groups of interested individuals and then
opened up for discussion. Documents containing the various proposed standards are
published as Requests For Comment documents (RFCs). You may see references to a
specific RFC as the best description of a protocol!

2.2. Web Applications

A web application unlike standalone application, runs over the Internet. Examples of
web apps are google, amazon, ebay, facebook and the UCT website. A web app is typically
a 3-tier client-server database application run over the Internet and it comprises following
components:

Client-Side Programs: could be written in HTML Form, JavaScript, VBScript,

Flash, and others.

5
WEB TERMINOLOGIES CHAPTER 2

Server-Side Programs: could be written in Java Servlet , JSP, ASP, PHP, Perl,
Python, CGI, and others.

 HTTP Client (or Web Browser): E.g., Internet Explorer (MSIE), FireFox, Chrome,
Safari, and others.

 Database: E.g., Open-source MySQL, MariaDB, Apache Derby, mSQL , SQLite ,

PostgreSQL , OpenOffice's Base; Commercial Oracle, IBM DB2, SAP SyBase,
MS SQL Server, MS Access; and others. You will learn how to install MySQL in
the next chapter.

2.3. Uniform Resource Locator (URL)

An URL is needed to locate any resources on the Web. It is an address format that
specifies how and where to find a document. The general format is as follows, where the
various items in italics must be substituted with part of a real URL, or omitted altogether.
In the machine name http is the protocol identifier, while www.apple.com is the resource
name. port is the TCP port to connect to; this is an entry point to software on the server; an
optional part of a URL.

2.4 Hypertext Transfer Protocol (HTTP)

HTTP is a network protocol used to retrieve documents from a variety of machines in

a minimum amount of time. It was invented by Tim Berners-Lee to support a project in
developing a distributed hypertext system.
Distributed hypertext requires the retrieval of documents from many different
machines. File Transfer Protocol (FTP), which predates the Web, would be too slow for
this purpose as it is a connection-oriented protocol that requires a permanent connection to
a server, thus requiring a connection-maintenance overhead when accessing different
machines.

2.5 Client-Server Computing Model

A software partitioning paradigm in which a distributed system is split between one

or more server tasks which accept requests, according to some protocol, from (distributed)
client tasks, asking for information or action. There may be either one centralized server or
6
WEB TERMINOLOGIES CHAPTER 2

several distributed ones. This model allows clients and servers to be placed independently
on nodes in a network. Client-server computing is mainly about the client computer
possessing its own computing power. In the days of mainframes, all the processing power
took place on central computers.

Fig 2.1 Client Server model

2.6 Functionality
In the context of the Web, users run client programs (i.e. Web browsers).
• They allow the user to send a request for information to the server.
• They receive a request from a client and process the request.
• They respond by sending the requested information back to the client.
• A user, via a web browser issues a URL request to an HTTP server to start app.
• A client-side program (such as an HTML form) is loaded into client's browser.
• The user fills up the query criteria in the form.
• The client-side program sends the query parameters to a server-side program.
• The server-side program receives the query parameters, queries the database and
returns the query result to the client.
• The client-side program displays the query result on the browser.

7
WEB DESIGN CONCEPTS CHAPTER 3

CHAPTER 3
WEB DESIGN CONCEPTS
3.1 User Interface

User interface (UI) design is the process designers use to build interfaces in software or
computerized devices, focusing on looks or style. Designers aim to create interfaces which
users find easy to use and pleasurable. UI design refers to graphical user interfaces and
other forms.

3.1.1 Types of User Interface

• Graphical user interfaces (GUI) Users interact with visual representations on digital
control panels. A computer’s desktop is a GUI.

• Voice-controlled interfaces (VUI) Users interact with these through their voices. Most
smart assistants. e.g., Siri and Alexa

• Gesture-based interfaces—Users engage with 3D design spaces through bodily

motions: e.g., in virtual reality games.

3.1.2 User Interface vs. User Experience

It’s important to distinguish the total user experience from the user interface (UI), even though
the UI is obviously an extremely important part of the design. As an example, consider a
website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for
a user who wants information about a small independent release if the underlying database
only contains movies from the major studios.

8
WEB DESIGN CONCEPTS CHAPTER 3

Fig 3.1 – UI & UX Design

3.2 Front End Development

Front-end web development, also known as client-side development is the practice of

producing HTML, CSS and JavaScript for a website or Web Application so that a user can
see and interact with them directly. The challenge associated with front end development is
that the tools and techniques used to create the front end of a website change constantly
and so the developer needs to constantly be aware of how the field is developing.

The objective of designing a site is to ensure that when the users open up the site they
see the information in a format that is easy to read and relevant. This is further complicated
by the fact that users now use a large variety of devices with varying screen sizes and
resolutions thus forcing the designer to take into consideration these aspects when
designing the site. They need to ensure that their site comes up correctly in different
browsers (cross-browser), different operating systems (cross-platform) and different
devices (cross-device), which requires careful planning on the side of the developer.

9
WEB DESIGN CONCEPTS CHAPTER 3

Fig 3.2 Front-End and Back-End

A front-end developer architects and develops websites and applications using web
technologies (i.e., HTML, CSS and JavaScript), which run on the Open Web Platform or
act as compilation input for non-web platform environments (i.e., React Native).

Typically, a person enters into the field of front-end development by learning to develop
HTML, CSS, and JavaScript which commonly runs in a web browser but can also run in
a headless browser, Web View, or as compilation input for a native runtime environment.

3.3 Back End Development

Back-end Development refers to the server-side development. It focuses on databases,

scripting, and website architecture. It contains behind-the-scene activities that occur when
performing any action on a website. It can be an account login or making a purchase from an
online store. Code written by back-end developers helps browsers to communicate with
database information.

10
WEB DESIGN CONCEPTS CHAPTER 3

Fig 3.3 Database Connectivity

3.4 Web Frameworks

A web framework (WF) or web application framework (WAF) is a software framework that is
designed to support the development of web applications including web services, web
resources, and web APIs. Web frameworks provide a standard way to build and deploy web
applications on the World Wide Web. Web frameworks aim to automate the overhead
associated with common activities performed in web development.

Examples of Server-side frameworks

 Symfony (PHP)

 Django (Python)

 Express (Node.js/JavaScript)

Examples of Client-side frameworks

 Bootstrap

 React.js

 Angular.js

11
FRONT END DEVELOPMENT CHAPTER 4

CHAPTER 4
FRONT END DEVELOPMENT

4.1 HTML
4.1.1 Introduction to HTML
HTML stands for Hyper Text Markup Language. It is used to design web pages using
markup language. Language uses tags to define what manipulation has to be done on the
text.HTML is a markup language which is used by the browser to manipulate text, images and
other content to display it in required format. HTML was created by Tim Berners-Lee in 1991.
Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure of
a web page semantically and originally included cues for the appearance of the document.
HTML can embed programs written in a scripting language such as JavaScript, which affects
the behaviour of web pages. Inclusion of CSS defines the look and layout of content.

4.1.2 Features of HTML

HTML is the most common used language to write web pages. It has recently gained
popularity due to its advantages
 It is the language which can be easily understood and can be modified.
 It provides the more flexible way to design web pages along with the text.
 Links can also be added to the web pages so it helps the readers to browse the
information of their interest.
 Graphics, videos and sounds can also be added to the web pages which give an extra
attractive look to your web pages.

4.2 CSS

4.2.1 Introduction
 Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.

12
FRONT END DEVELOPMENT CHAPTER 4

 CSS handles the look and feel part of a web page. Using CSS, you can control the
colour of the text, the style of fonts, the spacing between paragraphs, how columns are
sized and laid out, what background images or colors are used, as well as a variety of
other effects.

Fig 4.1 Web Programming

4.3 JAVASCRIPT

4.3.1 Introduction
JavaScript is a cross-platform, object-oriented scripting language used to make
webpages interactive (e.g., having complex animations, clickable buttons, popup menus,
etc.). There are also more advanced server-side versions of JavaScript such as Node.js,
which allow you to add more functionality to a website than simply downloading files.

 Client-side JavaScript extends the core language by supplying objects to control a

browser and its Document Object Model (DOM). For example, client-side extensions
allow an application to place elements on an HTML form and respond to user events
such as mouse clicks, form input, and page navigation.
 Server-side JavaScript extends the core language by supplying objects relevant to
running JavaScript on a server. For example, server-side extensions allow an
application to communicate with a database, provide continuity of information from one
invocation to another of the application, or perform file manipulations on a server.

13
FRONT END DEVELOPMENT CHAPTER 4

4.3.2 Overview of JavaScript

 JavaScript is a lightweight, interpreted programming language.

 Designed for creating network-centric applications.
 Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform.

4.3.3 Features of JavaScript

JavaScript language consists of several different features
 JavaScript is very useful while using forms. It has the capability to validate user input
for errors and also saves time. If the user leaves a required field empty or the
information is incorrect, JavaScript checks for them before sending the data to the
server.

 JavaScript is a client-side technology, it can perform basic calculations on the browser.

The browser does not need to ask server time for every task. This is especially helpful
when a user needs to perform these calculations repeatedly. In these cases,
connecting to the server would take a lot more time than performing the actual
calculations.

4.3.4 Processing Forms

Although forms could simply be used to display information, HTML provides them in
order to supply a way for the user to interact with a Web server. The most widely used
method to process the data submitted through a form is to send it to server-side software
typically written in a scripting language, although any programming language can be used.
The figure below outlines the kind of processing that takes place.

1. The user retrieves a document containing a form from a Web server.

2. The user reads the Web page and interacts with the form it contains submitting the
form sends the form data to the server for processing.
3. The Web server passes the data to a CGI programme.
4. The CGI software may use database information or store data in a server-side

14
FRONT END DEVELOPMENT CHAPTER 4

database.

5. The CGI software may generate a new page for the server to return to the user.
6. The user reads the new Web document and may interact with it.

Fig 4.2 Web Platform

4.4 Goals for Front end Development

Accessibility

With continuing development for mobile devices, such as smart phones and tablets,
designers need to ensure that their site comes up correctly in browsers on all devices. This
can be done by creating a responsive web design using style sheets in CSS.

Performance

Performance goals are chiefly concerned with render time, manipulating the HTML,
CSS, and JavaScript to ensure that the site opens up quickly and respond.

Speedy development

This technology enables speedy development and saves time.

15
BACK END DEVELOPMENT CHAPTER 5

CHAPTER 5
BACK END DEVELOPMENT
Types of Back-end Development Languages

 Backend programming can either be object-oriented or functional.

 OOP is the technique that focuses on the creation of objects. With object-oriented
programming, statements should be executed in a particular order.
 Functional back end programming is a technique that is more “action”-based.
Functional programming uses declarative language, which means that statements can
be executed in any order. It’s commonly used for data science, and popular languages
are SQL, F#, and R.
 Back end languages can either be statically typed or dynamically typed. The former is
more rigid, but better at catching errors, whereas the latter is more flexible but allows
for variables to change types (which could account for unexpected errors).

5.1 PHP: Hypertext Preprocessor

5.1.1 Introduction to PHP

PHP is a server scripting language, and a powerful tool for making dynamic and
interactive Web pages. PHP is a widely used, free, and efficient alternative to competitors
such as Microsoft's ASP. PHP is a general purpose scripting language geared toward web
development. It was originally created by Danish Canadian programmer Rasmus Lerdorf in
1994. PHP code is usually processed on a web server by a PHP interpreter implemented as
a module, a daemon or as a Common Gateway Interface (CGI) executable. On a web server,
the result of the interpreted and executed.

PHP code which may be any type of data, such as generated HTML or binary image
data would form the whole or part of an HTTP response. Various web template systems,
web content management systems, and web frameworks exist which can be employed to
orchestrate or facilitate the generation of that response. Additionally, PHP can be used for
many programming tasks outside the web context, such as standalone graphical

16
BACK END DEVELOPMENT CHAPTER 5

applications and robotic drone control. PHP code can also be directly executed from
the command line.

Fig 5.1 PHP

5.1.2 Features of PHP

Performance - PHP script executed much faster than those scripts written in JSP and ASP.
Open Source - PHP source code and software are freely available on the web.
Embedded - PHP code can be easily embedded within HTML tags and script.
Platform Independent - PHP is available for WINDOWS, MAC, LINUX & UNIX OS.
Database Support - PHP supports all the leading databases like MySQL, SQLite, ODBC.
Error Reporting - PHP has predefined error reporting constants to generate an error notice.

Fig 5.2 Features of PHP

17
BACK END DEVELOPMENT CHAPTER 5

5.2 MySQL Database

5.2.1 Introduction to MySQL

MySQL is an Oracle-backed open source relational database management system

(RDBMS) based on Structured Query Language (SQL). MySQL runs on virtually all platforms,
including Linux, UNIX and Windows. Although it can be used in a wide range of applications,
MySQL is most often associated with web applications and online publishing.

MySQL is an important component of an open source enterprise stack called LAMP. LAMP
is a web development platform that uses Linux as the operating system, Apache as the web
server, MySQL as the relational database management system and PHP as the object-
oriented scripting language.

5.2.2 MySQL vs SQL

Before 2016, the main difference between MySQL and SQL was that the former could be
used on multiple platforms, whereas the latter could only be used on Windows. Microsoft has
since expanded SQL When MySQL is installed via Linux, its package management system
requires custom configuration to adjust security and optimization settings. The database object
semantics between SQL Server and MySQL are similar, but not identical. There are architectural
differences that must be considered when migrating from SQL Server to MySQL. In MySQL, there
is no difference between a database and a schema, while SQL Server treats as separate entities.

Fig 5.3 MySQL

18
INTERNSHIP REPORT CHAPTER 6

CHAPTER 6
INTERNSHIP PROJECT

6.1 Online Store Website

6.1.1 Project Description:
An efficient website built using basic web development tools. It has features such as
Sign up, Add to Cart, Proceed to Cart & to Buy. This Project is done using HTML, CSS,
JavaScript, and MySQL. The front-end was designed using HTML, CSS and Bootstrap. The
back-end was developed using MySQL and PHP connectivity. The user details and their
posts are stored in the databases.

6.1.2 Project Modules:

Module 1 – Home Page:
A Homepage is the main webpage of a website. The term may also refer to start page
shown in a web browser when the application opens.

Fig 6.1 – Home page1

19
 INTERNSHIP REPORT CHAPTER 6

Home Page - Limited Offer:

A Limited-time product refer to any good or services that is available in a specific market
only for a limited time period.

Fig 6.2 – Home page2

Module 2 - Register / Signup Page:

The purpose of a registration form is to help you collect your attendee's information and
payments (if you are planning a paid event).

Fig 6.3 Signup Page

20
INTERNSHIP REPORT CHAPTER 6

Module 2 - Login Page:

A Login forms are used in almost every website and Application. A login form utilizes the
credentials of a user, in order to authenticate their access.

Fig 6.4 Login Page

HomepIce Cream Products:

Product availability includes the cost of designing, manufacturing, storing, and delivering
different item variances. With high product availability, customers can visit a business
knowing all of their shopping needs can be fulfilled.

Fig 6.5 Product View

21
INTERNSHIP REPORT CHAPTER 6

New Arrivals:
New and Special Ice creams are listed using frames and Images with transparent
backgrounds are placed for the fulfillment of the site.

Fig 6.6 New Products

Special Products:
Special Ice creams and popular flavors are ordered using frames and Images with
transparent backgrounds are placed for the fulfillment of the site. Add to cart button was
added as action for users to buy.

22
INTERNSHIP REPORT CHAPTER 6

Fig 6.7 Special Products

Module 3 - Contact Page:

The page contains the fields for filling in name, address and type of comment. On most
company websites, email and mailing addresses are also included; however, the contact
form provides an immediate, convenient way for users to ask the company questions.

Fig 6.8 Contact Page

Checkout Cart:
A shopping cart on an online retailer's site is a piece of software that facilitates the purchase

23
INTERNSHIP REPORT CHAPTER 6

of a product or service. It accepts the customer's payment and organizes the distribution of
that information to the merchant and customers.

Fig 6.9 Checkout Cart

Login Database:
A database is an organized collection of structured information, or data, typically stored
electronically in a computer system. A database is usually controlled by a database
management system (DBMS).

Fig 6.10 Login Database

24
INTERNSHIP REPORT CHAPTER 6

Register Database:
The Register database contains user information and contact data which are stored using
PhpMyAdmin. It is controlled by MySQL Database.

Fig 6.11 Register Database

Bill Database:

The Bill database contains Product information and Billing data and are stored using
PhpMyAdmin. It is controlled by MySQL Database.

Fig 6.12 Bill Database

25
 CONCLUSION
We have successfully completed the Internship in Web Design and Applications
under the warm assistance and full-fledged support of our staff. During this training period
we learned useful latest technology trends about web designing and Applications concepts.

We have learned about FRAMEWORKS, MySQL, CSS, HTML, JavaScript and PHP
Concepts and we have designed Web application using Simple tools and applications.

26
 BIBLIOGRAPHY
BOOKS

1. Paul McFedries, “Web Design Playground: HTML & CSS the Interactive
Way”, Manning Publications, 2019
2. Robin Nixon, “Learning PHP, MySQL & JavaScript: With jQuery, CSS &
HTML5”, 5th Edition, O'Reilly Media, Publications, 2018

WEB LINKS

https://www.w3schools.com/
https:www.guru99.com/
https://www.wikipedia.org/

27
 APPENDICES
HTML:

Index.Html:
<!DOCTYPE html>
<html lang="en"><head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<linkhref="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Herr+Von+Muellerhoff&
family=Montserrat:wght@400;500&family=Poppins&display=swap"
rel="stylesheet">
<meta name="keywords" content="ice-cream, dummy, html, css, javascript">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scoopshop</title>
<link rel="shortcut icon" href="./img/ice-pop-favicon.png" type="image/x-icon">
<link rel="stylesheet" href="./css/main.css">
</head><body>
<div id="hero">
<header>
<h1 id="logo"><a href="#" class="logo__link"> Scoopshop </a></h1>
<nav>
<ul class="nav">
<div class="nav__links">
<a href="#main-container" class="nav__item ">
<li class="nav__item--underline">SHOP</li>
</a>
<a href="#contact" class="nav__item">
<li>CONTACT</li>
</a>
<a href="login.html" class="nav__item">
<li >SIGN UP</li> </a> </div>
<button href="#" class="nav__item nav__item--cart">
<li><i class="fas fa-shopping-cart"></i></li>
</button>
<div class="burger nav__item">
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
</div> </ul>
</nav>
</header>
<section id="hero-text">
<h2 class="hero-text__heading">Scoopshop</h2>
V
 <p class="hero-text__tagline">Hygenically Hand-made ice-cream, made with Love!</p>
</section>
</div>
<main id="main-container">
<div class="limited-time-wrapper animate-top">
<section id="limited-time">
<p class="limited-time__side-banner">Limited time</p>
<div class="limited-time_content-wraper">
<p class="limited-time__text"><span class="limited-time__text--attention">Grab yours
soon...<br> </span> before time runs
out!!
</p>
<p class="limited-time__time">59:00</p>
</div>
<div class="limted-time__img-container">
<img src="./img/limited-time.png" alt="" id="limited-time__img">
</div>
</section>
</div>
<section class="special-flavours animate-left">
<h3 class="special-flavours__heading">Special Cones</h3>
<div class="special-flavours__products-grid">
<div class="special-flavours__products">
<img src="./img/choco_vanilla.webp" alt="Choco vanilla">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Choco vanilla cone</h4>
<p class="special-flavours__product-price"><span class="special-flavours__product--
oldprice">₹ 80</span>
₹ 49</p>
<button class="add-to-cart cartBtn" data-title="Choco vanilla" data-price="49"
data-img="./img/choco_vanilla.webp" data-quantity=1>Add to cart</button>
</div>
</div>
<div class="special-flavours__products">
<img src="./img/double-chocolate.webp" alt="Chocolaty mix">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Chocolaty mix cone</h4>
<p class="special-flavours__product-price"><span class="special-flavours__product--
oldprice"> ₹ 99</span>
₹ 60</p>
<button class="add-to-cart cartBtn" data-title="Chocolaty mix" data-price="49"
data-img="./img/double-chocolate.webp" data-quantity=1>Add to cart</button>
</div>
</div>

VI
 <div class="special-flavours__products">
<img src="./img/butterscotch.webp" alt="Butterscotch">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Butterscotch cone</h4>
<p class="special-flavours__product-price"><span> ₹ 79</span> ₹ 45</p>
<button class="add-to-cart cartBtn" data-title="Butterscotch" data-price="49"
data-img="./img/butterscotch.webp" data-quantity=1>Add to cart</button>
</div>
</div>
</div>
</section>
<section class="featured-products-wrapper">
<div class="featured-products animate-right">
<img src="./img/feast-chocolate.webp" alt="Nutty Chocolate mix">
<h4>Feast Chocolate</h4>
<p>Who doesn’t like a Solid surprise! Bite the crunchy chocolate coating into a soft creamy
chocolate delight and finish with a solid chocolate core.
<br>70ml
</p>
<button class="add-to-cart-featured cartBtn" data-title="Nutty Chocolate mix" data-price="99"
data-img="./img/feast-chocolate.webp" data-quantity=1>Add to cart</button>
</div>
<div class="featured-products animate-left">
<img src="./img/unicornetto.webp" alt="Unicornetto">
<h4>Uni Cornetto</h4>
<p>Little magic little fantasy! Creamy berry dessert with rich white chocolate disc and magic
praline sprinklers in a new purple cone!
<br>110ml
</p>
<button class="add-to-cart-featured cartBtn" data-title="Unicornetto" data-price="89"
data-img="./img/unicornetto.webp" data-quantity=1>Add to cart</button>
</div>
<div class="featured-products animate-right">
<img src="./img/corenetto-disc.webp" alt="Cornetti disc">
<h4>Cornetto Disc Oreo</h4>
<p>It's a mix made in heaven! Oreo crushed in creamy Vanilla wrapped in our first-ever
chocolate
cone topped with a chocolate disc
<br>110ml
</p>
<button class="add-to-cart-featured cartBtn" data-title="Cornetti disc" data-price="79"
data-img="./img/corenetto-disc.webp" data-quantity=1>Add to cart</button>
</div>
</section>

VII
 <section class="special-flavours animate-left">
<h3 class="special-flavours__heading">YUMMY STICKS!</h3>
<div class="special-flavours__products-grid special-flavours__yummy-sticks">
<div class="special-flavours__products">
<img src="./img/shahi-kulfi.webp" alt="Shahi kulfi" loading="lazy">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Shahi kulfi</h4>
<p class="special-flavours__product-price"><span> ₹ 77</span> ₹ 54 </p>
<button class="add-to-cart cartBtn" data-title="Shahi kulfi" data-price="54"
data-img="./img/shahi-kulfi.webp" data-quantity=1>Add to cart</button>
</div>
</div>
<div class="special-flavours__products">
<img src="./img/chocobar.webp" alt="Chocobar" loading="lazy">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Chocobar</h4>
<p class="special-flavours__product-price"><span> ₹ 80</span> 60</p>
<button class="add-to-cart cartBtn" data-title="Chocobar" data-price="60" data-
img="./img/chocobar.webp"
data-quantity=1>Add to cart</button>
</div>
</div>
<div class="special-flavours__products">
<img src="./img/fruit_n_nut_feast.webp" alt="Feast Fruit & Nut" loading="lazy">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Fruit & Nut</h4>
<p class="special-flavours__product-price"><span> ₹ 78</span> ₹ 48</p>
<button class="add-to-cart cartBtn" data-title="Fruit & Nut" data-price="48"
data-img="./img/fruit_n_nut_feast.webp" data-quantity=1>Add to cart</button>
</div>
</div>
<div class="special-flavours__products">
<img src="./img/cloud-bite.webp" alt="Cloud Bite" loading="lazy">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Cloud Bite</h4>
<p class="special-flavours__product-price"><span> ₹ 89</span> ₹ 65</p>
<button class="add-to-cart cartBtn" data-title="Cloud Bite" data-price="65"
data-img="./img/cloud-bite.webp" data-quantity=1>Add to cart</button>
</div>
</div>
<div class="special-flavours__products">
<img src="./img/cola-blast.webp" alt="Cola Blast" loading="lazy">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Cola Blast</h4>

VIII
 <p class="special-flavours__product-price"><span> ₹ 89</span> ₹ 65</p>
<button class="add-to-cart cartBtn" data-title="Cola Blast" data-price="65"
data-img="./img/cola-blast.webp" data-quantity=1>Add to cart</button>
</div>
</div>
<div class="special-flavours__products">
<img src="./img/lemon_blast.webp" alt="Lemon Blast" loading="lazy">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Lemon Blast</h4>
<p class="special-flavours__product-price"><span> ₹ 70</span> ₹ 40</p>
<button class="add-to-cart cartBtn" data-title="Lemon Blast" data-price="40"
data-img="./img/lemon_blast.webp" data-quantity=1>Add to cart</button>
</div>
</div>
<div class="special-flavours__products">
<img src="./img/orange_mahabar.webp" alt="Orange Masti" loading="lazy">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Orange Masti</h4>
<p class="special-flavours__product-price"><span> ₹ 70</span> ₹ 40</p>
<button class="add-to-cart cartBtn" data-title="Orange Masti" data-price="40"
data-img="./img/orange_mahabar.webp" data-quantity=1>Add to cart</button>
</div>
</div>
<div class="special-flavours__products">
<img src="./img/mango_zap.webp" alt="Mango Zap" loading="lazy">
<div class="special-flavour__content-details">
<h4 class="special-flavours__product-name">Mango Zap</h4>
<p class="special-flavours__product-price"><span> ₹ 60</span> ₹ 48</p>
<button class="add-to-cart cartBtn" data-title="Mango Zap" data-price="48" data-
img="./img/mango_zap.webp"
data-quantity=1>Add to cart</button>
</div>
</div>
</div>
</section>
<section class="why-us animate-bottom">
<h3 class="special-flavours__heading why-us__heading">Why Scoopshop?</h3>
<div class="why-us__reasons-wrapper">
<div class="why-us__reasons">
<img src="./img/quality.svg" alt="" loading="lazy">
<p>Highest Quality!</p>
</div>
<div class="why-us__reasons">
<img src="./img/madewithlove.svg" alt="" loading="lazy">

IX
 <p>Hygenically Made!</p>
</div>
<div class="why-us__reasons">
<img src="./img/delivery.svg" alt="" loading="lazy">
<p>Safe Delivery!</p>
</div>
<span>name on card :</span>
<input type="text" >
</div>
<div class="inputBox">
<span>credit card number :</span>
<input type="number" >
</div>
<div class="inputBox">
<span>exp month :</span>
<input type="text" >
</div>
<div class="flex">
<div class="inputBox">
<span>exp year :</span>
<input type="number" >
</div>
<div class="inputBox">
<span>CVV :</span>
<input type="text" >
</div>
<input type="submit" value="proceed to checkout" class="submit-btn">
</form>
</div> </html>

CSS:
Main.CSS:

<style>
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;}
:root {
--main-font: "Poppins", sans-serif;
--hero-logo-font: "Herr Von Muellerhoff", cursive;
--heading-font: "Montserrat", sans-serif;
--main-background-left-color: #332379;

X
 --main-background-right-color: #5b42ab;
--old-price: #dfdfdf;
--light-red: #eb2f64;
--white: white;
--section-heading-font-size: clamp(2.5rem, 2.5vw, 8rem);
--letter-spacing: 0.04em;
--border-radius: 10px;
--add-to-cart-font-size: 1rem;
--add-to-cart-padding: 0.47em;
--footer-background: rgb(102, 75, 194, 0.5);
--nav-item-hover-background: rgba(255, 255, 255, 0.7);}
scroll-behavior: smooth;}
body {font-family: var(--main-font);
background: linear-gradient(
to right,
var(--main-background-left-color),
var(--main-background-right-color) );}
img {
width: 100%;}
header {
display: flex;
height: 5.8rem;
position: fixed;
z-index: 200;
width: 100%;
transition: all 0.3s;}
.nav-scrolled {
--nav-item-hover-background: rgba(255, 255, 255);
background-color: rgb(97, 64, 200);
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.9));}
#hero {
background: url(../img/hero-bg.png) no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
position: relative;}
font-weight: normal;
text-shadow: 3px 3px 4px #000000;
z-index: 1;}
.hero-text__tagline {
margin-top: -2rem;
font-size: clamp(1rem, 2vw, 3rem);
font-size: clamp(1.3rem, 2vw, 3rem);
font-weight: 500;

XI
 z-index: 1;}
@media screen and (max-width: 450px) {
.hero-text__heading {
font-size: 5.6rem; }
.hero-text__tagline {
font-size: 1.1rem;
margin-top: -1rem;
width: 20rem; }}
#main-container {
padding: 1px;
overflow: hidden;}
#limited-time {
max-width: var(--section-width);
margin: 3rem auto;
background: url(../img/grit.0f8155d3.png) 1700px,
url(../img/grit.0f8155d3.png) 1700px, var(--dark-yellow);
background-size: cover;
border-radius: 20px;
overflow: hidden;
position: relative;}
#limited-time__img {
position: absolute;
top: -15.5rem;
right: -5rem;
width: 35rem;
transform: rotate(53deg);}
.limited-time-wrapper {
transform: translate(0, 0);
width: var(--section-width);
margin: auto;}
.limited-time__side-banner {
position: fixed;
top: 0;
left: 0;
transform: rotate(-37deg) translateY(-31%) translateX(-26%);
width: 9rem;
text-align: center;
font-size: 1.1rem;
background: var(--light-red);
border-radius: 5px;}
.limited-time_content-wraper {
display: grid;
height: 100%;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));

XII
 justify-items: center;
align-items: center;
letter-spacing: var(--letter-spacing);
padding: 2rem;}
.limited-time__text {
font-size: clamp(2rem, 2.2vw, 3rem);
z-index: 2;
padding-left: 5rem;}
.limited-time__text--attention {
color: var(--white);}
.limited-time__time {
color: var(--white);
font-size: clamp(5.8rem, 5vw, 9rem);
z-index: 2;
font-family: var(--heading-font);
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.7);
font-variant-numeric: tabular-nums;}
@media screen and (max-width: 1100px) {
.limited-time_content-wraper {
grid-template-columns: 1fr;
padding: 0.9rem; }
.limited-time__text {
width: 80%;
padding: 0;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }
#limited-time__img {
top: -6rem;
right: -3rem;
width: 31rem;
transform: rotate(59deg); }}
@media screen and (max-width: 740px) {
#limited-time__img {
top: 0rem;
right: -2rem; }}
@media screen and (max-width: 550px) {
#limited-time__img {
display: none; }}
@media screen and (max-width: 450px) {
.limited-time__text {
font-size: 1.7rem; }
.limited-time__time {
font-size: 5.2rem;
}}

XIII
.add-to-cart,
.add-to-cart-featured {
font-family: inherit;
font-weight: 500;
margin: 0.5rem auto;
font-size: var(--add-to-cart-font-size);
background: #ffc600;
.why-us__reasons img {
width: 50%;
padding-bottom: 1em;}
/* Media queries */
@media screen and (max-width: 750px) {
.why-us__reasons img {
width: 80%; }}
@media screen and (max-width: 600px) {
.why-us__reasons-wrapper {
flex-direction: column; }
.why-us__reasons img {
width: 30%; }
.why-us__reasons {
width: 100%;
padding: 0.5em;
}}
@media screen and (max-width: 450px) {
.why-us__reasons {
width: 90%;
}}
@media screen and (max-width: 390px) {
.why-us__heading {
font-size: 1.8rem;
}}
.checkout-cart-wrapper {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
transform: translateY(-200%);
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.3);
z-index: 1000;opacity: 0;
pointer-events: none;} </style>

XIV