Case Study - Companion Quest

Go to www.stevedjau.com/companion-quest

companion quest picture

A web application that enables table top gaming experience in an online environment.

  • Created various features which include: an intuitive chat room messaging service, a search engine, and a user profile image upload
  • Utilized PHP, MySQL, and Bootstrap to create a database driven user management system

Search

One of the feature that I am tasked to develop is a game room search feature. This feature would take three parameters as the search criteria: room name, game theme preference, and language used in the room.

The problem I ran into when designing this feature is that because all the parameter for the search is optional, I have to be able to check which is being used. Furthermore, while language and preference is searched with an exact value, game name need to be searched using LIKE query and not = query. I used an if statement quite extensively here to check if the input field is empty or in its default value. For each that is not in default value or empty, I pushed them into an array, then for each of that array I append it into a WHERE clause to complete my SQL query.

Chat

Chat is another tricky feature that I spent quite some time trying to figure out. For better user experience, I need to utilize AJAX request to write and pull chat data from database. Figuring out how to implement AJAX with PHP is a fair amount of learning curve. Also, I had a problem figuring out the front-end part of this feature, which is displaying the chat data within a correct format, and upon submitting a message I have to scroll the chat window to the bottom. To tackle this issue, I have to learn and understand how .scrollTop function work and to call it on the correct div.