Introduction to Internet Engineering

Tutorial 7All about Assignment 2

By Tse Hok Man(hmtse3@ie.cuhk.edu.hk)

Requirement for all student

• Search engine

• Using JavaScript

• 5 different web pages, each contains the details of one product

• Each product should have at least 4 different fields

For Bookstore

• Each book should have a– Book name (e.g. Harry Potter)– Author (e.g. J. K. Rowling)– Price – Reader’s review

For mobile phone store

• Each mobile phone should have a– Model Number (e.g. P408)– Brand Name (e.g. Samsung)– Price– Phone’s details which may include dimension,

special functions and etc. (e.g. 90.5x47.5x23 mm)

User Input

• Use form to accept user input• A ‘text’ for key word• A ‘select’ for key word type• A group of ‘radio’ for AND/OR• Two ‘select’ for price range• A ‘submit’ for search

Details of key word type

• 3 types of key word– Key in Book name / Phone number– Key in Author / Brand name– Key in all fields

• For Bookstore– All fields include book name, author and

reader’s review

• For Mobile phone store– All fields include phone number, brand name

and phone’s details

Details of price range

• For Bookstore– First select from $0 to $400– Second select from $100 to $500– Each selection should increased by $100

• For Mobile phone store– First select from $0 to $4000– Second select from $1000 to $5000– Each selection should increased by $1000

Use of AND/OR

• Key word search and price search are combined using AND/OR

Key word search Key word search resultresult Price search resultPrice search result

ANDAND

Use of AND/OR

• Be careful of duplicated search result

• Each product should be displayed only once in the search result

• Duplicated product will deduct marks

Display of search result

• Search result should be displayed in a web page• Search result may be displayed in the sample

window or a new window• Use table to display each product• The table should contain the details of the product

(e.g. book name, author, price and reader’s review)• Each search result should contain a link which

directed to the web pages of the product

Sample of search result

Improvement

1. Use frame to implement the search engine (0.5 marks)

– The upper frame for the user input– The lower frame for displaying the search

result

2. Multiple key word search (1.5 marks)− Each word in the ‘text’ field should be

processed as individual word.− Combine the search result using OR

How to match a word/string in another string?

• Use Regular expressions (RegExp)

• E.g.var key1 = ‘Snoopy’;

var key2 = ‘Mcmug’;

var data = ‘Hello Kitty and Snoopy’;

var reg1 = RegExp(key1);

var reg2 = RegExp(key2);

var result1 = data.match(reg1);

Var result2 = data.match(reg2);

Suggestion in Implementation

• Use Array to store the data of each product.

• The Array should be a Global variable

• Only simple details of each product are required

• To implement multiple key word search, you may use split()

Submission

• All student should submit their assignment on or before 23:59:59 on 4th Nov, 2003

• Put the web pages in your UNIX account• Zip all the files and name it with your login name• Send a email to tutor (hmtse3@ie.cuhk.edu.hk) with

title “Submission of Assignment 2” which contain your NAME, STUDENT ID, DEPARTMENT, EMAIL, THE WEB PAGE ADDRESS and the ZIP FILE.