0% found this document useful (0 votes)
29 views

Web Development

Uploaded by

godswillsilva111
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
29 views

Web Development

Uploaded by

godswillsilva111
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 46

A TECHNICAL REPORT

OF

STUDENT INDUSTRIALWORK EXPERIENCE SCHEME (SIWES)

HELD AT

E-GOVERNANCE BUREAU YENAGOA

BAYELSA STATE

WRITTEN BY:

ABEKE BEAUTY SIENIBEBH

FUO/20/CSI/14292

SUBMITTED TO:

DEPARTMENT OF COMPUTER SCIENCE AND INFORMATICS FACULTY OF

SCIENCES

FEDERAL UNIVERSITY OTUOKE, BAYELSA STATE

IN PARTIAL FULFILMENT FOR THE AWARD OF BACHELOR OF SCIENCE (B.SC

COMPUTER SCIENCE AND INFORMATICS)

APRIL - SEPTEMBER 2024

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

through my period of Industrial training successfully. My sincere appreciation and heartfelt

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

CHAPTER ONE: INTRODUCTIONS

Background

Objectives of SIWES

HISTORY AND EVOLUTION OF E-GOVERNANCE

The organizational chart of E-GOVERNANCE BUREAU

Department and their function

CHAPTER TWO : Activities during the SIWES

JAVASCRIPT

10

CHAPTER THREE

Problems Encountered

30
lOMoARcPSD|20324451

Relevance of the program

30

Conclusion

30

C HAPTER FOUR

Recommendation and suggestion for improvement of the scheme

32
lOMoARcPSD|20324451

CHAPTER ONE

1.1 Introduction and History of SIWES

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)

1.2 Scope and Importance of SIWES

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

1.3 Importance of SIWES


• Prepare Students for the real work situation they will meet after graduation.

• 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.

• Strengthen employer involvement in the entire educational process and prepare


Students for employment opportunities.

• Promote the desired technological know-how required for the advancement of the nation.
(Agunwa, 2012).

1.4 Role of the Industrial Training Fund (ITF)

• Formulation of guidelines and policies on SIWES.

• Organization of orientation programs for students prior to SIWES attachment.

• Carry research into operations of SIWES and recommend improvements if need be.

• Supervise students on SIWES attachment.

• Disburse supervisory and students allowances.

• Provide Insurance cover for students on SIWES attachment. (Agunwa, 2012).

1.5 The Role of the Students

• Attend SIWES Orientation Program organized by Institution in conjunction with ITF.


• Be obedient to constituted authorities.
• Be regular and punctual to work.
• Avoid change of place of SIWES attachment outside the allowed time frame.

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).

1.6 The Role of the Institution

• Establishment of SIWES units on Institutions and equipping them.

• Supervise Students on SIWES attachment and sign logbooks.

• Organize orientation courses in collaboration with ITF.

• Assess students Technical Reports and award grades.

• Submit comprehensive reports to supervising Agencies and ITF.

• Submit ITF Form 8 to ITF at the end of each SIWES year. (Agunwa, 2012).

1.7 HISTORY AND EVOLUTION OF E-GOVERNANCE

E-Governance is the use of information and communication technologies to transform


governance by making it more accessible, effective, efficient, and accountable. It is reinventing
the business of government through new ways of integrating information and making it
accessible over networks and the internet. It involves efficient and effective procurement and
delivery of services by electronic means.

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

Project Account & Planning research Application Training


Network & & statistics
manageme Finance Department Department
Infrastructure
nt office

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.

2.1 Web Development Using HTML

As an outgrowth of SGML (Standard Generalized Markup Language), HTML is


generally viewed as nothing more than a document formatting, or tagging,
language. The tags (inside
<> delimiter characters) instruct a viewer program (the browser or, more
generically, the client) how to display chunks of text or images [CITATION 07 \l
1033 ]
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.
Web browsers can read HTML files and render them into visible or audible web
pages. HTML describes the structure of a website semantically along with cues for
presentation, making it a markup language, rather than a programming language.
HTML was developed in 1980 by an English physicist Tim Berners-Lee.

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:

<! DOCTYPE html>

<html>
<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</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>

HTML tags normally come in pairs like <p> and </p>

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

Below is a visualization of an 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

The <!DOCTYPE> declaration helps the browser to display a web page correctly.

There are different document types on the web.

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>

3.1.2 HTML - WEB COLORS

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>

<table bgcolor="rgb(0, 0, 255)" border="1"><tr>


<td>A blue colored table background using numeric, RGB values "rgb(0, 0,
255)".</td>
</tr></table>

<table bgcolor="lime" border="1"><tr>


<td>A lime colored table background using color names.</td>
</tr></table>

Table Bgcolor Values:

A lime colored table background


using color names.

A red colored table background using hexadecimal


values "#FF0000".

A blue colored table background using numeric, RGB values


"rgb(0, 0, 255)".

Fig. 2.1 Html Table

2.1.3 HTML - WEB FORMS


HTML web forms are a composition of buttons, checkboxes, and text input fields
embedded inside of HTML documents with one goal in mind: to capture user
input. By doing things such as providing fields for user data such as names, phone
number, and email addresses, web forms give users the opportunity to interact
directly with a webpage.
HTML forms are placed on a web page using the <form> tag. This tag should
encapsulate a series of other form elements, identifying them as a single cohesive
web form.
HTML FORM ELEMENT:
<form name="myWebForm" action="myServerSideScript.php" method="post">
<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>
HTML WEB FORM:

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:

HTML - TEXT FIELDS

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 - SUBMIT BUTTONS


Submit buttons send form data to a back-end process or application. The back-end
process then verifies and processes the data, eventually passing the information
into some database application.
Set the type attribute of the <input> tag to "submit" in order to place a submit
button on a web page.
HTML SUBMIT BUTTONS:
<input type="submit" value="Submit" />
<br /> <input type="submit" value="Send" />
<br /> <input type="submit" value="Submit Form" /><br />

2.1.4 HTML - FORM SUBMISSION - ACTION


Submission buttons send form data to whatever action has been designated by the
action attribute of the encapsulating <form> element. The code below will send
the form data’s to an email address ([email protected]).
HTML CODE:
<form method="post" action="mailto:[email protected]" > First:<input
type="text" name="First" size="12" maxlength="12" /> Last:<input type="text"
name="Last" size="24" maxlength="24" />
<input type="submit" value="Send Email" />
14
</form>

2.1.5 HTML - UPLOAD FORMS


Upload fields provide the interface that allows users to select a local file and
upload it to the web server. An upload field renders as two parts -- an empty text
field and a Browse button that opens up a local window explorer on the user's
computer. This allows them to quickly browse to the local file and automatically
fills in the file path inside of the text field.
Setting the type attribute of the <input> to "file" places the upload element on a
web page.
HTML UPLOAD FIELD CODE:
<form name="myWebForm" action="mailto:[email protected]"
method="post">
<input type="file" name="uploadField" />
</form>

HTML - TEXTAREAS

An HTML textarea is an oversized Text Field capable of capturing "blurb" type


information from a user. If you've ever posted on a forum or left feedback on your
favorite blog, you probably do so using an HTML textarea.
Embed textareas in HTML documents using the <textarea> tag.

HTML TEXTAREA CODE


<textarea name="myTextArea"cols="20" rows="10">Please limit your response
to 100 characters.</textarea><br />
<textarea name="myTextArea" cols="40" rows="2">Please limit your response
to 200 characters.</textarea><br />
<textarea name="myTextArea" cols="45" rows="5">Please limit your
response to 500 characters.</textarea><br />
HTML TEXTAREA FORM ELEMENT:

Please limit your


resp

Please limit your response to 200 e


charact

Please limit your response to 500


characters.

2.1.6 HTML - DIV ELEMENT(S)


Web developers use <div> elements to group together HTML elements and apply
CSS styles to many elements at once. For instance, by wrapping a set of paragraph
elements into a <div> element, the developer can take advantage of CSS styles and
apply a font to all paragraphs at once by applying a font style to the <div> tag
instead of coding the same style for each paragraph element.
HTML DIV ELEMENT CODE:
<div id="myDiv" name="myDiv" title="Example Div Element">
<h5>Subtitle</h5>
<p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div>
With these text elements now grouped together under a <div> element, we can
alter the appearance of each underlying element collectively by applying a style
attribute to the <div> tag.
HTML DIV ELEMENT CODE:
<div id="myDiv" name="myDiv" title="Example Div
Element" style="color: #0900C4; font: Helvetica 12pt;border: 1px
solid black;">
<h5>Subtitle</h5>
<p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div>
HTML DIV ELEMENT IN ACTION:

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.

2.2.4 CSS Example

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, p, a{ margin: 0px;
padding: 0px;
}

#wrapper{ width: 100%; height: auto;


}
#header{ width: 100%; height: 50px;
background-color: #333333; position: fixed;
z-index: 20; /*change the value of section-bar's top anytime you change this
value*/
}
ul#nav-bar{
list-style-type: none; float: right;
}
ul#nav-bar li{ float: left;
}
ul#nav-bar li a{
display: block; margin: 0px 15px; color: #ffffff;
text-decoration: none; line-height: 50px;
}
ul#nav-bar li a:hover{ color: #666666;
}

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.

Fig 2.2 Static Webpage

2.3 JAVASCRIPT

JavaScript is a high-level, dynamic, untyped, and interpreted programming


language.
This language which was developed by Brendan Eich in 1995 under the name
Mocha but was officially called Livescript before it was later called Javascript is
the client side scripting language of the Web.
JavaScript is used in billions of Web pages to add functionality, validate forms,
communicate

21
with the server, and much more. JavaScript is easy to learn.
JavaScript was designed to add interactivity to HTML pages

2.3.3 ADVANTAGES OF JAVASCRIPT

• JavaScript can react to events – A JavaScript can be set to execute when


something happens, like when a page has finished loading or when a user clicks
on an HTML element.
• JavaScript can be used to validate data - A JavaScript can be used to validate
form data before it is submitted to a server. This saves the server from
extra processing.
• A JavaScript can be used to detect the visitor's browser, and load another page
specifically designed for that browser.
• JavaScript can be used to create cookies - A JavaScript can be used to store and
retrieve information on the visitor's computer.
• JavaScript can read/write/modify HTML elements - A JavaScript can read and
change the content of an HTML element.

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>

<script type="text/javascript" src="validate.js"></script>

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.

2.3.4 JAVASCRIPT DATA TYPES

Primitive Description

Data Type

Boolean Contains only two values namely, true or false

Null Contains only one value namely, null. A variable of this value

specifies that the variable has no value. This null value is a

keyword and it is not the same as the value, zero

Number Contains positive and negative numbers and numbers with

decimal point. Some of the valid examples include 6, 7.5, -8,

7.5e-3, and so on

String Contains alphanumeric characters in single or double quotation

marks. Single quotes are used to represent a string, which itself

consists of quotation marks. A set of quotes without any

characters within it is known as the null string


2.3.5 JAVASCRIPT OPERATORS

Operators and their types

Operators help in simplifying expressions. JavaScript provides a predefined set of

operators that allow performing different operations. Javascript operation are classified

into six categories based on the action they on operands.

3 Six categories of operators are as follows:

4 Arithmetic operators

5 Relational operators

6 Logical operators

7 Assignment operators

8 Bitwise operators

9 Special operators perform on operands.

10 Arithmetic operators: are binary operation

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”.

2.4 KEYWORDS AND RESERVE WORDS

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.

2.4.1 JAVASCRIPT FUNCTIONS


JavaScript function: A collection of JavaScript statement built-in to perform a
particular task (i.e. declare variables).
Function must be named and can be called (or invoke) by other parts of the script.
It can be called as often as necessary. Example of a function,
function FName() {

//statements
}

A Simple Code to Show Input Form Validation Using JavaScript

<html>

<head>

<script type="text/javascript" src="validate.js"></script>


<meta charset="UTF-8">

<title></title>

</head>

<body>

<font color="red"><b id="text"></b></font><br>

<form method="post" action="validate.php" onsubmit="return verification()">

<font color="red">*</font>&nbsp;Username <input id="uname" type="text"


name="username" value="" oninvalid="this.setCustomValidity('Please enter your
username')" required/><br>
<font color="red">*</font>&nbsp;Password &nbsp;<input id="pword"
type="password" name="password" required/><p>
Confirm Password &nbsp;<input id="cpword" type="password"
name="cpassword" required onforminput="setCustomValidity(value !=
pword.value ? 'Passwords do not match.' : '')"/><br>
<input id="male" type="radio" name="gender" value="male" />male

<input id="fmale" type="radio" name="gender" value="female" />female<p>


Town <select id="town" name="town" >
<option>--select--</option>

<option>Awka</option>

<option>Aba</option>

<option>Asaba</option>

<option>Onitsha</option>

<option>Warri</option>
<option>Owerri</option>

<option>Abakiliki</option>

</select><p>

<a href="#">Terms and Condition</a>

<input id="accept" type="checkbox" name="" value="ON" /> I Agree<p>

<input type="submit" value="submit" />

</form>

Javascript Form Validation Code

function verification(){

var username = document.getElementById("uname").value; var password =


document.getElementById("pword").value; var male =
document.getElementById("male").checked;
var female = document.getElementById("fmale").checked; var location =
document.getElementById("town").value; var terms =
document.getElementById("accept").checked; var errorMsg =
document.getElementById("text");

if(username.length < 1){


errorMsg.innerHTML ="Sorry, Username cannot be empty"; return false;
}else if(password.length < 1){

errorMsg.innerHTML ="Sorry, Password cannot be empty"; return false;


}else if(male===false && female===false){ errorMsg.innerHTML = "Please
select gender"; return false;
}else if(location==="--select--"){ errorMsg.innerHTML = "Please enter location";
return false;
}else if(terms===false){

errorMsg.innerHTML = "You cannot Sign Up without agreeing our terms and


condition"; return false;
}else{

return true; } }
CHAPTER THREE

3.0 Problems Encountered During SIWES

During the course of my SIWES training, several challenges were faced which impacted the

learning experience:

1. Difficulty Securing Placement: Finding a suitable organization to undergo industrial

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,

and other personal expenses during the program.

3. Lack of Proper Supervision: In some instances, there was inadequate supervision or

mentorship from the organization, which limited exposure to certain technical tasks or

critical learning opportunities.

4. Limited Access to Equipment: Some organizations lacked adequate or modern equipment,

making it difficult to gain hands-on experience with state-of-the-art technology.

5. Unclear Expectations: Some organizations did not clearly outline their expectations for

interns, leading to confusion about the role and responsibilities of trainees.

3.1 Relevance of the SIWES Program

SIWES is crucial for bridging the gap between academic learning and practical, hands-on

experience in the workplace. Its relevance includes:

1. Exposure to Real-World Applications: The program provides students with the

opportunity to apply theoretical knowledge from the classroom in real-life work

environments, enhancing their technical and problem-solving skills.


2. Familiarization with Professional Work Environment: It introduces students to the

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

tools used in their field.

4. Job Market Readiness: The program helps students to understand industry expectations,

thus preparing them for the competitive job market after graduation.

5. Building Professional Networks: SIWES offers students the opportunity to build

connections with industry professionals, which can aid in securing employment or

internships in the future.


CHAPTER FOUR

4.0 WAYS TO IMPROVE THE SIWES PROGRAM

To enhance the effectiveness of SIWES, the following improvements should be considered:

1. Better Placement Coordination: Universities and regulatory bodies should work closely

with industries to ensure that enough placements are available for students, including

partnerships with more organizations willing to take on trainees.

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

alleviate financial burdens.

3. Enhanced Supervision and Mentorship: Organizations should assign dedicated mentors

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

a rapidly evolving job market.

5. Pre-Training Workshops: Organizing preparatory workshops and seminars before the

commencement of the program can help students understand the workplace environment,

their responsibilities, and expectations more clearly.

6. Structured Feedback Mechanism: There should be a formal feedback system where

students can provide input on their experiences, and the feedback is used to improve future

placements and the overall structure of the program.


4.1 Advice for Future Participants

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

time-management skills. These will be just as important in your future career.

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

securing employment in the future.

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.

4.2 Advice for Managers and Supervisors

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

performance and build their confidence in handling professional responsibilities.

Conclusion

The SIWES program is an essential component of educational development, providing students

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

professionals across various industries.


REFERENCES

Agwuna, R. N. (2012). Detailed Manual on Siwes Guideline and Operation for


tertiary institution. Nimo, Anambra: Rex Charles and Patrick Ltd.
Goodman D. & Morrison M. (2007). Javascript Bible. Indiana, Canada: Wiley
Publishing Inc.
3
6
lOMoARcPSD|20324451

You might also like