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> [email protected]</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