It Work
It Work
PRESENTED BY
NOVEMBER, 2023
1
REPORT OF THE SIX-MONTH INDUSTRIAL TRAINING AT
SPACESOFT INTEGRALS SYSTEM LTD
ASABA, DELTA STATE.
STUDENT INDUSTRIAL WORK EXPERIENCE SCHEME
(SIWES)
PRESENTED BY
OHAMADIKE GLADYS CHIDALU
2020 224 016
SUBMITTED TO
NOVEMBER, 2023
2
DEDICATION
I dedicate this report to the unwavering support and encouragement of my family, whose love and belief
in me have been my constant source of inspiration. This achievement is a testament to the sacrifices you
made and the values you instilled in me, and for that, I am forever grateful.
3
ACKNOWLEDGEMENT
I would like to express my heartfelt gratitude to the following individuals and groups whose
contributions and support were instrumental in the completion of this report:
My mentor Mr. Alexander Innocent whose guidance and unwavering support were indispensable
throughout this project. Your expertise and dedication have shaped not only this report but also my
growth as a designer and thinker.
The Management of Chukwuemeka Odumegwu Ojukwu University, Faculty of Physical Sciences and
Department of Computer Science for providing me with the necessary resources, research facilities, and
a conducive academic environment. Your commitment to fostering intellectual growth is truly
commendable.
My friends and peers, who provided invaluable insights and feedback, helping me refine my ideas and
analysis. Your camaraderie and enthusiasm made this journey enjoyable and fulfilling.
The countless authors and researchers whose work served as the foundation for this report. Their
contributions to the field have paved the way for new knowledge and understanding.
Last but not least, I would like to thank my family for their unwavering support, understanding, and
encouragement. Your love and belief in me have been my constant source of motivation, and I am
deeply grateful for everything you have done to make this endeavor a reality.
4
CHAPTER ONE
INTRODUCTION
The Student Industrial Work Experience Scheme (SIWES) was established by the Industrial
Training Fund (ITF) in 1973 to enable students of tertiary institutions have basic technical
knowledge of industrial work based on their course of study before the completion of their program
in their respective institutions.
The scheme was designed to expose students to industrial environment and enable them develop
occupational competencies so that they can readily contribute their quota to national economic and
technological development after graduation.
The major benefit accruing to students who participate conscientiously in student’s industrial
work experience scheme are the skills and competencies they acquire. The relevant production
skills remain part of the recipients of Industrial Training as lifelong assets which cannot be taken
away from them. This is because the knowledge and skill acquired through training are
internalized and become relevant when required to perform jobs or functions.
5
The goals of the understudy modern work experience plan are:
i. It opens understudies to work strategy and procedures in dealing with hardware that may not
be accessible in the colleges.
ii. It plans understudy for the work circumstance they are probably going to meet after
graduation.
They specialize in development of IT solutions to increase individual and corporate efficiency and
productivity. They seek to be one of the Major ICT players in Africa and dominating the global ICT
market with their product brands and promoting societal efficiency through the use of technology. They
6
believe that technology and art are inseparable justifying why we ventured into animation and graphics.
Our experience has made us expand our horizon and created the first animation video in southern
Nigeria.
MANAGING DIRECTOR
SYSTEM MANAGER
7
CHAPTER TWO
(PRODUCT DESIGN)
2.1 DEFINITON
Web development refers to the building, creating, and maintenance of websites. It is the work that
happens behind the scenes in order to develop a website and make it look great, work fast and perform
well with a seamless user experience. It includes aspects such as web design, web publishing, web
programming, and database management.
Web design is the skills and discipline of production and maintenance of websites which include interface
design, page coding, hosting and search engine optimization.
Web developers do this by using a variety of coding languages. The languages they use depends on the
types of tasks they are preforming and the platforms on which they are working. Web development skills
are in high demand worldwide and well paid too making development a great career option. It is one of
the easiest accessible higher paid fields as you do not need a traditional university degree to become
qualified.
The field of web development is generally broken down into front-end (the user-facing side) and back-
end (the server side) and Dev (development operations)
8
A website is not the same thing as a Web page. Though the two terms are often used interchangeably,
they should not be. So, what's the difference? To put it simply, a Web site is a collection of web pages
while a Web page is an individual HTML document which make up the World Wide Web.
Dynamic Webpage: Dynamic pages have contents that can change each time they are accessed. It is
modified by the server before it is sent to the requesting browser. These pages are typically written in
scripting languages.
Step 3: Application server scans page for instructions and finishes page.
9
Web design tools refer to software programs and reference materials used to create a pleasing
and effective Internet screen for a website. They can be classified into three groups which are
Word processors, Graphic applications and HTML editors.
Sketch
Adobe Xd
Figma
10
2.4 SOFTWARE / IDE ENCOUNTERED
1. Visual Studio Code: Visual Studio Code is a freeware source-code editor made by Microsoft
for Windows, Linux and macDOS. Features include support for debugging, syntax
highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.
11
Fig 2: Visual Studio Code
12
1. Brackets: Brackets is a source code editor with a primary focus on web development. Created
by Adobe Systems, it is free and open-source software licensed under the MIT License, and is
currently maintained on GitHub by Adobe and other open-source developers. It is written in
JavaScript, HTML and CSS.
13
Fig 3: Brackets Code Editor
14
1. Google Chrome: Web browsers like Google Chrome can read HTML files and compose them
into visible or audible web pages. Browsers do not display the HTML tags and scripts, but use
them to interpret the content of the page.
Google’s built-in Chrome Developer Tools let you view and edit your HTML and CSS in real-
time, or debug your JavaScript, all while viewing a thorough performance analysis of your
website. Bundled and available in both Chrome and Safari, they allow developers access into the
internals of their web application. On top of this, a palette of network tools can help optimize
your loading flows, while a timeline gives you a deeper understanding of what the browser is
doing at any given moment.
15
Fig 4: Google Chrome
16
1. Xampp Server: XAMPP is a free and open-source cross-platform web server solution stack
package developed by Apache Friends, consisting mainly of the Apache HTTP Server,
MariaDB database, and interpreters for scripts written in the PHP and Perl programming
languages.
17
Fig 5:Xampp Server Control Panel
18
1. PhpMyAdmin: PhpMyAdmin is a free software tool written in PHP, intended to handle the
administration of MySQL over the Web. PhpMyAdmin supports a wide range of operations on
MySQL and MariaDB. Frequently used operations (managing databases, tables, columns,
relations, indexes, users, permissions, etc.) can be performed via the user interface, while you
still have the ability to directly execute any SQL statement.
19
Fig 6: PhpMyAdmin
20
CHAPTER THREE
A front-end development takes care of layout, design and interactivity using HTML, CSS and JavaScript.
They take an idea from the drawing board and turn it into reality. What you see and what you use, such as
the visual aspect of the website, the drop-down menus and the text, are all brought together by the front-
end developer, who writes a series of programs to bind and structure the elements, make them look good
and add interactivity. These programs are run through a browser.
Back in the day, websites were simple, static text sites with a bit of formatting and maybe even some
animation.
It’s important to note that front-end development has changed significantly over the past 10 to 15 years
with the explosive growth of new programming and scripting languages, which wasn’t as ubiquitous on
the front end as it is now, or even as common on the back end.
21
3.3 HTML (HYPERTEXT MARKUP LANGUAGE)
HTML stands for Hyper Text Markup Language. It is the standard markup language for creating Web
pages. HTML is how every site on the web is organized, so it’s a big one you can’t live without front-end
development.
In HTML it is the tags that are the markup. The special meaning these tags give is a description of the
structure of the document. For example, the opening paragraph tag says “This is the beginning of a
paragraph” and the closing tag says “This is the end of the paragraph.” Without the markup, the words in
the middle would just be another bit of text; it would not be clear that they formed a paragraph. HTML
consists of a series of elements that describes the structure of a Web page. These elements tell the
browser how to display the content. HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
The html elements have attributes which describes the element. The attributes are added on the opening
tag and each has a name and value.
The name is the property you want to set and the value is what you want the value of the property to be.
Example: the <font> element has size, face, color as attributes with different values. The values should
be enclosed in double quotation marks.
22
Table 3:3.1 HTML Tags
TAG DESCRIPTION
23
3.4 CSS (CASCADING STYLE SHEET)
CSS stands for Cascading Style Sheets. It is a language designed to specify the style, layout, and
appearance of various elements on webpages.CSS covers fonts, colors, margins, lines, height, width,
background images, advanced positions and many other things.
Cascading Style Sheets (CSS) is how developers add styling and effects to a website. Styles can be added
globally, then layered on without changing that fundamental styling that gets applied to a whole site.
It allows one to adapt the presentation to different types of devices, such as large screens, small screens,
or printers. The separation of HTML from CSS makes it easier to maintain sites, share style sheets
across pages, and tailor pages to different environments.
Many front-end developers use a CSS preprocessor to make writing lots of lines of CSS even faster.
CSS FRAMEWORKS
In its simplest form, a CSS framework is a collection of CSS stylesheets that are prepped and ready to
use. They are tailored for use in common situations, like setting up navbars, and are often expanded upon
by other technologies such as SASS and JavaScript. Basically, all you need to do is write up your HTML
with the appropriate structure, classes, and IDs and you’re off to the races. However, instead of that
stylesheet being specifically for the home page you’re working on, it’s ready to accommodate a general
“standard” of home page, having classes for things commonly found on other home pages (ie navbar,
footer, slider, hamburger menu, 3 column layout). This allows you to quickly setup web pages without
having to deep dive into some CSS, saving a bunch of time.
24
CSS SELECTORS
1. Simple selectors
Type selector: Selects all elements that match the given node name.
Class selector: Selects all elements that have the given class attribute.
Syntax: .classname {………}
Example: .index will match any element that has a class of "index", .classname {………}
ID selector: Selects an element based on the value of its id attribute. There should be only one
element with a given ID in a document.
Syntax:#idname
Example: #toc will match the element that has the ID "toc", #toc {……}
Universal selector: Selects all elements. Optionally, it may be restricted to a specific namespace.
Syntax: *{…..}
Attribute selector: Selects elements based on the value of the given attribute.
Syntax: [attr][attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example: [autoplay] will match all elements that have the autoplay attribute set (to any value) /*
<a> elements with a title attribute */
a[title] {color: purple; }
2. Combinator
Adjacent sibling combinator : The + combinator selects adjacent siblings. This means that the
second element directly follows the first, and both share the same parent.
25
Syntax:A+B
Example: h2 + p will match all <p> elements that directly follow an <h2>.
/* Paragraphs that come immediately after any image */
img + p { font-style: bold; }
General sibling combinator : The general sibling combinator selects siblings. This means that the
second element follows the first (though not necessarily immediately), and both share the same
parent. It is denoted by” ~”.
Syntax:A~B
Example: p ~ span will match all <span> elements that follow a <p>.
/* Paragraphs that are siblings of and subsequent to any image */
img ~ p {color: red; }
Child combinator: The child combinator selects nodes that are direct children of the first element. It
is denoted by” >”.
Syntax: A > B
Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.
/* List items that are children of the "my-things" list */
ul.my.things>li{margin:2px;}
Descendant combinator: This combinator selects nodes that are descendants of the first element. It
id denoted by a space “ ”.
Syntax: A B
Example: div span will match all <span> elements that are inside a <div> element.
/* List items that are descendants of the "my-things" list */
ul.my-things li { margin: 2px; }
Pseudo-classes: Pseudo-classes allow the selection of elements based on state information that is not
contained in the document tree.
Example: a: visited will match all <a> elements that have been visited by the user.
div:hover { background-color: #F89B4D; }
Pseudo-elements: Pseudo-elements represent entities that are not included in HTML. Example:
p::first-line will match the first line of all <p> elements.
/* the first line of every <p> element. */
26
P:: first-line {
Color: blue;
Text-transform: uppercase; }
CSS PROPERTIES
CSS properties are used to apply styles to structured document, such as those created with HTML or
XML.
CSS properties are specified in the CSS standard. Each property has a set of possible values. Some
properties can affect any type of element and others apply only to particular groups of elements.
CSS properties are used within a declaration block with a corresponding value.
1. Text properties.
2. List properties.
3. Font properties.
4. Border properties.
27
Table 3:4.1 CSS Properties
TEXT PROPERTIES
Color Sets the color of a text RGB, hex, keyword
text align Aligns the text in an element left, right, center, justify
LIST PROPERTIES
list-style Sets all the properties for a list in one list-style-type, list-style-position, list-
declaration style-image, inherit
list-style-type Specifies the type of list-item marker none, disc, circle, square, decimal,
decimal-leading-zero
list-style-image Specifies an image as the list-item URL, none, inherit
marker
BORDER PROPERTIES
Border Sets all the border properties in one border-width, border-style, border-
declaration color
border-color Sets the color of the four borders color_name, rgb_number, transparent,
28
inherit
border-style Sets the style of the four borders none, hidden, dotted, dashed, double,
groove, ridge, inset, outset, inherit
FONT PROPERTIES
font-family Specifies the font family for text family-name, generic-family, inherit
font-style Specifies the font style for text normal, italic, oblique, inherit
font-weight Specifies the weight of a font normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600
3.6 PHP
29
PHP powers 78.2% of all websites whose server-side programming language we know. The
language was first released in 1995 when there were few options for building dynamic websites.
Since PHP is dynamically typed, it means you’re able to come up with a variety of
solutions and workarounds for one problem. It also means that the same bit of code can
mean something different depending on the context, which makes programs written in PHP
tricky to scale and sometimes slow to run.
PHP is a great language to learn for those who are just starting out for a number of reasons:
a) It’s more forgiving of errors, which means that you’re able to compile and run a
program until you reach a problematic part.
b) There is an abundance of resources dedicated to the language as a result of the large
community and tool support. The language undergoes updates, so ensure you’re learning
from an up-to-date tutorial.
c) The setup is relatively easy compared to a language like Ruby on Rails. You can
download MAMP (for Macs) or WAMP (for Windows) and you should be ready to
go in 5 minutes.
30
e) Hoot suite
f) Viber
g) Buffer
h) DocuSign
A comment is the portion of a program that exists only for the human reader and stripped out
before displaying the programs result. There are two commenting formats in PHP:
a) Single-line comments: They are generally used for short explanations or notes relevant
to the local code. e.g. #,//
b) Multi-lines comments: They are generally used to provide pseudocode algorithms and
more detailed explanations when necessary. The multiline style of commenting is the
same as in C. e.g. /* ............ */
Variable Types
The main way to store information in the middle of a PHP program is by using a variable. The
important thing to know about variable in PHP includes:
a) All variable in PHP are denoted with a leading dollar sign ($).
b) The value of a variable is the value of its most recent assignment.
c) Variables are assigned with the = operator, with the variable on the left hand side and the
expression to be evaluated on the right.
d) Variables can, but do not need, to be declared before assignment.
e) Variables in PHP do not have intrinsic type – a variable does not know in advance
whether it will be used to store a number or a string of characters.
f) Variables used before they are assigned have default values.
g) PHP does a good job of automatically converting types from one to another when
necessary.
Data Types
31
PHP has a total of eight (8) data types which we use to construct our variables.
a) Integers: They are whole numbers, without a decimal point e.g. 4196
b) Doubles: They are floating-point numbers e.g 3.14159 or 49.1
c) Booleans: They have only two possible values either true or false.
CHAPTER FOUR
What is a Database?
A Database is simply a collection of structured data. Think of taking a selfie: you push a button
and capture an image of yourself. Your photo is data, and your phone’s gallery is the database. A
database is a place in which data is stored and organized. The word “relational” means that the
data stored in the dataset is organized as tables. Every table relates in some ways. If the software
doesn’t support the relational data model, just call it DBMS.
The logical model concentrates on the data requirements and the data to be stored independent of
physical considerations. It does not concern itself with how the data will be stored or where it will
be stored physically.
The physical data design model involves translating the logical DB design of the database onto
physical media using hardware resources and software systems such as database management
systems (DBMS).
32
A good database design process is governed by specific rules. The first rule in creating a database
design is to avoid data redundancy. It wastes space and increases the probability of faults and
discrepancies within the database. The second rule is that the accuracy and comprehensiveness of
information are imperative.
The reliability of data depends on the table structure, whereas creating primary and unique keys
guarantees uniformity in the stored information. You can avoid data replication by forming a table
of probable values and using a key to denote the value. So, whenever the value changes, the
alteration happens only once in the main table.
As the general performance of a database depends on its design, a good database design uses
simple queries and faster implementation. Also, it is easy to maintain and update. On the other
hand, when the database is poorly designed, even trivial interruptions may harm stored events,
views, and utilities.
33
never ends because database monitoring, improvement, and maintenance are part of the life cycle,
and these activities continue as long as the database is alive and in use.
According to Teorey, Lightstone, Nadeau, and Jagadish (2011), the database life cycle consists of
four stages, namely:
34
4.3 DATABASE IMPLEMENTATION
If the DBMS is not already installed, installation must be performed. The DBMS can be installed
on a new server or an existing server. Another option is to use a cloud database service such as
Microsoft’s
Azure SQL Database Service, Amazon Relational Database Service (Amazon RDS), or Google’s
Cloud SQL. This new generation of services allows users to create databases that can be easily
managed, tested, and upgraded as needed.
After installing the DBMS, the next step is to create a database using the standard database
language, Structured Query Language (SQL), in the selected DBMS. SQL was first standardized
in 1986 and updated in 1989, 1992 (SQL-92), 1999 (SQL: 1999), 2003 (SQL: 2003), 2006 (SQL:
2006), 2008 (SQL: 2008), 2011 ( SQL: 2011), 2016 (SQL: 2016), and 2019 (SQL: 2019).
Many DBMS have provided a diagram feature for database creation without having to type SQL
statements, for example, Microsoft SQL Server, Microsoft Access, Oracle, and others. Another
option is using the tool, for instance, Erwin (Entity Relationship for Windows), Embarcadero
ER /Studio, SQL Power Architect, and others.
XCNext, the data must be loaded into database tables. Usually, data has to be imported from the
previous system. When all data is in the same relational database format, data transfer to the new
35
database can be done quickly. In some cases, data may have to be imported from other relational
databases, non-relational databases, text files, spreadsheets, etc. If the data format does not support
direct importing, a conversion program may have to be created to reformat the imported data. In
the worst case, most of the data may have to be entered manually into the database. Furthermore,
administrators and application developers test and evaluate the database.
Database administrators perform routine database maintenance. According to Coronel and Morris
(2019), some of the regular maintenance activities required include:
36
4.5 DATABASE MAINTENACE
MySQL is one of the most recognizable technologies in the modern big data ecosystem. Often
called the most popular database and currently enjoying widespread, effective use regardless of
industry, it’s clear that anyone involved with enterprise data or general IT should at least aim for a
basic familiarity of MySQL.
With MySQL, even those new to relational systems can immediately build fast, powerful, and
secure data storage systems. MySQL’s programmatic syntax and interfaces are also perfect
gateways into the wide world of other popular query languages and structured data stores.
4.6 MYSQL
What is MySQL?
MySQL is a relational database management system (RDBMS) developed by Oracle that is based
on structured query language (SQL).
MySQL is integral to many of the most popular software stacks for building and maintaining
everything from customer-facing web applications to powerful, data-driven B2B services. Its open
source nature, stability, and rich feature set, paired with ongoing development and support from
Oracle, have meant that internet-critical organizations such as Facebook, Flickr, Twitter,
Wikipedia, and YouTube all employ MySQL back ends.
37
PROJECT CREATED
38
PLATE 4:6.1 SCREENSHOT OF WEBSITE CREATED
BUY PAGE
39
OUR PRODUCTS C
40
CODES
41
PLATE 4:6.2 SCREENSHOT OF SAMPLE CODE
38
42
CHAPTER FIVE
CONCLUSION
The training has also led me to some aspects of computer science which I was not
able to practice such as developing a good Web App.
b) Lack of funds
43
5.3 SUGGESTIONS FOR IMPROVED SIWES PROGRAM
Based on this, I will like to recommend the school authority to ensure that every student
entitled to this program is properly advised on how to go about getting a suitable place of
attachment in order to be well exposed for his or her benefit.
a) This program should be taken seriously and supervisors from the school
should be assigned to the student to ensure that they are actually doing the right
thing relating to their course of program.
b) Allowances should be paid to students during their program just like
NYSC and not after. This would help them a great deal to handle some financial
problems during their training course
c) I suggest that industries should have industry-based IT coordinate who
sees to it that students get the best of training relevant in their course of
study .The IT coordinator should also ensure that students are allowed to use the
resources of the industry
d) Finally, I suggest that the university system should encourage industries
and the societies at large to accept students embarking on industrial attachment.
44
45