Improving ICT websiteict.siit.tu.ac.th/senior-itcs/final/report-pa5.pdfSenior Project 2014 Improving ICT website School of ICT, SIIT 5 This is our news and announcement page which

PA5 Project Proposal

Improving ICT website

Group Members

Mr.Sila Looknampet 5422791053

Ms.Warisa Yiamrakchat 5422792515

Advisor: Asst. Prof. Dr. Pakinee Aimmanee

School of Information, Computer and Communication Technology,

Sirindhorn International Institute of Technology,

Thammasat University

Semester 2, Academic Year 2014

18/1/2015

Table of Contents

1 Introduction .......................................................................................................................1

2 Background........................................................................................................................1

3 Objectives ..........................................................................................................................1

4 Outputs and Expected Benefits .........................................................................................2

4.1 Outputs ..........................................................................................................................2

4.2 Benefits .........................................................................................................................2

5 Literature Review .......................................................................................................... 3-6

6 Methodology.................................................................................................................. 7-8

6.1 Approach ................................................................................................................... 7-8

6.2 Tools and Techniques ...................................................................................................8

7 Project Schedule ................................................................................................................9

8 Project Progress (optional) ................................................................................................9

9 Technical Description……………………………………………………………..…...9-22

9 References .......................................................................................................................21

Statement of Contribution

By submitting this document, all students in the group agree that their contribution in the

project so far, including the preparation of this document, is as follows:

Mr.Sila Looknampet ID:5422791053 50%

Ms.Warisa Yiamrakchat ID:5422792515 50%

Senior Project 2014 Improving ICT website

School of ICT, SIIT 1

Introduction

Have you ever visited to some website that contain only text with no graphic and photo.

What do you feel about it? It’s kind of boring when you only see only black text. Normally,

we don’t visit to education website only when we need to check our result grade , register

something or download the lecture note. That’s it.

A website of each faculty or major is important for students to search and receive some

news from faculty not only current student but also other people that want to know what that

faculty is about, what does the building look like and many. Therefore, it’s similar like the

first image that others can see.

Let’s answer some simple question. Have you ever visited to website of ICT? Some

might say I don’t even remember what a URL of ICT is. We both think ICT website is too

simple with nothing special.

So we really want to change into a new look that everyone can easily surf and interactive

people to visit more. And also add some functions that needed into website to be more

interesting.

We is going to describe more on Background, Objective of our project and outputs and

expected benefits

Background

In this project we are going to use Notepad++ to achieve our project and also use SQL to

build the system of database.

Notepad++ is the program that we use to write HTML code which is basic code to build a

website and SQL is the program that we use to make our database system.

First, we need to tell that we are going to use program that we have learned in the past to

make it easier. Therefore both programs that we use are not a problem or us. The problem for

us is we need to collect data and information from other people for example what function

students, teachers, assistants want in the website and make it more beautiful, modern and

easy to read.

Objectives

The aim of this project is to develop and adapt website which is ICT website

(ict.siit.tu.ac.th). In order to achieve these aims, there are X objectives:

- Design a new look of beautiful website

- Add more interesting and important contents on the website

- Manage the content to search easily and quickly.

- Add some useful functions into website.



Outputs and Expected Benefits

4.1 Outputs

This website is useful for everyone especially ICT students and also teachers, assistants in

ICT

For ICT students, the features will be:

Can easily find timetable of all ICT students and teachers

Can get important information of ICT

For teachers

Can easily find timetable of students and other teaches

Can get important information of ICT

Can send news and information to students quickly

Can easily fill the request forms

For outside people who interest in ICT of SIIT

Can get information and news from ICT.

4.2 Benefits

This project can be useful for everyone. For instance, in terms of all SIIT students can

receive news from another major what is going on. For ICT students, they also can get

important information, news and etc. And for outside people, someone may want to entry to

ICT program and want to find some news and ask some assistants to help; this website is

useful for them.



5.Literature Review

Website of faculty is the same as in front of your house. So it effects to our organization

and company. We made a survey about “what do people think about ICT website” .We found

that 70% said the website is not beautiful and 20% said the contents are not arranged in order

and the last one is the website doesn’t have useful functions or contents

Our purposes are:

-We want to have menu on the top which easy to find the content.

-We want to put some pictures which make more interesting and beautiful.

-We want to use colours to make the website interesting.

-We want to gather useful information into ICT website.

what do people think about ICT website

Not beautiful website

Content are not arrangedin order

Don’t have many useful fucntions



This is an ICT home page that we designed.



This is our news and announcement page which stuffs and teachers can add some news.

For example, make up class, cancel class, scholarships and admissions news .This page is

good for current student, teacher and outside people.



This is Timetable page of every teachers which good for student to look up. By clicking

on the teacher’s picture on the right, the time table will show in the middle of the page. This

page is good for current student.

This page is contact list of teachers.There are two options staff and teacher. By clicking on

the teacher or stuff’s picture on the right, the contact button will show in the middle of the

page. Then if you click on the bottom, the outlook window will show up automatically. You

can email to every teachers that you want. This page is good for current student, teacher and

outside people. It’s really good for outside people who interest in ICT program which they

can ask stuffs some questions about curriculum or how to entry to ICT program.



Methodology

6.1 Approach

Our steps:

1. We make a survey to teachers and stuffs “what do you think and want on ICT website”.

2. Garter the information and sum up what we are going to put on the website.

3. Design the component of the website.

4. Design the website.

5. Write HTML, CSS ,PHP ,javascript and SQL .

Task of each component.

About: It’s show the information about SIIT.

Curriculums: It’s show the curriculums of IT and CS.

Admission: It’s show admission information.

News: It’s show the news which stuff and teacher can add.

Timetable: It’s show the timetable of every teacher.

Contact: It’s a way to contact teacher and stuff through an email.

Course Webs: Garther link website of every teacher. It’s easy for student to look up.



Database: Login

There are Stuff and instructor who can sign up. Instructor can add some news and fill the

request form. In terms of staff, staff can also add some news and update the website.

6.2Tools and Techniques

What tools and techniques will you use in the project? Languages, software, process...

We use HTML, CSS, PHP, JavaScript and SQL code



7. Project Schedule

Schedule from semester 1 and 2

Task Description Person Duration Deadline Status

1 Research and Survey Sila&Warisa 1w 1 Sep 14 100%

2 Design and plan what will are going

to do.

Sila&Warisa 1w 8 Sep 14 100%

3 Draft Proposal Sila&Warisa 2w 29 Sep 14 100%

4 Study and revise for

HTML,SQL,CSS,PHP

Sila&Warisa 4w 12 Jan 15 100%

5 Coding Website Sila&Warisa 4w 12 Feb 15 100%

6 Test the website and find bugs Sila&Warisa 3d 15 Feb 15 90%

7 Make final project report Sila&Warisa 1w 22 Feb 15 100%

8. Project Progress

Now we are in the part of coding. And also learning and researching some codes that

necessary for us in the same time. We already designed and planed what we are going to put

on the website. After finish coding, we are going to test the website. And the last thing is to

promote our website to real user.

9. Technical Description

In this project We use Notepad++ to write CSS, PHP , Java and HTML code ,

PHPmyadmin to store data and manage about database and we also use free code from

textangular.com. The reason why we choose all of these programs because some of them are

the program that we have studied before. So it doesn’t take time so much to learn.



9.3 Explanation of the user-interface including selected screenshots

Homepage: Homepage of our website

About: It’s show the information about SIIT.



Edit About: It can edit by Staff and also show the preview in real time



News: News page. It’s show the news which staff and teacher can add.

Edit News: This page shows the buttons for staff and teacher where can add, enable, delete

and add news



Edit News: This one shows how to edit news



Time table for teacher: This one show the time table of every ICT teacher and student



Time table for students: If the subject is the same one it can combine the box automatically

such as MTS 338.



Edit Timetable: This page staff can add subject name, code and title of the subject.



Contact: This one show the contact of Teachers and staffs



Edit Contact: This one shows the boxes and can add some information in

there.”Role” define whether teacher or staff. If we type “staff” ,this data will

show in the staff page.



Fill forms: This one shows the “Fill form” which useful for stuff and teacher. It will

automatically fill the form for you. Therefore, if you need to use it next time. you don’t

have to type again and again. It will save the form for you.



After Save, you can print out.







9.4 Design specification for software/hardware components, databases,

interfaces, etc.

9.4.1 Software

- Notepad ++

- Operation system: Windows 7

- Database Sever: phpmyadmin

- Webserver : usbwebserver

9.4.2 Hardware

- Intel Core i5-2410M CPU @2.30GHz

- RAM 8.00GB

- System 64-bit Operating System

10. Segments of important code and implementation

details

In database, we have news, timetable and user.

Example of user, we have 2 types of users ,Teacher and staff

This one is News database, we store news title, detail



References - Textbook PHP for Absolute Beginners Author: Jason Lengstorf

- http://www.enjoyday.net/webtutorial/html/index.html

- http://www.siamhtml.com/how-to-make-a-website-in-30-minutes/

- http://www.hellomyweb.com/

- http://textangular.com/

- http://www.freewebsitetemplates.com/

- http://www.wix.com/

http://amzn.to/oyJMe9

http://www.copterlabs.com/

http://www.enjoyday.net/webtutorial/html/index.html

http://www.siamhtml.com/how-to-make-a-website-in-30-minutes/

http://www.hellomyweb.com/

http://textangular.com/

http://www.freewebsitetemplates.com/

Documents

Improving ICT websiteict.siit.tu.ac.th/senior-itcs/final/report-pa5.pdfSenior Project 2014 Improving ICT website School of ICT, SIIT 5 This is our news and announcement page which