Ivan W. Lam | PHP & Ajax < JavaScript < Programming < Experiments

http://ivanwlam.com/experiments/programming

PHP & Ajax

Summary

The next step of PHP self-teaching after PHP Basics. Learned to use Ajax by using PHP to receive information of an XML file, catalog.xml, and to instruct the display of data onto the original file.

Also added a cookie component so the visitors would not lose their place. Note: the cookie in this experiment expires very quickly so that the experiment can start over without manual deletion of the cookies from the browser.

Date Created

17 Sept–5 Oct 2008.

Help

w3schools.com
php.net — Dictionary of PHP. Sometimes hard to find things but what you're looking for is probably there.
PHP array length size count — Learned the count method to check the number of items in an array. A JavaScript version of .length.
Passing Data from Javascript to PHP [Archive] - WebDeveloper.com — Learned to transfer values from JS to PHP without sending and requesting, just in case I needed it in the future.
[Javascript] JavaScript to PHP variable transfer — While this thread shows how a JS value can be transfered to PHP, I figured out that I could get a PHP value and transfer it to JS.
How to get Id of Div - JavaScript/SHTML/AJAX — Learned a new/overlooked property in JS Objects: .id.

Helper Script(s)

This entry was posted on Wednesday, June 10th, 2009 at 17:00 and is filed under JavaScript and PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tags: image, portfolio.

Example

Project List

Project Pieces List

This is where the text/image should load.

External CSS file linked in <head>

 @charset "utf-8";
 
 #projectsList{
     padding:5px;
     margin-bottom:10px;
     }
 
 #piecesList{
     padding:5px;
     margin-bottom:10px;
     }

HTML in Example

 <h4>Project List</h4>
 <ul id="projectsList" style="background-color:#FFFF00;width:300px;min-height:20px;">
     <li id='projLi-First%20Project'><a onclick='showPieces("First%20Project")' href='#' title='First Project'>First Project</a></li>
     <li id='projLi-Second%20Project'><a onclick='showPieces("Second%20Project")' href='#' title='Second Project'>Second Project</a></li>
     <li id='projLi-Third%20Project'><a onclick='showPieces("Third%20Project")' href='#' title='Third Project'>Third Project</a></li>
 </ul>
 <h4>Project Pieces List</h4>
 <ul id="piecesList" style="background-color:#66FFCC;width:300px;min-height:100px;">
 </ul>
 <div id="screen" style="width:400px;height:200px;border:1px solid black;">
     This is where the text/image should load.
 </div>

Written-out JavaScript at the end of the document

 <script type="text/javascript">
 <!--
 
 //Define the variable for the piece list
 //Do it here so I could refer to it in the function that goes with a project being clicked
 var piecesList=document.getElementById("piecesList");
 
 // This function is for when the xmlHttp object's ready state changes.
 // It checks when the object is completed the request, and then it
 // returns the text from the file it was sent to.
 //
 //define what to do with the response from the php
 function stateChanged(){
     //if the request is complete:
     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
         //define variable to hold make the response text
         var responseText=xmlHttp.responseText;
         
         //splitting the responseText
         //find where the project reference in the responseText
         var respProjIndex=responseText.indexOf("projectInUri=");
         //isolate the project part
         var projectInUri=responseText.substring(respProjIndex);
         //isolate the part BEFORE the project part
         var respList=responseText.substring(0,respProjIndex);
         
         //output the piecesList with the responseText w/o the project part
         piecesList.innerHTML=respList;
         
         //define an ARRAY of the pieces list items
         var piecesLi=piecesList.getElementsByTagName("li");
         
         //start of "pieces" script borrowing
         //taken from the "pieces" part of the script (at the bottom) b/c this will integrate 
         //the screen update when either the project or the piece list is clicked
         for (var i=0;i<piecesLi.length;i++){
             //when the piece list item is clicked
             piecesLi[i].onclick=function(){
                 //run the pieces ajax function and take the projectInUri string with it
                 //so the php will know which project to look through
                 screenProcessLi(this,projectInUri);
                 }
             }
         //end bottom script "borrowing"
         
         //update the screen when the PROJECT is clicked.
         //(the above screenProcessLi is for when the PIECE is clicked)
         //run some tests to see which function to run
         if (getCookie("c_piece")==null){
             //if there's no c_piece cookie, show the first piece image
             screenProcessLi(piecesLi[0],projectInUri);
             } else {
                 //if c_piece exists, get the value
                 var c_piece=getCookie("c_piece");
                 //split c_piece into two parts
                 //find the split
                 var c_pieceBreak=c_piece.indexOf("projectInUri=");
                 //get the first part of c_piece (the piece name)
                 var c_piecePiece=c_piece.substring(0,c_pieceBreak);
                 //get the second part of c_piece (the projectInUri)
                 var c_pieceProject=c_piece.substring(c_pieceBreak);
         
                 if(c_pieceProject!=projectInUri){
                 //if the c_piece DOES exist but is not the same as the project just loaded, also show the first piece image
                     screenProcessLi(piecesLi[0],projectInUri);
                     } else if(c_pieceProject==projectInUri){
                     //if the c_piece DOES exist and is the same as the project displayed, show whatever piece it is
                     //(this is where the cookie is supposed to work, showing the piece that was last seen and registered in the cookie
                     showScreen(c_piecePiece,c_pieceProject);
                     } else {
                     //this condition shouldn't occur because all the bases should have been covered.
                     alert("something is wrong");
                     }
             }
             
         
         } else {
         //if the request is not complete, don't do anything.
         return;
         }
     }
 
 //a mid-way function to process the string being sent to showPieces()
 function piecesProcessLi(li){
     //gets the id of the project list item
     var liId=li.id;
     //cuts the prefix to the id, leaving only the project name
     var liName=liId.substring(7);
     //pass it through showPieces function
     showPieces(liName);
     }
 
 //define variable for the projects list ul
 var projectsList=document.getElementById("projectsList");
 //define the ARRAY for the projects list items
 var projectsLi=projectsList.getElementsByTagName("li");
 
 //run a loop to change the anchor href of the list items if the browser supports javascript
 //if browser doesn't support javascript, it's the old fashion individual php
 for (var i=0;i<projectsLi.length;i++){
     //create an ARRAY of all anchors in the projects list items
     var projectsLiAnchor=projectsLi[i].getElementsByTagName("a");
     //define all hrefs in the projects list item anchors as "#"
     for (var j=0;j<projectsLiAnchor.length;j++){
         projectsLiAnchor[j].href="#";
         }
     }
 
 //the function that does the xml request
 //occurs when the page loads or a link is clicked
 function showPieces(str){
 
     //call the xmlhttp object.
     xmlHttp=GetXmlHttpObject();
     if (xmlHttp==null){
         alert ("Your browser does not support HTML Request.");
         return;
         }
     
     //define a url and built upon it        
     var url="http://ivanwlam.com/archives/experiments/web/php/080917-phpAjax/showPiecesIndex.php";
     //add the query and the project name into the url
     url=url+"?project="+str;
     //create a random id so the cache is not repeated, or something
     url=url+"&sid="+Math.random();
     
     //tells browswer what to do when the ajax is occuring
     xmlHttp.onreadystatechange=stateChanged;
     //standard ajax stuff that i don't quite get but don't question much right now
     xmlHttp.open("GET",url,true);
     xmlHttp.send(null);
     
     setCookie("c_project",str,0.001);
     }
 
 
 for (var i=0;i<projectsLi.length;i++){
     //var projectsLiId=projectsLi[i].id;
     //var projectsLiName=projectsLiId.substring(7);
     //alert("projectsLi["+i+"]="+projectsLiName);
     projectsLi[i].onclick=function(){
         piecesProcessLi(this);
         }
     }
     
 // the above is for projects section's ajax only
 
 // the below is for pieces section's ajax only
 
 //define the screen area
 var screenArea=document.getElementById("screen");
 
 //define a similar function above, to let browser know what to do when php gives us a response
 function screenStateChanged(){
     //when the state is complete
     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
         //define variable to hold the response
         var responseText=xmlHttp.responseText;
         
         //outputs the response to the screen
         screenArea.innerHTML=responseText;
         
         } else {
         //if the state is not complete, don't do anything
         return;
         }
     }
 
 //a function to process the string when the piece is clicked
 function screenProcessLi(li,projectInUri){
     //get the piece list item's id
     var liId=li.id;
     //cuts off the prefix of the id, leaving just the piece name
     var liName=liId.substring(8);
     //runs through the showScreen function to ajax the data
     showScreen(liName,projectInUri);
     }
 
 //the function that sets up and sends the data to be processed and updates the screen    
 function showScreen(str,projectInUri){
 
     //adds the project title onto the piece name    
     var urlData=str+"~"+projectInUri;
     //get an xml http object, standard ajx stuff
     xmlHttp=GetXmlHttpObject();
     if (xmlHttp==null){
         alert ("Your browser does not support HTML Request.");
         return;
         }
     
     //call for a php file that deals with updating the screen;
     var url="http://ivanwlam.com/archives/experiments/web/php/080917-phpAjax/showScreenIndex.php";
     //add the piece query into the url
     url=url+"?piece="+urlData;
     //add a random id number to avoid cache repeat or whatever
     url=url+"&sid="+Math.random();
     
     //standard ajax stuff that i don't really understand
     xmlHttp.onreadystatechange=screenStateChanged;
     xmlHttp.open("GET",url,true);
     xmlHttp.send(null);
 
     //set the cookie with the value of "str", which is the piece name,
     //and the projectInUri value
     setCookie("c_piece",str+projectInUri,0.001);
     
     }
 
 //-->
 </script>
 <script type='text/javascript'>
 <!--
 if(getCookie("c_piece")==null){
 if(getCookie("c_project")==null){
     setCookie("c_project","First%20Project",0.001);
     onload=showPieces("First%20Project"); 
     } else {
     var c_project=getCookie("c_project");
     onload=showPieces(c_project);
     };
 } else {
 var c_project=getCookie("c_project");
 var c_piece=getCookie("c_piece");
 var c_pieceBreak=c_piece.indexOf("projectInUri=");
 var c_piecePiece=c_piece.substring(0,c_pieceBreak);
 var c_pieceProject=c_piece.substring(c_pieceBreak);
 showPieces(c_project);
 };
 //-->
 </script>

Separate PHP file

 <?php
     $projectInUri=$_GET["project"];
     
     $xmlDoc = domxml_open_file("catalog.xml");
     $project = $xmlDoc->get_elements_by_tagname("project");
 
     for ($i=0;$i<count($project);$i++){
         $projectNameNode=$project[$i]->get_elements_by_tagname("name");
         $projectName=$projectNameNode[0]->get_content();
         if ($projectName==$projectInUri){
             $pieceNodes=$project[$i]->get_elements_by_tagname("piece");
             for ($j=0;$j<count($pieceNodes);$j++){
                 $pieceTitle=$pieceNodes[$j]->get_elements_by_tagname("title");
                 $pieceTitleContract=str_replace(" ","%20",$pieceTitle[0]->get_content());
                 echo "<li id=\"pieceLi-".$pieceTitleContract."\"><a href=\"#\" title=\"".$pieceTitle[0]->get_content()."\">".$pieceTitle[0]->get_content()."</a></li>\n";
                 
                 }
             echo "projectInUri=".$projectInUri;
             return;
             } 
         }
 
 ?>

Separate PHP file

 <?php
     $receiveStr=$_GET["piece"];
     
     $projectInUriIndex=strpos($receiveStr,"~projectInUri=");
     $projectInUriString=substr($receiveStr,($projectInUriIndex+1));
     $projectInUri=substr($projectInUriString,13);    
     $pieceInUri=substr($receiveStr,0,$projectInUriIndex);
     
     $xmlDoc = domxml_open_file("catalog.xml");
     $project = $xmlDoc->get_elements_by_tagname("project");
 
     for ($i=0;$i<count($project);$i++){
         $projectNameNode=$project[$i]->get_elements_by_tagname("name");
         $projectName=$projectNameNode[0]->get_content();
         if ($projectName==$projectInUri){
             $pieceNodes=$project[$i]->get_elements_by_tagname("piece");
             for ($j=0;$j<count($pieceNodes);$j++){
                 $pieceTitleNode=$pieceNodes[$j]->get_elements_by_tagname("title");
                 $pieceTitle=$pieceTitleNode[0]->get_content();
                 if ($pieceTitle==$pieceInUri){
                     $pieceImageUriNode=$pieceNodes[$j]->get_elements_by_tagname("image");
                     $pieceImageUri=$pieceImageUriNode[0]->get_content();
                     echo "<img src=\"".$pieceImageUri."\" alt=\"".$pieceTitle."\" id=\"".$pieceTitle."\" />";
                     return;
                     }
                 }
             return;
             }
         } 
 
 ?>

Experiments at ivanwlam.com

Main Navigation

Experiment Categories:

RSS Feeds:

PHP & Ajax

Summary

Date Created

Help

Helper Script(s)

Leave a Reply

Example

Project List

Project Pieces List

External CSS file linked in <head>

HTML in Example

Written-out JavaScript at the end of the document

Separate PHP file

Separate PHP file