CS222 Lab 10: PHP and AJAX Practice

Instructor: Trish cornez



Exercise 1: Reading from a file

The objective of this exercise is to use PHP to open a server file, read the content and construct an array to store each value. The PHP script will then scramble the file data and send it back to the HTML file, to be displayed.
  1. Construct a text file containing the following sorted fruit named. Upload the file to your host server. 
    				Apple
				Apricot
				Avocado
				Banana
				Blueberry
				Cantaloupe
				Cherry
				Coconut
				Fig
				Grapefruit
				Kiwi
				Lemon
				Orange
				Papaya
				Watermelon
  2. use the mockup below to create a simple webpage that contains a button. When the button is activated, the fruit items listed in the file will be displayed in random order.
  3. Use MAMP to properly test the web app.



Exercise 2: AJAX


The objective of this example is to use JavaScript to request data from the server. A php script will collect the data from the server and send it back to the JavaScript file, which will then display it in a DOM element within the html file.
  1. Create an HTML page using the mockup shown below.
    Construct a single HTML document that contains two "pages" loaded together.
    This is done by stacking multiple divs with a data-role of "page".
    Each "page" block needs a unique id (id= "page1" and id="page2").
    The page id's will be used to link internally between the login page and the second page.
    See the code below:




  2. Write a JavaScript file to create an http request containing a login password.
    This HTTP request will be sent to a php file, which will return a secret message.
    The JavaScript should display the secret message in a DOM element on the second page.


  3. Write a PHP script that receives a login password.
    The PHP script should return a secret message only if the login is correct.

lab10bHTML.txt
lab10bJS.txt
lab10bPHP.txt


Exercise 3: JavaScript and PHP


The objective of this example is to use JavaScript to interact with PHP.
  1. Create an HTML page using the mockup shown below.
  2. Write a JavaScript file to create an http request to execute the PHP script. No data is passed to PHP in this exercise.
    Assume the PHP script will read a collection of facts from a text file and select a random face. The PHP script should return this fact to JavaScript, which displays it.


Exercise 4: Regex

Create an Atom file containing the text below. 
		Zeke Green
		909-345-2121
		866 Hudson Street
		Saugus, MA 01906

		Dru-East Chavez
		909-341-9854
		418 East Grove Circle
		Andover, MA 01810


		Lou Apple
		909-534-2343
		8463 East Gulf Street
		Hillsborough, NJ 08844

		Cam Chi
		345.423.1242
		7158 East Summit Street
		Tualatin, OR 97062

		Skye Rand
		509-876-9343
		166 Beaverman Ridge Street
		Windsor Mill, MD 21244

		Olive Oylman
		309-209-2425
		309.209.2425
		31 Glenlake Ave.
		Mansfield, MA 02048

		Hollywood\Vine
		HollyWood\Highland
		7th\Metro
		Olympic\Figueroa
		b1.jpg
		b2.jpg
		b3.jpg
		b4.jpg
  1. Locate the text man .
  2. Locate all the periods
  3. Locate all the backslashes.
  4. What does the \w search for?
  5. What does the \W search for?
  6. Locate the word b1.jpg .
  7. Locate all the digits.
  8. Locate all non-digits.
  9. Locate only whitespace.
  10. Locate all instances of the complete word East with a space before and after it.
  11. Locate all phone numbers with separators of dashes and periods: 909-876-3433 or 987.333.1223.
  12. Locate all phone numbers with the area code 909.


Exercise 5: JSON


Modify exercise 3. The objective of this example is to use JSON to pass key value pairs between PHP and JavaScript.
  1. Write a JavaScript file to create an http request to execute the PHP script. No data is passed to PHP in this exercise.
    Assume the PHP script will return a fact type and a fact about C++. For example:
    A fact type can be "Popularity" or "Characteristic"
    A fact about "Popularity" might be "C++ was the third most popular language in 2018."
    Upon receiving the fact type and the fact, JavaScript should display this information in the HTML document.


  2. Write a PHP script that randomly selects fact information from a two-dimensional array.
    				$array = array();
				$array[] = array("popularity", "C++ gained instant popularity in 1983, the year it was introduced.");
				$array[] = array("popularity", "C++ was the third most popular language in 2018.");
				$array[] = array("popularity", "The Amazon website is written in C++.");
				$array[] = array("popularity", "C++ has remained in demand since 1983 because it is a powerful tool that is adaptable.");
				$array[] = array("characteristic", "C++ is an Object Oriented Programming Language (OOPL).");
				$array[] = array("characteristic", "C++ has a huge function library.");
				$array[] = array("characteristic", "C++ is a highly flexible language with versatility.");
				$array[] = array("characteristic", "C++ can be used often for developing system software and operating systems.");
				$array[] = array("characteristic", "C++ is suitable for the development of reusable software.");

    The PHP script should return information, both the fact type and the fact, packed into a JSON object.