Topic: Itinerary Website (Web Development) Module: Web Design and Mark: 78% Sheffield Hallam University

1. USER MANUAL
FOR
TRAVEL ITINERARY PROJECT
Created by Team Members
Reviewed by Team Members
Module: Web Application Design and Modeling (WDAM)
Created Date 10 Jan 2012
Assignment: Final Design Document (USER MANUAL) Revised Date 12 Jan 2012
Revision No. 1.0
Team Name: As a Whole
Document Name U01-001
1

2. 2 OBJECTIVE OF THIS DOCUMENT
1. To propose the results following
our design.
2. To prevent if our application
cannot run on different
environment properly.
3. To explain how to use our web
application.

3. 3 1) LOGIN AND LOGOUT
Login
1. Fill user name and password
2. Click login
3. System shows Role ex. USER
Comment:
1 System supports 3 roles
1. ADMIN : Can do all functions
2. TRIP_MANAGER : Can add trip
2 3. USER: Can do all functions except to
add trip and create manager trip
manager account.
3 Logout
1. Click logout 1

4. 4 2.1) REGISTER USER
1
Register User
2
1. Click Register User at home page
2. Or click Register at login page
3. Fill personnel information
4. Click register
5. Name and roles will show after login.
Comment:
1. System can login using user or e-mail.
2. System sends e-mail after registration is
completed.
5
3
4

5. 2.2) EDIT PROFILE
5
AND CHANGE PASSWORD
Edit profile
1. Go to menu Profile > Edit Profile
2
1 2. Change profile
3. Click update profile
3 Change Password
1. Go to menu profile > Change password
2. Fill old password, new password and
confirm new password
3. Click change password
2 1
3

6. 6 3) CREATE ITINERARY
Create Itinerary
1. At menu, select Itinerary > Create
New Itin
1 2. Fill Trip Title, Location
3. Fill Privacy, start date and to date
4. Click Create Itinerary.
Note:
3 There are three Privacy for each itinerary.
2 1. PUBLIC: Every one can preview your
itinerary.
2. PRIVATE: No one can preview except to
you.
3. FRIEND: Only your friends can will
your itinerary.
4

7. 7 4) SEARCH ITINERARY
Search Itinerary Menu
1. Search your Own Itinerary: List of
1 Itineraries which created by you. You will
2 have full permission to manage.
3
2. Search Public and Friend’s Itin: List
4 of Itineraries which created and shared
by other people and your friends. You
can view them only.
3. Search Distributor Itin (Sharing
Itin): List of Itineraries which shared by
your friend for updating together. You can
manage (add, edit and delete itinerary
items).
4. Search Itinerary Trip by Agency: List
of itineraries which created by trip
managers to advertise their trips. Your
can view them only.
Ex. List of you own Itineraries
** You can post note on some itineraries
depended on your permission made by
Ex. List of Itinerary trips created owner.
by Agency

8. 5. MANAGE ITINERARY
DETAILS
8

9. 5.1) FUNCTIONS IN
9 PREVIEW ITINEARY
DETAILS PAGE
Function in Preview Itinerary Page
1. Sub Menu bar
1. Print Itinerary: To print itinerary
(Not implemented)
2. Post note: To post note on your
itinerary
1 3. Manage friend to update this
trip: To add friend for updating
itinerary together.
2
2. Update itinerary header
3 1. Enter update data and click update
3. Update Privacy (PUBLIC, PRIVATE,
FRIEND)
1. Privacy of Itinerary
2. Privacy of posting note
4. Select a itinerary item to add details.
1. Flight
2. Train
3. Cruise
4 4. Hire Car
5. Hotel
6. Meeting
7. Activity
8. Restaurant

10. 10 5.2 POST NOTE
Post Note
1. Select a shared itinerary.
2 2. Click “post note”
3. Fill note title and content
4. Click save
1 5. Note will be shown on that itinerary.
Comment:
1. User can post note only particular
itinerary that shared by others.
3
4 5

11. 5.3 ADD FRIEND TO UPDATE
11
ITINERARY TOGETHER
Add friend to update itinerary together
1. Select your particular itinerary.
2
2. Click “Manage Friend to update this trip”
1 3. Click Add friend(s) to update our trip
4. Your friend can see at “Search Distribute
Itin” Menu and he/she can also update.
4
3

12. 12 5.4.1) ADD FLIGHT
1
Add Train
1. At Preview itinerary page , click add
Flight
2. Fill flight details
3. Click save
4. Flight information will be shown at after
click save at itinerary preview page.
2
4
3
** Now website has but about time. Therefore, you can test only date at departure/arrival time.

13. 13 5.4.2) ADD TRAIN
1
Add Train
1. At Preview itinerary page , click add
Train
2. Fill train details
3. Click save
4. Train information will be shown at after
click save at itinerary preview page
2
4
3

14. 14 5.4.3) ADD CRUISE
1
Add Train
1. At Preview itinerary page , click add
Cruise
2. Fill cruise details
3. Click save
4. Cruise information will be shown at after
click save at itinerary preview page.
2
4
3

15. 15 5.2.4) ADD HIRE CAR
1
Add Hire car
1. At Preview itinerary page , click add Hire
car
2. Fill hire car details
3. Click save
4. Hire car information will be shown at
after click save at itinerary preview
2 page.
4
3

16. 16 5.4.5) ADD HOTEL
1
Add Hotel
1. At Preview itinerary page , click add
Hotel
2. Fill Hotel details
3. Click save
4. Hotel information will be shown at after
2 click save at itinerary preview page
4
3

17. 17 5.4.6) ADD MEETING
1
Add Meeting
1. At Preview itinerary page , click add
Meeting
2. Fill Meeting details
3. Click save
4. Meeting information will be shown at
2 after click save at itinerary preview page
4
3

18. 18 5.4.7) ADD ACTIVITY
1
Add Activity
1. At Preview itinerary page , click add
Activity
2. Fill Activity details
3. Click save
4. Activity information will be shown at
2 after click save at itinerary preview page
4
3

19. 19 5.4.8) ADD RESTAURANT
1
Add Restaurant
1. At Preview itinerary page , click add
Restaurant
2. Fill Restaurant details
3. Click save
4. Restaurant information will be shown at
2 after click save at itinerary preview
page.
4
3

20. 20 5.5) EDIT ITINERARY ITEM
Edit Itinerary item
1. At Preview itinerary page, click edit on
itinerary item which you want to edit.
2. Change details
3. Click save
4. Updated information will be shown on
the preview itinerary details page.
2
1
4
3

21. 21 5.6) DELETE ITINERARY ITEM
Delete Itinerary item
1. At Preview itinerary page, click delete
on itinerary item which you want to
delete.
2. That itinerary item will be deleted. (In
picture, flight details was deleted)
1
2

22. 6. FRIEND FUNCTIONS
22

23. 23 6.1) ADD FRIEND
Add Friend
1
1. Go to menu Friend > Add Friend
2. Click friend who want to add
Comment:
1. You need to wait until your friend accept
you will see his/her sheared itinerary.
2

24. 24 6.2) ACCEPT/REJECT FRIEND
Accept or Reject Friend
1 1. Go to menu Friend > Accept or Reject
Friend
2. Click at Reject to refuse a friend
3. Click at Accept to make a friend. (Your
friend will can see your shared itinerary
which you set privacy for friend)
2
Comment:
1. Link to see your friend itinerary is
implemented.

25. 6.3) PREVIEW FRIEND LIST
25
AND UNFRIEND
Preview Friend List and Unfriend
1. Go to menu Friend > Friend List
1
2. Click at Unfriend to remove your friend
out from you friend list.
2

26. 6.4) CHECK FRIEND REQUEST
26
STATUS
Check friend request status
1. Go to menu Friend > Request Friend
Status.
2. System will show status of friends who
1 invited by you.
3. Click cancel to delete your request.
2
Comment:
1. If friend refuses your request, this page
3 will show as REJECT.
2. If friend accept you, you can see at the
friend list page.
3. This page will not show friends who
already accepted you as FRIEND.

27. 6.5) SEND E-MAIL TO
27
INVITE FRIEND JOINING WEBSITE
Send E-mail to Invite Friend
1
1. Go to menu Friend > Send E-mail to
invite friend
2. Enter E-mail and content
3. Click Send E-mail Request
4. Your friend click link to register
2 Comment
3
1. Regarding e-mail function, system will
send by shulaptop@gmail.com account.
4

28. 7. ADMIN STAFF FUNCTION
28

29. 7. ADD TRIP MANAGER
29
ACCOUNT BY ADMIN
1
Add Trip Manager Account
1. Login by user admin (If role = admin,
2 menu will show add trip manager)
2. Go to menu Add Trip Manager > Add Trip
Manager
3 3. Select user who want to set as trip
manager account
4. Fill Agency information ex. Company
name
5. Click submit
4
5

30. 8. SERACH BY GOOGLE MAP
30

31. 31 8.1 GOOGLE MAP:: SEARCH
RESTAURANTS NEARBY HOTEL
5
Search Restaurants
1. Search and view an itinerary.
1
2. Go to Hotel information. (This
function needs to add hotel
information, and fill location or
postcode firstly)
3. Link will use keyword from
Location and Postcode entered.
2
4. Click search restaurants to find
nearby restaurants on Google
Map.
4 3
5. Web will link to Google map
using keywords from Location
and Postcode recorded.

32. 8.2 GOOGLE MAP:: SEARCH
32
ACTIVITIES NEARBY HOTEL
5
Search Activities
1. Search and view an itinerary.
1
2. Go to Hotel information. (This
function needs to add hotel
information, and fill location or
postcode firstly)
3. Link will use keyword from
Location and Postcode entered.
2
4. Click search activities to find
nearby activities on Google Map.
4 3 5. Web will link to Google map
using keywords from Location
and Postcode recorded.

33. 33
8.3 GOOGLE MAP:: SEARCH RESTARUANTS
( T H I S F E AT U R E I S N O T I M P L M E N T E D S U C C E S S F U L O N W E B )
Search Restaurant
1. Select a particular itinerary
2. Select menu Google Map > Search
restaruants
3. Fill keyword
4. Click search
5. Restaurants will be show on the Google
map.
6. You can fill comment and post interested
restaurants into your note.
7. System will keep the last location where
is searched.
Click here to see list
List of activities near London
Endell Street

34. 8.4 GOOGLE MAP:: SEARCH ACTIVITIES
34
( T H I S F E AT U R E I S N O T I M P L M E N T E D S U C C E S S F U L O N W E B )
Search Activities
1. Select a particular itinerary
2. Select menu Google Map > Search
activities
3. Fill keyword
4. Click search
5. Activities will be show on the Google
map.
6. You can fill comment and post interested
activities into your note.
7. System will keep the last location where
is searched.
Click here to see list
List of activities near
350 Fifth Ave. New York

35. 9. SUPPORT MOBILE PHONE
35

36. 36 SUPPORT MOBILE PHONE
This is examples of accessing our website on iPhone. It is also compatible with SAFARI browser.