INTERSHIP AT ESPARKBIZ

A PROJECT REPORT

Submitted by
Hareshkumar Chauhan

200200107085

In partial fulfilment for the award of the degree of

BACHELOR OF ENGINEERING

In

COMPUTER ENGINEERING

GOVERNMENT ENGINEERING COLLEGE, RAJKOT

Gujarat Technological University, Ahmedabad

April - 2024
 Government Engineering College

Rajkot

CERTIFICATE
This is to certify that the project report submitted along with the project entitled
Offline-Internship has been carried out by Hareshkumar Balubhai Chauhan
under my guidance in partial fulfilment for the degree of Bachelor of Engineering
in Computer Engineering, 8th Semester of Gujarat Technological University,
Ahmadabad during the academic year 2023-24.

Prof. Trupti Kodinariya

Internal Guide Head of the Department

 Government Engineering College

Rajkot

DECLARATION

We hereby declare that the Internship report submitted along with the Project
entitled Offline-Internship submitted in partial fulfilment for the degree of
Bachelor of Engineering in Computer Engineering College, Rajkot to Gujarat
Technological University, Ahmedabad, is a Bonafede record of original project
work carried out by me at eSpearkBiz Technologies Pvt. Ltd. under the
supervision of Chintan Gor and that no part of this report has been directly copied
from any students’ reports or taken from any other source, without providing due
reference.

Name of the Student Sign of Student

Hareshkumar Chauhan
Team Id: 418680

ACKNOWLEDGEMENT

It gives me great pleasure in expressing thanks and profound gratitude

to Mr. Chintan Gor (CTO, eSparkBiz Technologies Pvt. Ltd.,
Ahmedabad) for his continued support throughout the Internship. I
would also like to thank my Faculty Guide, Prof. Trupti Kodinariya,
Department of Computer Engineering, Government Engineering
College, Rajkot for his valuable guidance and continual encouragement
throughout the Internship.

I am also thankful to Prof. (Dr.) S. M. Shah, Head of Department,

Computer Engineering Department, Government Engineering College,
Rajkot for his continual kind words of encouragement and motivation
throughout the Internship. I am thankful to all faculty members of the
Computer Engineering Department, Government Engineering College,
Rajkot for their special attention and suggestions towards the Internship.
I am also thankful to the employees of eSparkBiz Technologies Pvt.
Ltd. for support and encourage me toward the training.

I am also thankful to the employees of eSparkBiz Technologies Pvt.

Ltd. for support and encourage me toward the training.

Gujarat Technological University i Government Engineering College, Rajkot

Team Id: 418680

ABSTRACT

The goal of this internship is to help you get ready for real-world projects
and the full-stack development business.

During the 12-week internship, I first learned the fundamentals of front-

end development, such as HTML and CSS. Next, JavaScript, a language
for client-side scripting. JavaScript fundamentals, functionality, and
applications.

The Node.js scripting language is what I learned for backend

development. Basic Node.js functionality and capabilities. Next, go on to
the advanced notion.

Discover how a RESTful API functions with a project and how to create
an API using the Node.js Express framework. How API is utilized at the
front end and linked to the back end.

I gained knowledge about the MySQL relational database management

system through the Workbench platform. The ideal platform is
Workbench.

Gujarat Technological University ii Government Engineering College, Rajkot

Team Id: 418680

List of Figures
Fig 1.1 Services of Company…………………………………………….……. 03

Fig 1.2 Technologies offer by Company……………………………….………. 03

Fig 3.1 W3School MySQL introduction ………………………………... 07

Fig 3.2 Example of database table…………………………………... 08

Fig 3.3 Example of MYSQL query………………………………... 10

Fig 4.1 HTML Introduction.…….…………………………………... 11

Fig 4.2 CSS Box Model...………………………………………… 14

Fig 4.3 Flex Box……….….………………………………………… 14

Fig 4.4 Figma first design...………………………………………… 17
Fig 4.5 Figma second design...……………………………………… 19
Fig 4.6 Figma third design...………………………………………… 22
Fig 4.7 HTML Snippet for HireX……………………………………… 23

Fig 4.8 CSS Snippet for HireX…..……………………………………… 23

Fig 5.1 Dynamic table generator.……………………………………. 25

Fig 5.2 All event practice table……………………………………… 26
Fig 5.3 KuKu cube game…………………………………………… 27
Fig 5.4 Tic Tac Toe….……………………………………………… 27
Fig 5.5 Winner ‘X’ or ‘O’ in tic tac toe………………………….…. 28

Fig 5.6 HTML and JavaScript Code for KUKU Cube ...……………….…. 29

Fig 6.1 Express EJS form exercise……………………………….…. 33

Fig 6.2 Pagination on studentmaster table data………………….…. 34
Fig 6.3 Pagination with ordered data…………………………….…. 34

Gujarat Technological University iii Government Engineering College, Rajkot

Team Id: 418680

Fig 6.4 Searching………………...…………………………………. 35

Fig 6.5 Searching with student id…………………………………... 35
Fig 6.6 Searching with delimiters………….…………………….…. 36
Fig 6.7 Attendance record group by month………………………… 36
Fig 6.8 All student exam record……………………………………. 37
Fig 6.9 One student full result……………………………………… 37
Fig 6.10 Job application form………………………………………... 41
Fig 6.11 Registered User…...………………………………………... 41
Fig 6.12 Backend code for Pagination of student result………………………... 43

Fig 6.13 Backend code for Pagination of student result………………………... 43

Fig 7.1 Home page……………………………………………….…. 43

Fig 7.2 Registration page Active Account………………………… 43
Fig 7.3 Login page……………………………………………….…. 44
Fig 7.4 Forgot password page………………………………………. 44
Fig 7.5 Password Change window……………………………….…. 44
Fig 7.6 Main All exercise page……………………………………... 45
Fig 7.7 Server File of Application………………………………….. 45
Fig 7.8 MVC Folder Structure……………………………………… 46

Gujarat Technological University iv Government Engineering College, Rajkot

Team Id: 418680

Abbreviations

• API - Application Programming Interface

• SQL - Structured Query Language
• CORS - Cross Origin Site Policy
• JWT - Json Web Token
• JSON - JavaScript Object Notation
• XML - Extensible Markup Language
• HTML – Hyper Text Markup Language
• CSS – Cascading Style Sheet
• EJS – Extended JavaScript
• ER – Entity Relation
• DBMS – Database Management System
• AJAX – Asynchronous JavaScript and XML

Gujarat Technological University v Government Engineering College, Rajkot

Team Id: 418680

Table of Contents

ACKNOWLEDGEMENT……………………………………………………………......i
ABSTRACT…………………………………………………………………...................ii
LIST OF FIGURES……………………………………………………………………..iii
ABBREVIATIONS………………………………………………………………………v

CHAPTER 1 OVERVIEW OF THE COMPANY 01

1.1 History of eSparkBiz……………………………………………….…. 01

1.2 Different Product/Scope of Work……………………………….…. 02

1.3 Achievements…………………………………………………………... 03

CHAPTER 2 INTERNSHIP INTRODUCTION 04

2.1 Internship Summery……………………………………………….…. 04

2.2 Internship Purpose…….………………………………………………... 05

2.3 Scope of Internship.…………………………………………………………. 05

2.4 Planning of Internship………………………………………………………. 06

CHAPTER 3 TRAINING IN MYSQL 07

3.1 MySQL Overview………………………………………………….... 07

3.2 MYSQL Concept…………………………………………….……… 08

CHAPTER 4 TRAINING IN HTML & CSS 11

4.1 Overview of HTML & CSS…………………………………….......... 11

4.2 Concept of HTML & CSS…………………………………………… 12

4.3 Exercise on given figma design using HTML and CSS…..………… 15

Gujarat Technological University vi Government Engineering College, Rajkot

Team Id: 418680

CHAPTER 5 TRAINING IN JAVASCRIPT 23

4.1 Overview of Javascript………………………………………………. 24

4.2 Concept Of Javascript………………………………………………. 24

6.3 Exercise on Javascrip……………………………………………… 25

CHAPTER 6 NODEJS INTRODUCTION 30

6.1 NodeJS Overview…………………………………………….…. 30

6.2 NodeJS Concept…………………………………………………… 30

6.3 Exercise of NodeJS…………………………………………………. 33

CHAPTER 7 APPLICATION USING NODE.JS, EJS, EXPRESS, CSS 43

CHAPTER 8 Git & GitHub 47

8.1 What is Git?.............................................................................................. 47

8.2 What is GitHub?...................................................................................... 47

8.3 How to use Git and GitHub?.................................................................. 47

CHAPTER 9 CONCLUSION……………………………………………………… 48

9.1 Overall Analysis of Internship………………………………………… 48

9.2 Problems Encountered………………………………………………. 48

9.3 Dates of Continuous Evaluation……………………………………... 48

REFERENCES………………………………………………………. 49

APPENDIX 1……………………………………………………….. 50

APPENDIX 2……………………………………………………...... 75

Gujarat Technological University vii Government Engineering College, Rajkot

Team Id: 418680

1. Overview of the Company

1.1History of eSparkBiz

 ESparkBiz Technologies was founded in 2003 and initially produced its own product
in the worldwide hospitality market. Following significant success and accumulating
comprehensive knowledge in product development, ESparkBiz established a distinct
branch in 2011 with the goal of advising startups, small and medium-sized
businesses, and enterprises on how to design, support, and evolve a worldwide
product that provides the best possible customer "experience."
 For developers looking to outsource work, eSparkBiz is a one-stop shop. We bring
on board a group of skilled developers who have constructed projects for companies
of all sizes, including startups, small businesses, and enterprises, throughout a wide
range of business fields.
 At eSparkBiz, our guiding principle is "Adding Value" to our customers and people's
growth as well as our own growth in embracing new technology and innovation. This
allows us to build and maintain world-class experiences and propel industries like
never before.
 We at eSparkBiz offer solutions for a variety of industries, services, and company
structures. Its primary goals are to add value to the product, innovate, and offer the
best possible strategy.
 We use our extensive industry knowledge and technological prowess to use digital
transformation to generate genuine value. Utilising their knowledge of cutting-edge
technology, our team of specialists and skilled developers makes the most significant
advancements for a variety of industries. Our group responsibly contributes to the
project's success.

Gujarat Technological University 1 Government Engineering College, Rajkot

Team Id: 418680

1.1 DIFFERENT PRODUCT/SCOPE OF WORK

The company, as previously said, is a product and service-based enterprise that develops
enterprise software for its customers. It is a product-based company that works with software
development services. Its team of highly skilled individuals handles organisation and project log
maintenance.

We advocate for improved digitalization! Our concept of offering sector-specific solutions has
spread to assist several industries, including Fintech & Insurance, Healthcare, Education, and
Real Estate.

 Fintech & Insurance

Rethink how you pay, purchase, and invest! We make use of cutting-edge technology to
give financial institutions a competitive edge and create enduring bonds with their clients.

 Healthcare

eSparkBiz owns expertise in providing innovation in healthcare from mobile apps. We

deploy healthcare IT consulting and interactive apps to improve patient care and
manage hospital records.

 Education
eSparkBiz is a specialist in using mobile apps to innovate healthcare. To enhance patient
care and oversee hospital records, we implement interactive apps and healthcare IT
consultancy.

 Real Estate
Take advantage of affordable real estate and property solutions to reach a wider audience
for your business while optimising the outcome and streamlining smarter customer
communication.

Gujarat Technological University 2 Government Engineering College, Rajkot

Team Id: 418680

Fig 1.1 Services of Company

Fig 1.2 Technologies offer by Company

1.2 ACHEIVEMENT

12+ 1000+ 20+ 95%

Years of experience Excellence Countries server Client retention rate
project
delivered

Gujarat Technological University 3 Government Engineering College, Rajkot

Team Id: 418680

2. INTERNSHIP INTRODUCTION

2.1 INTERNSHIP SUMMERY

The internship primarily concentrates on skill development in full-stack development,

focusing on specific technologies. It aims to equip interns with comprehensive knowledge
and hands-on experience in both front-end and back-end development.

 Front-end Technologies:

o HTML: Hypertext Markup Language (HTML) forms the backbone of web

pages, defining the structure and content.

o CSS: Cascading Style Sheets (CSS) is used for styling HTML elements,
enhancing the visual presentation and layout of web pages.

o JavaScript: JavaScript is a versatile scripting language used for adding

interactivity and dynamic features to web applications.

o Responsive Design: Responsive design ensures that web applications adapt and
display properly across various devices and screen sizes, enhancing user
experience.

 Back-end Technologies:

o Node.js: Node.js is a runtime environment that allows the execution of

JavaScript code server-side, enabling the development of scalable and efficient
back-end applications.

o APIs: Application Programming Interfaces (APIs) facilitate communication and

data exchange between different software systems, enabling seamless
integration and functionality.

o MySQL: MySQL is a popular relational database management system

(RDBMS) used for storing and managing structured data efficiently.

Gujarat Technological University 4 Government Engineering College, Rajkot

Team Id: 418680

2.2 INTERNSHIP PURPOSE

The primary purpose is to provide interns with a structured learning environment

where they can acquire practical skills in full-stack development. By focusing on
specific technologies such as HTML, CSS, JavaScript, Node.js, and MySQL, interns
gain hands-on experience in both front-end and back-end development, enhancing
their employability in the software development industry. The internship offers
comprehensive training in various aspects of web development, including front-end
design, back-end logic, database management, and responsive design principles. This
holistic approach ensures that interns develop a well-rounded skill set and understand
the interconnected nature of different components in web applications.

2.3 SCOPE OF INTERNSHIP

 Front-end Development:

o Interns will learn to create visually appealing and responsive web

interfaces using HTML, CSS, and JavaScript.

o They will understand principles of responsive design to ensure

optimal user experience across different devices and screen sizes.

 Back-end Development:

o Through Node.js and MySQL, interns will delve into server-side

programming and database management.

o They will learn to build robust back-end systems to handle data

processing, user authentication, and server-side logic.

 API Integration:

o Interns will gain proficiency in integrating APIs into their

applications, enabling communication with external services
and data sources.

Gujarat Technological University 5 Government Engineering College, Rajkot

Team Id: 418680

 Project Work:

o Interns will work on individual and group projects, applying the

skills learned during the internship to real-world scenarios.

o Projects may involve developing full-stack web applications from

scratch, incorporating front-end design, back-end logic, and
database functionality.

 Problem-Solving:

o Interns will tackle coding challenges and debug issues encountered

during development, honing their problem-solving abilities.

2.4 PLANNING OF INTERNSHIP

During this internship I am going to learn various frontend technologies. And

using this technology I developed websites and NodeJS web applications.

The software development models are the various processes or methodologies

that are being selected for the development of the project depending on the
project’s aims and goals. There are many development life cycle models that
have been developed in order to achieve different required objectives. The
models specify the various stages of the process and the order in which they are
carried out. The selection of model has very high impact on the testing that is
carried out. It will define the what, where and when of our planned testing,
influence regression testing and largely determines which test techniques to use.
According to our project requirements we chose scrum methodology to
accomplish project in effective and timely manner.

Gujarat Technological University 6 Government Engineering College, Rajkot

Team Id: 418680

3. TRAINING IN MYSQL
3.1 MYSQL OVERVIEW

MySQL is an open-source relational database management system (RDBMS) renowned

for its scalability, performance, and versatility. As a pillar of modern web development,
MySQL organizes data into tables consisting of rows and columns, fostering relationships
between them through keys. This architecture enables efficient storage and retrieval of
structured data, critical for applications requiring organized information storage.

One of MySQL's distinguishing features is its cross-platform compatibility, seamlessly

integrating with various operating systems. Its robustness extends to handling large
volumes of data and high transaction rates, thanks to optimized features like indexing,
caching, and replication. Moreover, MySQL prioritizes data security, offering
authentication, access control, encryption, and auditing mechanisms to safeguard
sensitive information.

Fig 3.1 W3School MySQL introduction

Gujarat Technological University 7 Government Engineering College, Rajkot

Team Id: 418680

3.2 MYSQL CONCEPT

A relational database management system is MySQL. Open-source software is MySQL. MySQL

is available for free. For both small and large applications, MySQL is perfect. MySQL is
incredibly quick, dependable, expandable, and user-friendly. MySQL works on many platforms.
MySQL complies with the ANSI SQL specification. 1995 saw the initial release of MySQL.
Oracle Corporation creates, distributes, and supports MySQL.

There exist various kinds of databases, including relational, distributed, centralized, NoSQL, and
object-oriented databases. I gained knowledge of relational databases or RDBMSs. Relational
Database Management System is referred to as RDBMS. All contemporary database systems,
including MySQL, Microsoft SQL Server, Oracle, and Microsoft Access, are built on RDBMS
technology. SQL queries are used by RDBMS to access database data. Tables are used in
relational databases to define database relationships. Based on shared data, the tables have a
relationship with one another.

In database a table is a collection of related data entries, and it consists of columns and rows.
A column holds specifies information about every record in the table. A record is each
individual entry that exits in a table.

Fig 3.2 example of database table

Gujarat Technological University 8 Government Engineering College, Rajkot

Team Id: 418680

For the job application form, I created one database. Chintan Sir produced the wireframe
for the job application form. There are various sections on a job application form,
including ones for basic information, education, work experience, languages spoken,
technologies used, references, and preferences. My job application form's er-diagram is
created using MySQL Workbench after the database is designed.

 ER Diagram

The acronym for Entity Relation Model is ER diagram. A model for identifying entities
to be represented in a database and displaying the relationships between those entities is
called the Entity Relational Model. The enterprise schema specified by the ER data model
graphically depicts a database's overall logical structure. The relationships between the
entities found in the database are explained by the entity relationship diagram. Real-world
things such as people, cars, and companies, as well as the relationships between them, are
modeled using ER models. The database's structural format can be summed up as follows:
the ER Diagram.

1. Entity

A firm, a job, a university course, or a specific individual having a physical existence

are examples of entities. Alternatively, an entity might be an object with a conceptual
existence.

2. Attributes

The characteristics that specify an entity type are called attributes. A few examples
of the properties that constitute the entity type Student are Roll No, Name, DOB,
Age, Address, and Mobile No. An oval in the ER diagram represents the attribute.

Gujarat Technological University 9 Government Engineering College, Rajkot

Team Id: 418680

3. Relationship type and Relationship set

The relationship between entity kinds is represented by a relationship type. One connection type
that exists between the entity types Student and Course is "Enrolled in." The relationship type
in an ER diagram is shown as a diamond, and lines are used to connect the entities. A relationship
set is a collection of partnerships of the same kind. One to One, One to Many, Many to One, and
Many to Many are the different relationship types.

Fig 3.3 Exmple of MYSQL query

Gujarat Technological University 10 Government Engineering College, Rajkot

Team Id: 418680

4.TRAINING HTML & CSS

4.1 OVERVIEW OF HTML & CSS

HTML (Hypertext Markup Language) is a markup language that is used to create web pages. It
is the standard language for creating web pages and web applications. HTML is used to structure
content on the web, providing a way to create headings, paragraphs, lists, links, images, and
other types of content.HTML code is written using tags, which are used to markup different
elements on the page. HTML is a foundational skill for anyone interested in web development,
and it is essential to learn the basics of HTML before moving on to other technologies. There
are many Resources available online to learn HTML, including tutorials, courses, and online
communities.

CSS stands for Cascading Style Sheets, and it is a programming language used to style and
format web pages. CSS is used in conjunction with HTML (Hypertext Markup Language) to
create visually appealing and consistent designs for websites. With CSS, web developers can
control the layout, colors, fonts, and other visual aspects of a web page. CSS allows for the
separation of content and design, making it easier to update and maintain websites.

Fig 4.1 HTML Introduction

Gujarat Technological University 11 Government Engineering College, Rajkot

Team Id: 418680

4.2 CONCEPT OF HTML & CSS

Although websites can and often will range greatly in appearance, they all often have the
same basic elements, unless the page is playing a full-screen game or video, is a
component of an artistic endeavour, or is just poorly designed:

Header:

Usually, a big strip across the top with a big heading, logo, and perhaps a tagline. This
usually stays the same from one webpage to another.

Navigation bar:

Links to the primary portions of the website; are typically displayed as tabs, menu buttons,
or links. Similar to the header, this text is typically consistent throughout web pages;
therefore, having inconsistent navigation on your website will only cause people to
become annoyed and confused. It's not necessary for web designers to treat the navigation
bar as a component of the header rather than as a stand-alone element. In fact, some
contend that keeping the two distinct improves accessibility because screen readers can
distinguish between the two elements more easily.

Main content:

A big area in the center that contains most of the unique content of a given webpage,
for example, the video you want to watch, or the main story you're reading, or the map
you want to view, or the news headlines, etc. This is the one part of the website that
definitely will vary from page to page!

Sidebar:

A sizable section in the middle that houses the majority of the webpage's original material,
such as the news headlines, the video you want to watch, the primary narrative you're
reading, the map you want to examine, etc. The one section of the website that will
undoubtedly change from page to page is this one!

Gujarat Technological University 12 Government Engineering College, Rajkot

Team Id: 418680

Footer:

a line that runs the length of the page and usually has contact information, copyright
warnings, or small print. It is a location for common information (such as the header), but
typically the content is neither essential or incidental to the page. Occasionally, the footer
serves an SEO function as well by offering links to widely-read material

CSS Selectors:

CSS selectors are used to select and style HTML elements. Some of the commonly used
CSS selectors include element selectors, class selectors, ID selectors, and attribute
selectors.

CSS Properties:

CSS properties are used to define the appearance of HTML elements. Some of the
commonly used CSS properties include background-color, color, font-family, font-
size, text-align, margin, padding, border, and width.

Responsive Web Design:

A kind of web design called responsive web design ensures that websites display well
across a variety of devices. Flexible layouts and CSS media queries are used to
accomplish this.

Accessibility:

Making a website accessible is crucial to ensuring that users with disabilities can navigate
and utilise it. This is accomplished by creating semantic, well-structured web pages that
are navigable with assistive technologies utilising HTML and CSS.

Gujarat Technological University 13 Government Engineering College, Rajkot

Team Id: 418680

Fig 4.2 CSS box model

Fig 4.3 Flex Box

CSS Flexbox:

CSS Another layout system that lets designers make responsive and adaptable layouts is called
Flexbox. One-dimensional layout systems that support rows or columns are offered by Flexbox.
With Flexbox, designers can simply modify content sizes, construct responsive and flexible
layouts, and align and distribute content along a single axis. I now know how to utilize Flexbox
to make intricate, adaptable, and eye-catching layouts.

Gujarat Technological University 14 Government Engineering College, Rajkot

Team Id: 418680

4.3 EXERCISE ON GIVEN FIGMA DESIGN USING HTML AND CSS

 first Figma webpage with HTML and CSS Standard format.

Gujarat Technological University 15 Government Engineering College, Rajkot

Team Id: 418680

Fig 4.4 Figma First design

Gujarat Technological University 16 Government Engineering College, Rajkot

Team Id: 418680

 According to second Figma design create webpage with HTML and CSS Standard

format.

Gujarat Technological University 17 Government Engineering College, Rajkot

Team Id: 418680

Gujarat Technological University 18 Government Engineering College, Rajkot

Team Id: 418680

Fig 4.4 Figma second design

Gujarat Technological University 19 Government Engineering College, Rajkot

Team Id: 418680

 According to third Figma design create webpage with HTML and CSS Standard
format.

Gujarat Technological University 20 Government Engineering College, Rajkot

Team Id: 418680

Gujarat Technological University 21 Government Engineering College, Rajkot

Team Id: 418680

Fig 4.5 Figma third design

Gujarat Technological University 22 Government Engineering College, Rajkot

Team Id: 418680

Fig 4.6 HTML Snippet for HireX

Fig 4.6 CSS Snippet for HireX

Gujarat Technological University 23 Government Engineering College, Rajkot

Team Id: 418680

5.TRAINING IN JAVASCRIPT

5.1 OVERVIEW OF JAVASCRIPT

JavaScript is a programming language that is commonly used in web development.

It is a high-level, dynamically typed, and interpreted language that is often used for
creating interactive web pages and user interfaces. JavaScript can be used to
manipulate the Document Object Model (DOM) of a web page, allowing developers
to dynamically modify the content, style, and behavior of a web page in response to
user actions and other events. JavaScript can also be used to create animations,
validate user input, and interact with web APIs. JavaScript can be used in a variety
of contexts, including front-end web development, backend web development, and
desktop and mobile application development. There are many popular JavaScript
frameworks and libraries, such as React, Angular, and Vue, that can be used to
streamline web development and simplify complex tasks.

5.2 CONCEPT OF JAVASCRIPT

I learned below concept in JavaScript:

 Data type and variable

 Different types of operators and operator precedence
 Mouse and keyboard event
 Condition statement (if/else and switch-case)
 Function and arrow function
 Array and its operation
 Object and its operation
 JS DOM manipulation

Gujarat Technological University 24 Government Engineering College, Rajkot

Team Id: 418680

5.3 EXERCISE ON JAVASCRIPT

 Dynamic table generator:

In dynamic table generator initial 2 x 2 table. Then click on plus button add row column
and click on minus button to remove row or column.

fig 5.1 Dynamic table generator

 All events table:

I'm practicing the most crucial JavaScript events depending on the mouse, keyboard,
and windows in this exercise. Both the MDN and w3school websites had an event list
that I could find. And comprehend how that function.

Gujarat Technological University 25 Government Engineering College, Rajkot

Team Id: 418680

Fig 5.2 All event practice table

 KUKU Cube:

A game called KUKU Cube helps players perceive cubes with less opacity. The cube's size
rose by one row and column when reduced opacity was clicked. The game ends when you
click on another cube. Additionaly the game ends when the timer goes off.

Gujarat Technological University 26 Government Engineering College, Rajkot

Team Id: 418680

Fig 5.3 KuKu Cube Game

 Tic Tac Toe:

A simple two-player game, tic tac toe is played on a 3 x 3 grid. Two players select "O" and
"X," respectively. Players must arrange their markers in order to create a continuous line of
three cells that runs vertically, horizontally, or diagonally.

Fig 5.4 Tic Tac Toe

Gujarat Technological University 27 Government Engineering College, Rajkot

Team Id: 418680

Fig 5.5 Winner ‘X’ or ‘O’ and Draw in Tic Tac Toe

Gujarat Technological University 28 Government Engineering College, Rajkot

Team Id: 418680

Fig 5.6 HTML and JavaScript Code for KUKU Cube

Gujarat Technological University 29 Government Engineering College, Rajkot

Team Id: 418680

6.NodeJS Introduction

6.1 NODEJS OVERVIEW

A server-side runtime environment for JavaScript called Node.js enables programmers

to execute JavaScript on the server. It offers a platform for creating scalable and fast
apps and is based on the Chrome V8 JavaScript engine.

With its extensive library of modules and packages, Node.js is an open-source tool that
helps developers create sophisticated applications rapidly and effectively. Installing and
using these modules and packages in Node.js applications is a simple process, and they
are accessible via Node Package Manager (NPM).

6.2 NODEJS CONCEPT

Node.js is event-driven, non-blocking, and asynchronous, which means that it can

handle multiple requests simultaneously and can process large amounts of data
efficiently without blocking the event loop.

1. Node.js Event Loop: By continuously scanning the event queue for new events and
carrying them out in a non-blocking fashion, the event loop is a fundamental idea in
Node.js that enables it to manage asynchronous tasks effectively.

2. Node.js Modules: A key idea of Node.js, modules enable developers to divide their
code into encapsulated, reusable components, which simplifies maintenance.

3. Call-backs - In Node.js, call-backs are a popular programming style that enables

non-blocking execution of asynchronous activities. When a function that carries out
an asynchronous operation receives a call-back function as a parameter, it is invoked
after the operation is finished.

4. Promises - A more modern feature to Node.js, promises offer a substitute for call-
backs when managing asynchronous tasks. Promises stand for a value that might not
be available right now but will be fulfilled eventually.

Gujarat Technological University 30 Government Engineering College, Rajkot

Team Id: 418680

 NodeJS Express Framework

Express.js is a popular web application framework for Node.js that simplifies the process
of building web applications and APIs. It provides a robust set of features for creating
server-side applications, including routing, middleware, templating, and more.

Express.js follows the Model-View-Controller (MVC) architecture, which allows

developers to separate their application logic into distinct layers, making it easier to maintain
and scale the application over time.

o Some of the key features of Express.js include:

1. Routing: Express.js provides a simple and flexible API for defining routes,
allowing developers to handle incoming HTTP requests and send responses to
the client.
2. Middleware: Express.js supports middleware functions, which can be used to
modify incoming requests or outgoing responses. This makes it easy to add
functionality such as authentication, logging, and error handling to your
application.
3. Templating: Express.js supports a variety of templating engines, such as EJS,
Handlebars, and Pug, which can be used to render dynamic HTML pages.
4. Error handling: Express.js provides a built-in error handling middleware that can
catch errors and return appropriate response to the developer.

In Nodejs Express framework I make a one exercise job application form and table grid
view using various technologies like HTML, EJS template, CSS, JavaScript, AJAX,
Nodejs, for backend I will use my SQL database and express framework and so many
libraries of NodeJS.

In job application form 7 section create and out of 7 section 2 section I will create a
dynamically and all select box and radio box value render from backend and when I
needed any change or added a value that time, I only add a value in database no needed
a change in code and value render in form and I will also make grid for this form.

1. Basic Info
2. Education Details
3. Work Experience
4. Languages
5. Technologies
Gujarat Technological University 31 Government Engineering College, Rajkot
Team Id: 418680

 NodeJS EJS Framework

EJS or Embedded JavaScript Templating is a templating engine used by Node.js. Template

engine helps to create an HTML template with minimal code. Also, it can inject data into an
HTML template on the client side and produce the final HTML. EJS is a simple templating
language that is used to generate HTML markup with plain JavaScript. It also helps to embed
JavaScript into HTML pages.

EJS is often used in Node.js web applications, but it can also be used with other server-side
frameworks and platforms. It's lightweight and easy to use, making it a popular choice for
developers who want a simple yet powerful templating solution.

o Some of the key features of Express.js include:

1. Embedded JavaScript: EJS allows you to embed JavaScript code directly within
your HTML templates, using <% %> tags to execute JavaScript code and <%= %>
tags to output the result of JavaScript expressions.

2. Dynamic Content: With EJS, you can easily generate dynamic content by including
JavaScript code to conditionally render elements, loop through data arrays, or
execute logic to determine the content of your templates.

3. Partial Views: EJS supports partial views, allowing you to break your views into
smaller, reusable components. This makes it easier to maintain and organize your
codebase, as you can include common components across multiple pages.

4. Customizable Syntax: EJS provides flexibility in customizing the syntax for

delimiters (the characters used to denote JavaScript code) according to your
preference or project requirements.

5. Integration with Node.js: EJS is commonly used with Node.js web applications, as
it integrates seamlessly with Express.js and other Node.js frameworks. It's easy to
set up and use within a Node.js environment.

6. Client-side Support: While EJS is primarily designed for server-side rendering, it

can also be used on the client-side with JavaScript frameworks like AngularJS or
Backbone.js, allowing for consistent templating across both server and client.

Gujarat Technological University 32 Government Engineering College, Rajkot

Team Id: 418680

6.3 EXERCISE OF NODEJS

 Create user details form using EJS and ExpressJS

For this exercise, I use ejs to develop a form that collects user data and saves it to a JSON
file. Next, get the data from the JSON file and display it in tabular form on the webpage. The
viewer can view information on a certain user by clicking the "view" button.

Fig 6.1 Express EJS form exercise

Gujarat Technological University 33 Government Engineering College, Rajkot

Team Id: 418680

 Pagination in node

Using pagination, a lot of data can be broken up into smaller, easier-to-manage chunks
that fit on a single page or screen. Pagination enhances the user experience by making it
easier for users to browse through data. Web applications frequently employ pagination.

Fig 6.2 Pagination on studentMaster table data

Fig 6.3 Pagination with ordered data

In above exercise I make a grid view of 10 record using ajax and also, I make a sorting
each column either ascending or descending order.

Gujarat Technological University 34 Government Engineering College, Rajkot

Team Id: 418680

 Searching in node

In order to create the finest searching capabilities in real time, we employ an AJAX fetch
API in conjunction with a node.js and EJS searching facility.

Fig 6.4 Searching

Fig 6.5 Searching with student id

Gujarat Technological University 35 Government Engineering College, Rajkot

Team Id: 418680

Fig 6.6 Searching with delimiters

I've used a delimiter and dynamic searching to search the data in the above figure. They
provide the greatest feature for the encounter.

 Month wise Attendance record

Fig 6.7 Attendance record group by month

In the exercise above, I used the student attendance record organised by month and added
pagination to make it simple to find the attendance of individual students.

Gujarat Technological University 36 Government Engineering College, Rajkot

Team Id: 418680

 Student Exam record

Fig 6.8 All student Exam record

Fig 6.9 One Student full result

In the example above, I used a join query to retrieve every student's outcome and show it in
tabular form. The user can examine the whole result for each student along with the subject
by clicking on examine Report.
Gujarat Technological University 37 Government Engineering College, Rajkot
Team Id: 418680

 Job Application Form

The form is a repository for user information. We display a variety of forms. Here, we create
a single employment application form that gathers user data such as name, contact
information, date of birth, address, and other basic information; education details such as
course name and percentage; knowledge of languages and technologies; work experience
details such as company details, salary, joining and leaving dates; references details such as
name and contact information; and preferences details such as desired job location, expected
salary, and all these things.

First, we create a basic form that gathers user data using HTML tags such as form, input, p,
table, tr, td, span, and many more. Next, we style the form using CSS.

I utilise two methods: the first involves sending a regular request and storing the data; the
second involves sending data to the backend, validating it, and storing it in a database using
an AJAX fetch API. I verify data from the front end and the back end simultaneously. In order
to determine gender, course name, preferred city, languages, technologies, etc., I employ
dynamically generated radio, checkboxes, and dropdown combos.

Then, we employed JavaScript and Express on the backend side. The entire form with all of
the combo boxes is first displayed using the GET API. After the user submits the form, all of
the user data is collected using the POST API. Next, a validate function is created with the
aid of middleware to verify that the input data is correct and that the error occurred. If the
data is correct, it is then stored in the database. The user can then amend the form data and
resubmit it if they entered any inaccurate or wrong information. The user can then choose to
remove one or more records if they would like to remove a specific record.

Gujarat Technological University 38 Government Engineering College, Rajkot

Team Id: 418680

Gujarat Technological University 39 Government Engineering College, Rajkot

Team Id: 418680

Gujarat Technological University 40 Government Engineering College, Rajkot

Team Id: 418680

Fig 6.10 Job Application Form

I construct a job application form; to move on to the next area, click the next button. As soon as
I hit the submit button, the frontend validation is checked to see if there are any errors. If there
are, the submit event is considered false and an error is displayed on the website.

Fig 6.11 Registered User

I created a grid view of the job application form in Figure 3.8.6.2 Express Framework. When I
clicked the update button, I was able to see employee data and make changes to their information.

Gujarat Technological University 41 Government Engineering College, Rajkot

Team Id: 418680

Fig 6.12 Backend code for Pagination of student result

Fig 6.13 Backend code for next and last page of Pagination

Gujarat Technological University 42 Government Engineering College, Rajkot

Team Id: 418680

7. APPLICATION USING NODE.JS, EJS, EXPRESS, CSS,

I combined all of my internship exercises into one workout for this one. The user must log
in to this exercise to view mine. Once the person has authenticated, they can view my
exercise.
I created the registration page so that new users can sign up. Following registration, you can
confirm that email. I've only included one link for email verification; if the user copies or
clicks it, the email will be verified. The user can log in to exercise and view all exercises
after verification. I enumerate every activity and simply click to view the actions.

Fig 7.1 Home Page

Fig 7.2 Registration Page Active Account

Gujarat Technological University 43 Government Engineering College, Rajkot

Team Id: 418680

Fig 7.3 Login Page

Fig 7.4 Forgot password page

Fig 7.5 Password Change window

Gujarat Technological University 44 Government Engineering College, Rajkot

Team Id: 418680

Fig 7.6 Main All Exercise page

Fig 7.7 Server File of Application

Gujarat Technological University 45 Government Engineering College, Rajkot

Team Id: 418680

Fig 7.8 MVC Folder Structure

Gujarat Technological University 46 Government Engineering College, Rajkot

Team Id: 418680

8. TRAINING ON Git & GitHub

9.1 What is Git?

Developers can monitor changes to their code over time with the Git version control
system. Git allows developers to work together, make several versions of their code, and
quickly undo changes as needed. Because Git has a decentralized architecture, each
developer has a copy of the repository. Developers can work alone and then combine their
modifications later thanks to this.

9.2 What is GitHub?

GitHub is an online platform that offers Git repository hosting and collaboration tools.
Developers can work together, store their code in the cloud, and monitor problems and
issues with GitHub.

Additionally, GitHub offers a number of tools that make it simple to handle pull requests,
review and integrate changes, and automate processes. With millions of users worldwide,
GitHub has established itself as the main hub for the production of open-source software.

9.3 How to use Git and GitHub?

Installing Git on your PC and setting up a GitHub account are prerequisites for using Git
and GitHub. After completing that, you can push the newly created Git repository to
GitHub from your local computer.

After that, you can modify your code and push it to GitHub by using Git commands like
git add, git commit, and git push. In addition, you may create and manage issues, examine
pull requests, and communicate with other engineers via the GitHub web interface.

GitHub and Git are crucial resources for contemporary software development. They give
developers strong collaboration and version control tools so they can work more
productively and efficiently. Developers may increase their productivity and work with
others to create better software by learning how to utilize GitHub and Git.

Gujarat Technological University 47 Government Engineering College, Rajkot

Team Id: 418680

9. CONCLUSION

9.1 OVERALL ANALYSIS OF INTERNSHIP

To sum up, my internship helped me much in the development of my technical abilities and
comprehension of the software development lifecycle. I worked with a variety of web
technologies at the company, including HTML, CSS, JavaScript, Express, and Node.js,
which helped me learn and gain expertise in web development.

I got the chance to collaborate on design choices, feature implementation, testing, and
deployment with a group of engineers, designers, and product managers.

I discovered throughout my internship how crucial teamwork, communication, and time

management are to the software development process. In addition, I learned a lot about the
Agile technique, which is frequently applied in software development teams, and how to
collaborate well with others in a team to produce high-quality work on schedule.

All things considered, my internship has been a great starting point for my future in software
development, particularly web development. It has given me the information and abilities I
need to keep developing as a developer and has enabled me to obtain practical experience
in a quick-paced, dynamic industry. I am appreciative that I had the chance to work with
such a gifted and committed group of people, and I know that the information and abilities
I acquired during my internship will be helpful for my future professional aspirations.

9.2 PROBLEMS ENCOUNTERED

In the beginning I was faced problems/issues and also faced issues in
between project, but the help of external guide as well as internal guide
to solve my problem

9.3 DATES OF CONTINUOUS EVALUATION

 CE-I : (16/02/2024)
 CE-II : (17/03/2024)
 CE-III : (20/04/2024)

Gujarat Technological University 48 Government Engineering College, Rajkot

Team Id: 418680

REFRENCES

 https://www.w3schools.com/html/default.asp
 https://nodejs.org/
 https://developer.mozilla.org/
 https://mdn.org

Gujarat Technological University 49 Government Engineering College, Rajkot

Team Id: 418680

APPENDIX 1
(Weekly Dairy)

Gujarat Technological University 50 Government Engineering College, Rajkot

Team Id: 418680

APPENDIX 2
(Feedback Form by
Industry expert)

Gujarat Technological University 51 Government Engineering College, Rajkot