Home > Projects > Hello World



PHP (AJAX)


Building on the last example above for AJAX, here is a PHP example which displays an Ascii version of Hello World. The user can determine the character to print and the color.


Enter character to draw ( e.g. @ ):


Color:





For the above example I will start with the JavaScript in the <HEAD> tag of the web page.

The most notable difference is the handling of the character entered. If a plus sign (+) is entered, the PHP URL data always converts '+' to a space when echoed directly and will display the Ascii "Hello, World!" as blank. To get around this the '+' is captured in an if statement and then converted into "%2B" before passing it to the URL.

 function callAsciiPOST() {
      var url = "ajax/files/displayasciiPost.php";
      var ch = document.getElementById("character").value;
        if(ch == "+") {  
          ch = "%2B";
          }  ...

The color is selected by the user via a drop-down. And when submitted passed to the variable co. Then combine the color selected with the character entered (as variable colorvars) and send it to the server.

      var co = document.getElementById("color").value;
      var colorvars = "character="+ch+"&color="+co;
      xhttp.open("POST", url, true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.onreadystatechange = function() {
        if(xhttp.readyState == 4 && xhttp.status == 200) {
          var return_data = xhttp.responseText;
        document.getElementById("asciiexample").innerHTML = return_data;
        }
      }
      xhttp.send(colorvars); 
      document.getElementById("asciiexample").innerHTML = "processing...";
    }

For more information on the AJAX in this example see the AJAX page.


Now for the PHP file on the server.


First define two functions, drawPound() and drawSpace() each with a for loop statement that repeatedly prints the user specified character and the "space" character, until the specified number of repetitions evaluate to false. The parameter for this is named $a.


PHP (typically) generates HTML output. When displaying HTML, the browser (typically) collapses all whitespace in text into a single space. Sometimes, between tags, it even collapses whitespace to nothing. To add needed whitespaces use &nbsp; as seen in the drawSpace() function.

<?php

function drawPound($a) {
for ($i = 1; $i <= $a; $i++) {
    echo "<span style='color:" . $_POST['color'] . "'>" . $_POST['character'] . "</span>"; 
   }  
}

function drawSpace($a) {
for ($i = 1; $i <= $a; $i++) {
    echo "&nbsp;";
  }
}

Two other functions are defined for when a line return '\n' is needed. These are named drawLastPound() and drawLastSpace(). Since PHP is a server side language, the output is sent as HTML and line breaks need to be in HTML. HTML does not understand \n so use the nl2br() function, which returns a string with <br /> or <br> inserted before all newlines (\r\n, \n\r, \n and \r).


Also \n is in double quotes, otherwise it will be rendered literally as \n.


function drawLastPound() {
   echo nl2br ( "<span style='color:" . $_POST['color'] . "'>" . $_POST['character'] . " \n</span>");
}

function drawLastSpace() {
    echo nl2br (" \n"); 
}

drawPound(1); drawSpace(3); drawPound(1); drawSpace(1); drawPound(5); drawSpace(1); drawPound(1); drawSpace(5); drawPound(1); drawSpace(6); drawPound(3); drawSpace(5); drawPound(1); drawSpace(7); 
drawPound(1); drawSpace(2); drawPound(3); drawSpace(2); drawPound(4); drawSpace(2); drawPound(1); drawSpace(5); drawPound(4); drawSpace(3); drawLastPound(); drawPound(1); drawSpace(3); drawPound(1); 
drawSpace(1); drawPound(1); drawSpace(5); drawPound(1); drawSpace(5); drawPound(1); drawSpace(5); drawPound(1); drawSpace(3); drawPound(1); drawSpace(4); drawPound(1); drawSpace(3); drawPound(1); 
drawSpace(3); drawPound(1); drawSpace(1); drawPound(1); drawSpace(3); drawPound(1); drawSpace(1); drawPound(1); drawSpace(3); drawPound(1); drawSpace(1); drawPound(1); drawSpace(5); drawPound(1); 
drawSpace(3); drawPound(1); drawSpace(2); drawLastPound(); drawPound(5); drawSpace(1); drawPound(5); drawSpace(1); drawPound(1); drawSpace(5); drawPound(1); drawSpace(5); drawPound(1); drawSpace(3); 
drawPound(1); drawSpace(4); drawPound(1); drawSpace(3); drawPound(1); drawSpace(3); drawPound(1); drawSpace(1); drawPound(1); drawSpace(3); drawPound(1); drawSpace(1); drawPound(4); drawSpace(2); 
drawPound(1); drawSpace(5); drawPound(1); drawSpace(3); drawPound(1); drawSpace(2); drawLastPound(); drawPound(1); drawSpace(3); drawPound(1); drawSpace(1); drawPound(1); drawSpace(5); 
drawPound(1); drawSpace(5); drawPound(1); drawSpace(5); drawPound(1); drawSpace(3); drawPound(1); drawSpace(5); drawPound(1); drawSpace(2); drawPound(1); drawSpace(2); drawPound(1); drawSpace(2); 
drawPound(1); drawSpace(3); drawPound(1); drawSpace(1); drawPound(1); drawSpace(2); drawPound(1); drawSpace(2); drawPound(1); drawSpace(5); drawPound(1); drawSpace(3); drawPound(1); drawSpace(2); 
drawLastSpace(); drawPound(1); drawSpace(3); drawPound(1); drawSpace(1); drawPound(5); drawSpace(1); drawPound(5); drawSpace(1); drawPound(5); drawSpace(2); drawPound(3); drawSpace(2); 
drawPound(1); drawSpace(4); drawPound(1); drawSpace(2); drawPound(1); drawSpace(5); drawPound(3); drawSpace(2); drawPound(1); drawSpace(3); drawPound(1); drawSpace(1); drawPound(5); drawSpace(1); 
drawPound(4); drawSpace(3); drawLastPound(); drawSpace(29); drawPound(1); drawSpace(38); drawLastSpace();

?>