Computer Availability Map UI

computers.php

<?php

#add your database username and password
$user="username";
$password="password";
$database="computer_availability";

    #connect to the database
   $DB = mysql_connect('mysqlcluster.adm.yourmysqlserver.edu', $user, $password);
  @mysql_select_db($database) or die("Unable to select database");

    $total_pc_results = mysql_query("SELECT * FROM compstatus WHERE computer_type='PC'");
    $avail_pc_results = mysql_query("SELECT * FROM compstatus WHERE status='0' AND computer_type='PC'");
    $pcs = mysql_num_rows($avail_pc_results) . '/' .mysql_num_rows($total_pc_results);

#get the textual data - total numbers and available numbers of MACs
    $total_mac_results = mysql_query("SELECT * FROM compstatus WHERE computer_type='MAC'");
    $avail_mac_results = mysql_query("SELECT * FROM compstatus WHERE status='0' AND computer_type='MAC'");
    $macs = mysql_num_rows($avail_mac_results) . '/' . mysql_num_rows($total_mac_results);

#get all the computer's row of data
    $result = mysql_query("SELECT * FROM compstatus");

 mysql_close($DB);
?>

<div id="computer_map">
#Text Equivalant
<p>PC's available: <?php echo $pcs; ?> Mac's available: <?php echo $macs; ?></p>

 #  the map
<div id="computer_map_600">
    <dl>
#loop through the rows and display the correct icon at the computer's location
#the computer's location is multiplied by 2 because this is the large map
#<dt class="avail_pc_600 icon" style="left:200px;top:100px>ICP10</dt>
#<dt class="avail_pc_600 icon" style="left:200px;top:100px>ICP10</dt>
   	 <?php
while($row = mysql_fetch_assoc($result)){?>
  	 <dt class="<?=($row['status']==0 ? 'avail' : 			 	 'busy');?>_<?=(strcmp($row['computer_type'],'PC')==0 ? 'pc' : 'mac');?>_600 icon" style="left: <?=($row['left_pos']*2);?>px; top:<?=($row['top_pos']*2)+30;?>px" ><?=$row['computer_name']?></dt>
   	 <?php }?>
    </dl>
  #Last Update
<p>Map is updated every 5 minutes. Last updated: <?php echo date("M j, Y \&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;\m\d\a\s\h\; H:i:s"); ?></p>
#end map
</div>
</div>