Latest Post

Selamat pagi sobat blogger yang berbahagia, setelah kemarin kita membahas materi mengenai cara mengupload gambar dengan preview menggunakan php dan javascript. Maka pada kesempatan kali ini saya akan berbagi informasi mengenai cara menampilkan gambar dalam bentuk grid (seperti pada gallery atau pada web e-commerce ). Sebenarnya artikel ini berkaitan dengan artikel sebelumnya, jika artikel sebelumnya itu membahas cara mengupload image ke database sedangkan artikel ini membahas mengenai cara menampilkan gambar atau image yang sudah tersimpan kedalam database tentunya ditampilkan dalam bentuk grid. Untuk dapat menampilkan gambar dalam bentuk grid sebenarnya sederhana saja, kita bisa menggunakan tabel dengan menentukan jumlah kolom yang akan dibuat, lalu dibuatkan perulangan.
Cara membuat tampilan Grid seperti gallery pada photo menggunakan php dan html

Sebelum menampilkan gambar dalam bentuk grid, kita harus mempunyai database dan tabel untuk untuk mengupload gambar. Untuk langkah-langkah lengkapnya silahkan klik link dibawah ini :


Jika sobat sudah berhasil melakukan langkah-langkah diatas tersebut, langkah selanjutnya adalah inti dari artikel ini yaitu mengatur agar tampilan menjadi tampilan seperti gallery pada e-commerce .  oiya jika sobat mendownload source code yang ada pada artikel  cara mengupload gambar dengan preview menggunakan php dan javascript sobat hanya perlu mengedit script yang ada di “index.php” tanpa tanda kutip, berikut adalah script code untuk halaman index.php : 
<?php
error_reporting(0);
//membuat koneksi ke database
include "koneksi.php";
// jumlah data yang akan ditampilkan per halaman
$dataPerPage = 10;
// apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
// sedangkan apabila belum, nomor halamannya 1.
if(isset($_GET['page']))
{
    $noPage = $_GET['page'];
} 
else $noPage = 1; {
}
// perhitungan offset
$offset = ($noPage - 1) * $dataPerPage;
?>
 
 <html>
 <title> Upload Gambar </title>
 <script language="javascript">
 function tanya() {
 if (confirm ("Apakah Anda yakin akan menghapus data ini ?")) {
 return true;
  } else {
   return false;
  }
  }
</script>
<body width='900px'>
<center> 
<h3> MEMBUAT TAMPILAN GAMBAR GRID</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
<hr>
<br>
<!-- /////////////////////////////tombol untuk menambah data//////////////////////////////////-->
<form action='tambah.php' method='POST'>
<table >
 <tr>
 <center><td> <input type='submit' name='tambah' value='Tambah Gambar'> </td> 
 </tr>
</table>
</form>
<!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// -->
<table  border='0' Width='800'  cellpadding="5" cellspacing="5">  
 <tr height="140" bgcolor="#eee">
<?php  
// Perintah untuk menampilkan data
$queri="Select * From tabel_gambar order by id desc LIMIT $offset, $dataPerPage " ;  //menampikan data dari tabel siswa menggunakan limit (untuk membatasi)
$hasil=MySQL_query ($queri);    //fungsi untuk SQL
// nilai awal variabel untuk no urut
$i = $offset+1;
//menentukan jumlah kolom
$jml_colom=5;
$cnt = 0;
// perintah untuk membaca dan mengambil data dalam bentuk array
while ($data = mysql_fetch_array ($hasil)){
$id = $data['id'];
  if ($cnt >= $jml_colom) 
      {
         echo "</tr><tr height='140' bgcolor='#eee'> ";
         $cnt = 0;
   }

   $cnt++;
 echo "  
   
  <td><center>
  <div>
  <img src='upload/" . $data['gambar']. "' alt='' width='80' height='60' />
  </div>
  <div>
  ".$data['ket']." <br>
  </div>
  </td> ";
  
 
 $i++; 
}
?>
</table>
<br>
<br>
<?php
// mencari jumlah semua data dalam tabel guestbook
$query   = "SELECT COUNT(*) AS jumData FROM tabel_gambar";
$hasil  = mysql_query($query);
$data     = mysql_fetch_array($hasil);
$jumData = $data['jumData'];
// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
$jumPage = ceil($jumData/$dataPerPage);
// menampilkan link previous
if ($noPage > 1) echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&lt;&lt; Prev</a>";
// memunculkan nomor halaman dan linknya
for($page = 1; $page <= $jumPage; $page++)
{
         if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage)) 
         {   
            if (($showPage == 1) && ($page != 2))  echo "..."; 
            if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "...";
            if ($page == $noPage) echo " <b>".$page."</b> ";
            else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
            $showPage = $page; 
         }
}
// menampilkan link next
if ($noPage < $jumPage) echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next &gt;&gt;</a>";
?>


</body>
</html>  

Catatan:

  1. Untuk mmebuat tampilan grid ini kita menggunakan tabel, namun border nya kita buat “0”, sehingga tidak telihat garis tepinya.
  2. Untuk menentukan jumlah kolomnya, kita atur pada script dibaris ke 53 yaitu, $jml_colom=5; angka 5 pada baris tersebut menunjukkan jumlah kolom, silahkan ganti angka 5 tersebut sesuai dengan keinginan sobat.
  3. Pada tutorial ini sudah menggunakan fitur pagging, soba tbisa menentukan julah gambar yang akan ditampilkan pada setiap halaman aktif, disini saya menentukan gambar yang tampil adalah 10 setiap halaman, bisa sobat lihat pada baris ke-6, yaitu “$dataPerPage = 10;” tanpa tanda kutip. Sehingga ketika kita menambahkan gambar maka jumlah halaman akan bertambah menyesuaikan dengan jumlah gambar dengan batas masksimal yang telah kita tentukan.

Oke sobat, begitulah tutorial yang dapat saya berikan pada kesempatan kali ini, bagaimana? Mudah bukan cara membuat tampilan Grid seperti gallery pada photo menggunakan php dan html ini? Sobat dapat mempraktikkannya langsung dengan cara mendownload script codenya disini
Terimkasih sudah menyempatkan waktu untuk berkunjung di blog sederhana, semoga bisa membantu dan memberikan apa yang sobat butuhkan, tetap semangat dan happy coding :)


Selamat malam sobat blogger yang masih setia mengunjungi blog sederhana saya ini, setelah sekian lama tidak menulis artikel kini saya hadir lagi untuk berbagi sedikit pengetahuan dan trik mengenai cara membuat upload gambar dengan preview menggunakan php dan java script. Sebenarnya sudah banyak tutorial di google yang membahas tentang judul ini, namun saya rasa cukup sulit bagi teman-teman untuk menemukan artikel yang benar-benar sesuai dengan keinginan teman-teman semua, saya pun mengalami hal yang sama, karena pada beberapa artikel di google atau lebih tepatnya blog berbahasa indonesia hanya membahas cara mengupoad image saja tanpa menambahkan fitur untuk preview image jadi image yang di upload akan langsung tersimpan kedalam database, kemudian setelah lama mencari tutorial ini akhirnya saya menemukan jawabannya disalah satu web forum bahasa inggris dan saya rasa inilah cara yang paling sederhana diantara cara-cara yang lain, maka dari itu saya mencoba membahasnya disini, siapa tahu sobat juga membutuhkan tutorial ini hehe, berikut adalah langkah - langkahnya :

  1. Langkah pertama adalah kita siapkan dulu database dan tabelnya untuk menyimpan gambar yang akan kita upload, misalnya kita buat tabel dengan nama gambar_db dan tabelnya dengan nama tabel_gambar. Seperti contoh dibawah ini: 

    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql

    Baca : Cara membuat database dan tabel dengan menggunakan phpmyadmin.

  2. Kemudian kita buat sebuah folder dalam file htdocs di xampp dengan nama “latihan-gambar” ,  tanpa tanda kutip, seperti gambar dibawah ini 

    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql
  3. Kemudian kita akan membuat file dengan ekstensi “koneksi.php” tanpa tanda kutip untuk mengkoneksikan file dengan database yang sebelumnya kita buat. Berikut adalah source untuk koneksi.php

    Baca : Cara Membuat koneksi Ke database mysql

  4. <?php
    mysql_connect('localhost','root','');
    mysql_select_db('gambar_db');
    ?>
    
  5. Setelah itu kita buat lagi file dengan ekstensi “index.php” tanpa tanda kutip, sebagai tampilan pertama ketika kita mengetikkan http://localhost/latihan-gambar. disini saya buatkan dalam bentuk tabel saja untuk menampilkan gambar yang sudah diinput kedalam database, berikut adalah script untuk index.php
    <?php
    error_reporting(0);
    //membuat koneksi ke database
    include "koneksi.php";
    // jumlah data yang akan ditampilkan per halaman
    $dataPerPage = 10;
    // apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
    // sedangkan apabila belum, nomor halamannya 1.
    if(isset($_GET['page']))
    {
        $noPage = $_GET['page'];
    } 
    else $noPage = 1; {
    }
    // perhitungan offset
    $offset = ($noPage - 1) * $dataPerPage;
    ?>
     
     <html>
     <title> Upload Gambar </title>
     <script language="javascript">
     function tanya() {
     if (confirm ("Apakah Anda yakin akan menghapus data ini ?")) {
     return true;
      } else {
       return false;
      }
      }
    </script>
    <body width='900px'>
    <center> 
    <h3> MEMBUAT UPLOAD IMAGE/GAMBAR</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
    <hr>
    <br>
    <!-- /////////////////////////////tombol untuk menambah data//////////////////////////////////-->
    <form action='tambah.php' method='POST'>
    <table >
     <tr>
     <center><td> <input type='submit' name='tambah' value='Tambah Gambar'> </td> 
     </tr>
    </table>
    </form>
    <!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// -->
    <table  border='1' Width='600' cellpadding="5">  
    <tr>
     <th> NO </th>
     <th> Gambar </th>
     <th> Keterangan </th>
     <th colspan='2'> Action </th>
    </tr>
     
    <?php  
    // Perintah untuk menampilkan data
    $queri="Select * From tabel_gambar order by id desc LIMIT $offset, $dataPerPage " ;  //menampikan data dari tabel siswa menggunakan limit (untuk membatasi)
    $hasil=MySQL_query ($queri);    //fungsi untuk SQL
    // nilai awal variabel untuk no urut
    $i = $offset+1;
    // perintah untuk membaca dan mengambil data dalam bentuk array
    while ($data = mysql_fetch_array ($hasil)){
    $id = $data['id'];
     echo "  
       <tr>
      <td><center>".$i."</center></td> 
      <td><center><img src='upload/" . $data['gambar']. "' alt='' width='80' height='60' /></td>
      <td><center>".$data['ket']."</td>
      
      <td><center> <form action = 'edit.php' method = 'GET'>
      <center><input type = 'submit' name = 'tombol' value = 'Edit' class = 'edit'>"; 
    echo " <input type = 'hidden' name = 'id' value = '".$data['id']."'> </center> 
      </form></td>
      <td><center> 
      <form action = 'delete.php' method = 'GET'>
      <input type = 'hidden' name = 'nama' value = '".$data['nama']."'>
      <input type = 'hidden' name = 'id' value = '".$data['id']."'>
      <input type = 'submit' name = 'tombol2' value = 'Delete' class = 'delete'
      onclick='return tanya(". $data['id'].")'>  
      </form></td>
      </tr> 
      "; 
     $i++; 
    }
    ?>
    </table>
    
    <?php
    // mencari jumlah semua data dalam tabel guestbook
    $query   = "SELECT COUNT(*) AS jumData FROM tabel_gambar";
    $hasil  = mysql_query($query);
    $data     = mysql_fetch_array($hasil);
    $jumData = $data['jumData'];
    // menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
    $jumPage = ceil($jumData/$dataPerPage);
    // menampilkan link previous
    if ($noPage > 1) echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&lt;&lt; Prev</a>";
    // memunculkan nomor halaman dan linknya
    for($page = 1; $page <= $jumPage; $page++)
    {
             if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage)) 
             {   
                if (($showPage == 1) && ($page != 2))  echo "..."; 
                if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "...";
                if ($page == $noPage) echo " <b>".$page."</b> ";
                else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
                $showPage = $page; 
             }
    }
    // menampilkan link next
    if ($noPage < $jumPage) echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next &gt;&gt;</a>";
    ?>
    
    
    </body>
    </html> 
    
    dan berikut adalah tampilan dari halaman index.php

    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql

  6. Kemudian kita buat tampilan form untuk menginputkan atau meng-upload gambar yang kita inginkan kedalam database, kita berinama “tambah.php” tanpa tanda kutip, berikut adalah script untuk tambah.php:
    <?php
    error_reporting(0);
    include "koneksi.php";
    
    ////////////////////////////////////////add atau input data////////////////////////////////
    if (isset($_POST['add'])) {
    $ket = $_POST['ket'];
    ///////////////////////////direktori untuk menyimpan gambar //////////////////////////////// 
    $lokasi_file = $_FILES['gambar']['tmp_name'];
    $foto_file = $_FILES['gambar']['name'];
    $tipe_file = $_FILES['gambar']['type'];
    $ukuran_file = $_FILES['gambar']['size'];
    
    $direktori = "upload/$foto_file";
    $sql = null;
    $MAX_FILE_SIZE = 1000000;
    //100kb
    if($ukuran_file > $MAX_FILE_SIZE) {
        header("Location:tambah.php");
        exit();
    }
    $sql = null;
    if($ukuran_file > 0) {
        move_uploaded_file($lokasi_file, $direktori);
    }
    
    // perintah SQL
    $query="INSERT INTO tabel_gambar (id,gambar,ket) VALUES ('','$foto_file' ,'$ket') " ;
    
    $hasil=mysql_query($query);
    
    if ($hasil){
    //header ('location:view.php');
    echo " <center> <b> <font color = 'red' size = '4'> <p> Data Berhasil disimpan </p> </center> </b> </font> <br/>
     <meta http-equiv='refresh' content='2; url= index.php'/>  ";
    } else { echo "Data gagal disimpan
     <meta http-equiv='refresh' content='2; url= tambah.php'/> ";
    }
      } 
    ?>
    <html>
    <head>
     <title> Tambah Data Gambar </title>
     <link href ="css_submit.css" rel="stylesheet" type="text/css">
     
    </head>
    <body width='900px' style = 'margin : 20px; font : 16px arial;'>
    <center> 
    <h3> MEMBUAT UPLOAD IMAGE/GAMBAR</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
    <hr>
    <br>
     <center>
     <p> Tambah Data Gambar</p>
     
     <form method = 'POST' action = ' ' enctype ="multipart/form-data" role="form">
     <table border = '1' cellspacing = '1' cellpadding = '10'
     style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
     <tr>
      <td> gambar </td>
      <td width = '5' align = 'center'> : </td>
      <td widht="5">
       <input type="file"   id="uploadImage1"  onchange="PreviewImage(1)" name='gambar'>
             <br>
             <br>
              <a class="cboxElement " > <?php echo " <img src='upload/". $data['gambar'] ."' id='uploadPreview1' width='100' height='120'/>"; ?> </a>
                 
       </td>
      </tr>
     <tr>
      <td> Keterangan </td>
      <td align = 'center'> : </td>
      <td> <input type = 'text' placeholder='Keterangan' name = 'ket' /> </td>
      </tr>
      
     <tr>
     <td colspan = '3' align = 'center'>
     <input type = 'submit' name = 'add' value = 'Submit'/>
     <input type = 'reset' name = 'Reset' value = 'Reset' /> </td>
     </tr>
    </table>
    <a href = 'index.php'> Kembali </a>
    </form>
    
        <!-- upload gambar dengan preview -->
        <script type="text/javascript">
        function PreviewImage(no) {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);
    
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
            };
        }
    </script>
    <!-- end upload gambar dengan preview -->
    </body>
    </html>  
    

    *note : di file tambah.php inilah kita memainkan javascript untuk preview gambar, sehingga pada file tambah.php ini kita tambahkan baris code java scriptnya. (Lihat baris kode yang berwarna biru)
    *keterangan tambahan dalam proses input data gambar, sebelumnya sobat harus menyiapkan dulu sebuah folder untuk menyimpan gambar yang diupload (direktori untuk penyimpanan gambar , lihat baris kode yang berwarna merah, silahkan sobat ganti dengan nama direktori di komputer sobat), jadi selain menyimpan dalam database kita juga menyimpan file gambar.jpg nya didalam sebuah folder, disini kita berinama “upload”, dan nantinya kita arahkan agar gambar tersimpan kedalam folder “upload” tersebut.  
    * Pada source code diatas kita batasi maksimum ukuran gambar yang bisa diupload adalah 1 Mb, jika sobat mengupload gambar yang ukurannya lebih dari satu Mb maka gambar tersebut tidak dapat disimpan didatabase. teman-teman bisa merubah batas maksimum sesuai dengan keinginan dan kebutuhan sobat.
    Berikut adalah tampilan halaman tambah.php
    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql
  7. Setelah proses input berhasil, teman-teman akan kembali kehalaman index.php dan melihat bahwa gambar sudah berhasil di upload dan disimpan kedalam database.

    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql

    Sampai disini sebenarnya pembahasan kita mengenai cara membuat upload image dengan preview menggunakan php dan java script kedalam database mysql, hanya sebatas upload gambar dan menyimpannya dalam database. Tapi jika sobat ingin melengkapi latihan-gambar ini dengan fitur CRUD berikut akan saya akan lanjutkan. Hehe
  8. Langkah selanjutnya jika sobat ingin melengkapi source ini dengan fitur CRUD kita perlu menambahkan file “edit.php” dan “delete.php”.
  9. Berikut ini adalah file edit.php, sedikit pemberitahuan, pada file ini sobat diberikan dua pilihan, yaitu mengupdate gambar atau tidak. Maka dalam kita berikan dua kondisi pada query untuk update tabelnya, berikut adalah script untuk file edit.php :
    <?php
    include "koneksi.php";
    // membaca informasi yang dikirim dari file view.php pada address bar
    $id = $_GET['id'];
    // Perintah sql untuk menampilkan database
    $queri = "select * from tabel_gambar where id = '$id'";
    // perintah untuk menjalankan sql
    $hasil = mysql_query($queri);
    // menjadikan data dalam bentuk array
    $data  = mysql_fetch_array($hasil);
    $ket = $data['ket'];
    
    /////////////////////////////////////////////////////update//////////////////////////////
    if (isset($_POST['update'])) {
    $ket = $_POST['ket'];
    ///////////////////////////foto //////////////////////////////// 
    $lokasi_file = $_FILES['gambar']['tmp_name'];
    $foto_file = $_FILES['gambar']['name'];
    $tipe_file = $_FILES['gambar']['type'];
    $ukuran_file = $_FILES['gambar']['size'];
    
    $direktori = "upload/$foto_file";
    $sql = null;
    $MAX_FILE_SIZE = 1000000;
    //100kb
    if($ukuran_file > $MAX_FILE_SIZE) {
        header("Location:url=edit.php");
        exit();
    }
    $sql = null;
    if($ukuran_file > 0) {
        move_uploaded_file($lokasi_file, $direktori);
    }
        $d = mysql_fetch_array(mysql_query("SELECT * FROM tabel_gambar WHERE id='$_GET[id]'"));
                  if(empty($foto_file)){
                    $hasil=mysql_query("UPDATE tabel_gambar SET ket='$_POST[ket]'
                      WHERE id='$_POST[id]'");
                    echo "<script>window.location='index.php'</script>";
                  } else{
                     $hasil=mysql_query("UPDATE tabel_gambar SET ket='$_POST[ket]',gambar='$foto_file'
                      WHERE id='$_POST[id]'");
                    echo "<script>window.location='index.php'</script>";
                  }
              }
    
    ?>
    
    
    <html>
    <head>
     <title> Update Data Gambar </title>
     
    </head>
    <body width='900px' style = 'margin : 20px; font : 16px arial;'>
    <center> 
    <h3> MEMBUAT UPLOAD IMAGE/GAMBAR</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
    <hr>
    <br>
    <?php 
    echo "
     <center>
     <p> Upload Gambar dengan PHP dan Java Script </p>
     
     <form method ='POST' action = ' ' enctype ='multipart/form-data' role='form'>
     <table border = '1' cellspacing = '1' cellpadding = '10'
     style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
     
     <input type = 'hidden' name = 'id' value = '".$id."' />
     <tr>
      <td> gambar </td>
      <td width = '5' align = 'center'> : </td>
      <td widht='5'>
       <input type='file'   id='uploadImage1'  onchange='PreviewImage(1)'' name='gambar'>
             <br>
             <br> "; ?>
              <a class="cboxElement " > <?php echo " <img src='upload/". $data['gambar'] ."' id='uploadPreview1' width='100' height='120'/>"; ?> </a>
           <?php echo "      
       </td>
      </tr>
     <tr>
      <td> Keterangan </td>
      <td align = 'center'> : </td>
      <td> <input type = 'text' placeholder='Keterangan' name = 'ket' value = '".$ket."'/> </td>
      </tr>
    
      
     <tr>
     <td colspan = '3' align = 'center'>
     <input type = 'submit' name = 'update' value = 'Update'/>
     </td>
     </tr>
    </table>
    <a href = 'index.php'> Kembali </a>
    ";?>
    
        <!-- upload gambar dengan preview -->
        <script type="text/javascript">
        function PreviewImage(no) {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);
    
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
            };
        }
    </script>
    <!-- end upload gambar dengan preview -->
    
    </form>
    </body>
    </html>
      
    
  10. Yang terakhir adalah membuat file delete.php, berikut adalah script codenya : 
  11. <?php
    include "koneksi.php";
    error_reporting(E_ALL ^ E_NOTICE);
    $id = $_GET['id'];
    $gambar = $_GET['gambar'];
    $ket = $_GET['ket'];
    
    $delete = "delete from tabel_gambar where id = '$id'";
    $hasil = mysql_query($delete);
    
    if ($hasil){
    //header ('location:view.php');
    echo " <center> <b> <font color = 'red' size = '4'> <p> Data dengan nama $nama Berhasil dihapus </p> </center> </b> </font> <br/>
     <meta http-equiv='refresh' content='1; url= index.php'/>  ";
    } else { echo "Data gagal dihapus";
    }
    
    ?>  
    


Baiklah sobat, demikian tutorial kali ini yaitu tentang cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql, mudah bukan? Sobat pasti bisa kok.. hehe . tutorial ini sangat dasar dan sederhana sekali karena tidak menggunakan css, sehingga tampilannya sekedar saja sekedar bisa menampilkan data hehe. Sobat dapat mengembangkan script ini sesuka hati dan sesuai dengan kreatifitas sobat semua.
Bagi sobat yang ingin source lengkap dari tutorial diatas, silahkan klik link  disini
Semoga artikel ini bisa bermanfaat untuk sobat blogger semua, terimakasih sudah berkunjung dan menyempatkan waktu untuk membaca artikel kami , tetap semangat dan Happy Coding :)

UPDATE : Cara membuat tampilan gambar kedalam bentuk layout grid seperti pada gallery

Cara mudah membuat aksi edit dan delete data pada tabel menggunakan php mysql dan html
Halo, selamat malam sobat situs informatika yang semoga sedang dalam keadaan yang berbahagia dan semangat mempelajari pemrograman web menggunakan php. hehe
setelah kemarin kita selesai membahas tutorial cara membuat form input untuk menambahkan data ke tabel di database menggunakan php dan html, maka pada postingan kali ini kita akan coba membahas tutorial cara mudah membuat aksi edit dan delete data pada tabel. mungkin sebagian dari sobat sudah paham dengan apa yang akan kita bahas ini. namun, untuk sobat yang masih agak bingung mari kita bahas sedikit tentang fungsi aksi tambah, edit, dan delete data tabel , keempat fungsi ini adalah hal yang paling dasar dan sangat Mutlak (wajib ada) dalam proses pengolahan data ataupun dalam pembuatan aplikasi yang memakai database untuk mengelola data di database. mengapa saya katakan bahwa fungsi-fungsi diatas adalah hal yang sangat penting? karena sebuah aplikasi tidak akan dikatakan sempurna jika tidak ada salah satu dari fungsi tersebut. fungsi-fungsi ini juga biasa kita sebut CRUD (Create, Read, update, Delete). Create untuk membuat ,Read untuk membaca data / menampilkan data, update untuk mengedit data dan merubah data dengan yang baru, dan delete untuk menghapus data. sebenarnya untuk Create dan Read itu sudah kita bahas pada postingan / tutorial sebelumnya. coba klik dibawah ini.
  • Create tabel silahkan baca disini
  • Read data tabel silahkan baca disini
  • Input data tabel silahkan baca disini
Nah jadi untuk sekarang mari kita fokus pada fungsi edit atau update dan delete data tabel.  untuk bisa melakukan aksi edit dan delete tentunya kita harus mempunyai datanya terlebih dulu dong. tenang sobat, kita akan bahas mulai dari awal pembuatan database, pembuatan tabel (create table), menampilkan tabel ke halaman web, menambahkan data ke tabel dan database menggunakan script php ( Input ), barulah kemudian kita menambahkan aksi edit,update, dan delete data pada tabel tersebut.
satu lagi, sobat tidak perlu bingung dengan tutorial yang akan kami berikan. kami akan mencoba menjelaskannya secara detil,gamblang, jelas. kami juga melengkapi tutorial ini dengan tutorial bergambar agar lebih mempermudah sobat untuk mengerti pembahasan ini.
Oke langsung kita ke topik utama bahasan kita, pertama pastikan sobat sudah menginstal xampp dan notepad++ atau sobat bisa menggunakan text editor lain kesayangan sobat.

1. langkah pertama kita buat dulu database mysql. buatlah database menggunakan phpmyadmin. beri nama database tersebut dengan nama siswa_db seperti gambar dibawah ini. untuk sobat yang ingin tahu lebih lengkap tentang langkah-langkah membuat database silahkan klik disini.



cara membuat tabel

2. kemudian setelah berhasil membuat database selanjutnya kita akan membuat tabel menggunakan phpmyadmin juga. beri nama tabel tersebut dengan nama siswa dan isikan tipe data seperti gambar dibawah ini. 
untuk sobat yang ingin tahu tutorial lengkap cara membuat tabel di database mysql silahlan klik disini


Cara membuat tabel

3. selanjutnya buka notepad++ atau text editor kesayangan sobat. karena sekarang kita akan membuat koneksi ke database. silahkan sobat copy script dibawah ini , kemudian simpanlah dengan nama koneksi.php . ingat simpan file didalam folder htdocs, dan buat folder baru misalnya latihan , simpan file koneksi.php tadi di dalam folder latihan.


<?php
error_reporting(0);
  $host = 'localhost';
  $user = 'root';      
  $password = '';      
  $database = 'siswa_db';  
 
  $konek_db = mysql_connect($host, $user, $password); 
  $find_db = mysql_select_db($database) ;

?>  
4. nah langkah selanjutnya kita akan membuat tabel di halaman web yang fungsinya untuk menampilkan data yang ada didatabase ke halaman web dalam bentuk tabel. silahkan sobat copy script dibawah ini ,simpan dengan nama index.php simpan di folder latihan.
<?php
error_reporting(0);
//membuat koneksi ke database
include "koneksi.php";
?>
 
 <html>
 <title> Data Siswa </title>
   <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/body.css" rel="stylesheet">
 
 
 <script language="javascript">
 function tanya() {
 if (confirm ("Apakah Anda yakin akan menghapus data ini ?")) {
 return true;
  } else {
   return false;
  }
  }
</script>
<body width='900px'>
<center> 
<h1>MENAMPILKAN DATA SISWA </h1> 

<hr>

  <div class="container">

        <!-- Page Heading -->
        <div class="row">
  <div class="col-md-8">
<!-- /////////////////////////////tombol untuk menambah data//////////////////////////////////-->
<form action='tambah.php' method='POST'>
<table >
 <tr>
 <center><td> <input type='submit' name='tambah' value='Tambah siswa'> </td> 
 </tr>
</table>
</form>


<!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// -->

<table  border='1' Width='600' >  
<tr>
 <th> NO </th>
 <th> Nama </th>
 <th> Jenis Kelamin </th>
 <th> Kelas </th>
 <th> Alamat </th>
 <th colspan='2'> Action </th>
 
</tr>
 
<?php  
// Perintah untuk menampilkan data
$queri="Select * From siswa" ;  //menampikan SEMUA data dari tabel siswa

$hasil=MySQL_query ($queri);    //fungsi untuk SQL

// nilai awal variabel untuk no urut
$i = 1;

// perintah untuk membaca dan mengambil data dalam bentuk array
while ($data = mysql_fetch_array ($hasil)){
$id = $data['id'];
 echo "  
  <tr>
  <td><center>".$i."</center></td> 
  <td>".$data['nama']."</td>
  <td>".$data['Jenis_Kelamin']."</td>
  <td>".$data['Kelas']."</td>
  <td>".$data['alamat']."</td>
  
  <td> <form action = 'edit.php' method = 'GET'>
  <input type = 'submit' name = 'tombol' value = 'Edit' class = 'edit'>"; //style='background: linear-gradient(to bottom, #0088CC, #0044CC); border: 1px solid #0088CC; color: #FFF; margin: 4px 10px; padding: 5px; width: 50px; height: 30px;'>     style='background: linear-gradient(to bottom, #0088CC, #0044CC); border: 1px solid #0088CC; color: #FFF; margin: 4px 10px; padding: 5px; width: 50px; height: 30px;'>
echo " <input type = 'hidden' name = 'id' value = '".$data['id']."'>
  
  
  </form></td>
  
  
  <td> <form action = 'delete.php' method = 'GET'>
  <input type = 'hidden' name = 'nama' value = '".$data['nama']."'>
  <input type = 'hidden' name = 'id' value = '".$data['id']."'>
  
  <input type = 'submit' name = 'tombol2' value = 'Delete' class = 'delete'
  onclick='return tanya(". $data['id'].")'>
  
  </form></td>
  
  </tr> 
  ";
 $i++; 
}

?>

</table>
</div>
<div class="col-md-4">

</div>

</div>
<!-- row -->

<div class="row">
<div class="col-md-12">

</div>
</div>

</body>
</html>

terlihat bahwa pada tabel diatas ada kolom action / aksi yang berfungsi untuk mengedit dan menghapus data didalam tabel. tombol edit yang selanjutnya akan kita link-an ke halaman edit.php dan aksi_edit.php serta tombol delete yang selanjutnya akan kita link-an ke halaman delete.php

5. oke kita lanjut lagi,  sekarang kita akan membuat halaman edit data, pada halaman ini kita dapat mengedit data atau merubah data atau mengupdate data yang sudah ada sebelumnya. silahkan sobat copy script dibawah ini dan kemudian simpan dengan nama edit.php


<?php
include "koneksi.php";

// membaca informasi yang dikirim dari file view.php pada address bar
$id = $_GET['id'];

// Perintah sql untuk menampilkan database
$queri = "select * from siswa where id = '$id'";

// perintah untuk menjalankan sql
$hasil = mysql_query($queri);

// menjadikan data dalam bentuk array
$data  = mysql_fetch_array($hasil);

$nomor = $data['id'];
$nama = $data['nama'];
$jenis_kelamin = $data['Jenis_Kelamin'];
$kelas = $data['Kelas'];
$alamat = $data['alamat'];


?>


<html>
<head>
 <title> Registrasi Peserta Seminar </title>
 
 
</head>
<body style = 'margin : 20px; font : 16px arial;'>

<?php 
echo "
 <center>
 <p> Registrasi Siswa Baru </p>
 
 <form method ='POST' action = 'aksi_edit.php'>
 <table border = '1' cellspacing = '1' cellpadding = '10'
 style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
 <tr>
 
  <td> Nama Siswa </td>
  <td width = '5' align = 'center'> : </td>
  <td> <input type = 'text' name = 'nama' value= '".$nama."'/> </td>
  <input type = 'hidden' name = 'id' value = '".$nomor."' />
  </tr>
 <tr>
  <td> Jenis Kelamin </td>
  <td align = 'center'> : </td>
  <td> <input type = 'text'  name = 'Jenis_Kelamin' value= '".$jenis_kelamin."'/> </td>
  </tr>
 <tr>
  <td> Kelas </td>
  <td align = 'center'> : </td>
  <td> <input type = 'text'  name = 'Kelas' value= '".$kelas."'/> </td>
  </tr>
 <tr>
  <td> Alamat </td>
  <td width = '5' align = 'center'> : </td>
  <td> <textarea name = 'alamat'>".$alamat."</textarea> </td>
  </tr>
  

  
 <tr>
 <td colspan = '3' align = 'center'>
 <input type = 'submit' name = 'submit' value = 'Update'/>
 </td>
 </tr>
</table>
<a href = 'index.php'> Kembali </a>
</form>
</body>
</html>
";
?>  

6. setelah membuat halaman edit.php untuk mengedit data, selanjutnya kita membuat halaman untuk mengeksekusi data yang ada dihalaman edit. karena halaman ini untuk update dari data yang di edit, maka kita bisa sebut halaman ini dengan aksi_edit.php.
silahkan copy script dibawah dan simpan dengan nama aksi_edit.php


<?php
error_reporting(E_ALL ^ E_NOTICE);
include 'koneksi.php';


$id = $_POST['id'];

$nama = $_POST['nama'];
$Jenis_Kelamin = $_POST['Jenis_Kelamin'];
$kelas = $_POST['Kelas'];
$alamat = $_POST['alamat'];


$update = "UPDATE SISWA SET nama='$nama',Jenis_Kelamin='$Jenis_Kelamin',Kelas='$kelas',alamat='$alamat' where id = '$id'";
$hasil = mysql_query($update);




if ($hasil){
//header ('location:view.php');
echo " <center> Data Berhasil diupdate <br/>
<br> Untuk melihat daftar peserta klik <a href = 'index.php'> Disini </a></center>";
} else { echo "Data gagal diupdate";
}

?>  

note : Script diatas berisi query sql untuk melakukan update data.

7. setelah itu langkah terakhir kita tinggal membuat delete, untuk menghapus data dalam tabel yang ada di halaman utama atau index.php. untuk delete sendiri kita hanya perlu membuat script php yang berisi query sql untuk menghapus data. silahkan sobat copy script dibawah ini dan simpan dengan dengan nama delete.php atau hapus.php


<?php
include "koneksi.php";
error_reporting(E_ALL ^ E_NOTICE);
$id = $_GET['id'];
$nama = $_GET['nama'];


$delete = "delete from siswa where id = '$id'";
$hasil = mysql_query($delete);

if ($hasil){
//header ('location:view.php');
echo " <center> <b> <font color = 'red' size = '4'> <p> Data dengan nama $nama Berhasil dihapus </p> </center> </b> </font> <br/>
 <meta http-equiv='refresh' content='2; url= index.php'/>  ";
} else { echo "Data gagal dihapus";
}

?>

Selanjutnya sobat tinggal cek di browser kesayangan sobat, ketikkan localhost/latihan
nah itu dia sekiranya yang bisa kita pelajari pada kesempatan kali ini, semoga tutorial Cara mudah membuat aksi edit dan delete data pada tabel menggunakan php mysql dan html bisa bermanfaat untuk sobat situs-informatika semua.

untuk sobat yang ingin script lengkapnya silahkan download disini

terimakasih sudah menyempatkan waktu untuk berkunjung dan membaca artikel di blog kami, silahkan tinggalkan komentar anda di kolom yang sudah disediakan . happy coding :)

Selamat siang sahabat situs informatika, setelah kemarin kita membahas tutorial Cara menampilkan data dari database MySQL dalam bentuk tabel menggunakan PHP dan HTML, maka pada kesempatan kali ini kita akan belajar bagaimana Cara membuat form input untuk menambahkan data ke tabel database menggunakan php dan html. perbedaan antara menampilkan data dan menambahkan data sebenarnya sudah sangat jelas, jika menampilkan kita hanya membuat suatu script untuk mengambil data yang sudah ada di database , sedangkan menambahkan adalah berarti kita melakukan suatu proses untuk menambahkan data kedalam tabel di database, nah untuk menginputkan atau menambahkan data ke database ada beberapa cara, salah satunya adalah dengan menggunakan phpmyadmin dan menggunakan php.


Cara membuat form input untuk Menambahkan data ke tabel di database menggunakan php dan html

Namun pada kesempatan kali ini kita akan menambahkan data ke tabel menggunakan php dan html dengan form input data, maksudnya kita akan menuliskan script proses tambah data dengan tampilan form input ( borang ) menggunakan bahasa pemrograman php dan html. proses tambah atau input ini sangat bermanfaat untuk digunakan oleh user, karena user pada umumnya tidak mempunyai akses untuk melihat database/phpmyadmin. jadi pembuat program biasanya menambahkan fasilitas input ini pada web yang mereka buat. sehingga user/pengguna lebih leluasa untuk mengelola isi database langsung dari web.

oke kita langsung ke pembuatan form input nya, silahkan sobat simak dulu langkah-langkahnya .atau bisa langsung download source code untuk membuat form input untuk menambahkan data ke tabel di database menggunakan php dan html di akhir artikel ini. hehe

1. Langkah pertama tentunya kita harus membuat database terlebih dahulu. sebagai contoh kita akan menggunakan database dan tabel yang sudah kita buat di pembahasan sebelumnya, atau jika sobat mau, bisa membuat database dan tabel yang baru. buatlah database dengan nama siswa_db dan tabel dengan nama siswa seperti gambar berikut.


Cara membuat form input untuk Menambahkan data ke tabel di database menggunakan php dan html

Baca juga : CARA MEMBUAT DATABASE Dan TABEL MySql DI XAMPP DENGAN PHPMYADMIN

2. langkah kedua adalah kita membuat file koneksi.php , koneksi.php ini berguna untuk mengkoneksikan file php dengan database,agar file php terhubung dengan database mysql. untuk membuat koneksi.php silahkan copy script dibawah ini

<?php
error_reporting(0);
  $host = 'localhost';
  $user = 'root';      
  $password = '';      
  $database = 'siswa_db';  
 
  $konek_db = mysql_connect($host, $user, $password); 
  $find_db = mysql_select_db($database) ;

?>  


Baca selengkapnya : Cara Membuat Koneksi Ke Database MySql dengan PHP
kemudian simpan dengan nama koneksi.php, simpan didalam folder latihan di htdocs


3. Setelah berhasi membuat database dan tabel serta koneksi, langkah selanjutnya kita akan membuat tabel di halaman web, yang nantinya tabel itu akan menampilkan isi ( data ) dari database yang sudah kita buat tadi. untuk membuat tabel di halaman web kita menggunakan script php . silahkan copy script dibawah ini ke notepad++, atau text editor yang sobat pakai. simpan file tersebut di dalam folder htdocs kemudian buat folder lagi dengan nama latihan, lalu simpan script ini dengan nama index.php.


<?php
error_reporting(0);
//membuat koneksi ke database
include "koneksi.php";
?>
 
<center> 
MENAMPILKAN DATA SISWA 
<br>
<br>

<!-- /////////////////////////////tombol untuk menambah data//////////////////////////////////-->
<form action='tambah.php' method='POST'>
<table >
 <tr>
 <td> <input type='submit' name='tambah' value='Tambah siswa'> </td> 
 </tr>
</table>
</form>


<!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// -->

<table  border='1' Width='600' >  
<tr>
 <th> NO </th>
 <th> Nama </th>
 <th> Jenis Kelamin </th>
 <th> Kelas </th>
 <th> Alamat </th>
 
</tr>
 
<?php  
// Perintah untuk menampilkan data
$queri="Select * From siswa" ;  //menampikan SEMUA data dari tabel siswa

$hasil=MySQL_query ($queri);    //fungsi untuk SQL

// nilai awal variabel untuk no urut
$i = 1;

// perintah untuk membaca dan mengambil data dalam bentuk array
while ($data = mysql_fetch_array ($hasil)){
$id = $data['id'];
 echo "  
  <tr>
  <td><center>".$i."</center></td> 
  <td>".$data['nama']."</td>
  <td>".$data['Jenis_Kelamin']."</td>
  <td>".$data['Kelas']."</td>
  <td>".$data['alamat']."</td>
  
  </tr> 
  ";
 $i++; 
}

?>

</table>  


sedikit berbeda dari tampilan tabel sebelumnya disini kita menambahkan tombol tambah siswa ( input ), yang nantinya akan kita arahkan / link ke halaman form input data siswa.seperti ini


Cara membuat form input untuk Menambahkan data ke tabel di database menggunakan php dan html


Baca juga : Cara menampilkan data dari database MySQL dalam bentuk tabel menggunakan PHP dan HTML 


4.setelah itu, barulah kita membuat halaman form input untuk menambahkan data atau memasukkan data kedalam tabel. Silahkan sobat copy script di bawah ini ke text editor kesayangan sobat, disini saya menggunakan notepad++.
<?php

include "koneksi.php";
?>
<html>
<head>
 <title> Registrasi Peserta Seminar </title>
 <link href ="css_submit.css" rel="stylesheet" type="text/css">
 
 
</head>
<body style = 'margin : 20px; font : 16px arial;'>
 <center>
 <p> Registrasi Siswa Baru </p>
 
 <form method = 'POST' action = 'aksi_tambah.php'>
 <table border = '1' cellspacing = '1' cellpadding = '10'
 style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
 <tr>
  <td> Nama Siswa </td>
  <td width = '5' align = 'center'> : </td>
  <td> <input type = 'text' placeholder='Nama Siswa' name = 'nama' /> </td>
  </tr>
 <tr>
  <td> Jenis Kelamin </td>
  <td align = 'center'> : </td>
  <td> <input type = 'text' placeholder='Jenis Kelamin' name = 'Jenis_Kelamin' /> </td>
  </tr>
 <tr>
  <td> Kelas </td>
  <td align = 'center'> : </td>
  <td> <input type = 'text' placeholder='Kelas' name = 'kelas' /> </td>
  </tr>
 <tr>
  <td> Alamat </td>
  <td width = '5' align = 'center'> : </td>
  <td> <textarea name = 'alamat' placeholder='Alamat' ></textarea> </td>
  </tr>
  
 
  
 <tr>
 <td colspan = '3' align = 'center'>
 <input type = 'submit' name = 'submit' value = 'Submit'/>
 <input type = 'reset' name = 'Reset' value = 'Reset' /> </td>
 </tr>
</table>
<a href = 'index.php'> Kembali </a>
</form>
</body>
</html>  



kemudian simpan dengan ekstensi tambah.php, didalam folder yang sama dengan index.php yaitu dalam folder latihan. tampilannya akan seperti ini


Cara membuat form input untuk Menambahkan data ke tabel di database menggunakan php dan html

5. lalu kita akan membuat file aksi_tambah.php,fungsi halaman ini kita akan membuat query sql yang berfungsi untuk menambahkan atau menginputkan data kedalam database. silahkan copy script dibawah ini


<?php
error_reporting(E_ALL ^ E_NOTICE);
include "koneksi.php";

// file submit.php
// menangkap data yang dikirimkan dari file tambah.php mwnggunakan method = POST

$nama = $_POST['nama'];
$jenis_kelamin = $_POST['Jenis_Kelamin'];
$kelas = $_POST['kelas'];
$alamat = $_POST['alamat'];

// perintah SQL
$query="INSERT INTO siswa VALUES ('','$nama' ,' $jenis_kelamin','$kelas','$alamat') " ;

$hasil=mysql_query($query);

if ($hasil){
//header ('location:view.php');
echo " <center> <b> <font color = 'red' size = '4'> <p> Data Berhasil disimpan </p> </center> </b> </font> <br/>
 <meta http-equiv='refresh' content='2; url= index.php'/>  ";
} else { echo "Data gagal disimpan
 <meta http-equiv='refresh' content='2; url= tambah.php'/> ";
}
?>
dan simpan dengan nama aksi_tambah.php , simpan di dalam folder latihan di htdocs.
  6. semua persiapan telah selesai, langkah selanjutnya adalah langkah terakhir yaitu kita akan mengecek apakah program berajalan dengan benar atau tidak. seperti biasa kita buka browser kesayangan kita, lalu ketikkan https://localhost/latihan . dan tampilannya akan seperti di bawah ini.





Nah, kira-kira seperti itulah tutorial cara membuat form input untuk menambahkan data ke tabel di database menggunakan php dan html , semoga tutorial membat form input ini bisa bermanfaat untuk sobat semua.
jika sobat ingin source code langsung atau program jadinya dari file diatas , silahkan klik link download dibawah ini

https://tusfiles.net/b0lpqz6ryz4x
  terimakasih sudah berkunjung dan menyempatkan waktu untuk membaca artikel di blog kami. silahkan tinggalkan komentar :)
happy coding :)




Note : pada tutorial membuat form input tabel ini kami menggunakan tipe data INT dan VARCHAR saja, begitupun pada field jenis kelamin. umumnya tipe data yang digunakan pada jenis kelamin adalah "enum".
untuk mengetahui penggunaan tipe data enum tunggu update artikel selanjutnya :)

Selamat malam sobat situs informatika, kali ini kita akan belajar bagaimana Cara menampilkan data dari database MySql dalam bentuk tabel menggunakan PHP. maksud dari postingan ini adalah kita akan mengambil data dari database MySql lalu ditampilkan ke halaman web, dan penyajian data tersebut dalam bentuk tabel. Jadi kita harus mengetahui dulu cara menampilkan data dari database ke halaman web menggunakan PHP Dan Cara membuat tabel menggunakan PHP dan HTML.

Mungkin beberapa dari sobat bertanya, mengapa harus menggunakan tabel ? . sebenarnya penggunaan tabel sendiri di maksudkan agar data yang di tampilkan menjadi lebih rapih dan lebih menarik untuk di lihat, bayangkan jika data yang akan disajikan itu jumlahnya banyak, dan ditampilkan dalam bentuk acak atau tidak karuan tentu tidak akan ada yang ingin melihatnya. haha

baiklah, kita langsung saja ke tutorial Cara menampilkan data dari database MySql dalam bentuk tabel menggunakan PHP dan HTML. sobat bisa lihat langkah-langkahnya dibawah ini :

1. Seperti biasa jalankan dulu XAMPP serta aktifkan Apache dan Mysql nya.

2. kemudian buka notepad++, buat sebuah halaman baru (CTRL+N). beri nama tabel.php dan simpan di dalam folder latihan di htdocs.

3. lalu Copy script php di bawah ini di file tabel.php

<?php
//membuat koneksi ke database
$host = 'localhost';
  $user = 'root';      
  $password = '';      
  $database = 'siswa_db';  
    
  $konek_db = mysql_connect($host, $user, $password);    
  $find_db = mysql_select_db($database) ;
?>

<center> 
MENAMPILKAN DATA SISWA 
<br>
<br>

<!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// -->

<table  border='1' Width='800'>  
<tr>
    <th> Nama </th>
    <th> Jenis Kelamin </th>
    <th> Kelas </th>
    <th> Alamat </th>
    
</tr>

<?php  
// Perintah untuk menampilkan data
$queri="Select * From siswa" ;  //menampikan SEMUA data dari tabel siswa

$hasil=MySQL_query ($queri);    //fungsi untuk SQL

// perintah untuk membaca dan mengambil data dalam bentuk array
while ($data = mysql_fetch_array ($hasil)){
$id = $data['id'];
 echo "    
        <tr>
        <td>".$data['nama']."</td>
        <td>".$data['Jenis_Kelamin']."</td>
        <td>".$data['Kelas']."</td>
        <td>".$data['alamat']."</td>
        
        </tr> 
        ";
        
}

?>

</table>

4. jika sudah di copy, kemudian simpan file tabel.php tersebut. kemudian buka browser dan ketikan https://localhost/latihan/tabel.php . lalu akan muncul tampilan seperti di bawah ini.

Cara menampilkan data dari database MySQL dalam bentuk tabel menggunakan PHP dan HTML


Nah itu dia sobat tutorial Cara menampilkan data dari database MySql dalam bentuk tabel menggunakan PHP dan HTML , semoga tutorial kali ini  bisa bermanfaat untuk sobat semua khususnya yang sedang belajar PHP.

Terimakasih sudah menyempatkan waktu untuk berkunjung dan membaca artikel di blog kami yang sederhana ini. Happy Coding sobat :)

Selanjutnya kita akan belajar bagaimana Cara menambahkan data ke tabel database menggunakan PHP

Selamat malam sobat informatika yang senantiasa berbahagia, pada kesempatan kali ini kami akan memberikan tutorial cara menampilkan data dari database ke halaman web menggunakan PHP. Mungkin sebagian dari sobat yang sudah mahir tentunya hal ini bukan sesuatu yang sulit. Tapi mungkin bagi sebagian sobat yang baru akan belejar atau memulai akan agak sedikit bingung, tapi tak perlu khawatir, jika sobat merasa bingung berarti sobat berusaha berpikir. hehe

Agar bisa menampilkan data dari database ke halaman web tentunya kita harus membuat databasenya terlebih dahulu serta kita juga harus membuat tabel dan memasukkan data kedalam tabel database tersebut.


Sobat mungkin melihat banyak sekali artikel yang menerangkan cara menampilkan data dari database ke halaman web di google. Jika sobat amati lebih dalam lagi, di beberapa artikel tersebut pasti ada logika penulisan script yang berbeda, meskipun tujuannya sama. Sebenarnya itu tidak menjadi masalah karena setiap orang mempunyai gaya penulisan script programnya masing-masing, kembali lagi kepada metode mana yang sobat anggap paling mudah dan nyaman.

Okelah kita langsung saja ke topik utama bahasan kita yaitu tutorial cara menampilkan data dari database ke halaman web menggunakan PHP. Disini saya akan menerangkan 2 cara. Yaitu :

1.    Cara menampilkan data dari database kehalaman web menggunakan PHP dengan 2 file, dan
2.    Cara menampilkan data dari database ke halaman web menggunakan PHP dengan 1 file.

Kenapa sih harus menjelaskan dengan 2 cara diatas min? Kenapa ya, jujur kalo kami lebih senang menggunakan cara yang pertama yaitu dengan 2 file, maksudnya memisahkan file yang berisi logika dan file eksekusi. Selain itu jika kita membuat aplikasi atau sistem informasi itu akan dibutuhkan banyak file. Tapi sekali lagi itu tergantung pada sobat semua :)

Cara 1 :  Menampilkan data dari database ke halaman web menggunakan PHP dengan 2 file.

Untuk cara yang pertama ini kita akan membuat 2 file, pertama kita buat file koneksi.php untuk membuat koneksi ke database, dan file tampil.php untuk menampilkan data dari database. Berikut langkah-langkahnya :

Pastikan Xampp sudah dijalankan , Lihat Cara Menjalankan XAMPP
  1. Pertama kita buat database dan tabel nya dulu, disini kami memakai database dan tabel yang sudah dibuat pada postingan sebelumnya. Sobat bisa klik Cara Membuat Database dan Tabel MysQl di Xampp dengan PhpMyadmin.
     
  2. Isikan dulu data ke dalam tabel yang sudah di buat di database tadi, sobat bisa lihat Cara Memasukkan dan Menambahkan data ke dalam tabel dengan PhpMyadmin.
  3. Lalu kita buka notepad++ lalu buat halaman baru bisa dengan cara CTRL+N, dan buat folder di htdocs dengan nama latihan. kemudian  Copy kan script dibawah ini ke notepad++. dan Simpan file dengan ekstensi .php , beri nama koneksi.php.
  4. <?php
      $host = 'localhost';
      $user = 'root';      
      $password = '';      
      $database = 'siswa_db';  
     
      $konek_db = mysql_connect($host, $user, $password); 
      $find_db = mysql_select_db($database) ;
    
    ?>
    
  5. Selanjutnya kita buat halaman baru lagi, lalu copy script di bawah ini ke notepad++. simpan disatu folder yang sama dengan file koneksi.php , beri nama tampil.php.
  6. <?php
    //ambil koneksi dari koneksi.php
    include "koneksi.php";
    
    // Perintah untuk menampilkan data
    $queri="Select * From siswa" ;  //menampikan SEMUA data dari tabel siswa
    
    $hasil=MySQL_query ($queri);    //fungsi untuk SQL
    
    // perintah untuk membaca dan mengambil data dalam bentuk array
    while ($data = mysql_fetch_array ($hasil)){
    $id = $data['id'];
     echo "  
      
      Nama : ".$data['nama']." </br>
      Jenis Kelamin : ".$data['Jenis_Kelamin']." </br> 
      Kelas : ".$data['Kelas']." </br>
      Alamat : ".$data['alamat']." </br>
      ---------------------------------------- </br>
      ";
       
    }
    echo " Berhasil Mengambil data dari database";
    ?>  
    
Keterangan :
  • Pada file diatas kita menggunakan fungsi include “koneksi.php”; maksudnya kita memanggil file koneksi.php ke dalam file tampil.php agar file tersebut terhubung ke database.
  • Fungsi mysql_fetch_array ()  ini mengembalikan baris data sebagai array asosiatif, array numerik, atau keduanya. Fungsi ini lebih mudah digunakan karena dalam penulisannya kita bisa mengunakan nama kolom dari tabel.  Contoh : $data['nama'];
    5.  Buka browser dan ketikan Https://localhost/latihan/tampil.php Tampilannya akan seperti dibawah ini



Cara menampilkan data dari database ke halaman web menggunakan PHP MySql


Cara 2 : Menampilkan data dari database ke halaman web menggunakan phpmyadmin dengan 1 file.

Untuk cara yang kedua ini, kita hanya memakai 1 file saja. Sebenarnya scriptnya sama, hanya saja kita menuliskan script yang ada di koneksi.php ke file tampil.php. Berikut langkah-langkahnya :
  1. Ulangi Langkah 1 dan 2 diatas (pada cara yang pertama), kemudian
  2. Buka Notepad++ buat halaman baru. copy kan script di bawah ini, dan simpan dengan nama tampil.php.
  3. <?php
    //membuat koneksi ke database
    $host = 'localhost';
      $user = 'root';      
      $password = '';      
      $database = 'siswa_db';  
     
      $konek_db = mysql_connect($host, $user, $password); 
      $find_db = mysql_select_db($database) ;
    
    // Perintah untuk menampilkan data
    $queri="Select * From siswa" ;  //menampikan SEMUA data dari tabel siswa
    
    $hasil=MySQL_query ($queri);    //fungsi untuk SQL
    
    // perintah untuk membaca dan mengambil data dalam bentuk array
    while ($data = mysql_fetch_array ($hasil)){
    $id = $data['id'];
     echo "  
      
      Nama : ".$data['nama']." </br>
      Jenis Kelamin : ".$data['Jenis_Kelamin']." </br> 
      Kelas : ".$data['Kelas']." </br>
      Alamat : ".$data['alamat']." </br>
      ---------------------------------------- </br>
      ";
       
    }
    echo " Berhasil Mengambil data dari database";
    ?>  
    
  4. Kemudian buka Browser dan ketikan Https://localhost/latihan/tampil.php Tampilannya akan sama seperti yang pada cara pertama tadi.
Cara menampilkan data dari database ke halaman web menggunakan PHP MySql

Nah itu dia sobat Tutorial Cara Menampilkan Data Dari Database Ke halaman Web Menggunakan PHP MySql. Semoga Tutorial diatas bisa bermanfaat untuk sobat semua. jika masih ada yang ingin ditanyakan silahkan tinggalkan komentar, nanti akan kami coba membantu.

Terimakasih sudah menyempatkan waktu untuk berkunjung dan membaca artikel di blog kami. Happy Coding :)

Baca juga : Cara menampilkan Data dari database mysql ke halaman web dalam bentuk tabel

Selamat malam sobat situs-informatika, setelah beberapa hari lalu kita belajar cara membuat database dan tabel di Xampp dengan phpmyadmin, kali ini kita akan belajar cara memasukkan dan menambahkan data kedalam tabel dengan PhpMyadmin. Sebenarnya ada banyak cara untuk memasukkan data kedalam tabel. namun pada kesempatan kali ini kita akan belajar menambahkan data ke dalam tabel  menggunakan phpMyadmin. membuat tabel dengan phpMyadmin pun juga ada bebrapa cara, yaitu bisa dengan menggunakan Query SQL atau menggunakan INSERT.

Cara Memasukkan data kedalam tabel menggunakan INSERT di PhpMyadmin

1.  Langkah pertama kita harus menjalankan dulu apache dan MySql di Xampp , untuk sobat yang ingin tahu cara menjalankan XAMPP bisa lihat disini.

2.  Setelah XAMPP dijalankan, selanjutnya, kita buka browser (Mozilla FireFox, Chrome, Internet Explorer ,dll). Lalu ketikan Localhost/phpmyadmin . maka akan muncul halaman phpmyadmin seperti dibawah ini.

Cara Memasukkan dan menambahkan Data kedalam Tabel dengan PhpMyadmin

3.  Kemudian kita klik pada database yang sudah kita buat kemarin yaitu siswa_db.

Cara Memasukkan dan menambahkan Data kedalam Tabel dengan PhpMyadmin
lalu klik tabel yang bernama siswa

Cara Memasukkan dan menambahkan Data kedalam Tabel dengan PhpMyadmin

4.  Setelah itu kita klik menu Insert untuk memasukkan/menambahkan data ke dalam tabel. dan akan muncul tampilan seperti di bawah ini.

Cara Memasukkan dan menambahkan Data kedalam Tabel dengan PhpMyadmin
Kita isi tabel dengan data seperti ini, kemudian Klik GO


5.  Akan muncul notif seperti dibawah ini, yang berarti kita telah berhasil memasukkan data kedalam tabel.

Cara Memasukkan dan menambahkan Data kedalam Tabel dengan PhpMyadmin

untuk mengeceknya kita bisa klik browse pada menu, lalu akan terlihat bahwa data yang tadi kita inputkan sudah masuk ke dalam tabel.

Cara Memasukkan dan menambahkan Data kedalam Tabel dengan PhpMyadmin

Terlihat data sudah masuk kedalam tabel, berarti kita telah berhasil memasukkan data ke tabel menggunakan INSERT

Cara Memasukkan / menambahkan data ke dalam tabel menggunakan Query SQL 

Untuk memasukkan data kedalam tabel menggunakan Query SQL sebenarnya hampir sama dengan menggunakan INSERT, perbedaannya hanya pada langkah menginputkan data saja. berikut langkah-langkahnya :
  • Ikuti Langkah 1 sampai 3 seperti diatas.
  • kemudian jika sudah pada langkah ke-3 selanjutnya kita ke langkah 4 yaitu kita pilih SQL.

Cara Memasukkan dan menambahkan Data kedalam Tabel dengan PhpMyadmin
  • Setelah itu masukkan query SQL seperti diatas, kemudian klik GO 
  • Setelah itu akan muncul pemberitahuan  seperti ini, berarti data berhasil diinputkan kedalam tabel siswa di database siswa_db.

Cara Memasukkan dan menambahkan Data kedalam Tabel dengan PhpMyadmin
  • terakhir kita tinggal cek apakah benar data telah berhasil diinputkan atau belum, caranya sama seperti langkah 5 diatas. pilih browse.


Kini telah Berhasil memasukkan/menambahkan data ke dalam tabel menggunkan Query SQL.

Nah itu dia sobat, tutorial Cara Memasukkan dan Menambahkan Data kedalam Tabel dengan PhpMyadmin . semoga postingan ini bisa bermanfaat untuk sobat informatika, yg khususnya sedang mempelajari PHP.

Terimakasih sudah menyempatkan waktu untuk berkunjung dan  membaca artikel di situs-informatika.
Happy Coding :)

Selamat Siang sobat situs-informatika yang berbahagia, malam ini kami akan memberikan tutorial Cara Membuat Koneksi Ke Database MySql dengan PHP . pada postingan kali ini, kami sengaja akan sekaligus memberikan contoh yang berkelanjutan dengan postingan kita sebelumnya, karena seperti yang sudah sobat semua ketahui bahwa untuk membuat koneksi Ke Database MySql dengan PHP kita membutuhkan beberapa  aplikasi atau software yang harus dipersiapkan sebelumnya.


PHP MySql
Disini kita memerlukan Web Server yaitu apache dan Databasenya kita gunakan MySql, nah untuk web server dan database nya kita sudah menggunakan aplikasi yang memiliki paket webserver dan database yaitu Xampp, jadi singkatnya kita hanya memerlukan Xampp saja.
Selain itu kita juga membutuhkan suatu aplikasi untuk menuliskan source kode atau perintah dalam bahasa pemrograman PHP. dan disini kita menggunakan aplikasi Notepad++ .

Baik jika sudah mempunyai XAMPP dan Notepad ++ , mari kita langsung ke bahasan utama kita pada postingan kali ini,  yaitu Tutorial Cara Membuat Koneksi Ke Database MySql dengan PHP. Berikut adalah langkah-langkahnya.

1. Langkah pertama adalah kita harus membuat database terlebih dulu. kita akan membuat database di MySql. klik link berikut untuk melihat Cara Membuat Database MYSQL di Xampp dengan PhpMyadmin
Cara Membuat Koneksi Ke Database MySql dengan PHP

2. Jika sudah berhasil membuat database selanjutnya kita buka aplikasi Notepad++ untuk menulis source kode yang akan menghubungkan file php dengan database. kemudian silahkan copy kode dibawah ini pada notepad++ sobat.

File PHP yang menggunakan Variabel
<?php
  $host = 'localhost';
  $user = 'root';      
  $password = '';      
  $database = 'siswa_db';  
 
  mysql_connect($host, $user, $password);
 
  mysql_select_db($database) ;
?>

Keterangan :
  •  Variabel $host Anda isi dengan ‘localhost’.
  •  Variabel $user Anda isi sesuai dengan nama user database yang akan Anda gunakan.
  •  Variabel $password Anda isi sesuai dengan password user database yang akan Anda gunakan. (disini  saya tidak menggunakn password jadi saya kosongkan)
  •  Variabel $database silahkan diisi sesuai dengan nama database yang akan Anda gunakan.
  •  mysql_connect($host, $user, $password); --> Script ini berfungsi untuk mengkoneksikan php ke server database MySql.
  • mysql_select_db($database) ; --> Script ini berfungsi untuk mengkoneksikan php ke database yang sudah kita buat sebelumnya
selain menggunakan script koneksi.php diatas kita juga bisa mempersingkat penulisan script menjadi seperti dibawah ini, sebenarnya fungsinya sama saja kok. terserah sobat nyaman menggunakan script yang mana. hehe

<?php
mysql_connect('localhost','root','');
mysql_select_db('siswa_db');
?>

3.  Setelah memasukkan kode diatas pada notepad++, langkah selanjutnya kita harus menyimpan script tersebut dalam htdocs , buat folder baru dengan nama latihan. lalu save file koneksi tadi dengan nama koneksi.php

4.  Sampai sini kita telah berhasil membuat koneksi php ke database mysql, langkah terakhir yaitu untuk mengecek apakah php dan database sudah benar-benar terhubung/terkoneksikan atau belum.
Caranya kita buka browser (Chrome, IE, Mozilla Firefox dll). kemudian ketikkan http://localhost/latihan/koneksi.php jika tidak ada pesan error berarti kita telah berhasil mengkoneksikan  php ke database.


Cara Membuat Koneksi Ke Database MySql dengan PHP


Tetapi jika sobat ingin melihat atau mengecek berhasil atau tidaknya koneksi yang sudah kita buat dengan menambahkan komentar atau keterangan. kita bisa menambahkan Variabel dan kondisi pada script php diatas, misalnya menggunakan IF.
Berikut Contohnya :

<?php
  $host = 'localhost';
  $user = 'root';      
  $password = '';      
  $database = 'siswa_db';  
 
  $konek_db = mysql_connect($host, $user, $password);
 
  $find_db = mysql_select_db($database) ;

if ($find_db) {
 
 echo "Database Ada";
 
 mysql_close($konek_db);
 
}
else {
 
 echo "Database Tidak Ada";
 
 mysql_close($konek_db);
 
}
?>

Kemudian tampilan pada browser akan ada keterangan seperti ini sobat :

Cara Membuat Koneksi Ke Database MySql dengan PHP


Nah itu dia sobat situs-informatika Tutorial Cara Membuat Koneksi Ke Database MySql dengan PHP , semoga bisa bermanfaat untuk sobat semuanya.
Terimakasih sudah menyempatkan waktu untuk berkunjung dan membaca artikel di blog kami . Happy Coding :)

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.