You have written scripts that run on the user’s client browser. These scripts are fast but unreliable. They are fast because they run entirely on the client’s computer and do not require communication with the webserver. However, the user can intercept and modify these scripts, and even disable them entirely. Therefore, the best practice is to use client-side scripts only to improve the user experience, but not to rely on them for the correct behavior of the web page.

Scripts that run on the server are more reliable. When configured correctly, the user never sees the scripts and cannot avoid or modify their behavior. The code of these scripts remains on the server. The user’s browser sees only the XHTML content that the script produces.

Server-side scripts are slightly less responsive to the user and put an additional processing burden on your web server. Nevertheless, they are much more secure and reliable than client-side scripts. In this unit you apply the PHP language to create server-side scripts.

To Prepare for this Assignment:

Revisit the table you calculated in unit 4. Recall that this script uses client-side JavaScript. The way it works, the webserver sends both the XHTML and the JavaScript to the client’s web browser. The browser then executes the JavaScript to produce additional XHTML, which it then renders on the screen.

Rewrite the program to use server-side PHP instead. The syntax of PHP is similar to that of JavaScript; keep in mind the following differences:

• PHP uses the print function instead of JavaScript’s document.write function.
• PHP prefixes a dollar sign ($) on every variable name.
• PHP encloses its code in tags, where JavaScript uses

  Below is my js code

  let supplies = [
  { Item: “knives”, Price: 50, Location: “Target” },
  { name: “pots & pans”, price: 200, place: “Bed Bath and Beyond” },
  { name: “cutting board”, price: 25, location: “Walmart” },
  { name: “measuring cups”, price: 12, location: “Lowes” },
  { name: “measuring spoons”, price: 9, location: “Target” }
  ];

  function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
  let th = document.createElement(“th”);
  let text = document.createTextNode(key);
  th.appendChild(text);
  row.appendChild(th);
  }
  }

  function generateTable(table, data) {
  for (let element of data) {
  let row = table.insertRow();
  for (key in element) {
  let cell = row.insertCell();
  let text = document.createTextNode(element[key]);
  cell.appendChild(text);
  }
  }
  }

  let table = document.querySelector(“table”);
  let data = Object.keys(supplies[0]);
  generateTableHead(table, data);
  generateTable(table, supplies);