E-Commerce Website
E-Commerce Website
E-Commerce Website
E-COMMERCE WEBSITE
Submitted
by
Gayatri Barnwal
(1901227289)
Of
th
Sem- 7 /Branch-CSIT
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.
2
Department of Computer Science & Engineering
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.
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.
5
ABSTRACT
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
8
Week Date Day Name of the Topic/Module Completed
9
Week Date Day Name of the Topic/Module Completed
10
7th week 13-06-2022 14-02-2022 Monday Creating Home page: nav bar, search bar &
logo
11
INTRODUCTION
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
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.
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.
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:
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:
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
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.
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.
20