Web Development
Web Development
OF
HELD AT
BAYELSA STATE
WRITTEN BY:
FUO/20/CSI/14292
SUBMITTED TO:
SCIENCES
i
DEDICATION
I dedicate this report to the ALMIGHTY GOD who gave me the grace and strength to finish my
SIWES program successfully and also for providing all the necessary resources.
ii
ACKNOWLEDGEMENT
I am grateful to GOD Almighty, who granted me the grace, strength and knowledge to go
gratitude goes to my supervisor who had to leave what he is doing to come not only to supervise
me, but also to check if the organization is good for my SIWES. My appreciation also goes to
all my departmental lecturers who have been of help all the way.
To my family, words cannot quantify the depth of my gratitude. Thank you all for the support.
I say a big thank you to my supervisor for the opportunity and support, and all other ICT
personnel who i n one way or the other made this IT a success for me.
iii
lOMoARcPSD|20324451
TABLE OF CONTENT
DEDICATION 2
ACKNOWLEDGEMENT 3
Background
Objectives of SIWES
JAVASCRIPT
10
CHAPTER THREE
Problems Encountered
30
lOMoARcPSD|20324451
30
Conclusion
30
C HAPTER FOUR
32
lOMoARcPSD|20324451
CHAPTER ONE
Students Industrial Work Experience Scheme (SIWES) was introduced by the Federal
Government of Nigeria to bridge the gap between theory and practice among products of
tertiary Institutions. It was first initiated and funded by the Industrial Training Fund (ITF)
during the formative years of 1973/1974.
With the increasing number of student enrolment in higher institutions there is a high demand
of resources to fund the scheme, hence, ITF withdrew from the scheme and the federal
government took over the funding in 1997 and passed it over to the National University
Commission (NUC), a regulatory body for the Universities and its counterfeit, for the
Polytechnics, the National Board for Technical Education (NBTE). However, five years later
in 1984, the scheme was reverted back to the ITF which had continued to manage it to date
with funding being provided by the Federal Government. (Agunwa, 2012)
SIWES is strategized for skill acquisition and development. IT is a platform for the
preparation of student for real life work experience. It prepares them for the work situation
that they will encounter after graduation. Therefore, SIWES is the key factor required to
inject industrialization and economic development in our nation by preparing students for the
work requirement after graduation. (Agunwa, 2012).
1
lOMoARcPSD|20324451
• Expose Students to work methods and techniques in the handling of equipment and
machinery that may not be available in school.
• Making the transition from academic institution to the labor market smooth and
enhance students contact for later job placement.
• Promote the desired technological know-how required for the advancement of the nation.
(Agunwa, 2012).
• Carry research into operations of SIWES and recommend improvements if need be.
2
• To complete SPE-1 Form and get it endorsed by their employers who will forward some to ITF.
• To record all training activities and other assignments in the log-book and complete ITF Form-8
to ensure proper assessments. (Agunwa, 2012).
• Submit ITF Form 8 to ITF at the end of each SIWES year. (Agunwa, 2012).
MISSION
To work towards the sustainable development of Bayelsa state by ensuring ICT best practices
and the integration of ICT solutions statewide.
Goal
1. The eliminate fraud and corruption in the state public service, through the development
of appropriate technology.
2. To improve transparency and accountability in governance by the deployment of ICT
solutions.
FUNCTIONS
1. Retain and maintain personal files/records of all ICT employees in the state civil
service.
2. Make recommendations to the state civil service commission for all ICT employees'
regular promotion.
3. Approve the postings/secondment to various MDAs of all ICT staff in the state
civil service.
4. Exercise discipline and control of all ICT employees in the state civil service.
5. Carryout local and international capacity building programs.
6. Administer and supervise the execution of all e-governance project in the state.
OBJECTIVES
1. To improve the efficiency and effectiveness of the government business
processes, using the ICT tools and application.
2. Enhancing transparency in government through electronic handling of
transactions to reduce corruption and thereby reinforce credibility and
accountability.
3. Provision of a scalable, reliable, secured, resilient, and highly available routed
and switched Internet Protocol (IP) network.
STAFF STRENGTH
Presently the e-Governance Bureau is housing about one hundred and fifty-six (156)
graduate and non-graduate staff. The officers comprise of Administrative Officers,
Executive Officers, Clerical Officers, Program Analysts, Computer Engineers, Data
Processing Officers, and Assistant Data Processing Officers in the State Civil Service
respectively.
However, the e-Governance Bureau is directly the pool office that control all ICT staffs.
The Bureau has seven departments as stated below:
I. Administration Department
ii. Application Department
iii. Networking and Infrastructure Department
iv. Planning Research and Statistics (PSR) Department
V. Project Management
vi. Training Department
vii. Accounts Department
Some of the staff are posted to some Ministries, Agencies, and Department of
government which names are still in our payroll due to non-existence of pay point.
PROJECTS
From February 14, 2020, to date there is no ongoing or new project.
E-GOVERNANCE BUREAU ORGANISATIONAL STRUCTURE
Political Head
Administration
Accounta
nts Program Analyst Program Analyst
Data processing
Officers
Executive
Cleaners IT students
Officers
Engineer or
computer Engineer
E-GOVERNANCE BUREAU
VARIOUS DEPARTMENT AND FUNCTIONS
Administration Department:
In charge of Maintaining Public Relations, Overseeing Staffing and the General
Office Management.
Application Department:This department Comprises of the Data Processing
Officers and they are in charge of any activities that has to do with computer
applications.
Networking Infrastructure Department:This Dept comprises of Programme
Analysts and Computer Engineers. They are in charge of networking systems, and
one office building to another.
Planning Research & Statistics (PRS) Department:this department makes
documentations, and make relevant findings that are important to the good and
welfare of the office.
Project Management Department: This department ensures the smooth running
of office projects.
Training Department: This department ensures staff are trained as at when due
and giving due orientation on-boarding the Civil Service.
Accounts Department: This department ensures the payment of staff salaries and
other financial related issues goes in accordance and as purported.
CHAPTER TWO
2.0 Web Development
Web development is a broad term for the work involved in developing a website.
In developing a website or a web application. It involves the use of a markup
language, scripting language, scripting language, database management and
network security configuration.
What is HTML?
HTML is a markup language for describing web documents (web pages). HTML
stands for Hyper Text Markup Language
A markup language is a set of markup tags HTML documents are described by
HTML tags
Each HTML tag describes different document content HTML Example
A small HTML document:
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
Example Explained
The DOCTYPE declaration defines the document type to be HTML The text
between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content The text
between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
Using this description, a web browser can display a document with a heading and
a paragraph.
HTML TAGS
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the tag name
The start tag is often called the opening tag. The end tag is often called the closing
tag.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML
documents and display them.
The browser does not display the HTML tags, but uses them to determine how to
display the document:
HTML Page Structure
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
9
<p>This is another paragraph.</p>
</body>
</html>
Only the <body> area (the white area) is displayed by the browser.
The <!DOCTYPE> declaration helps the browser to display a web page correctly.
To display a document correctly, the browser must know both type and version.
The doctype declaration is not case sensitive. All cases are acceptable:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
3.1.1 HTML - TEXT FORMATTING TAGS
As you begin to place more and more text elements onto your website, you may
find yourself wanting to incorporate bold or italic properties in your text elements.
HTML offers a handful of special tags that can be utilized to do just that:
HTML TEXT FORMATTING TAGS:
<p>An example of <b>Bold Text</b></p>
<p>An example of <em>Emphasized Text</em></p>
<p>An example of <strong>Strong Text</strong></p>
<p>An example of <i>Italic Text</i></p>
<p>An example of <sup>superscripted Text</sup></p>
<p>An example of <sub>subscripted Text</sub></p>
<p>An example of <del>struckthrough Text</del></p>
Below is a table of the 16 basic HTML color values that are available to HTML
web designers.
HTML BASIC COLORS:
Black Gray Silver White Yellow Lime Aqua Fuchsia Red Green Blue
Purple Maroon Olive Navy Teal
Fig 2.0 Basic Html Colors
HTML CODE:
<table bgcolor="#ff0000" border="1"><tr>
<td>A red colored table background using hexadecimal values "#FF0000".</td>
</tr></table>
Checkbox
Text Field 1 HTML form elements rely on action and method attributes
to identify where to send the form data for processing (action) and how to process
the data (method).
2.1.3 HTML - INPUT ELEMENT(S)
HTML input elements are form elements such as text fields, checkboxes, and
buttons. The name comes from the <input> tag, which is the mark-up that
identifies web form components. The <input> tag relies upon a few attributes to
classify and name each form item, providing the web developer with a means to
manipulate each element individually.
The type attribute determines what kind of input element to render to the screen.
Options here include: text, checkbox, radio, button, submit, reset, password, and
hidden form elements. Each has its own unique functionality and customizable
presentation.
HTML INPUT ELEMENT CODE:
<form name="myWebForm" action="mailto:[email protected]"
method="post"> Check Me: <input type="checkbox" /><br />
Name: <input type="text" /><br />
Yes: <input type="radio" /> No: <input type="radio" /><br />
<input type="submit" value="SUBMIT" />
<input type="reset" value="RESET" />
</form>
HTML INPUT ELEMENTS:
Check Me:
Name:
Yes: No:
Text fields offer a small rectangular box that's always ready to receive information
from viewers. Users will notice that when they click these fields, the cursor will
change from the typical arrow to a pipe character ( | ), allowing for text entries to
be typed inside each input field.
A text field is placed on a web page using the <input> tag, with the type attribute
set with a value of "text".
HTML TEXT FIELD CODE:
<form name="myWebForm" action="mailto:[email protected]"
method="post"> First: <input title="Please Enter Your First Name" id="first"
name="first" type="text" /> Last: <input title="Please Enter Your Last Name"
id="last" name="last" type="text" />
<input type="submit" value="SUBMIT" />
</form>
HTML TEXT FIELDS:
First: Last:
Text fields are designed to capture single words or phrases from the user. That
information may then be processed through some kind of client/server side script
(PHP, PERL, JavaScript).
HTML - TEXTAREAS
Subtitle
This paragraph would be your content paragraph...
Here's another content article right here.
Elements housed within a <div> tag acquire any styles or properties applied to the
master div
element. Therefore the paragraph and heading elements should now be rendered
blue in a Helvetica font. In addition, we've applied a border to the <div> element
just to help visualize the grouping of elements together.
HTML uses start tags and end tags to markup web page elements: In the example
above, the
<p> tag marks the start of a paragraph, and </p> marks the end of the paragraph.
By using simple HTML tags, web designers can add headers, paragraphs, text,
tables, images, lists, programming code, etc., to a web page
(HTML document).
Web browsers (IE, Firefox, Chrome, etc.) read HTML documents, interpret the
HTML tags, and display the proper output (without displaying
the HTML tags):
According to the HTML standard, HTML should be used to define the content of
web pages. To define the visual style (color, size, appearance, layout, etc.), CSS
(Cascading Style Sheets) should be used
2.2 CASCADING STYLE SHEET
Cascading Style Sheets (CSS) is a style language used for describing the
presentation of a document written in a markup language. CSS was developed by
Hakon Wium Lee in the year 1996.
CSS defines how HTML elements are to
be displayed. CSS describes the visual style (appearance,
layout, color, fonts) of HTML elements. CSS was designed to separate document
layout from document content (which greatly improved HTML flexibility
and reduced HTML complexity).
CSS is easy to learn. You can use HTML element names as selectors, and list the
style properties inside curly brackets:
2.2.3 Selector
In CSS, selectors are used to declare which part of the markup a style applies to by
matching tags and attributes in the markup itself. Selectors may apply to:
2.2.3.1 all elements of a specific type, e.g. the second-level headers h2
2.2.3.2 elements specified by attribute, in particular:
2.2.3.2.1 id: an identifier unique to the document
2.2.3.2.2 class: an identifier that groups multiple elements in a document
2.2.3.3 elements depending on how they are placed relative to others in the
document tree.
Classes and IDs are case-sensitive, start with letters, and can include alphanumeric
characters and underscores. Any number of instances of any number of elements
may have the same class. Conventionally, IDs only apply to one instance of one
element.
Pseudo-classes are used in CSS selectors to permit formatting based on
information that is not contained in the document tree. One example of a widely
used pseudo-class is :hover, which identifies content only when the user "points
to" the visible element, usually by holding the mouse cursor over it. It is appended
to a selector as in a:hover or #elementid:hover. A pseudo-class classifies document
elements, such as :link or
:visited, whereas a pseudo-element makes a selection that may consist of partial
elements, such as :first-line or :first-letter.[5]
Selectors may be combined in many ways to achieve great specificity and
flexibility.[6] Multiple selectors may be joined in a spaced list to specify elements
by location, element type, id, class, or any combination thereof. The order of the
selectors is important. For example, div .myClass {color:red;} applies to all
elements of class myClass that are inside div elements, whereas .myClass
div{color:red;} applies to all div elements that are in elements of class myClass.
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, p, a{ margin: 0px;
padding: 0px;
}
The CSS definitions are normally stored in external files. This enables a web
developer to change the appearance and layout of every page in a web site, just by
editing one single file! If you have ever tried to change the style of all elements in
all your HTML pages, you understand how you can save a lot of work by storing
the style definitions in an external file.
To link a CSS to the HTML we use the link tag for example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because we changed it with CSS! </p>
</body>
</html>
Here the relationship is “stylesheet”, the type being the ‘’text/css” file and the css
page is test.css. All css documents have the ‘.css’ extension.
Project Embarked on During SIWES IT
I designed a static webpage using HTML and CSS. The design incorporates lots of
features like color codes, positioning, display, margin, padding and adding images
by specifying the relative and absolute paths etc.
2.3 JAVASCRIPT
21
with the server, and much more. JavaScript is easy to learn.
JavaScript was designed to add interactivity to HTML pages
Any time you include JavaScript verbiage in an HTML document, you must
enclose those lines inside a <script>...</script> tag pair. These tags alert the
browser program to begin interpreting all the text between these tags as a script,
rather than HTML to render. Because other scripting languages (such as Microsoft
VBScript) can take advantage of these script tags, you must specify the kind of
language in which the enclosed code is written. Therefore, when the browser
receives the signal that your script is of the type text/javascript, it employs its
built-in JavaScript interpreter to handle the code (Goodman et al, 2007).
JavaScript can be written in the same page with the HTML but for clarity some
developers prefer writing the scripting language on a separate page. To link
JavaScript to a HTML page we use the script tag. For example:
<head>
22
<meta charset="UTF-8">
<title></title>
</head>
In the example above the <script></script> tells the web browser that is a
JavaScript document, the type ‘’text/javascript’’ specifies it is a JavaScipt type
document and the validate.js is the relative part of the JavaScript document. All
JavaScript document has the “.js” extension.
Primitive Description
Data Type
Null Contains only one value namely, null. A variable of this value
7.5e-3, and so on
operators that allow performing different operations. Javascript operation are classified
4 Arithmetic operators
5 Relational operators
6 Logical operators
7 Assignment operators
8 Bitwise operators
If your first operand is a string and then you add it to a number, JavaScript will
convert the string value to number and then add them up. For example.
4+4=8, 4+”4”=44, 4+4+“4”=84. We can also use a function ‘ParsInt’, it convert
numeric strings to numbers. E.G 4+4+ParsInt(“4”)=12. We can also convert
numbers to strings. E.G (“”
+44) = “44”.
Keywords are special words used by JavaScript engine to perform some tasks. It
can be used as objects, variable names, function names or methods.
Some keywords are ‘Reserved’ words for future use and not presently interpreted.
//statements
}
<html>
<head>
<title></title>
</head>
<body>
<option>Awka</option>
<option>Aba</option>
<option>Asaba</option>
<option>Onitsha</option>
<option>Warri</option>
<option>Owerri</option>
<option>Abakiliki</option>
</select><p>
</form>
function verification(){
return true; } }
CHAPTER THREE
During the course of my SIWES training, several challenges were faced which impacted the
learning experience:
training was challenging. Many organizations either had limited spaces for interns or
refused to accept students for shorter attachments like six months, preferring long-term
commitments.
2. Financial Challenges: Most companies did not provide financial support or stipends for IT
students. This lack of financial assistance made it difficult to cover transportation, meals,
mentorship from the organization, which limited exposure to certain technical tasks or
5. Unclear Expectations: Some organizations did not clearly outline their expectations for
SIWES is crucial for bridging the gap between academic learning and practical, hands-on
professional standards, workplace ethics, and time management skills needed in their future
careers.
3. Skill Development: SIWES helps students acquire technical skills that are not always
available in academic institutions, such as handling modern machinery, software, and other
4. Job Market Readiness: The program helps students to understand industry expectations,
thus preparing them for the competitive job market after graduation.
1. Better Placement Coordination: Universities and regulatory bodies should work closely
with industries to ensure that enough placements are available for students, including
2. Stipends or Allowances: The Industrial Training Fund (ITF) and partnering organizations
should provide stipends or financial support to students during their industrial training to
or supervisors to interns, ensuring they receive proper guidance and feedback throughout the
program.
4. Up-to-Date Equipment and Facilities: Training institutions and host organizations should
ensure that students have access to the latest technologies and equipment to stay relevant in
commencement of the program can help students understand the workplace environment,
students can provide input on their experiences, and the feedback is used to improve future
1. Be Proactive: Take the initiative to seek opportunities for learning and participate actively
in tasks assigned to you. Don’t wait for instructions; ask questions and be willing to take on
challenges.
2. Learn Soft Skills: Beyond technical skills, develop strong communication, teamwork, and
3. Follow Workplace Ethics: Be punctual, respectful, and adhere to the rules and regulations
of the organization. This will leave a positive impression and increase your chances of
4. Network Actively: Build professional relationships with your colleagues, supervisors, and
other industry experts. These connections may help in future job searches.
5. Document Your Experience: Keep a record of the tasks and projects you work on during
the program. This will not only help in your final report but also in showcasing your skills to
potential employers.
1. Provide Clear Guidance: Clearly define the roles and responsibilities of interns at the
beginning of the program to avoid confusion and ensure that their tasks align with learning
objectives.
2. Mentorship: Assign a dedicated supervisor or mentor to each trainee, ensuring they receive
adequate guidance, feedback, and access to learning opportunities throughout their time in
the organization.
3. Hands-On Exposure: Give trainees practical experience by involving them in real tasks or
projects rather than limiting them to minor roles. This enhances their skill development.
4. Offer Feedback: Regularly provide constructive feedback to help trainees improve their
Conclusion
with valuable practical experience that prepares them for the workforce. While the program has
proven beneficial in exposing students to industry practices and work environments, there are still
areas for improvement, particularly in placement coordination, mentorship, and financial support.
By addressing these issues, SIWES can be further strengthened to offer a more rewarding and
effective learning experience. The program plays a significant role in building a skilled workforce,
and with continued refinement, it will continue to contribute to the development of competent