Little things Bout Coppermine Gallery

By On October 4, 2008 · Leave a Comment · In PHP

Coppermine gallery adalah salah satu software Open Source berbasiskan PHP dan membutuhkan GDLib atau Image Magic(komersil) sebagai penggerak dan pengolah image utamanya.

Kelebihan dari Coppermine Gallery ini yang sangat gw suka adalah pertama-tama dia bisa menjadi single  user ataupun Multi user. Kedua adalah dia bisa menambah file dalam jumlah banyak sekaligus dengan mengupload filenya melalui FTP, setelah itu akan terbaca otomatis dan sesegera itu juga dia mengcreate image thumbnail dan langsung dapat menaruhnya ke dalam album-album. Ketiga adalah jangkauannya yang cukup luas, yang belum sempat gw sentuh sama sekali.

Berbeda dengan WordPress yang sudah tahunan gw obrak abrik, jadi paling enggak gw lebih ngerti tentang WP dibandingkan Coppermine ini. Coppermine jarang sekali gw pakai apalagi gw obrak-abrik. gw pakai Coppermine ini hanya paling kalau ada event, review, etc. tetapi tetap ada dalam webhost gw.

Setelah beberapa lama(sekitar 2 tahun ini) gw pakai nie gallery, muncul keinginan untuk menyatukannya dengan WordPress yang menjadi penggerak situs utama. Sialnya dari setahun yang lalu, integrasi plugin untuk WP semuanya NIHIL banyak yang sitesnya tutup atau juga sudah tidak support dengan seri WP terbaru.

Well tidak bisa disalahkan kebanyakan integrasi plugin kini menawarkan integrasi untuk gallery anak sites Yahoo, Flickr(cari saja sendiri kamu bakal nemuin seabreg plugin yang bisa kamu pilih sesuka hati untuk mengintegrasikan ke WordPress, Jomla, etc).

Akhirnya setelah kemarin membuat sedikit utak utik untuk memberikan/menampilkan latest images dari Coppermine, pagi hari ini gw mencoba membuat listing gallery dari coppermine yang bisa diintegrasikan dengan situs lain, tidak hanya dengan WordPress.

Sekali lagi, gw cuman pemula dalam PHP, ga terlalu jago, so ini hanyalah gambaran saja :D

Struktur Table

Coppermine seperti halnya aplikasi yang melibatkan database lainnya, menggunakan hubungan database sebagai foreign key etc.Berikut ini adalah gambaran Coppermine Gallery Database pada versi 1.4.10 Stable:

table [pre]_pictures
Menyimpan keterangan tentang semua gambar, baik id, album id(aid), path ke file, nama file, ukuran, sampai tanggal penginputan.
Disini yang akan terhubung ke tabel lain adalah kolom ‘album id‘ yang bernama ‘aid’

table [pre]_albums
Pada tabel ini seperti yang sudah ada di tabel pictures, aid pada tabel pictures mengacu pada aid pada tabel ini. Selain itu yang perlu diperhatikan field “category” dan juga “thumb”.
Field category mengacu categori id(cid) pada table categories, sedangkan field thumb adalah identifier bahwa album tersebut memiliki thumbnail album. Apabila valuenya memiliki nilai ’0′(nol) maka default yang digunakan adalah gambar terakhir diupload untuk album tersebut.

table [pre]_categories
Tidak banyak yang bisa dibicarakan dalam table ini.

URL & Parameter

Parameter/URl yang dikirim untuk menuju ke beberapa tempat dalam coppermine gallery ini adalah:

  1. Untuk melihat isi category:
    http://[url to Coppermine]/index.php?cat=[catgeory id]
  2. Untuk melihat isi Album(dengan thumbnail banyak):
    http://[url to Coppermine]/thumbnails.php?album=[Album id]
  3. Untuk melihat thumbnail besar sebuah file/images:
    http://[url to Coppermine]/displayimage.php?album=random&cat=0&pos=-[pic id]
    atau
    http://[url to Coppermine]/displayimage.php?pos=-[pic id]

Perlu diperhatikan untuk nomer 3(thumbnail besar), parameter yang terkirim harus menggunakan tanda negatif.

The Program

Pertama kita harus comot dulu config dari coppermine:

<?php
$pathto = "../../gallery/"; //Path to Coppermine
require_once "../../gallery/include/config.inc.php";            // Path to Coppermine Config DB


mysql_connect($CONFIG['dbserver'],$CONFIG['dbuser'],$CONFIG['dbpass'])or die(msyql_error());
mysql_select_db($CONFIG['dbname']);

?>

Di atas adalah contoh configurasi koneksi karena untuk pengintegrasiannya gw memilih menggunakan tag iframe nantinya, sehingga path ke file harus di deklarasikan berbeda/tidak bisa disamakan dengan yang terdapat di config filenya.

Contoh diatas beranggapan bahwa coppermine dan program ini ada di 2 folder berbeda yang masih terdapat dalam satu root directory.

Save file diatas dengan nama “config.php“

Untuk membuat album List, gw membuat sedemikian rupa agar mirip dengan layout aslinya(gw menggunakan theme ‘Igames’.

<?php
require_once("config.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #2a2a2a;
    background-image: url();
    background-repeat: repeat-x;
    color: #C6B78E;
}
.text {
    font-size: 11px;
}
.status {
    font-size: 10px;
}
.catlink, .alink {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: FFFFCC;
    font-weight: bold;
}
a:link {
    color: #FFFFCC;
}
a:visited {
    color: #FFFFCC;
}
a:hover {
    color: #E6E6E6;
}
a:active {
    color: #E6E6E6;
}
-->
</style>

<script language="javascript">
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
</script>

</head>

<body>
<div id="datacontainer" style="position:absolute;left:1px;top:10px;width:100%" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache">


<p>
  <?php


function printimage($id,$config,$pathto,$aid)
{
   
    $q  = "SELECT pid,filepath,filename FROM ".$config."pictures WHERE ";
    if($id==0)
    {
        $q .= " aid='$aid' ORDER BY pid DESC";
    }
    else
    {
        $q .= " pid='$id'";
    }
   
    $q  = mysql_query($q)or die(mysql_error());
    $r  = mysql_fetch_array($q);
   
   
   
   
    ?>
  <a href="<?php echo $pathto."thumbnails.php?album=$aid"; ?>" target="_blank" /><img src="<?php echo $pathto . "albums/" . $r[1]."thumb_".$r[2] ?>" alt="<?php echo "$title" ?>" border="0" /></a>
    <?php
}


function status($aid,$config,$pathto)
{

    $q  = "SELECT COUNT(*) FROM ".$config."pictures WHERE aid='$aid'";
    $q  = mysql_query($q)or die(mysql_error());
    $r  = mysql_fetch_row($q);
   
   
   
    $q1 = "SELECT DATE_FORMAT(mtime, '%d %M %Y') FROM ".$config."pictures WHERE aid='$aid' ORDER BY mtime DESC";
    $q1 = mysql_query($q1)or die(mysql_error());
    $r1 = mysql_fetch_array($q1);

    echo "<p class=\"status\">$r[0] file, terakhir ditambah pada $r1[0]</p>";


}


?>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


<?php
$q  = mysql_query("SELECT cid,name,description FROM ".$CONFIG['TABLE_PREFIX']."categories WHERE parent='0' AND cid!='1'")or die(mysql_error());
while($r    = mysql_fetch_array($q))
{
?>

<table width="370" border="0" cellpadding="5" cellspacing="0">
  <tr>
    <td width="380"><div class="catlink"><a href="<?php echo $pathto."index.php?cat=$r[0]"; ?>" /><?php echo "$r[1]" ?></a></div>
    <div align="justify" class="text"><?php echo "$r[2]";?></div></td>
  </tr>
  <tr>
    <td>
   
   
   
   
    <table width="100%" border="1" cellpadding="5" cellspacing="0" bordercolor="#333333">



        <?php
            $q1 = mysql_query("SELECT aid,title,description,thumb FROM ".$CONFIG['TABLE_PREFIX']."albums WHERE category='$r[0]' ORDER BY aid ASC")or die(mysql_error());
            while($r1   = mysql_fetch_array($q1))
            {  
               
               
        ?>
      <tr>
        <td width="100" height="100"><?php printimage($r1[3],$CONFIG['TABLE_PREFIX'],$pathto,$r1[0]) ?></td>
        <td valign="top"><div class="alink"><a href="<?php echo $pathto."thumbnails.php?album=$r1[0]"; ?>"><?php echo "$r1[1]"; ?></a></div>
          <div class="text" align="justify"><?php echo "$r1[2]"; ?></div>
          <?php status($r1[0],$CONFIG['TABLE_PREFIX'],$pathto); ?>
          </td>
      </tr>
      <?php
            }
      ?>
     
     
    </table>
   
   
   
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<?php  
}?>
</p>
<p>&nbsp;</p>


</div>




<script type="text/javascript">

/***********************************************
* IFRAME Scroller script- c Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Specify speed of scroll. Larger=faster (ie: 5)
var scrollspeed=cache=2

//Specify intial delay before scroller starts scrolling (in miliseconds):
var initialdelay=500

function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}

function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}

function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}

if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller


</script>


</body>
</html>

Di atas adalah sebuah contoh untuk menampilkan daftar list dari category dan juga album-album yang ada. Simpanlah dengan nama “albumlist.php” atau dengan nama lain sesuka hati.

Next, untuk menampilkan gambar-gambar terakhir di upload gw menggunakan file yang berisi sbb:

<?php
require_once("config.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #2a2a2a;
    background-image: url();
    background-repeat: repeat-x;
}
-->
</style></head>

<body>
<p>
  <?php


function printimage($id,$config,$pathto)
{
   
    $q  = mysql_query("SELECT pid,filepath,filename,title FROM ".$config."pictures WHERE pid='$id'")or die(mysql_error());
    $r  = mysql_fetch_array($q);
   
   
    if($r[3]=="")
    {
        $title = "$r[2]";
    }
   
    ?>
  <a href="<?php echo $pathto."displayimage.php?album=random&cat=0&pos=-1"; ?>" target="_blank" title="<?php echo "$title"; ?>" /><img src="<?php echo $pathto . "albums/" . $r[1]."thumb_".$r[2] ?>" alt="<?php echo "$title" ?>" border="0" /></a>
    <?php
}



function randomid($config,$max,$pathto)
{
   
    $q  = mysql_query("SELECT pid FROM ".$config."pictures WHERE approved='YES' ORDER BY pid DESC LIMIT 0,6")or die(mysql_error());
    $count=0;
    while($r    = mysql_fetch_array($q))
    {
        $id[$count]=$r[0];
        $count = $count+1;
    }
    ?>


<table width="351" border="0" cellpadding="5">
  <tr>
    <td width="105" height="125" align="center" valign="top"><?php printimage($id[0],$config,$pathto) ?></td>
    <td width="104" height="125" align="center" valign="top"><?php printimage($id[1],$config,$pathto) ?></td>
    <td width="104" height="125" align="center" valign="top"><?php printimage($id[2],$config,$pathto) ?></td>
  </tr>
          <tr>
            <td width="105" height="125" align="center" valign="top"><?php printimage($id[3],$config,$pathto) ?></td>
            <td align="center" valign="top"><?php echo printimage($id[4],$config,$pathto) ?></td>
            <td align="center" valign="top"><?php echo printimage($id[5],$config,$pathto) ?></td>
  </tr>
</table>
   
   
   
    <?php  
}


    $q  = "SELECT COUNT(*) FROM ".$CONFIG['TABLE_PREFIX']."pictures WHERE approved='YES'";
    $q  = mysql_query($q)or die(mysql_error());
    $r  = mysql_fetch_row($q);

    $totalpics  = $r[0];


    randomid($CONFIG['TABLE_PREFIX'],$totalpics,$pathto);


?>
</p>
<p>&nbsp;</p>
</body>
</html>

Sorry nama-nama fungsinya masih mess dengan file lain(untuk ranbdom image yang masih belom sempurna :D ).

Oke setelah file tersebut diketikan, tinggal save dengan nama file sesuka hati saja.

Untuk menampilkannya bagaimana? simple tambahkan saja tag html iframe sebagai contoh:

<iframe src="[path to file]/albumlist.php" align="middle" frameborder="0" scrolling="no" width="400" height="270"></iframe>

Beres :D

Untuk yang menampilkan list category dan album gw menambahkan sedikit javascript agar membuat file melakukan scrolling secara otomatis.

Popularity: 9% [?]

 
Share it with your friens
Facebook Twitter Delicious Digg

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>