1 / 18

Online Gift Shopping Store

Online Gift Shopping Store. Presenter: Hsi-Ching Shih. Project Goals. Use AJAX approach to read XML file from Server to DOM. Implement commands to display information in DOM. Implement Order Forms for creating, editing , and deleting orders. Project Goals.

noah-hendricks
Download Presentation

Online Gift Shopping Store

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Online Gift Shopping Store Presenter: Hsi-Ching Shih CS175 Project By Hsi-Ching Shih

  2. Project Goals • Use AJAX approach to read XML file from Server to DOM. • Implement commands to display information in DOM. • Implement Order Forms for creating, editing , and deleting orders. CS175 Project By Hsi-Ching Shih

  3. Project Goals • Implement validators for data fields in Order Forms. • Implement Form Calculator for total current order cost. CS175 Project By Hsi-Ching Shih

  4. Project Goals • Show commands display XML data in DOM into show_area section with innerHTML method. • After submission of Order Form, new record of order is created or original record of order is updated or deleted in XML DOM with DOM method. CS175 Project By Hsi-Ching Shih

  5. Read XML File from Server • AJAX send a XMLHttpRequest to read a XML file from the Server. When xhr.readyState == 4 and xhr.status == 200, the XML is ready in the DOM xhr.responseXML in the Client. CS175 Project By Hsi-Ching Shih

  6. Show Commands • When the Show Customers in DOM button is clicked, the customer information is extracted from DOM and converted into HTML format in the show_area section. • When the Show Catalog in DOM button is clicked, the catalog information is extracted and converted into HTML format and show_area section. CS175 Project By Hsi-Ching Shih

  7. Show Commands • When the Show Orders in DOM button is clicked, the order information is extracted from DOM and converted into HTML format in the show_area section. CS175 Project By Hsi-Ching Shih

  8. Create Order Form • First, select a customer in the pull-down list. • Click the New Form radio button • Enter an order id • Select 5 items with 5 quantities • Click Submit button. • After submission, a new order in created in DOM CS175 Project By Hsi-Ching Shih

  9. Edit Order Form • First, select a customer in the pull-down list. • Click the Edit Form radio button • Select an order from the pull-down list. • Select the items and enter the quantities. • Click Submit button. • After submission, this order is updated in DOM CS175 Project By Hsi-Ching Shih

  10. Delete Order Form • First, select a customer in the pull-down list. • Click the Delete Form radio button • Select an order from the pull-down list. • Click Submit button. • After submission, this order is deleted from DOM. CS175 Project By Hsi-Ching Shih

  11. Order Form Field Validators • New Order Id is qualified by regular expression = /^[O][R]\d{1,5}/ • Date is qualified by regular expression = /^(([0]?\d)(([1][0-2]))\/(([0-2]?\d)|([3][0-1]))\/\d{4}$/ CS149 Project By Hsi-Ching Shih

  12. Order Form Field Validators • Quantity is qualified by regular expression = /\d{1,5}/ CS149 Project By Hsi-Ching Shih

  13. Form Calculator • Subtotal cost and current order total cost are automatically calculated whenever there is a change on customer, order id, item, or quantity. CS149 Project By Hsi-Ching Shih

  14. Learned from this project • Create selection forms by using radio button or pull down. • Use regular expression to check input strings. • Block field input by using blur and focus. • Use AJAX approach to read XML file from Server into DOM. • Use JavaScript to convert DOM into HTML format with innerHTML method. CS175 Project By Hsi-Ching Shih

  15. Learned from this project • After submission of an order form, a new record is created or the old record of order is updated or deleted in the XML DOM with DOM method. CS175 Project By Hsi-Ching Shih

  16. Difficulties • Reading XML from Server to DOM can use AJAX approach; however, how can DOM be written into XML file in Server? I can not find any solution in the class, books, or web sites so that the Save XML File to Server function can not be implemented. CS149 Project By Hsi-Ching Shih

  17. Links To Run Codes • To run the online gift shopping store, please click on the following links: http://toolkit.cs.ohlone.edu/~gen105/project/gift_shop.html CS175 Project By Hsi-Ching Shih

  18. Links To Source Codes • To access source codes, please click the following links: http://toolkit.cs.ohlone.edu/~gen105/project/gift_shop_html.html http://toolkit.cs.ohlone.edu/~gen105/project/gift_shop_js.html http://toolkit.cs.ohlone.edu/~gen105/project/gift_shop.xml CS175 Project By Hsi-Ching Shih

More Related