Had your fun? Go back to working version or check out Joe Lumbroso's resume.
<?
// Created by Joseph Lumbroso (joe@lumbroso.com) on 2008-05-28 for code style & review
//
// Here we will connect to a database. In this case we will use MySQL which I have installed on my server.
// I have experience w/ Oracle (PL/SQL), PostgreSQL, Access as well flat CSV and tab delimited files.
mysql_connect("localhost","root","some fake password"); // come now, you don't think I'm stupid do you?
mysql_select_db("lumbroso");
function s2m($s) {
return sprintf ("%d:%s", floor ($s / 60), sprintf("%02d", $s % 60));
}
function song($d) {
echo "<div class=row onclick=\"detail($d->id, this)\" onmouseover=\"mo(this, 'row_o')\" onmouseout=\"mo(this, 'row')\"><span class=title>$d->title</span><br> <span class=gray>Duration: ".s2m($d->length)."</span></div>";
}
// by album
if ($_GET[a]) {
$r = mysql_query("SELECT a.*, s.* FROM albums a LEFT JOIN songs s ON (a.id = s.album_id) WHERE a.id = {$_GET[a]}");
while ($d = mysql_fetch_object($r)) {
song($d);
}
exit;
}
// by artist
if ($_GET[t]) {
$r = mysql_query("SELECT a.*, s.* FROM albums a LEFT JOIN songs s ON (a.id = s.album_id) WHERE a.artist_name = '".urldecode($_GET[t])."'");
while ($d = mysql_fetch_object($r)) {
song($d);
}
exit;
}
// song detail
if ($_GET[s]) {
$r = mysql_query("SELECT s.*, s.title stitle, a.id aid, a.* FROM songs s, albums a WHERE s.album_id = a.id AND s.id = {$_GET[s]}");
while ($d = mysql_fetch_object($r)) {
echo "<div><h2>$d->stitle</h2><p><span class=gray> Artist: <a href=# onclick=\"artist('".urlencode($d->artist_name)."')\">$d->artist_name</a><br> Album: <a href=# onclick=\"songs($d->id, this)\">$d->title</a><br> Duration: ".s2m($d->length)."</span></div>";
}
exit;
}
?>
<html>
<head>
<title>Joe Lumbroso : Sample "AJAX" Project (HTML/CSS/JS/MySQL/PHP)</title>
<style type="text/css">
* { padding:0; margin:0; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin: 10px 0; }
html { height: 100%; }
body { font-family: Verdana; font-size: 10px; line-height: 16px; color: #333; text-align: justify; background-color: #ededed; height: 100%; }
a { color: #333; outline: none; text-decoration: none; }
a:hover { color: #660033; }
h1 { margin-bottom: 10px; font-weight: normal; line-height: 16px; font-size: 12px; padding-left: 5px; }
h2 { margin-bottom: 10px; font-weight: bold; line-height: 16px; font-size: 12px; padding-left: 8px; color: #444; }
.content { margin: 40px auto; padding-left: 20px; text-align: left; width: 650px; height: 450px; background: transparent url(bg.gif) no-repeat center; }
.cols { width: 200px; float: left; margin-top: 5px; }
.data { height: 375px; overflow: auto; border-top: 1px solid #efefef; }
.row { border-right: 1px solid #efefef; border-bottom: 1px dashed #efefef; height: 30px; padding: 5px 0px 5px 2px; cursor: pointer; }
.row_o { border-right: 1px solid #efefef; border-bottom: 1px dashed #efefef; background-color: #f7fafd; height: 30px; padding: 5px 0px 5px 2px; cursor: pointer; }
.row_c { border-right: 1px solid #efefef; border-bottom: 1px dashed #660033; background-color: #eef6ff; height: 30px; padding: 5px 0px 5px 2px; cursor: pointer; }
.title { color: #49637e; font-size: 10px; font-weight: bold; }
.gray { color: #ccc; }
.hype { padding-top: 2px; text-align: center; clear: both; }
.clear { clear: both; }
</style>
<script language="JavaScript">
<!--
var cur_a;
var cur_s;
function from_id(label) {
return document.getElementById(label);
}
function mo(row, cls) {
if (cur_a != row && cur_s != row) row.className = cls;
}
function ajax_get(url, div) {
xhr.open("GET", url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2000 00:00:00 GMT');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
from_id(div).innerHTML = xhr.responseText;
}
}
xhr.send(null);
}
function songs(id, row) {
if (window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else if (window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
ajax_get("index.php?a="+id, 'songs');
from_id('detail').innerHTML = '';
row.className = 'row_c';
if (cur_a) cur_a.className = 'row';
cur_a = row;
}
function artist(a) {
if (window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else if (window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
ajax_get("index.php?t="+a, 'songs');
from_id('detail').innerHTML = '';
}
function detail(id, row) {
if (window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else if (window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
ajax_get("index.php?s="+id, 'detail');
row.className = 'row_c';
if (cur_s) cur_s.className = 'row';
cur_s = row;
}
-->
</script>
</head>
<body>
<div class=content>
<div class=cols>
<h1><b>ALBUMS / ARTISTS</b></h1>
<div class=data>
<?
if (!$_GET) {
$x = 1;
$r = mysql_query("SELECT a.*, COUNT(s.id) AS songs FROM albums a LEFT JOIN songs s ON ( a.id = s.album_id ) GROUP BY a.id ORDER BY a.title");
while ($d = mysql_fetch_object($r)) {
?>
<div onclick="songs(<?= $d->id; ?>, this);" onmouseover="mo(this, 'row_o')" onmouseout="mo(this, 'row')" class=row>
<span class=title><?= $d->title; ?></span> <span class=gray>(<?= $d->songs; ?>)</span>
<br><b>»</b> <a href="javascript:artist('<?= urlencode($d->artist_name); ?>');"><?= $d->artist_name; ?></a>
</div>
<?
}
}
?>
</div>
</div>
<div class=cols>
<h1><b>SONGS</b></h1>
<div class=data id="songs">
</div>
</div>
<div class=cols>
<h1><b>SONG DATA</b></h1>
<div class=data id="detail">
</div>
</div>
<div class=hype>Pretty neat huh? Wanna see the source code? <a href="sourcer.php"><u>Click here</u></a>. Also check out my <a href="/joe"><u>resume</u></a>!</div>
</div>
</body>
<html>