KARUME INSTITUTE OF SCIENCE AND TECHNOLOGY
KARUME INSTITUTE OF SCIENCE AND TECHNOLOGY
TITLE: KIST WEBSITE
PRESENTERS:
1.
2.
3.
4.
5.
YAHYA S. ALI
SALUM A. SALUM
MAULID H. KHAMIS
FAROUK S. ALI
ZUBEIDA M. SULEIMAN
DEPARTMENT: ELECTRONICS, TELECOMMUNICATION AND COMPUTER ENGENEERING
SUPERVISOR: WALID K. MOHAMMED
ACADEMIC YEAR: 2011/2012
Karume Institute of Science and Technology
Page i
DECLARATION
This is the website which developed by group of five (5) members of Karume Institute of Science and
Technology (KIST) in a department of Telecommunication, Electronic and Computer Engineering in a
field of Computer Engineering for ordinary diploma course.
We declare that this project was proposed and developed by ourselves without copying anywhere, in
order to solve different problem concern in our Institute.
1.
2.
3.
4.
5.
Names:
Zubeida M. Suleiman
Farouk S. Ali
Yahya S. Ali
Maulid H. Khamis
Salum A. Salum
Admission No:
2846
2850
2860
2855
2858
Signatures:
…………….
…………….
…………….
…………….
……………..
Date: ….../…../………
Karume Institute of Science and Technology
Page ii
ACKNOWLEGMENT
We would like to thanks ALLAH who create every things in the universe and who keep us steel alive.
After that we would like to express our great faithful to our family and fellow students of Karume
Institute of Science and Technology (KIST) for their contribution to achievement of our project.
We would like to thank our teachers like Ms. Latifa S. Ufuzo, Mr. Hamad M. Abdalla, Mussa M.
Mussa, Mr. Hussein, Ms. Salama S. Saleh Etc, for supporting us in our project in various ways.
On the other hand our grateful thanks are supposed to our head of department Mr. Zam S. Zam.
Finally, precisely and obviously peace should be upon our supervisor Mr. Walid K. Mohammed.
Karume Institute of Science and Technology
Page iii
ABSTRACT
KIST website is the website build, design and maintained for the KIST which comprises six (6) modules:
Home, About KIST, Admissions, Academics, Students and Contact Us. Each module contains different
sub modules which have contents concerned with our website.
Karume Institute of Science and Technology
Page iv
PROJECT ORGANIZATION
This document comprises three chapters:
Chapter one consists of Introduction, Problem definition, main objective and Specific Objective.
Chapter two consists of five modules which are About KIST, Admissions, Academics, Students and
Contact us.
Chapter three consists of, Recommendation, Conclusion, Reference, and Cost estimation.
Karume Institute of Science and Technology
Page v
Table of Contents
TITLE
PRESENTERS
DEPARTMENT
SUPERVISOR
ACADEMIC YEAR
DECLARATION
ACKNOWLEGMENT
ABSTRACT
PROJECT ORGANIZATION
i
i
i
i
i
ii
iii
iv
v
CHAPTER ONE
1
Introduction
Problem Definition
Main Objective
Specific Objective
Advantages of Website
Disadvantages of Website
Literature Review
2
2
2
2
3
3
4
CHAPTER TWO
5
HOME MODULE
6
MODULE 1: HOME
Introduction
Analysis and Method
Home Module Organization Chart
Main Codes
Physical Interface of Home Module
Running and Testing Home Module
Conclusion
7
7
7
8
9
13
20
20
ABOUT KIST
21
MODULE 2: ABOUT KIST
Introduction
Analysis and Method
About Kist Module Organization Chart
Physical Interface of About Kist Module
Running and Testing of About Kist Module
Conclusion
22
22
22
23
24
28
28
ADMISSION MODULE
29
MODULE 3: ADMISSIONS
Introduction
Analysis and methods
Admission Module Organization Chart
Module code and scripts
The general codes which make this form with its input method
Physical Interface of Admission Module
Running and Testing of Admission Module
Conclusion
30
30
30
31
32
33
38
43
43
ACADEMICS MODULE
44
MODULE 4 - ACADEMICS
Introduction
Karume Institute of Science and Technology
45
45
Page vi
Analysis and Method
Academics Module Organization Chart
Physical Interface of Academics Module
Running and Testing of Academics Module
Conclusion
45
47
48
69
71
STUDENTS MODULE
72
MODULE 5: STUDENTS
Introduction
Method and Analysis
Students Module Organization Chart
Physical Interface of Students Module
Running and Testing of Students Module
Conclusion
73
73
73
74
75
89
89
CONTACT US
90
MODULE 6: CONTACT US
Introduction
Method and Analysis
Contact Us Organization Chart
Module Codes and Scripts
Main Codes
Physical Interface of Contact Us
Running and Testing of Contact Us Module
Conclusion
91
91
91
92
93
94
97
102
102
CHAPTER THREE
103
Recommendation
Conclusion
References
Project Cost Estimation
Karume Institute of Science and Technology
104
104
104
105
Page vii
CHAPTER ONE
Karume Institute of Science and Technology
Page 1
Introduction
Website is the collection of related Webpages contains image, videos or other digital assets; website is
hosted of one or more web server access via network.
There are various types of website, among of them is educational website, which are dealing with our
project entitled “KIST WEBSITE”.
Kist website is the website build, design and maintained for the KIST which comprises five modules.
Problem Definition
Although there is high rate of development of science and technology but still our Institute information is
in manual form.
Main Objective
The main objective is to design website which can change the manual system exist to computerize system
to provide relevant and current information to the wide audiences base.
Specific Objective
In order to fulfill our main objective KIST website consists the following modules.
About KIST
Admission
Academics
Students
Contact us
Karume Institute of Science and Technology
Page 2
Advantages of Website
The information is available to be accessed by anyone, anywhere, anytime
The information within a site can be quickly accessed. There is no need to sift through several
pages
The site may provide links to other sites on the same topic
The site can be updated to always provide the latest information
You can look at more than one pages or sources at the one time by having numerous windows
Disadvantages of Website
The information on the site may not be reliable
A connection to the web is needed to access the information, which will be impossible if a
computer and connection is not available.
The site may go down or the computer may crash.
Site may be difficult to use if experience with the internet is limited.
Karume Institute of Science and Technology
Page 3
Literature Review
We survey in different School websites in order to get more information that help us to develop our
projects, such areas like SUZA website and Institute of Financials (Chwaka) website, Mist website, as
well as in some areas like KIST library and the main Library of Zanzibar, ICT Solution (Posta). Not only
that but also we visited in different offices of KIST such as Chief Academic Office, General Studies
Office and Administration Office.
Karume Institute of Science and Technology
Page 4
CHAPTER TWO
Karume Institute of Science and Technology
Page 5
HOME MODULE
Karume Institute of Science and Technology
Page 6
MODULE 1: HOME
Introduction
HOME MODULES is the initial webpage in the KIST WEBSITE. It consists only one webpage called
index.html which web server should look at it when user peruse KIST WEBSITE. This module shows
the appearance of whole website.
Analysis and Method
With the intention that once the user decide to visit in the KIST WEBSITE, the first webpage will come
into sight is Home Page.
Home module has only one webpage which is separated into four sections, such as:
Header at the top: Contain the picture which shows the label and the name of Institute, five
Navigation Bars which allow the user to visits in other modules, the clock which show the real
time according to computer settings and pathway to show where you are within the KIST
WEBSITE.
Side Bar at the left side: It consist six (6) common sub modules from different modules with a
links that help the user to visits the vital webpage’s very easily, also at the bottom of the Side
Bar there is a link of latest news obtain in the KIST WEBSITE.
Main Content at the middle: This section contain the picture which show the background, head
office and other offices of Karume Institute of Science and Technology (KIST), also there are
welcome message, and short information’s with link called “more” in order to get more
information about Institute.
Footer at the bottom: it has gray background and contains information which show when the
KIST WEBSITE is designed.
So that wherever the user is in the KIST WEBSITE, can view and access the different modules of KIST
WEBSITE.
NOTE: Each webpage in KIST WEBSITE has the header and footer section which does not change, but
the Side Bar and Main Contents sections can be change according to which webpage the user is visited.
Karume Institute of Science and Technology
Page 7
Home Module Organization Chart
Karume Institute of Science and Technology
Page 8
Main Codes
ELEMENTS
ATTRIBUTES
FUNCTIONS
It acts as container of entire document content.
<HTML>……….. </HTML>
Is used to display title element’s content in the
Browser window’s title bar.
It is used to identify the overall content of document.
<HEAD>………..</HEAD>
<TITLE>………..</ TITLE>
<BODY>………...</BODY>
It used to hold the genuine content of page that the
user sees in the browser window.
BACKGROUND=
BGCOLOR=
Specifies image file that is used as backdrop to the
text or other content of page.
Establishes a fill color (behind the text and other
content) for the entire table.
Used to define number of visible attributes that apply
to the entire table regardless number of rows or
columns within it.
<TABLE>……..</TABLE>
ALIGN=
Determine how element’s text is aligned inside the
element’s block
CELLPADDING=
To shows the amount of empty space between the
Border of table cell and content of cell.
CELLSPACING=
To show amount of empty space between the outer
edges of each table cell.
To increase or decrease the thickness of table.
BORDER=
COLS=
Minimize the need of browser to rely on its
interpretation of all downloaded TR and TD element
to determine how table is to be divided.
Karume Institute of Science and Technology
Page 9
BGCOLOR=
<TD>………..</TD>
<TH>………..</TH>
<TR>………..</TR>
<THEAD>………..</THEAD>
<TBODY>………..</TBODY>
<TFOOT>………..</TFOOT>
<IMG>
ALT=
Establishes a fill color (behind the text
and other content) for the entire table.
Define number of visible attributes
that apply in single cell often
overriding similar attribute set in
lesser- nested elements in a table.
Used as container for content that is
rendered inside one cell of table
element of format that distinguishes it
as a header.
It is used as container for one row of
cell.
Used as specific purpose container of
one or more rows of table cells
rendered at the top of table
It acts as an arbitrary container of one
or more rows of table cells.
Used as specific purpose container of
one or more rows of table cells
rendered at the bottom of table
Display graphical image in whatever
MIME types the browser is equipped
to handle.
To display text when image could not
found.
Permit image to be seen.
SRC=
Defines a named location in a
document to which any URL can
reference by appending a hash mark
and the anchor name to the document.
Allow the link to be clickable.
<A>………..</A>
HREF=
<CAPTION>……</CAPTION>
ALIGN=
VALIGN=
<FONT>………...</FONT>
FACE=
Used as brief description of table.
Determine how element’s text is
aligned inside the element’s block
Used to placing the caption below or
above the table.
Used as container whose contents are
rendered with the font characteristics
defined by element’s attribute?
Allow user to assign a hierarchy of
font families to use for a segment of
text contained by font element.
Karume Institute of Science and Technology
Page 10
COLOR=
Set the font color of all text contained
by font element.
SIZE=
Manage text by increase or decrease
size in font t element.
<STRONG>………..</STRONG
>
It is used to make boldface text.
Used to rendered items with a leading
symbol that implies no specific order
of items other than by virtue of
location within the list.
Used as single list item that is nested
inside UL or OL list container.
Used to rendered items with a leading
Sequence number or letter.
Used to draws a horizontal rule
according to visual rules built into the
browser with a variety of attribute
controls
<UL>………..</UL>
<LI>………..</LI>
<OL>………..</OL>
<HR>
<P>………..</P>
ALIGN=
<DIV>………..<DIV>
<BR>
<I>………..<.I>
<B>………..</B>
<U>………..</U>
<ABBR>………..</ABBR>
<!...COMMENT….>
<H1>………..</H1>
ALIGN=
Used to define a paragraph structure in
a document.
Determine how element’s text is
aligned inside the element’s block
It gives structure and context to any
block-level content in a document.
It forces a visible line break (carriage
return and line feed) wherever its tag
appears in document.
It is italic version of font face
governing the next outermost HTML
container.
It is boldface version of font face
governing the next outermost HTML
container.
It renders the content as underlined
text.
Provides an encapsulation and
enumeration
mechanism
for
abbreviation that appear in the body
text.
To provide remaking
To present the most important
information.
Determine how element’s text is
aligned inside the element’s block.
Karume Institute of Science and Technology
Page 11
<H6>………..</H6>
ALIGN=
<SCRIPT>…</SCRIPT>
CHARSET=
DEFER =
LANGUAGE=
<!DOCTYPE>
LANG=
<MANU>…</MANU>
COMPACT=
<STYLE>…</STYLE>
TYPE=
To present the least important
information.
Determine how element’s text is
aligned inside the element’s block
Provide a container for a line of script
code written in any scripting
language that browser capable to
interprets
Character encoding of contents in
the file referred by SRC attribute.
Tell the browser to look the script to
generate contents as the page load.
It set either false or true
Set the scripting language for
scripting statements defined in the
elements.
This is not a HTML element, but
rathera comment in the standard
generalized markup language
(SGML) format.
The language being used for the
elements attributes values and
content.
It lists the contents in the menu
form.
Render a list in more compact style
than normal.
this s the container for style sheet
rules
The type attribute tells the browser
which style sheet syntax to use to
interpret the style rules defined un
the current element.
Karume Institute of Science and Technology
Page 12
Physical Interface of Home Module
This is a Home Page as explained at Analysis and Method section. At the main contents there is a link as
explained to gets more information’s as shown below.
Karume Institute of Science and Technology
Page 13
When the user click on the “Principals Message” at the side bar, the sub module from the About Kist
module will be opened.
Also at the bottom of Principal Message webpage there is a link called “Home” to return at the Home
page.
Also the user can select the “Courses Offered” link at the side bar of the Home page to view the sub
module called Courses Offered from Academics Module. As shown below.
Karume Institute of Science and Technology
Page 14
So, in this webpage also there is a link at the header Section and bottom of the Main Contents section
called “Home” to return at the home page.
Therefore, by using the Side Bar in the Home page of KIST WEBSITE the user can view the other sub
modules from different Module such as Admission Requirement from Admission module, Programme
from Academics module, Organization Structure from About Kist module and Library from Academics
module as shown below respectively.
Karume Institute of Science and Technology
Page 15
Admission Requirements sub module from Admission module.
Karume Institute of Science and Technology
Page 16
Academics Programme sub module from Academics module.
Karume Institute of Science and Technology
Page 17
Organization Structure sub module from About Kist module.
Karume Institute of Science and Technology
Page 18
Library sub module from Academics module.
Karume Institute of Science and Technology
Page 19
Running and Testing Home Module
The module has been tested and the outputs are:
When the user type “localhost” in the address bar of any web browser, user will be able to
access KIST WEBSITE.
All links in home Webpages are tested so that the user can interact with different links in the
website as shown in the address bar of the picture below.
Conclusion
The home module work well, as we wish.
Karume Institute of Science and Technology
Page 20
ABOUT KIST
Karume Institute of Science and Technology
Page 21
MODULE 2: ABOUT KIST
Introduction
About KIST is the module in KIST WEBSITE which described some information of KIST, such as
History of KIST, Council, Organization Structure, Student government, Future Plan and Staff.
This MODULE is designed with different WebPages which can be linked in the Home page of KIST
WEBSITE; the information will be usefully for students, staff and other people.
Analysis and Method
ABOUT KIST module comprises of six (6) sub modules, namely;
History of Kist: This is the first sub module in About KIST module which describes the
background of Karume Institute of Science and Technology. It helps the user such as students,
teachers, staff and other people inside and outside the KIST to know its background.
Council: This is the second sub module in About KIST module, it shows the council of Karume
Institute of Science and Technology, it start from chairperson, vice chairperson and members.
Org.Structure: This is the third sub module in About KIST module; it shows the organization
structure of Karume Institute of Science and Technology, this sub module is made of three main
arms namely: The council, Advisory committees and the secretariat.
Future Plan: This is the fourth sub module in About KIST module, it describes and shows the
future plan of Karume Institute of Science and Technology, and it can be the current time or
future.
Student government: This is the fifth sub module in About KIST module, it shows the structure
of student government of Karume Institute of Science and Technology and describe the election
process
Staff: This is the last sub module in About KIST module; it shows the all staff of Karume
Institute of Science and Technology.
Karume Institute of Science and Technology
Page 22
About Kist Module Organization Chart
ABOUT KIST
History about KIST
KIST council
KIST organization structure
Future plans
Student government
Karume Institute of Science and Technology
KIST staff
Page 23
Physical Interface of About Kist Module
This is a home page which contains five modules include About KIST module, when you click About
KIST you will see History, then click.
Karume Institute of Science and Technology
Page 24
This page will appear after clicked History from home page.
Karume Institute of Science and Technology
Page 25
When you want this page go to home page, on About KIST click council than will appear as above page.
Karume Institute of Science and Technology
Page 26
This page appears from home page in About KIST you will see Org.Structure than click it to get this
page.
Karume Institute of Science and Technology
Page 27
This page shows the staff of Karume Institute of Science and Technology from About KIST module.
Running and Testing of About Kist Module
The pages was tasted and linked as required.
Conclusion
The pages were tasted accordingly and are works well. But some pages need some development staff
page.
Karume Institute of Science and Technology
Page 28
ADMISSION MODULE
Karume Institute of Science and Technology
Page 29
MODULE 3: ADMISSIONS
Introduction
KIST website it contain six modules which are Home, About Us, Admission, Academics, Students
and Contact Us.
Admission module shows admission requirements of student to join to the Institute
Admission
calendar of the academics years, fees structure of students’ at all level, online registration and
downloaded application form.
This will help the people who would like to join to the institute to see the information first whatever
they are, such requirements, fees, can also people will promote to downloads form and fill at home
or register online
Analysis and methods
All requirement of the Institute to the students or people who want to join to Institute will be
analyze and mentioned in details. This will contain government sponsor student and private sponsor
students minimum requirement to join to the Institute either directly or in directly.
Also will show every place where fees used for, for example transport fees, hostel fees, tuition fees
and other services.
These fees represented direct on the HTML document (web page) in the form of table.
It contains application form of all level from pre entry, ordinary Diploma, short courses and
Bachelor degree. This form are in PDF people can downloaded and fill at home and submit at direct
to the Institute or to the specified location, this form contains full rules and information.
Also give chance to people to apply and register them self-online to the institute by first apply and
register by filling the online form and submit form. When form submitted it automatically going to
database and database administrator process it and reply to the student through student’s e-mail.
Lastly contains active running calendar which show the current date and time and Institute events.
This calendar is in script form.
Karume Institute of Science and Technology
Page 30
Admission Module Organization Chart
Karume Institute of Science and Technology
Page 31
Module code and scripts
In this module it contains codes which apart from main code, this code connect directly to the
database when somebody submitted form:
HTML code: This makes form with deferent type of names and values.
And within this code contain the code that connects to the PHP script.
A form element uses both method and an action to describe how the form will handle the data that
the user inputs into a form.
Syntax:
<form>………….</form>
The method (GET or POST) specifies how you should process the input data from the form and the
action identifies the program (its URL) responsible for handling this data.
Tag with its attribute used in the form
Element
Attribute
<INPUT>
NAME=
SIZE=
MAXLENGTH=
VALUE=
TYPE=
<FORM>
ID=
METHOD=
Function
Define are within the form that will gather the user
data.
Name of the input box.
Size of data to be inputted
Specifies the maximum data to be inputted
Display the values in the input box or button.
This is very important, specifies the type of input
box.
The type may be
TEXT for input box,
CHECKBOX for input check box
IMAGE for browse the image on the location on
your computer.
RADIO for option button
PASSWORD for password inputted the box.
RESSET for reset button.
SELECT for choosing options from Manus.
Create form in HTML format and can formatted to
specify.
Specify identity of the form.
Specify how you should process the input data from
the form and the actions identify the program (its
URL), responsible for handling this data.
The METHOD may be:
GET: not very security not recommended
POST: This is not common in use.
Karume Institute of Science and Technology
Page 32
The general codes which make this form with its input method
<form id="form1" name="form1" method="post" action="sql.php">
<table width="100%" align="left" bordercolor="#0000FF" class="style2">
<tbody>
<tr>
<td
colspan="2"
bgcolor="#CCCCCC"><span
class="style14">
&nb
sp;
&nb
sp; <a
href="#"
class="style3">Registration
form</a> || <a href="#" class="style3">Registered
List</a>
||
<a
href="#"
class="style3">Help</a></span></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" class="style4 style14"><p><br />
</p>
<p><strong>First Name:</strong> </p>
<p> </p>
<p> <strong>
Second Name:</strong> </p>
<p> </p>
<p><strong>
Last Name:</strong> </p></td>
<td align="left" bgcolor="#CCCCCC" class="smalltext style14"><p> <br />
<input class="vform" name="first_name" id="surname" size="30" />
<span class="style12">*</span>
</p>
<p> </p>
<p>
<input class="vform" name="second_name" size="30" id="first_name" />
<span class="style12">*</span></p>
<p> </p>
<p>
<input class="vform" name="last_name" size="30" id="other_name" />
<span class="style13">*</span></p></td>
</tr>
<tr>
<td
height="36"
bgcolor="#CCCCCC"
class="smalltext"><span
class="style14"><strong>Gender:</strong></span></td>
<td align="left" bgcolor="#CCCCCC"><select name="gender" class="vform
style14"
id="gender">
<option value="">
Karume Institute of Science and Technology
Page 33
Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
</tr>
<tr>
<td
height="36"
align="left"
bgcolor="#CCCCCC"
class="smalltext"><span
class="style14"><strong>Phone Number:</strong></span></td>
<td bgcolor="#CCCCCC"><span class="style14">
<input class="vform" name="phone_number" size="30" id="phone_number" />
E-mail
<input class="vform" name="email" size="30" id="email" />
</span></td>
</tr>
<tr>
<td
height="36"
align="left"
bgcolor="#CCCCCC"
class="smalltext
style14"><strong>Parent Phone Number</strong>:</td>
<td align="left" bgcolor="#CCCCCC"><input name="parent_phone" class="vform "
id="parent_phone" size="30" /></td>
</tr>
<tr>
<td
height="36"
align="left"
bgcolor="#CCCCCC"
class="smalltext
style14"><strong>Year of Study:</strong>
<label> </label></td>
<td align="left" bgcolor="#CCCCCC"><span class="smalltext style14">
<select class="vform" name="year_of_study">
<option value="2012/2013">2012/2013</option>
</select>
</span><span
class="style14"> &
nbsp;
Level:
<select name="level" class="vform" id="level">
<option value="">Select Level</option>
<option value="Level 4">Level 4</option>
<option value="Level 5">Level 5</option>
<option value="Level 6">Level 6</option>
<option value="Level1 7">Level 7 I </option>
<option value="Level2 7">Level 7 II</option>
<option value="Level1 8">Level 7 I</option>
<option value="Level2 8">Level 8 II</option>
</select>
</span></td>
</tr>
<tr align="left">
<td height="31" bgcolor="#CCCCCC" class="style11">Department:
<label></label></td>
<td bgcolor="#CCCCCC" class="smalltext"><div align="left" class="style14">
Karume Institute of Science and Technology
Page 34
<select name="department" class="vform" id="department" onchange="SelectCat();">
<option value="">--Department--</option>
<option value="Automotive">Automotive</option>
<option value="Civil Eng">Civil Eng</option>
<option value="Electrical">Electrical</option>
<option value="Transportation">Transportation</option>
<option value="Mechanical">Mechanical</option>
<option value="General Studies">General Studies</option>
<option value="ICT">ICT</option>
</select>
</div></td>
</tr>
<tr align="left">
<td
height="39"
bgcolor="#CCCCCC"
class="smalltext"><div
align="left"
class="style14"><strong>Admission
Number:</strong> </div></td>
<td bgcolor="#CCCCCC" class="smalltext"><div align="left" class="style14">
<input class="vform" name="admission_number" id="admission_number" size="36" />
<span class="style3">(Except-> level 4 & level 7 1st year)</span></div></td>
</tr>
<tr align="left">
<td height="51" bgcolor="#CCCCCC" class="smalltext style14"><strong>Sponsorship
Type:</strong> </td>
<td bgcolor="#CCCCCC"><span class="smalltext style14">
<select name="sponser" id="sponser" class="vform" onchange="generatenew3();">
<option value="">--Select Sponsor--</option>
<option value="Gorvernment">Gorvernment</option>
<option value="Private">Private</option>
</select>
</span></td>
</tr>
<tr align="left">
<td
height="27"
align="left"
bgcolor="#CCCCCC"
class="smalltext
style14">
<div align="left"><strong>Amount Payed (Numeric) Tshs:</strong></div></td>
<td bgcolor="#CCCCCC"><span class="smalltext style14">
<input class="vform" name="amount_figure" id="amount_figure" />
</span></td>
</tr>
<tr align="left">
<td
height="68"
bgcolor="#CCCCCC"
class="smalltext"><div
align="left"
class="style14"><strong> Amount Payed (In Words):</strong></div></td>
<td bgcolor="#CCCCCC" class="smalltext"><textarea name="amount_word" cols="30"
rows="3" class="vform style14" id="amount_word"></textarea></td>
</tr>
<tr align="left">
Karume Institute of Science and Technology
Page 35
<td valign="top" bgcolor="#CCCCCC" class="smalltext style14"><p><strong>Attach
Bank Slip(Scanned Copy): </strong></p>
<p> </p>
</td>
<td bgcolor="#CCCCCC" class="smalltext style14"><p>
<input name="image1" class="vform" id="image1" type="file" />
</p>
<p><br />
Attach extra slip(s) below if you have more than one slip(s) </p>
<p>
<input name="image2" class="vform" id="image2" type="file" />
Optional</p>
<p>
<input name="image3" class="vform" id="image3" type="file" />
Optional</p>
<p>
<input name="submit2" class="button" id="submit2" value="SUBMIT" type="submit"
/>
<input name="submit2" class="button" id="submit3" value="RESET" type="reset" />
</p></td>
</tr>
<tr align="left">
<td width="31%" height="19" bgcolor="#CCCCCC" class="smalltext style14">contact
with webmaster:</td>
<td
width="64%"
bgcolor="#CCCCCC"
class="style14
smalltext"><em>
mollet7@live.com</em></td>
</tr>
</tbody>
</table>
</form>
Karume Institute of Science and Technology
Page 36
PHP scripts which connect directly to the Database
<?php
$con = mysql_connect("127.0.0.1","root","","registers");
if(!$con)
{
die("could not connect:".mysql_error());
}
else
{
echo "HONGERA";
}
mysql_select_db("registers",$con );
$sql
=
"insert
into
staff_registers
(Fist_Name,Second_Name,Last_Name,Gender,Phone_Number,E_mail,Parent_Phone_Number,
Year_of_Study,Department,Admission_Number,Sponsorship_Type,Amount_Payed1,Amount_
Payed2,Attach_Bank_Slip,Attach_Slip1,Attach_Slip2)
values
('$_POST[first_name]','$_POST[second_name]','$_POST[last_name'],'$_POST[gender]','$_PO
ST[phone_number]','$_POST[email]','$_POST[parent_phone]','$_POST[year_of_study]','$_PO
ST[department]','$_POST[admission_number]','$_POST[sponser]','$_POST[amount_figure]','$
_POST[amount_word]','$_POST[image1]','$_POST[image2]','$_POST[image3]')";
if(mysql_query($sql,$con))
{
die('Error:' .mysql_error());
}
echo "KWA AJILI YA MASOMO:";
mysql_close($con);
?>
</body>
</html>
Karume Institute of Science and Technology
Page 37
Physical Interface of Admission Module
Online registration form
This is physical appearance of the online ordinary diploma registration form, this form also contain
the link “click here to download a form” which directly to form which is in .PDF which must print
it and fill it in home. This form will contain two sections
i)
For personal view information.
ii)
For sponsored information.
Also contain the link which is help to show you how to fill online form the form already filled say
Zubeida Moh’d Suleiman .
Last in the form contain the link witch is registered list I show all students who are already
registered by putting its admission number.
Which when click links will appear like this below:
It also contain the link of other form such short courses.
Karume Institute of Science and Technology
Page 38
1. Sponsored information appearance of ordinary diploma form:
2. Personal information physical appearance of ordinary diploma form.
Karume Institute of Science and Technology
Page 39
This is sample of link which provides help for online registration.
It sample of some students.
Karume Institute of Science and Technology
Page 40
Admission requirements
This page is in the tab form first tab for ordinary diploma second for bachelor degrees, it also
contain others small links.
When the user click next link direct you to this page, which talk about Institute regulations.
This page also contains other interior links to other places.
Karume Institute of Science and Technology
Page 41
Physical appearance of fees structure:
It show all Institute fees required to be paid to the institute, it contains two(2) links which is in PDF,
fist is for government sponsored and second for private sponsored. When you have adobe reader in
your machine automatically direct open it but when you have not it will ask you download the file.
Government sponsored fees structures:
Karume Institute of Science and Technology
Page 42
Private sponsored fees structures:
Running and Testing of Admission Module
Pages are tested different web browsers like Mozilla Firefox, Opera, Google chrome and Internet
Explore in the server xampp, apache server.
All the pages were run and tested running well.
And also forms which collect data are tested in the local host in the server like MySQL server.
Some pages are tested well and the data stored and restored in the database.
Conclusion
This module is work well but it needs the development to be more effective.
Karume Institute of Science and Technology
Page 43
ACADEMICS MODULE
Karume Institute of Science and Technology
Page 44
MODULE 4 - ACADEMICS
Introduction
The “Academics” is a comprehensive module concerned with the scholar activities, such as class
activities of our studies or research project.
This MODULE is designed with different Webpages which can be linked in the Home page of KIST
WEBSITE in order to help the students, teachers, other staffs, parents, outside people as well as
management view some academics information of KIST from a remote location. So that these webpages
can be viewed through a Computer, Mobile Phones via Internet very easily.
Analysis and Method
You can access the academics Webpages wherever you are within the KIST WEBSITE by selecting the
text in a drop menu when you are pointing the navigation bar called ACADEMICS, which is obtained in
the header section of any webpage of KIST WEBSITE.
ACADEMICS Module comprises of six (6) sub modules, called Courses Offered, Library, Departments,
Previous Exam Papers, Academics Programme and Projects, and in each sub module there are different
Webpages which can be viewed to see the different information concerned with that module. Such as:
Courses Offered: This sub module has two webpages, first webpage called Main Courses which
show the details about main courses for Ordinary Diploma Programs offered by the Institute,
also it show the details about Pre-Entry Courses for Ordinary Diploma Programme. Second
webpage called Other Courses which show the modules, durations, and fees about Other
Courses offered by the Institute.
Library: This sub module has only one webpage which consist the picture which show the
environment inside the library, the regulations and operating hours of the library.
Departments: It consist eleven webpage’s which show the information with staff members and
modules for each department. When user selects the departments links, the page which consist
the list of departments with short descriptions for each department’s will be opened, also each
department there has a links called “More” which allow the user to see more information about
department, Staff of the department with their picture, and the modules for each level within the
department.
Previous Exam Papers: In this sub module there are nigh teen webpage’s which allows anyone
who visits the KIST WEBSITE to see and download the PDF pages of previous exam papers.
Academics Programme: it consist only one webpage, from this sub module you can see the
structure of the academics program, Curriculum Overview, and the mode of training.
Projects: All students project are listed in this sub module which has only one webpage, so that
you can see and download the projects of different departments and the name of the student who
Karume Institute of Science and Technology
Page 45
designed that project for several academic years.
Therefore wherever the user is in the KIST WEBSITE can view and access the different sub modules of
ACADEMICS MODULE.
Karume Institute of Science and Technology
Page 46
Academics Module Organization Chart
Karume Institute of Science and Technology
Page 47
Physical Interface of Academics Module
This is a home page of kist website in which the Academic module is attached. When the user click on
the academic button at the header section, the drop menu will appear which allow the user to visits the
different webpages from academic module.
Karume Institute of Science and Technology
Page 48
This webpage show that the user visit the sub module called “Courses Offered” to see the Main Courses
which is provided by the Institutes. So that when the user click on the “Main courses” as shown above,
the webpage which show the informations about Main Courses will be opened as shown bellow.
Karume Institute of Science and Technology
Page 49
When the user visits to the Main Courses webpages, he/she will be able to view the other courses
informations by cliking the button called “Other Courses” at the top of the tabbened sprymenu , also to
return at home page by clicking the “Home” link at the bottom, left hand coner of the maincontents.
Karume Institute of Science and Technology
Page 50
Also the user may visit the “Other Courses” web page as shown above.
Karume Institute of Science and Technology
Page 51
This webpage show the list of other courses provided by Istitute, also the user may visit the “Main
Courses” webpage when he/she are in the Other Courses webpage, at the bottom, left hand conner of
the main contents there is a link to return at the home page.
Karume Institute of Science and Technology
Page 52
The picture above show how the user visits the Library webpage.
Karume Institute of Science and Technology
Page 53
The above webpage is called “Library”, it consist the picture of library and the books which are stored,
and other information’s about Intitute library, also the user may return at the home page when he/she
visits the” Library” webpage.
Karume Institute of Science and Technology
Page 54
This is a “Department” submodule which list the all departments in the institute as expalained at the
analysis and method in page no….., with a link called “More” to get other information’s about selected
departmentalso the user will be able to return at the Home page by clicking on the link called “Home”.
Karume Institute of Science and Technology
Page 55
This webpage show the more information’s about Civil and Transportation Engeneering Department with
their staff members in the form of table, also there is a button called “Civil Eng. Module” which allow
the user to view the modules for Civil and Transportation Engeneering Department of each academic
levels, with two links; “Home” to return at the home pageand “Other department” to select another
department as show in the picture below.
Karume Institute of Science and Technology
Page 56
The above webpage show the table which show the modules for all levels provided by Civil and
Transportation Engeneering Department.
Karume Institute of Science and Technology
Page 57
When the user click on the “More” link in the Electronics, Telecommunications and Computer
Engeneering at the department webpage, the more information’s about that department will appear as
follows.
Karume Institute of Science and Technology
Page 58
It has two blue Bars with a links to see the modules of all levels within the department. When the user
scrolls the scroll Bar can be able to see the table of staff members and views the picture for each staff
when he/she click on the photo icon as shown below.
Karume Institute of Science and Technology
Page 59
It show the names, qualification and photos of staff members in Electronics, Telecommunications and
Computer Engeneering .
Karume Institute of Science and Technology
Page 60
When the user click on the “Electronics & Telecommunications Engeering Modules” Bar as shown
above, the webpage will scroll automatic to show the table modules of all levels in Electronics and
Telecommunication Engeneering section.
The same action will appear when the user click on the “Computer Engeneering Modules” bar to see
the table modules for all levels in Computer Egeneering section.
Karume Institute of Science and Technology
Page 61
When the user click on the “Previous Papers” submodule as shown above, he/she can be able to views
and downloads the past papers in a pdf format as shown below.
Karume Institute of Science and Technology
Page 62
This webpage show the table which consists the month, year, semister and images which contain the link
to view or download the past papers.
Karume Institute of Science and Technology
Page 63
When the user click on the image icon as explained above, the above webpage will be opened in order to
select department you need to view and download the past papers in pdf format as shown below.
After the user select the “Computer Engeneering”, the past papers is opened as shown above, so that the
user can download if it’s needed.
Karume Institute of Science and Technology
Page 64
Now the user click on the “Programme” sub module as shown above to view the overall structure of
academics programme, curriculum overview and mode of training , so that the webpage will be opened as
shown below.
Karume Institute of Science and Technology
Page 65
This is a sub module called “Academic Programme” which show the academics programme
informations for the Institute.
Karume Institute of Science and Technology
Page 66
The last sub module in the academics module is called “Projects” which consists the short information’s
about ordinary diploma projects, the name of students who create the projects and projects name for each
departments.
Karume Institute of Science and Technology
Page 67
This is a last webpage in my module called “Students Project”. So that any webpage the user visits
has a link to return at the home page of KIST WEBSITE.
Karume Institute of Science and Technology
Page 68
Running and Testing of Academics Module
The user can views and downloads the Previous Exam Papers as tested below.
Karume Institute of Science and Technology
Page 69
Karume Institute of Science and Technology
Page 70
Conclusion
The Academics Modules is completely and work well as required, but it need more modification by
adding other information’s relating to academics for more affective.
Karume Institute of Science and Technology
Page 71
STUDENTS MODULE
Karume Institute of Science and Technology
Page 72
MODULE 5: STUDENTS
Introduction
Students module is among of six modules that built KIST WEBSITE, this module projected to allow
students, parents and other people in society to entrance Examination results, Examination time
table, Grading system information and different events occurred by using computer, phone and
other sources via internet.
Method and Analysis
This module start from home page which contains other five module, when user choose students
module than user will be capable to view the other four sub module which are examination time
table, grading system, year event calendar and examination results. When user select examination
time table user will be able to view short introduction about KIST, time table regulation also two
link that named as morning and afternoon , this link have time table which contains full information
about examination process such as date, time, name of subject act as well as link that return user to
home page, when user decide to pick grade system sub module might access definition of grade
point average (GPA) and formula used to calculate it, classification of award and grading system
and score range for NTA Level 4,5 and 6.The sub module go after grading system is calendar in
this sub module user may able to see institute calendar and link that will allow users to back to the
home page finally, user may possibly to sight examination results which split in term of semester
(semester 1 and semester 2) and information concerning overall performance of students for each
semester.
Karume Institute of Science and Technology
Page 73
Students Module Organization Chart
Karume Institute of Science and Technology
Page 74
Physical Interface of Students Module
This is a home page which contains other five modules which are about us, Admission, Academics,
Students and the last one is Contact us. Here we will talk about students module which is between
Academics and Contact us,
in order user to access student module first user should browse this
home page as shown in picture above.
Karume Institute of Science and Technology
Page 75
After that pick students module from horizontal menu bar as publicized than sub menu will opened
which have sub module which are Examination time table, Grading system, Calendar and
Examination results. This module designed in simple way to make sure user can interact from one
page to another easily.
Karume Institute of Science and Technology
Page 76
When user fix on examination time table as shown above the content of home page will be replaced,
as shown in followed page.
Karume Institute of Science and Technology
Page 77
This is information enclosed in examination time table sub module, the short introduction of KIST,
time table regulation, home link that will let user to reverse to the home page and other two link
named morning and afternoon will allow user to view Time table, When user click morning or afternoon
the page will be modified as shown in the next page.
Karume Institute of Science and Technology
Page 78
This is a table that will appear when user click on morning or afternoon link, below of table there link
named as back that return user to the examination time table page.
Karume Institute of Science and Technology
Page 79
When the user decide to pick grading system section, the home page will replaced as it will be
shown in the next page
Karume Institute of Science and Technology
Page 80
This page contain three important information which are grade point average (GPA) definition,
formula used to calculate it and table that show classification awards for NTA Level 4,5 and 6 also
link that hold name home which go back to home page and next link to allow user to view second
page. When user clicks next he/she may able to view another new page shown next page.
Karume Institute of Science and Technology
Page 81
The page will be look like this when user click next link and when user click home link may able to
return in home page.
Karume Institute of Science and Technology
Page 82
Other part that enclosed in student module is calendar, this part allow user to see all event that take
place, date and weeks in year of studies for both NTA Level see picture in the followed page.
Karume Institute of Science and Technology
Page 83
Karume Institute of Science and Technology
Page 84
Last part in student module is examination result which separated in term of first semester and
second semester as shown, when user click one of them page will be opened that hold the results
according to their years, as shown in picture in followed page.
Karume Institute of Science and Technology
Page 85
This page will be opened when user click second semester result but it same when user click first
result,
When user select year example 2011/2012, other page will be opened which contain result according
to their department look followed picture also link that allow user to go back to home page.
Karume Institute of Science and Technology
Page 86
And when user selects one of NTA Level example NTA Level 4 at computer department next page
will be appear that hold professional results, also this page contain link that allow user to return at
page shown above.
Karume Institute of Science and Technology
Page 87
Examination result for each NTA Level will be release as shown, lager table that hold result and
smaller table that show overall performance of each c lass.
Karume Institute of Science and Technology
Page 88
Running and Testing of Students Module
The test that I made in this module is uploading files in examination results folder, first I convert file
into html document because results are in html form than by using file transfer protocol named
filezilla client I could upload file to the KIST website easily. See picture below
.
Conclusion
This module is tested and carry out their tasks as I wish but some target could not executed because
of lack of sufficient time to do as a result this module required to modified so as student can able to
view examination results individual furthermore examination results after supplementary
examination.
Karume Institute of Science and Technology
Page 89
CONTACT US
Karume Institute of Science and Technology
Page 90
MODULE 6: CONTACT US
Introduction
Contact is the one among the module of KIST WEBSITE, this module contain four pages such as Kist map,
Mission and Vision, Web mail as well as Kist contact. In the Kist contact there are subpages which are Council’s
contact and management’s contact.
As known that contacts are used to simplify many activity so it allow people who will visit our website to get
more information about our institute as well as to send their suggestion and the management will replay to them.
Method and Analysis
You can access the Contact Webpages wherever you are within the KIST WEBSITE by selecting the
text in a drop menu when you are pointing the navigation bar called which is obtained in the header
section of KIST WEBSITE.
In this module there is a management contacts which the visitors can use to communicate with them so
as to get more information concern with our Institute, these contact presented in form of HTML page.
Also it contain map which show the location where the KIST is located. This map is presented in the
form of image.
In other hand this module contains the page that shows the VISION and MISSION with its VALUES of
the Institute. This page presented in HTML forms.
The other page in this module is Web mail page that contain subpages like Login page where the stuff
can enter their username and password so as to login and get the chance to see the important information
of the Institute. But if the stuff enter incorrect username or password the error page will appear (Redirect
page), also contain the form that allow the visitors to post their comment and the administrator can
replay to them if necessary through their email. Besides that there is a database that stores the username
and password of the stuff and the PHP script which connect the database and HTML form so as to make
the authentication of the login page.
Karume Institute of Science and Technology
Page 91
Contact Us Organization Chart
CONTACT
MISSION
KIST MAP
&
VISION
WEBMAIL
KIST CONTACTS
COUCIL
MANAGEMENT
Karume Institute of Science and Technology
Page 92
Module Codes and Scripts
In this module contains codes which is apart from main code, this module also have a code that allow
the connection directly to the database when the stuffs are login.
HTML code: This makes form with deferent type of names and values, and contain the code that
connects to the PHP script.
A form element uses both method and an action to describe how the form will handle the data that the
user inputs into a form.
<form>…………. </form>
The method (GET or POST) specifies how you should process the input data from the form and the
action identifies the program (its URL) responsible for handling this data.
Tag with its attribute used in the form
Elements
<INPUT>
Attributes
NAME=
SIZE=
MAXLENGTH=
VALUE=
TYPE=
<FORM>
ID=
METHOD=
Functions
Define are within the form that will gather
the user data
Name of the input box
Size of data to be inputted
Specifies the maximum data to be inputted
Display the values in the input box or button
This is very important, specifies the type of input box,
the type may be TEXT for input box, PASSWORD for
password inputted the box, RESET for reset button,
SELECT for choosing options from Manus
Create form in HTML format and can formatted to
specify.
Specify identity of the form.
Specify how you should process the input data from the
form and the actions identity the program (its URL),
responsible for handling this data.
The METHOD may be :
GET: not very security not recommended
POST: This is not common in use.
Karume Institute of Science and Technology
Page 93
Main Codes
This part contains the some PHP and HTML code used in this module.
The codes Used to Show Login Page
<Html>
<Body>
<form action="checklogin.php" method="post">
<table border="0" cellpadding="0" cellspacing="0" height="400" width="100%">
<tbody><tr>
<td align="center" height="400" valign="middle" width="100%"><div align="center"><table
background="login.php_files/bg_login.png" border="0" cellpadding="0" cellspacing="0" height="222"
width="424">
<tbody><tr>
<td colspan="4" height="113" valign="bottom"><table border="0" cellpadding="0"
cellspacing="0" width="423">
<tbody><tr>
<td height="50" width="125"> </td>
<td height="50" width="298"><img src="login.php_files/anm.gif" alt="Webmail Logo"
height="81" width="124"><br>
</td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td colspan="4" height="12"></td>
</tr>
<tr>
<td rowspan="3" width="130"></td>
<td width="55"><div align="left">Name:</div></td>
<td colspan="2" height="25"><div align="left"><input name="myusername" value=""
type="text" id="myusername">
</div></td>
</tr>
<tr>
<td width="55"><div align="left">Password:</div></td>
<td colspan="2" height="25"><div align="left"><input name="mypassword" type="password"
id="mypassword">
</div></td>
</tr>
<tr>
<td height="47" width="55"><img src="login.php_files/bg_line_other.htm" height="1"
width="1"><img src="login.php_files/bg_line_other.htm" height="1" width="1"></td>
<td width="61"><div align="left"><input value="Login" type="submit">
</div></td>
Karume Institute of Science and Technology
Page 94
<td width="178"><center><table border="0">
<tbody><tr><td valign="center">
<input name="cb_auto_pass" value="true" type="checkbox">
</td><td nowrap="nowrap" valign="center">
<small>Remember my Name & Password<small>
</small></small></td></tr>
</tbody></table></center>
</td>
</tr>
</tbody></table>
</div></td>
</tr>
</tbody></table>
</form>
</body></html>
The Codes for Checking Login Page
$host="localhost"; // Host name
$username="root"; // Mysql username
$password=""; // Mysql password
$db_name="test"; // Database name
$tbl_name="members"; // Table name
// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
// username and password sent from form
$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];
// To protect MySQL injection (more detail about MySQL injection)
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysql_real_escape_string($myusername);
$mypassword = mysql_real_escape_string($mypassword);
$sql="SELECT
*
FROM
password='$mypassword'";
$tbl_name
WHERE
username='$myusername'
Karume Institute of Science and Technology
Page 95
and
$result=mysql_query($sql);
// Mysql_num_row is counting table row
$count=mysql_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row
if($count==1){
// Register $myusername, $mypassword and redirect to file "login_success.php"
session_register("myusername");
session_register("mypassword");
header("location:test.html");
}
else {
Header ("location: Redirect.html");
}
Ob end flush ();
?>
Karume Institute of Science and Technology
Page 96
Physical Interface of Contact Us
This is a mission & vision page that shows the mission and vision of the Institute as well as its Values.
Karume Institute of Science and Technology
Page 97
In this page the visitors can able to submit their comments and only stuffs are able to login. When the
stuff click can reach the following page.
Karume Institute of Science and Technology
Page 98
This is a login page which allow the stuff to login. If the username or password is incorrect the
following page will apear.
Karume Institute of Science and Technology
Page 99
This is an Webmail error page.
Karume Institute of Science and Technology
Page 100
This is a KIST contact page which allows the visitors to see the management contact.
Karume Institute of Science and Technology
Page 101
Running and Testing of Contact Us Module
This module is tested and work well as I wish.
Conclusion
This module is being tested and works well. But there is a chance to develop at the login part after the
stuff login to have the able to upload the files like assignments, home woks or notes to their students and
the students have the able to download it.
Karume Institute of Science and Technology
Page 102
CHAPTER THREE
Karume Institute of Science and Technology
Page 103
Recommendation
We believe with some developments, these pages can be used by the Institute (KIST) as per function
already developed.
Conclusion
This website tested and hopefully it will carry out their tasks efficiently as we wish by given user’s
full information’s about KIST local system to new system.
This website need some modification as it concluded at each module.
References
http://www.mist.ca.tz
http://www.mahaveer.com
http://www.phpeasystep.com
http://www.aist.ac.tz
http://www.dit.ac.tz
http://www.about.com
http://www.google.com
http://www.w3schools.com
Karume Institute of Science and Technology
Page 104
Project Cost Estimation
For computing these project, there are number of costs faced us. Such as internet services in different
internet café to search materials needed for our project, special flash for backup our project, a
computer that we use for designing, developing and testing. Other costs are buying of different
software’s used for designing the website projects such as Adobe Dreamweaver, Adobe Macromedia,
XAMPP Server, Filezilla, MSQL Server, Adobe Photoshop, Also CD/DVD for backup and keep up
our project safely, Not only that but also the Transport for visiting different area’s to surf materials.
The table below show the total cost which we spent during preparation to the end of our project.
ITERM
Internet
Flash
Computer (Laptop)
Software’s
CDs/DVDs
Transport
Printing (Documentation)
TOTAL
QUANTITY
1
1
8
5
8
COST
15,000/=
25,000/=
500,000/=
20,000/=
5,000/=
50,000/=
100,000/=
715,000/=
Karume Institute of Science and Technology
Page 105
© Copyright 2024