Reportw 2.1 SR

VISVESVARAYA TECHNOLOGICAL UNIVERSITY
BELAGAVI - 590018
Internship Report
on
“FULL STACK WEB DEVELOPMENT”

[18EC185]
Bachelor of Engineering in
Electronics and Communication Engineering
By
Srinivas T
1JT20EC044
Conducted in
Prinston Smart Engineers
Department of Electronics and Communication Engineering
Jyothy Institute of Technology

Tataguni, Off Kanakapura Road, Bangalore-560 082
Academic Year 2023-2024

FULL STACK WEB DEVELOPMENT
Jyothy Institute of Technology

Tataguni, Off Kanakapura Road,
Bangalore-560 082
DEPARTMENT OF ELECTRONICS AND COMMUNICATION
ENGINEERING
Certificate
This is to certify that Internship project entitled “FULL STACK WEB DEVELOPMENT”
is a bonafide Internship work carried out by SRINIVAS T(1JT20EC044) in partial fulfillment
for award of the degree of Bachelor of Engineering in Electronics and Communication
Engineering of Visvesvaraya Technological University, Belagavi during the academic year
2023-2024. It is certified that all corrections / suggestions indicated for internal assessment
have been incorporated in the report and deposited in the department library. The report has
been approved as it satisfies the academic requirement in respect of Internship work prescribed
for the above said degree.
Signature of Signature of HOD Signature of

Guide Principal
SRILAKSHMI. R Dr. K CHANDRASEKHAR Dr. K. GOPALAKRISHNA

Designation of GUIDE HOD Jyothy Institute of Technology
Dept. Of E & CE Dept. of E & CE
Jyothy Institute of Technology Jyothy Institute of Technology
External Viva:
Name of the Examiner Signature with Date
1.
2.
INTERNSHIP CERTIFICATE
DECLARATION
I hereby declare that the Internship Project entitled, “FULL STACK WEB
DEVELOPMENT” which is submitted in partial fulfillment for the award of degree Bachelor
of Engineering from Visvesvaraya Technological University, Belagavi is an authentic record
of bonafide work carried out by me at PRINSTON SMART ENGINEERS, Bangalore during
the academic year 2023-2024.
Date: Signature of Student

Place: BENGALURU
ACKNOWLEDGEMENT
The satisfaction that accompanies the successful completion of any task would be
incomplete without the mention of the people who made it possible, whose constant guidance
and encouragement were reason for the successful completion.
I would extend my heartfelt gratitude to the “Prinston Smart Engineers”, for

providing an opportunity to complete Internship.
I am grateful to the esteemed institution “Jyothy Institute of Technology” for

providing an opportunity to complete this Internship Project.
I owe my success to and wish to express our heartfelt gratitude to our beloved Principal,
Dr. K Gopalakrishna, Jyothy Institute of Technology who has been a constant source of
inspiration and light.
I would like to thank Dr. K Chandrasekhar, Head of Department of Electronics and

Communication Engineering, Jyothy Institute of Technology for his encouragement and
guidance.
I sincerely thank my internal guide, SriLakshmi.R, Assistant/ Associate professor of

Electronics and Communication Engineering for the constant guidance, encouragement,
support and invaluable advice without which the Internship project would not have become a
reality.
I would like to express gratitude and respect to all teaching and non-teaching staff
who have rendered help, encouragement and intellectual influence during the course of the
work. I am very much indebted to our parents and friends for their moral support and
encouragement to achieve higher goals and for every support they gave us.
Srinivas T
i
ABSTRACT
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. The part of a website that the user interacts directly is termed as front
end. It is also referred to as the ‘client side’ of the application. Which includes the
technologies like HTML, CSS, JavaScript, also there are so many front-end
Framework and Libraries such as React.js, AngularJS, VueJS, jQuery, Bootstrap,
Material UI, Tailwind CSS, jQuery UI.
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.
The started project is made to utilize the knowledge of the Web Development to
provide the clear image related to the weather to the comfort of the user. HTML
(Hypertext Markup Language) embedded scripting language used for creating
dynamic web pages, this piece of software, is easy to maintain and further
enhancements can be added without any hassles.
ii
TABLE OF CONTENTS
i
ACKNOWLEDGEMENT ii
ABSTRACT
iii
TABLE OF CONTENTS
iii
TABLE OF CONTENTS
v
LIST OF FIGURES
TABLE OF CONTENTS
CHAPTER 1 ......................................................................................................................... 1
ORGANIZATION AND DEPARTMENT ............................................................................ 1
1.1 ABOUT THE ORGANIZATION ................................................................................ 1
1.2 WORK CULTURE ...................................................................................................... 1
1.3 SERVICES .................................................................................................................. 2
1.4 CLIENTS AND PRODUCTS ...................................................................................... 3
CHAPTER 2 ......................................................................................................................... 4
2.1 ABSTRACT ................................................................................................................ 4
2.2 INTRODUCTION ....................................................................................................... 4
CHAPTER 3 ......................................................................................................................... 8
DETAILS OF INTERNSHIP ................................................................................................ 8
3.1 LITERATURE SURVEY ............................................................................................ 8
3.2 PURPOSE OF PROJECT .......................................................................................... 10
3.3 OBJECTIVE……………………………………………………………………………11
3.4 ABOUT THE PROJECT……………………………………………………………….11
CHAPTER 4 ....................................................................................................................... 12
MINOR PROJECTS ........................................................................................................... 12
4.1 REQURIMENT SPECIFICATION ............................................................................ 12
4.2 HARDWARE REQUIREMENT ............................................................................... 13
4.3 SOFTWARE REQUIRMENT.................................................................................... 13

4.4 HOW TO USE ........................................................................................................... 14
CHAPTER 5 ....................................................................................................................... 15
5.1 SOURCE CODE ........................................................................................................ 18
5.2 SRC FOLDER ........................................................................................................... 19
5.3 SIURCE CODE FOR FEEDBACK ............................................................................ 20
5.4 SERVER .................................................................................................................... 25
5.5 CODE DOCUMENTATION ..................................................................................... 26
5.6 RESULTS .................................................................................................................. 27
CHAPTER 6 ....................................................................................................................... 28
CONCLUSION ................................................................................................................... 28
6.1 CONCLUSION .......................................................................................................... 29
6.2 FUTURE SCOPE………………………………………………………………………29
6.3 BASIC WEBSITE LAYOUT ..................................................................................... 30
6.4 DATEBASE SNAPSHOTS……………………………………………………………30
6.5 DECLARATION……………………………………………………………………….31
10|Page
INTRODUCTION
Web development is basically the creation of website pages either a single page or
many pages. For instance, Facebook is a culmination of many webpages together.
While single page websites often require endless scrolling and hence is relatively
uncommon. Just like the files that are stored in your computer, websites also
basically files that are stored in another computer called the server. Many servers
are together connected through the internet. And this why, when you open a link,
that particular file from that server gets loaded on your computer and you see that
particular website. Frontend and Backend basically depend on the kind of
relationship you as a client has with the server. Front end, as the name suggests,
that it will deal with what is in front of the screen, that is, when on the client’s side.
In the same way, backend deals with what is behind the screen, as in the server,
which cannot see.
Following technologies are used to generate a website:
HTML:
Hyper Test Markup Language, HTML is like the mother of all the websites. In other
words, it is the main file that is loaded on your browser when you look at a website.
The most basic website can be created by simply using just HTML and no other kind
of file.
CSS:
The Cascading Style Sheets, CSS, causes the website to appear more appealing.
Without it, any website will look as simple as an MS Word Document. With it, you
11|Page
can add animations and drawings on your website and modify it the way you want.
It acts like the make-up that beautifies your web-page.
JavaScript:
JavaScript is a programming language that allows you to interact with certain
elements on the website and change them according to your wishes. JavaScript acts
like the accessories that are used to adorn the website, thereby making it more
appealing. CSS adds style to the basic HTML. And the JavaScript adds interactivity
with the website and gives a dynamic nature to the website.
Version control:
There is also something called the Version control, which is source control. It keeps
track of every code that you make in your project file. It enables you to go back to
the previous change if you ever make a mistake. Git is the most used version control
system. You can store every file of yours and even change the history in collections.
React:
React is a popular JavaScript library used for web development. React.js or ReactJS
or React are different ways to represent ReactJS. Today’s many large-scale
companies (Netflix, Instagram, to name a few) also use React JS. There are many
advantages of using this framework over other frameworks, and It’s ranking under
the top 10 programming languages for the last few years under various language
ranking indices. React.js is a front-end JavaScript framework developed by
Facebook. To build composable user interfaces predictably and efficiently using
12|Page
declarative code, we use React. It’s an open-source and component-based

framework responsible for creating the application’s view layer.
Node.js:
Node.js (Node) is an opensource development platform for executing JavaScript

code server-side. Node is useful for developing applications that require a persistent
connection from the browser to the server.
MySQL:
MySQL is multithreaded, multi user SQL database management System (DBMS).

The basic program run as server providing multiuser access to a number of
databases. The project’s source code is available under terms of the GNU General
Public License, as well as under a variety of property arguments. MySQL is a
database. The data in a MySQL is stored in a Database object called tables. A table
is a collection of related data entries and it consists of columns and rows. The
databases are useful when storing information categorically. MySQL is a central
component of the LAMP open source web application software stack (and other
“AMP” stacks). LAMP is an acronym for Linux, Apache, MySQL, Perl/PHP/
Python. Application that use the MySQL database include TYP03, MODx, Joomla,
WordPress, PHPBB, MyBB and Drupal. MySQL is also used in many high profile,
large scale web sites, including Google,
13|Page
LITERATURE SURVEY
Aim of the Project:

• The proposed project ids Weather Forecast website.
• The role of this website is to provide a easy to use user interface which formats
the information in few words with differentiable entities. This is informative
to the person in day in day out. Even it can be used to provide the information
on the big holdings for the promotional and informative purposes as well. By
the organization which continuously monitors the weather for providing the
assistance when required by the public.
Purpose of the Project:

• This project is made to provide the clear image of the data to the user and the
information will be specified and makes the sense of relevancy for the search
made by the user, other then providing the stack of information which can be
irrelevant to the user.
Objectives of the Project:

▪ Learn the Full Stack Web Development
▪ Learn New Skills of color pelleting the information
▪ Professionally
▪ Get Constructive Feedback
▪ Establish Yourself Professionally
14|Page
About the Project:

• The proposed project ids Weather Forecast website.
• The role of this website is to provide a easy to use user interface which formats
the information in few words with differentiable entities. This is informative
to the person in day in day out. Even it can be used to provide the information
on the big holdings for the promotional and informative purposes as well. By
the organization which continuously monitors the weather for providing the
assistance when required by the public.
15|Page
REQUIREMENT SPECIFICATION
The system requirement and specification of our project is as follows:
⮚ Hardware Requirements
Processor: i3 Core Processor
Monitor: 1024 * 768 Resolution Color
Keyboard: Any keyboard
Motherboard: Any.
Hard disk: 1 TB HDD
I/O Device: Standard input and output devices.
Internet connection is required.
⮚ Software Requirements
VS Code
MySQL
Web Browser
Node.js
16|Page
How to use?
User Side:
To use this the user don’t need to download and install anything. But it
just required browser and a basic internet connectivity is required.
For Local machine:

Just to keep the use of database it may be required to install MySQL and
then need to create a table named “Feedback”. And then simply it can be
use. And if it is pulled from GitHub then no need to develop the database
it will directly pass the skeleton of the database.
Code To Download: https://github.com/shreyas0924/weather-

forecast
17|Page
SOURCE CODE( ONLY Important code)

For complete code https://github.com/shreyas0924/weather-
forecast
⮚ Weather Forecast source Code
1. Main.jsx
import
React from
"react";
import ReactDOM from "react-dom/client";

import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
18|Page
⮚ Src Folder
App.js
Impor
t React
,{
useSt
ate }
from
"reac
t";
import axios from "axios";

import { Route, Routes } from "react-router-dom";
import Modal from "../components/Modal";
function App() {
const [data, setData] = useState({});
const [location, setLocation] = useState("");
const url =
`https://api.openweathermap.org/data/2.5/weather?q=${location}&units=metri
c&appid=895284fb2d2c50a520ea537456963d9c`;
const searchLocation = (event) => {

if (event.key === "Enter") {
axios.get(url).then((response) => {
setData(response.data);
console.log(response.data);
});
setLocation("");
}
};
19|Page
// bg1: #474E68
// con1:#607EAA
return (
<div className="container mx-[auto] my-[100px] border-transparent
border-2 rounded-[30px] w-6/12 bg-[#b7c9e9] shadow-2xl ">
<h1 className="text-[40px] font-bold mt-10 flex justify-center text-
center">
⛈️ Weather Forecast ⛈️
</h1>
<div className="m-8 p-2 flex justify-center gap-3 text-[20px] ">
<input
value={location}
className="rounded-3xl w-[500px] border-black border-2 bg-
transparent text-[25px] indent-2"
onChange={(event) => setLocation(event.target.value)}
onKeyPress={searchLocation}
placeholder="Enter Location"
type="text"
/>
</div>
<div>
{/* Location name */}
<div className="location text-3xl p-2 text-center mb-[1.8rem] ">
{data.name ? `Location: ${data.name}` : null}
</div>
{/* Div1 */}

<div className="top text-2xl flex justify-between gap-5 m-[0.9rem]
">
<div className="temp text-center ml-[7rem] ">
{data.main ? `Temperature: ${data.main.temp.toFixed()}°C` :
null}
</div>
<div className="description text-center flex mr-[11rem]">
{data.weather ? `Desc: ${data.weather[0].main} ` : null}
</div>
{data.name !== undefined && (
20|Page
<div className="bottom text-2xl pb-10 flex gap-5 justify-between

">
<div className="wind text-center ml-[8rem]">
{data.wind
? `Wind Speed: ${data.wind.speed.toFixed()} KPH`
: null}
</div>
<div className="humidity text-center mr-[10rem]">
{data.main ? `Humidity: ${data.main.humidity}%` : null}
</div>
</div>
)}
{data.name !== undefined && <Modal />}
</div>
</div>
);
}
export default App;
Source Code for Feedback

1.Modal.css
body.active-
modal {
overflow-y: hidden;
}
21|Page
.btn-modal {
padding: 10px 20px;
display: block;
margin: 25px auto 0;
font-size: 18px;
}
.modal,
.overlay {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
}
.overlay {
background: rgba(49, 49, 49, 0.8);
}
.modal-content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 1.4;
background: #f1f1f1;
padding: 14px 28px;
border-radius: 3px;
max-width: 600px;
min-width: 300px;
}
.close-modal {
position: absolute;
top: 10px;
22|Page
input::placeholder {
color: rgba(0, 0, 0, 0.371);
padding-left: 30px;
}
2. Modal.jsx
import
React, { useState
} from
"react";
import "./Modal.css";
import Axios from "axios";
export default function Modal() {

const [modal, setModal] = useState(false);
const [name, setName] = useState("");

const [feedback, setFeedback] = useState("");
const [email, setEmail] = useState("");
const addFeedback = () => {

Axios.post("http://localhost:5174/create", {
name: name,
email: email,
feedback: feedback,
}).then(( ) => console.log('success') )
};
const toggleModal = () => {

setModal(!modal);
};
23|Page
if (modal) {
document.body.classList.add("active-modal");
} else {
document.body.classList.remove("active-modal");
}
return (
<>
<button
onClick={toggleModal}
className="btn-modal border-2 border-black
rounded-xl mb-8"
>
Feedback
</button>
{modal && (
<div className="modal">
<div onClick={toggleModal}
className="overlay"></div>
<div className="modal-content ">
<div>
<h1 className="text-2xl pb-3 pl-2">Feedback
Form</h1>
<div>
<div className="flex gap-2 p-2 mt-5 text-
xl ">
<p className="justify-start">Name: </p>
<input
type="text"
className="rounded-md w-[370px] ml-7 "
onChange={(event) =>
setName(event.target.value)}
></input>
</div>
24|Page

xl ">
<p className="justify-start">Email: </p>
<input
type="email"
className="rounded-md w-[370px] ml-9"
setEmail(event.target.value)}
></input>
</div>
xl ">
<p className="justify-start">Feedback:
</p>
<input
type="text"
className="rounded-md w-[370px]"
setFeedback(event.target.value)}
onSubmit={toggleModal}
></input>
</div>
</div>
</div>
<button
className="close-modal border-2 rounded-xl

border-black"
onClick={toggleModal}
>
Close
</button>
<button
className="border-2 border-black rounded-xl

mt-6 p-2 w-1/2 ml-[25%]"
onClick={addFeedback}
>
25|Page
</div>
</div>
)}
</>
);
}
Server
1.index.jsx
const express = require("express"); const app =
express();
const mysql = require("mysql"); const cors =
require("cors");
app.use(cors()) app.use(express.json())
const db = mysql.createConnection({ host:
"localhost",
user: "root", password:
"password", database:
"feedback",
});
app.post("/create", (req, res) => { const name = reg.b
26|Page
const email = req.body.email;
const feedback = req.body.feedback;
db.query(
"insert into fbtable (name,email,feedback) values (?,?,?)", [name, email, feedback],
(err, result) => {if (err) {
console.log(err);
} else {
res.send("values inserted");
);
console.log('success ')
});
app.listen(5174, () => { console.log("Running on port
5174");
});
SNAPSHOT
27|Page
SNAPSHOT
28|Page
Basic Website Layout
29|Page
DATABASE SNAPSHOT
30|Page
DECLARATION
We students of 5th semester BE, Computer Science and Engineering department JSS
Academy of Technical Education, Bengaluru hereby declare that internship project work
entitled "Weather Forecast" has been carried out by us at Prinston Smart Engineers,
Bengaluru and submitted in fulfilment of the course requirement for the award of the
degree of Bachelor of Engineering in Electronics and Communication Engineering
of Visvesvaraya Technological University, Belgaum, during the academic year 2023-
24
We also declare that, to the best of our knowledge and belief, the work reported here does
not from the part of dissertation on the basis of which a certificate was conferred on an
occasion on this by any other student.
Date:
Place: Bengaluru
SRINIVAS T
[1JT20EC044]
31|Page

Reportw 2.1 SR

Uploaded by

Document Information

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

Reportw 2.1 SR

Uploaded by

Copyright:

Available Formats

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

“FULL STACK WEB DEVELOPMENT”

Department of Electronics and Communication Engineering

Jyothy Institute of Technology

Academic Year 2023-2024

Jyothy Institute of Technology

Signature of Signature of HOD Signature of

SRILAKSHMI. R Dr. K CHANDRASEKHAR Dr. K. GOPALAKRISHNA

Date: Signature of Student

I would extend my heartfelt gratitude to the “Prinston Smart Engineers”, for

I am grateful to the esteemed institution “Jyothy Institute of Technology” for

I would like to thank Dr. K Chandrasekhar, Head of Department of Electronics and

I sincerely thank my internal guide, SriLakshmi.R, Assistant/ Associate professor of

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

4.3 SOFTWARE REQUIRMENT.................................................................................... 13

Following technologies are used to generate a website:

declarative code, we use React. It’s an open-source and component-based

Node.js (Node) is an opensource development platform for executing JavaScript

MySQL is multithreaded, multi user SQL database management System (DBMS).

Aim of the Project:

Purpose of the Project:

Objectives of the Project:

About the Project:

The system requirement and specification of our project is as follows:

For Local machine:

Code To Download: https://github.com/shreyas0924/weather-

SOURCE CODE( ONLY Important code)

import ReactDOM from "react-dom/client";

import axios from "axios";

const searchLocation = (event) => {

{/* Div1 */}

{data.name !== undefined && (

<div className="bottom text-2xl pb-10 flex gap-5 justify-between

{data.name !== undefined && <Modal />}

export default App;

Source Code for Feedback

export default function Modal() {

const [name, setName] = useState("");

const addFeedback = () => {

const toggleModal = () => {

<div className="flex gap-2 p-2 mt-5 text-

className="close-modal border-2 rounded-xl

className="border-2 border-black rounded-xl

const mysql = require("mysql"); const cors =

const db = mysql.createConnection({ host:

user: "root", password:

app.post("/create", (req, res) => { const name = reg.b

const email = req.body.email;

const feedback = req.body.feedback;

"insert into fbtable (name,email,feedback) values (?,?,?)", [name, email, feedback],

(err, result) => {if (err) {

app.listen(5174, () => { console.log("Running on port

Basic Website Layout

You might also like