design of an image-based social network system

Transcription

design of an image-based social network system
SIM UNIVERSITY
SCHOOL OF SCIENCE AND TECHNOLOGY
DESIGN OF AN IMAGE-BASED SOCIAL
NETWORK SYSTEM
STUDENT
: LIU YUE (PI NO. W0704240)
SUPERVISOR
: TIAN JING
PROJECT CODE : JAN2011/ICT/046
A project report submitted to SIM University
in partial fulfilment of the requirements for the degree of
Bachelor of Information Technology and Business
November 2011
TABLE OF CONTENTS
Page
ABSTRACT ---------------------------------------------------------------------------------------------------------------- 3
ACKNOWLEDGEMENT ------------------------------------------------------------------------------------------------ 3
CHAPTER ONE: INTRODUCTION AND PROBLEM STATEMENT
1.1 INTRODUCTION --------------------------------------------------------------------------------------------- 4
1.1.1 HISTORY ----------------------------------------------------------------------------------------------- 4
1.1.2 SOCIAL IMPACTS ----------------------------------------------------------------------------------- 4
1.1.3 TYPICAL STRUCTURE
1.1.3.1 BASICS --------------------------------------------------------------------------------------- 5
1.1.3.2 ADDITIONAL FEATURES --------------------------------------------------------------- 6
1.1.3.3 PROPOSED APPROACH AND
METHOD TO BE EMPLOYED FOR PROJECT -------------------------------------- 8
1.2 PROBLEM STATEMENT
1.2.1 SOFTWARE APPLICATION AND WEBPAGE INTERFACE ------------------------------- 9
1.2.2 DATABASE DESIGN FOR A DYNAMIC ENVIRONMENT -------------------------------- 9
1.2.3 CHOSEN OF WEBSITE DESIGN
LANGUAGE FOR A DYNAMIC ENVIRONMENT ------------------------------------------- 9
CHAPTER TWO: LITERATURE REVIEW AND CITATIONS
2.1 CONTENT-BASED IMAGE RETRIEVAL TECHNOLOGY
2.1.1 INTRODUCTION ---------------------------------------------------------------------------------- 10
2.1.2 RELATEDWORK ---------------------------------------------------------------------------------- 11
2.1.3 PROPOSED CBIR MODEL ---------------------------------------------------------------------- 12
2.1.4 COLOR ---------------------------------------------------------------------------------------------- 12
2.1.5 TEXTURE ------------------------------------------------------------------------------------------- 13
2.1.6 EDGE DENSITY ----------------------------------------------------------------------------------- 13
2.1.7 EXPERIMENTAL SETUP AND RESULTS --------------------------------------------------- 15
2.1.8 RETRIEVAL EFFICIENCY ---------------------------------------------------------------------- 16
2.1.9 CONCLUSION AND FUTURE WORK -------------------------------------------------------- 17
2.2 APACHE TOMCAT 7 ------------------------------------------------------------------------------------- 18
CHAPTER THREE: INTRUDUCTION TO SELECT OF METHODS AND ANALYSIS
3.1 SOFTWARE APPLICATION AND WEBPAGE INTERFACE ------------------------------------- 19
3.2 DATABASE DESIGN FOR A DYNAMIC ENVIRONMENT -------------------------------------- 19
3.3 CHOSEN OF WEBSITE DESIGN LANGUAGE FOR A DYNAMIC ENVIRONMENT ------ 19
CHAPTER FOUR: DETAILED PRESENTATION OF IMAGE-BASED SOCIAL NETOWORK SYSTEM
4.1 IMAGE-BASED SOCIAL NETWORK SYSTEM PROCESS --------------------------------------- 20
4.1.1 SEARCH BY USERS ------------------------------------------------------------------------------ 21
4.1.2 SEARCH BY PHOTO ----------------------------------------------------------------------------- 26
4.2 PROJECT MANAGEMENT
4.2.1 PROJECT MANAGEMENT LIFECYCLE ----------------------------------------------------- 30
4.2.2 WORK BREAKDOWN STRUCTURE (WBS) ------------------------------------------------ 31
4.2.3 PROJECT GANTT CHART ---------------------------------------------------------------------- 32
4.2.4 RISK ASSESSMENT
4.2.4.1 RISK IDENTIFICATION -------------------------------------------------------------- 32
4.2.4.2 MITIGATION STEPS ------------------------------------------------------------------ 33
CHAPTER FIVE: EVALUATION OF EXPERIMENTAL/THEORETICAL RESULTS --------------------- 33
CHAPTER SIX: CONCLUSIONS AND REFLECTIONS
6.1 CONCLUSIONS ------------------------------------------------------------------------------------------- 34
6.2 REFLECTIONS -------------------------------------------------------------------------------------------- 36
REFERENCES ------------------------------------------------------------------------------------------------------------ 37
APPENDIX ---------------------------------------------------------------------------------------------------------------- 39
ICT 499 CAPSTONE PROJECT
2
ABSTRACT
Over the recent years, the social network service (e.g. Facebook, Friendster) is a very
popular service that focuses on building and reflecting of social relations among people.
For example, who share interests and/or activities, will be suggested to be other people’s
friend who has the same interests and/or activities. One person uploads a photo with groups
of people, the social network system will list down all the names of the people inside the
photo based on their face images, and suggest them to be friends in the network system.
This project aims to design such social network from a new prospective---image-based. The
social relations among users are established based on their image sharing profiles. For
example, if a user uploads a photo of soccer activity, then other users having photos related
to soccer activities could be suggested to be friend of this user. This new social network
system will be a new revolution for the social network services, the current social network
services have the same limitation – those information link people together must be exactly
the same. The new social network system can break the limitation, users do not need to
upload the same photos then can be linked together, this system will analyze the photos and
classify them into different categories, it will select the photos with same category and link
them together, suggest the users who upload the same category photos to be friends.
ACKNOWLEDGEMENT
I would like to express my heartfelt gratitude towards my supervisor Tian Jing, for his
invaluable advices and guidance for this project during this whole year. He had been very
patient and generous towards the sharing of his expertise in Content-based image retrieval
knowledge and creative idea for social network system with me.
Last but not least, I also would like to thank the senior patch student who gave me the idea
for using website as a platform to perform my project, and the suggestion for choosing the
entire necessary software I need to use for my project.
ICT 499 CAPSTONE PROJECT
3
CHAPTER ONE: INTRODUCTION AND PROBLEM STATEMENT
1.1. INTRODUCTION
A social network is a social structure made up of individuals (or organizations), which are
tied (connected) by one or more specific types of interdependency, such as friendship,
kinship, common interest, financial exchange, dislike, sexual relationships, or relationships
of beliefs, knowledge or prestige. [1]
A social network service essentially consists of a representation of each user (often a
profile), his/her social links, and a variety of additional services. Most social network
services are web based and provide means for users to interact over the internet, such as email and instant messaging. The main types of social networking services are those which
contain category places (such as former school year or classmates), means to connect with
friends (usually with self-description pages) and a recommendation system linked to trust.
1.1.1. HISTORY
Early social networking on the World Wide Web began in the form of generalized online
communities such as Theglobe.com (1994), Geocities (1995) and Tripod.com (1995). Many
of these early communities focused on bringing people together to interact with each other
through chat rooms, and encouraged users to share personal information and ideas via
personal WebPages by providing easy-to-use publishing tools and free or inexpensive web
space. New social networking methods were developed by the end of the 1990s, and many
sites began to develop more advanced features for users to find and manage friends. This
newer generation of social networking sites began to flourish with the emergence of
Friendster in 2002, and soon became part of the Internet mainstream. After two years,
Facebook was found by Mark Zuckerberg, and it has since become the largest social
networking site in the world. Today, it is estimated that there are now over 200 active sites
using a wide variety of social networking models.
1.1.2. SOCIAL IMPACTS
Web based social network services make it possible to connect people who share interests
and activities across political, economic, and geographic borders. Through e-mail and
instant messaging, online communities are created where a gift economy and reciprocal
altruism are encouraged through cooperation.
ICT 499 CAPSTONE PROJECT
4
There are some application domains for social network services:
Government applications: social networking tools serve as a quick and easy way for
the government to get the opinion of the public and to keep the public updated on
their activity.
Business applications: the use of social network services in an enterprise context presents
the potential of having a major impact on the world of business and work.
Dating applications: many social networks provide an online environment for people to
communicate and exchange personal information for dating purposes.
Educational applications: social networks focused on supporting relationships between
teachers and their students are now used for learning, educator professional development,
and content sharing.
Medical applications: social networks are beginning to be adopted by healthcare
professionals as a means to manage institutional knowledge, disseminate peer to peer
knowledge and to highlight individual physicians and institutions.
1.1.3. TYPICAL STRUCTURE
1.1.3.1. BASICS
Social networking sites tend to share some conventional features. Most often, individual
users are encouraged to create profiles containing various information about themselves.
Users can often upload pictures of themselves to their profiles, post blog entries for others
to read, search for other users with similar interests, and compile and share lists of contacts.
In addition, user profiles often have a section dedicated to comments from friends and other
users. To protect user privacy, social networks usually have controls that allow users to
choose who can view their profile, contact them, add them to their list of contacts, and so
on.
In recent years, it has also become common for a wide variety of organizations to create
profiles to advertise products and services. [2]
ICT 499 CAPSTONE PROJECT
5
1.1.3.2. ADDITIONAL FEATURES
Some social networks have additional features, such as the ability to create groups that
share common interests or affiliations, upload or stream live videos, and hold discussions in
forums. Geosocial networking co-opts internet mapping services to organize user
participation around geographic features and their attributes.
The new social network system designed from this project, it can link the users together
using similar photos uploaded by the users, and the interesting thing is that this system can
generate text information for the photos, users no need to write any information about the
photos, and the system can help users to describe the photos. This feature can be done is
because of the content-based image retrieval technique.
Content-based image retrieval (CBIR), also known as query by image content (QBIC) and
content-based visual information retrieval (CBVIR) is the application of computer vision
techniques to the image retrieval problem, that is, the problem of searching for digital
images in large databases.
"Content-based" means that the search will analyze the actual contents of the image rather
than the metadata such as keywords, tags, and/or descriptions associated with the image.
The term 'content' in this context might refer to colors, shapes, textures, or any other
information that can be derived from the image itself. CBIR is desirable because most web
based image search engines rely purely on metadata and this produces a lot of garbage in
the results. Also having humans manually enter keywords for images in a large database
can be inefficient, expensive and may not capture every keyword that describes the image.
Thus a system that can filter images based on their content would provide better indexing
and return more accurate results.
The most common method for comparing two images in content based image retrieval
(typically a new uploaded image and an image from the database) is using an image
distance measure. An image distance measure compares the similarity of two images in
various dimensions such as color, texture, shape, and others. For example a distance of 0
signifies an exact match with the query, with respect to the dimensions that were
considered. As one may intuitively gather, a value greater than 0 indicates various degrees
of similarities between the images. Search results then can be sorted based on their distance
to the queried image.
ICT 499 CAPSTONE PROJECT
6
Color: computing distance measures based on color similarity is achieved by computing a
color histogram for each image that identifies the proportion of pixels within an image
holding specific values (that humans express as colors). Current research is attempting to
segment color proportion by region and by spatial relationship among several color regions.
Examining images based on the colors they contain is one of the most widely used
techniques because it does not depend on image size or orientation. Color searches will
usually involve comparing color histograms, though this is not the only technique in
practice.
Texture: texture measures look for visual patterns in images and how they are spatially
defined. Textures are represented by texels which are then placed into a number of sets,
depending on how many textures are detected in the image. These sets not only define the
texture, but also where in the image the texture is located. Texture is a difficult concept to
represent. The identification of specific textures in an image is achieved primarily by
modeling texture as a two-dimensional gray level variation. The relative brightness of pairs
of pixels is computed such that degree of contrast, regularity, coarseness and directionality
may be estimated (Tamura, Mori & Yamawaki, 1978). However, the problem is in
identifying patterns of co-pixel variation and associating them with particular classes of
textures such as silky, or rough.
Shape: shape does not refer to the shape of an image but to the shape of a particular region
that is being sought out. Shapes will often be determined first applying segmentation or
edge detection to an image. Other methods like [Tushabe and Wilkinson 2008] use shape
filters to identify given shapes of an image. In some case accurate shape detection will
require human intervention because methods like segmentation are very difficult to
completely automate. [3]
In the real world, man like using camera to capture his world in pictures, and conveniently
share them with others. Today, more and more people become photography lovers, and
share their photography work to each other, then find friends. Using the new social network
service designed from this project, it is easier for them to find friends no matter how far
away between each others.
ICT 499 CAPSTONE PROJECT
7
1.1.3.3 PROPOSED APPROACH AND METHOD TO BE EMPLOYED FOR
PROJECT
In this project design approach, steps will closely following the flow chart showing below:
Upload a photo
To System
Analyze photo
Retrieve
System
Database
Create Text Information
Generate Annotation User
Matching
System
Database
Suggestion Message
Display
Information
This project system has its own database, inside the database there are tens of thousands of
photos, each photo has its own text information.
When a new user uploads a photo, the system will analyze the photo based on its color,
texture, shape, and other dimensions. After that system will go to its database, find out the
similar photos, and compare that new photo with those similar photos based on the same
dimensions (color, texture, and others), then use the similar data of those similar photos to
generate a new text information for that new uploaded photo. Normally, that information
can be a composite data, it comes from different photos, and the system will pick up each
information from each part of the similar photos, and generate a new data. At the same
time, system will save this new information as a new data into the database, so the system’s
ICT 499 CAPSTONE PROJECT
8
database can keep up to date. Based on this up to date database, every photo upload to the
system, can generate information for it.
After system generate the information of that photo, the system will display out the
information for that photo on the webpage, meanwhile, find out all the names of users who
upload those similar photos, list down the users’ names with their profile photos and show
on the webpage also, so that new user can know who have the similar photos, and find
friend.
1.2. PROBLEM STATEMENT
1.2.1. SOFTWARE APPLICATION AND WEBPAGE INTERFACE
The photo analysis process is done by the software application called MATLAB, it supports
the entire data analysis process, from acquiring data from external devices and databases,
through preprocessing, visualization, and numerical analysis, to producing presentationquality output, it provides interactive tools and command-line functions for data analysis
operations. The photo analysis process is done through its command-line functions, and
shows the result in the command-line windows.
Social network system is a web based system, it does not support command-line functions
for data analysis operations, and there is no direct interface from command-line output to
the webpage. This issue makes difficult for the project to display the photo analysis result
from command-line output in the webpage.
1.2.2. DATABASE DESIGN FOR A DYNAMIC ENVIRONMENT
As mentioned above, photo analysis, search users and user data comparison are all dynamic
processes, their database must be stored inside a dynamic web environment, which is
server. So the problem is become where to find a server? Normally there are two ways to
do that, one is to find an online space to store those data, the other way is to build my own
PC as a server. For this school project, choose the suitable method to make server depends
on the project’s cost and duration.
1.2.3. CHOSEN OF WEBSITE DESIGN LANGUAGE FOR A DYNAMIC
ENVIRONMENT
There are so many programming languages for website design, like HTML, PHP, VP.NET,
JSP, and JavaScript and so on. Photo analysis, search users and user data comparison are
ICT 499 CAPSTONE PROJECT
9
dynamic process, so this website design needs to choose a programming language which
can support dynamic web environment. As the project duration is only one year, choose the
easiest and familiar language is better for me to finish this project within schedule.
CHAPTER TWO: LITERATURE REVIEW AND CITATIONS
2.1. CONTENT-BASED IMAGE RETRIEVAL TECHNOLOGY [4]
2.1.1. INTRODUCTION
HE increasing amount of digitally produced images requires new methods to archive and
access this data. Conventional databases allow for textual searches on meta data only.
Content Based Image Retrieval (CBIR) is a technique which uses visual contents, normally
called as features, to search images from large scale image databases according to users’
requests in the form of a query image [5], [12], [13].
The commercial image search engines available as on date are: QBIC, VisualSeek, Virage,
Netra, PicSOM, FIRE, AltaVista, etc. Region-Based Image Retrieval (RBIR) is a promising
extension of CBIR [16]. Almost all the CBIR systems designed so far widely use features
like color, shape, textures, and spatial all together or few of these. For example, [6]
describes a method for image retrieval purely based on color and texture. In this paper apart
from the usual features like color and texture, a new feature extraction algorithm called
edge histogram is introduced. Edges convey essential information to a picture and therefore
can be applied to image retrieval. The edge histogram descriptor captures the spatial
distribution of edges [6], [20]. Our model expects the input as Query By Example (QBE)
and any combination of features can be selected for retrieval.
The focus of this research is to build a universal CBIR system using low level features.
These are mean, median, and standard deviation of Red, Green, and Blue channels of color
histograms. Then the texture features such as contrast, energy, correlation, and
homogeneity are retrieved. Finally the edge features that include five categories vertical,
horizontal, 45 degree diagonal, 135 degree diagonal, and isotropic are added [6].
ICT 499 CAPSTONE PROJECT
10
2.1.2. RELATEDWORK
Early work on image retrieval can be traced back to the late 1970s. In 1979, a conference
on Database Techniques for Pictorial Applications was held in Florence. Since then, the
application potential of image database management techniques has attracted the attention
of researchers. In the early 1990s, as a result of advances in the Internet and new digital
image sensor technologies, the volume of digital images produced by scientific,
educational, medical, industrial, and other applications available to users increased
dramatically. The difficulties faced by text-based retrieval became more and more severe.
The efficient management of the rapidly expanding visual information became an urgent
problem.
Local features based methods proved good results [15]. For a successful CBIR, note that
the indexing scheme to be efficient for searching in the image database. Recent retrieval
systems have incorporated users' relevance feedback to modify the retrieval process in
order to generate perceptually and semantically more meaningful retrieval results. The
works shown in [6] was mixture of color, texture, and edge density for MPEG-7 standards
and where as in [8] the edge histogram was used. A similar kind of approach was done in
[9], [17] based on edge density for detecting people in images. In [11], [13], color and
texture features were used for image retrieval. Considerable amount of work had already
been done for medical images. For these types of images, texture is highly preferred [14],
[21]. To make image retrieval faster, several indexing structures were designed. The most
popular ones are 2D-S Tree, Graph-based, containment tree, fuzzy-based, relationship tree,
etc.
ICT 499 CAPSTONE PROJECT
11
2.1.3. PROPOSED CBIR MODEL
The proposed CBIR framework is shown in below. The images are kept in a database called
Image Database. After preprocessing, images are segmented by using the method described
in [9].
Only the dominant segments are considered for feature extraction namely color histogram
features, texture features, and image density features (explained in the subsequent sections).
Then a single feature vector is constructed and stored in the feature database. When a query
image is submitted by the user, the same work is done as explained above to get its feature
vector. For similarity comparison between the query image and the database image, the
Euclidean distance method is used. Using an appropriate threshold, images that are
semantically closer are retrieved from the database and displayed as a thumbnail.
2.1.4. COLOR
In image retrieval systems color histogram is the most commonly used feature. The main
reason is that it is independent of image size and orientation. Also it is one of the most
straight-forward features utilized by humans for visual recognition and discrimination.
Statistically, it denotes the joint probability of the intensities of the three color channels.
Once the image is segmented, from each region the color histogram is extracted. The major
statistical data that are extracted are histogram mean, standard deviation, and median for
each color channel i.e. Red, Green, and Blue. So totally 3 × 3 = 9 features per segment are
ICT 499 CAPSTONE PROJECT
12
obtained. All the segments need not be considered, but only segments that are dominant
may be considered, because this would speed up the calculation and may not significantly
affect the end result.
2.1.5. TEXTURE
There is no precise definition for texture. However, one can define texture as the visual
patterns that have properties of homogeneity that do not result from the presence of only a
single color or intensity. Texture determination is ideally suited for medical image
retrievals [21]. In this work, computation of gray level cooccurrence matrix is done and
from which a number of statistical measures are derived. The autocorrelation function of an
image is used to quantify the regularity and the coarseness of a texture. This function is
defined for an image I as:
A texture is characterized by a set of values called energy, entropy, contrast, and
homogeneity. The following formulas are used to calculate the features and are shown in
equations 2 to 5 [22].
The performance of the texture features are tested using test images from Corel image
database just like color.
2.1.6. EDGE DENSITY
A novel approach in the field of image retrieval is use of edge information. The edge
histogram is normally used in the area of computer vision primarily in tracking of moving
objects [18]. Edges convey essential information to a picture, and their accurate detection is
of primary importance. The identification of edges inside one image is the first step to
recognize geometric shapes within one image [20].
ICT 499 CAPSTONE PROJECT
13
A. Edge Histogram Descriptor (EDH)
The Edge Histogram Descriptor represents the local edge distribution in the image which is
obtained by subdividing the whole image into 4 × 4 sub images. For each of these sub
images we compute the histogram. This means a total of 16 × 5 = 80 bins are required. The
histograms are categorized into four directional edges called vertical, horizontal, 45 degree,
135 degree, and one non-directional edge. To detect the edge strength, filter coefficients
shown in below were applied. Edge blocks that are greater than a given threshold is
selected [8].
For each sub image the edge density can be calculated using equation (6). Let (x1, y1) and
(x2, y2) are the top left corner and the bottom right corner of the sub image. Then the edge
density f is given by,
where ar is the region area. All these features are put in the feature vector table.
B. Similarity Comparison and Greedy Method
For similarity comparison, we have used Euclidean distance, d using equation 7.
where FQ[i] is the ith query image feature, and FDB[i] is the corresponding feature in the
feature vector database. Here, N refers to the number of images in the database.
The main issue in image retrieval systems is the number of dimensions of the feature vector
which is normally huge. For example QBIC system reduces the 20-dimension feature
vector to two or three using Principle Component Analysis (PCA) [23]. It explores
exponentially with the increasing of the dimensionality and eventually reduces to sequential
searching. To overcome these problems a simple method called greedy strategy is used.
ICT 499 CAPSTONE PROJECT
14
Consider three database images and their corresponding segments as I1(S1, S2, S4), I2(S2,
S5, S8, S7), and I3(S1). The sequence of the segments shown in I1, I2, and I3 are based on
descending order of the size/area of each segment. Similarly, let QI(S7, S2) denotes the
segments of the query image. The algorithm shown in below uses the greedy strategy to
compare the similarity between the query image and the database images.
Algorithm ImageSimilarity
// I[N] – Image DB with N images
// QI – Query Image
foreach (Image I in I[N])
foreach (Segment s in SegmentSet)
if (Euclidean(QI[s], I[s]) < threshold)
// continue to check other segments
else
// no need to check other segments
end.
Suppose if we fix 20 features for each segment and if there are five segments on an average
per image, then we must repeat the comparison for each segment. With this proposed
method we obtain a reasonable increase in performance when the number of segments is
more.
2.1.7. EXPERIMENTAL SETUP AND RESULTS
A Dell Precision Pentium Core2 Duo Workstation with 2GB RAM computer is used for
conducting the experiments. The main software tools used were Visual Studio 2005, C#
.NET Framework for developing UI components, building the logic, etc. For the image
processing work, the open source products like AForge.Imaging and AForge.Math from
Google (http://code.google.com/p/aforge/) were used.
To store the images and the feature vector, Oracle 10g database was selected for various
reasons. Oracle Multimedia (formerly Oracle interMedia) is a feature that enables Oracle
Database to store, manage, and retrieve images, audio, video, or other heterogeneous media
data in an integrated fashion with other enterprise information. Corel Image database with
1000 natural images were used for testing the proposed CBIR system.
ICT 499 CAPSTONE PROJECT
15
2.1.8. RETRIEVAL EFFICIENCY
The retrieval efficiency, namely recall and precision were calculated using 1000 natural
color images (100 in each category) from Corel image database. Below shows the
screenshot of the framework. Standard formulas have been used to compute the precision
and recall for four query images.
By randomly selecting four query images from the CorelImage Database, the system was
tested and the results are shown in Table I.
ICT 499 CAPSTONE PROJECT
16
In Table I, the first line in each query image indicates precision and the second line
indicates recall. Below the Table I, it shows the query images used in conducting the
experiment.
2.1.9. CONCLUSION AND FUTURE WORK
This paper proposed a universal model for the Content Based Image Retrieval System by
combining the color, texture, and edge density features or individually. Users were given
options to select the appropriate feature extraction method for best results. The advantages
of global and local features together have been utilized for better retrieval efficiency. The
results are quite good for most of the query images and it is possible to further improve by
fine tuning the threshold and adding relevance feedback.
ICT 499 CAPSTONE PROJECT
17
2.2. APACHE TOMCAT 7 [24]
Apache Tomcat is an open source software implementation of the Java Servlet and
JavaServer Pages technologies. The Java Servlet and JavaServer Pages specifications are
developed under the Java Community Process.
Apache Tomcat is developed in an open and participatory environment and released under
the Apache License version 2. Apache Tomcat is intended to be a collaboration of the bestof-breed developers from around the world.
The Apache Tomcat Project is proud to announce the release of version 7.0.22 of Apache
Tomcat. This release includes bug fixes and new features compared to version 7.0.21
including:

Further improvements to the memory leak detection and prevention features.

Fix issue that prevented using SSL with the HTTP BIO connector and Java
7.

Add support for controlling which session attributes are replicated when
using session replication (a.k.a clustering).
ICT 499 CAPSTONE PROJECT
18
CHAPTER THREE: INTRUDUCTION TO SELECT OF METHODS AND
ANALYSIS
Based on the above Literature Research, the three main problems are motioned in “Problem
Statement” can be resolved.
3.1. SOFTWARE APPLICATION AND WEBPAGE INTERFACE
We can avoid direct interfacing MATLAB to Webpage, instead of the interface, before we
build the website system, we will use MATLAB command-line functions to calculate all
the value results of all the photos inside the photo database. When social network system
analysis the photo, it can easily call out the value result from the photo result database and
display on the webpage.
3.2. DATABASE DESIGN FOR A DYNAMIC ENVIRONMENT
Based on the project cost and duration, Apache Tomcat is a free source software to build
my PC as a server, and the setting for it is not too difficult to learn. Follow the guild line of
Tomcat configuration, the database can be stored under the path: C:\Program Files\Apache
Software Foundation\Tomcat 7.0\webapps\ROOT.
3.3. CHOSEN OF WEBSITE DESIGN LANGUAGE FOR A DYNAMIC
ENVIRONMENT
Since we use Tomcat to build the PC as a server, from the Tomcat introduction, it can
support HTML, Java, and JavaScript language. Based on my study in Temasek
Polytechnics, I have learnt HTML and JavaScript before, and during my study in UNISIM,
I learnt Java language for 2 years.
After I realise my strength for certain programming language, the best and easiest choice is
to use Microsoft FrontPage to create HTML webpage, and inside the HTML code, to insert
Java and JavaScript code to perform the dynamic process within the system. Using the
familiar language I learnt before, can help me save more time in the project coding part,
and have enough time to do the project testing and modification.
ICT 499 CAPSTONE PROJECT
19
CHAPTER FOUR: DETAILED PRESENTATION OF IMAGE-BASED SOCIAL
NETOWORK SYSTEM
4.1. IMAGE-BASED SOCIAL NETWORK SYSTEM PROCESS
From the image-based social network system home page, there are two main function bars
to go in to the users’ information pages.
The first one is search user bar, you can type in users’ names and press search button, the
system will display out the user’s name below, so you can click the user’s name and go in
to that user’s information page. The other function bar is search photo, you can upload a
photo by pressing the browse button and choose any photo you want from your local
computer drive, then the photo will display under below, when you click that photo, the
system will display out a user list with all the users whose favourite photos are related to
that photo you upload one, so you can click each user’s name and go in to see the user
details.
ICT 499 CAPSTONE PROJECT
20
4.1.1. SEARCH BY USERS
The search user by name process can be described as below flow chart:
From the image-based social network home page, type in the user name “liu yue” in the
search function bar, and click search. The system will go to its user database and find the
user’s name match the words you type in, and display out the result – the user page link.
ICT 499 CAPSTONE PROJECT
21
If you only type “liu” in the search function bar, the system will go to its user database find
out all the users’ name contain word “liu”, and display out those users’ names.
After the user page link displays under the search function bar, you can either click the user
name go in to the user page or follow the path address the result tell you, copy and paste it
to the internet browser to see the user page. This search engine function is using JavaScript
programming code (Refer to Appendix – Home Page Coding) to execute the search
process, the good reason to use JavaScript programming code for this function part is
JavaScript code can be used for the dynamic process, but HTML code cannot perform the
dynamic function, and JavaScript can insert into HTML code and perform the dynamic
process function.
ICT 499 CAPSTONE PROJECT
22
Using user Liu Yue his user page as an example
It is a standard social network user information page, inside has the information about user
profile picture, the user name, date of birth, nationality, occupation, hobby, email and his
favourite photos upload by him. At the bottom of this user page, there is a link “Go back to
Home Page” can bring you go back the image-based social network system home page, and
search for other users.
Beside the user’s profile picture, there is a button “Find My Neighbours”, if you click this
button, it will go to system database, using user Liu Yue’s all the information, text
information and photo information to compare with other users’ text information and photo
information. The system will analyze all the information, including comparison for all the
same category text information, like comparison for user name, user date of birth, user
hobby and so on...and give all the same category comparison results a similarity number. At
the same time, it also perform the photo analysis process using Content-based image
retrieval technology (Refer to Literature Review and Citations, Content-based image
retrieval technology) to analyze all the photo from user liu yue, and use them to compare
with all the photos which other users have, it separates those photos into different
ICT 499 CAPSTONE PROJECT
23
categories, for example, those photos related to basketball will compare with each other,
those photos related to dance will compare with other dance photos.
Based on the formula of Literature Review and Citations - Content-based image retrieval
technology, it calculates the value base on the color, texture and edge density of those
photos, and displays the result value to give different category photos comparison a result
number – the similarity percentage number. At the last, the system will collect all the
similarity percentage numbers from photo analysis and text information analysis, and
calculate the average similarity percentage number and send back it to user Liu Yue. So
when you click “Find My Neighbours”, it will display out three users’ name beside the Liu
Yue’s profile picture, and show the similarity number for each users. The three users are
the top three users who are more similar to user Liu Yue comparing with other users in the
social network system.
After the top three similar users come out, you can click each user’s name to see their user
information pages, or if you want to see why these three users are the most similar users to
user Liu Yue, you can click the similarity number, and it will bring you to another page –
the user comparison page.
ICT 499 CAPSTONE PROJECT
24
In the user comparison page, it will list out all the comparison results between every same
category information, like above example, the similarity for Liu Yue’s date of birth and
Luo Zhi Xiang’s date of birth is 60%, because they have the same month – September, but
the date and year are different, so the similarity is only 60%. And the nationality is the
same – China, so this part the similarity is 100%, follow by Hobby, photo. The photo part
also displays the similarity result for the same category photo, like Bruce Lee, the two
photo are all related to the same person – Kong Fu star Bruce Lee, they are playing shuang
jie gun, but they are different person, first one is Liu Yue, he just learnt from Bruce Lee to
play shuang jie gun, and the second one is the person Bruce Lee, so the similarity for these
two photo is 60%, below table shows the detail for using Content-based image retrieval
technology to calculate the similarity:
Bruce Lee Photo
User Liu Yue
User Luo Zhi Xiang
ICT 499 CAPSTONE PROJECT
Color
10
60
Texture
50
50
EHD
30
40
Average Results
30
50
similarity
(30/50)x100% = 60%
25
Base on the Content-based image retrieval concept, the system can calculate the similarity
results for Dancing and Basketball photos. If user Luo Zhi Xiang wants to be a friend with
Liu Yue, he just clicks “Liu Yue” or Liu Yue’s profile picture to go to Liu Yue’s user
information page, looks for Liu Yue’s email address and writes email to him to contact
him.
At the bottom of this page, there is also a link “Go back find other users” can go back to the
social network system home page to find other users you want to look for.
4.1.2. SEARCH BY PHOTO
Search user is a very common method to look for user in many social network systems, but
this image-based social network system has a very special method to look for user, that is
search user by upload photo. The process will follow the below flow chart:
ICT 499 CAPSTONE PROJECT
26
From the image-based social network system home page, under the search photo function
bar, when you click “Browse” button, it will open a new small window and ask you to
choose a photo from your local computer drive and open it, after you open the photo it will
display out below the search photo function bar.
Using above screen shot as a detail example, when you upload a Michael Jordan’s photo,
the Michael Jordan’s photo will display below this search photo function bar, and when you
click this Michael Jordan photo, it will bring you go to another webpage – photo search
result page with a user list and all the similar photos each individual user has, and you can
click each individual user’s name or profile picture to go to each individual user’s
information page and check that user’s favourite photos, inside those favourite photos, you
sure can find some photos which are similar to Michael Jordan’s photo.
ICT 499 CAPSTONE PROJECT
27
Photo 1
Photo 2
Photo 3
Photo 1
Photo 2
This process is using Content-based image retrieval technology (Refer to Literature Review
and Citations, Content-based image retrieval technology) to perform it, and the
programming language is using HTML plus JavaScript. When you upload a Michael
Jordan’s photo, this image-based social network system will analyze the Michael Jordan’s
photo, after the analysis finish, it will go to its photo database to search for all the photos
are similar to this Michael Jordan’s photo, and use the Content-based image retrieval
technology formula based on the color, texture and edge density to calculate the similarity
value for each photo those are similar to the Michael Jordan’s photo. After the similarity
ICT 499 CAPSTONE PROJECT
28
calculation finish, the system will use these similar photos to search for their owners from
user database, and list out all the users’ name with their photo together to show on the
photo search result page. As above example, user Liu Yue has the same photo as the
Michael Jordan’s photo, so the similarity value is 100%, for user Luo Zhi Xiang, it’s the
same, and he also has the same photo as Michael Jordan’s photo, the similarity value is
100% too. And for user Michael Jordan, he is the owner of that Michael Jordan’s photo, so
the system will list out all the photos he has, because those photos are all about himself –
Michael Jordan, and also show out the similarity results for each photo he has.
The last user has the similar photo to Michael Jordan is Lebron James, he does not have
Michael Jordan’s photo, but his photo are all about sports – basketball, same activity as
user Michael Jordan’s photo, and his basketball clothes number is 23, same as Michael
Jordan’s, some clothes is the same color with Jordan’s clothes and so on...base on these
color, activity, texture information, the image-based social network system can give each
photo a similarity value, and displays out. Using below table to show the detail for Contentbased image retrieval calculation of each similarity result, this can make user understand
clearly what’s the reason each photo has the similar part to that Michael Jordan’s photo.
Michael Jordan Photo
User Jordan
User Lebron photo 1
User Lebron photo 2
Color
70
75
10
Texture
80
30
50
EHD
60
42
66
Average Results
70
49
42
similarity
(49/70)x100% = 70%
(42/70)x100% = 60%
Base on the search user by upload photo flow chart, the following process will be the same
as search user by name, after user finish the photo search result page, they can go to each
user’s information page by click that user’s name or profile picture, when go to each user’s
main page, to click “Find My Neighbours” to search for the person who is more closed to
them.
ICT 499 CAPSTONE PROJECT
29
4.2. PROJECT MANAGEMENT
During the study in SIM University, IT Project Management course helps me to gain
insight knowledge on the good practices one should have when executing project
management. Using the IT Project Management knowledge tools such as Work Breakdown
Structure (WBS), project management lifecycle, risk assessment and development of
schedules (project Gantt chart) help me to manage well my image-based social network
system project.
4.2.1. PROJECT MANAGEMENT LIFECYCLE
The following is the phase of the project management lifecycle that was being read on:
Project Initiation
Project Planning
Project Execution & Control
Closing Project
Project Initiation: understand well the scope of the project and work with my supervisor
closely to think about the idea to achieve the project goal.
Project Planning: separate the project into different phases, set a task for each phase, and
the planning to finish each task.
Project Execution & Control: follow the project planning to finish every task during each
project phase, perform testing at the end of every phase, and prepare risk management to
control the project to avoid the project goes to the wrong direction.
Closing Project: perform project modification to check whether the output of the project
meet the project goal, and prepare final project report.
ICT 499 CAPSTONE PROJECT
30
4.2.2. WORK BREAKDOWN STRUCTURE (WBS)
This project follows the below Work Breakdown Structure (WBS) strictly to finish every
task during each project phase:
ICT 499 CAPSTONE PROJECT
31
4.2.3. PROJECT GANTT CHART
In order to achieve the project objective successfully, proper project schedule plan is
required. Project Gantt chart is the most useful tool to monitor the project schedule and
process, below is the project Gantt chart for the image-based social network system project:
4.2.4. RISK ASSESSMENT
4.2.4.1. RISK IDENTIFICATION
Before starting doing this image-based social network system project, it is necessary to
identify the risk hiding in the project period, analyze the impact of the risk, so we can have
enough preparation to avoid the project goes to the wrong direction.
1). Knowledge of media engineering: as an IT student, I did not have any knowledge of
media process and Content-based image retrieval technology. It is my first time to touch
with any media engineering field, especially to use IT programming to perform media
process. I may be confused in some understanding of the image retrieve process, and it may
cause to use it wrongly to create the project, in the end make the project fail.
ICT 499 CAPSTONE PROJECT
32
2). Full time work and part time study: I’m a full time worker, and part time student, there
will be a conflict problem between working and school project doing, sometimes working
time may affect the school project schedule and cause there is not enough time to self-study
of media process and Content-based image retrieval technology, and finally cause the
school project cannot be finished within dateline.
4.2.4.2. MITIGATION STEPS
1). Follow the project Gantt chart strictly, in order to ensure this image-based social
network system project can be successfully completed within dateline.
2). Understand the Content-based image retrieval technology very well, before using it to
integrate with IT programming part to perform media process, in order to avoid
unnecessary mistakes during project.
3). Plan well the time for project doing and working, make sure they will not interrupt each
other.
CHAPTER FIVE: EVALUATION OF EXPERIMENTAL/THEORETICAL
RESULTS
Finally, we can start a complete testing for this image-based social network system. We
open a Internet Explorer, type in the social network address:
http://localhost:8080/index.htm to open it.
First, we start to test the “Search by Users” function, we type in “SIM” in the search by
users function bar, and click “Search” button, then below the search by users function bar
shows “Search Results, Total found: 0”, it means there is no “SIM” user, to check whether
it is correct, we go to user database “C:\Users\1\Documents\Project”, there is no “SIM”
user inside, so this search user engine works good, it can indicate the error message to tell
people whether a user is inside the social network or not. Now we type in “Liu Yue” in the
search by users function bar, and click “Search” button, then below shows “Liu Yue Score:
14, Click the user's name or use below path to see the details,
http://localhost:8080/LiuUser.htm, Total found: 1”, and we click “Liu Yue”, it brings us to
user Liu Yue’s user page. Inside the Liu Yue user page, we can see the information about
ICT 499 CAPSTONE PROJECT
33
Liu Yue and his favourite photo, near Liu Yue’s profile picture, we click “Find My
Neighbours”, it comes out three users – Luo Zhi Xiang, Lee Hyori and Park Ji Yoon, beside
each users’ picture, there is a black color bar and a number, Luo Zhi Xiang – 80%, Lee
Hyori – 70%, Park Ji Yoon – 70%, what’s this mean? So we just click “80%”, it goes to
another new page, from this new page, we can clearly know this 80% is the similarity
number that indicates how much percentage user Luo Zhi Xiang is similar to user Liu Yue,
and this page also lists out for every same category information between these two users the
comparison result value, like they have 60% similarity in the date of birth, 100% similarity
in the nationality, 80% similarity in hobby, 60% similarity in the photo they upload about
Bruce Lee, 60% similarity in the dancing photo and so on...so the total average similarity
for these two users is 80%. At the bottom of this page, we click “Go back find other users”,
so we go back to the social network home page.
We have finished testing for “Search By Users”, now we move to “Search By Photo”. We
click “Browse” and a small window comes out, we choose a photo of Michael Jordan from
my pictures, when we select the photo and click open, the photo of Michael Jordan will
display under the Search by Photo function bar, and we click this photo, it will bring us to a
new page, the search photo result page. Inside this search photo result page, there are many
users come out with their profile pictures, and on the right side of every users, there are
some photo with numbers, these numbers are the similarity value to indicate how similar
each photo from each user is to that photo of Michael Jordan, and if you click each user’s
name, it will go to each user’s user page.
The complete testing is finished, there is no problem for the working process of imagebased social network system.
CHAPTER SIX: CONCLUSIONS AND REFLECTIONS
6.1. CONCLUSIONS
Social network service is a very popular social media tool in the world, more and more new
ideas have been created and put into the social network to make this service become a very
powerful search engine to connect people together in every place of the world. For
example, Facebook is the most popular social network service in the recent world, it can
connect people base on their sharing information, like city, hobby, nationality and photos. It
ICT 499 CAPSTONE PROJECT
34
analyzes users’ photos base on the people’s face images in every photo users have, in order
to generate the users’ names from their face images, and using the names text information
to link people together. Using Content-based image retrieval technology for creating an
image-based social network is a new generation social network service, it has more
powerful features than Facebook, Facebook has the limitation for analysis photo, which is it
only can do analysis base on people’s faces, but for image-based social network, there is no
limitation for its photo analysis function, it can analysis photo base on the photo’s color,
texture and edge density, and transfer the analysis result into numbers, so this system can
link people together base on the similar analysis result numbers.
This image-based social network project is a real challenge for me, because it is not only a
complete design of website, but also a big integration project, which is the integration
between IT programming and media process. I’m an IT student, most of the IT knowledge I
learnt from school is about programming, coding and object-oriented system design, I did
not have any knowledge about media process, especially Content-based image retrieval
technology. So I have to start with learning the process of Content-based image retrieval,
and how it works. After a complete understanding of Content-based image retrieval
technology, I need to think about a solution for how to build a platform to perform the
process of Content-based image retrieval, and finally to convert it into the programming
code to execute the process working. After a long time discussing with my supervisor,
finally we think about a solution to perform the image retrieval process, which is to build a
website as a platform to let the image retrieval process working on it. So base on the
solution we think out we design the image-based social network website, and use dynamic
programming language to perform the image retrieval work flow. After a complete testing
for the whole system, finally the image-based social network system project was done.
What I learnt from this project experience is the way we think about the connection
between two things, and how to integrate the two things. From this social network project,
we cannot make us focus on the image retrieval itself, we must think out of box, what is the
work flow for image retrieval process? Can we use some thing we familiar with to perform
that work flow process? What kind of platform I need to build to let the image retrieval
process perform? Base on these questions, we can think out a solution to implement the
integration for IT and Image Retrieval.
ICT 499 CAPSTONE PROJECT
35
6.2. REFLECTIONS
There are two incomplete parts for this image-based social network system to be improved.
The first part is all the photo analysis results are saved inside the social network system
database directly, so the system can call out the data base on the photo upload. The working
process of the photo analysis is not done inside the system, it is done by the software called
MATLAB, this MATLAB analyzes each photo and generates the results, and the social
network system records the results and saves them inside its database. Because I have spent
too much time on the system function design and system integration part, in order to finish
the project on time, in the end there is no time for me to think about a design for the
integration part for MATLAB and Website, if this design can be added into the system, it
will make the social network system become more perfect.
The second incomplete part is the design for the whole social network system is simple,
include the background, user page, homepage, it is not attractive and colorful enough. This
is also due to I spent too much time for the system function design and system integration
part. The purpose of this project is to demo a new concept for the social network using
image-based function to link people, it is the trend of social network service development.
If the webpage design is more attractive and colorful, it will help to attract more people’s
attention.
Base on the two incomplete parts of the project, I understand that project modification is
also an important part of the whole project, it will help to improve the project to become
more prefect. I should plan more time on the project modification part in the project
schedule, this also reflects my project management skill’s weakness, and I did not plan well
for the project schedule. I will do more practices on the project management during my
future job and study journey, in order to improve my project management skill and
accumulate my project management experience.
ICT 499 CAPSTONE PROJECT
36
REFERENCES
[1]
Social
Network
-
Wikipedia,
the
free
encyclopaedia,
October
2011,
http://en.wikipedia.org/wiki/Social_network
[2] Social network service – Wikipedia, the free encyclopedia, 25th Feb 2011,
http://en.wikipedia.org/wiki/Social_network_service
[3] Content-based image retrieval – Wikipedia, the free encyclopedia, 10th Jan 2011,
http://en.wikipedia.org/wiki/Content-based_image_retrieval
[4] S. Nandagopalan, Dr. B. S. Adiga, and N. Deepak, A Universal Model for ContentBased Image Retrieval, World Academy of Science, Engineering and Technology 46
2008
[5] Tristan Glatard, John Montagnat, “Texture based Medical image indexing and retrieval:
application to cardiac images".
[6]
B. S. Manjunath, Jens-Rainer Ohm, Vinod V. Vasudevan, and Akio Yamada, "Color
and Texture Descriptors". In: IEEE Transactions on Circuits and Systems for Video
Technology, Vol. 11, No. 6, June 2001, pp. 70-715.
[7]
Zhe-Ming Lu1, Su-Zhi Li, and Hans Burkhardt, "A Content-Based Image Retrieval
Scheme in JPEG Compressed Domain", International Journal of Innovative
Computing, Information and Control ICIC International 2006 ISSN 1349-4198,
Volume 2, Number 4, August 2006, pp. 831-839.
[8]
Minyoung Eom, and Yoonsik Choe, "Fast Extraction of Edge Histogram in DCT
Domain based on MPEG7", Proceedings of World Academy of Science, Engineering
and Technology Volume 9 November 2005 ISSN 1307-6884, pp. 209-212.
[9]
Son Lam Phung and Abdesselam Bouzerdoum, "A New Image Feature for Fast
Detection of People in Images", International Journal of 2007 Institute for Scientific
Information and Systems Sciences Computing and Information Volume 3, Number 3,
pp. 383-391.
[10] Paul Stefan, et al.: Segmentation of Natural Images for CBIR.C. J. Kaufman, Rocky
Mountain Research Lab., Boulder, CO, private communication, May 1995.
[11]
P. S. Hiremath , Jagadeesh Pujari, "Content Based Image Retrieval using Color,
Texture and Shape features", 15th International Conference on Advanced Computing
and Communications, IEEE Computer Society 2007, pp. 780-784.
ICT 499 CAPSTONE PROJECT
37
[12]
Remco C. Veltcamp, Mirela Tanse, "Content Based Image Retrieval Systems". A
Survey, Technical Report UU-CS-2000-34, October 2000, pp. 1-62.
[13]
Mustafa Ozden and Ediz Polat, "Image Segmentation using Color and Texture
features".
[14]
John Montagnat, et al, "Texture-based Medical Image Indexing and Retrieval on
Grids", Medical Imaging technology, vol 25 No. 5 Nov 2007. pp. 333-338.
[15] C. R. Shyu, et. al, "Local versus Global Features for Content-Based Image Retrieval",
IEEE Workshop on Content-Based Access of Image and Video Libraries, 1998.
[16]
Roger Weber and Michael Mlivoncic, "Efficient Region-Based Image Retrieval",
ACM CIKM '03 November 3-8, 2003, USA.
[17]
S. L. Phung and A. Bouzerdoum, "Detecting People in Images: An Edge Density
Approach", IEEE, ICASSP 2007. pp. 1229-1232.
[18]
Bohyung Han, Changjiang Yang, et al, "Bayesian Filtering and Integral Image for
Visual Tracking".
[19] Vincent Arvis, Christophe Debain, et. al, "Generalization of the Cooccurrence Matrix
for Color Images Application to Color Texture Classification", Image AnalStereol
2004, pp. 63-72.
[20] Alberto Amato, Vincenzo Di Lecce, "Edge Detection Techniques in Image Retrieval:
The Semantic Meaning of Edge", 4th EURASIP Conference on Video/Image
Processing and Multimedia Communications, Zagreb, Croatia. pp. 143-148.
[21] Thomas M. Lehmann, et al, "Automatic categorization of medical images for contentbased retrieval and data mining", Computerized Medical Imaging and Graphics.
Elsevier 2004. pp. 143-155.
[22] Dong Yin, Jia Pan, et al, "Medical Image Categorization based on Gaussian Mixture
Model", IEEE 2008 International Conference on BioMedical Engineering and
Informatics, pp. 128-131.
[23] Dr. Fuhui Long, Dr. Hongjiang Zhang and Prof. David Dagan Feng, "Fundamentals of
Content-Based
Image
Retrieval”
-
http://research.microsoft.com/asia/dload_files/group/mcomputing/2003P/ch01_Long_
v40-proof.pdf
[24] Apache Tomcat – Welcome, http://tomcat.apache.org
ICT 499 CAPSTONE PROJECT
38
APPENDIX
Home Page Code:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoftcom:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="index.files/filelist.xml">
<title>Home Page</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Dion ([email protected]) -->
<!-- Web Site: http://www.iinet.net.au/~biab -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var item = new Array();
/* Here is where all the magic happens.
Just enter as many additional pages that
that you want to search, then fill in the
additional listings for each page.
*/
// "Page Name","path","Page Title","Many,Key,Words","Descriptive Comments"
c=0; item[c]=new Array("","http://localhost:8080/LiuUser.htm","Liu
Yue","Liu,Yue,Liu Yue","Click the user's name or use below path to see the
details");
c++; item[c]=new Array("","http://localhost:8080/ParkUser.htm","Park Ji
Yoon","Park, Ji, Yoon","Click the user's name or use below path to see the
details");
c++; item[c]=new Array("","http://localhost:8080/Win%20user.htm","Win
Diesel","Win, Diesel","Click the user's name or use below path to see the
details");
c++; item[c]=new Array("","http://localhost:8080/JiuUser.htm","Jiu Kong","Jiu,
Kong","Click the user's name or use below path to see the details");
c++; item[c]=new Array("","http://localhost:8080/YaoUser.htm","Yao Ming","Yao,
Ming","Click the user's name or use below path to see the details");
c++; item[c]=new Array("","http://localhost:8080/ZhuUser.htm","Luo Zhi
Xiang","Luo, Zhi, Xiang","Click the user's name or use below path to see the
details");
c++; item[c]=new Array("","http://localhost:8080/JordanUser.htm","Michael
Jordan","Michael, Jordan","Click the user's name or use below path to see the
details");
c++; item[c]=new Array("","http://localhost:8080/HyoriUser.htm","Lee
Hyori","Lee, Hyori","Click the user's name or use below path to see the
details");
c++; item[c]=new Array("","http://localhost:8080/JamesUser.htm","Lebron
James","Lebron, James","Click the user's name or use below path to see the
details");
c++; item[c]=new Array("","http://localhost:8080/BeckhamUser.htm","David
Beckham","David, Beckham","Click the user's name or use below path to see the
details");
page="Search Results<p><table border=\"0\">";
ICT 499 CAPSTONE PROJECT
39
function search(frm) {
var str1 = frm;
//win =
window.open("","CtrlWindow","toolbar=yes,menubar=yes,location=yes,scrollbars=yes
,resizable=yes");
//win.document.write(page);
//document.write(page);
var search1 = document.getElementById('search1');
search1.innerHTML = page;
txt = str1.split(" ");
fnd = new Array(); total=0;
for (i = 0; i < item.length; i++) {
fnd[i] = 0; order = new Array(0, 4, 2, 3);
for (j = 0; j < order.length; j++)
for (k = 0; k < txt.length; k++)
if (item[i][order[j]].toLowerCase().indexOf(txt[k].toLowerCase()) > -1 && txt[k]
!= "")
fnd[i] += (j+1);
}
for (i = 0; i < fnd.length; i++) {
n = 0; w = -1;
for (j = 0;j < fnd.length; j++)
if (fnd[j] > n) { n = fnd[j]; w = j; };
if (w > -1) total += show(w, n);
fnd[w] = 0;
}
search1.innerHTML += "</table><br>Total found: "+total+"<br>";
}
function show(which,num) {
link = item[which][1] + item[which][0];
line = "<tr><td><a href='"+link+"'>"+item[which][2]+"</a> Score: "+num+"<br>";
line += item[which][4] + "<br>"+link+"</td></tr><br>";
var search1 = document.getElementById('search1');
search1.innerHTML += line;
return 1;
}
// End -->
</script>
<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */
/***** CUSTOMIZE THESE VARIABLES *****/
// width to resize large images to
var maxWidth=250;
// height to resize large images to
var maxHeight=250;
// valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
// the id of the preview image tag
var outImage="previewField";
// what to display when the image is not valid
var defaultPic="spacer.gif";
/***** DO NOT EDIT BELOW *****/
ICT 499 CAPSTONE PROJECT
40
function preview(what){
var source=what.value;
var
ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
globalPic=new Image();
if (i<fileTypes.length) globalPic.src=source;
else {
globalPic.src=defaultPic;
alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of
one of the following:\n\n"+fileTypes.join(", "));
}
setTimeout("applyChanges()",200);
}
var globalPic;
function applyChanges(){
var field=document.getElementById(outImage);
var x=parseInt(globalPic.width);
var y=parseInt(globalPic.height);
if (x>maxWidth) {
y*=maxWidth/x;
x=maxWidth;
}
if (y>maxHeight) {
x*=maxHeight/y;
y=maxHeight;
}
var linkfield = document.getElementById("linkField2");
var link1 = new Array();
link1[0] = "http://www.google.com";
link1[1] = "SearchJordan.htm";
link1[2] = "http://www.acez.com.sg";
var imgFile1 = new Array();
imgFile1[0] = "ysj03.jpg";
imgFile1[1] = "Michael-Jordan.jpg";
imgFile1[2] = "xz01.jpg";
field.style.display=(x<1 || y<1)?"none":"";
var i = 0;
for (i=0; i < imgFile1.length; i++) {
if (globalPic.src.indexOf(imgFile1[i]) > 0) {
linkfield.href = link1[i];
}
}
field.src=globalPic.src;
field.width=x;
field.height=y;
}
// End -->
</script>
<!--[if !mso]>
<style>
ICT 499 CAPSTONE PROJECT
41
v\:*
{ behavior: url(#default#VML) }
o\:*
{ behavior: url(#default#VML) }
.shape
{ behavior: url(#default#VML) }
</style>
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head>
<body bgcolor="#FFFF99" style="background-attachment: fixed">
<p>
<p><a href="http://www.unisim.edu.sg/"><img border="0" src="SIM-logo.gif"
width="253" height="121"></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><!--[if gte vml 1]><v:shapetype id="_x0000_t136"
coordsize="21600,21600" o:spt="136" adj="10800"
path="m@7,l@8,m@5,21600l@6,21600e">
<v:formulas>
<v:f eqn="sum #0 0 10800"/>
<v:f eqn="prod #0 2 1"/>
<v:f eqn="sum 21600 0 @1"/>
<v:f eqn="sum 0 0 @2"/>
<v:f eqn="sum 21600 0 @3"/>
<v:f eqn="if @0 @3 0"/>
<v:f eqn="if @0 21600 @1"/>
<v:f eqn="if @0 0 @2"/>
<v:f eqn="if @0 @4 21600"/>
<v:f eqn="mid @5 @6"/>
<v:f eqn="mid @8 @5"/>
<v:f eqn="mid @7 @8"/>
<v:f eqn="mid @6 @7"/>
<v:f eqn="sum @6 0 @5"/>
</v:formulas>
<v:path textpathok="t" o:connecttype="custom"
o:connectlocs="@9,0;@10,10800;@11,21600;@12,10800"
o:connectangles="270,180,90,0"/>
<v:textpath on="t" fitshape="t"/>
<v:handles>
<v:h position="#0,bottomRight" xrange="6629,14971"/>
</v:handles>
<o:lock v:ext="edit" text="t" shapetype="t"/>
</v:shapetype><v:shape id="_x0000_s1025" type="#_x0000_t136" alt="Welcome to SIM
Social Network"
style='width:870.75pt;height:41.25pt' fillcolor="red" stroked="f">
<v:fill color2="maroon" angle="-135" focus="100%" type="gradientRadial">
<o:fill v:ext="view" type="gradientCenter"/>
</v:fill>
<v:shadow on="t" color="silver" opacity="52429f"/>
<v:textpath style='font-family:"&#23435;&#20307;";v-text-kern:t' trim="t"
fitpath="t"
string="Welcome to SIM Image-based Social Network"/>
</v:shape><![endif]--><![if !vml]><img border=0 width=1164 height=58
src="index.files/image001.gif" alt="Welcome to SIM Social Network"
v:shapes="_x0000_s1025"><![endif]></p>
ICT 499 CAPSTONE PROJECT
42
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
<center>
<font face="Arial Black">Search By Users:
</font>&nbsp;&nbsp;
<tr><td>
<input type=text name=srchval id=srchval value="" size="34"><input type=button
onclick="javascript:search(document.getElementById('srchval').value);"
value="Search"></td></tr>
<div id="search1" name="search1">
</div>
<div align="center" style="line-height: 1.9em;">
&nbsp;<p>&nbsp;</p>
<p><font face="Arial Black">Seach By Photo:
<input type="file" id="picField" onchange="preview(this)" size="41"><br>
</font>
<br>
<a id="linkField2"><img alt="Graphic will preview here" id="previewField"
src="blank.jpg"></a>
<br>
</center>
<p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
ICT 499 CAPSTONE PROJECT
43
User Page Code:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoftcom:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="LiuUser.files/filelist.xml">
<title>LiuYue Page</title>
<!--[if !mso]>
<style>
v\:*
{ behavior: url(#default#VML) }
o\:*
{ behavior: url(#default#VML) }
.shape
{ behavior: url(#default#VML) }
</style>
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head>
<body bgcolor="#FFFF99" style="background-attachment: fixed">
<form action="LiuUserNB.htm"><img border="0" src="LiuYue.jpg" width="139"
height="159">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="Find My Neighbors">
</form>
<p>Name: Liu Yue</p>
<p>Date of Birth: 02 Sep 1983</p>
<p>Nationality: China</p>
<p><!--[if gte vml 1]><v:shapetype id="_x0000_t202"
coordsize="21600,21600" o:spt="202" path="m,l,21600r21600,l21600,xe">
<v:stroke joinstyle="miter"/>
<v:path gradientshapeok="t" o:connecttype="rect"/>
</v:shapetype><v:shape id="_x0000_s1025" type="#_x0000_t202" alt=""
style='position:absolute;
left:58.5pt;top:560.25pt;width:148.5pt;height:27pt;z-index:1' filled="f"
stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">I like basketball</td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:78px;top:747px;width:202px;height:40px'><img width=202
height=40 src="LiuUser.files/image001.gif"
v:shapes="_x0000_s1025"></span><![endif]>Occupation: Student</p>
<p><!--[if gte vml 1]><v:shape
id="_x0000_s1026" type="#_x0000_t202" alt=""
style='position:absolute;left:351.75pt;
top:557.25pt;width:78pt;height:27pt;z-index:1' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">Dancing</td>
ICT 499 CAPSTONE PROJECT
44
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:469px;top:743px;width:108px;height:40px'><img
width=108 height=40 src="LiuUser.files/image002.gif"
v:shapes="_x0000_s1026"></span><![endif]>Hobby: Hip pop music, dance,
sing songs, basketball</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Favorite Photo:</p>
<p><img border="0" src="ysj05.bmp" width="404" height="286">&nbsp;&nbsp;
<img border="0" src="ysj04.jpg" width="196" height="286">&nbsp;&nbsp;
<img border="0" src="ysj03.jpg" width="207" height="286"></p>
<p>&nbsp;</p>
<p><!--[if gte vml 1]><v:shape
id="_x0000_s1027" type="#_x0000_t202" alt=""
style='position:absolute;left:179.25pt;
top:816.75pt;width:242.25pt;height:33.75pt;z-index:1' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">My favorite Kong Fu star is Bruce Lee</td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:239px;top:1089px;width:327px;height:49px'><img
width=327 height=49 src="LiuUser.files/image003.gif"
v:shapes="_x0000_s1027"></span><![endif]></p>
<p><img border="0" src="ysj02.jpg" width="192" height="287">&nbsp;&nbsp;
<img border="0" src="ysj01.jpg" width="380" height="284">&nbsp;&nbsp;
<img border="0" src="ysj06.jpg" width="191" height="285">&nbsp;&nbsp;
<img border="0" src="lj02.jpg" width="376" height="282"></p>
<p>&nbsp;</p>
<p><img border="0" src="Michael-Jordan.jpg" width="230" height="280"><!--[if gte
vml 1]><v:shape
id="_x0000_s1028" type="#_x0000_t202" alt=""
style='position:absolute;left:627pt;
top:821.25pt;width:242.25pt;height:33.75pt;z-index:1' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">My favorite NBA Star - Lebron James</td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:836px;top:1095px;width:327px;height:49px'><img
width=327 height=49 src="LiuUser.files/image004.gif"
v:shapes="_x0000_s1028"></span><![endif]><!--[if gte vml 1]><v:shape
id="_x0000_s1029" type="#_x0000_t202" alt=""
style='position:absolute;left:.75pt;
top:1075.5pt;width:242.25pt;height:33.75pt;z-index:1' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">Another My favorite NBA Star - Micheal
Jordan</td>
</tr>
</table>
</v:textbox>
ICT 499 CAPSTONE PROJECT
45
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:1px;top:1434px;width:327px;height:49px'><img width=327
height=49 src="LiuUser.files/image005.gif"
v:shapes="_x0000_s1029"></span><![endif]></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="index.htm">Go back to Home Page</a></p>
</body>
</html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoftcom:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="ZhuUser.files/filelist.xml">
<title>Luo Zhi Xiang</title>
<!--[if !mso]>
<style>
v\:*
{ behavior: url(#default#VML) }
o\:*
{ behavior: url(#default#VML) }
.shape
{ behavior: url(#default#VML) }
</style>
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head>
<body bgcolor="#FFFF99" style="background-attachment: fixed">
<form action="ZhuNBUser.htm">
<img border="0" src="XiaoZhu.jpg" width="184"
height="238">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="Find My Neighbors">
</form>
<p>Name: Luo Zhi Xiang</p>
<p>Date of Birth: 23 Sep 1976</p>
<p>Nationality: Chinese</p>
<p>Occupation: Singer, Actor</p>
<p>Hobby: Basketball, football, swimming, hip pop music, dance, sing songs</p>
<p>email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Favorite photo:</p>
<p><img border="0" src="xz02.jpg" width="242" height="360">&nbsp;&nbsp;
<img border="0" src="xz01.jpg" width="282" height="360">&nbsp;&nbsp;
<img border="0" src="xz06.jpg" width="248" height="361"></p>
<p>&nbsp;</p>
<p><!--[if gte vml 1]><v:shapetype id="_x0000_t202"
coordsize="21600,21600" o:spt="202" path="m,l,21600r21600,l21600,xe">
<v:stroke joinstyle="miter"/>
<v:path gradientshapeok="t" o:connecttype="rect"/>
</v:shapetype><v:shape id="_x0000_s1026" type="#_x0000_t202" alt=""
style='position:absolute;
left:226.5pt;top:657pt;width:163.5pt;height:59.25pt;z-index:1' filled="f"
ICT 499 CAPSTONE PROJECT
46
stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">Bruce Lee - My favorite star</td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:302px;top:876px;width:222px;height:83px'><img
width=222 height=83 src="ZhuUser.files/image001.gif"
v:shapes="_x0000_s1026"></span><![endif]></p>
<p><!--[if gte vml 1]><v:shape
id="_x0000_s1025" type="#_x0000_t202" alt=""
style='position:absolute;left:30.75pt;
top:664.5pt;width:120.75pt;height:45.75pt;z-index:1' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">Dancing</td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:41px;top:886px;width:165px;height:65px'><img width=165
height=65 src="ZhuUser.files/image002.gif"
v:shapes="_x0000_s1025"></span><![endif]></p>
<p><img border="0" src="xz05.jpg" width="248" height="353">&nbsp;
<img border="0" src="xz04.jpg" width="291" height="353">&nbsp;&nbsp;
<img border="0" src="xz03.jpg" width="239" height="355">&nbsp; </p>
<p><img border="0" src="lj02.jpg" width="376" height="282">&nbsp;
<img border="0" src="Michael-Jordan.jpg" width="230" height="280"></p>
<p><!--[if gte vml 1]><v:shape
id="_x0000_s1028" type="#_x0000_t202" alt=""
style='position:absolute;left:10.5pt;
top:1215pt;width:242.25pt;height:33.75pt;z-index:1' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">My favorite NBA Star - Lebron James</td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:14px;top:1620px;width:327px;height:49px'><img
width=327 height=49 src="ZhuUser.files/image003.gif"
v:shapes="_x0000_s1028"></span><![endif]></p>
<p><!--[if gte vml 1]><v:shape
id="_x0000_s1029" type="#_x0000_t202" alt=""
style='position:absolute;left:285pt;
top:1212.75pt;width:242.25pt;height:33.75pt;z-index:1' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">Another My favorite NBA Star - Micheal
Jordan</td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:380px;top:1617px;width:327px;height:49px'><img
ICT 499 CAPSTONE PROJECT
47
width=327 height=49 src="ZhuUser.files/image004.gif"
v:shapes="_x0000_s1029"></span><![endif]></p>
<p><!--[if gte vml 1]><v:shape
id="_x0000_s1027" type="#_x0000_t202" alt=""
style='position:absolute;left:429pt;
top:975pt;width:171.75pt;height:47.25pt;z-index:1' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">Basketball - My favorite sports</td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:572px;top:1300px;width:233px;height:67px'><img
width=233 height=67 src="ZhuUser.files/image005.gif"
v:shapes="_x0000_s1027"></span><![endif]></p>
<p>&nbsp;</p>
<p><a href="index.htm">Go back to Home Page</a></p>
</body>
</html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoftcom:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="LiuPKZhu.files/filelist.xml">
<title>Liu Yue Compared With Luo Zhi Xiang</title>
<!--[if !mso]>
<style>
v\:*
{ behavior: url(#default#VML) }
o\:*
{ behavior: url(#default#VML) }
.shape
{ behavior: url(#default#VML) }
</style>
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head>
<body bgcolor="#FFFF99" style="background-attachment: fixed">
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[if gte vml 1]><v:shapetype
id="_x0000_t136"
coordsize="21600,21600" o:spt="136" adj="10800"
path="m@7,l@8,m@5,21600l@6,21600e">
<v:formulas>
<v:f eqn="sum #0 0 10800"/>
<v:f eqn="prod #0 2 1"/>
<v:f eqn="sum 21600 0 @1"/>
<v:f eqn="sum 0 0 @2"/>
<v:f eqn="sum 21600 0 @3"/>
ICT 499 CAPSTONE PROJECT
48
<v:f eqn="if @0 @3 0"/>
<v:f eqn="if @0 21600 @1"/>
<v:f eqn="if @0 0 @2"/>
<v:f eqn="if @0 @4 21600"/>
<v:f eqn="mid @5 @6"/>
<v:f eqn="mid @8 @5"/>
<v:f eqn="mid @7 @8"/>
<v:f eqn="mid @6 @7"/>
<v:f eqn="sum @6 0 @5"/>
</v:formulas>
<v:path textpathok="t" o:connecttype="custom"
o:connectlocs="@9,0;@10,10800;@11,21600;@12,10800"
o:connectangles="270,180,90,0"/>
<v:textpath on="t" fitshape="t"/>
<v:handles>
<v:h position="#0,bottomRight" xrange="6629,14971"/>
</v:handles>
<o:lock v:ext="edit" text="t" shapetype="t"/>
</v:shapetype><v:shape id="_x0000_s1028" type="#_x0000_t136" alt="SIMILARITY =
80%"
style='width:307.5pt;height:41.25pt' fillcolor="blue" stroked="f">
<v:fill color2="#f93"/>
<v:shadow on="t" color="silver" opacity="52429f"/>
<v:textpath style='font-family:"&#23435;&#20307;";v-text-kern:t' trim="t"
fitpath="t"
string="SIMILARITY = 80%"/>
</v:shape><![endif]--><![if !vml]><img border=0 width=413 height=58
src="LiuPKZhu.files/image001.gif" alt="SIMILARITY = 80%"
v:shapes="_x0000_s1028"><![endif]></p>
<p><!--[if gte vml 1]><v:shapetype
id="_x0000_t202" coordsize="21600,21600" o:spt="202"
path="m,l,21600r21600,l21600,xe">
<v:stroke joinstyle="miter"/>
<v:path gradientshapeok="t" o:connecttype="rect"/>
</v:shapetype><v:shape id="_x0000_s1026" type="#_x0000_t202" alt=""
style='position:absolute;
left:87.75pt;top:100.5pt;width:106.5pt;height:63pt;z-index:1' filled="f"
stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center"><font size="5">
<a href="LiuUser.htm" style="text-decoration: none">
<font color="#000000">Liu Yue</font></a></font></td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:117px;top:134px;width:146px;height:88px'><img
width=146 height=88 src="LiuPKZhu.files/image002.gif"
v:shapes="_x0000_s1026"></span><![endif]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="LiuUser.htm"><img border="0" src="ysj0.jpg" width="124"
height="142"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
ICT 499 CAPSTONE PROJECT
49
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;
<a href="ZhuUser.htm"><img border="0" src="xz0.JPG" width="119"
height="153"></a></p>
<p>&nbsp;</p>
<p><!--[if gte vml 1]><v:shape
id="_x0000_s1027" type="#_x0000_t202" alt=""
style='position:absolute;left:591.75pt;
top:95.25pt;width:136.5pt;height:63pt;z-index:1' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center"><font size="5">
<a href="ZhuUser.htm" style="text-decoration: none">
<font color="#000000">Luo Zhi Xiang</font></a></font></td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:789px;top:127px;width:186px;height:88px'><img
width=186 height=88 src="LiuPKZhu.files/image003.gif"
v:shapes="_x0000_s1027"></span><![endif]></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font
size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date of
Birth:&nbsp;&nbsp;&nbsp;&nbsp;02
<font color="#FF0000">Sep</font>
1983&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
23 <font color="#FF0000">Sep</font>
1976&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font color="#FF0000">--------------------------&nbsp;&nbsp;&nbsp;
60%</font>&nbsp;&nbsp;&nbsp;&nbsp;</font></p>
<p><font
size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp; Nationality:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font
color="#FF0000">China&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
--------------------------&nbsp;&nbsp;&nbsp; 100%</font></font></p>
<p><font
size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;Hobby:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font color="#FF0000">Basketball, hip pop music, dance, sing
songs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;
--------------------------&nbsp;&nbsp;&nbsp; 80%</font></font></p>
<p><font
size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;Photo: </font></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;
ICT 499 CAPSTONE PROJECT
50
<img border="0" src="ysj01.jpg" width="309" height="231">&nbsp;&nbsp;
<img border="0" src="xz01.jpg" width="179" height="232">&nbsp;&nbsp;
<font size="5">Bruce
Lee&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;
</font><font color="#FF0000" size="5">-------------------------&nbsp;&nbsp;&nbsp;
60%</font></p>
<p><font size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font>
<img border="0" src="ysj04.jpg" width="159" height="232">&nbsp;&nbsp;
<img border="0" src="xz02.jpg" width="157" height="231">&nbsp; <font size="5">
Dancing&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</font><font color="#FF0000" size="5">-------------------------&nbsp;&nbsp;&nbsp;
60%</font></p>
<p><font size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font>
<img border="0" src="lj02.jpg" width="322" height="240">&nbsp; <font size="5">
Lebron
James&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;
</font><font color="#FF0000"
size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
--------------------------&nbsp;&nbsp;&nbsp; 100%</font></p>
<p><font size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font>
<img border="0" src="Michael-Jordan.jpg" width="188" height="234">&nbsp;
<font size="5">Micheal
Jordan&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</font><font color="#FF0000" size="5">&nbsp;-------------------------&nbsp;&nbsp;&nbsp;
100%</font></p>
<p><font size="5"
color="#FF0000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="ysj05.bmp" width="294" height="209">&nbsp;
<img border="0" src="xz03.jpg" width="143" height="209">&nbsp; </font>
<font
size="5">Basketball&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</font><font color="#FF0000"
size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;
---------------------------&nbsp;&nbsp;&nbsp; 80%</font></p>
<p>&nbsp;</p>
<p><font size="4" color="#FF0000"><a href="index.htm">Go back find other
users</a></font></p>
<p>&nbsp;</p>
</body>
</html>
ICT 499 CAPSTONE PROJECT
51
<html>
<head>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Jordan Photo Result</title>
</head>
<body bgcolor="#FFFF99" style="background-attachment: fixed">
<p><a href="LiuUser.htm">
<img border="0" src="LiuYue.jpg" width="111" height="133"></a><b><font size="5">
<a href="LiuUser.htm">Liu
Yue</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-----------------<img border="0" src="Michael-Jordan.jpg" width="112"
height="137">
100%</font></b></p>
<p> </p>
<p><a href="ZhuUser.htm">
<img border="0" src="XiaoZhu.jpg" width="113" height="141"></a><b><font
size="5">
<a href="ZhuUser.htm">Luo Zhi Xiang</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-----------------<img border="0" src="Michael-Jordan.jpg" width="112"
height="137">
100%</font></b></p>
<p> </p>
<p><a href="JordanUser.htm">
<img border="0" src="Michael-Jordan.jpg" width="112" height="134"></a> <b>
<font size="5"><a href="JordanUser.htm">Micheal
Jordan</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
----------------<img border="0" src="Michael-Jordan.jpg" width="112"
height="137">
100%</font></b></p>
<p><font
size="5"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;
----------------<img border="0" src="mj01.jpg" width="116" height="147">
60%</b></font></p>
<p><font
size="5"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;
----------------<img border="0" src="mj02.jpg" width="191" height="141">
50%</b></font></p>
<p><a href="JamesUser.htm">
<img border="0" src="lebron-james.jpg" width="123" height="119"></a>
<font size="5"> <b>
<a href="JamesUser.htm">Lebron James</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
---------------<img border="0" src="lj02.jpg" width="201" height="152">
70%</b></font></p>
<p><font
size="5"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;
----------------<img border="0" src="lj03.jpg" width="202" height="151">
60%</b></font></p>
<p><font
size="5"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;
ICT 499 CAPSTONE PROJECT
52
----------------<img border="0" src="mj02.jpg" width="208" height="153">
50%</b></font></p>
<p> </p>
<p><font size="4"><a href="index.htm">Go back to home page</a></font></p>
<p> </p>
</body>
</html>
ICT 499 CAPSTONE PROJECT
53