61
qwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwe rtyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwert yuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyu iopasdfghjklzxcvbnmqwertyui opasdfghjklzxcvbnmqwertyuio pasdfghjklzxcvbnmqwertyuiop asdfghjklzxcvbnmqwertyuiopa sdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdf International Students in Scranton Final Report Bandar Alatawi Dr. Jack Beidler 12/03/2010 Submitted in partial fulfillment Of the requirements of CMPS 490 -- Computer Project

plishka/Fall2010/CMPS490/Links...Web vie

  • Upload
    ngodan

  • View
    217

  • Download
    2

Embed Size (px)

Citation preview

qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqw

International Students in ScrantonFinal Report

Bandar Alatawi

Dr. Jack Beidler

12/03/2010

Submitted in partial fulfillmentOf the requirements of

CMPS 490 -- Computer Project

2

Index

Goal………………………………………………………………………1

Abstract………………………………………………………………….1-5

Overview…………………………………………………………………5-8

Technical…………………………………………………………………8-9

Difficulty…………………………………………………………………10

Future work……………………………………………………………….10

Project exist when I move……………………………………………….10-11

Frame in the time…………………………………………………………11

Language……………………………………………………………………11

Picture and video……………………………………………………………12

Search and design…………………………………………………………….12

Gantt chart…………………………………………………………………….13

Senior project Gantt chart……………………………………………………13-14

Introduction…………………………………………………………………….14-15

System module………………………………………………………………………..16

Function requirements……………………………………………………………..16-17

Non function requirement…………………………………………………………..17

User interface specification………………………………………………………17-18

System evolution………………………………………………………………….18

Glossary……………………………………………………………………………..18

How the system works………………………………………………………………18-19

Register and logon…………………………………………………………………..20-21

Test edit (your country)………………………………………………………21-22

Real time design……………………………………………………………………22

Unite testing……………………………………………………………………….23-24

Module testing…………………………………………………………………….24-27

3

Introduction……………………………………………………………….27-28

Detailed description of functions…………………………………………28

Home page…………………………………………………………………..28

Search……………………………………………………………………….28

Select language………………………………………………………………28

Calendar……………………………………………………………………..28-29

Register…………………………………………………………………….29

Logon…………………………………………………………………………29

Entering restricted area……………………………………………………..29

Uploading images……………………………………………………………29-30

Uploading videos………………………………………………………………30-31

Chat room/message board…………………………………………………….31

Edit text (your country)……………………………………………………….31

Conclusion……………………………………………………………………..32

Source…………………………………………………………………………..35-42

4

Goal

My goal in this project is to make International Students in Scranton useful to the

students of the University of Scranton and to help each other. I want to make it possible for them

to get in contact with other students by emailing and posting information about their countries on

the webpage. In addition, it will make it easy for the students and the facility to search about

information for different countries by sending an email to the students who are members on the

webpage or they can meet each other after they make contact by emailing on the website. On

other hand, students who are interested in studying in Scranton can find specific information

about Scranton because no specific website about Scranton has all the information for students

coming to study in Scranton. However, on my website, it explains for students what they should

bring with them. Like for example, what kind of clothes they will need; the types of food

Scranton has available, because some of them think there is just American food. Also, for those

who do not know English, they will be able to development their language skills with other

students by e-mailing on the website. Through this, when they come to Scranton, they will know

some English and make the transition a little easier. Also, students who are studying in the

University of Scranton can help each other by asking questions about classes, homework, and

teachers. In the end, I need to help all students to make everything for them as easy as I can.

Abstract

The website is about international students in Scranton, which means they can contact

each other and contact the students in Scranton. Furthermore, in the website you can change the

language to which language you can understand. Also, every member in the website can write

5

about his/her country which means they can put up some factual information. They can add a

section for his or her country on the website. The website has emailing so if you want to email

you have to register and log in on the website. Also, it has section for the students in Scranton to

write about the university.

The website is simple and it is easy to understand. I built it uncomplicated so everyone

can understand it. Basically at the top of the page is the title, International Students in Scranton.

Also, under the title you can see 4 to 5 icons. Each one has different things. First, home icon is

the home page. Second language has all the different languages in the world. When you click on

the icon it will show you all the languages. You are able to choose your favorite language or

your native language to change the language for the website. The third and the fourth are the

pictures and videos. You can upload pictures and videos to the website, but you have to follow

the rules before you upload anything. The most important one is register, and when you click on

it, it takes you to a different page to register on the website or to be a member of it. I used html

to build all of these.

On other hand, most of the website is related to the home page. In this project the home

page has all the icons. I make it simple so anyone can understand it very well. I used html

language for it. As you see, on the home page, there are hyperlinks for the language, video;

picture and search in many bars. Also, every icon has function. On the home page I made the

function for the title which is, International Students in Scranton. After the title is the body for

the home page. The body for the homepage has, on the top, links for upload picture, video, the

language and the search. I will go into detail for each one after I explain all of the body on the

right. You can see icons for uploading your information about your country. You will see lists

6

for which country I chose, but anyone can add his country. On the left side is about the

University of Scranton.

First thing I did on this project was the home page. On the home page, as I mention in

the paper, all what I need for this project are example, video picture, language and your country.

I finished all of them last spring, but I am still working on some of them to make them work very

well. I finished half of the project. I plan to be done with the project by the middle of October.

However, by now the project still needs some work to be helpful. Some of the icons work and

some of them don’t. I will start with the icons that work. First the login is almost done. I did in

this section the most important thing which is how you log in and register. First you put your

first name, last name, user name, your email, and your password. I used php language to build

the register and html for log in. The function starts with the title and the body; as you see first

name, last name user name, email address, and password. I will put all of the resource on the last

page. After register you can log in by putting your user name and your password. I used html

language to build this function, but I am still working on this as to how I can relate log and

register with my email to comfort you. I also worked on the section which is your country. I

added some countries, but I need to make a hyperlink for each one, so you can write about them.

This is what I did so far in the project. I will work hard to finish what are left and make it helpful

as I told before. The website is about international students in Scranton, which means they can

contact each other and contact the students in Scranton. Furthermore, in the website you can

change the language to which language you can understand. Also, every member in the website

can write about his/her country which means they can put up some factual information. They can

add a section for his or her country on the website. The website has emailing so if you want to

email you have to register and log in on the website. Also, it has section for the students in

7

Scranton to write about the university. The design method is simple. The main thing is the home

page. Home page is parent and the parent has children. I am going to explain it now. Home page

is the parent; from it we can make a tree. The first children are the icon bars which are language,

picture, video register, and search. These are on the top of the page and on the right side is your

country and logon. Also on the left side is a student in Scranton. I have subsection for logon,

register, and your country which could be described as the grandchildren. Also, on the home

page I used html language to build the code. First is the title, which is International Students in

Scranton, the body has the icon bar and your country and I closed by the end. I will explain

everything in detail with a graph.

In general, how is the design for the system? Parent has children and grandchildren. I

mean by “parent” is the home page and in the home page has a subsection and the subsection has

also a subsection. The relation between them is that I relate them by hyperlink for everyone in

home page function. Also another relation is between register and logon. After you register the

system sends it to email, which includes your user name and password. This means another code

relates between the logon and register.

8

Overview

The important things on the website are how you log on and how the students write about

their countries or how they do sections on the website about their countries. On the right of the

website you can see the log on section. It shows user name, password and submit. After you log

on you can replay the question if anyone asks about your country and write in the section you

like. Also, on the right is the section about the countries. Maybe you can see your country,

maybe not. It depends on you. If you write a subject about your country that means anyone can

Home

Home

Scranton

Pictuer Video Languge Register Search

Logon

you copuntry

9

see it. For example, if I write about my country Saudi Arabia, then other students from my

country can add in formation and answer question about our country because I created the

section about my country that is the same as their country.

The left of the website is the section for students in Scranton. They can write about

Scranton and about the university to help each other in school. They can write in general about

Scranton like weather, restaurants, and facilities. They can ask each other question about classes

and about professors. Also, if someone needs to get information about classes they can ask it in

this section; the other students will help him /her or send the information by email. This is not

everything about this section. Maybe I will add some more features in the future after I get some

more ideas.

How can you register in the website? After you click on register, you go to a different

page. The page has many empty boxes some of them you have to fill and some of them are

optional. However, the optional boxes are the birthday, address, phone number and other email.

Other boxes you have to fill include last name, first name, username, password, country, and

email address. I prefer Scranton email. For username, no one else can have the same username as

you, because if you can register with a username already taken you get an error. Also, the

password should be more than 6 characters. It should be no comm. After you fill all of the

boxes, you will submit it. Then you will be a member of the website. Now click on home to take

you to the home page.

To log on, you will see on the right two boxes. One is for the username and the second

for the password. Write your username in the box and write your password then submit. After

you submit, you are logged in. Now you are able to write and e-mail with other members in the

10

website. In the e-mailing section you can see all the members who are online and a sample flag

next his/ her username. The flag is about his/ her country. With this you will know which

country each member is from. If you want to start e-mailing, pick anyone you want and message

him or her and ask him or her about the questions you have.

How do you upload picture and video? You click on the website icon for the picture and

the video. After you click on them you will see all the video and picture posts by the other

members. To create new pictures or videos, just click on new video or picture. Then it writes the

title borrowed from the picture the way you saved it. Attach it after you do these steps and then

the picture will post to the website. Do all of these steps with the video too. Also, there will be

security for the entire picture and video section. Explicit materials are not allowed.

How do you create a section about your country? After you click on new information,

you will see title and the detail. In the title write the name for your country and in the detail write

the information. If anyone from the same country wants to create a new subject he/her can just

click on the country. After that, click on new subject, add your title and create the new subject

about your country. There will be censorship on what anyone writes. It will delete the subject if

the information is not correct or if anyone writes bad words. In the Scranton section I am

thinking about making the same discussion board where anyone can ask questions and the others

can answer. It will be the same like the section for your country. After you know this entire step,

you will be familiar with the website. Maybe I will add some information in the future about the

website. For example, the design including the color and the background may be changed,

because right now I am working on the source for all the information on the top. The project will

be, as I said in first report, about international students in Scranton and how to make life for them

easy in a different country. However, the project has many functions and languages. I did many

11

things in this project, and right now I will explain every one with more detail and which

language I used. In this project there are upload picture and video, but these are not that

difficult. The difficult thing is how to relate my email with website after you register. I am

working on it. I will finish it as soon as I can. I will explain it with more details. Now I will give

some information about it and where I am going with it until now. However, the project will help

everyone who is from Scranton or even a different city. I will start by explaining the easy things

in the project. I will explain how I built the home page, which has all the icons and the design,

and how I added all the icons.

Technical Overview

I have too much data in this website and I will use many programming languages like php

and html. The source for the title writes in html. I start the source with <head> under the head

<body>than I set up the font in h2 before that I center the title. Also, all the letters are in caps

lock. <!-- end #logo -->this is how I end the function. I do the tool bar with the new function. I

write <div id="header"> than <div id="menu"> <ul>. I write the first icon which is home <li><a

href="#" class="first">Home</a></li> and I keep writing all icons like <li

class="current_page_item"><a href="#">language</a></li>. I do all my cones until the end <!--

end #menu -->. This is how I do the title and the tools bar. However, in search I start my

function with <div id="search"> and I keep writing my code from method get action which is

<form method="get" action="">. Also, I add <fieldset> after that I make the size for the text 15

in this code <input type="text" name="s" id="search-text" size="15" />.after you write the word,

I write this code to submit the search <input type="submit" id="search-submit"

value="search" />. I close the code with </fieldset> and I end it with this code <!-- end #search --

>. This is how I build the code as simple.

12

On other hand, for the body of the page I write student in Scranton I write this code for

starting <div id="page"> than <div id="content"> <div class="post">. I write the code for the

title as <h2 class="title">students in Scranton</h2> which is size for font 15 and caps lock.

Also, some code to add some like to the page. To end the page I use this code </div><!-- end

#content -->. Now I move to the sidebar which is log on and Saudi Arabia. I start my codes

with this line <div id="sidebar"> than I write all the details <h2>log on</h2> after this line I will

add my other code for username and password to log in the website I am still working in it

because I have some knowledge I have to solve it. Also, I do the same with other sidebars. I

end my sidebar with this code <!-- end #sidebar --> and I end my page with this code <!-- end

#page -->. In the footer I write this code to start my new code <div id="footer"> I write my

name in the end and copy write by alatawi Bandar <p>Copyright (c) 2010 Bandar Alatawi <a

href="http://www.freecsstemplates.org/"></a>.</p>. <!-- end #footer --> this the code how I

end footer. In the end you can see what I use to write the entire source <html>. These codes are

how I am building this website right now. I have to add many functions. I will put the entire

source in this source in the last page of the paper. I will use php to build my codes for rest my

project to complete all the codes because I have experience in php and it is easy for me to write

codes in it. However, I have a file to save all the in formations for the members. If any members

forgets their password, they just send an email; after that they will receive new password.

What I did so far is I created my code for register and logon. So when you go to the

website and click on register, it opens new pages. I explain in the top, after you do the entire

step, you will receive an email that you registered and you can write and are joined as a member

on the website. I used html language and php.

Difficulty

13

I am having difficulty on how I can add function under my other codes. Also, I have

other problems on how I relate all the codes together to make all of the website work correctly. I

want to relate register with logon because after you register and you need to log on. I can find all

the information and it is easy to logon. Also, the security is my other problem because I have to

make sure that on my website no body writes or uploads any bad pictures and videos. Right

now these are the difficulties I am experiencing. I have to ask and work hard in order to find a

way on how to figure them out. I have many files for this website because I do not have any idea

about database. I am not sure if the database is important for my project or I will make every file

alone.

Future work

My future work in this project includes building all codes for the language in the website

and adding symbols next each country; for example small flags for the countries. Also,

completing my codes for register and relate it with log on. Then, complete my other source for

writing some information about any country and the security for the website I have to find the

code and ask about the security. After I finish all the codes and finish everything I will start to

design the project using my style sheet to make the look very nice. However, I still need to

figure out how to do the security on the website. I got some ideas like security in YouTube or

make for every section supervisor. Also, relate my code in register with logon and my email.

Project exist when I move

After I create the website and complete all my work and the website does not have any

problems I will talk with the international club in Scranton to consider this project as the

14

homepage for the club. Otherwise, I will make add in the university before I leave to activate

this website and let everyone know about it.

Frame in the time

I started my project last May but I stopped working on it in June because of my summer

classes and I started again in August as you will see in Gantt chart. In the first week of May, I

got the idea and I made the home page. I started build my function for the home page and

thought about more details to make the home page easy for everyone. I made my goal for this

project after that I stopped working on it, as I said before, but I kept thinking about it all the time.

I will make it a wonderful project.

On 20/8 I made the function for the section of your country and I added some countries.

On the list, for example are Saudi Arabia and United States. As you will see, in this section I will

do more function. I will use html language in this section. However, I will finish it by the time I

mentioned in Gantt chart. In 25/8, I started again to organize it. I made the function for log in

and register but I am still working on them to make them work well with no error. I used php

language in the register as you will see in the source. My plan is to finish section log in and

register by September, 16th. Also, I will finish section your country by October, 4 th. These are

what I did so far. Next week I will work on them until I am done. However, after I finish them I

will move onto the following:

Language

I will start the language by September, 16th. The language does not take a long time. I

will spend two days on it. It will be to use function on how to change the language to a different

language. For example, how do I change it from English to Arabic? I hope I will finish on time.

15

Picture and video

These two sections are not taking a long time. I do not have any rescuers for them, but I

will make the function for them by using php or html. Each one of them has a new page to

upload picture or video. I will start them by 17 th and 23th of September. I will finish them by

September 28th.

Student in Scranton

This section will be about students in Scranton and university of Scranton. Everything

written will pertain to students in Scranton. I will add some information about it. The idea about

this section is to help students make their schedule and find information about classes. I will start

it on the 5th of October. It will take a little time to finish but I will do it on time.

Search and design

Design is not that important but I will make the project a very nice design. It will take

time, but I hope I will finish on time. I will not spend all my time on it; if the website works is

the most important thing. I will add another section, which is search. Search is on the top of the

home page. I will relate with Google or any other web for searching. I will start it after I finish

16

the section University of Scranton, which is by 22nd of October. In my plan I will finish the

entire project by November 4th.

Gantt chart

I made a Gantt chart which explains when I started and when I will finish. You can see

in the chart which are left and which are done. I hope I will make this plan on time and finish

my project soon and make it useful for everyone.

senior project Gantt chart

task start date duration end date

home page 5/1/2010 5 5/6/2010

video 9/23/2010 5 9/28/2010

picture 9/17/2010 5 9/22/2010

language 9/14/2010 2 9/16/2010

log in and register 8/25/2010 20 9/14/2010

your country 8/20/2010 45 10/4/2010

Scranton university 10/5/2010 15 10/20/2010

search 10/22/2010 3 10/25/2010

design 10/25/2010 10 11/4/2010

17

Introduction

As I said in my first and second reports about my project, it is a website about

international students in Scranton. I used the department host to link my project at

www.cs.uofs.edu/~alatawib2/finalproject. This is the link for the project, but you will not

understand it until you read how I built all of the functions and why I made it like that. I have

many functions in this project. I will go into a detailed explanation for everyone.

home page

video

pictuer

language

log in and register

your country

scranton university

serch

design

1/22/2010 3/13/2010 5/2/2010 6/21/2010 8/10/2010 9/29/2010 11/18/2010 1/7/2011

start dateduration

18

As I said, I have many functions. First, how I build home page and which language in

computer I used. I used html which stands for Hyper Text Markup Language. It provides a

means to create structured documents by denoting structural semantics for text such as headings,

paragraphs, lists etc as well as for links, quotes, and other items. The rationale for the system

makes everything organize and easy to flow. However, the function for the home page is very

simple so anyone can understand because it does not have anything challenging. Also, the home

page function has hyperlinks for all the other section. That means when you click it, it should

open a new page. For example, when you click to register, it will open the register page. That is

the same with the others. I made a file for each one because I do not know anything about date

base. In the home there is the basic idea of how to make a homepage for any website. Also, you

can make functions by using the html language. You do not have to worry about the details. I

will explain it during this report. I will use stilly sheet and mysql to design my project. The

reason I will use stilly sheet is because when I finish the entire website and every function works

properly, I will focus in the design.

Now I will tell you about my second language I used in this project, which is PHP. PHP

is scripting language that was design for web development. I built some function using PHP. I

chose it because it’s easy to understand and relates with html. However, this is an overview

about the functions I used and which language I used to build them. Also, the home page has all

the section for the user. I made it as a main part of the project. Another thing is register, which

you should register if you want be member in the website. It is easy and simple. It has first

name, last name, email, and password. After you do all of them and submit them, you will

receive an email that you are registered and an active member. The other thing which is related

with register is log on. Log on is in the home page. After you register, you go to the home page

19

and log in to write or see something in the website. I will explain it in next section with more

detail. The function for the language is making the website change the language from English to

different languages. The rationale for this function makes the website easy to understand from

any user that has different language. The function and video are similar because you should

have the file and just upload it in the website. Still I do not know how long the length should be

for the video. I should make it five minutes. This overview for the function I am working on

them right now.

System model:

The relationship between the system and the user is simple. The user has just given some

information to be useful in the system. The user does not have to work too hard. Users see the

system and follow all the details in home page and register. In section, “your country” users

should write about the country they like. The relationship between the user and the system are

clear and easy to understand.

Function requirements:

As I say in the above about the function in the system is easy for anyone understand

them. I will start with home page. The homepage function is the main focus in the system

because everything is included in it. If you look at the function you will see the title in the

middle top of the page or central. After that we should write the body and tag it in quotations.

The body depends on how I make it. The body includes all of the section, but it does not have the

function for them because every section has function in a different file. After I close the body I

will end the function with a new code. For the register has in the top title. And in the body I

made all the codes, which include some that are optional and others you have to put in. The

20

optional is last name and nick name and phone number. The ones you have to enter in order to

complete the register are first name, email, and password. I used PHP to build all the code for

them. I am working now on security for them. I’m still thinking deeply on how I can protect

them and no one can register with the same name and same email. Log on in ids relate with

register which after you register you can use your user name to log in the function for register

and log in related with each other with code and I related my email to them because after you

register I will receive an email and you will also receive an email. In the language section, it has

a file with all the languages in the world. I will use code for newspaper which has deferent

language. The main language is English and anyone can change the language if he does not

understand it. For the picture and video I did not complete the function. Maybe I will change

them because it has some error. These are some details about the function.

Non function requirement:

The system does not have any specific constraints but I made rules for everyone so they

could not write any bad or upload any bad picture and video. I am still working on the security. I

have security which is the same in YouTube, but still I did not decide if I will use it or not. They

should be related to the function because they are part from the function and the security is very

important in the system to make it work well and no error. The project has a lot of data and as

you know, it should have enough memory. I made for every file the system to cover all of them,

so you do not be worry about the memory. About the time when you upload picture or video will

take a few seconds, but for the register it may take or a minute to 5 minutes until you receive an

email, because first will get email that tell me new member register in the website. The code will

be designed easy. I used Dreamweaver for designing all the codes. The code will be the first title

and the body ends the code as you see sample.

21

User interface specification: 

The users will think about the system different. The system looks like any other system

but some change make it little deferent. The different is the still in the system and the idea about

the system. For example, the language in the system may you change from any language you

want. The user feel understand all the function and happy after I finish all the function and the

functions work well.

System evolution:

I made it easy for me to assemble because I have for every section a special file that when

something happens to the website I can find the error very fast. Also, I anticipate for

maintenance is monthly. I will do it or anyone who will take care about it and he or she will

understand everything well. However, if I will make anything change in the future or delete

something that does not make sense or is not useful it is easy. I just go to the original function

and delete it and add the new one.

Glossary:

Maybe the user does not know about the security because not anyone knows about it.

Also, the security for the website must have a secret password because if anyone knows about it

they can hack the whole website. However, the other thing is the relationship between the

register and my email, because when a person registers I will receive email. The user does not

know if I received an email or not. I think that’s about it because that’s what I did so far.

22

How the system works

You can see in the graph how the system works. First you have two options; if you want to

write and add information or upload picture and video you have to register then log on. The

second option is you can be a visitor on the home page. With this option you will read what the

other members write and the uploaded videos or pictures. To see the relation between them, first

get to the home page and click on the register. After you register you can logon. As soon as you

do all of these step you will be a member on the website and you will be able to share your

inforamtion with other users. Another relation with home page is the read only for the visitors

from the home page; they can read what everyone writes. That’s how the system works in

general. Also, every subsection has a subsection as you see in the next paragraph. There should

be a relation between logon and your coutry and scranton. From the home page to scranton and

your counrty is only for visitors but there are other steps for those who want be a member of the

website.

23

Register and logon

In these two subsection because they are related together they have children which the

grandchildren from the home page. However, in register there are five children which are first

name, last name, user name, email, and password. The main things are password, email and user

name. In logon there are two children which are user name and password, but the password and

the user name are the same in register because they are related together. As soon as you register

you get an email that tells you your register, which maybe takes 2 minutes to 4 minutes. Also,

the system checks if the user name used before all these process check during you doing the

Home

Register

Logon

Your country

Scranton You country

24

register. Right now I did the security but still not work that why when I submit after I register I

get an error. In future I will work in it.

Your country

In this section we are unable to know exactly how many children, because the member will add

subsections for their country. It is possible to have 10 or more. It depends on how many

members I have in the website from different countries. How system works in this section

LogonUser name

Password

Register

First name

Last name

Your eamil

User name

Password

25

depends on logon which means it also depends on register. You will open the section and add a

new section which is your country’s name. After that, you open your new section which allows

you to write information and upload picture and video. Otherwise, if anyone comes and they

want open new section with the same country the system would not allowed them to open it

because the name for the country is already there. The system allows them only to add

information. Also, no one can delete any information because I am the only one who can delete.

Also, in this section have many children depend how many user will write.

Real time Design

In this website the real time is not important. Following your registration, the system will review

all the data very fast. After it’s finished the system will send two emails; one for the user and one

for me. The relevant in this project is when someone writes information about a country in

your country

name your country

add in formation

upload pictuer and

video

name you country 1

name you country 2

other information

name you country 3

name you country ...

26

different section. For example writing information is about the United States in the section for

Saudi Arabia. However, when anyone uploads picture or video the website has limited for the

size. For example, the maximum is for video 10 minute. the system will upload the video and the

picture after they security check. I do not have to much about real time because I do not

understand it.

Unite testing

Testing design is very important for the project, because after you are done with

something you have to make sure it is working properly. From the schedule I made in the first

report that explains the timeline for when I will finish the project I did not note testing design. I

tested what I finished so far, which include: the home page, register, logon, and language. Home

page has one function. It works very well and every link works properly except the links that I

did not relate with the home page. On other hand, I tested those with the other page. All of them

work because other subsections depend on the home. In addition, I am still testing the home

because when I update any function I have to test the home page with the system to make sure it

still works. If any error should arise after I update, then I have to correct it. Register is easy to

follow when the system works or not. Right now I failed on the test because I did not make the

security. It should relate with log on when I’m done but now I have an error. The error shows

up when you register and you need to submit. The error is easy to fix because I know from

where I am getting the error. Log on is related with register, but it has one test. If you write a

different user name a message should pop up that the name is incorrect. Language is testing with

the home page because it does not have a special page to change. It only has to show the name of

the language on the home page. I will explain in further detail in next paragraph. All of them

27

are testing at the same time with the home page because all of them are related to it. This is the

schedule for the testing. Any update I will add it in next report or final report.

Home 10/10/2010 Update always

Register 10/20/2010 11/05/2010

Long on 11/02/2010 11/07/2010

Final test 12/01/2010 12/05/2010

home rigister logon languge final test9/9/2010

9/19/2010

9/29/2010

10/9/2010

10/19/2010

10/29/2010

11/8/2010

11/18/2010

11/28/2010

12/8/2010

startend

Module testing

As I said in the beginning, the home page has all the links for the project. Therefore,

when I open the project with Internet Explorer I do not have any problem, but with Firefox I find

28

something strange; that is, all of the links are blinking. I am trying to find out why all of them are

blinking. I am assuming it is not a big error. I wrote my function in Dreamweaver, so after I

finish writing I will test it. I used Internet Explorer. When I go to open a new page, I can see

usually see right away if something is wrong or if everything is correct. Also, I can click on

every link to see if they are working correctly, or if not, I will know where the error is. I used

html to write the function, so that if I miss any code or any quote it will be easy to find. For

example, I know if the register link on home page works, because when I click on it, a new page

opens for the register. That is how I test the home page and I have the function in file, so that

when I want to update it, the process will be easy to do so.

Register has one page because you have to add information or write your information.

How do I test it? I will test sprightly because it has sprite function. After I click on the links on

the home page and open a new page for the register I can see if all the information I want appears

on the register page. I will update the function to add a code, so that if the user name has been

used before, you cannot use it again. After you register I will get an email. I tested it but I have

an error because I do not have security. <form method="post"

action="mailto:[email protected]">. The message says I am not allowed to receive

emails for security reasons. For the first name it does not matter if all of the members have the

same name; same with last name, but the important thing is email.

If the user wants to register again with the same email they will get a message saying, the email

was used before. The user name should be different from the others. I did not test it yet, but I will

be finish soon. I used Dreamweaver to test the function. However, an easy way to test after I am

done with the function is, I just fill the entire blank and submit it. If it works that is good, but if

29

not I will find the error easy because the register has one function. The register page has a link

for the home page that will take you back to the home page. The system will not accept same

user or same email as I said, because I will add my code for that when I update the register

function and it does not have any relation with home page. <li><a

href="register.html">Register</a></li> This is the link for the register in home page. The

message I get when I submit is, “this form is being submitted using email submitting this form

will reveal your email address to the recipient, and will send the form without encrypting for

privacy.” As for the reset, it works very well. I fill in the blank and I click on the reset button and

it deletes everything.

Register

First name does not matter

Last name does not matter

Your eamil defferent email

User name defferent user

Password up to you

30

Log on is related with register, but still I test it on its page. When you try to log on you

should put your user name and password. If you put a different user name and your own

password the system will not allow you to log on. You should match your user name and

password to logon or the system will not let you log on. I am still doing not doing anything

about logon so I have to make a high level security.

Language is testing with homepage because its function is in home page function. I added

the most important languages that will show when you click on language. You just pick the

language and that will be the language for the home page. It changes directly to the language you

choose. If the language you chose does not change, it may be due to an error in the function.

Maybe the source for the language has not been set up yet.

Overview

The test design for my project is easy to follow, because I have tested every function

spritely except the language. For example, when you click on the language icon, all languages

will show in a new bar and you may choose the langue you like. I will put the source for logon

and the register.

LogonUser name

Password

31

Introduction

This portal serves as a means of sharing information, images and videos. It allows student’s

access information in their native language and at the same time promotes the country of their

origin by writing about it and sharing it with others. The portal is built on HTML and PHP,

styled with CSS. It does not use any database; instead all information is stored and written to text

files. This enables for simple installation, all an admin has to do is to copy all folders and files

and place them on a server. The server needs to support PHP5, and admin should set up

privileges to folders as needed. The portal is fairly easily scalable for more language options. All

translations are held in PHP variables. The variables are pulled based on page id, which

determines what language is being used (for example id=sk means, the language is Slovak).

Admin simply need to copy the variable and replace the text with appropriate translation. The

system uses and relies on PHP Sessions, which enables control of functionality between

registered and not registered users. not registered users can still browse the portal, however they

cannot add any content or participate in the chat room.

Detailed description of functions

Home Page

By default, home page is in English. It serves as an "anchor" where students can find all links to

other pages and functions. It contains main navigation, login/log out options, school calendar and

information about either school, student life or anything else. This information is written and

edited by students themselves and is different on each language version.

Search

Although the portal does not offer internal search ability, users can enter search terms into search

box, and by clicking "search", they are redirected to Google and results for their search term are

32

displayed.

Select Language

User can select language of their choice. The default is English. The language is manual.

Calendar

Calendar displays one month dates and enables admin to display events and information for

specified dates. When such date is specified, the information is displayed upon hovering mouse

over the date.

The calendar uses JavaScript technology and does not contain any database. It is controlled only

by admin; no other user has access to it. The text for the dates is hard coded into a specific

format on the home page. In order to make the changes, admin needs to access the source code of

the home page to change the information.

Register

In order to get the most out of the portal, user needs to be registered. The registration process is

simple. User is required to enter a user name and password. Password needs to be entered twice

to avoid mistypes as the password is not displayed (it displays as series of *** symbols). The

system does not allow for duplicate user names. If user enters a user name that already exists,

he/she is prompted to choose a different one. Also, to ensure basic security, both user name and

password needs to be at least 5 characters long. Upon submitting the registration information,

user is redirected back to home page where he can now log in.

Log on

Registered users can log in into the system by clicking "Log On" button. When clicked, user is

redirected to a login page, where he/she is prompted to enter user name and password. If

incorrect information is entered, the user is informed about the error and he/she can try again.

33

Entering restricted area

Upon successful log in, user is offered a variety of options. He can upload images, upload video,

go to chat room, edit text on the front page or go back to homepage or logout.

1. Uploading images

When uploading images, user can choose either .jpg or .png format. The maximum size of

allowed images is 1MB.

*If user selects wrong type of file, and error message appears and user can then try uploading

another file.

*If size of the image is over 1MB, error message appears and user can then try uploading another

file.

*If name of the image is the same as a name of the image that was previously uploaded, error

message appears and user can then try uploading another file.

When the upload is successful, user can then add a caption to the image. The maximum size of

the caption is 200 words.

*if caption is longer than 200 words, error message appears and user can try again.

*if user does not enter any caption, a default caption will be added to the image

NOTE: All captions are stored in separate text files. If admin deletes any image, the caption will

remain on the server as a text file, but will not be displayed.

After image is uploaded, it is automatically added to the gallery. The gallery automatically

displays a thumbnail of the image. When the thumbnail is clicked, a full-size image as well as

caption is displayed.

The gallery offers basic navigation to next and previous image and an option to return to home

page or to upload an image. However, images can be uploaded only by logged in users. If a user

34

is not logged in and clicks on "upload image" link, he is automatically redirected to login page.

2. Uploading videos

Uploading videos is similar to uploading images. The maximum size of a video is 5MB. The

allowed format is .mov. If user tries to upload other format or the video is bigger than 5MB, an

error message is displayed and user can try again.

When the video is uploaded, it is automatically added to the library as a url link. When clicked,

the video starts playing in a new window.

3. Chat room / Message board

Chat room is a real-time chat. Upon entering text, it is automatically displayed. Although chat

room navigation is displayed in the language the user selects, there is only one chat room for all

students. All conversation goes on in one place. This is intentional, as it allows for students to

better connect with students from other countries, who would otherwise be not able to participate

in the chat. Currently, there is no option for private message, chat or creating topic-specific chat

rooms. The chat room allows for pagination, meaning that after the page is full, it is moved to

page 2, which can be entered simply by clicking on the number "2" that will be displayed. All

text from the chat room is stored in a text file. Therefore, when user logs out and logs back in, he

will still see the same conversation he left, unless admin deleted the text from the file.

4. Edit text

Registered and logged in users can edit text that appears on the front page of each language

version. The system offers a full-scale WYSIWYG text editor, so user does not need to know

any HTML at all. The whole system is of editing works similar to Wikipedia, where registered

users can add, delete or edit already published information. It is up to admin or designated people

to ensure the system is not abused. The system could be scaled to allow only certain people

35

(usernames) to edit the text, however currently; all registered users can edit any text on any

language version.

Conclusion

The intention for building this website/portal was to give international students, as well as

American students a place they can connect and share information. By allowing them to

participate in the chat room, share images and videos, and read about their own experience

and/or countries, this portal, as well as Scranton University itself, can become truly multi-

cultural and multi-language place of learning, and at the same time enhance students views by

offering them a different perspective on their foreign counterparts.

Source

These are the sources for the website right now. I use Dreamweaver to build my html function or codes.

<link href="style.css" rel="stylesheet" type="text/css" media="screen" /></head><body><div id="logo"> <center>

<h2>International Students in Scranton</h2><p>&nbsp;</p>

</div><hr /><!-- end #logo --><div id="header">

<div id="menu"><ul>

<li><a href="#" class="first">Home</a></li><li class="current_page_item"><a

href="#">language</a></li><li><a href="about.html">video</a></li><li><a href="#">picture</a></li>

<li><a href="#">scranton</a></li> <li><a href="#">Register</a></li>

</ul></div><!-- end #menu --><div id="search">

<form method="get" action=""><fieldset><input type="text" name="s" id="search-text"

size="15" />

36

<input type="submit" id="search-submit" value="search" />

</fieldset></form>

</div><!-- end #search -->

</div><!-- end #header --><!-- end #header-wrapper --><div id="page">

<div id="content"> <div class="post">

<h2 class="title">students in scranton</h2><p>&nbsp;</p>

<p class="meta">&nbsp;</p><div class="entry"> <p>www.scranton.edu</p> <p>&nbsp;</p></div>

</div><div class="post">

<h2 class="title"><a href="#"></a></h2><p class="meta"><a href="#"></a></p><div class="entry">

<p> <a href="#"></a>. </p></div>

</div><div class="post">

<h2 class="title"><a href="#"></a></h2><p class="meta"> <a href="#"></a></p><div class="entry">

<p> <a href="#"></a> </p> </div></div>

</div><!-- end #content --><div id="sidebar">

<ul><li>

<h2>log in</h2>

<p></p></li><li>

<h2>saudi Arabia</h2><ul>

<li><a href="#">location</a></li><li><a href="#">weather </a></li><li><a href="#">picture</a></li><li><a href="#">information</a></li>

</ul></li><li>

<h2>chatting</h2><ul>

</ul>

37

</li></ul>

</div><!-- end #sidebar --><div style="clear: both;">&nbsp;</div>

</div><!-- end #page --><div id="footer">

<p>Copyright (c) 2010 Bandar Alatawi <a href="http://www.freecsstemplates.org/"></a>.</p></div><!-- end #footer --></body></html><?phpif ($_GET['id']=="sk" || $_GET['id']=="editorSK"){

$username="Prihlasovacie Meno:";$password="Heslo:";$login="Prihl&aacute;s sa";$home="Sp&auml;t na Hlavn&uacute; Str&aacute;nku";$homepage="slovak.php";$pageId="sk";$error1="Neplatn&eacute; Prihlasovacie Meno Alebo Heslo";$error2="Chyba Pri &#268;itan&#314; Datab&aacute;ze";}

elseif ($_GET['id']=="cz" || $_GET['id']=="editorCZ"){$username="Prihla&#353;ovac&iacute; Jm&eacute;no";$password="Heslo:";$login="Prihla&#353; se:";$home="Vra&#357; Se na Hlavn&iacute; Str&aacute;nku";$homepage="czech.php";$pageId="cz";$error1="Chybn&eacute; P&#345;ihla&#353;ovac&iacute; Jmeno Anebo Heslo";$error2="Chyba P&#345;i &#268;ten&iacute; Datab&aacute;ze";}

else {$username="User Name:";$password="Password:";$login="Log in:";$home="Back on the Home Page";$homepage="index.php";$pageId="en";$error1="Invalid username or password.";$error2="Login facility unavailable. Please try later.";

}?><?php// process the script only if the form has been submittedif (array_key_exists('login', $_POST)) { // start the session session_start(); // include nukeMagicQuotes and clean the $_POST array include('../includes/corefuncs.php'); nukeMagicQuotes(); $textfile = 'filetest03.txt'; if (file_exists($textfile) && is_readable($textfile)) { // read the file into an array called $users

38

$users = file($textfile);

// loop through the array to process each line for ($i = 0; $i < count($users); $i++) { // separate each element and store in a temporary array $tmp = explode(', ', $users[$i]); // assign each element of the temp array to a named array key $users[$i] = array('name' => $tmp[0], 'password' => rtrim($tmp[1]));

// check for a matching record if ($users[$i]['name'] == $_POST['username'] && $users[$i]['password']

== $_POST['pwd']) { // alternative (shorter) code //if ($tmp[0] == $_POST['username'] && rtrim($tmp[1]) ==

$_POST['pwd']) { // if there's a match, set a session variable $_SESSION['authenticated'] = 'Jethro Tull';

break;}

}// if the session variable has been set, redirectif (isset($_SESSION['authenticated'])) { if ($pageId=="sk") {header('Location: http://homerundesign.com/test/school/menu.php?

id=sk'); exit;} elseif ($pageId=="cz") {header('Location: http://homerundesign.com/test/school/menu.php?

id=cz'); exit;}

else {header('Location: http://homerundesign.com/test/school/menu.php');

exit;} }// if the session variable hasn't been set, refuse entryelse { echo $error1; }

} // error message to display if text file not readable else { echo $error2; } }?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Login</title></head>

<body><?phpif (isset($error)) { echo "<p>$error</p>"; }

39

?><form id="form1" name="form1" method="post" action=""> <p> <label for="username"><?php echo $username; ?></label> <input type="text" name="username" id="username" /> </p> <p> <label for="textfield"><?php echo $password; ?></label> <input type="password" name="pwd" id="pwd" /> </p> <p> <input name="login" type="submit" id="login" value="<?php echo $login; ?>" /> </p></form><a href="<?php echo $homepage; ?>"><?php echo $home; ?></a></body></html>

<?phpif ($_GET['id']=="sk"){

$username="Prihlasovacie Meno:";$password="Heslo:";$password2="Potvr&#271; Heslo:";$home="Sp&auml;t na Hlavn&uacute; Str&aacute;nku";$homepage="slovak.php";$pageId="sk";$header="Registr&aacute;cia";$register="Zaregistruj Sa";$error1="Uzivatelsk&eacute; Meno U&#382; Existuje - Vyber Si

In&eacute;.";$error2="Meno a Heslo Mus&iacute; Obsahova&#357; Aspo&#328; 5

P&iacute;smen.";$error3="Hesl&aacute; Sa Nezhoduj&uacute;";}

elseif ($_GET['id']=="cz"){$username="Prihla&#353;ovac&iacute; Jm&eacute;no";$password="Heslo:";$password2="Potvr&#271; Heslo:";$home="Vra&#357; Se na Hlavn&iacute; Str&aacute;nku";$homepage="czech.php";$pageId="cz";$header="Registrace";$register="Zaregistruj Se";$error1="Uzivatelsk&eacute; Jm&eacute;no ji&#382; Existuje - Vyber si

Jin&eacute;";$error2="Jm&eacute;no a Heslo Musi M&iacute;t Najm&eacute;ne 5

P&iacute;smen";$error3="Hesla se Nezhoduj&iacute;";}

else {$username="User Name:";$password="Password:";$password2="Confirm Password:";$home="Back on the Home Page";$homepage="index.php";$pageId="en";

40

$header="Register User";$register="Register";$error1="Username taken - choose another";$error2="Username and password must contain at least 5 characters";$error3="Your passwords do not match";

}?><?php// execute script only if form has been submittedif (array_key_exists('register', $_POST)) { // remove backslashes from the $_POST array include('corefuncs.php'); nukeMagicQuotes(); // check length of username and password $username = trim($_POST['username']); $pwd = trim($_POST['pwd']); if (strlen($username) < 5 || strlen($pwd) < 5) { $result = $error2;

} // check that the passwords match elseif ($pwd != $_POST['conf_pwd']) { $result = $error3;

} // continue if OK else { // encrypt password, using username as salt //$pwd = sha1($username.$pwd); // define filename and open in read-write append mode $filename = 'filetest03.txt'; $file = fopen($filename, 'a+'); // if filesize is zero, no names yet registered // so just write the username and password to file if (filesize($filename) === 0) { fwrite($file, "$username, $pwd"); } // if filesize is greater than zero, check username first else { // move internal pointer to beginning of file rewind($file); // loop through file one line at a time while (!feof($file)) { $line = fgets($file); // split line at comma, and check first element against username $tmp = explode(', ', $line); if ($tmp[0] == $username) { $result = $error1; break; } } // if $result not set, username is OK if (!isset($result)) { // insert line break followed by username, comma, and password fwrite($file, "\r\n$username, $pwd"); if ($pageId=="sk")

41

{$result = "Registr&aacute;cia &Uacute;spe&#353;n&aacute;.";}

elseif ($pageId=="cz") {$result = "Registrace &Uacute;sp&#283;&#353;n&aacute;.";} else {$result = "REGISTRATION SUCCESSFUL";}

$okResult="ok"; } // close the file fclose($file); } } }?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Register user</title></head>

<body><h1><?php echo $header; ?></h1><?phpif (isset($result)) { echo "<p>$result</p>";}if ($okResult=="ok") {

if ($pageId=="sk") {header("Refresh: 5;

url=\"http://homerundesign.com/test/school/slovak.php\""); echo "<p>Bude&#353; prenesen&yacute; na hlavn&uacute;

str&aacute;nku za 5 sekund.</p>"; exit;}

elseif ($pageId=="cz") {header("Refresh: 5;

url=\"http://homerundesign.com/test/school/czech.php\""); echo "<p>Bude&#353; p&#345;enesen na hlavn&iacute; str&aacute;nku

za 5 sekund.</p>"; exit;}

else {header("Refresh: 5; url=\"http://homerundesign.com/test/school\"");

echo "<p>You will be redirected to home page in 5 seconds. You can then login.</p>";

exit;} }?><form id="form1" name="form1" method="post" action=""> <p> <label for="username"><?php echo $username; ?></label> <input type="text" name="username" id="username" /> </p> <p> <label for="pwd"><?php echo $password; ?></label> <input type="password" name="pwd" id="pwd" /> </p> <p>

42

<label for="conf_pwd"><?php echo $password2; ?></label> <input type="password" name="conf_pwd" id="conf_pwd" /> </p> <p> <input name="register" type="submit" id="register" value="<?php echo $register; ?>" /> </p></form><a href="<?php echo $homepage; ?>"><?php echo $home; ?></a></body></html>

43