Minggu, 24 Februari 2013

Membuat Pagging Tabel PHP, MySql

terkadang kita dibuat pusing dengan data yang ada di MySql yang banyak dan panjang, bagaimana ya cara meringkasnya pada saat menampilkan pada web??? nah salah satu solusinya dengan Pagging tabel.Ok mari kita ikuti tutorialnya.... cekidot....

1. Pertama kita buat dulu Database mahasiswa buat nampilin tabelnya (buat yang blum ada databasenya... heheh). Terus buat deh tabelnya...

CREATE TABLE IF NOT EXISTS `tb_mhs` (
  `nim` char(10) NOT NULL default '',
  `nama` char(30) default NULL,
  PRIMARY KEY  (`nim`)
)


Kemudian isi data mahasiswa (yang banyak yah....biar bisa diliat hasil paggingnya)

2. Kita buat index.php untuk menampilkan datanya:
<!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>Membagi halaman laporan dengan php</title>
<style type="text/css">
#navpage a
{
    padding:3px 5px;
    background-color:#EDFFEA;
    border:1px solid #ccc;
    text-decoration:none;
    color:#5B5B5B;
}
#navpage a:hover
{
    background-color:#CEFFC6;
}
</style>
</head>
<body>
<div align="center">
<?php
mysql_connect("localhost","root","") or die("Gagal Konek ke server");
mysql_select_db("db_mhs") or die("Gagal Konek ke database");
$tablename="tb_mhs";
$baselink=$_SERVER['PHP_SELF'];
// jumlah data perhalaman
$rowsPerPage = 10;
//nilai pertama
$pageNum = 1;
if(!empty($_GET['page']))
{
    $pageNum = $_GET['page'];
}
$offset = ($pageNum - 1) * $rowsPerPage;
// query database
$query  = "SELECT * FROM $tablename ORDER by nim asc LIMIT $offset, $rowsPerPage";
$result = mysql_query($query) or die('Error, query failed. ' . mysql_error());
?>
  <h2 class="tengah">DATA MAHASISWA</h2>
  <table width="450" border="0" cellpadding="3" cellspacing="1" bgcolor="#999999">
    <tr bgcolor="#E8FDEC">
      <th width="149">NIS</th>
      <th width="348">NAMA</th>
    </tr>
<?php
while($row = mysql_fetch_array($result))
{
?>
    <tr bgcolor="#fff">
      <td><?php echo $row['nim']?></td>
      <td><?php echo $row['nama']?></td>
    </tr>
<?php
} //end of while;
?>
  </table>
<?php
    $query   = "SELECT COUNT(nim) AS numrows FROM $tablename";
    $result  = mysql_query($query) or die('Error, query failed. ' . mysql_error());
    $row     = mysql_fetch_array($result, MYSQL_ASSOC);
    $numrows = $row['numrows'];
    $maxPage  = ceil($numrows/$rowsPerPage);
    $nextLink = '&nbsp;';
    if($maxPage >1)
    {
        $self     = $_SERVER['PHP_SELF'];
        $nextLink = array();
        for($page = 1; $page <= $maxPage; $page++)
        {
            $nextLink[] =  "<a href=\"".$baselink."?page=$page\">$page</a>";
        }
        $nextLink = "<p>Halaman : </p>" . implode(' ', $nextLink);
    }
    echo '<div id="navpage">'.$nextLink.'</div>';
    mysql_free_result($result);
?>
</div>
</body>
</html>

3. nah selanjutnya tinggal kita panggil deh di localhost.

4. untuk pengaturan berapa jumlah kolom yang akan kita tampilkan bisa kita edit di index.php pada baris:

// jumlah data perhalaman
$rowsPerPage = 10;

Kamis, 14 Februari 2013

Membuat slide gambar gallery MySql sederhana

kali ini saya akan memberikan sedikit tutorial slide gambar dengan gallery yang tersimpan pada MySql yang saya temukan pada waktu googling dan sudah sedikit saya modif agar lebih dimengerti.... let's go....

Langkah-langkah:

1. Buat database dengan nama "coba" di PhpMysql, kemudian buat tabel dengan nama "gallery":

CREATE TABLE IF NOT EXISTS `gallery` (
  `id_gallery` int(3) NOT NULL auto_increment,
  `gambar` varchar(100) NOT NULL,
  `tanggal` date NOT NULL,
  `id_kategori` int(3) NOT NULL,
  `keterangan` text NOT NULL,
  PRIMARY KEY  (`id_gallery`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ;  


2. Buat script pemanggilnya "gallery.php", dab jangan lupa koneksi databasenya "koneksi.php":

 <?php
$host="localhost";
$user="root";
$pass="";
$db="coba";

$koneksi=mysql_connect($host,$user,$pass);
mysql_select_db($db,$koneksi);
?>


<!---buat zoom gambarnya-->
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.bigPicture.js"></script> 
<script type="text/javascript" src="./js/jquer.bigPicture-min.js"></script> 
<script type="text/javascript" src="./js/jquery.bigPicture-pack.js"></script> 
<script type="text/javascript" src="./js/jquery.easing.js"></script>  
<link rel="stylesheet" type="text/css" href="css/core.css"/>
<link rel="stylesheet" type="text/css" href="css/skin.css"/> 


<!--buat slideshow-->
<link href="css/amazon_scroller.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/amazon_scroller.js"></script>
<script language="javascript" type="text/javascript">

    $(function() {
        $("#amazon_scroller1").amazon_scroller({
            scroller_title_show: 'enable',
            scroller_time_interval: '4000',
            scroller_window_background_color: "#F5FFFA",
            scroller_window_padding: '10',
            scroller_border_size: '1',
            scroller_border_color: '#FAEBD7',
            scroller_images_width: '200',
            scroller_images_height: '125',
            scroller_title_size: '12',
            scroller_title_color: 'black',
            scroller_show_count: '3',
            directory: 'images'
        });
        $("#amazon_scroller2").amazon_scroller({
            scroller_title_show: 'disable',
            scroller_time_interval: '3000',
            scroller_window_background_color: "none",
            scroller_window_padding: '10',
            scroller_border_size: '0',
            scroller_border_color: '#CCC',
            scroller_images_width: '100',
            scroller_images_height: '80',
            scroller_title_size: '12',
            scroller_title_color: 'black',
            scroller_show_count: '3',
            directory: 'images'
        });
        $("#amazon_scroller3").amazon_scroller({
            scroller_title_show: 'enable',
            scroller_time_interval: '3000',
            scroller_window_background_color: "none",
            scroller_window_padding: '10',
            scroller_border_size: '2',
            scroller_border_color: '#9C6',
            scroller_images_width: '80',
            scroller_images_height: '60',
            scroller_title_size: '11',
            scroller_title_color: 'black',
            scroller_show_count: '3',
            directory: 'images'
        });
    });
</script>

<html>
<head>
    <title>Slide Gallery</title>
</head>
<body>
<div id="content">
    <p>&nbsp;</p>

    <div id="amazon_scroller1" class="amazon_scroller">
        <div class="amazon_scroller_mask">
       
            <ul>
           
            <?php
            include "./include/koneksi.php";
            $select=mysql_query("select * from gallery");
            while($row=mysql_fetch_array($select)){
                ?><li><a href="./gallery/<?php echo $row['gambar'];?>" title="<?php echo $row['keterangan'];?>" class="info" name="gambar"><img src="./gallery/<?php echo $row['gambar'];?>" width="60" height="60" title="Klik photo"/></a></li><?php           
            }
            ?>
       
            </ul>
           
        </div>
        <ul class="amazon_scroller_nav">
            <li></li>
            <li></li>
        </ul>
        <div style="clear: both"></div>
    </div>
    
    <p><i><font color="#666666" size="2" face="verdana">*Klik gambar untuk memperbesar</font></i></p>
</div>
</body></html>


<script language="javascript"> 
$('a.info').bigPicture({
  'enableInfo': true,
  'infoPosition': 'bottom'
}); 
</script>


3. tutor ini dilengkapi beberapa file pendukung dan bisa didownload disini!



Trims, dan selamat belajar!!!













Rabu, 13 Februari 2013

Membuat tabel warna-warni (ganjil-genap)

Untuk postingan saya yang pertama kali ini saya akan memberikan tutorial untuk membuat tabel dengan bahasa pemrograman PHP dengan database Mysql dengan tampilan berwarna untuk membedakan  data ganjil atau genap... ok, ngak usah basa-basi mari belajar....

1. Buat database dengan nama test  di Phpmysql (tentunya kalian sdh menginstall web server)..
2. Buat tabel mahasiswa, berikut script sqlnya:


    CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `nim` varchar(10) NOT NULL default '',
  `nama_mhs` varchar(30) default NULL,
  `alamat` varchar(30) default NULL,
  PRIMARY KEY  (`nim`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;


3. Buat koneksi ke database dengan "koneksi.php":
    
<?php
mysql_connect("localhost","username database","password database anda") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
?>

4. Selanjutnya buat script utamanya "tabel.php":

<?php

include "koneksi.php";

$genap = "#FAEBD7";
$ganjil="#FFFFFF";
$head="#649ED";

$sql ="select * from mahasiwa";
$h= mysql_query($sql);

echo "<table border='1'>";
echo "<tr bgcolor='".$head."'>
      <td>NIM</td>
      <td>Nama Mahasiswa</td>
      <td>Alamat</td>
      </tr>";
     
$counter=1;

while ($data = mysql_fetch_array($h))
{
//mengecek apakah data ganjil atau genap

if($counter%2==0)$warna = $genap;
else $warna = $ganjil;

echo "<tr bg color='".$warna."'>";
echo "<td>".$data['nim']."</td>";
echo "<td>".$data['nama_mhs']."</td>";
echo "<td>".$data['alamat']."</td>";
echo "</td>";

$counter++; //menambah counter
}
echo "</table>";

?>


5. langkah terakhir tinggal menjalankan di browser anda dengan  http://localhost/blog/tabel.php

Nah, selesai sudah tutorial kita..... selamat belajar.....