DerisTechnologi

tutorial pemograman ala programmer newbie

Pengunjungku /TERIMA IKLAN

Home » IT » pemograman » WEB PROGRAMMING » menampilkan gambar dari database untu website

menampilkan gambar dari database untu website

Posted by at
ADSENSE HERE!
baca-baca walking-2 di internet gini nih gan caranya
ane copasin aja yak lgi males ketik2 nya

Disini kita akan mengembangkan fungsi upload sehingga informasi gambar yang di-unggah akan disimpan di database MySQL, pembuatan galeri foto merupakan contoh yang akan kita gunakan dalam penerapannya.
Untuk memudahkan pemahaman dan pembelajaran terhadap upload dan database saya mengesampingkan beberapa faktor keamanan seperti validasi dan pengecekan extensi dari file.

Yang pertama kali harus dibuat adalah database dari gambar, buka phpmyadmin (biasanya ada di http://localhost/phpmyadmin) lalu buat database dengan nama galeri dan tekan tombol Create.
create database galeri
Create database galeri
Dan database galeri pun tercipta namun masih belum memiliki tabel, masukan gambar pada kolom name dan 3 pada kolom number of fields, kita akan membuat tabel gambar dengan 3 field yang masing-masing field-nya akan menampung informasi yang berbeda. Jangan lupa tekan tombol Go jika sudah selesai.
Create table gambar
Buat tabel gambar
Pada halaman berikutnya kita harus mengisi definisi data dari ketiga field yang ingin kita buat, isi seperti gambar dibawah:

Jika sudah jangan lupa tekan save.
  • Field: nama field-nya
  • Type: tipe data yang akan kita simpan
  • Length/Values: panjang data, tidak semuanya harus diisi
  • Null: jika di-cek berarti field tersebut nantinya boleh kosong/tidak diisi
  • Index: peran dari field
  • AUTO_INCREMENT: nilai dari field akan otomatis  diisi dan nilainya selalu ditambah 1 dari record sebelumnya
struktur tabel gambar
Struktur tabel gambar
Bagian database beres, tabel gambar dengan struktur datanya telah tercipta, sekarang kita bisa fokus ke PHP.
Pada folder htdocs buat folder galeri dan didalamnya buat lagi folder gambar, lihat gambar.
Folder galeri
isi folder galeri
folder galeri
Susunan file dan folder
Lalu buat file config.php untuk menyimpan semua variabel penting
1
2
3
4
5
6
7
8
<?php
$server = 'localhost'; //server MySQL
$user = 'root'; //username MySQL
$password = ''; //Password MySQL
$db = 'galeri'; //nama database
$dir_gambar = 'C:\xampp\htdocs\galeri\gambar\\'; //direktori dalam server
$url_folder_gambar = 'http://localhost/galeri/gambar/';  //URL dari direktori jika diakses lewat browser
?>
Perhatikan variebel $dir_gambar pastikan folder tersebut sudah anda buat terlebih dahulu, jika tidak hal ini akan memicu error.
6
$dir_gambar = 'C:\xampp\htdocs\galeri\gambar\\'; //direktori dalam server
Selanjutnya buat file db.php yang manyimpan fungsi koneksi ke database MySQL
1
2
3
4
5
6
7
8
9
10
11
<?php
include_once('config.php'); //sertakan semua kode yang ada di config.php
 
if( !mysql_connect($server, $user, $password) ) {
    die(mysql_error());
} else {
    if( !mysql_select_db($db) ){
        die(mysql_error());
    }
}
?>
buat index.php sebagai landing page, halaman ini yang akan pertama kali diakses ketika direktori galeri diakses lewat web.
galeri.php untuk menampilkan daftar gambar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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>Galeri</title>
</head>
 
<body>
<p>
<a href="index.php">depan</a> | <a href="galeri.php">galeri</a>
</p>
<?php
include('db.php');
if( !empty($_REQUEST['j']) ){
    $msg = '<div style="background:#F6F3C0;text-align:center;color:#999;">';
    $msg .= 'Gambar baru telah ditambahkan | <strong>' . $_REQUEST['j'];
    $msg .= '</strong></div>';
    echo $msg;
}
$query = "SELECT * FROM gambar";
$query = mysql_query( $query );
if(!$query){
    die( mysql_error() );
}
while( $rows = mysql_fetch_row($query) ){
    ?>
    <p>
    <img src="<?php echo $url_folder_gambar . $rows[2];?>" width="100" />
    </p>
    <?php
    echo $rows[1];
    ?>
    <hr />
<?php
}
?>
</body>
</html>
Dan yang terakhir adalah upload.php sebagai file php yang bertanggung jawab terhadap proses upload
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
if( isset($_REQUEST['submit']) ){
 
    include('db.php');
 
    $title = $_REQUEST['judul'] ? htmlspecialchars($_REQUEST['judul']) : 'blun ada judul'; //ternary operator
 
    $filename = basename($_FILES['userfile']['name']);
    $uploadfile = $dir_gambar . $filename;
 
    if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
        $query = "INSERT INTO gambar VALUES('', '$title', '$filename')";
        $query = mysql_query($query);
        if(!$query){
            die( mysql_error() );
        }
        header('Location: galeri.php?j=' . $title);
        exit();
    } else {
        echo "Kemungkinan hacking!\n";
    }
}else{
    echo "Anda kesasaar? kembali ke <a href='index.php'>jalan yang benar</a>";
}
?>
Pada kode tersebut saya menggunakan operator logika yang disebut ternary untuk mendapatkan nilai TRUE dan FALSE, coba perhatikan kode:
6
$title = $_REQUEST['judul'] ? htmlspecialchars($_REQUEST['judul']) : 'blun ada judul'; //ternary operator
Pola dari ternary adalah statement ? BLOK TRUE : BLOK FALSE; jika statement bernilai TRUE maka BLOK TRUE yang akan dieksekusi sebaliknya jika FALSE maka BLOK FALSE yang akan dieksekusi. Jika memungkinkan saya selalu menggunakan ternary, karena kodenya lebih pendek x ? y : z ;-)
galeri sederhana dengan php
Galeri sederhana dengan PHP
Selamat mencoba.




Caranya sangat mudah, sama seperti layaknya kita membuat laporan dengan php. Ini saya kembangkan dari kode membuat laporan pada artikel cara membuat laporan sederhana dengan php, mari kita lihat berikut :
Kode dibawah bisa anda simpan dengan nama galleri.php
<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<table width="400" align="center" border="1">';  
   echo '<tr>';  
   echo '<th>Judul Gambar</th>';  
   echo '<th>Gambar</th>';  
   echo '</tr>';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<tr>';     
     echo '<td>'.$rec->judul_gambar.'</td>';     
     echo '<td>';
     //ini bagian memanggil file gambar
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</td>';     
     echo '</tr>';  
   }  
   echo '</table>';  
   mysql_close();//tutup koneksi database  
?>
Untuk koneksi database, anda bisa baca artikel saya tentang membuat koneksi database mysql dengan php.
Dengan sedikit perubahan kode dari model laporan yang hanya menampilkan tulisan, sekarang diubah menjadi menampilkan gambar. Format menampilkan gambar bisa bervariasi tergantung keperluan, contoh diatas menggunakan tabel html biasa. Kalo sudah faham cara kerjanya untuk kode diatas, sekarang saya kembangkan dengan memadukan model lebih modern yaitu pakai css. Anda bisa simpan dengan nama file berbeda misal galleri-baru.php.
<style type="text-css">
   #gallery { witdh:500px; margin: 0 auto; }
   #gallery .kotak { float:left; width:240px; text-align:center; }
   #gallery .judul { padding:5px;font-size:15px; }
   #gallery img { border:5px solid #fff; width:230px;}

</style>

<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<div id="gallery">';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<div class="kotak">';     
     echo '<p class="judul">'.$rec->judul_gambar.'</p>';     
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</div>';  
   }  
   echo '</div>';  
   mysql_close();//tutup koneksi database  
?>
Cara kerja sama, hanya cara menuliskan hasil berbeda. Kode model kedua ini lebih sederhana dan jauh lebih optimal. Silahkan mencoba.
- See more at: http://www.zainalhakim.web.id/posting/cara-menampilkan-gambar-dari-database-mysql-dengan-php.html#sthash.sKyYXRqn.dpuf
Caranya sangat mudah, sama seperti layaknya kita membuat laporan dengan php. Ini saya kembangkan dari kode membuat laporan pada artikel cara membuat laporan sederhana dengan php, mari kita lihat berikut :
Kode dibawah bisa anda simpan dengan nama galleri.php
<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<table width="400" align="center" border="1">';  
   echo '<tr>';  
   echo '<th>Judul Gambar</th>';  
   echo '<th>Gambar</th>';  
   echo '</tr>';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<tr>';     
     echo '<td>'.$rec->judul_gambar.'</td>';     
     echo '<td>';
     //ini bagian memanggil file gambar
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</td>';     
     echo '</tr>';  
   }  
   echo '</table>';  
   mysql_close();//tutup koneksi database  
?>
Untuk koneksi database, anda bisa baca artikel saya tentang membuat koneksi database mysql dengan php.
Dengan sedikit perubahan kode dari model laporan yang hanya menampilkan tulisan, sekarang diubah menjadi menampilkan gambar. Format menampilkan gambar bisa bervariasi tergantung keperluan, contoh diatas menggunakan tabel html biasa. Kalo sudah faham cara kerjanya untuk kode diatas, sekarang saya kembangkan dengan memadukan model lebih modern yaitu pakai css. Anda bisa simpan dengan nama file berbeda misal galleri-baru.php.
<style type="text-css">
   #gallery { witdh:500px; margin: 0 auto; }
   #gallery .kotak { float:left; width:240px; text-align:center; }
   #gallery .judul { padding:5px;font-size:15px; }
   #gallery img { border:5px solid #fff; width:230px;}

</style>

<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<div id="gallery">';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<div class="kotak">';     
     echo '<p class="judul">'.$rec->judul_gambar.'</p>';     
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</div>';  
   }  
   echo '</div>';  
   mysql_close();//tutup koneksi database  
?>
Cara kerja sama, hanya cara menuliskan hasil berbeda. Kode model kedua ini lebih sederhana dan jauh lebih optimal. Silahkan mencoba.
- See more at: http://www.zainalhakim.web.id/posting/cara-menampilkan-gambar-dari-database-mysql-dengan-php.html#sthash.sKyYXRqn.dpuf
Saya sebelumnya sudah tulis artikel bagaimana Cara upload gambar dengan php dan menyimpan kedalam database mysql, kali ini akan saya lanjutkan bagaimana cara menampilkan gambar dari database mysql dengan php. Cara yang saya gunakan cukup sederhana, saya kembangkan dari kode membuat laporan dengan php biasa. Saya yakin anda akan mudah memahami dan dapat mengembangkannya sesuai keperluan. Hasilnya mungkin akan mendekati cara membuat galleri photo dengan php. Silahkan simak artikel berikut. - See more at: http://www.zainalhakim.web.id/posting/cara-menampilkan-gambar-dari-database-mysql-dengan-php.html#sthash.sKyYXRqn.dpuf
Caranya sangat mudah, sama seperti layaknya kita membuat laporan dengan php. Ini saya kembangkan dari kode membuat laporan pada artikel cara membuat laporan sederhana dengan php, mari kita lihat berikut :
Kode dibawah bisa anda simpan dengan nama galleri.php
<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<table width="400" align="center" border="1">';  
   echo '<tr>';  
   echo '<th>Judul Gambar</th>';  
   echo '<th>Gambar</th>';  
   echo '</tr>';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<tr>';     
     echo '<td>'.$rec->judul_gambar.'</td>';     
     echo '<td>';
     //ini bagian memanggil file gambar
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</td>';     
     echo '</tr>';  
   }  
   echo '</table>';  
   mysql_close();//tutup koneksi database  
?>
Untuk koneksi database, anda bisa baca artikel saya tentang membuat koneksi database mysql dengan php.
Dengan sedikit perubahan kode dari model laporan yang hanya menampilkan tulisan, sekarang diubah menjadi menampilkan gambar. Format menampilkan gambar bisa bervariasi tergantung keperluan, contoh diatas menggunakan tabel html biasa. Kalo sudah faham cara kerjanya untuk kode diatas, sekarang saya kembangkan dengan memadukan model lebih modern yaitu pakai css. Anda bisa simpan dengan nama file berbeda misal galleri-baru.php.
<style type="text-css">
   #gallery { witdh:500px; margin: 0 auto; }
   #gallery .kotak { float:left; width:240px; text-align:center; }
   #gallery .judul { padding:5px;font-size:15px; }
   #gallery img { border:5px solid #fff; width:230px;}

</style>

<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<div id="gallery">';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<div class="kotak">';     
     echo '<p class="judul">'.$rec->judul_gambar.'</p>';     
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</div>';  
   }  
   echo '</div>';  
   mysql_close();//tutup koneksi database  
?>
Cara kerja sama, hanya cara menuliskan hasil berbeda. Kode model kedua ini lebih sederhana dan jauh lebih optimal. Silahkan mencoba.
- See more at: http://www.zainalhakim.web.id/posting/cara-menampilkan-gambar-dari-database-mysql-dengan-php.html#sthash.sKyYXRqn.dpuf
Caranya sangat mudah, sama seperti layaknya kita membuat laporan dengan php. Ini saya kembangkan dari kode membuat laporan pada artikel cara membuat laporan sederhana dengan php, mari kita lihat berikut :
Kode dibawah bisa anda simpan dengan nama galleri.php
<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<table width="400" align="center" border="1">';  
   echo '<tr>';  
   echo '<th>Judul Gambar</th>';  
   echo '<th>Gambar</th>';  
   echo '</tr>';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<tr>';     
     echo '<td>'.$rec->judul_gambar.'</td>';     
     echo '<td>';
     //ini bagian memanggil file gambar
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</td>';     
     echo '</tr>';  
   }  
   echo '</table>';  
   mysql_close();//tutup koneksi database  
?>
Untuk koneksi database, anda bisa baca artikel saya tentang membuat koneksi database mysql dengan php.
Dengan sedikit perubahan kode dari model laporan yang hanya menampilkan tulisan, sekarang diubah menjadi menampilkan gambar. Format menampilkan gambar bisa bervariasi tergantung keperluan, contoh diatas menggunakan tabel html biasa. Kalo sudah faham cara kerjanya untuk kode diatas, sekarang saya kembangkan dengan memadukan model lebih modern yaitu pakai css. Anda bisa simpan dengan nama file berbeda misal galleri-baru.php.
<style type="text-css">
   #gallery { witdh:500px; margin: 0 auto; }
   #gallery .kotak { float:left; width:240px; text-align:center; }
   #gallery .judul { padding:5px;font-size:15px; }
   #gallery img { border:5px solid #fff; width:230px;}

</style>

<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<div id="gallery">';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<div class="kotak">';     
     echo '<p class="judul">'.$rec->judul_gambar.'</p>';     
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</div>';  
   }  
   echo '</div>';  
   mysql_close();//tutup koneksi database  
?>
Cara kerja sama, hanya cara menuliskan hasil berbeda. Kode model kedua ini lebih sederhana dan jauh lebih optimal. Silahkan mencoba.
- See more at: http://www.zainalhakim.web.id/posting/cara-menampilkan-gambar-dari-database-mysql-dengan-php.html#sthash.sKyYXRqn.dpuf
Caranya sangat mudah, sama seperti layaknya kita membuat laporan dengan php. Ini saya kembangkan dari kode membuat laporan pada artikel cara membuat laporan sederhana dengan php, mari kita lihat berikut :
Kode dibawah bisa anda simpan dengan nama galleri.php
<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<table width="400" align="center" border="1">';  
   echo '<tr>';  
   echo '<th>Judul Gambar</th>';  
   echo '<th>Gambar</th>';  
   echo '</tr>';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<tr>';     
     echo '<td>'.$rec->judul_gambar.'</td>';     
     echo '<td>';
     //ini bagian memanggil file gambar
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</td>';     
     echo '</tr>';  
   }  
   echo '</table>';  
   mysql_close();//tutup koneksi database  
?>
Untuk koneksi database, anda bisa baca artikel saya tentang membuat koneksi database mysql dengan php.
Dengan sedikit perubahan kode dari model laporan yang hanya menampilkan tulisan, sekarang diubah menjadi menampilkan gambar. Format menampilkan gambar bisa bervariasi tergantung keperluan, contoh diatas menggunakan tabel html biasa. Kalo sudah faham cara kerjanya untuk kode diatas, sekarang saya kembangkan dengan memadukan model lebih modern yaitu pakai css. Anda bisa simpan dengan nama file berbeda misal galleri-baru.php.
<style type="text-css">
   #gallery { witdh:500px; margin: 0 auto; }
   #gallery .kotak { float:left; width:240px; text-align:center; }
   #gallery .judul { padding:5px;font-size:15px; }
   #gallery img { border:5px solid #fff; width:230px;}

</style>

<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<div id="gallery">';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<div class="kotak">';     
     echo '<p class="judul">'.$rec->judul_gambar.'</p>';     
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</div>';  
   }  
   echo '</div>';  
   mysql_close();//tutup koneksi database  
?>
Cara kerja sama, hanya cara menuliskan hasil berbeda. Kode model kedua ini lebih sederhana dan jauh lebih optimal. Silahkan mencoba.
- See more at: http://www.zainalhakim.web.id/posting/cara-menampilkan-gambar-dari-database-mysql-dengan-php.html#sthash.sKyYXRqn.dpuf
ADSENSE HERE!
Labels: , ,

1 comment:

Unknown said...

Nice Info Cap...

mampir juga ya http://tipsmudahmendapatkanfreedollar.blogspot.co.id/

7 September 2016 at 16:41

Post a Comment

Subscribe to: Post Comments (Atom)Template Responsive Design
Copyright © DerisTechnologi. All rights reserved. Template by CB