PHP & HTML - align gamba dari DB secara 3xn

Kali ni ak nk share je la satu lg bende baru ak dpt...(biase la org blaja bnde baru bg ak, tp maybe bnde ni korg dh dpt lame) iaitu macam mane nak align kn data dlam dlm bentuk 3xn (n = infinite number) mcm kt bwah ni...

Ape yg digunakan kt sini adalah :-

1. Database dan content
   
2. file view.php dgn config.php
   
3. folder image
   
4. gambar2 diperlukan (masukkan ke dlm folder image)
   

Database :-

• first buat table 'car' dan entiti nye "car_id, car_name, car_desc, car_img"..kemudian msukkan la ape2 yg ptut kt dlm tu ye..(name bleh ditukar kpd ape sj name korg nak tp kne la tau kt ne nk ubah nanti)
  

Gambar2 diperlukan :-

• carila gambar2 yg korg nk display kt gallery ni..kcikkan saiz kpd (148px × 129px) atau x pn ikut saiz yg korg nak lah...

File view.php :-

• kt file view.php ni la yg korg akn msukkan sume coding perlu utk display gallery korg dlm bentuk 3xn...
• first thing lps korg dh bkak dreamweaver ( atau editor laen ) is buat html
• code html ->

  <meta equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Untitled Document</title>
  
  <style type="text/css"><br /><!-- a { font-family: "Comic Sans MS", cursive; font-style: normal; font-weight: normal; text-transform: capitalize; color: #000; text-decoration: none; } a:hover { color:#F00; font-weight:bold; text-decoration:none; font-family: "Comic Sans MS", cursive; font-style: normal; line-height: normal; text-transform: uppercase; } a:visited { color: #000; } a:active { color: #000; } h1 { color: #000; } --><br /></style>
  
  
  
  <table align="center" border="0" width="70%">
  <tbody><tr>
  <td align="center" height="38"><table style="border: medium dashed ; color: rgb(204, 204, 204);" border="0" width="100%">
  <tbody><tr>
  <td align="center" height="124"><h1>HEADER</h1></td>
  </tr>
  </tbody></table></td>
  </tr>
  <tr>
  <td height="21"><table style="border: medium dashed ; color: rgb(204, 204, 204);" border="0" width="100%">
  <tbody><tr>
  <td height="25"><a href="http://www.blogger.com/view.php">gallery &gt;</a></td>
  </tr>
  </tbody></table></td>
  </tr>
  <tr>
  <td height="221"><table style="border: medium dashed ; color: rgb(204, 204, 204);" border="0" width="100%">
  <tbody><tr>
  <td height="240" valign="top">
  <div style="border: 0px solid rgb(204, 204, 204); overflow: hidden; width: 95%; height: auto; margin-bottom: 20px; padding-left: 18px; z-index: inherit;">
  
  <div style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; width: 250px; margin-bottom: 20px; float: left;">
  <center> </center>
  
  <center>
  <a href="http://www.blogger.com/showroom.php?car=1"><img src="http://www.blogger.com/image/3-0325.gif" height="105" width="141" /></a>
  </center>
  
  
  
  
  
  <center>
  
  
  
  <center>
  <a href="http://www.blogger.com/%27book_2.php?car=" 1=""><img src="http://www.blogger.com/%27image/book_car_button.png%27" border="'0'" height="'22'" width="'89'" /></a>
  
  </center>
  </center>
  </div>
  </div>
  </td>
  </tr>
  </tbody></table></td>
  </tr>
  </tbody></table>
  

• save sbg view.php
• Then, masa utk coding php.
• create satu file name config.php
• bukak dan paste code bwh ni ->

• pastu, kt dlm view.php, bwah first line paste code bwah ni ->
  
  
• skang kite nak buat sql utk display data dlm table "car".
• bawah php code kt ats, copy sql ni ->
  

• save first, pastu try kt browser gune local web (kt sni gune easyphp atau seangkatan dengannye )
• klu xde error, maka blh proceed next step.
• skang utk loop data dari database utk jadikan nye 3xn
• search code kt bawah ni ->
  
  

  <div style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; width: 250px; margin-bottom: 20px; float: left;">
  <center> </center>
  
  <center>
  <a href="http://www.blogger.com/showroom.php?car=1"><img src="http://www.blogger.com/image/3-0325.gif" height="105" width="141" /></a>
  </center>
  
  
  
  
  
  <center> <center>
  <a href="http://www.blogger.com/%27book_2.php?car=" 1=""><img src="http://www.blogger.com/%27image/book_car_button.png%27" border="'0'" height="'22'" width="'89'" /></a>
  </center> </center> </div>



• Then, replace dgn code kt bwh ni ->

  <? do { ?>
  <div style="font-family:Arial, Helvetica, sans-serif; font-size:12px; width:250px; margin-bottom:20px; float:left;">
  <center> </center><br />
  <center>
  <a href="showroom.php?car=<? echo $q['car_id']; ?>"><img src="image/<? echo $q['car_img_book']; ?>" width="148" height="129"></a>
  </center>
  <br />
  <br />
  <center><center>
  <a href='book_2.php?car=<? echo $q['car_id']; ?>'><img src='image/book_car_button.png' width='89' height='22' border='0'></a>
  </center> </center> </div>
  <? } while ($q = mysql_fetch_assoc($car)); ?>

  
  
• Kemudian, save and preview them.
• Thats it...please comment..i need ur opinion on this one..:D