SHREEYASH PRATISHTHAN’S

SHREEYASH COLLEGE OF ENGINEERING &

TECHOLOGY (POLYTECHNIC),
CHH. SAMBHAJINAGAR

Weekly Diary
For
Industrial Training

Academic Year:-_____________
Name of Program:-____________________________________
Name of Student:- _____________________________________
Enrollment No:-_______________________________________
Name of Industry:-____________________________________
What is Full Stack Development?

Full stack development is the process of designing, creating,

testing, and deploying a complete web application from start to
finish. It involves working with various technologies and tools,
including front-end web development, back-end web
development, and database development. And full stack
development is a term used to describe a software engineer or
developer who works with both the front and back end of a
website or application. A full-stack developer is comfortable
working with front-end and back-end technologies that power a
website or application.

Full-stack developers are often responsible for the entire web

application development process, from start to finish, which
means they must have a strong understanding of all the
technologies and tools involved in web development. They also
need to work effectively with others on a team, as web
development is typically a collaborative process. Most full-stack
developers have a firm foundation in web development
technologies, such as HTML, CSS, and JavaScript. They also
have experience with server-side technologies such
as PHP, Ruby on Rails, and Node.js. In addition to their
technical skills, full-stack developers also deeply understand
how the various parts of a website or application work
together.

Full-stack developers are in high demand because they can

build a website or application from start to finish and quickly
identify and fix any problems that may arise. If you're looking to
hire a full-stack developer, ask about their experience with
front-end and back-end technologies.

Client Software (Front End)

Client software, also known as a front end, is a type of software

that interacts with users. It is responsible for the graphical user
interface (GUI) that users see and interact with. It allows users
to access and use the features and functions of the underlying
software or system. Client software typically runs on a user's
local machine instead of being hosted on a remote server.

In many cases, the client software makes the user's experience

with a particular system or application possible.

Front-end Languages

Several languages can be used for front-end development,

including HTML, CSS, and JavaScript. Each language has its
strengths and weaknesses, so it's essential to choose the
correct language for the task.

 HTML is the most basic of the three languages and is

used to structure content on a web page.
 CSS is used to style the content on a web page and can
be used to create sophisticated layouts.
 JavaScript is used to add interactivity to a web page and
can be used to create dynamic content.
Want a Top Software Development Job? Start Here!
Full Stack Developer - MERN StackEXPLORE PROGRAM
Front-End Frameworks and Libraries

There are many front-end frameworks and libraries available to

developers today. Some of the most popular include React,
Angular, and Vue. Each of these frameworks has its benefits
and drawbacks, so choosing the one that's right for your project
is essential.

 React is a popular choice for many developers because

it's easy to learn and use.
 Angular is a good choice for larger projects because it's
more feature-rich.
 Vue is a good choice for smaller projects because it's
lightweight and easy to use.
No matter which front-end framework you choose, ensure
you're familiar with it before starting your project.

In addition to the frameworks themselves, several utility

libraries can be used to supplement your development efforts.
These include libraries like,

 Lodash,
 Moment.js,
 And Axios.
Again, choosing a suitable library for the job is essential, as
each has unique capabilities.

Server Software (Back End)

Server software, also known as the back-end software, is

responsible for managing and coordinating the activities of the
server. It is responsible for ensuring that the server is up and
running and that all the different server components are
functioning correctly. Server software also provides an interface
for users to interact with the server and for administrators to
manage the server.

Some popular server software programs include Apache HTTP

Server, Microsoft IIS, and Nginx. These programs handle
server-side tasks like hosting web pages, taking user requests,
and sending responses.

To run a website or application, you will need to have a server

running server software. This software allows users to interact
with your site or application. Without server software, there
would be no way for users to request data or information from
your site.

Server software is an integral part of any website or application.

It is essential for anyone who wants to run a website or
application to have a basic understanding of how it works.

Back-end Languages

There are a variety of back-end languages that can be used to

develop a website or application. PHP, Java, Python, and Ruby
are the most popular back-end languages. Each language has
its strengths and weaknesses, so it's essential to choose the
correct language for the project.

 PHP is a good choice for small projects that require

simple functionality, and Java is a good choice for larger
projects that require more complex functionality.
 Python is a good choice for projects requiring much data
processing, and Ruby is a good choice for projects
requiring a lot of user interaction.
Back-End Frameworks and Libraries

Various back-end frameworks and libraries are available to

developers today. These frameworks and libraries can be used
to build web applications, mobile applications, and desktop
applications. Some popular back-end frameworks and libraries
include Ruby on Rails, Laravel, and Node.js. Each of these
frameworks and libraries has its unique benefits and
drawbacks. Developers should carefully evaluate the needs of
their project before choosing a back-end framework or library.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackEXPLORE PROGRAM

Popular Stacks

There are a few popular stacks that developers often use.

 The most popular stack is the MEAN stack, which is

used for developing web applications and consists of
MongoDB, Express.js, AngularJS, and Node.js.
 Another popular stack is the LAMP stack, which is also
used for developing server-side applications and it
includes Linux, Apache, MySQL, and PHP.

Advantages and Disadvantages of Full Stack

Advantages

There are many advantages to full-stack development,

 The most obvious benefit is that it allows developers to
understand the entire web development process
thoroughly, and this comprehensive understanding can
lead to more efficient and effective development.
 Another advantage of full-stack development is that it
can make development more efficient overall. Full-stack
developers can more easily identify potential bottlenecks
and issues by thoroughly understanding the front-end
and back-end development process. This can help save
time and money by preventing development problems
before they occur.
 Full-stack development can also help create more
cohesive and user-friendly websites and applications.
By having a deep understanding of both the front-end
and back-end development process, full-stack
developers can create a more unified user experience
that can lead to increased customer satisfaction and
loyalty.
Overall, full-stack development provides many benefits that can
lead to more efficient, effective, and user-friendly web
development.

Disadvantages

There are a few potential disadvantages to full-stack

development,

 One is that because full-stack developers need to have

a broad range of skills, they may not be as deep in any
particular area as a specialist, which could lead to
issues if a project requires an intense level of specific
expertise.
 Another potential disadvantage is that because full-stack
developers need to be able to work with a variety of
technologies, they may need to spend more time
keeping up with new developments than specialists who
only need to focus on one area.
 Finally, full-stack development can be more complex
and time-consuming than technological development, so
it may not be the best option for small projects or tight
deadlines.
WEEK 1

What is HTML?
Okay, so this is the only bit of mandatory theory. In order to
begin to write HTML, it helps if you know what you are writing.
HTML is the language in which most websites are written.
HTML is used to create pages and make them functional.
The code used to make them visually appealing is known as
CSS and we shall focus on this in a later tutorial. For now, we
will focus on teaching you how to build rather than design.
The History of HTML
HTML was first created by Tim Berners-Lee, Robert Cailliau,
and others starting in 1989. It stands for Hyper Text Markup
Language.
Hypertext means that the document contains links that allow
the reader to jump to other places in the document or to
another document altogether. The latest version is known
as HTML5.
A Markup Language is a way that computers speak to each
other to control how text is processed and presented. To do this
HTML uses two things: tags and attributes.

What are Tags and Attributes?

Tags and attributes are the basis of HTML.
They work together but perform different functions – it is worth
investing 2 minutes in differentiating the two.
What Are HTML Tags?
Tags are used to mark up the start of an HTML element and
they are usually enclosed in angle brackets. An example of a
tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to
function.
What are HTML Attributes?
Attributes contain additional pieces of information. Attributes
take the form of an opening tag and additional info is placed
inside.
An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are
attributes of the <img> tag.
Golden Rules To Remember

1. The vast majority of tags must be opened (<tag>)

and closed (</tag>) with the element information such as
a title or text resting between the tags.
2. When using multiple tags, the tags must be closed in the
order in which they were opened. For example:

<strong><em>This is really important

Week 2

Creating Your First HTML Webpage

First off, you need to open your HTML editor, where you will
find a clean white page on which to write your code.
From there you need to layout your page with the following
tags.
Basic Construction of an HTML Page
These tags should be placed underneath each other at the top
of every HTML page that you create.
<!DOCTYPE html> — This tag specifies the language you will
write on the page. In this case, the language is HTML 5.
<html> — This tag signals that from here on we are going to
write in HTML code.
<head> — This is where all the metadata for the page goes —
stuff mostly meant for search engines and other computer
programs.
<body> — This is where the content of the page goes.
Thi
s is how your average HTML page is structured visually.
Further Tags
Inside the <head> tag, there is one tag that is always
included: <title>, but there are others that are just as important:
<title>
This is where we insert the page name as it will
appear at the top of the browser window or tab.

<meta>
This is where information about the document is stored:
character encoding, name (page context), description.

Let’s try out a basic <head> section:

<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This field contains
information about your page. It is usually around two
sentences long.">.
<meta name="author" content="Conor Sheils">
</header>

Adding Content
Next, we will make <body> tag.
The HTML <body> is where we add the content which is
designed for viewing by human eyes.
This includes text, images, tables, forms and everything
else that we see on the internet each day.
How to Add HTML Headings To Your Web Page
In HTML, headings are written in the following elements:

 <h1>
o <h2>
 <h3>
 <h4>
 <h5>
 <h6>

As you might have guessed <h1> and <h2> should be

used for the most important titles, while the remaining tags
should be used for sub-headings and less important text.
Search engine bots use this order when deciphering
which information is most important on a page.
Week 3

Creating Your Heading

Let’s try it out. On a new line in the HTML editor, type:

<h1>Welcome to My Page</h1>

And hit save. We will save this file as “index.html” in a new folder called “my webpage.”

The Moment of Truth: Click the newly saved file and

your first ever web page should open in your default
browser. It may not be pretty it’s yours… all yours. *Evil
laugh*
Well let’s not get carried away; we’ve still got loads of great features that we can add to your page.

How To Add Text In HTML

Adding text to our HTML page is simple using an element opened with the
tag <p> which creates a new paragraph. We place all of our regular text inside
the element <p>.
When we write text in HTML, we also have a number of other elements we can
use to control the text or make it appear in a certain way.

Other Key Elements

They are as follows:
Element Meaning Purpose
<b> Bold Highlight important informa
<strong> Strong Similarly to bold, to highligh
<i> Italic To denote text
<em> Emphasised Text Usually used as image capt
<mark> Marked Text Highlight the background o
<small> Small Text To shrink the text
<strike> Striked Out Text To place a horizontal line a
<u> Underlined Text Used for links or text highli
<ins> Inserted Text Displayed with an underline
<sub> Subscript Text Typographical stylistic choi
<sup> Superscript Text Another typographical pres
These tags must be opened and closed around the text in question.
Let’s try it out. On a new line in the HTML editor, type the following HTML code:
<p>Welcome to <em>my</em> brand new website. This site will be my
<strong>new<strong> home on the web.</p>
Don’t forget to hit save and then refresh the page in your browser to see the
results.

How To Add Links In HTML

As you may have noticed, the internet is made up of lots
of links.
Almost everything you click on while surfing the web is a
link takes you to another page within the website you are
visiting or to an external site.
Links are included in an attribute opened by the <a> tag. This
element is the first that we’ve met which uses an attribute and
so it looks different to previously mentioned tags.
The Anchor Tag
The <a> (or anchor) opening tag is written in the format:
<a href="https://blogging.com/how-to-start-a-blog/">Your Link
Text Here </a>
The first part of the attribute points to the page that will
open once the link is clicked.
Meanwhile, the second part of the attribute contains the text
which will be displayed to a visitor in order to entice them to
click on that link.
If you are building your own website then you will most likely
host all of your pages on professional web hosting. In this case,
internal links on your website will <a
href=”mylinkedpage.html”>Linktle Here</a>.
Let’s Create An Anchor Tag
Let’s try it out. Make a duplicate of the code from your
current index.html page. Copy / paste it into a new window in
your HTML editor.
Save this new page as “page2.html” and ensure that it is saved
in the same folder as your index.html page.
On page2.html add the following code:
<a href="http://www.google.com">Google</a>
This will create a link to Google on page 2. Hit save and return
to your index.html page.
On a new line on index.html add the following code:
<a href="*folder(s)*/page2.html">Page2</a>
Ensure the folder path to the file (page2.html) is correct. Hit
save and preview index.html in your browser.
If everything is correct then you will see a link which will
take you to your second page. On the second page, there will
be a link that will take you to google.com.
How To Add Images In HTML To Your Website
In today’s modern digital world, images are everything.
The <img> tag has everything you need to display images on
your site. Much like the <a> anchor element, <img> also
contains an attribute.
The attribute features information for your computer regarding
the source, height, width and alt text of the image.
Styling and Formats

Yo
u can check the file type of an image by right-clicking the item
and selecting ‘Properties’.
You can also define borders and other styles around the image
using the class attribute. However, we shall cover this in a later
tutorial.
The file types generally used for image files online
are: .jpg, .png, and (less and less) .gif.
Alt text is important to ensure that your site is ranked
correctly on search sites and also for visually impaired visitors
to your site.
The <img> tag normally is written as follows:
<img src="yourimage.jpg" alt="Describe the image" height="X"
width="X">
Week 4
Worked on backend development using Node.js and Express.

1. Install Node.js and npm

First, download and install Node.js from the official website.
This will also install npm (Node Package Manager).
Verify the installation by running:
node -v
npm -v
2. Set Up a New Project
Create a new directory for your project and navigate into it:
mkdir my-backend-project
cd my-backend-project
Initialize a new Node.js project:
npm init -y
This will create a package.json file.
3. Install Express.js
Express.js is a popular framework for building web applications
with Node.js. Install it using npm:
npm install express
4. Create a Basic Server
Create a file named server.js and add the following code:
JavaScript
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {

res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
AI-generated code. Review and use carefully. More info on
FAQ.
Run the server:
node server.js
You should see Server is running on http://localhost:3000 in
your terminal. Open your browser and navigate
to http://localhost:3000 to see “Hello World!”.
5. Connect to a Database
For a full stack application, you’ll need a database. MongoDB is
a popular choice with Node.js. Install the MongoDB driver:
npm install mongodb
Here’s a basic example of connecting to MongoDB:
JavaScript
const { MongoClient } = require('mongodb');
const uri = "your_mongodb_connection_string";

MongoClient.connect(uri, { useNewUrlParser: true,

useUnifiedTopology: true }, (err, client) => {
if (err) throw err;
const db = client.db('mydatabase');
console.log('Connected to database');
client.close();
});
6. Handle Routes and Middleware
Express.js allows you to handle different routes and use
middleware for various tasks like parsing JSON, handling
sessions, etc.
JavaScript
app.use(express.json());
app.post('/data', (req, res) => {
const data = req.body;
// Process the data
res.send('Data received');
});
Week 5
Integrated MongoDB for database management.

1. Set Up MongoDB
You can use MongoDB Atlas, a cloud-based service that
simplifies deployment and management. Sign up for an account
on MongoDB Atlas and create a new cluster1.
2. Install MongoDB Driver
In your Node.js project, install the MongoDB driver:
npm install mongodb
3. Connect to MongoDB
Create a file named db.js and add the following code to connect
to your MongoDB database:
JavaScript
const { MongoClient } = require('mongodb');
const uri = "your_mongodb_connection_string";

const client = new MongoClient(uri, { useNewUrlParser: true,

useUnifiedTopology: true });

async function connectDB() {

try {
await client.connect();
console.log("Connected to MongoDB");
const db = client.db('mydatabase');
return db;
} catch (err) {
console.error(err);
}
}

module.exports = connectDB;
4. Use the Database in Your Application
In your main application file (e.g., server.js), use
the connectDB function to interact with your database:
JavaScript
const express = require('express');
const connectDB = require('./db');

const app = express();

const port = 3000;

app.use(express.json());

app.get('/', async (req, res) => {

const db = await connectDB();
const collection = db.collection('mycollection');
const data = await collection.find({}).toArray();
res.send(data);
});

app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
AI-generated code. Review and use carefully. More info on
FAQ.
5. Perform CRUD Operations
You can now perform Create, Read, Update, and Delete
(CRUD) operations on your MongoDB collections. Here’s an
example of inserting a document:
JavaScript
app.post('/add', async (req, res) => {
const db = await connectDB();
const collection = db.collection('mycollection');
const result = await collection.insertOne(req.body);
res.send(result);
});
Week 6
Debugged and tested the application & Deployed the
application on a cloud platform

Debugging and Testing the Application

1. Debugging:

 Identify Issues: Use console logs or debugging tools to

identify where the code is failing.

JavaScript

console.log('Debugging message:', variable);

AI-generated code. Review and use carefully. More info

on FAQ.

 Use Debugger: Utilize Node.js built-in debugger or IDE

features (like VSCode) to step through your code.
 node inspect server.js
 Error Handling: Implement proper error handling to catch
and manage errors gracefully.

JavaScript

try {
// Code that might throw an error
} catch (error) {
console.error('Error:', error);
}

AI-generated code. Review and use carefully. More info

on FAQ.

2. Testing:

 Unit Testing: Write unit tests for individual functions using

frameworks like Mocha, Chai, or Jest.
JavaScript

const assert = require('chai').assert;

describe('Array', function() {
it('should return -1 when the value is not present',
function() {
assert.equal([1,2,3].indexOf(4), -1);
});
});

AI-generated code. Review and use carefully. More info

on FAQ.

 Integration Testing: Test the integration of different

modules and services.
 Automated Testing: Set up automated tests to run on
every code change using CI/CD tools like Jenkins or
GitHub Actions.

Deploying the Application on a Cloud Platform

1. Choose a Cloud Platform:

 Popular options include Heroku, AWS, Google Cloud, and

Azure.

2. Prepare Your Application:

 Ensure your application is production-ready. This includes

setting environment variables, optimizing performance,
and securing your application.

3. Deploy to Heroku (Example):

 Install Heroku CLI:

 npm install -g heroku
 Login to Heroku:
 heroku login
 Create a New Heroku App:
 heroku create
 Deploy Your Code:
 git add .
 git commit -m "Deploying to Heroku"
 git push heroku main
4. Deploy to AWS (Example):

 Set Up AWS Account: Create an AWS account and set

up IAM roles.
 Install AWS CLI:
 pip install awscli

 Configure AWS CLI:

 aws configure

 Deploy Using Elastic Beanstalk:

 eb init

 eb create

eb deploy
Debugging and Testing the Application
1. Debugging:

 Identify Issues: Use console logs or debugging tools to

identify where the code is failing.

JavaScript

console.log('Debugging message:', variable);

AI-generated code. Review and use carefully. More info

on FAQ.

 Use Debugger: Utilize Node.js built-in debugger or IDE

features (like VSCode) to step through your code.
 node inspect server.js
 Error Handling: Implement proper error handling to catch
and manage errors gracefully.

JavaScript
try {
// Code that might throw an error
} catch (error) {
console.error('Error:', error);
}

AI-generated code. Review and use carefully. More info

on FAQ.

2. Testing:

 Unit Testing: Write unit tests for individual functions using

frameworks like Mocha, Chai, or Jest.

JavaScript

const assert = require('chai').assert;

describe('Array', function() {
it('should return -1 when the value is not present',
function() {
assert.equal([1,2,3].indexOf(4), -1);
});
});

AI-generated code. Review and use carefully. More info

on FAQ.

 Integration Testing: Test the integration of different

modules and services.
 Automated Testing: Set up automated tests to run on
every code change using CI/CD tools like Jenkins or
GitHub Actions.

Deploying the Application on a Cloud Platform

1. Choose a Cloud Platform:

 Popular options include Heroku, AWS, Google Cloud, and

Azure.
2. Prepare Your Application:

 Ensure your application is production-ready. This includes

setting environment variables, optimizing performance,
and securing your application.

3. Deploy to Heroku (Example):

 Install Heroku CLI:

 npm install -g heroku
 Login to Heroku:
 heroku login
 Create a New Heroku App:
 heroku create
 Deploy Your Code:
 git add .
 git commit -m "Deploying to Heroku"
 git push heroku main
4. Deploy to AWS (Example):

 Set Up AWS Account: Create an AWS account and set

up IAM roles.
 Install AWS CLI:
 pip install awscli
 Configure AWS CLI:
 aws configure
 Deploy Using Elastic Beanstalk:
 eb init
 eb create
eb deploy
Format No 04

Evaluation Sheet for PA of Industrial Training

Academic Year:-

Name of Industry:-_________________________________________________________________

Marks (05
marks for
each week) PA Marks
PA Marks
by mentor by Total
by Mentor
Sr. Name of and Industry Marks
En. No. Faculty
No. Student industry Supervisor
supervisor
jointly
Out of 30 Out of 25 Out of 20 Out of 75
(A) (B) (C) (A+B+C)

Signature Signature
Name and Designation of Mentor Faculty Name and Designation of Industry Supervisor
Format No 05

Evaluation Sheet for ESE of Industrial Training By Mentor and Industry

Personnel

Name of Student:- _______________________________________ En. No.:-_________________

Name of Program:- ______________________________________ Semester:-________
Course Title :- Industrial Training Course Code:- ___________
Name of Industry:-_________________________________________________________________
Course Outcomes Achived:-
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Industrial Training Report Presentation Viva Total Marks

(25 Marks) (25 Marks) (25 Marks) (75 Marks)

Comments / Suggestions About Team Work / Leadership / Inter-Personnel Communication

(If Any)
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Signature Signature
Name of the Internal / Mentor Name of the External Examiner
Industry Personnel