DECLARATION
I, MA’ARUF MUHAMMAD hereby declare that this SIWES Report has been carried out
by me under the supervision of (Mal. MUHAMMAD Aliyu Kufena). It has not been
presented for award of any degree in any institution. All sources of information are
specifically acknowledged by means of reference.
……………………………………….. ……………………….
Signature Date
II
CERTIFICATION
This SIWES Report by MA’ARUF MUHAMMAD meets the requirements governing the
award of the degree of Bachelor of Science in computer science and is approved for its
contribution to knowledge and literary presentation.
-------------------------------------------------- ---------------------
Mal. MUHAMMAD, Aliyu Kufena Date
SIWES Supervisor
-------------------------------------------------- ---------------------
Dr. Mrs. Amina Hassan Abubakar Date
Dept. SIWES Coordinator
--------------------------------------------------- -----------------------
Dr. Muhammad Abdulkarim Date
Head of Department
III
DEDICATION
To my parents, I dedicate this piece of work to you for the moral and financial support,
advice and encouragement. This journey could have been tough without you, may ALLAH
(S W T) bless and reward you with Jannatul Firdaus as your final abode.
IV
ACKNOWLEDGMENT
All praises be to the almighty ALLAH for all the blessings in my life, and seeing me
through the SIWES, and witnessing the successful completion of this SIWES program,
despite the recent inflation and security challenges. I express my sincere gratitude to my
family and remain indebted to my beloved parents for their financial and parental support.
Furthermore, I am truly grateful to my colleagues/friends for all the contribution they have
made to my academic success I am forever indebted to them, also this acknowledgment
will not be completed without expressing my sincere gratitude to my industrial-based
supervisors Mal Salisu Aminu and Abdussalam Abdurrashid for their guidance, kindness
and friendly attitude and all other staff for their maximum support and consideration.
V
ABSTRACT
This report explores the fascinating realms of web development, unraveling the creative
design elements (frontend) and the technical backbone(backend). Drawing on experiences
at ANWAR IT HUB, it delves into crafting user-friendly interfaces and the behind-the-
scenes coding that makes the website ticks. Discovering the challenges faced and how
ANWAR IT HUB contributed to this dual skillset journey in the world of web development.
VI
CHAPTER ONE: Introduction
1.1 Background of ITF
ITF which stands for “INDUSTRIAL TRAINING FUND” was established in 1971, the
Industrial Training Fund has operated consistently within the context of its enabling laws
Decree 47 of 1971 as Amended in the 2011 ITF ACT. In the four decades of its existence,
the ITF has not only raised training consciousness in the economy, but has also helped in
generating a corps of skilled indigenous manpower which has been managing various
sectors of the national economy(ITF SIWES PORTAL).
1.2 Historical Background of SIWES
SIWES stands for "Students Industrial Work Experience Scheme." It is a structured
training program designed to expose students in tertiary institutions to practical work
experiences in their chosen fields of study. SIWES is a valuable component of many
academic curricula, particularly in fields such as engineering, science, technology,
agriculture, and related disciplines.
It is against this background that the Industrial Training Fund (ITF) initiated, designed
and introduced SIWES Scheme in 1973 to acquaint Students with the skills of handling
Industrial equipment and machinery.
1.3 Objectives of the SIWES
1. The program prepares the students for the real-life situations they would face in the
career world.
2. Provides an avenue for students to acquire industrial skills for experience during their
course of study.
3. Exposes students to work methods and techniques that may not be available
during their course of study.
4. Bridging the gap between theory and practice by providing an environment to apply
knowledge learned in school to real work situations.
5
CHAPTER TWO: FRONT-END DEVELOPMENT.
2.1 Introduction:
Frontend development focuses creating the user interface and client-side functionality of
web application. In this chapter, I will delve into two key technologies that I learned for
frontend development: JavaScript and [Link].
2.2 Some Basic Definitions And Explanation of Terms/Concepts:
a. JavaScript
JavaScript is a dynamic programming language which is one the backbones of frontend
development, providing the interactivity and functionality that users experience in web
application (Sebhastian, N., 2023). the key concepts you need to know in JavaScript are:
I. Variables:
in JavaScript, variables are containers for storing data values. They are created using
the var, let, or const keyword, followed by a variable name. Variables can hold
various types of data, and their values can change during the execution of the program.
Figure 2.1 shows an example of a variable created with (var, let and const)
Figure 2.1: Variables
II. Data Type:
JavaScript is loosely-typed language, meaning variables can hold values of any
type without explicitly specifying the type. The main data types are namely:
i. Primitive Data Type: (String, Number, Boolean, Undefined, Null, Symbol).
ii. Object Data Type: (Object, Function, Array).
5
CHAPTER THREE: BACK-END DEVELOPMENT.
3.1 Introduction:
Back-end development also known server-side development, is like the engine that powers
web applications, managing server-side logic, databases and communication with the
frontend. In this chapter we will explore the intricacies of backend development, focusing
on the technologies of [Link] and [Link].
3.2 Some Basic Definitions And Explanation Of Terms/Concepts:
a. Node Js
[Link] is a server-side runtime environment, it was built on top on JavaScript compiler
“V8” that runs on chrome browser. [Link] follows an event-driven architecture and used
a non-blocking, asynchronous I/O model, making it well-suited for building concurrent
requests and building real-time application (Copes, F., 2022). Some aspect we’re going to
discuss on [Link]:
I. Event-Driven Architecture:
[Link] operates on an even-driven, non-blocking architecture. This means that it
Excels at handling multiple connections simultaneously without resorting to the creation
of new threads for each request. The event loop, a cornerstone of [Link] ensures
efficient and asynchronous execution of I/O operations, leading to enhanced scalability
and performance in web applications (Copes, F., 2022).
II. NPM (Node Package Manager):
[Link] has a robust Node Package Manager, which is an integral component of [Link]
ecosystem. Serving as a comprehensive package manager, npm facilitates the
installation, sharing and management of dependencies within the [Link] projects. This
vast repository of open-source packages empowers developers to seamlessly integrate
external libraries and frameworks into their application, fostering a collaborative and
modular development environment (Copes, F., 2022).
20
TABLE OF FIGURES
Figure 1.1 : Anwar I.T Hub Organizational Chart......................................................4
Figure 2.1 : Variables..................................................................................................5
Figure 2 .2: Function Declaration...............................................................................6
Figure 2.3 : Function Expression................................................................................6
Figure 2.4 : Object Literal...........................................................................................7
Figure 2.5 : Object Constructor...................................................................................7
Figure 2.6 : If Statement.............................................................................................8
Figure 2.7 : else Clause...............................................................................................8
Figure 2.8 : Ternary Operator.....................................................................................9
Figure 2.9 : Switch Statement.....................................................................................9
Figure 2.10 : HTML DOM Representation..............................................................10
Figure 2.11 : Component Header..............................................................................11
Figure 2.12 : Virtual DOM.......................................................................................12
Figure 2.13 : Weather App........................................................................................15
Figure 2.14 : Zaria Weather......................................................................................15
Figure 2.15 : Sunny...................................................................................................16
Figure 2.16 : Home Page...........................................................................................17
Figure 2.17 : Detail Page...........................................................................................17
Figure 2.18 : Deleted Action...........................................................................................18
Figure 2.19 : New Blogs...........................................................................................18
Figure 2.20 : Error Message......................................................................................19
Figure 3.1 : Express App...........................................................................................21
Figure 3.2 : HTTP Methods......................................................................................22
Figure 3.3 : Login Page.............................................................................................25
Figure 3.4 : Login Error............................................................................................26
Figure 3.5 : Sign up Error.........................................................................................26
Figure 3.6 : Home Page.............................................................................................27
Figure 3.7 : Workouts Details...................................................................................27
Figure 3.8 : Workout Delete.....................................................................................28
VIII
