Sketch - Tea

Phase 4: Rough Plan

The goal of phase 4 is to show other users with similar interest who are also online.

1. I need to retrive the list of users with similar interest
2. Then, check to see if they are online - this has to do with session tracking

Since it's the almost same list as Users with Similar Favorites, then I plan to color the ones online, then turn others gray.

ToDo List August

1. Prob 1. display reviews user submitted.
2. Prob 2. add "Review for Game title" to review page.
3. Prob 3. add a section to metadata page that display games in same category.
4. Prob 4. apply alternating style to li
5. Prob 5. User Profile page display problem in firefox (works in IE & Safari)
   
6. Prob 6. work on Phase 4!

Prob 5. This problem is again a mistake resulting from syntax error. At div class="boxcontainer" should been div class="boxContainer". Apparently, Firefox is more strict than other browsers, whereas IE and Safari tolerated the difference in capital.

User Exception Error

Right now, if a user click on the user profile the first time, he will see an error message instead, since there isn't any information about this user in the database yet. I need to make it redirect to add user interface in this case. It took me a little while to think of using catch(Exception):

if (action.equals("view")){
try{
output = user.getUser(username);
md.searchGameByUserid(output, username);
md.searchAllFavorite(output, username);
user.searchSimilarUsers(output,username);
output.setAttribute("msgType", "view");
}catch(Exception ex){
output = user.getEmptyElement(username);
output.setAttribute("msgType", "saveNew");
}
}

Correct Time Stamp

The time stamp I used previously was from the template, and it doesn't show time very well. For example, 2009-07-21T13:06:44.670Z, a little hard to read. This is done using System.currentTimeMillis() from java.util.Date, which gives time to milliseconds, and was stored in mysql as a BIGINT.

To the left is screenshot of type datestamp from metadata table, stored in BIGINT and created by System.currentTimeMillis().

However, there's a smart way to do this: mysql have a build-in type: TIMESTAMP, which will be responsible to keep track of time and display it properly when called. It can be called using command NOW().

This screenshot is date from users table, stored in TIMESTAMP and created by NOW().

Update:
Although it looks much neater, with 2nd method. The TIMESTAMP is more like a String, and losses it's ability to sort metadata by time. On the other hand, I don't need it for that function.

Newly Added section on Index page

A new section is added on Index page - newly added. This will display the last 5 submitted games. So then, the Index page have following features:

1. Featured Games: displays 3 randomly selected games
   
2. Most Viewed: displays top 5 most viewed games
3. Newly Added: displays last 5 submitted games
4. Last Reviewed: displays last 5 reviewed games
5. Last Accessed: display last 5 viewed games by this user (it will be blank at the beginning of session)

Should I put My Favorite on index as well? will it makes the page too busy?

Database table not updating

Earlier when I encountered this problem, I when into database directly and deleted the tables. However, when I uploaded it to the remote server, I realized that I don't have access to the remote server directly! This means I must delete the tables I want to change through java servlet. So, in the ConfigServlet.java file, under checkTables() method, which create tables if no table exist. I inserted the following code in the very beginning:

String sql1 = "drop table metadata";
DB.executeQuery(sql1);

These 2 lines of command tells the database to delete the metadata table. Then, when the servlet checks if there's a table to create, it will find none, and consequently create the new table with update.

Alternating li styles

I'd like to style the

with background color, and no background color alternatively. However, I can't think up a method to tell the xsl template to render the

alternatively.

Favorite: getting metadata for favorite

For Favorite page, getting metadata for games that had mid retrieved from favorite table is a little tricky, since I must retrieve the mid from favorite table by criteria userid; then I must use this mid as a criteria to retrieve game information from metadata table.

I first tried with ArrayList and for loops: My thought on it was to retrieve the mids from favorite table and store them into an ArrayList. Then, in a different function, under using for loops, inquire the metadata table with each item from the ArrayList. However, this process seemed a little tideous, and involved two methods. I tried another way, after I found out I could make more inquiries before my previous inquiry is closed. So I could inquire for mid from favorite table first, then, in a while loop, start a second inquiry for game information using the mid I just retrieved.

Problems & features ToDo list

Phase III is pretty much complete, and the deadline is nearing. Below is a list of problems and features I need to finish for Phase I - III:

1. Prob 1. Review Page: still have problem displaying review after it's added.
2. Prob 2. Design: I need write a small section of code for displaying game on the sidebar. This will effect Users.xsl, Index.xsl, Metadata.xsl (specifically when action='view')
   
3. Prob 3. Users Page: I need to add favorite into user page <- using import function
4. Prob 4. Metadata Page (action='view'): I'd like to add a section that display game also in this category.
5. Prob 5. Index Page: I want to add a section that display Newly Added game, this will require me to write a new method.

update:
Prob 1. all along, was caused by a mistake in syntax, as always. For the while statement, I wrote test="msgType='view'" instead of the correct way: test="../@msgType='view'". Bloody hell! This problem wasted so many days!

Rewriting java files responsible for database connection

I am rewritting the java files responsible for database connection because I find many codes I write are very much repeating, in part especially for database inquires.

Metadata.java

I originally wrote the searchSql function repeatedly, since the query criteria are different, however, the result set are generally same. So I separated out the different part into several method:

1. search(String keywords); - searches for metadata with title or description like keyword.
   
2. browse(); - searches all metadata exist in the metadata table.
   
3. browse(String category); - searches all metadata with matching category
   

Users.java

Originially I had copied quiet a few methods from metadata.java to users.java because I hadn't figure out how to call methods from other classes. Now, I will call a constructor class in the UserServlet.java file:
Metadata md = MetadataServlet.geMetadataClass();
then I'll be able to call the delete method from metadata.java which delete selected game from the database. In addition, I'm able to search for all games submitted by this user from metadata.java by calling md.searchUserID(output, username)

Favorite: page or not page?

I'm not very certain if I should make a Favorite page, or just insert favorite as a function in the users page. Let's take a look at what function I need for favorite:

1. Add a game to favorite - from any page
2. Delete a game from favorite <- from favorite view mode
3. View favorites of a user <- possibly from user page & favorite page

To view the favorite, I need to retrieve a list of mids with same userid:

SELECT mid FROM favorites WHERE userid = 'userid';

Then, with the list of mids, I can retrieve title, author, category from metadata:

SELECT title, author, category FROM metadata WHERE mid = 'mid';

then, print the result.

Phase III: user page

The big frame of user page is set. I'm modifying details, and adding features I want:

1. Prob 1. I'm still can't figure out how to print element on the same level in different method. I mean, every time, when I want to print 1 set of element, I must call the root element. However, each time I call the root element, it will erase everything I printed before. I can't find a way to do this beside combining two method into one.
2. Prob 2. Make delete function work, so user can delete games they added.
   
3. Prob 3. Display users with similar favorites. This needs to be tested after favorite page is setup.
   
4. Prob 4. Display favorites of this user
5. Prob 5. Maybe display games user reviewed.
   

Phase III main task & goals

Main Task of Phase III:

1. Create user table & corresponding page
   
2. Create favorite table & corresponding page
3. Add games to favorite
4. Display other users with similar favorite
   

Problem to-be solved: Phase I + II

Tasks still need to be solved for Phase I & II:

1. Review page still have problem to redirect back to 'home' for viewing reviews
2. Add "Review for Game title" to review page.
   
3. solved Average rating of each game.
4. solved Change table to add fields suitable to site's content.
   
5. solved Add & display submit date, user

Task 4 & 5:

I has quiet some trouble making changes to add fields I want into the database, since they don't seems to take effect at all. I realize that after the table is created, no change will take effect. Therefore, I must go into mySQL database and delete the table from there using command: drop table [tablename]

I made changes to the metadata table:

1. changing the name of some columns -so they fit the content they contain
2. added 2 new columns: a) datestamp & b) userid - for tracking who added each entry and when

This caused massive change file metadata.java and metadataServlet.java, and I wasn't able to test it until almost all changes are done, since they are interconnected. They is making debugging difficult. The problem is found - a small syntax error.

Review Page

I'm having particular with content on review page:

1. Place 'Add Review' form on every review pages like a side bar.
2. Display only all reviews from a mid, and only from that mid.
3. Display newly added review to the top of other reviews from same mid
4. Embed mid as an child element or attribute of root element of Review page, so it can be called anytime by methods in Review page.
   

Redirecting the webpage back to 'home' mode is making trouble.

problems to solve

1. [solved]I ought to move Top Played, Last Reviewed, Last Accessed to the main content area.
2. [solved] Browse page (Metadata.xsl-@msgType='home') doesn't show any thing from results template.

   

3. [solved] I can't add Review page to Game Information(Metadata.xsl-@msgType='view'). I need to figure out how imports & apply-imports works.
4. [solved July 20] Last Access list is not working since game title link to each corresponding Game Information page (metadata->action=view), instead linking to each game url.
   
5. [solved July 20] Redirecting to game url isn't working. too much junk are attached. For example below, only http://www.google.ca is the actual url

   eg: http://localhost:8080/hwm/metadata.jsp?action=hit&mid=2&url=http%3A%2F%2Fwww.google.ca

Update:
I have some clue to why Browse page doesn't show any content. That's because MetadataServlet.java didn't generate corresponding xml data for xslt file to transform. I can perhaps refer to indexServlet.java as how to generate xml nodes.

Update 2:
I'm completely certain now - the reason why many templates doesn't show up. This is because the corresponding xml element wasn't generated; thus template couldn't find data to format, and therefore is not displayed. The making changes in Metadata.java and MetadataServlet.java are responsible for generating xml under different conditions.

Testing

The testing process is quite annoy.

1. Stop Tomcat
2. ant clean from command line
3. Start Tomcat
4. ant from command line
5. Reopen browser

Metadata doesn't display

Now that I can submit form, I have data to test how the website looks. However, I'm stuck again. I can't figure out why the metadata page won't show anything - not exactly, it show all the layout element, but won't show any data - none of the games are shown. And when I click on each title, I'll be redirected to the blank metadata page.

Form data submiting error SOLVED!

Finally! I have solved the problem that have prevented me from making any progress of the project. Couple posts ago, I wrote I knew problem was connection error with database - something was wrong to prevent the servlet to connect to the mySQL database. I thought it was problem with mismatched password or limited privilege grant, and I was not able to solve the problem from these two aspects. Yesterday, I finally decided to re-install mySQL database think perhaps it's problem with system that's causing the error. Indeed, I was right!

With first couple failed efforts to reinstall the data, I was even more assured the problem was from the database itself, not me. As now I recall, I was not very successful when I tried to install mySQL database first time when I started the project. That failed installation left some records of the old service, and confused the system when I finally successfully installed the database. For some reason, the system kept referering to the old service from failed installation. I tried to find a way to completely do a clean uninstallation of mySQL; however, I couldn't find any software or method. So, eventually, I decided to manually clean the registry - but that's not a clever idea, for I could with uncarefullness mess up my entire operating system, and force myself to reinstall my operating system completely. I use it was an last resort, but I'm fortunate enough, and was able to successfully erase all records of the old installations. After successfully installing mySQL, testing shows the problem is solved. Horray!

transforming layout mock to xslt

I'm basically finished transforming the layout html mock to xslt - however, the xslt files are not properly tested yet because I cannot submit any form data due error. This is especially serious for review page, since I have incorporated it as part of view game information page.

I want to put some of the very frequently used codes into a separate file like header_footer.xslt, so that they can be accessed by xsl:apply-template in other files with out repeating same code for different files. For example, now I have also put #logo & #menu into header_footer.xslt, they seem to work very well. The next step, I want to put content from the right side, like user online indicator, various game recommendations, into 1 separate file so they can be accessed by other files when needed.

1. I can either put all of them into header_footer.xsl, but I'm not sure if this will cause problem in the future - especially with xpath reference. I'll go into this detail later when actually doing it.
2. I can also try to make a new xslt file just for those modules, but I will need to understand completely all the codes that are responsible for generating xslt file like header_footer.xsl.
   

Error when submiting form data

Still very much stuck with error when submitting form data. It is almost completely obstructing any further progress in the project, since I can not test changes to the code. However, I have found the general direction and some clue to what the problem is. I found stack trace error logs in the Tomcat folder, and found repeated Access Denied error logs:

Load LOCAL DB infomation:jdbc:mysql://localhost:3306/hwm
java.sql.SQLException: Invalid authorization specification, message from server: "Access denied for user 'hwm'@'localhost' (using password: YES)"

Searching google on this error, shows the problem lies with connection to mySQL database. There are two possibilities:

1. Possible cause: The password or username used to access the database is incorrect
2. Tried solution: resetting password for all users (including root) to one same password. Also make sure username and password is same in build.xml and DBInfoImpl.java. Restarting tomcat, ant clean, then ant. But this doesn't seem to work.
   
3. Possible cause: The user - hwm - do not have enough privileges to access the database.
4. Tried solution: Re-granting all privileges to user hwm in mySQL command line: GRANT ALL PRIVILEGES ON *.* TO 'hwm'@'localhost' IDENTIFIED BY 'password' WITH GRANT OPTION; The privileges are successfully granted to hwm, but the error consists.
   

I can not think of other problems for now. Since it's messed up in the database, I will try to re-install the mySQL. Hopefully this will solve the problem.

Layout mock finished

The overall webpage mocks are all done. The basic graphic frame works are laid out. These are visions for how the final website look like - there are some functions I am not completely sure I'll be able to realize, or have time to. I will try my best.

small xpath problem

I was met with a small problem with xpath. While learning it seemed simple. Using it in xslt, and especially with namespace makes it very complicated. I still have problem with xpath axes. I need to access the attribute value of the parent node, which is also the root node. I wrote the xpath as:

xsl:value-of select="/x:index/@userid"

However, the root node is not always same, so the absolute path doesn't work. I tried the xpath axes; however, I'm always getting syntax error, for example:

xsl:value-of select="parent::attribute::@userid"

It seems the xslt doesn't like it with I use axis more than once. I suppose perhaps I should use a node right after parent:: ? But I need to access the parent's attribute, there's no node below for me to use. What to do? I still don't know how to use the xpath axes. I'm using a lazy method for now, but it might become problematic:

xsl:value-of select="/x:*/@userid"

Update:
Oh! It's stupid!! After all the bloody searches and trials i gone through, the solution is stupidly simple. -_-# The xPath also works, in case, like dos, like normal directory - all I needed was two dots and a slash to tell it to search one level up, so:

xsl:value-of select="../@userid"

... ... ...

Project re-planning

As I am stuck on the problem with metadata adding entry. I went onto re-styling metadata.xsl & review.xsl. Then I thought it's not, very not, user-friendly and logic to have these pages. Well, from programming side of view, it's more convenient; and the functions can be grouped together. However, I cannot convince myself how any user would understand what metadata means, and why on earth would they want to read review of some random a game. I think, then, before I go into the mambo-jumbo of coding and programming. I should do a project planning - I should know what all 4 phases require, and and adjust the layout in accordance:

1. Review page will do better embedded with the specific game it belongs to; same for add review.
2. Metadata page needs to be taken apart, and renamed accordingly:
   
3. (a) Search box should be embeded in the header of every page;
4. (b) a Browse page(in menu bar) for user to view all games, preferably by catagory;
5. (c) a Submit page(in menu bar) for user to add new games
6. (d) a Game Info page for each game that will display all relevant elements; eg. review.
7. (e) a Edit page(linked from Game Info) to edit each game
8. A series of user interfaces: Sign-up, profile, edit profile pages; as well as a user login/logout status indicator in the header
9. Lastly, I need a place for friends indicator, which will show name of user that's logged and have similar favorites. Will footer be a good place? um....
   

IAT352 Phase I doc: change XSLT

The main objective of this phase is to change the layout/ outlook of the website. I tried to start by playing with the xslt files, eg. index.xsl; however, I was not very successful to come up with a satisfactory layout. It was a mistake to start here, to mix design with implementation. So I a went back to the scratch book, think about what content I want in the website, and what functions I need in the layout to service the content. Then, based on that, I created a layout mock with HTM, and finally went back to xslt files to convert the layout mock into xslt.

In this process of transforming the layout mock into xslt I need, I have met several problems:

1. The formatting of the the file was very messy, even with help of CSS. There are too many classes and ids in the stylesheet. So I searched and read a few very helpful tutorial on organizing and simplify CSS style.
2. I find the section of code describing logo and menu are reused again and again, so I tried to turn these two section of coding into a xslt tempalte, and put into header_footer.xslt. However, this was met with error. The problem came from the xml schema - xsl template, logo & menu was not defined in the schema document. Which file generates the xml schema? Failing many times after I tried to change the index.xsd file itself, I realized that the file must be generated by any file.
   
3. To find the file that generates the schema file, I traced the code from indexSeverlet.java to JSPUtil.java, and find that XmlApi.createNewElement(paramater); defineds the root element; and XmlApi.createChildElement(paramater); defineds the subquent elements.

So far, I have almost completed design and transforming index.xsl page, except:

1. I need to find the correct expression (url) for Browse menu button, which is meant to show all games in the website. href="metadata.jsp?action=search&mid={_____}" What should be in the {___} to express all mids?
   
2. Metada page is not working - I can not add any entry, and always gets a Exception: null error. I am currently quiet clueless which file (metadata.xsl? MetadataServelet.java? or other?) that is causing the problem. Perhaps I can try to change the error messages to something other than null so I will know, at least what to fix. This must be fixed before I can do anything else, especially for many things in phase II.
   
3. I'm keeping Forum in the menu, but I'm a little puzzled whether we need it or not. Beside, it's a broken link.
4. I also need to design, specific layout for Metadata & Review pages (search, add, edit, browse & view).

[Archive: Project Package jun22 v1.zip]

Pastry Babies 面人娃娃

Found those crafts wile packaging things for moving. They were given to me as a gift by a friend before I left for Canada. How very nostalgic! I am amazed - it's been 10 years, and they have not gone bad at all - they are made of flours!