Introduction to Internet Engineering Tutorial 7

1
Introduction to Internet EngineeringTutorial 7

• All about Assignment 2
• By Tse Hok Man(hmtse3_at_ie.cuhk.edu.hk)

2
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

3
For Bookstore

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

4
For mobile phone store

• Each mobile phone should have a
• Model Number (e.g. P408)
• Brand Name (e.g. Samsung)
• Price
• Phones details which may include dimension,
  special functions and etc. (e.g. 90.5x47.5x23 mm)

5
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

6
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 readers
  review
• For Mobile phone store
• All fields include phone number, brand name and
  phones details

7
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

8
Use of AND/OR

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

Key word search result
Price search result
AND
9
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

10
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
  readers review)
• Each search result should contain a link which
  directed to the web pages of the product

11
Sample of search result
12
Improvement

• 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
• 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

13
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)

14
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()

15
Submission

• All student should submit their assignment on or
  before 235959 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_at_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.