Recent Changes - Search:

Network Programming

This website demonstrates using wikis as teaching and learning tool.

The course instructor is happy to share the teaching materials here with those who find it readable.

Tutorial /

Tutorial - Install a Web Server and do simple PHP programming

Overview - You will install an Apache Web server (and powered with PHP) in your computer. You then do some exercises about PHP Programming.

Activity 1: Install XAMPP as a Web server in your PC

(Q1): After your installation, where does the XAMPP files be installed in your PC?
(Q2): Where is the document root of your Web server?

Activity 2: PHP For loop

  • Write a PHP program that outputs 12x12 times table like the following:
  • You can use HTML table to present the result: 
    <table border="1" cellpadding="5">
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    </table>

Activity 3: PHP Control Statements

  • Write a PHP program that outputs the distribution of prime numbers in the following way:
Hint 1: The following PHP code is useful for you; it outputs all the prime numbers between 1 and 100. 
      <?php
        for ($i = 1; $i <= 100; $i++)
        {
          if($i % 2 != 1) continue;
          $d = 3;
          $x = sqrt($i);
          while ($i % $d != 0 && $d < $x) $d += 2;
          if((($i % $d == 0 && $i != $d) * 1) == 0) echo $i.' ';
        }
      ?>
Hint 2: You can use the HTML tag <strong> and </strong> to bold a number.

Activity 4: PHP Arrays and For loop

  • Write a PHP program that uses the following HTML+CSS template to put array data into HTML code. 
      $config = array("Dual 1.8GHz","Dual 2GHz","Dual 2.5GHz");
      $model = array("M9454LL/A","M9455LL/A","M9457LL/A");
      $processor = array("Dual 1.8GHz PowerPC G5","Dual 2GHz PowerPC G5","Dual 2.5GHz PowerPC G5");
      $bus = array("900MHz per processor","1GHz per processor","1.25GHz per processor");
      $cache = array("512K per processor","512K per processor","512K per processor");
  • Your result should like the following:
  • HTML template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tables</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
  <tr>
    <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
    <th scope="col" abbr="Dual 1.8">data-1-1</th>
    <th scope="col" abbr="Dual 2">data-1-2</th>
  <th scope="col" abbr="Dual 2.5">data-1-3</th>
  </tr>
  <tr>
    <th scope="row" abbr="Model" class="spec">Model</th>
    <td>data-2-1</td>
    <td>data-2-2</td>
    <td>data-2-3</td>
  </tr>
  <tr>
    <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
    <td class="alt">data-3-1</td>
    <td class="alt">data-3-2</td>
    <td class="alt">data-3-3</td>
  </tr>
  <tr>
    <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
    <td>data-4-1</td>
    <td>data-4-2</td>
    <td>data-4-3</td>
  </tr>
  <tr>
    <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
    <td class="alt">data-5-1</td>
    <td class="alt">data-5-2</td>
    <td class="alt">data-5-3</td>
  </tr>

</table>

</body>
</html>
[Get Code]
  • CSS code
body {
        font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #4f6b72;
        background: #E6EAE9;
}

a {
        color: #c75f3e;
}

#mytable {
        width: 700px;
        padding: 0;
        margin: 0;
}

caption {
        padding: 0 0 5px 0;
        width: 700px;    
        font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        text-align: right;
}

th {
        font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #4f6b72;
        border-right: 1px solid #C1DAD7;
        border-bottom: 1px solid #C1DAD7;
        border-top: 1px solid #C1DAD7;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: left;
        padding: 6px 6px 6px 12px;
        background: #CAE8EA;
}

th.nobg {
        border-top: 0;
        border-left: 0;
        border-right: 1px solid #C1DAD7;
        background: none;
}

td {
        border-right: 1px solid #C1DAD7;
        border-bottom: 1px solid #C1DAD7;
        background: #fff;
        padding: 6px 6px 6px 12px;
        color: #4f6b72;
}


td.alt {
        background: #F5FAFA;
        color: #797268;
}

th.spec {
        border-left: 1px solid #C1DAD7;
        border-top: 0;
        background: #fff;
        font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
        border-left: 1px solid #C1DAD7;
        border-top: 0;
        background: #f5fafa;
        font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #797268;
}
[Get Code]
Edit - History - Print - Recent Changes - Search
Page last modified on January 19, 2012, at 05:19 PM