this is my first SIWES report on web development, held at ABU-TECH IT HUB birnin kebbi, and im student of federal university birnin kebbi. computer science department

1. i
TECHNICAL REPORT
ON
STUDENT INDUSTRIAL WORK EXPERIENCE SCHEME (SIWES)
UNDERTAKEN AT
ABU-TECH HUB CENTER, BIRNIN KEBBI
SUBMITTED TO THE DEPARTMENT OF COMPUTER SCIENCE,
FACULTY OF SCIENCES, FEDERAL UNIVERSITY, BIRNIN KEBBI.
BY
ISAH, MUSTAPHA
MATRIC. NO: 1910204043

2. ii
CERTIFICATION
This is to certify that Isah Mustapha with matriculation number 1910204043 of the
Department of Computer Science, Federal University Birnin Kebbi (FUBK), has
completed his two months industrial training at ABU-TECH HUB CENTER, and this
report covers the experience by the student during his two months Student Industrial
Work Experience (SIWES).
……………………………. ……….………………………………
Student’s Signature/Date SIWES Coordinator’s Sign
…………………………… ………………………………………
Supervisor’s Signature/Date H.O.D Signature/Date

3. iii
DEDICATION
To Almighty Allah, my parents, brothers, sisters and family

4. iv
ACKNOWLEDGEMENTS
All praises are to Allah, the creator of the universe, my the peace and blessing of Allah
be upon His messenger, Muhammad (SAW), family, companions and those who follow
the right path up to the last day. I thank Allah for given me the opportunity and strength
in conducting this technical report.
My sincere gratitude and appreciation goes to my SIWES supervisor Abubakar
Muhammad Hashim for his imminence help during the SIWES for his thorough
supervision and useful advice which helped and also contributed to the success of the
SIWES program. May the almighty God make his days on Earth longer to reap the fruit
of their labour to the fullest.

5. v
TABLE OF CONTENTS
Title Pages
Title page............................................................................……...............i
Certification......................................................................…….................ii
Dedication...................................................................……......................iii
Acknowledgements.......................................................……....................iv
Table of contents..............................................………..............................v
CHAPTER ONE
1.0. Introduction of SIWES .......................................................................1
1.1. Aim of SIWES.............................................……...………………....1
1.2. Objectives of SIWES.............………………........……….................2
CHAPTER TWO
2.0. Introduction to Web Development.......................……….................3
2.1 Web Development.......................………........………………….......3
2.2 Types of Web Development.......................………......……….........6
CHAPTER THREE
3.0. Knowledge Gained During the SIWES........….……………...........18
CHAPTER FOUR
4.0. Conclusion...............................…....……...........................................19

6. vi

7. 1
CHAPTER ONE
1.0 Introduction
Student Industrial Work Experience Scheme (SIWES) is a special program designed to
expose and prepare students of higher institutions of learning on practical aspect of
their profession. Before the establishment of SIWES, there was a growing concern
among industrialist that graduates of institutions of higher learning lack adequate
practical experience suitable for employment. Thus, employers are of the opinion that
theory-oriented system of education going on in higher institutions was not responsive
to their needs. It is against this background that the rationale for initiating and
designing the scheme was hinged. SIWES was established by Industrial Training Fund
(ITF) in 1973 to solve the problem of lack of adequate practical skills preparatory for
employment in industries by Nigerian graduate of tertiary institution. The scheme
exposes students to industry based skills necessary for a smooth transition from the
classroom to the world of work. It affords students of tertiary institutions the
opportunity to familiarize and exposed them to the needed experience in handling
machinery and equipment which were usually not available in the education institution.
Participation in SIWES has become per-requisite for the award of Diploma NCE, HND
and Degree certificates in some discipline in most Nigerian Institutions of higher
learning in accordance with the education policy of the government.
1.1 Aim and Objectives
Students thinking about what characterizes a meaningful technical report and provide
some hints and tips that, if implemented, have the potential to improve the quality of a
technical report produced by them.

8. 2
1.2 Objectives of SIWES
The Student Industrial Work Experience Scheme (SIWES) is a program that is
designed to breach the gap between theoretical experience and practical experience
with the following objectives:
1. To provide an avenue for students in institutions of higher learning to acquire
industrial skills and experience in their course of study.
2. To satisfy accreditation requirements set by Nigeria Universities Commission
(NUC).
3. To make transition from university to industry for graduates easy.
4. To enlist and strengthen industries involvement in university education.
5. To enable students asses their interest and suitability of their chosen profession.
6. To enable university educators assess the effectiveness of their curriculum and make
modifications if found necessary
7. To provide access to equipment and other facilities that may not be available in the
university laboratory and workshop.
8. To provide students with the opportunity to see the real world of their discipline and
consequently, breach the gap between the class room and the real work situation.
9. To familiarize students with typical environments in which they are likely to
function professionally after graduation.

9. 3
CHAPTER TWO
2.0 INTRODUCTION
2.1 Web Development
Web development has undergone significant advancements in recent years, driven by
the demand for highly interactive and user-friendly web applications. The shift towards
mobile devices, responsive design, and the rise of progressive web applications
(PWAs) have shaped the web development landscape.
Web developer is one of the most interesting career paths for a computer scientist,
because it combines analytical and technical skills with creative design and
development. Web developers work with professionals in IT, sales and marketing, and
other departments to build websites that attract and keep customers, contributing to a
business’s sales growth or a government agency’s effectiveness. Websites are so
crucial to a company’s success that the U.S. Bureau of Labor Statistics (BLS) projects
the demand for web developers to grow 8% between 2019 and 2029.
There are three types of web development roles: developers who specialize in the user
interface (“FRONT-END”), those who write the underlying code for running all
website operations (“BACK-END”), and those who manage all aspects of a website
(“FULL STACK”). Each type focuses on a different area of web development, but they
all have one thing in common: CODING. A bachelor’s in computer science is a great
way to learn the programming skills required for a web development career.
2.1.1 Web developer
A web developer is a professional who specializes in building web applications and
websites. They are responsible for the design, development, and maintenance of the
front-end and/or back-end components of a web application. Web developers typically

10. 4
possess a combination of technical skills, programming knowledge, and problem-
solving abilities.
Web developers often use various tools and technologies to streamline their workflow,
collaborate with team members, and ensure the quality of their code. These may
include code editors (e.g., Visual Studio Code, Sublime Text), version control systems
(e.g., Git, GitHub), package managers (e.g., npm, Yarn), and testing frameworks (e.g.,
Jest, PHPUnit).
Continuous learning and staying updated with the latest web development trends and
technologies are essential for web developers to stay competitive and deliver high-
quality applications. They may also specialize in specific frameworks (e.g., React,
Angular, Laravel) or focus on specific areas such as e-commerce development, mobile
web apps, or web accessibility.
2.1.2Web Application
A web application (web app) is an application program that is stored on a remote server
and delivered over the internet through a browser interface. Web services are web apps
by definition and many, although not all, websites contain web apps.
Developers design web applications for a wide variety of uses and users, from an
organization to an individual for numerous reasons. Commonly used web applications
can include web mail, online calculators or e-commerce shops. While users can only
access some web apps by a specific browser, most are available no matter the browser.
2.1.3 How web application/web development work?
Web applications do not need to be downloaded since they are accessed through a
network. Users can access a web application through a web browser, such as Google
Chrome, Mozilla Firefox or Safari.

11. 5
For a web app to operate, it needs a web server, application server and database. Web
servers manage the requests that come from a client, while the application server
completes the requested task. A database stores any necessary information.
Web applications typically have short development cycles and small development
teams. Developers write most web apps in JavaScript, HTML5 or CSS. Client-side
programming typically utilizes these languages, which help build an application's front-
end. Server-side programming creates the scripts a web app will use. Languages such
as Python, Java and Ruby are commonly used in server-side programming.
2.1.4 Benefit of web application.
Web applications have many benefits. Some common benefits include the following:
Multiple users can access the same version of an application.
Users don't need to install the app.
Users can access the app through various platforms such as a desktop, laptop or mobile.
Users can access the app through multiple browsers.
2.2 Types Of Web Development
2.2.1 Front-End Web Development
A front-end developer builds the front-end portion of websites and web applications—
the part users see and interact with. A front-end developer creates websites and
applications using web languages such as.
HTML: HTML (Hypertext Markup Language) is a markup language used for creating
the structure and content of web pages. It provides a set of predefined tags that define
the elements and layout of a web page.
Here are some key aspects of HTML:

12. 6
1. Document Structure: HTML documents consist of a hierarchy of elements
that define the structure of a webpage. The basic structure is defined using the
<html>, <head>, and <body> tags.
2. Tags and Elements: HTML tags are used to define elements within a
webpage. Tags are written between angle brackets (<>). Each tag represents a
specific element, such as headings (<h1>, <h2>, etc.), paragraphs (<p>), images
(<img>), links (<a>), and more.
3. Attributes: HTML elements can have attributes that provide additional
information about the element. Attributes are specified within the opening tag
of an element. For example, the <a> tag can have an href attribute to specify the
URL of the link.
4. Text Formatting: HTML allows for text formatting and styling using tags
such as <strong> for bold, <em> for emphasis (italic), <u> for underline, <s>
for strike through, and more.
5. Lists: HTML provides tags for creating ordered lists (<ol>) and unordered
lists (<ul>), as well as list items (<li>). These tags are used to create bullet
points or numbered lists on a webpage.
6. Tables: HTML tables are used to organize data into rows and columns. The
table structure is defined using the <table>, <tr> (table row), <th> (table
header), and <td> (table data) tags.
7. Forms: HTML forms allow users to input data and submit it to a server.
Form elements such as <input>, <select>, and <textarea> are used to create
form fields for text input, checkboxes, radio buttons, dropdown menus, and
more.

13. 7
8. Multimedia: HTML supports embedding multimedia content, such as
images, videos, and audio, using the <img>, <video>, and <audio> tags.
9. Semantic Markup: HTML5 introduced semantic elements that provide
meaning to the structure of a webpage. These include <header>, <nav>,
<section>, <article>, <aside>, and <footer>. Semantic markup helps improve
accessibility and search engine optimization.
10. Comments: HTML allows for comments within the code to provide
explanations or notes. Comments are enclosed in <!-- and -->.
These are some of the fundamental concepts of HTML. By combining various HTML
tags and elements, you can create the structure, content, and layout of a web page.
HTML is often used in conjunction with CSS (Cascading Style Sheets) to add visual
styling and JavaScript to enhance interactivity on web pages.
Example of HTML
CSS
CSS (Cascading Style Sheets) is a style sheet language used to describe the visual
presentation and formatting of HTML (or XML) documents. It defines how elements of

14. 8
a webpage should be displayed, including their layout, colors, fonts, sizes, and other
visual aspects.
Here are some key aspects of CSS:
1. Selectors: CSS uses selectors to target specific HTML elements or groups of
elements. Selectors can be based on element names, class names, IDs,
attributes, and more. For example, you can target all paragraphs using the
selector p, or target elements with a specific class using .classname.
2. Properties and Values: CSS properties define the visual attributes of an
element, such as color, font-size, background-color, padding, and margin.
Properties are assigned values, which determine the specific style or layout for
the targeted element(s). For example, color: blue; sets the text color to blue.
3. Styling and Layout: CSS allows you to control the visual presentation and
layout of elements. You can set properties like background-color, font-family,
text-align, display, position, and more to achieve the desired styling and layout
effects.
4. External, Internal, and Inline Styles: CSS styles can be applied externally
by linking an external CSS file to an HTML document using the <link> tag.
Internal styles can be defined within the <style> tags within the HTML
document itself. Inline styles can be directly applied to individual HTML
elements using the style attribute.
5. Media Queries: CSS includes media queries, which allow you to apply
different styles based on the characteristics of the device or screen size. This
enables you to create responsive designs that adapt to different devices or
screen resolutions.

15. 9
6. CSS Frameworks: CSS frameworks like Bootstrap, Foundation, and Bulma
provide pre-defined CSS styles, components, and layout grids to facilitate rapid
and consistent web development. These frameworks offer a collection of CSS
classes that can be used to style HTML elements.
7. CSS Preprocessors: CSS preprocessors like Sass and Less extend the
functionality of CSS by introducing features like variables, functions, mixins,
and nested selectors. They help streamline and modularize CSS code, making it
more maintainable and reusable.
CSS works in conjunction with HTML to separate the content and structure of a
webpage from its presentation and styling. By applying CSS styles to HTML elements,
you can create visually appealing and well-formatted webpages.
Example of CSS
JavaScript (JS)
JavaScript is a widely-used programming language that allows you to add interactivity,
dynamic behavior, and functionality to webpages.
Here are some key aspects of JavaScript:
1. Client-Side Scripting: JavaScript is primarily used as a client-side scripting
language, meaning it runs in the web browser on the client's machine. It enables

16. 10
dynamic manipulation of webpage elements, handling user interactions, and
making requests to servers without requiring a page reload.
2. Web Interactivity: JavaScript enables interactivity on webpages by
responding to user actions such as clicks, form submissions, mouse movements,
and keyboard input. You can use JavaScript to validate form inputs, show/hide
elements, create interactive animations, and update content dynamically.
3. DOM Manipulation: JavaScript provides access to the Document Object
Model (DOM), which represents the structure and content of an HTML
document. With JavaScript, you can manipulate DOM elements, change their
properties, modify their styling, add or remove elements dynamically, and
handle events associated with them.
4. Data Handling: JavaScript allows you to work with data by creating and
manipulating variables, arrays, objects, and performing operations like
arithmetic calculations, string manipulation, and logical evaluations. It also
supports data structures such as arrays and objects for organizing and managing
complex data.
5. Data Handling: JavaScript allows you to work with data by creating and
manipulating variables, arrays, objects, and performing operations like
arithmetic calculations, string manipulation, and logical evaluations. It also
supports data structures such as arrays and objects for organizing and managing
complex data.
6. Libraries and Frameworks: JavaScript has a rich ecosystem of libraries and
frameworks, such as React, Angular, and Vue.js, that provide powerful tools
and abstractions for building complex web applications. These frameworks

17. 11
simplify common tasks, provide component-based architectures, and enhance
code organization and reusability.
7. Browser Compatibility: JavaScript is supported by all major web browsers,
making it a widely compatible language for web development. However,
different browsers may have slight variations in their JavaScript
implementation, requiring developers to be mindful of cross-browser
compatibility issues.
8. Server-Side Development: JavaScript is not limited to client-side scripting.
With technologies like Node.js, JavaScript can also be used for server-side
development, allowing developers to build full-stack web applications using a
single programming language.
Server-Side Development: JavaScript is not limited to client-side scripting. With
technologies like Node.js, JavaScript can also be used for server-side development,
allowing developers to build full-stack web applications using a single programming
language.
2.2.2 Back-End Web Development
Web development activities that are done at the back end of programs are referred to as
back end development. Back-end development covers server-side web application logic
and integration and activities, like writing APIs, creating libraries, and working with
system components instead of frontend development, which focuses on customer-
facing services and programs. Backend developers build code that allows a database
and an application to communicate with one another. Backend developers take care and
maintain the back-end of a website, Including databases, servers, and apps, and they
control what you don't see.

18. 12
Back-End Developer Skills
A Back-End Developer skills include:
MySQL
MySQL is an open-source relational database management system (RDBMS) that uses
SQL as its query language. It is one of the most popular and widely-used database
systems, known for its performance, reliability, and ease of use.
Here are some key aspects of MySQL:
1. Data Storage: MySQL allows you to store and manage structured data in
tables, organized into databases. Each table consists of columns (fields) and
rows (records), following a tabular structure.
2. SQL Support: MySQL fully supports SQL, allowing you to create, retrieve,
update, and delete data using SQL statements. You can use SQL queries to
perform complex operations, such as filtering, joining, aggregating, and sorting
data.
3. Data Types: MySQL supports a variety of data types, including numeric
types (integer, decimal, floating-point), string types (character, text), date and
time types, boolean type, and more. Each column in a table is assigned a
specific data type to enforce data integrity and optimize storage.
4. Indexing: MySQL provides indexing mechanisms to improve the
performance of data retrieval operations. Indexes are created on specific
columns, allowing for faster search and retrieval of data. Common types of
indexes include primary keys, unique indexes, and regular indexes.
5. Indexing: MySQL provides indexing mechanisms to improve the
performance of data retrieval operations. Indexes are created on specific

19. 13
columns, allowing for faster search and retrieval of data. Common types of
indexes include primary keys, unique indexes, and regular indexes.
6. User Management: MySQL provides user management functionality,
allowing you to create and manage user accounts with different privileges and
access levels. This ensures that only authorized users can interact with the
database and perform specific actions.
7. Scalability and Replication: MySQL is designed to scale from small
applications to large, enterprise-level systems. It supports various techniques for
scalability, such as replication, which allows for creating multiple copies
(replicas) of a database for increased performance, fault tolerance, and load
balancing.
8. Compatibility and Ecosystem: MySQL is compatible with various
operating systems, including Windows, macOS, Linux, and different
programming languages. It has extensive community support, documentation,
and a rich ecosystem of tools, frameworks, and libraries that complement
MySQL development.
MySQL is widely used for a range of applications, including web development, content
management systems, e-commerce platforms, data warehousing, and more. Its ease of
use, reliability, and extensive feature set make it a popular choice for developers and
organizations seeking a robust and efficient database management system.
PHP
PHP (Hypertext Preprocessor) is a server-side scripting language designed for web
development. It is one of the most widely used languages for creating dynamic and
interactive websites.
Here are some key aspects of PHP:

20. 14
1. Server-Side Scripting: PHP is primarily used for server-side scripting,
which means the PHP code is executed on the server before the resulting HTML
is sent to the client's browser. This allows for dynamic content generation and
interaction with databases, file systems, and other server resources.
2. Embedded in HTML: PHP code is typically embedded directly within
HTML markup using special delimiters (<?php and ?>). This allows for
seamless integration of PHP logic with HTML content, making it easy to
generate dynamic webpages.
3. Data Manipulation: PHP provides extensive capabilities for working with
data, including variables, arrays, strings, and built-in functions for manipulating
and transforming data. It also supports various data types, including integers,
floats, strings, booleans, and more.
4. Database Connectivity: PHP has built-in functions and extensions that
enable seamless connectivity and interaction with databases. It supports a wide
range of database management systems, such as MySQL, PostgreSQL, Oracle,
and SQLite, allowing for database querying, retrieval, insertion, updating, and
deletion.
5. Web Development Frameworks: PHP has a rich ecosystem of web
development frameworks, such as Laravel, Symfony, CodeIgniter, and Zend
Framework. These frameworks provide pre-built components, libraries, and
architectural patterns to simplify and accelerate web application development.
6. File Handling: PHP offers powerful file handling capabilities, allowing you
to read from and write to files, manipulate file metadata, upload files from client
browsers, and perform file system operations like creating directories and
deleting files.

21. 15
7. Form Handling and Validation: PHP facilitates form processing, enabling
you to handle user input from HTML forms, validate data, and sanitize inputs to
prevent security vulnerabilities like cross-site scripting (XSS) and SQL
injection.
8. Session Management and Cookies: PHP supports session management,
allowing you to store and retrieve user-specific data across multiple requests. It
also provides features for managing cookies, which can be used to store and
retrieve information on the client's browser.
9. Scalability: PHP can scale from small, simple websites to large, complex
web applications. It is well-suited for building scalable and high-traffic
websites, with features like caching, load balancing, and distributed processing.
10. Extensive Community and Resources: PHP has a large and active
community of developers, which provides a wealth of resources, tutorials,
forums, and libraries. This makes it easier to find support, learn new techniques,
and leverage existing code for faster development.
PHP is widely used for web development, powering numerous popular websites and
web applications. Its simplicity, flexibility, and extensive feature set make it a preferred
choice for developers seeking to build dynamic and interactive web solutions.
2.2.3 Full Stack Web development
Full stack development is the end-to-end development of applications. It includes both
the front end and back end of an application. The front end is usually accessed by a
client, and the back end forms the core of the application where all the business logic is
applied.

22. 16
CHAPTER THREE
3.0 KNOWLEDGE GAINED DURING THE SIWES.
During my SIWES training I learned the most important skills or knowledge that every
developer should learn first which is these two basic building blocks using i.e. HTML
and CSS. You will be using HTML,JAVASCRIPT and CSS in front-end for interfaces
While PHP and MYSQL for the back-end and during the training I strive to embark on
a mini project using HTML, CSS which is ‘SOFTONIC’. And the website has a
features like HOME, SIGN IN, SIGN UP, OUR SERVICESS and CONTACT US.
Here it is sample below for Home page Registration page and Login page.
Home Page:
Sign Up Page:

23. 17
CHAPTER FOUR
4.0 CONCLUSION
Web development continues to evolve rapidly, driven by advancements in technology
and changing user expectations. Staying up-to-date with current trends, frameworks,
and security practices is crucial for successful web development projects. Embracing
emerging technologies and considering user experience, mobile optimization, security,
and accessibility will help businesses and developers build robust and user-friendly
web applications.