The software installation instructions configured a LAMP (Linux, Apache, MySQL, and PHP) stack that you can use for web development, including server-side scripting and database connectivity. As part of the configuration, Apache has been configured with per-user web directories.

Content stored in the public_html directory in your home directory (you’ll see this directory if you open the terminal and type ls to list directory contents) will be served by Apache. Open Firefox and enter http://localhost/~student to have Apache display the directory contents, which it does by default when there isn’t an index page (traditionally index.html or index.php).

Create a new file in ~/public_html (the tilde is shorthand for your home directory) named test.html. The GNOME text editor, gedit, can be used to edit files and supports syntax highlighting as well as a host of other features. Enter the following text in the test.html file and save it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test HTML Page</title>
  </head>

  <body>
    Hello, World!
  </body>
</html>

Enter http://localhost/test.html in the web browser’s address bar (be sure to do this in the virtual machine (VM), not the host machine!) to verify that Apache is serving files correctly. You should see “Hello, World!” – contact the instructor if you don’t see this text.

If Apache is not serving files correctly, then you will not be able to test each of the following exercises.

Practice

Complete the following exercises to practice using PHP (solutions):

  1. Write a basic PHP script that outputs $_SERVER['SERVER_NAME']. Name your script server.php.

    <!DOCTYPE html>
<html>
  <body>
    <?php echo "Hello from server ".$_SERVER['SERVER_NAME']."!"; ?>
  </body>
</html>

  2. Put the server name in a span with an id of “name”. Add CSS to use a bold weight for that span using an inline style sheet.

    <!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #name {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    Hello from server <span id="name"><?php echo $_SERVER['SERVER_NAME']; ?></span>!
  </body>
</html>

  3. Move the CSS to a separate file named server.css, and include that CSS file. The visual appearance of the page should not change.

    server.css
    #name {
  font-weight: bold;
}
    server.php
    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="server.css" />
  </head>
  <body>
    Hello from server <span id="name"><?php echo $_SERVER['SERVER_NAME']; ?></span>!
  </body>
</html>

  4. Create a separate file for the head element, and include that file using PHP’s include statement.

    head.php
      <head>
    <link rel="stylesheet" type="text/css" href="server.css" />
  </head>
    server.php
    <!DOCTYPE html>
<html>
  <?php include "head.php"; ?>
  <body>
    Hello from server <span id="name"><?php echo $_SERVER['SERVER_NAME']; ?></span>!
  </body>
</html>

  5. Create an HTML page (input.html) that contains a form with a text field. When submitted, this form should pass the input to input.php, which prints the text.

    input.html
    <!DOCTYPE html>
<html>
  <body>
    <form action="input.php" method="post">
      <input type="text" name="input" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
    input.php
    <!DOCTYPE html>
<html>
  <body>
    <?php
      echo $_SERVER['PHP_SELF']." received '".$_POST['input']."'";
     ?>
  </body>
</html>

    • What happens when you enter the following input into the text field?

      <script type="text/javascript">alert("Yikes!");</script>

      This implementation is vulnerable to a cross-site scripting (XSS) attack, which allows an attacker to inject client-side scripts into the web page.

      Web browsers may detect the XSS vulnerability and automatically block it. Thus, different things may happen depending on the browser being used.

    • What happens when you pass the input to PHP’s htmlspecialchars function and print the result?

      PHP’s htmlspecialchars function converts special characters to HTML entities so that <script> becomes &lt;script&gt;, which renders as <script> by the user’s web browser and mitigates the XSS attack.