INTERNSHIP PROJECT

ON
E-COMMERCE WEBSITE
USING
JAVA FULL STACK

< -- TEAM MEMBERS -- >

K SANDEEP - 20KP1A0454
G KARTHIK -20KP1A0436
D NARASHIMA RAO - 20KP1A0425
M RAVITEJA - 20KP1A0461
K YASWANTH -21KP5A0407
 INTERNSHIP PROJECT
ON
E-COMMERCE WEBSITE
A project report submitted in partial fulfilment of the requirements forward of the
Degree of

BACHELOR OF TECHNOLOGY

In
ELECTRONICS AND COMMUNICATION ENGINEERING

IS A BONAFIED RECORD OF WORK DONE BY

K. SANDEEP - 20KP1A0454
G. KARTHIK - 20KP1A0436
M. RAVITEJA - 20KP1A0461
D. NARASIMHA RAO - 20KP1A0425
K. YASHWANTH - 21KP5A0407

Under the Esteemed Guidance of

MR.RAHEMATHULLA

DEPARTMENT OF ELECTRONICS AND COMMUNICATION

ENGINEERING

NRI INSTITUTE OF TECHNOLOGY

(Approved by AICTE, Affiliated to JNTU, Kakinada.)

VISADALA (P.O.), MEDIKONDURU MANDAL, GUNTUR-522438

ANDHRA PRADESH

NRI INSTITUTE OF TECHNOLOGY

(Approved by AICTE, Affiliated to JNTU, KAKINADA)
 VISADALA (P.O.), MEDIKONDURU MANDAL, GUNTUR , ANDHRA
PRADESH.

CERTIFICATE

This is to certify that the project report entitled “INTERNSHIP ON E COMMERCE

WEBSITE”is a bonafide record of work carried out by members K.SANDEEP
(20KP1A0454),
M.RAVITEJA (20KP1A0461), K.YASHWANTH(21KP5A0407), D.NARASHIMA RAO
(20KP1A0425), G.KKARTHIK(20KP1A0436) who carried out the research under the
supervision. Certified further, that to the best of knowledge the work reported here in
does not form part of any other Project report or dissertation on the basis of which a
degree of award was conferred on an earlier occasion on this any other candidates.

This work is done under the supervision and guidance.

Signature of the Trainer Signature of Head of the dept.

Mr. RAHEMATULLA Dr. SRI HARI RAO

PROFESSOR & HOD

Internal examiner External examiner

AKNOWLEDGEMET
It is a great pleasure to convey our sincere thanks to our Hon’ble Chairman Dr. Alapati
Ravindra garu and Hon’ble Secretary and Correspondent Sri Alapati Rajendra Prasad garu
for providing excellent facilities and everything for our success.
 Our sincere thanks to respected Principal, Dr.KOTA SRINIVASU garu for his co –
operation and valuable suggestions during our stay in this institute.

We thank our respected Executive director, Chief Executive Officer, Chief Finance
Officer and Administrative Officer for their co-operation and valuable support during our
stay in this institute. We thank respected Vice Principal for his valuable suggestions and
motivation during our stay.

Our heartfelt thanks to beloved HOD of our department Dr. SRI HARI RAO for his
motivation, care and valuable guidance at every step of our project work and in every
aspect for our success.

We thank wholeheartedly our Class Incharge Dr.C.Kalai Selvan, Professor For their
special care towards completion of our project in smooth manner.

We are highly indebted to our guide MR.RAHEMATULLA P, Department of

ELECTRONICS AND COMMUNICATION ENGINEERING, NRI INSTITUTE OF
TECHNOLOGY, VISADALA, MEDIKONDURU, GUNTUR for his valuable guidance in the
successful completion of our project work. We are very much indebted to his for suggesting this
interesting topic and helping us at every stage for its successful completion.

It’s our pleasure to thank all the faculty members of ECE department for extending their
constant co-operation and support during our stay in NRIIT.

Our heartiest thanks to our beloved parents who are well behind us for all our success as
well as achievements.

Finally, we thank all our friends who helped either directly or indirectly to achieve our
GOAL.
1. K SANDEEP - 20KP1A0454

2. G KARTHIK -20KP1A0436

3. M RAVI TEJA -20KP1A0461

4. D NARASIMHA RAO -20KP1A0425

5. K YASHWANTH -21KP5A0407
 DECLARATION

We hereby declare that the work which is being presented in the Dissertation Entitled
“INTERNSHIP ON JAVA FULL STACK ” submitted towards the partial fulfilment of
requirements for the award of the degree in Bachelor of Technology and authentic record
in Department of Electronics and Communication Engineering at NRI Institute of
Technology, Guntur .

The matter embodied in this dissertation report has not been submitted by us for the
award of any other degree. Further the technical details furnished in the various chapters
in this report are purely relevant to the above project and there is no deviation from the
theoretical point of view for design, development and implementation.
 INDEX

About the java full stack web development…………………………1

1.Introduction……………………………………………………….
1.1Course objective…………………………………………….3
2 Tools and technology used……………………………………….
2.1 Hard ware requirement…………………………………
2.2 Soft ware requirement……………………………………
2.3Java script……………………………………………..
2.4Vs code…………………………………………………….
3.cource content…………………………………………………….
4.introduction to website …………………………………………..
4.1.step by step procedure for website …………………………
5.code for the website………………………………………………….
6.conclusion……………………………………………………………
 ABOUT JAVA FULL STACK INTERNSHIP

When we're learning to program we often have to sacrifice

learning the exciting and current technologies in favour of the
"beginner friendly" classes. With this course, we get the best of both
worlds. This is a course designed for the complete
beginner, yet it covers some of the most exciting and
relevant topics in the industry.
The course is constantly updated with new content, projects, and
modules. This course is also unique in the way that it is structured
and presented. Many other courses are just a long series of
"watch as I code" things, but this course is different. Colt Steele
incorporated everything he learned in his years of teaching to
make this course not only more effective but more engaging.
The course includes:

 Lectures

 Code

 Example problems

 Projects

 Exercises

 Slides

 Readings
 1: INTRODUCTION

Writing a thousand lines of code and turning that into a website is one
of the creative and complicated things for web developers. If you get excited
seeing a lot of beautiful web sites and thinking to try your hands on it then we
need to open your eyes telling some important things that you should know as a
web developer. Creating a website that gets a lot of users attention is not just
about learning various programming languages, you also need to learn
some other concepts like Dev Tools, data formats, testing, APIs, authentication
and a lot of stuff like that once you will dig yourself
into thisfield. The most important skill or knowledge every developer should lea
rn first is thesethree basic building blocks i.e. HTML, CSS, and JavaScript. We
will be using HTML and CSS in frontend for interfaces. Just right click on our
web browser and then selecting view page source option does it. We can find
the structure of your website where a lot of HTML tags are used for
different purposes.CSS is also used in the frontend that decides the style,
design, layout and how HTML elements need to be displayed on the screen.
Java script is high in demand nowadays and it is basically responsible for
making our HTML pages dynamic and interactive. Java script also comes with a
variety of languages like to make our website more interactive. If we’re
gonna specialize in java script like MEAN Stack then we’re gonna
deep dive into this language because this one will be our front end as
well as backend language. You can do a lot of stuff using browser Dev Tools
like debugging, editing HTML elements, editing CSS properties, checking
device, tracking java script error, etc. Every developer should be
aware of using different tabs (elements, console, network, etc.) in Dev
Tools to make their work easier and faster.
 Course objective

This 8 week programme aims to headstart our future

in to the exciting world of web development both front and
back end. This course helped me master my basics as well a s imple
those basics at advanced level throught various projects throughout the course, I
could hone my visualisation better and push the boundaries of
development mindset. The course covered initial front end development like
HTML, CSS, BOOT STRAP, JS, DOM, J query as well as back end in depth
including databases and advanced topics like RESTful Routing ,data
association & authentication .This course is for all the developers who
are looking forward to enhance their development journey, and learn
skills & technologies which will help them to be a full stack developer
faster .
 2: TOOLS AND TECHNOLOGIES USED

2.1: HARDWARE REQUIREMENTS:-

 Pentium-IV(Processor) Or any processor.

 256 MB Ram OR Above

 512 KB Cache Memory

 Hard disk 10 GB or above

 Microsoft Compatible 101 or more Key Board

2.2: SOFTWARE REQUIREMENTS: -

Operating system : windows

Programming language : java script
IDE : VS code

2.3: JavaScript

JavaScript is a high-level, interpreted programming language that is used to

create dynamic and interactive websites. It is one of the three core technologies
of the World Wide Web, along with HTML and CSS. JavaScript is a client-side
scripting language, which means that it runs on the user's browser rather than on
the server. This makes it ideal for creating interactive websites that respond to
user input.
JavaScript is a very versatile language that can be used to create a wide variety
of web applications. It can be used to create games, animations, and even
complete web-based applications. JavaScript is also a very popular language for
creating server-side applications, thanks to the popularity of Node.js.

If you are interested in learning JavaScript, there are many resources available
online and in libraries. There are also many JavaScript tutorials and courses
available that can teach you the basics of the language. Once you have learned
the basics, you can start creating your own JavaScript projects.

2.4:VS CODE :
Visual Studio Code (VS Code) is a free source-code editor made by
Microsoft. It's available for Windows, Linux, and macOS.

Features Debugging, Syntax highlighting, Intelligent code completion,

Snippets, Code refactoring, Embedded Git, Bracket-matching, Auto-
indentation, Box-selection.

Supports Python, Java, C++, JavaScript, Hundreds of other languages. Out of

the box, Visual Studio Code includes basic support for most common
programming languages. This basic support includes, and configurable snippets.
Visual Studio Code also ships with intellesence for JavaScript,
TypeScript, JSON, CSS and HTML , as well as debugging support for Node.js.
Support for additional languages can be provided by freely available extensions
on the VS Code Marketplace.

Instead of a project system, it allows users to open one or more directories,

which can then be saved in workspaces for future reuse. This allows it to
operate as a code editor for any language. It supports many programming
languages and a set of features that differs per language. Unwanted files and
folders can be excluded from the project tree via the settings. Many Visual
Studio Code features

3.COURSE CONTENTS

Basics & Logic building

 Path to be a full stack developer

 Installation & basics

 VS Code local environment set up

Front End
 HTML

 CSS

 JavaScript + jQuery

 Bootstrap
Advanced Front End

 Semantic UI

 Advanced DOM Manipulation

Back end

 Unix(Command line)

 NodeJS

 NPM

 Express JS

 MongoDB
Advanced Back end

 REST API

 Database Associations

 Authentication

 Passport JS

 Authorization

Main Project concepts

 RESTful Routing

 Maintenance

 Authentication

 Passport JS

 Authorization

Main Project concepts

 Yelp Camp
 4. NSKY SHOPPING SITE

ABSTRACT : NSKY is a shopping website other than any other

website we had a very smooth interface with a good transistion
between the pages and had a great visuals and no crashes between the
one page to the another page . NSKY is just a start up company which
provide the great clothing and the foot wear to the users in wide range
not only these you can see the all stuff need for the daily fashion

4.1 Creation of the web page step by step

Step 1 : Creating of welcome page

Creating the welcome page will wish the user and gives the good
impression for the user
 Fig.1.1

Fig1.2
step 2: Signup page
By using the signup page user can access there account in any mobile
simply with there password and e mail id so that can use the same
account in multiple devices
 Fig 2.1

Fig2.2
Step 3: login page
This login page provides a extra security to the user for account
conformation and for the shopping
 Fig 3.1

Fig 3.2
Step 4: Home page and product page
This is the main page and it is the heart of the website which has
taken all the sweat and we really worked very hard for the product
page for the good interface and the easy identification of the products
and easy access for the user what they used to find for the shopping
and in the home page we have
 Banner
 Product page
 Cart
Banner: This banner page will show the offers and the products
which are available for the user in the shopping site and this banner is
completely scrollable and they can have a multiple banners for
different offers

Product page: In this we can have a multiple access for the different
products like sweatshirts, shirts, trousers ,jeans ,rings ,watches ,shoes,
and night were so that you can select from the required range so that
they can have a multiple range of products and the can easily add the
products in to cart with out any interruptions and they can add the
multiple range products and from the clothing to foot ware and we
have a very smooth interactions

Cart: In this user can see the what they have added in cart and what
the value of the total order after this page we will have a address page
and the shipment page and the and were you will get the conformation
of the order and the you will receive the order details to the regester
mail id and the mobile number
In the index page we created a advertisement container which
consists of trending offers and coupons on the events .
Fig 4.1

Fig4.2
Cart page:

Payment Page :
In this payment page we inserted two payment options .
1.Cash on delivery
2.Online payment
 ***********This is the end of the website**************

CODE OF THE WEBSITE

`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full-Page Overlay Button</title>
<style>
/* Style for the full-page overlay button */
.overlay-button {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
 background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black
background */
z-index: 999; /* Place it above other content */
display: flex;
align-items: center;
justify-content: center;
}

.button {
padding: 1000px 1000px;
background: linear-gradient(to right, #b1b1b1, #838a93);

/* Button background color */

color: #fff; /* Button text color */
font-size: 24px;
border: none;
cursor: pointer;
border-radius: 0px;
}
</style>
</head>
<body>
<!-- Your page content goes here -->

<!-- Full-page overlay button -->

<div class="overlay-button" id="overlayButton">
<button class="button" onclick="window.location.href ='newlog.html'"><!
DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Welcome Page with Moving Letters</title>
<style>
body {
font-family: 'Montserrat', sans-serif;
background:#b1b1b1,#838a93;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
body{
min-height: 100vh;
background: linear-gradient(to right, #b1b1b1, #838a93);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
.criterion {
font-size: 4 rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.background {
display: inline-block;
animation: move-letters 1s linear 1 alternate;
}

@keyframes move-letters {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}

.rainbow-strip {
background: linear-gradient(to right,#b1b1b1,#838a93);
background-size: 150% 100%;
animation: rainbow-strip-animation 3s 1 alternate;
-webkit-background-clip: text;
 background-clip: text;
color: transparent;
display: inline-block;
}

@keyframes rainbow-strip-animation {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}

.moving-words {
font-size: 4rem;
margin-top: 20px;
white-space: nowrap;
overflow: hidden;
}
.word {
display: inline-block;
animation: move-words 5s linear 1, hide-words 2s ease 1
alternate;
}
@keyframes move-words {
0% {
transform: translateY(100%);
}
 100% {
transform: translateY(-100%);
}
}
@keyframes hide-words {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<p class="moving-words">
<span class="word">w</span>
<span class="word">e</span>
<span class="word">l</span>
<span class="word">c</span>
<span class="word">o</span>
<span class="word">m</span>
<span class="word">e</span>
<span class="word">:</span>
<span class="word">)</span>
</p>
</div>
</body>
 </html>
</button>
</div>
<script>
// Function to redirect to another page when the button is clicked
function redirectToAnotherPage() {
window.location.href = 'target_page.html'; // Replace with the actual
target page URL
}
</script>
</body>
</html>

CONCLUSION :
As we can see, online shopping may or may not be greener than
traditional shopping. There are simply way too many factors that we have to
consider in such a model.

As we focus on the costs of online shopping, it seems that online shopping is really
detrimental for the environment. Online shopping brings us great convenience, but
it also encourages irresponsible consumption habits like exploiting the advantages
of free returns and expedited shipping.

As we created this website for user friendly it easy to manage and

purchase products from our website , and also we are more secured with your
information.

In case of any errors are faced by the customers we inserted the 24/7
customer care service .