COMP4021 Lab 9 Assignment 3 Techniques

Overview

• In this lab, we will discuss some requirements of your assignment 3

Assignment Requirements

• Here are the assignment areas:
  • Chat Engine
  • Logging In
  • Logging Out
  • Chat Message Input
  • Select Message Colour
  • Automatic Hyperlink
  • Online User List
• The areas in bold above will be discussed in this lab
• Note that the discussions in this lab do not intend to completely cover every single requirement of the assignment
• Therefore you are strongly advised to read carefully about the assignment requirements when you work on the project

Logging In

• Most of the requirements for user login have been given/completed in the previous labs
• Compared to the labs the major feature to be added in this part is the upload of the user's picture
• This feature involves the following modifications:
  1. Add a file upload field in the login form
  2. Save the upload picture somewhere on the server in login.php
• The picture is used in the display in the online user list which will be discussed later in this lab

Automatic Hyperlink

• There are several ways to add hyperlinks in the chat system
• One of the ways to implement this requirement is, before a chat message is displayed in the chat area, the content of the message is changed so that every URL becomes a link
• You can use SVG link to create a link inside the displaying area. SVGlinks
• You can make use of the indexOf() function to search for an URL inside a chat message

Online User List

• The online user list is shown using a new window created from the browser
• You can use window.open() with appropriate parameters to open a new window
• The content of this new window is a list of online users on the system, which can be obtained by looking at the users elements in your chatroom.xml
• You can build the display using a simple HTML list/table, img tags and any other suitable components
• You need to make the display up-to-date
• There are many possible techniques to do it and here are some of them:
  1. Using AJAX with DOM
     • Similar to message.php you send an AJAX request to a php program and receive the up-to-date chatroom.xml
     • Based on the content of the users element you update the display via the HTML DOM by traversing the DOM of the XML file
  2. Using AJAX and reloading the page
     • You send an AJAX request to a php program
     • The php program returns true whenever the users element is updated
     • The user list page then refreshes itself using JavaScript code
  3. Using AJAX and a div
     • You put a div in the user list page which is used to contain the table of the user list
     • You send an AJAX request to a php program
     • The php program returns HTML code of a list/table containing the current user list whenever a user logs on or off from the system
     • You can then replace the entire content of the div by setting the innerHTML of the div to be the returned HTML code