Untitled

<?php
session_start();
//you need to sanitize the username as you are outputting it into markup below in order to prevent
//the possibility of cross-site-scripting attacks
$username = htmlspecialchars($_GET['username']);
$_SESSION['username'] = $username;

//Database Information
$dbhost = "";
$dbname = "";
$dbuser = "";
$dbpass = "";

//Connect to database
mysql_connect ( $dbhost, $dbuser, $dbpass)or die("Could not connect: ".mysql_error());
mysql_select_db($dbname) or die(mysql_error());

//do the query
$query = mysql_query("SELECT * FROM images ORDER BY idnum DESC LIMIT 1");

//generate an array of all images
$images = array();
while($image = mysql_fetch_array($query)) {
  //this adds each image to the images array
  $images[] = $image;
}
?>

<html>
  <head>
    <title>Home - Site in Development</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
     <script type="text/javascript">
       /*
       Image is a reserved word, and while Image1 wouldn't have been an issue, it doesn't
       describe what this function was doing.  Similarly, "frame" is a bad id as it can
       be easily confused with the frame html tag.  I also modified this function to
       accept the url that it wants to switch to as an argument, that way you don't
       have to write a new function for every image, and there
       */
       function switchImageUrl(url) {
        document.getElementById('img-frame').src = url;
        return false;
       }
     </script>
  </head>
  <body>
    <div id='account_links'>
      <?php
      if ($_SESSION['username']) {
        echo "Welcome $username!";
      } else { ?>
        <a href='login.php'>Login</a> | <a href='register.php'>Register</a>
      <?php } ?>
    </div>

    <h1>Picture Captions</h1>
    <br/>
    <br/>
    <div id="left_bar">
      Submit a picture <a href="upload.php">here</a>.
    <hr/>
    <h2>Top Images</h2>
    <br/>

    <div id="front_pg_images">
      <!--you'll notice that we don't have to do the mysql query again,
      we can just use the images array we got at the beginning -->
      <?php foreach($images as $image) { ?>
        <img src="<?php echo $image['filename'];?>" width="72px" height="58px" id="front_pg_thumbnail"/>
        <?php echo $image['name']." - by ".$image['submitter']."<br/>"; ?>
        <!--This was modified to output the image's filename as the argument that will be passed to
        the javascript function.  You would probably be better off setting the URL as a rel attribute on
        the button and binding an event listener (putting inline javascript on html tags is a bad-->
        <button onClick="switchImageUrl('<?php echo $image['filename']; ?>')" align="left">View</button>
        <br/>
        <br/>
      <?php } ?>
    </div>

    <div id="center_frame">
      <img src="frame.jpg" name="default" id="img-frame" align="left" valign="top">
    </div>
  </body>
</html>