Jumat, 24 Februari 2017

Cara mudah membuat aksi edit dan delete data pada tabel menggunakan php mysql dan html

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.  
    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.

    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. 

    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.

    123456789101112<?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.
    123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119<?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

    12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879<?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

    12345678910111213141516171819202122232425262728<?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

    12345678910111213141516171819<?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 :)

    CARA MEMBUAT DATABASE Dan TABEL MySql DI XAMPP DENGAN PHPMYADMIN

    Selamat pagi pada postingan kali ini kami akan berbagi Tutorial Cara Membuat Database Dan TABEL di XAMPP dengan PhpMyadmin dan membuat Tabel Di database. ulasan singkat mengenai database, databaseadalah sekumpulan data yang disimpan dalam komputer yang saling berhubungan dan diorganisasikan sedemikian rupa agar dapat dimanfaatkan kembali dengan cepat ketika data dibutuhkan. Yah, kurang lebihnya itulah arti dari database, jika sobat ingin yang lebih kumplit bisa searching di google. Hehe
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    Karena ini tutorial Cara membuat database dan tabel di Xampp dengan PhpMyadmin, tentunya kita membutuhkan xampp. Untuk sobat yang belum punya xampp silahkan download dulu xampp di bawah ini.
    Oke, kita lanjut ke bahasan utama kita, silahkan sobat-sobat situs-informatika ikuti langkah-langkahnya dibawah ini.
    1.    Langkah pertama, tentunya kita harus menjalankan Xampp terlebih dulu, lalu aktifkan web server ( Apache) dan database MySql nya.
    2.    Lalu jika sudah berhasil menjalankan xampp nya, langkah selanjutnya kita buka browser kita, boleh mozila firefox atau Google chrome (sesuai keinginan anda). Kemudian ketikanhttp://localhost/phpmyadmin/ kemudian tekan enter. Gambarnya seperti dibawah ini.
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    3.    Jika sudah, maka anda akan masuk ke dalam halaman PhpMyadmin tampilannya seperti dibawah ini
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    4.    Kemudian kita klik database, dan isikan nama database sesuai dengan keinginan anda, disini saya akan menggunakan nama siswa_db.
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    5.    Setelah mengisikan nama database selanjutnya klik create. 
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    Jika sudah muncul tanpilan seperti dibawah ini, berarti anda telah berhasil membuat database.
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    Setelah berhasil membuat database selanjutnya kita akan membuat TabelCara membuat tabel di XAMPP dengan PHPMyadmin
    6.    Selanjutnya kita coba membuat tabel di database yang sudah kita buat tadi.
    Caranya kita klik database yang sudah di buat , kemudian isikan nama tabel dan banyaknya kolom. Disini saya coba dengan nama tabel nya siswa dan kolomnya 5.
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    Kemudian klik Go
    7.    Nah, selanjutnya kita tinggal mengisi tabel. Lihat gambar berikut ini
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    Keterangan :
    • Name yaitu nama kolom tabel/ header tabel
    • Type yaitu tipe data dari kolom tabel/field
    • Index untuk Id disini kita pilih Primary key
    • A_I adalah Auto_Increment fungsinya agar Id otomatis bertambah sesuai dengan urutan angka. Misal untuk Id akan dimulai dari 1,kemudian Id selanjutnya adalah 2, dst.


    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    Setelah diisi, silahkan klik save . kini anda telah berhasil membuat tabel, untuk melihat
    isi tabel yang telah dibuat tadi coba klik nama tabelnya.
    Dan ini adalah isi dari tabel/ struktur tabel yang sudah kita buat tadi
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    8.    Setelah langkah-langkah diatas, maka sekarang anda kini telah berhasil membuat database dan tabel di Xampp dengan PhpMyadmin.
    Sekian Tutorial Cara Membuat database dan Tabel MySql di xampp dengan PhpMyadmin yang bisa kami bagikan pada kesempatan ini, semoga bisa bermanfaat.
    Terimakasih sudah menyempatkan waktu untuk berkunjung dan membaca artikel di blog kami, Happy Coding :)
    Selatjutnya kita akan membahas Tutorial Cara Membuat Koneksi PHP dengan Database Mysql.
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    Setelah diisi, silahkan klik save . kini anda telah berhasil membuat tabel, untuk melihat
    isi tabel yang telah dibuat tadi coba klik nama tabelnya.
    Dan ini adalah isi dari tabel/ struktur tabel yang sudah kita buat tadi
    CARA MEMBUAT DATABASE MySql DI XAMPP DENGAN PHPMYADMIN
    8.    Setelah langkah-langkah diatas, maka sekarang anda kini telah berhasil membuat database dan tabel di Xampp dengan PhpMyadmin.
    Sekian Tutorial Cara Membuat database dan Tabel MySql di xampp dengan PhpMyadmin yang bisa kami bagikan pada kesempatan ini, semoga bisa bermanfaat.
    Terimakasih sudah menyempatkan waktu untuk berkunjung dan membaca artikel di blog kami, Happy Coding :)