DEDICATION

I would like to dedicate my Industrial training report to GOD almighty who has
brought me this far and to my family for their continual prayers and support.

1
 ACKNOWLEDGEMENT

I wish to register my profound gratitude to GOD almighty for his guidance and
grace throughout my SIWES program. I would like to extend special regards to
my amazing family who have been a great source of strength, may GOD
continually bless you.

I am also grateful to my Industrial based supervisor who guided me through my

industrial training.

In addition my special gratitude goes to my lecturers and my co-workers for their

consistent support, may the Lord continually bless you.

2
 ABSTRACT

This exercise involved a continual learning and project building cycle which
lasted for six months, where experience was gathered. Hence, this report contains
a comprehensive summary of all activities undergon

3
 CHAPTER ONE

1.1 INTRODUCTION

SIWES was founded in 1973 by ITF (Industrial Training Funds) to address the
problem of tertiary institution graduates' lack of appropriate skills for
employment in Nigerian industries. The Students' Industrial Work Experience
Scheme (SIWES) was founded to be a skill training programme to help expose
and prepare students of universities, Polytechnics and colleges of education for
the industrial work situation to be met after graduation.

This system facilitates the transfer from the classroom to the workplace and aids
in the application of knowledge. The program allows students to become
acquainted with and exposed to the experience required in handling and operating
equipment and machinery that are typically not available at their schools.

Prior to the establishment of this scheme, there was a rising concern and trend
among industrialists that graduates from higher education institutions lacked
appropriate practical experience for employment. Students who entered Nigerian
universities to study science and technology were not previously trained in the
practical aspects of their chosen fields. As a result of their lack of work
experience, they had difficulty finding work.

As a result, employers believed that theoretical education in higher education was

unresponsive to the needs of labour employers. Thousands of Nigerians faced this
difficulty till 1973. The fund's main motivation for establishing and designing the
scheme in 1973/74 was launched against this context.

The ITF (Industrial Training Fund) organization decided to aid all interested
Nigerian students and created the SIWES program. The federal government
officially approved and presented it in 1974. During its early years, the scheme
was entirely supported by the ITF, but as the financial commitment became too
4
much for the fund, it withdrew in 1978. The National Universities Commission
(NUC) and the National Board for Technical Education (NBTE) were given
control of the scheme by the federal government in 1979. The federal government
handed over supervision and implementation of the scheme to ITF in November
1984. It was taken over by the Industrial Training Fund (ITF) in July 1985, with
the federal government bearing entire responsibility for funding.

1.2 OBJECTIVES OF SIWES

The Industrial Training Fund’s Policy Document No. 1 of 1973 which established
SIWES outlined the objectives of the scheme as:

 Provide an avenue for students in Institutions of higher learning to acquire

industrial skills and experience in their respective courses of study.

 Prepare students for the Industrial Work situation they are likely to
experience after graduation.

 Expose students to work methods and techniques of handling equipment

and machinery that may not be available in their Institutions.

 Make the transition from school to the world of work easier; and enhance
students’ networks for later job placements.

 Provide students with an opportunity to apply their knowledge to real work

situations, thereby bridging the gap between theory and practice; and

 Enlist and strengthen Employers’ involvement in the entire educational

process; thereby preparing the students for employment in Industry and
Commerce.

5
 CHAPTER THREE

INDUSTRIAL TRAINING

I.0 WEB DEVELOPMENT

I was assigned to the web development department of the organization
throughout the duration of my industrial training. I got introduced to
different web technologies and best practices to follow while developing
web apps and websites. I also had the opportunity of working on some
projects during this period.
I was introduced to both frontend and backend web technologies
alongside the git collaboration tool. For the frontend we learnt about
HTML, CSS and JAVASCRIPT while we used node.js for the backend.

I.1 DEFINITION OF TERMS

The following are web development terms that were frequently during the
course of my industrial training program:

3.1.0 Web development, Web applications, and Websites

Web development is the process involved in the creation of websites and

web applications for the internet (World Wide Web). A website is a
collection of web pages and related resource which can be accessed under a
single domain name. A domain name is the unique address of a website on
the internet for example www.google.com is an example of a domain
name. Websites are usually not created for interactive purposes and are
static; this means that their contents never change. This brought about the
development of Web applications, also called web apps, Are programs
that allow users to perform actions online. Many businesses use these

6
 programs to communicate with customers, sell products and improve work
processes. The main difference between a website and a web application is
that a website provides users with visuals and text content that can only be
read but not affected in any way while web applications are presents
contents that can be both viewed and manipulated by the user.

3.1.1 WEB DEVELOPER

A web developer is an individual who is concerned with the development

of a website or web application. A web developer can be categorized into
any of the below mentioned categories

 Frontend developer: A front-end developer architects and develops

websites and applications using web technologies such as
HTML, CSS, DOM, and JavaScript, which runs on the Web, they are
concerned with developing the part of the application that the end user
gets to interface with (The visuals which are made visible to the users)
and work alongside the user experience designers to ensure that the end
user has a good experience while using the site or application .

In addition to the above mentioned technologies front-end developers

also need to be familiar with frameworks like Bootstrap, Foundation,
Backbone, AngularJS, ReactJs and EmberJS, which ensure great-looking
content no matter the device, and libraries like jQuery and LESS, which
package code into a more useful, time-saving form. 

 Backend developer: A backend developer is an expert who builds and

maintains the application logic of a website or application. These
developers are concerned with data storage, security, and other server-side
functions that are not made visible to the end user.

7
I.2 FRONTEND
The front-end of a website is the part that users interact with. Everything
that you see when you’re navigating around the Internet, from fonts and
colours to dropdown menus and sliders, is known as the frontend of a
website or web application.

Below is a list of the technologies required to build the front-end

I.2.1 HTML
HTML stands for HyperText Markup Language. It is a standard
markup language for web page creation. It defines the structure of the
contents on a webpage.

HTML consists of a series of HTML elements, consisting of a set of

tags and attributes. HTML elements are the building blocks of a
webpage. A tag tells the web browser where an element begins and
ends, whereas an attribute describes the characteristics of an element.

I.2.2 THE ANATOMY OF AN HTML ELEMENT

The main parts of our element are as follows:

1. The opening tag: This consists of the name of the element (in this case, p),
wrapped in opening and closing angle brackets. This states where the
element begins or starts to take effect — in this case where the paragraph
begins.

8
2. The closing tag: This is the same as the opening tag, except that it includes
a forward slash before the element name. This states where the element
ends — in this case where the paragraph ends. Failing to add a closing tag
is one of the standard beginner errors and can lead to strange results.
3. The content: This is the content of the element, which in this case, is just
text.
4. The element: The opening tag, the closing tag, and the content together
comprise the element.

Elements can also have attributes, an element with an attribute is illustrated

below:

Attributes contain extra information about the element that you don't want to
appear in the actual content. Here, class is the attribute name and editor-note is
the attribute value. The class attribute allows you to give the element a non-
unique identifier that can be used to target it (and any other elements with the
same class value) with style information and other things. Some attributes
have no value, such as required.

I.2.3 VOID ELEMENTS

Some elements have no content and are called void elements, an example

of a void element is given below:

9
 Above is an image tag it contains two attributes, but there is no
closing </img> tag and no inner content. This is because an image element
doesn't wrap content to affect it. Its purpose is to embed an image in the
HTML page in the place it appears.

I.2.4 ANATOMY OF AN HTML DOCUMENT

 <!DOCTYPE html> — doctype. It is a required preamble. In the mists of

time, when HTML was young (around 1991/92), doctypes were meant to
10
 act as links to a set of rules that the HTML page had to follow to be
considered good HTML, which could mean automatic error checking and
other useful things. However, these days, they don't do much and are
basically just needed to make sure your document behaves correctly. That's
all you need to know for now.
 <html></html> — the <html> element. This element wraps all the content
on the entire page and is sometimes known as the root element. It also
includes the lang attribute, setting the primary language of the document.
 <head></head> — the <head> element. This element acts as a container
for all the stuff you want to include on the HTML page that isn't the
content you are showing to your page's viewers. This includes things
like keywords and a page description that you want to appear in search
results, CSS to style our content, character set declarations, and more.
 <meta charset="utf-8"> — This element sets the character set your
document should use to UTF-8 which includes most characters from the
vast majority of written languages. Essentially, it can now handle any
textual content you might put on it. There is no reason not to set this, and it
can help avoid some problems later on.
 <meta name="viewport" content="width=device-width"> — This viewport
element ensures the page renders at the width of viewport, preventing
mobile browsers from rendering pages wider than the viewport and then
shrinking them down.
 <title></title> — the <title> element. This sets the title of your page, which
is the title that appears in the browser tab the page is loaded in. It is also
used to describe the page when you bookmark/favorite it.
 <body></body> — the <body> element. This contains all the content that
you want to show to web users when they visit your page, whether that's
text, images, videos, games, playable audio tracks, or whatever else.

11
I.2.5 CSS

CSS was developed by W3C (World Wide Web Consortium ) in 1996

for a rather simple reason. HTML element was not designed to have
tags that would help format the page. You were only supposed to write
the markup for the web page.

CSS stands for Cascading Style Sheets language and is used to stylize
elements written in a markup language such as HTML. It separates the
content from the visual representation of the site. The relation between
HTML and CSS is strongly tied together since HTML is the very
foundation of a site and CSS is all of the aesthetics of an entire website.

I.2.6 HOW DOES CSS WORK

CSS uses a simple English based syntax with a set of rules that govern
it. Like we’ve mentioned before, HTML was never intended to use style
elements, only the markup of the page. It was created to merely describe
the content. For example: <p>this is a paragraph</p>.The syntax for
styling an element or elements in css includes a selector and a
declaration block.
You select an element and then declare what you want to do with it.
The selector points to the HTML elements you want to style. The
declaration block contains one or more declarations separated by
semicolons.

Each declaration includes a CSS property name and a value, separated

by a colon. A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.

12
 Below is an example illustrating styling in css

In the example, all <p> elements will be center-aligned, be 16x wide

and pink.

I.2.7 INTERNAL, EXTERNAL AND INLINE CSS STYLES.

CSS rules can be applied to the html file of a website in three different
ways:
 INLINE
Inline CSS relates to a specific HTML tag, using a style attribute with a
CSS rule to style a particular page element. They’re useful for quick and
permanent changes but are less flexible than external and internal
stylesheets, as each inline style you create must be edited separately if
you’re making a design change.
Below is an example of inline styling in css

13
 INTERNAL
An internal style sheet holds CSS rules for the page in the head section of
the HTML file. The rules only apply to that page, but you can configure
CSS classes and IDs to style multiple elements in the page code. A single
change to the CSS rule will apply to all tagged page elements.
Below is an example of internal styling in CSS

14
 EXTERNAL CSS
An external stylesheet is a standalone .css file linked from a web page.
Using external stylesheets, you can apply rules to multiple web pages. If
you ever need to make widespread changes to your website design, a single
change in the stylesheet can be applied to all linked pages, saving lots of
time and effort.
Below is an example of internal styling in CSS

15
I.2.8 JAVASCRIPT

JavaScript is a lightweight programming language that web developers

commonly used to create more dynamic interactions when developing web
pages, applications, servers, and or even games.
Developers generally use JavaScript alongside HTML and CSS The
scripting language works well with CSS in formatting HTML elements.
However, JavaScript still maintains user interaction, something that CSS
cannot do by itself.

The initial versions of the scripting language were for internal use only.
After Netscape submitted it to ECMA International as a standard
specification for web browsers, JavaScript pioneered the release of
ECMAScript.
It was a general-purpose scripting language to ensure web pages’
interoperability across different browsers and devices.

16
 JavaScript has continued to grow alongside new browsers like Mozilla
Firefox and Google Chrome since then. The latter even started developing
the first modern JavaScript engine, called V8, which compiles bytecode
into native machine code.
Today, JavaScript has plenty of frameworks and libraries to simplify
complex projects, such as AngularJS, jQuery, and ReactJS.

JavaScript can be placed on the webpage the same way the CSS is placed
on the web page except it is written differently. See the following
illustrations for linking JavaScript to the HTML document.

I. INLINE-SCRIPTING

II. INTERNAL SCRIPTING

17
III. EXTERNAL SCRIPTING

18
 III.3 BACKEND

. The back- end of a website consists of the server, application logic and database.

Below is a list of the backend concepts I learnt during my SIWES programme.

III.3.0 NODE.JS

Node.js is a cross-platform, open-source server environment that can run

on Windows, Linux, Unix, macOS, and more. Node.js is a back-
end JavaScript runtime environment which runs on the V8 JavaScript Engine,
and executes JavaScript code outside a web browser.

Node.js lets developers use JavaScript to write command line tools and
for server-side scripting. The functionality of running scripts server-side
produces dynamic web page content before the page is sent to the user's web
browser. Consequently, Node.js represents a "JavaScript everywhere"
paradigm, unifying web-application development around a single
programming language, rather than different languages for server-side and
client-side scripts.

Node.js has an event-driven architecture capable of asynchronous I/O. These

design choices aim to optimize throughput and scalability in web applications
with many input/output operations, as well as for real-time Web applications
(e.g., real-time communication programs and browser games).

III.3.1 WEB SERVERS

Web server is a computer where the web content is stored. Basically web
server is used to host the web sites but there exists other web servers also such
as gaming, storage, FTP, email etc.

19
III.3.2 EXPRESS.JS
Express is a minimal and flexible Node.js web application framework that
provides a robust set of features to develop web and mobile applications. It
facilitates the rapid development of Node based Web applications. Following
are some of the core features of Express framework −

 Allows to set up middleware to respond to HTTP Requests.

 Defines a routing table which is used to perform different actions based
on HTTP Method and URL.
 Allows to dynamically render HTML Pages based on passing
arguments to templates.

III.3.3 MIDDLEWARES
Middleware functions are functions that have access to the request object
(req), the response object (res), and the next middleware function in the
application’s request-response cycle. These functions are used to modify req
(request object) and res (response object) objects for tasks like parsing request
bodies, adding response headers and more.

 CRUD OPERATIONS

CRUD (create, read, update and delete) refers to the four basic operations a
software application should be able to perform.

In such an application end users must be able to create data and save data to
the storage or database, access data (read or retrieve data from the database),
update or edit data within the storage or database and delete data from
storage or database.

Each letter in the CRUD acronym has a corresponding HTTP request method.

20
 CRUD OPERATION HTTP REQUEST METHOD

Create POST
Read GET
Update PUT or PATCH
Delete DELETE

Below are snippet of codes that illustrate CRUD operations in mongodb using
mongoose

 CREATE

This adds new data to the mongodb database using the create keyword.

 READ

This retrieves data from mongodb using the find keyword.

21
 DELETE

This deletes data from the mongodb database using the

findOneAndDelete keyword

 UPDATE

22
 This updates data in the mongodb database using the
findOneAndUpdate keyword.

III.3.4 TEMPLATE ENGINES

A template engine enables you to use static template files in your
application. At runtime, the template engine replaces variables in a
template file with actual values, and transforms the template into an HTML
file sent to the client.

The following are examples of template engines:

 Pug
 Blade
 HandlebarsJs
 Jade
 Ejs

The code below illustrates how to use the EJS template engine

23
III.3.5 DATABASE

A Database, also called electronic database, any collection of data,

or information, that is specially organized for rapid search and retrieval by
a computer. Databases are structured to facilitate the storage, retrieval,
modification, and deletion of data in conjunction with various data-processing
operations.

24
3.4.0 COLLABORATION TECHNOLOGIES
While working on projects we had to learn the soft skill of communication and
got introduced to technologies like Git, Github and medium.

3.4.1 GIT AND GITHUB

Git is a version control system that you download onto your computer.
It is essential that you use Git if you want to collaborate with other
developers. Version control is a system that records changes to a file or
set of files over time so that you can recall specific versions later.

GITHUB is a product that allows you to host your Git projects on a

remote server somewhere (or in other words, in the cloud).

3.4.2 MEDIUM

Medium is a social publishing platform that is open to all, as a

developer medium serves as a platform where I get to talk about my
current learnings, projects I am working on and project I have worked
on and get feedbacks from other developers which helps me understand
the way others think, best problem solving strategies and what I can do
to make my project even better, This is why I consider medium as a
very important collaboration tool.

25
 CHAPTER FOUR

4.0 CHALLENGES ENCOUNTERED

The main problem I encountered was transportation seeing that the internship was
unpaid and my house was quite far from my IT placement.

4.1 RECOMMENDATIONS

26
27
28