PHP with XML & AJAX XML: Extensible Markup Language AJAX: Asynchronous JavaScript and XML.

Slides:



Advertisements
Similar presentations
PHP Form and File Handling
Advertisements

1/7 ITApplications XML Module Session 8: Introduction to Programming with XML.
SPECIAL TOPIC XML. Introducing XML XML (eXtensible Markup Language) ◦A language used to create structured documents XML vs HTML ◦XML is designed to transport.
Running ajax. Entering the zip and clicking elsewhere
XSLT & XPATH. From Friday Everything in XML is machine readable Attributes describe elements, so does an element’s place in the tree (context) XML must.
IS 373—Web Standards Todd Will
Introduction XML Dr. Qusai Abuein June, 2012 XML Dr. Qusai Abuein 1 Part (I) XML Basics.
PHP with XML Dequan Chen and Narith Kun ---Term Project--- for WSU 2010 Summer Course - CS366 s:
Sys Prog & Scripting - HW Univ1 Systems Programming & Scripting Lecture 21: XML and File Access in PHP.
CS 174: Web Programming April 16 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak
Pemrograman Berbasis WEB XML part 2 -Aurelio Rahmadian- Sumber: w3cschools.com.
PHP Tutorials 02 Olarik Surinta Management Information System Faculty of Informatics.
Application Development Description and exemplification of server-side scripting language for server connection, database selection, execution of SQL queries.
INTERNET APPLICATION DEVELOPMENT For More visit:
Introduction to AJAX AJAX Keywords: JavaScript and XML
PHP and AJAX ISYS 475. AJAX Asynchronous JavaScript and XML: – JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as.Net,
JavaScript & jQuery the missing manual Chapter 11
XML introduction to Ahmed I. Deeb Dr. Anwar Mousa  presenter  instructor University Of Palestine-2009.
Languages in WEB Presented by: Jenisha Kshatriya BCM SS09.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
1Computer Sciences Department Princess Nourah bint Abdulrahman University.
Ajax - Part II Communicating with the Server. Learning Objectives By the end of this lecture, you should be able to: – Describe the overview of steps.
AJAX and Java ISYS 350. AJAX Asynchronous JavaScript and XML: – Related technologies: JavaScript, Document Object Model, XML, server-side script such.
XML eXtensible Markup Language w3c standard Why? Store and transport data Easy data exchange Create more languages WSDL (Web Service Description Language)
D2L Notes Be sure to submit your link in the dropbox provided on D2L You can just upload an empty text file if a file upload is required Do not use D2L.
1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07.
Nael Alian Introduction to PHP
These Questions are copied from
06/10/2015AJAX 1. 2 Introduction All material from AJAX – what is it? Traditional web pages and operation Examples of AJAX use Creating.
 XML is designed to describe data and to focus on what data is. HTML is designed to display data and to focus on how data looks.  XML is created to structure,
Client side web programming Introduction Jaana Holvikivi, DSc. School of ICT.
1 Dr Alexiei Dingli XML Technologies XML Advanced.
PHP MySQL Introduction. MySQL is the most popular open-source database system. What is MySQL? MySQL is a database. The data in MySQL is stored in database.
Creating Dynamic Web Pages Using PHP and MySQL CS 320.
J.Holvikivi 1 Ajax & scripts Jaana Holvikivi Metropolia.
How do I use HTML and XML to present information?.
Advanced PHP & RSS Utilizing XML, RSS, and PHP. XML (eXtensible Markup Language) XML is the language of all RSS feeds and subscriptions XML is basically.
Consuming eXtensible Markup Language (XML) feeds.
AJAX محمد احمدی نیا 2 Of 27 What is AJAX?  AJAX = Asynchronous JavaScript and XML.  AJAX is not a new programming language, but.
What it is and how it works
Ajax XMod for Dummies Building DNN Ajax Modules Without Programming Dave McMullen SoCal DNN Users Group 2/7/07 –
AJAX stands for Asynchronous JavaScript And XML. AJAX is a type of programming made popular in 2005 by Google (with Google Suggest). AJAX is not a new.
CISC 3140 (CIS 20.2) Design & Implementation of Software Application II Instructor : M. Meyer Address: Course Page:
 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
Web Technologies Lecture 4 XML and XHTML. XML Extensible Markup Language Set of rules for encoding a document in a format readable – By humans, and –
Creating a simple database This shows you how to set up a database using PHPMyAdmin (installed with WAMP)
Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Accessing XML Documents Using DOM ©NIITeXtensible Markup Language/Lesson 8/Slide 1 of 23 Objectives In this lesson, you will learn to: * Use XML DOM objects.
AJAX. Overview of Ajax Ajax is not an API or a programming language Ajax aims to provide more responsive web applications In normal request/response HTTP.
AJAX. Ajax  $.get  $.post  $.getJSON  $.ajax  json and xml  Looping over data results, success and error callbacks.
Dave Salinas. What is XML? XML stands for eXtensible Markup Language Markup language, like HTML HTML was designed to display data, whereas XML was designed.
AJAX AJAX Asynchronous JavaScript and XML --- MADHAVI
Document Object Model.  The XML DOM (Document Object Model) defines a standard way for accessing and manipulating XML documents.  The DOM presents an.
AJAX CS456 Fall Examples Where is AJAX used? Why do we care?
Dr. Abdullah Almutairi Spring PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is a widely-used,
PHP Tutorial. What is PHP PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.
XML Notes taken from w3schools. What is XML? XML stands for EXtensible Markup Language. XML was designed to store and transport data. XML was designed.
1 Server Side scripting PHP. 2 What is PHP? PHP stands for PHP: Hypertext Preprocessor PHP is a server-side scripting language, like ASP PHP scripts are.
JavaScript and Ajax (Ajax Tutorial)
AJAX AJAX = Asynchronous JavaScript and XML.
PHP Database ODBC Create an ODBC Connection
* Lecture # 7 Instructor: Rida Noor Department of Computer Science
Prepared for Md. Zakir Hossain Lecturer, CSE, DUET Prepared by Miton Chandra Datta
AJAX and JSP ISYS 350.
ISC440: Web Programming 2 AJAX
Web Technology Even Sem 2015
AJAX and JSP ISYS 350.
Software Engineering for Internet Applications
Presentation transcript:

PHP with XML & AJAX XML: Extensible Markup Language AJAX: Asynchronous JavaScript and XML

XML XML XML is used to describe and to focus on what data is. Describes the structure of the data XML was designed to transport and store data HTML was designed to display data XML must be parsed into html

Parsers Expat: Event based parser Views XML as a series of events, when a specific event occurs it will call a function DOM: Tree based parser Transforms an xml document into a tree structure, and provides access to tree elements

1 st, a little XML Tove Jani Reminder Don't forget me this weekend!

EXPAT "; break; case "TO": echo "To: "; break; case "FROM": echo "From: "; break; case "HEADING": echo "Heading: "; break; case "BODY": echo "Message: "; } } //Function to use at the end of an element function stop($parser,$element_name) { echo " "; } //Function to use when finding character data function char($parser,$data) { echo $data; } //Specify element handler xml_set_element_handler($parser,"start","stop"); //Specify data handler xml_set_character_data_handler($parser,"char"); //Open XML file $fp=fopen("test.xml","r"); //Read data while ($data=fread($fp,4096)) { xml_parse($parser,$data,feof($fp)) or die (sprintf("XML Error: %s at line %d", xml_error_string(xml_get_error_code($parser)), xml_get_current_line_number($parser))); } //Free the XML parser xml_parser_free($parser); ?>

What it does… Initialize the XML parser with the xml_parser_create() function Create functions to use with the different event handlers Add the xml_set_element_handler() function to specify which function will be executed when the parser encounters the opening and closing tags Add the xml_set_character_data_handler() function to specify which function will execute when the parser encounters character data Parse the file "test.xml" with the xml_parse() function In case of an error, add xml_error_string() function to convert an XML error to a textual description Call the xml_parser_free() function to release the memory allocated with the xml_parser_create() function

DOM load("note.xml"); print $xmlDoc->saveXML(); foreach ($x->childNodes AS $item) { print $item->nodeName. " = ". $item->nodeValue. " "; } ?> Tove Jani Reminder Don't forget me this weekend!

Output #text = to = Tove #text = from = Jani #text = heading = Reminder #text = body = Don't forget me this weekend! #text = When XML generates, it often contains white-spaces between the nodes. The XML DOM parser treats these as ordinary elements, and if you are not aware of them, they sometimes cause problems.

Simple XML New with PHP 5 Easy way of accessing XML element’s attributes Elements are converted and sorted in arrays if there is more than one element on one level. Attributes are stored in an array, index corresponds to name Elements data is converted into strings.

Example Tove Jani Reminder Don't forget me this weekend! getName(). " "; foreach($xml->children() as $child) { echo $child->getName(). ": ". $child. " "; } ?> note to: Tove from: Jani heading: Reminder body: Don't forget me this weekend!

The AJAX Technique

The JavaScript function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=x mlhttp.responseText; } } xmlhttp.open("GET","gethint.php?q="+str,true); xmlhttp.send(); } Start typing a name in the input field below: First name: Suggestions:

PHP side <?php // Fill up array with names $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //get the q parameter from URL $q=$_GET["q"]; //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i

MySQL and AJAX function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlh ttp.responseText; } } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } Check if a person is selected Create an XMLHttpRequest object Create the function to be executed when the server response is ready Send the request off to a file on the server Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

And then… PHP & MySQL Firstname Lastname Age Hometown Job "; while($row = mysql_fetch_array($result)) { echo " "; echo " ". $row['FirstName']. " "; echo " ". $row['LastName']. " "; echo " ". $row['Age']. " "; echo " ". $row['Hometown']. " "; echo " ". $row['Job']. " "; echo " "; } echo " "; mysql_close($con); ?> PHP opens a connection to a MySQL server The correct person is found An HTML table is created, filled with data, and sent back to the "txtHint" placeholder

PHP & Reading from XML files Same old Javascript load("cd_catalog.xml"); $x=$xmlDoc->getElementsByTagName('ARTIST'); for ($i=0; $i length-1; $i++) { //Process only element nodes if ($x->item($i)->nodeType==1) { if ($x->item($i)->childNodes->item(0)->nodeValue == $q) { $y=($x->item($i)->parentNode); } } } $cd=($y->childNodes); for ($i=0;$i length;$i++) { //Process only element nodes if ($cd->item($i)->nodeType==1) { echo(" ". $cd->item($i)->nodeName. ": "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo(" "); } } ?> PHP creates an XML DOM object Find all elements that matches the name sent from the JavaScript Output the album information (send to the "txtHint" placeholder)

Live Search - Links load("links.xml"); $x=$xmlDoc->getElementsByTagName('link'); //get the q parameter from URL $q=$_GET["q"]; //lookup all links from the xml file if length of q>0 if (strlen($q)>0) { $hint=""; for($i=0; $i length); $i++) { $y=$x->item($i)->getElementsByTagName('title'); $z=$x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType==1) { //find a link matching the search text if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) { if ($hint=="") { $hint=" item(0)->childNodes->item(0)->nodeValue. "' target='_blank'>". $y->item(0)->childNodes->item(0)->nodeValue. " "; } else { $hint=$hint. " item(0)->childNodes->item(0)->nodeValue. "' target='_blank'>". $y->item(0)->childNodes->item(0)->nodeValue. " "; } } } } } // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint=="") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?> Load an XML file into a new XML DOM object Loop through all elements to find matches from the text sent from the JavaScript Sets the correct url and title in the "$response" variable. If more than one match is found, all matches are added to the variable If no matches are found, the $response variable is set to "no suggestion"

RSS Feeds load($xml); //get elements from " " $channel=$xmlDoc->getElementsByTagName('channel')->item(0); $channel_title = $channel->getElementsByTagName('title') ->item(0)->childNodes->item(0)->nodeValue; $channel_link = $channel->getElementsByTagName('link') ->item(0)->childNodes->item(0)->nodeValue; $channel_desc = $channel->getElementsByTagName('description') ->item(0)->childNodes->item(0)->nodeValue; //output elements from " " echo(" ". $channel_title. " "); echo(" "); echo($channel_desc. " "); //get and output " " elements $x=$xmlDoc->getElementsByTagName('item'); for ($i=0; $i item($i)->getElementsByTagName('title') ->item(0)->childNodes->item(0)->nodeValue; $item_link=$x->item($i)->getElementsByTagName('link') ->item(0)->childNodes->item(0)->nodeValue; $item_desc=$x->item($i)->getElementsByTagName('description') ->item(0)->childNodes->item(0)->nodeValue; echo (" ". $item_title. " "); echo (" "); echo ($item_desc. " "); } ?> Load an XML file into a new XML DOM object Loop through all elements to find matches from the text sent from the JavaScript Sets the correct url and title in the "$response" variable. If more than one match is found, all matches are added to the variable If no matches are found, the $response variable is set to "no suggestion"

AJAX & Polling <?php $vote = $_REQUEST['vote']; //get content of textfile $filename = "poll_result.txt"; $content = file($filename); //put content in array $array = explode("||", $content[0]); $yes = $array[0]; $no = $array[1]; if ($vote == 0) { $yes = $yes + 1; } if ($vote == 1) { $no = $no + 1; } //insert votes to txt file $insertvote = $yes."||".$no; $fp = fopen($filename,"w"); fputs($fp,$insertvote); fclose($fp); ?> Result: Yes: ' height='20'> % No: ' height='20'> % Get the content of the "poll_result.txt" file Put the content of the file in variables and add one to the selected variable Write the result to the "poll_result.txt" file Output a graphical representation of the poll result