Web Development For E-Commerce Grocery Shopping Website PS2 Karan Takhtani 1700135C202

A Report
On
Web development for
E-Commerce grocery shopping website
By
Name of the student Registration number

KARAN TAKHTANI 1700135C202
Prepared in the partial fulfilment of the

Practice School II Course
At
HUB2TECHNOLOGIES
JAIPUR, RAJASTHAN
A Practice School II Station of
BML MUNJAL UNIVERSITY
(JULY 2019)
Web development for E-Commerce grocery shopping website PS2 Karan Takhtani 1700135C202.pdf
Page 1 of 30
Table of Contents
S. No Contents Page Number
1 Completion Certificate 3,4
2 Acknowledgements 5
3 Objectives 6
4 Introduction 7
5 Problem Statement 8
6 Company Profile 9
7 Project Methodology and Design 10-27
a. Home page
b. Category page
c. Sign up page
d. Project detail
e. Adding a product to cart
f. Profile page
g. Vendor panel
h. Adding product/banner by vendor
i. Adding two page:icons,typography
j. Admin page
8 Results and Discussion 28
9 Conclusions 29
10 References 30
Page 2 of 30
Completion Certificate
Page 3 of 30
Page 4 of 30
Acknowledgement
I, Karan Takhtani would like to convey my gratitude to the Dean, Management, Corporate
Engagement Team and the Co-ordinator’s of the PS2 programme at BML Munjal
University, Gurgaon for emphasizing on the 6-8 weeks Summer Internship Program and
giving me the platform to interact with industry professionals.
The satiation and euphoria that accompany the successful completion of the project
would be incomplete without the mention of the people who made it possible.
I would like to take the opportunity to thank and express my deep sense of gratitude to
the CEO of Hub2Technologies Mr. Ramkishan Saini, my Industry Mentor Mr. Deepak
Mandolia and my Faculty Mentor Dr. Mukesh Mann. I am greatly indebted to both for
providing their valuable guidance at all stages of the project, their advice, positive and
supportive attitude and continues encouragement, without which it would have not been
possible to complete the project.
I owe my wholehearted thanks and appreciation to entire staff of the company for their
cooperation and assistance during my project.
I hope that I can build upon the experience and knowledge that I have gained and make
valuable contribution towards this industry in coming future.
Page 5 of 30
Objectives
• The main goal of the internship was to develop a website for a start-up based in
India that allows users to buy and sell products online.
• The basic requirement was that the site needs to host 2 different types of users.
The first one being the vendor that provides the products. The second one being
the users that want to buy the product.
• Firstly, the most important objective is that the website looks good visually thus
a minimal and vibrant looking front-end was required which goes well with the
client’s requirements and the company’s aesthetics. Make sure that the choice of
colors does not affect readability of the website and at the same time gels well
with the theme of the company. Moreover, make sure that the use of colors is
consistent throughout and in line with the overall theme.
• A basic static structure of the website was designed at first and then it was
developed into a dynamic website. One aspect that was the most stressed upon
was the usage of bootstrap classes to make the website responsive i.e. the
elements in the website should resize and reshape depending upon the browser.
• Also, the most important objective was to make the website secure as a lot of
monetary transactions were involved thus secure resources such as RuPay,etc
modules were used.
• The final objective was to test out the website and cross check whether all the
features were working as required or not.
Page 6 of 30
Introduction
Developers are often thought of as problem solvers - and they are - however, web
developers have the luxury of being able to flex their creative muscles. Plus, if you work
for a startup, you'll get much more creative rein. Hub2Technologies is a start-up based
in Jaipur that designs and develops websites for their clients. Sometimes the people you
work with are just as important as the work. And web development is lucky, because not
only will you be most likely working in a team, you'll have countless online communities
at your fingertips. The online community for developers is huge, and if used to the full
can be a source of technical support and a place with like-minded people. We used
different software needed to create the websites for the clients according to their
requirements.
The goal of the internship was to develop a website for a start-up based in India that
allows users to buy and sell products online. A basic static structure of the website was
designed at first and then it was developed into a dynamic website. The technology
stack for the website includes HTML5, CSS, JavaScript, jQuery, Bootstrap 4, Ajax, SQLite
and PHP.
Weekly calls were scheduled with the clients to update them with the progress and take
feedback on the design of the website. Keeping the website responsive was one of the
main goals. So, we regularly tested the website on different browsers and devices of
different size. At the end of each day, the whole team gathered around for a stand-up and
discuss the task they have completed in the day and discuss plans and set targets for the
next day.
Initially, they trained me in front-end development by giving me few basic projects and
then I was assigned to the task of developing the front-end for the main project. I also
learned some of the aspects of back-end website development.
The project was very challenging as I had to face many issues, but with my hard work,
sincerity and help from the internet and my industry mentor I completed the project and
impressed the industry mentor.
Page 7 of 30
Problem Statement
My company wanted me to work on a project in which a user-friendly website had to be

designed for buying and selling the products online that can help in increasing the reach of
products vendors and provide easy and comfortable service to users interested in buying or
selling grocery products. The site needs to host 2 different types of users. The first one being
the vendor that provides products. The second one being the users that want to buy them.
The site should be secure as there will be monetary transactions for buying. The website
should be easy to use and bug-free. It should also have browser consistency and effective
navigation. The site needs to be responsive or in other terms mobile compatible having
well-formatted content. I had to work completely on the front-end development and to a
certain extent on the back-end development due to time limitations and security reasons as
the user’s personal information is stored in the back-end.
Page 8 of 30
Company Profile
Hub2Technologies is a company based in Jaipur, Rajasthan dedicated to the development

of websites and mobile applications. We find solutions to increase your productivity and
reduce your operating costs. Our team is flexible and dynamic and adapts according to
the skills to be implemented.
We rely on a network of partners exclusively based in India and experts in different fields:
strategy, UX, design, referencing, Networking, Development. A structure with variable
geometry and always adapted to your project.
We combine tech-genius, innovative thinking and intuitive approach to render smart
solutions that are to accelerate your growth in the right direction.
Services Provided By the company
• UI/UX Development
• Website Development
• Mobile App Development
• Custom Development
Page 9 of 30
Project Methodology and Design
In order to make the website, the problem has been divided into two parts.
1. Designing the website
2. Developing the website.
Design Part
The designing part involves the sketching of the website’s graphical interface. This was done
on paper.
The client helps us in preparing the design of the website. He has some ideas but not the
proper design so with the help of our previous knowledge, we have put all those ideas on
the paper then on the desktop with some help of the industry mentor.
The colour palette chosen for the website was decided by the client. Few transitions were
decided to be used to make the website more dynamic.
Development Part
My first aim was to understand web development prior to joining the company so as
soon as my internship was finalized, I took an online course for web development on
Udemy to get familiar with the topic. I was provided with all the required details by my
mentor such as the programming language and software that were used at the
company. I learnt the modern ways of designing a website using latest software.
The mentor then guided me towards the step by step process of designing a website.
Once I got familiar with the work procedure, I then started to learn how to work with
the clients. Slowly I worked my way up to create a website, the process of which is
mentioned below:
1. Analysis
1.1 Envisioning a Roadmap:
The first step is all about establishing the goals and purposes of the web
application. This step is essentially followed to chart a proper direction for the
project. The main goal of the internship was to develop a website for a start-up
based in India that allows users to buy and sell grocery products online.
The basic requirement was that the site needs to host 2 different types of users.
The first one being the vendor that provides products. The second one being the
users that want to buy them.
Page 10 of 30
It was decided that the home page will contain most of the data/content of the
website. We use modal for sign up/log in purposes. Buyer cannot add to cart or
buy the products before sign in into his/her own account and there was a search
bar to search any kind of product. There was going to be the most important
navigation bar for navigating through the website. A carousel after that to give
information about the sales going on right now on products. Some products were
displayed on the home page itself. An image slider which shows the special offers
on some products. A basic static structure of the website was to be designed at
first and then it was to be developed into a dynamic website.
1.2 Identifying, Analyzing, and Selecting Third Party Vendors:

Web application development is often cost-effective and faster when outsourced.
In this step, essential third-party vendors are identified. Bootstrap, a prebuild
styling repository was used instead of styling everything from scratch. Similarly,
Font-Awesome, an open source icons repository was used for the icons in the
website instead of making our own icons which is another field of study all
together. Codepen was used to take basic navbar templates instead of designing
them from the scratch and then they were edited and built upon Paytm Payment
Gateway module was used for payment purposes as it is certified for high level
security and makes the website more trustworthy.
2. Selecting Technology and Specifying Web Application Structure and Timeframe:

This is the stage where the platform, technology, environment, structure and
framework are defined, and the timeline within which the web application has to be
developed is decided.
All the specifications were provided by the clients to the company and my industry
mentor explained me all the work that I was supposed to do. My job was to completely
develop the front-end of the website.
3.Designing Layout and Interface and Wire framing:

This is one of the most critical stages of a web application development project and
starts with the creation of a visual guide or a simple sketch of a UI. Once the interface
and interaction models are approved, the design is implemented. Make sure that the
choice of colors does not affect readability of the website and at the same time gels well
with the theme of the company. Moreover, make sure that the use of colors is
consistent throughout and in line with the overall theme. A two to five color palette was
selected and the plan was to stick to it.
Page 11 of 30
4. Developing the Web Application:
4.1 Front-End Development:
In this stage, a team of developers get together to create the web application’s
architecture and framework, develop or customize the module, classes, and libraries,
and design the website under the specifications that were agreed upon. We used HTML
5, CSS 3, Bootstrap, JavaScript, J-Query, Font-Awesome for the front-end development. I
preferred Sublime Text 3 for writing my code.
It was decided that the website would be a simplistic one-page website for effective
navigation. This means that most of the content was on the home page itself but there were
some other pages as well. Also, there was a header and a footer that will be a part of each
page. The header included a div on the top that has contact links and social media links then
there was a company logo and then the navigation bar. It was also made responsive and it
was added to each page on the website.
Fig: - Header Of The Website
The footer included the contact information, address, links to “Privacy and Policies” and
“Terms and Conditions”, there was also the branding of our company “Hub2Technologies”
also a few links were provided for the product categories as same as in the header but extra
and some to navigate through different section and it also contains the payment methods
which our website also have except paytm
Page 12 of 30
Fig: - Footer of The Website
Snippet of the footer
Page 13 of 30
These were the different types of pages designed
1. Home Page (Dynamic Banners, Brands, New Products in inventory, Trending

Offers and Partner stores).
The home page was the heart of the website. It consists of most of the content on
the page. The header and the footer were also included. Other than that the
search bar, image sliders, latest products, speical offers etc.
Fig: - A snippet of the Home Page
Page 14 of 30
2. Category Page (Subcategories based on the current Category and similar
recommendations)
This page was the page were all the filtered results were shown after the user had
selected all the choices, this was accompanied by the categories showed in the
header as well as in the footer also.
Fig: - Category/Filtered Results Page
Page 15 of 30
3. Login/Sign Up Modal
Instead of making a new page for login/sign up it was decided that a Bootstrap
Modal should be used instead as they are easy to use and perform the operation
as required without leaving the page. The user can signup into his account and
then he/she can be a vendor if he/she wants to.
The data that is entered is then checked with that in database and the login is
authorized or denied.at first, all the vendors are inactive. We always to make
them active first before use the vendor panel.
Fig: - Login/Signup Model
Page 16 of 30
4. Product Details Page:
There is a dedicated page for each product. The product that the user has
selected has a unique ID assigned to it. The ID is fetched and then all of its details
and specifications are fetched from the database after its ID matches with an
entry in the database.
The details include name, price, quantity, images, etc.
Fig: - Detailed/Dedicated page for each product
Page 17 of 30
5. Adding a product to cart
It was decided that a new page be made for this part. Thus a new page layout was decided it
included the header and the footer also. A form had to be designed asking all the required
details of the product like the name, price etc in the form of table.
All these details were then fetched and stored in the database, more on this in the
backend section.
Page 18 of 30
6. Profile page of the user/vendor:-
It contains all the information about the user and have the “go to the vendor
panel button” if user is also a vendor.
Page 19 of 30
7. Vendor panel:-
It contains all the information about the vendor, his products, banners, about the
new received order and delievered one.
Page 20 of 30
8. To add product and banners by the vendor:
By filling all these information, vendor can add product and banner into this
website .
Page 21 of 30
9. There are two more extra pages:-
One for the web icons and another for the topography.
Page 22 of 30
10. Admin page:
There is only one admin of the website. He acts as the brain of the website.
He/she can control any and every function of the page. He can edit profile of the
vendors, make them active/inactive, can make their products, banners inactive,
etc.
Page 23 of 30
Besides all this many features were also added to the front-end of the website :-
1) Responsiveness
2) Image Slider
Page 24 of 30
4.2 Back-End Development
In this stage, a team of developers get together to design the database structure,
develop or customize the module, classes, and libraries, and implement all the
functionalities that were agreed upon. This part was still pending when the faculty
mentor visited as this was the latter part of the project. The software that we will be
using are PHP, Ajax, SQLite.
Page 25 of 30
Tables used with their schema:-
Page 26 of 30
5 Testing:
The last step in the web application development process is QA testing and bug fixing.
This we will do after the back-end development is completed. A web application must
be put through the paces, and all suitable testing techniques must be employed,
including load testing, stress testing, performance testing, usability testing etc. A well-
tested web application will be ready for deployment or release, and suitable steps can
be taken for its implementation. This will mark the end of the project.
The main task was to analyze the site structure of that website and note down the different
panels, modules, pages related to it and design a website that is simple yet appealing to
the user. Keeping this point in mind we put together all the modules and pages in a logical
flow and designed the overall UI of the website. Site structure tools helped in
understanding the structure of the sites which in turn forms the base of any site. But
before all of this I needed to learn HTML5, JavaScript, CSS and jQuery and for that I looked
for the various sources on the internet and understood these languages and frameworks
which were like the individual parts of a machinery which when combined helped me to
deliver complete product.
All of the information displayed on the website is dynamic and fetched from Backend.
Page 27 of 30
Results and Discussion
At the successful completion of my internship at Hub2Technologies I was able to deliver

a project with the following specifications and outcomes:
1. Most of the content on the website was dynamic i.e. coming from Back End API’s.
2. The Google Maps API module was running perfectly.
3. The website was responsive and browser compatible. It was tested on
various window sizes on a desktop and also on a mobile and it worked
seamlessly.
4. All the navigation between pages was well taken care of using routers.
5. The website was able to differentiate between 2 types of users i.e. the consumers
(users looking for products) and the vendors (users who own the products and
want to take their business online). The navigation bar has 4 features of “order”,
”vendor panel”, “shop locator”, ”profile” and “Logout” after successful “Login”.
6. The image slider was working perfectly using images from the database.
7. The navigation bar was one of the most important aspect as it was predominantly
supposed to be a one-page website and it worked perfectly guiding to the desired
section of the page by scrolling down there with a subtle animation.
8. The filtering of products using the categories was working with 100% accuracy.
The website is still under development phase and will soon go online and the website
works without any errors across all devices.
Page 28 of 30
CONCLUSION
The whole experience of working at Hub2Technologies was great. This organization has a
superb work culture, great minds and very high quality of work. I learned a lot about web
designing and development. The work I could complete here was very satisfactory. I hope
my work on User interface and design of the website helps it meet its goals.
The project gives a very broad aspect of utilizing the knowledge of web designing and
front end. This project gave me an opportunity of applying concepts of programming in
real life and helps to understand the need of the users more effectively.
I got to learn many new things and enhanced my development skills by designing user
interface and developing them. I also learned a lot about front-end development as the
whole project was based on it.
I got hands on experience of designing and implementing those designs on a web page.
Apart from it over this period on the industry I also got to know that how the user
experience exactly works and how a design is made for better user experience. So, in the
last I want to say that this internship was very fruitful for me as I got to learn many new
things as well as I got the industry exposure.
Page 29 of 30
References
1. www.w3Schools.com
2. www.udemy.com
3. www.coursera.com
4. www.bootstrap.com
5. www.fontawesome.com
6. www.pinterest.com
7. www.stackoverflow.com
8. www.coursera.com
9. www.freecodecamp.com
Page 30 of 30

Web Development For E-Commerce Grocery Shopping Website PS2 Karan Takhtani 1700135C202

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Development For E-Commerce Grocery Shopping Website PS2 Karan Takhtani 1700135C202

Uploaded by

Copyright:

Available Formats

A Report

Name of the student Registration number

Prepared in the partial fulfilment of the

BML MUNJAL UNIVERSITY

S. No Contents Page Number

1 Completion Certificate 3,4

7 Project Methodology and Design 10-27

8 Results and Discussion 28

My company wanted me to work on a project in which a user-friendly website had to be

Hub2Technologies is a company based in Jaipur, Rajasthan dedicated to the development

1.2 Identifying, Analyzing, and Selecting Third Party Vendors:

2. Selecting Technology and Specifying Web Application Structure and Timeframe:

3.Designing Layout and Interface and Wire framing:

Fig: - Header Of The Website

1. Home Page (Dynamic Banners, Brands, New Products in inventory, Trending

Fig: - A snippet of the Home Page

Fig: - Category/Filtered Results Page

Fig: - Login/Signup Model

Fig: - Detailed/Dedicated page for each product

At the successful completion of my internship at Hub2Technologies I was able to deliver

You might also like