The Geek Online Electronic Parts Superstore was created as a final project in the fall of 2013 for my XML course. For this project I spent roughly ten hours a day for seven days and during this time I taught myself how to transform XML to usable content through PHP. From this project I gained a higher understanding of how XML and Data Validation works and now have a firmer grasp of how xpath selection works within XSLT.

GEEK functions just as any other online etailer.  You see products, and you add them to your cart.  Once they're in your cart you can see a subtotal of multiple quantities and also a total of all items within your cart.  Unknown to the customer though is the whole process is generated, calculated and displayed from data stored within XML files.  Each page is generated with XSLTransformation via PHP.  The cart is a session based cookie that holds the product ID number of the items they have added.  Before every XSLT action the xml is passed through validation, if the XML document fails validation an error is sent to the user.  In the screenshots above is a flowchart of how the XSLT process works.

This particular version of GEEK also uses PHP to access a database that holds comment information.  Almost all the comments that are currently available are randomly generated for each item and were inserted into the database for use.  There also exists a form for new comments to be added to products via POST form submission.  I decided to go with POST as it's more secure and can handle longer strings since  it's not limited by the URL limit of the browser.

After a comment has been posted, the user's IP is logged to the comment.  This allows the user to return and edit or delete their comment.  I understand the complications of only using an IP to detect a user, but I currently have no plan to add a user table and login form with session based validation.   Once the "edit comment" button has been clicked, a JQuery function replaces the elements surrounding; the name, rating, and comment text with text editing forms that the user may update.  The each form input has a JQuery function attached to it that executes once the input is no longer an active focus.  During this process the information is sent back to the original page via an AJAX POST and updated to the database.  The only real purpose of the "Done!" button is to reload the page so the user can view the changes made to the comment.

The delete button works in a similar fashion.  Once it has been clicked an AJAX POST submission sends information about the comment back for form processing and eventual database execution.

Keep in mind that 90% of this particular project is still powered by XSLT via PHP with the exception the item details page that you can view by clicking on an item in the shop area.  This entire page is created via XML data through the means of a PHP array and the comments are made from a query from the database.

Change Log

  • Developed and Tested on Chrome 31