Uploaded by Mohammed Tharwat

Technical Report on Web Dev (1)

advertisement
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
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).
3
CHAPTER TWO
2.1 Overview of the organization of attachment
Established in 1981 by Rajendra S. Pawar and Vijay K. Thadani, NIIT is an Indian Multinational
company that offers learning management and training delivery solutions to corporations,
institutions and individuals in over 40 countries. It has three main lines of business worldwide:
Corporate Learning Group (CLG), Skills and Careers Group (SCG), and School Learning Group
(SLG).
1. Corporate Learning Group - It offers Managed Training Services (MTS), which include
custom curriculum design and content development, learning administration, learning
delivery, strategic sourcing, learning technology and advisory services.
2. Skills and Careers Group - This focuses on providing employability skills to learners. It
includes learning programs in soft skills, business process excellence, retail sales
enablement, vocational skills, digital media marketing, new age IT, Banking, Insurance
and Financial services (through IFBI), Executive Management (through NIIT Imperia)
and BPO/KPO training (through NIIT Uniqua).
3. School Learning Group - It provides technology based learning to government and
private schools. It offers NIIT nGuru learning solutions for schools, which include
Interactive classrooms with digital content, Math Lab, IT Wizard programs and Quick
School software.
NIIT has alliances with global leaders such as Adobe, Cisco, Citrix, EMC, Intel, Microsoft,
Oracle, SAS, Sun and provides training on their platforms. For its academic alliance, the
company has collaborated with 100 leading educational institutes across India, China, New
Zealand, UK, Malaysia, Australia, USA, Canada and Ireland.
2.2 Awards
NIIT was ranked among the Top 20 Companies in the IT Training Industry in 2008 by
TainingOutsourcing.com.
NIIT was acknowledged for its innovation in ICT in Education by UNESCO in 2008.
4
NIITs brand HiWEL received Digital Opportunity Award by World Information Technology
Services Alliance (WITSA) in 2008.
In 2011
Ranked among the Top 20 Best IT Employers, in DQ–CMRs Best Employers Survey.
Conferred with the Excellence in Training Award at ASIAs Best Employer Brand Awards.
Best IT Implementation of the year award conferred to three projects by PC Quest.
In 2012
Featured in the Leaders category in 2012 Global Outsourcing 100 service providers list.
Received Award for Excellence in HR through Technology and Training at ASIA's Best
Employer Brand Awards.
NIIT Technologies' Intranet Prahari bags Skoch Digital Inclusion Award 2012 for the Best
Process Automation Recognized as a Special Category Winner.
Ranked No.3 in Best Companies in Career Growth category in Great Place to work study.
Ranked No. 6 in DQ–CMR Best IT Employer Survey.
Ranked No.1 across all industries globally in the 2012 ASTD (American Society for Training
and Development).
2.3 BEST Awards
2013 – Listed in the Forbes Asia's 200 Best Under a Billion companies.
Ranked 6th in Top Employer category at Asia's Best Employer Brand Awards.
Conferred with Best in HR Strategy in line with Business at Asia's Best Employer Brand
Awards.
Recognized for Excellence in Training at Asia's Best Employer Brand Awards, 2013
5
2.4 Organizational Chart
6
CHAPTER THREE
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.
3.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 (Goodman & Morrison, 2007)
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:
7
<! 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.
8
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>
10
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 3.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>
11
<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. 3.1 Html Table
3.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>
12
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).
3.1.4 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:youremail@email.com" 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:
13
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:youremail@email.com" 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 />
14
3.1.5 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 (youremail@youremail.com).
HTML CODE:
<form method="post" action="mailto:youremail@youremail.com" >
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" />
</form>
3.1.6 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:youremail@email.com" 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.
15
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 characte
Please limit your response to 500 characters.
3.1.7 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.
16
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).
17
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
3.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:
3.2.1 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:

all elements of a specific type, e.g. the second-level headers h2

elements specified by attribute, in particular:

o
id: an identifier unique to the document
o
class: an identifier that groups multiple elements in a document
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.
18
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 pseudoelement 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.
3.2.2 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*/
}
19
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>
20
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 3.2 Static Webpage
21
3.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
with
the
server,
and
much
more.
JavaScript is easy to learn.
JavaScript was designed to add interactivity to HTML pages
3.3.1 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
22
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>
<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.
3.3.2 JAVASCRIPT DATA TYPES
TYPES
SAMPLE
DESCRIPTION
String
“Nuggets”
Series of alphanumeric characters in quotes
Number
27.3
Any number that is not in quotes
Boolean
False
A logical true or false
Object
--
An entity that is define by properties and methods
Function
--
A function definition
Null
Null
A value that is totally devoid of content
23
3.3.3 JAVASCRIPT OPERATORS
Operators are words or expressions that perform on one or two values to get another value.
Operators perform actions on operands [unary and binary]
TYPES
SYMBOL
Comparison
==, !=, >, >=, <, <=,
Assignment
=, +=, -=, *=, /=
Connubial
+, -, *, /
Boolean
&& AND, OR, ! NOT
DATA CONVERSION
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”.
3.3.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 .
3.3.5 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,
24
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> Username
name="username"
value=""
<input
id="uname"
oninvalid="this.setCustomValidity('Please
type="text"
enter
your
username')" required/><br>
<font
color="red">*</font> Password
 <input
id="pword"
type="password" name="password" required/><p>
Confirm Password  <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
25
<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;
26
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; } }
27
CHAPTER FOUR
4.1 INTRODUCTION TO PHP (HYPERTEXT PREPROCESSOR)
PHP is an acronym for “PHP: Hypertext Preprocessor” PHP is a widely-used, open source
scripting language which can also be used as a general purpose programming language.
Originally created by Rasmus Lerdorf in 1994, the reference implementation of PHP (powered
by the Zend Engine) is now produced by The PHP Group. While PHP originally stood for
Personal Home Page, it now stands for PHP: Hypertext Preprocessor, which is a recursive
backronym.
The PHP interpreter only executes PHP code within its delimiters. Anything outside its
delimiters is not processed by PHP (although non-PHP text is still subject to control structures
described in PHP code). The most common delimiters are <?php to open and ?> to close PHP
sections. There are also the shortened forms <? or <?= (which is used to echo back a string or
variable) and ?>. Short delimiters make script files less portable, since support for them can be
disabled in the local PHP configuration, and they are therefore discouraged. The purpose of all
these delimiters is to separate PHP code from non-PHP code, including HTML.
PHP files have extension ".php".
PHP was develop in 1994 by Rasmus Lerdorf, Andi Gutmans and Zeev Suraski.
4.2 COMMON USES OF PHP
PHP performs system functions, i.e. from files on a system it can create, open, read, write,
and close them. The other uses of PHP are:

PHP can handle forms, i.e. gather data from files, save data to a file, thru email you
can send data, return data to the user.

You add, delete, modify elements within your database thru PHP.

Access cookies variables and set cookies.

Using PHP, you can restrict users to access some pages of your website.

It can encrypt data.
28
PHP is embedded in HTML. Its code is enclosed inside the PHP special markup tag that is being
recognized by the PHP parser.
A Simple PHP Code to Display “Hello World”.
<html>
<head>
<title>Hello World</title>
<body>
<?php echo "Hello, World!";?>
</body>
</html>
It will produce following result:
Hello, World!
Environment Setup
In order to develop and run PHP Web pages, three vital components need to be installed on
your computer system.
Web Server - PHP will work with virtually all Web Server software, including Microsoft's
Internet Information Server (IIS) but then most often used is freely available Apache Server.
Download Apache for free here: http://httpd.apache.org/download.cgi
Database - PHP will work with virtually all database software, including Oracle and Sybase but
most commonly used is freely available MySQL database. Download MySQL for free here:
http://www.mysql.com/downloads/index.html
PHP Parser - In order to process PHP script instructions, a parser must be installed to generate
HTML output that can be sent to the Web Browser. This tutorial will guide you how to install
PHP parser on your computer.
29
PHP Parser Installation
Before you proceed, it is important to make sure that you have a proper environment setup
on your machine to develop your web programs using PHP.
Type the following address into your browser's address box.
http://127.0.0.1/info.php
If this displays a page showing your PHP installation related information then it means you
have PHP and Webserver installed properly. Otherwise you have to follow given procedure to
install PHP on your computer.
4.3 PHP SYNTAX OVERVIEW
This chapter will give you an idea of very basic syntax of PHP and very important to make your
PHP foundation strong.
Escaping to PHP
The PHP parsing engine needs a way to differentiate PHP code from other elements in the
page. The mechanism for doing so is known as 'escaping to PHP.' There are four ways to do
this:
Canonical PHP tags
The most universally effective PHP tag style is:
<?php...?>
If you use this style, you can be positive that your tags will always be correctly interpreted.
Short-open (SGML-style) tags
Short or short-open tags look like this:
<?...?>
Short tags are, as one might expect, the shortest option You must do one of two things to
enable PHP to recognize the tags:
30

Choose the --enable-short-tags configuration option when you're building PHP.

Set the short_open_tag setting in your php.ini file to on. This option must be disabled
to parse XML with PHP because the same syntax is used for XML tags.
ASP-style tags
ASP-style tags mimic the tags used by Active Server Pages to delineate code blocks. ASP- style
tags look like this:
<%...%>
To use ASP-style tags, you will need to set the configuration option in your php.ini file.
HTML script tags
HTML script tags look like this:
<script language="PHP">...</script>
Commenting PHP Code
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:
Single-line comments:
They are generally used for short explanations or notes relevant to the local code. Here are
the examples of single line comments.
<?
# This is a comment, and # This is the second line of the comment
// This is a comment too. Each style comments only
print "An example with single line comments"; ?>
Multi-lines printing:
Here are the examples to print multiple lines in a single print statement:
<? # First Example
print <<<END
31
This uses the "here document" syntax to output multiple lines with $variable interpolation.
Note that the here document terminator must appear on a line with just a semicolon no extra
whitespace! END;
# Second Example print "This spans multiple lines.
The newlines will be output as well"; ?>
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. Here are the example
of multi lines comments.
<?
/* This is a comment with multiline
Author : Mohammad Mohtashim
Purpose: Multiline Comments Demo
Subject: PHP */
print "An example with multi line comments";
?>
PHP is whitespace insensitive
Whitespace is the stuff you type that is typically invisible on the screen, including spaces, tabs,
and carriage returns (end-of-line characters).
PHP whitespace insensitive means that it almost never matters how many whitespace
characters you have in a row.one whitespace character is the same as many such characters.
For example, each of the following PHP statements that assigns the sum of 2 + 2 to the
variable $four is equivalent:
$four = 2 + 2; // single spaces
$four <tab>=<tab2<tab>+<tab>2 ; // spaces and tabs
32
$four = 2+ 2;
// multiple lines
PHP is case sensitive
Yeah it is true that PHP is a case sensitive language. Try out following example:
<html>
<body>
<? $capital = 67; print("Variable capital is $capital<br>");
print("Variable CaPiTaL is $CaPiTaL<br>");
?>
</body>
</html>
This will produce following result:
Variable capital is 67
Variable CaPiTaL is
Statements are expressions terminated by semicolons
A statement in PHP is any expression that is followed by a semicolon (;).Any sequence of valid
PHP statements that is enclosed by the PHP tags is a valid PHP program. Here is a typical
statement in PHP, which in this case assigns a string of characters to a variable called
$greeting:
$greeting = "Welcome to PHP!";
Expressions are combinations of tokens
The smallest building blocks of PHP are the indivisible tokens, such as numbers (3.14159),
strings (.two.), variables ($two), constants (TRUE), and the special words that make up the
syntax of PHP itself like if, else, while, for and so forth
33
Braces make blocks
Although statements cannot be combined like expressions, you can always put a sequence of
statements anywhere a statement can go by enclosing them in a set of curly braces. Here
both statements are equivalent:
if
(3 == 2 + 1)
print("Good - I haven't totally lost my mind.<br>");
if
(3 == 2 + 1) {
print("Good - I haven't totally");
print("lost my mind.<br>");
}
4.4 VARIABLE TYPES
The main way to store information in the middle of a PHP program is by using a variable.
Here are the most important things to know about variables in PHP.

All variables in PHP are denoted with a leading dollar sign ($).

The value of a variable is the value of its most recent assignment.

Variables are assigned with the = operator, with the variable on the left-hand side and
the expression to be evaluated on the right.

Variables can, but do not need, to be declared before assignment.

Variables in PHP do not have intrinsic types - a variable does not know in advance
whether it will be used to store a number or a string of characters.

Variables used before they are assigned have default values.

PHP does a good job of automatically converting types from one to another when
necessary.
34

PHP variables are Perl-like.
PHP has a total of eight data types which we use to construct our variables:

Integers: are whole numbers, without a decimal point, like 4195.

Doubles: are floating-point numbers, like 3.14159 or 49.1.

Booleans: have only two possible values either true or false.

NULL: is a special type that only has one value: NULL.

Strings: are sequences of characters, like 'PHP supports string operations.'

Arrays: are named and indexed collections of other values.

Objects: are instances of programmer-defined classes, which can package up both
other kinds of values and functions that are specific to the class.

Resources: are special variables that hold references to resources external to PHP
(such as database connections).
The first five are simple types, and the next two (arrays and objects) are compound - the
compound types can package up other arbitrary values of arbitrary type, whereas the simple
types cannot.
PHP – Variables

Local variables

Function parameters

Global variables

Static variables
4.5 A SIMPLE PHP PROGRAM FOR FORM VALIDATION
<?php
session_start();
include 'universal.php';
if($connected){
35
if(mysql_select_db($databasename)){
if ((isset($_POST['Username']))&&(!empty($_POST['Username']))){
$Username = $_POST['Username'];
$_SESSION['Username'] = $Username;
if((isset($_POST['password']))&&(!empty($_POST['password']))){
$Password = $_POST['password'];
$query = "SELECT Username, Password FROM studentdetail WHERE
Username = '$Username'";
if($query){
$qREtrieved = mysql_query($query);
$row = mysql_fetch_assoc($qREtrieved);
$db_username = $row['Username'];
$db_password = $row['Password'];
if(($Username == $db_username)&&($Password==$db_password)){
header('location:webpage.php');
} else {
echo 'Username or password
"forgetpassword.php">Forget Password?</a>';
is
incorrect<br><br><a
href
=
}
}
36
} else {
echo 'Please enter Password. Text Field cannot be empty';
}
}else{
echo 'please enter username. Text field cannot be empty';
}
}
}
4.6 INTRODUCTION TO MYSQL/PHPMYADMIN
PHP has the ability to connect to and manipulate databases. The most popular database system
that is used with PHP is called MySQL. This is a free database system.
MySQL (pronounced My-Ess-Que-Ell) is a relational database management system
(RDBMS).
A Relational DataBase Management System (RDBMS) is a software that:
Enables you to implement a database with tables, columns, and indexes.
To bring up phpMyAdmin type the following address in your browser:
‘http://localhost/phpMyAdmin/’ or ‘127.0.0.1’.
You should see the phpMyAdmin page display:
37
Fig. 4.1 PHP MyAdmin Page
4.7 MySQL
MySQL is an open source relational database management system (RDBMS) based on
Structured Query Language (SQL). MySQL runs on virtually all platforms, including Linux,
UNIX, and Windows. MySQL, which was originally conceived by the Swedish company MySQL
AB, was acquired by Oracle in 2008. MySQL is named after co-founder Monty Widenius's
daughter: My.
The data in a MySQL database are stored in tables. A table is a collection of related data, and
it consists of columns and rows.
To store and retrieve data from database (MySQL), Structured Query Language (SQL) is
required.
38
Fig 4.2 MySQL Page
4.8 Structured Query Language (SQL)
Structured Query Language (SQL) is a special-purpose programming language designed for
managing data held in a relational database management system (RDBMS), or for stream
processing in a relational data stream management system (RDSMS).
SQL was developed at IBM by Donald D. Chamberlin and Raymond F. Boyce in the early 1970s.
A query is a question or a request.
We can query a database for specific information and have a recordset returned.
e.g.: SELECT LastName FROM Employees
We can insert into database specific information.
e.g.: INSERT INTO Employees values (‘somebody’)
We can update information on our database
39
e.g.: UPDATE Employees SET LastName = ‘somebody’ WHERE UserName = ‘thatperson’
We can delete specific information from our database
e.g.: DELETE FROM Employee WHERE Username = ‘somebody’
The example above falls under DML (Data Manipulation Language) which is a subset of SQL
used of adding, updating and deleting data from database.
40
CHAPTER FIVE
5.1 Problems Encountered During SIWES IT
Despite the fact that my Industrial Training was a success, there were some factors that
restricted the fluidity of my internship.

Lack of a suitable accommodation

Distance Barrier

Financial Constraint

Time Factor
Owing to the fact that I could not afford suitable accommodation, I had to resort to public
transport so as to convey myself to work daily. It proved so difficult financing the high cost of
transportation for the duration of the internship. The high demand of the Industry of
attachment of Interns made adaptation difficult for me. The office hours for interns range
between 8am – 6pm and for that reason getting a means of transportation and beating the
crazy traffic in the evening most time becomes a big problem. Sometimes I end up getting to
my house late at night weary and worn out.
5.2 Summary
Web Development.
Web development is a broad term for the work involved in developing a website for the
internet.
A web developer is a programmer who specializes in the development of World Wide Web or
World Wide Web applications.
Programming and scripting languages such as Html, JavaScript, php and Mysql database are
used to develop websites and web applications.
41
Hyper Text Markup Language (HTML) is the main markup language for creating web pages
and other information that can be displayed in a web browser.
Cascading Style Sheet (CSS) it’s a style sheet language used in controlling the look and feel
of your HTML documents in an organized and efficient manner.
NetBeans IDE 8.0 is a powerful application created and developed by Oracle for the creation
of web pages.
JAVASCRIPT is a dynamic computer programming language. It is most commonly used as
part of web browsers, whose implementations allow client-side scripts to interact with the user,
control the browser and alter the document.
PHP is a server-sided Scripting language designed for web development.
MySQL (pronounced My-Ess-Que-Ell) is a relational database management system
(RDBMS).
A Relational Database Management System (RDBMS) is software that enables you to
implement a database with tables, columns, and indexes.
5.3 Conclusion
In conclusion, there were many things that I have experience and learned during the six month
of my Industrial Training at NIIT. The whole training period was very interesting, instructive
and challenging. Through this training I was able to gain new insights and more comprehensive
understanding about the real industry working condition and practice. The six month placement
also has provided me the opportunities to develop and improve my soft and functional skills.
All of this valuable experience and knowledge that I have gained were not only acquired
through the direct involvement in task given but also through other aspect of the training such
as work observation, interaction with colleagues, superior, and other people related to the field.
From what I have undergone, I am very sure that the industrial training program has achieved
its entire primary objectives. It’s also the best way to prepare students to face the real working
life. As a result of the program now I am more confident to build my future career.
42
5.4 Relevance of SIWES Program
It prepares students for the real life work experience and gives them the opportunity to
implement the theories they have learnt in school. SIWES program is a stepping stone to the
life after school and it is a huge foundation to career, national and economic development
since the students are exposed to the nations’ economic and industrial demands.
5.5 Ways of Improving the SIWES Program
In my own humble opinion I would suggest that some measures be meted out for
Organizations in the management of interns so as to ensure that students are tolerated and
protected and at some cases given preferential treatment.
5.6 Advice for Future Participants

Industrial Training application to firms and organizations should be done in time since
most firms look into tiny details a lot which makes which sometimes make processing of
submitted applications take a longer period of time. In most cases leaves the applicant
stranded due to time factor.

Being punctual, hardworking, cultivating good moral value and ethics can improve the
chances of the organization of attachment wanting to work with the student in the near
future.

Always be a great team player. It will help your adaptation and relationship with fellow
interns, staffs and workers.
43
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.
44
Download