Creating an Online Catalogue Search for CD Collection with AJAX, XML, and PHP Using a Relational Database Server on WAMP/LAMP Server

Size: px

Start display at page:

Download "Creating an Online Catalogue Search for CD Collection with AJAX, XML, and PHP Using a Relational Database Server on WAMP/LAMP Server"

Holly McCarthy
6 years ago
Views:

1 CIS408 Project 5 SS Chung Creating an Online Catalogue Search for CD Collection with AJAX, XML, and PHP Using a Relational Database Server on WAMP/LAMP Server The catalogue of CD Collection has millions of CD product information. In Project 5, you are implementing a web service: Online Catalogue Search System for the CD Collection Company. You may choose any database server with any web application platform. Some Suggestions: 1. WAMP or LAMP Server with PHP and MySql Server. 2. ASP.NET in IIS Server with Angular JS and MS SQL Server Use Bootstrap for Responsive Web Design. Implement this project with AJAX call (you can use JQuery for AJAX Call or Angular JS for AJAX call) to request the Server Side PHP Script files. Your Client and Server side codes have four parts: UI and Client Side: 1. Create Webpages for an Online CD product search with a menu: 1-1. Product search page to let users search for CDs by CD name, Artist name, Price, Year On User s Click on the Search button (or type in Input box) with Search input, send the user s input value as parameters to get the response of the server side with the CD search result in JSON format Write a Handler Function in Java Script to Process the JSON Search Result from Server s response to Display the Result in HTML on the Webpage.

2 The Server Side Scripts in PHP has two parts of tasks: Create a Database from the XML Data 1. Assume that your server got the XML data cd_catalog.xml that has CD product information from another CD manufacturer site. (XML data file cd_catalogue.xml is in the Project 5 section) 2. Process the input XML document to extract the information for each CD product to write them in.csv files that will be transformed into a SQL table in your database or you can directly create a table in your database server from the XML data. Or Load the XML file to an Array to Extract One CD info a time in a loop to create one row (record) format to insert the row into a SQL table you created in you SQL Server. Look up PHP Functions: simplexml_load_file() or XML DOM Parser DOMDocument() and Load() in Retrieving User s Search from the Database and Create the Response 3. On request from the client side, Get user search input and connect to your database server to retrieve the CD information from the table you create in Task 2 and get the result from a database server and process the result to create in JSON format as the server side response to your client. How to generate output as server response: You can echo the JSON result in your PHP Script to generate the server output to be sent to your client. Or The PHP server script can write the Jason result to an output file. Notes: Cross Domain File Request: Access across Domains For security reasons, modern browsers do not allow access across domains.

3 This means that both the web page, your server side php scripts and the XML file it tries to load, must be located in the directory on the same server. For example, the examples on W3Schools all open XML files located on the W3Schools domain. If you want to use the example above on one of your own web pages, the XML files you load must be located on your own server. Same Domain File Request: With Google Chrome: Need a local Web Server to request a file using AJAX with JQuery on the local host. Firefox allows a local file request in Java Script without a Server.

4 FAQ: Q: When converting xml to csv, can we use plain java and upload the output csv to our db? Or must it all be done through JavaScript to convert the xml to csv and upload to our db? Answer: Yes, converting to CSV file can be done in Java separately. There is not a well known straightforward auto process for converting XML to CSV and create a table in SQL Server from the converted CSV file. Not in Java Script! The entire automated process is usually implemented in PHP, Java or C# or any high level language through Rest API and then CSV converting process, and creating a table in a database server through ODBC/JDBC. Lab5 is not asking the automation of the entire process. XML parsing to create a database can be done separately in any server side script/language before the server side search script in PHP is done. PHP also has a good API to load XML file and create a table from it as well. Submission: Turn in your Output BOTH In Class and on Blackboard as follow: 1. Set up instructions and readme to explain how you set up your platform and the tools you used for this Project including the references including where you downloaded your tools. Note: If you don t show the proof showing with screen shots of the executions on your Laptop with your set up procedure, I will assume you didn t do this on your own 2. Create a zip file to submit on Blackboard with your REPORT and All your source code files, database scripts to create tables, input and output files 3. Printout of your report in a doc file that shows the text of all your codes, your XML input file, and your output in JSON and the screen captures of the executions in sequence. 4. Your output screen captures include:

5 Your database table contents that has all the CD product information that were extracted from XML data file The Server response in JSON Each Webpage Capture showing each Execution Step and the results

Cleveland State University Department of Electrical and Computer Engineering. CIS 408: Internet Computing

Cleveland State University Department of Electrical and Computer Engineering CIS 408: Internet Computing Catalog Description: CIS 408 Internet Computing (-0-) Pre-requisite: CIS 265 World-Wide Web is now