INDUSTRIAL INTERNSHIP TRAINING REPORT

E-COMMERCE WEBSITE

Submitted
by
Gayatri Barnwal
(1901227289)
Of
th
Sem- 7 /Branch-CSIT

Under Supervision of:

Smartknower
(Duration: 1st May, 2022-30th June, 2022)

Department of Computer Science & Engineering

C. V. RAMAN GLOBAL UNIVERSITY,
BHUBANESWAR, ODISHA
December
2022
DECLARATION

I hereby declare that the internship report entitled “Ecommerce Website” is my own work
and that, to the best of my knowledge and belief, it contains no material previously
published or written by another person nor material which to substantial extent has been
accepted for the award of any degree of the university or another institute of higher
learning.

Name of the Student: Gayatri Barnwal

Regn No.: 1901227289

Date: 17th Dec, 2022

2
 Department of Computer Science & Engineering

C. V. RAMAN GLOBAL UNIVERSITY

Certificate of Approval

This is to certify that we have examined the training report entitled “Ecommerce
Website” submitted by, Gayatri Barnwal (Regd No.-1901227289), CGU,
Bhubaneswar. We hereby accord our approval of the training work carried out and
presented in a manner required for its acceptance as per the academic regulation, for
the partial fulfillment for the 7th Semester in Computer Science & Engineering. This
training has fulfilled all the requirements as per the regulations of the university.

Prof. M.Mishra Dr. R. Priyadarshini

(Internship Coordinator) (H.O.D, CSE)

3
INTERNSHIP CERTIFICATE

4
 ACKNOWLEDGEMENT

It gives me immense pleasure to express my sincere gratitude to our faculty coordinator Prof. Monalisa
Mishra for her support and advices to get and complete internship in the above said organization.

I extend my sincere thanks to our HOD Dr. R. Priyadarshini for her immeasurable support throughout my
internship.

I also like to acknowledge the contribution of other faculty members of the Department of CSE for their
cooperation and kind assistance in successful completion of this internship.

December 2022 Gayatri Barnwal (1901227289)

5
 ABSTRACT

In this internship, I first got training on various tools and technologies to

develop user-friendly, interactive and responsive websites. I learned the basic
tools of web development such as HTML, CSS, JavaScript, Bootstrap and SQL.
The duration was 2 months in which the first month was for training purpose
and in second month, we got to work on an industrial project.

The project was to develop an ecommerce website. An e-commerce website

showcases complete description of various products to the online customers. It
makes it easy for customers to search, view, compare and choose a suitable
product. My project involves implementing web technologies to design the
frontend look of an ecommerce website and include various features in it. It has
basic features like Home, Shop page, product page, about page and contact
page. This report outlines the details various tasks performed during internship.

6
CONTENTS

DECLARATION…………………………………………………………………………………………...i
CERTIFICATE OF APPROVAL………………………………………………………………………...ii
INTERNSHIP CERTIFICATE…………………………………………………………………………..iii
ACKNOWLEDGEMENT...........................................................................................................................iv
ABSTRACT………………………………………………………………………………………………...v
CONTENTS …………………………………………………………………………………………….....vi
WEEKLY OVERVIEW…………………………………………………………………………………...1
INTRODUCTION.........................................................................................................................................2
OVERVIEW...............................
BACKGROUND AND MOTIVATION....................................................................
LEARNING OBJECTIVE…………………………………………………………………………………………………………..

METHODOLOGY...................................................................................................................................
RESULT/LEARNING OUTCOME…………………………………………………………………...
CONCLUSION ………………………………………………………………………………………….

7
WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

Week Date Day Name of the Topic/Module Completed

1st week 02-05-2022 Monday How websites work?

03-05-2022 Tuesday Tags in HTML

04-05-2022 Wednesday Tables in HTML

05-05-2022 Thursday Forms in HTML

06-05-2022 Friday Page structure in HTML

07-05-2022 Saturday Summary

Week Date Day Name of the Topic/Module Completed

2nd week 09-05-2022 Monday Introduction to CSS

10-05-2022 Tuesday Selectors in CSS

11-05-2022 Wednesday CSS properties & layout

12-05-2022 Thursday Media Query, Flexbox and Grid in CSS

13-05-2022 Friday Keyframes & Animations in CSS

14-05-2022 Saturday More on CSS

8
Week Date Day Name of the Topic/Module Completed

3rd week 16-05-2022 Monday Introduction to JavaScript

17-05-2022 Tuesday Lecture on Basics of JS

18-05-2022 Wednesday DOM

19-05-2022 Thursday Working with JS

20-05-2022 Friday Event Loop

21-05-2022 Saturday Summary

Week Date Day Name of the Topic/Module

Completed

4th week 23-05-2022 Monday Bootstrap

24-05-2022 Tuesday Bootstrap components

25-05-2022 Wednesday Bootstrap customization & layout

26-05-2022 Thursday More on Bootstrap

27-05-2022 Friday SQL

28-05-2022 Saturday Basics of SQL

9
Week Date Day Name of the Topic/Module Completed

5th week 30-05-2022 Monday Basic commands in SQL

31-05-2022 Tuesday Basic commands in SQL

1-06-2022 Wednesday Mini Project Problem Statement

2-06-2022 Thursday Mini Assignment Guidance -1

3-06-2022 Friday Mini Assignment Guidance -1

4-06-2022 Saturday Mini Assignment Guidance -1

6th week 6-06-2022 Monday Mini Assignment Guidance -1

7-06-2022 Tuesday Mini Assignment Finish

8-06-2022 Wednesday Lectures on Major Project Problem

Statement

9-06-2022 Thursday Creating the design

10-06-2022 Friday Deciding the features & pages

11-06-2022 Saturday Creating the basic structure using HTML

10
7th week 13-06-2022 14-02-2022 Monday Creating Home page: nav bar, search bar &
logo

14-06-2022 15-02-2022 Tuesday Styling Home page

15-06-2022 16-02-2022 Wednesday Creating Product Page

16-06-2022 17-02-2022 Thursday Styling Product Page

17-06-2022 18-02-2022 Friday Creating Contact Page

18-06-2022 25-02-2022 Saturday Styling Contact Page

8th week 20-06-2022 14-02-2022 Monday Creating About Page

21-06-2022 15-02-2022 Tuesday Styling About Page

22-06-2022 16-02-2022 Wednesday Detecting & correcting errors & bugs

23-06-2022 17-02-2022 Thursday Finishing the project

24-06-2022 18-02-2022 Friday Deployment

30-06-2022 30-06-2022 Saturday Project Submission

11
INTRODUCTION

Web development refers to the creating, building, and maintaining of websites. It

includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the
internet i.e. websites.

Creation of website requires appropriate strategy of successful design and

implementation. Everything is required to plan from scratch to end of website. It
will allow business personnel to make their total business using it and increase
their reachability thousands of times more than today they have, over the
internet. It will allow multiple shopping vendors to sale their products online.

Everything you see on a website, like buttons, links, animations, and more, were
created by a front end web developer. It is the front end developer's job to take
the vision and design concept from the client and implement it through code.
Backend is the server side of a website. It is the part of the website that users
cannot see and interact. It is the portion of software that does not come in direct
contact with the users. It is used to store and arrange data.

OVERVIEW

Ecommerce web development is the process of building and designing an

ecommerce website where consumers can purchase products online. In the
online era, most of all the business need ecommerce sites. Technological
advancement has made it possible for people to sit in the convenience of their
homes and still shop online without going to a physical shop. The e-commerce
website will feature the online shopping facility of various products under a
single web space. It has basic pages like: home, shop, product, contact, and
about page. Customers can view the details of products in shop page.

12
BACKGROUND & MOTIVATION

Traditionally, customers are used to buying the products at the real, in other
words, factual shops or supermarkets. It needs the customers to show up in the
shops in person, and walk around different shopping shelves, and it also needs
the owners of shops to stock, exhibit, and transfer the products required by
customers. It takes labour, time and space to process these operations.

Furthermore, the spread of the Covid-19 pandemic has caused a lot of changes
in our lifestyle, people fearing to get outside their homes, transportation almost
shut down and social distancing becoming all the more important. Big to small
scale business that relied on the traditional incur a lot of consequence due to the
lockdown issues. Some tend to more towards using social media platforms like
Facebook to sell their product. However, the social media platforms have been
beneficial for marketing purposes alone but leaves the whole task of customer
and massive order management via direct messaging (DM), which takes a lot of
time to respond to all customers.

So, now business are having their own ecommerce sites to facilitate buying
and selling. It makes the whole process shoppingmuch easier than before.
Today, the online experience is essential to the success of every business
and organization. Without a web developer, companies are left using drag-
and-drop web builders like Squarespace or a WordPress template; which is
not very helpful in long run.

13
LEARNING OBJECTIVE

The objective of the internship was to learn various tools required for
web development and to implement the learning into the website.

i. Knowledge
This internship provided us essential skills and knowledge one
requires in the field of web designing. The crucial tools used
during the tenure helped us in gaining knowledge about
programming languages.

ii. Work experience

By taking this training we enhanced our knowledge in Web
designing and got insight in how the websites are designed using
HTML and CSS.

iii. Communication skills

By interacting with my trainee and classmates I got to learn a lot. It
helped me to enhance my communicative skills and represent my
work with confidence. It boosted my confidence to design more
webpages and create some great designs just for fun.

iv. Implementation
First we learned the theory aspect and then we put that into
practice. By doing the practical work, our concept got clearer and
it was easy to work into HTML once we got familiar with it. By
putting our theoretical knowledge into practical, coding became
more fun.

14
METHODOLOGY

These are the necessary tools and materials needed to build the website both the
frontend and the back-end. These include software and open source materials.

1. HTML
Like the Skelton system (the frame/structure of bones) of the human body gives
a structure/layout to the human body. Similarly, HTML code does the same it
gives the layout of the websites.

Every webpage has three main sections:-

1. Header (Navigation bar/menu/logo)
2. Main section (main content).
3. Footer

Header:
It contains the brand name/logo, search bar, and menu items, this all comes
under the header In the header section, firstly made three divs for each one of
them. In the second class, I used the search icon imported through ionicon.

Section:
Section portion which mainly contains the content of a website is divided
section mainly into two portions:-
Section1 which contains an image-slider contains images. Section 2 which
contains the container class contains different items.

We use mage tag to add various images to the image slider. We add a container
named “class” inside Section 2 so that it inserts things named “classes” on your
website as many times as you like. We add the item name, item price, item
image, and item data classes to every item.

Footer:
Footer is the last section of the website.
Inside the footer1 class, I have added one class for social media icons, then
inside add their icons. Similarly, we have added more classes in footer2 and
footer3 as given below in the code.

15
 2. CSS

The structure of the website layout is completed but it doesn’t look good
without styling. Human skeletal alone can’t look good without skin. So here the
work of styling is done with the help of CSS. We have various properties of
CSS. Some of them are:

 Flexbox- It is a layout model that provides an easy and clean way to

arrange items within a container
 CSS basics- selectors,color,border-box,etc
 Pseduo effects(hover, active) and pseudo elements(before)- used to style
specified parts of an element and are used to add special effects to some
selectors.
 Media queries(responsive) and keyframes(animation)- A media
query consist of a media type that can contain one or more expression
which can be either true or false. The @keyframes rule in CSS is used to
specify the animation.

3. JAVASCRIPT
A website with only structure and styling is like a person is sleeping (It can’t
perform any functions). So for the well functioning of the website we use
Javascript. Topics used in my project:

 DOM (Document Object Model) Manipulation.

 Javascript basics.

I have used javascript to create a button operator for navigation menu.

4. BOOTSTRAP

Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing a responsive and mobile friendly website.
 Components: to provide iconography, dropdowns, navigation,
alerts, pop-overs, and much more.
 Customize: Bootstrap components are customizable and you can
customize Bootstrap's components, LESS variables, and jQuery
plugins to get your own style.

16
RESULT/LEARNING OUTCOME

Learning Outcome:
1. HTML
 Basics tags & elements
 Forms
 Tables
 Structuring & Designing

2. CSS
 Basic CSS (selector, internal, external, inline, class, id,
background, font, text, padding, margin, border, list,
hover)
 Advance CSS (border-radius, opacity, cursor, layers, position,
display, float, gradient and multiple-column)
 Concept of Menu

3. Bootstrap
 Grid System
 Typography
 Tables, forms, buttons, images
 Dropdown, button group Navigation element
 Bootstrap plug-ins

4. Others
The outcome of internship also included improvement in:
 Communication
 team working
 time management
 self-motivation
 organizational skills.

17
RESULT

Following are the screenshots of project done during the internship:

18
19
CONCLUSION

This internship and training especially the project has given me great
satisfaction in having designed a website which can be implemented to any
nearby shops or branded shops selling various kinds of products by simple
modifications. It is convenient for customer as well as the seller.

This project enabled me gain valuable information and practical knowledge on

several topics like designing web pages using html & CSS, usage of responsive
templates, customizing using bootstrap and adding functions using JavaScript.

With the rapid development in online mediums, there are many opportunities in
field of web development. The internship has given me confidence to delve into
this field fearlessly and work properly.

The internship also assisted me to understand my strengths and weaknesses. It

also helped me to gain team work and time management skills.

20