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

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

CIS 408 Internet Computing (3-0-3)

Lab Assignment 3 on XML

Jquery Ajax Json Php Mysql Data Entry Example

JAVASCRIPT JQUERY AJAX FILE UPLOAD STACK OVERFLOW

User Interaction: jquery

Web API Lab. The next two deliverables you shall write yourself.

Lab Assignment 2. CIS 612 Dr. Sunnie S. Chung

CIS 408 Internet Computing Sunnie Chung

Project Title REPRESENTATION OF ELECTRICAL NETWORK USING GOOGLE MAP API. Submitted by: Submitted to: SEMANTA RAJ NEUPANE, Research Assistant,

Programming: C ++ Programming : Programming Language For Beginners: LEARN IN A DAY! (Swift, Apps, Javascript, PHP, Python, Sql, HTML) By Os Swift

Jquery Manually Set Checkbox Checked Or Not

Web Site Design Made Easy: Learn Html, Xhtml, And Css By Dennis Gaskill

All India Council For Research & Training

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.

,

Tutorials Php Y Jquery Mysql Database Without Refreshing Code

Software. Full Stack Web Development Intensive, Fall Lecture Topics. Class Sessions. Grading

Homework 8: Ajax, JSON and Responsive Design Travel and Entertainment Search (Bootstrap/Angular/AJAX/JSON/jQuery /Cloud Exercise)

CENG 256 Internet Programming Draft

Development of Internet Applications

Web API Lab folder 07_webApi : webapi.jsp your testapijs.html testapijq.html that works functionally the same as the page testapidomjs.

Standard 1 The student will author web pages using the HyperText Markup Language (HTML)

ThingLink User Guide. Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon

Modern Web Application Development. Sam Hogarth

PHP & My SQL Duration-4-6 Months

CSS. HTML5,CSS3,JS & PHP Simplified. Smart Course for Absolute Beginners. REGISTER AT:

Project. Minpeng Zhu

User Guide Parser add-on. Version: September by AgileBio. &

Lab Assignment 2. CIS 612 Dr. Sunnie S. Chung. Creating a User Defined Type (UDT) and Create a Table Function Using the UDT Data Type

DATABASE SYSTEMS. Introduction to web programming. Database Systems Course, 2016

CIS 3308 Web Application Programming Syllabus

When learning coding, be brave

Lab Assignment 1. Part 1: Feature Selection, Cleaning, and Preprocessing to Construct a Data Source as Input

Now go to bash and type the command ls to list files. The unix command unzip <filename> unzips a file.

CS50 Quiz Review. November 13, 2017

Outline. AJAX for Libraries. Jason A. Clark Head of Digital Access and Web Services Montana State University Libraries

JavaScript Web Applications: JQuery Developers' Guide To Moving State To The Client By Alex MacCaw READ ONLINE


Contents. Demos folder: Demos\14-Ajax. 1. Overview of Ajax. 2. Using Ajax directly. 3. jquery and Ajax. 4. Consuming RESTful services

Master Project Software Engineering: Team-based Development WS 2010/11

Working with Javascript Building Responsive Library apps

Web Development & SEO (Summer Training Program) 4 Weeks/30 Days

AngularJS Intro Homework

PHP. MIT 6.470, IAP 2010 Yafim Landa

20486-Developing ASP.NET MVC 4 Web Applications

Export to excel in javascript without activex. Export to excel in javascript without activex.zip

Overview

AJAX Workshop. Karen A. Coombs University of Houston Libraries Jason A. Clark Montana State University Libraries

Instructor s Notes Web Data Management Web Client/Server Concepts. Web Data Management Web Client/Server Concepts

CORE PHP CURRICULUM. Introductory Session Web Architecture Overview of PHP Platform Origins of PHP in the open source community

AJAX AND PHP BUILDING

Professional Course in Web Designing & Development 5-6 Months

CIS 3308 Logon Homework

EPHP a tool for learning the basics of PHP development. Nick Whitelegg School of Media Arts and Technology Southampton Solent University

AG & SG SIDDHARTHA COLLEGE OF ARTS AND SCIENCES - VUYYURU.

Modern App Architecture

Javascript Tutorial With Example

Static Webpage Development


Getting Started with

Advance AngularJS (with.net)

Grading Rubric Homework 1

3344 Database Lab. 1. Overview. 2. Lab Requirements. In this lab, you will:

HTML CSS JAVASCRIPT WEB PUBLISHING IN ONE HOUR A DAY SAMS TEACH YOURSELF COVERING HTML5 CSS3 AND JQUERY 7TH EDITION

DOWNLOAD OR READ : JQUERY AJAX JQUERY API DOCUMENTATION PDF EBOOK EPUB MOBI

Export Table Schema To Excel Javascript Ie 10

XML Processing & Web Services. Husni Husni.trunojoyo.ac.id

Web Premium- Advanced UI Development Course. Duration: 08 Months. [Classroom and Online] ISO 9001:2015 CERTIFIED

CSC 443: Web Programming

Full Stack Web Developer Course

Full Stack Web Developer

Networking & The Web. HCID 520 User Interface Software & Technology

Review. Fundamentals of Website Development. Web Extensions Server side & Where is your JOB? The Department of Computer Science 11/30/2015

(Simple) JavaScript Framework Homework

Using Development Tools to Examine Webpages

How to use jquery file. How to use jquery file.zip

Assignment: Seminole Movie Connection

Electric Paoge. Browser Scripting with imacros in Illuminate

Reading Writing Speaking Reading Writing Speaking. English Intermediate Intermediate Elementary Intermediate Intermediate Elementary

Description of CORE Implementation in Java

jquery and AJAX

IERG 4210 Tutorial 07. Securing web page (I): login page and admin user authentication Shizhan Zhu

Computer Fundamentals & MS OFFICE. (OR : batch. only) Computer Fundamentals and Photoshop. (NR : onwards )

RIA Security - Broken By Design. Joonas Lehtinen IT Mill - CEO

Design Document V2 ThingLink Startup

Technology Feasibility October 22, 2013

An Introduction to JavaScript & Bootstrap Basic concept used in responsive website development Form Validation Creating templates

Networking & The Web. HCID 520 User Interface Software & Technology

UI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML

P a g e 1. Danish Technological Institute. Scripting and Web Languages Online Course k Scripting and Web Languages

Create-A-Page Design Documentation

CNIT 129S: Securing Web Applications. Ch 3: Web Application Technologies

Internet programming Lab. Lecturer Mariam A. Salih

Full Stack Web Developer

TIME SCHEDULE MODULE TOPICS PERIODS. HTML Document Object Model (DOM) and javascript Object Notation (JSON)

Developing ASP.NET MVC 5 Web Applications

Installation Guide. Version Last updated: August tryfoexnow.com 1 of 3

How to upload documentation

Get in Touch Module 1 - Core PHP XHTML

Transcription:

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. 1-2. 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. 1-3. 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.

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 https://www.w3schools.com/php/php_xml_dom.asp 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.

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.

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:

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