CSCI 2006 - Spring 2024 - Server-Side ProgrammingLab #2 - PHP Basics

Lab #2 - PHP Basics

Purpose: Execute familiar coding concepts in PHP

Instructions

  1. Create a PHP file, called "index.php", that performs the following actions:
  2. Print the following HTML block
    <!DOCTYPE html>
    <html>
     <head>
      <link rel="stylesheet" href="/style.css" type="text/css" media="all">
      <title>Regular Programming in PHP</title>
     </head>
     <body>
      <h1>Controls</h1>
      <form method="GET">
        <label for="gravity">Gravity:</label>
        <input type="range" id="gravity" name="gravity" min="0.001" max="100" value="9.8" step="0.001" />
        <span>&nbsp;<span id="g">9.8</span> m/s<sup>2</sup></span>
        <br />
        <label for="seconds">Secodns:</label>
        <input type="range" id="seconds" name="seconds" min="1" max="100" step="1" value="10" />
        <span>&nbsp;<span id="s">10</span> s</span>
        <br />
        <button id="load" type="submit">Load</button>
      </form>
      <script>
    document.getElementById("gravity").addEventListener("change", () => {
      let g = document.getElementById("gravity").value;
      document.getElementById("g").textContent=g;
    });
    document.getElementById("seconds").addEventListener("change", () => {
      let s = document.getElementById("seconds").value;
      document.getElementById("s").textContent=s;
    });
      </script>
      <h1>Regular Coding</h1>
      <p>In C++, the following code would produce the output listed below</p>
      <pre><code class="language-cpp">
    int main() {
      const double GRAVITY_MPS2 = 9.8;
      int seconds = 10;
      std::cout << "Secs  Distance" << endl
        << fixed << showpoint << setprecision(2);
      for (int i = 1; i <= seconds; i++) {
        std::cout << setw(4) << i << "  " << (0.5*GRAVITY_MPS2*i*i) << endl;
      }
      return 0;
    }
      </code></pre>
    (Note: If you seem to get strange behavior in the HTML within the C++ code, try using the htmlentities() function in PHP. You can print the HTML prior to the code. Print the result of the function call to htmlentities('string to be decontaminated here'), and then print the rest of the HTML.
  3. Create a code in PHP that will produce a similar table to the one that would be produced by the C++ code, use a <table> tag to format it for the browser (an example of a <table> tag is provided below)
    <table>
     <tr>
      <th>Seconds</th>
      <th>Distance</th>
     </tr>
     <tr>
      <td>1</td>
      <td>4.90</td>
     </tr>
     <tr>
      <td>2</td>
      <td>19.60</td>
     </tr>
    </table>
    
  4. Add another block of HTML to print out after the table your PHP produced:
      <script type="text/javascript" src="/theme/prism.js"></script>
     </body>
    </html>
    
  5. Upload your PHP file (if you have not been doing that to test your code as you go), to the remote server. Please the file in "public_html/csci2006/lab02/index.php"
  6. In a web-browser, go to the URL below
  7. In the tab that opened, you should see something similar to the page contained on this page
  8. Edit your PHP to include the ability to pass the gravity and seconds via the URL, use the following code to get those values
    $gravity = (isset($_GET['gravity']))?$_GET['gravity']:9.8;
    $seconds = (isset($_GET['seconds']))?$_GET['seconds']:10;
    
    Ensure that the code is updating not only the table values, but also the C++ code variables so that the webpage remains accurate
  9. Test your site with multiple variations of gravity and seconds values, it should behave in a similar way to the example
  10. Ensure that your code is not producing any errors or warnings, by using the log-access tool. If you have trouble understanding the log messages, please email me for assistance. Note the log does not reset, so you need to look at when any errors/warnings occurred and which HTTP request they were for to better understand whether you have already fixed that issue

Submitting Instructions