Web-Programming-#4

Membuat Aplikasi Website – Mengolah Data Table “kontak”

Persiapan

Download pustaka / library ………. klik untuk download

Meliputi :

  • Bootstrap
  • Jquery
  • Datatables

Ekstrak di dalam folder masing-masing.

 

Membuat Koneksi Database

  • Salin program
  • Sesuaikan nama database nya
  • Simpan dengan nama koneksi.php
<?php
date_default_timezone_set('Asia/Jakarta');
//
$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "kelas_pagi";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Koneksi gagal : " . $conn->connect_error);
} 
//echo "Berhasil ..";

?>

 

Buat App Menampilkan Data

  • Perhatikan contoh …
  • Sertakan koneksi.php
  • Cek pustaka / library yang disertakan
  • Sesuaikan sesuai keperluan
  • Simpan dengan nama kontak_tampil.php
<?php
include "koneksi.php";
?>

<!DOCTYPE html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Aplikasi Web - Kontak</title>
  <meta name="author" content="Suharmoyo">
  <meta name="description" content="Daftar Kontak">
  <meta name="keyword" content="website, imdkom, belajar, covid, bengkayang">
  <!-- pustaka -->
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/popper.js/popper.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
  <!-- datatables -->
  <script src="lib/datatables/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="lib/datatables/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="lib/datatables/css/dataTables.bootstrap4.min.css">
</head>
<body>
    <center>
    <h2>Daftar Kontak</h2>
    </center>
    <br/>
    <br/>
    <div class="container">
        <table id="data1" class="table table-striped table-bordered">
            <thead>
                <tr>            
                  <th>Id</th>                
                  <th>Nama</th>
                  <th>Alamat</th>
                  <th>Kota</th>
                  <th>Email</th>
                  <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
<?php
$sql = "SELECT * FROM kontak";
$rsl = $conn->query($sql);

if ($rsl->num_rows > 0) {
  // output data of each row
  while($row = $rsl->fetch_assoc()) {
        $id = $row["id"];
        $nama =  $row["nama"];
        $alamat = $row["alamat"];
        $kota = $row["kota"];
        $email = $row["email"];
        echo "<tr>";                
        echo "<td style='text-align:center'>$id </td>";
        echo "<td>$nama</td>";
        echo "<td>$alamat</td>";
        echo "<td>$kota</td>";
        echo "<td>$email</td>";
        echo "<td style='text-align:center'>". 
            "<a href='kontak_lihat.php?id=$id' title='Lihat data'><i class='fa fa-eye'></i></a> ". 
            "<a href='kontak_ubah.php?id=$id' title='Ubah data'><i class='fa fa-edit'></i></a> ". 
            "<a href='kontak_hapus.php?id=$id' title='Hapus data'><i class='fa fa-trash'></i></a>". 
            "</td>";
        echo "</tr>";        
  }
} else {
  echo "Tabel kosong";
}
$conn->close();            
?>
            </tbody>
        </table>
        <a class="btn btn-primary" href='kontak_tambah.php?id='><i class="fa fa-plus"></i> Tambah Data </a>
        <br><br>
    </div>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(){
    $('#data1').DataTable({
        "language": {"url": "lib/datatables/extensions/lang/Indonesian.json"},
        "lengthMenu": [[10,20,50,-1],[10,20,50,"Semua"]],
        "stateSave": true
    });
});
</script>

 

Buat App Lihat Data

  • Digunakan untuk melihat / menampilkan data per id
  • Baca data / select berdasar id
  • Tampilkan dalam form
  • Simpan dengan : kontak_lihat.php
<?php
include "koneksi.php";

$id = $_GET['id'];
 
$sql = "SELECT * FROM kontak WHERE id='$id'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();

$id = $row["id"];
$nama =  $row["nama"];
$alamat = $row["alamat"];
$kota = $row["kota"];
$email = $row["email"];

$conn->close();        
?>

<!DOCTYPE html>
<html lang="id-ID">
<head>
  <title>Data Kontak ( Suharmoyo )</title>
  <meta name="author" content="Suharmoyo">
  <meta name="description" content="Melihat Data Kontak">
  <meta name="keyword" content="website, imdkom, belajar, covid, bengkayang">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- pustaka -->
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/popper.js/popper.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
</head>
<body>
    <center>
        <h2>Lihat Data</h2>
    </center>
    <br/>
    <br/>
    <div class="container">
        <form id='f_lihat'>
            <input type="text" id="id_kontak" value="<?php echo $id; ?>" style="display:none">
            <div class="form-group row">
                <div class="col-sm-6">
                    <label for="nama">Nama Lengkap :</label>
                    <input class="form-control" id="nama" type="text" value="<?php echo $nama; ?>" readonly>
                    
                </div>
                <div class="col-sm-12">
                    <label for="alamat">Alamat :</label>
                    <input class="form-control" id="alamat" type="text" value="<?php echo $alamat; ?>" readonly>
                </div>                
                <div class="col-sm-6">
                    <label for="kota">Kota :</label>
                    <input class="form-control" id="kota" type="text" value="<?php echo $kota; ?>" readonly>
                </div>       
                <div class="col-sm-8">
                    <label for="email">Email :</label>
                    <input class="form-control" id="email" type="text" value="<?php echo $email; ?>" readonly>
                </div> 								
            </div>        
            <button id="btn_kembali" class="btn btn-primary">Kembali</button>
        </form>
        <p id="pesan" style="font-style: italic;color:red">--</p>
    </div>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(){
        
    $( "#btn_kembali" ).click(function( event ) {
        event.preventDefault();
        document.location.href = "kontak_tampil.php";
    });
});
</script>

 

Buat App  Ubah Data

  • Baca data berdasarkan id nya
  • Tampilkan
  • Lakukan perubahan data
  • Simpan perubahan
  • ———- simpan dengan nama file : kontak_ubah.php
<?php
include "koneksi.php";

$id = $_GET['id'];
 
$sql = "SELECT * FROM kontak WHERE ID='$id'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();

$id = $row["id"];
$nama = $row["nama"];
$alamat = $row["alamat"];
$kota = $row["kota"];
$email = $row["email"];

$conn->close();        
?>

<!DOCTYPE html>
<html lang="id-ID">
<head>
  <title>Daftar Pengunjung Taman Wisata</title>
    <meta name="author" content="Suharmoyo">
    <meta name="description" content="Daftar Pengunjung Taman Wisata">
  <meta name="keyword" content="website, imdkom, belajar, covid, bengkayang">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- pustaka -->
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/popper.js/popper.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">

</head>
<body>
<body>
    <center>
    <h2>UBAH DATA</h2>
        <h5>Daftar Pengunjung Taman Wisata</h5>
    </center>    <br/>
    <br/>
    <div class="container">
        <form id='f_ubah'>
            <input type="text" id="id_kontak" value="<?php echo $id; ?>" style="display:none">
            <div class="form-group row">
                <div class="col-sm-6">
                    <label for="nama">Nama Lengkap :</label>
                    <input class="form-control" id="nama" type="text" value="<?php echo $nama; ?>">
                    <p><?php echo $nama; ?></p>
                </div>
                <div class="col-sm-12">
                    <label for="alamat">Alamat :</label>
                    <input class="form-control" id="alamat" type="text" value="<?php echo $alamat; ?>">
                </div>                
                <div class="col-sm-6">
                    <label for="kota">Kota :</label>
                    <input class="form-control" id="kota" type="text" value="<?php echo $kota; ?>">
                </div>   
                <div class="col-sm-8">
                    <label for="email">Email :</label>
                    <input class="form-control" id="email" type="text" value="<?php echo $email; ?>">
                </div>   							
            </div>        
            <button type="submit" class="btn btn-primary">Perbarui Data</button>
            <button id="btn_kembali" class="btn btn-primary">Kembali</button>
        </form>
        <p id="pesan" style="font-style: italic;color:red">--</p>
    </div>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(){
        
    $( "#f_ubah" ).submit(function( event ) {
        event.preventDefault();
        var para={};
        para.id_kontak=$( "#id_kontak" ).val();     
        para.nama=$( "#nama" ).val();     
        para.alamat=$( "#alamat" ).val();     
        para.kota=$( "#kota" ).val();  
        para.email=$( "#email" ).val();  		
        
        if (para.nama.length<3) {
            $("#pesan").html("*** Nama minimal 3 huruf");
            $("#nama").focus();
            return;
        }
        
        var posting = $.post( "kontak_ubah_simpan.php", para );
        posting.done(function( data ) {
            $("#pesan").html("*** "+data);
            $("#nama").focus();
        });
    });
    
    $( "#btn_kembali" ).click(function( event ) {
        event.preventDefault();
        document.location.href = "kontak_tampil.php";
    });
});
</script>

 

  • —- proses simpan, nama file : kontak_ubah_simpan.php

 

<?php
include "koneksi.php";

$id =  $_POST["id_kontak"];
$nama =  addslashes($_POST["nama"]);
$alamat = $_POST["alamat"];
$kota = $_POST["kota"];
$email = $_POST["email"];

$sql = "UPDATE kontak SET nama='$nama',alamat='$alamat',kota='$kota',email='$email' WHERE id='$id'";

if ($conn->query($sql) === TRUE) {
  echo "Data sudah diperbarui";
} else {
  echo "Ada kesalahan : " . $sql . "<br>" . $conn->error;
}

$conn->close();        
?>

<!-- terjadi error jika nama ada petik ganda pada saat ditampilkan kembali ->

 

 

Buat App Menghapus Data

  • Baca data dan tampilkan
  • Buat untuk tidak bisa diubah menggunakan read only / disable input
  • Klik hapus – proses

 

  • Nama file : kontak_hapus.php
<?php
include "koneksi.php";

$id = $_GET['id'];
 
$sql = "SELECT * FROM kontak WHERE ID='$id'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();

$id = $row["id"];
$nama =  $row["nama"];
$alamat = $row["alamat"];
$kota = $row["kota"];
$email = $row["email"];

$conn->close();        
?>

<!DOCTYPE html>
<html lang="id-ID">
<head>
  <title>Daftar Pengunjung Taman Wisata</title>
    <meta name="author" content="Suharmoyo">
    <meta name="description" content="Daftar Pengunjung Taman Wisata">
  <meta name="keyword" content="website, imdkom, belajar, covid, bengkayang">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- pustaka -->
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/popper.js/popper.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
</head>
<body>
<body style="background-color:#abcdef">
    <center>
    <h2>HAPUS DATA</h2>
        <h5>Daftar Pengunjung Taman Wisata</h5>
    </center>    <br/>
    <br/>
    <div class="container">
        <form id='f_hapus'>
            <input type="text" id="id_kontak" value="<?php echo $id; ?>" style="display:none">
            <div class="form-group row">
                <div class="col-sm-6">
                    <label for="nama">Nama Lengkap :</label>
                    <input class="form-control" id="nama" type="text" value="<?php echo $nama; ?>" readonly>
                </div>
                <div class="col-sm-12">
                    <label for="alamat">Alamat :</label>
                    <input class="form-control" id="alamat" type="text" value="<?php echo $alamat; ?>" readonly>
                </div>                
                <div class="col-sm-6">
                    <label for="kota">Kota :</label>
                    <input class="form-control" id="kota" type="text" value="<?php echo $kota; ?>" readonly>
                </div>  
                <div class="col-sm-8">
                    <label for="email">Email :</label>
                    <input class="form-control" id="email" type="text" value="<?php echo $email; ?>" readonly>
                </div>   								
            </div>        
            <button type="submit" class="btn btn-primary">Hapus Data</button>
            <button id="btn_kembali" class="btn btn-primary">Kembali</button>
        </form>
        <p id="pesan" style="font-style: italic;color:red">--</p>
    </div>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(){
        
    $( "#f_hapus" ).submit(function( event ) {
        event.preventDefault();
        var para={};
        para.id_kontak=$( "#id_kontak" ).val();     
        
        var posting = $.post( "kontak_hapus_proses.php", para );
        posting.done(function( data ) {
            $("#pesan").html("*** "+data);
        });
    });
    
    $( "#btn_kembali" ).click(function( event ) {
        event.preventDefault();
        document.location.href = "kontak_tampil.php";
    });
});
</script>

 

  • Nama file : kontak_hapus_proses.php
<?php
include "koneksi.php";

$id =  $_POST["id_kontak"];
 
$sql = "DELETE FROM kontak WHERE id='$id'";

if ($conn->query($sql) === TRUE) {
  echo "Data sudah dihapus";
} else {
  echo "Ada kesalahan : " . $sql . "<br>" . $conn->error;
}

$conn->close();        
?>

 

Buat App Menambah Data

  • Tampilkan form kosong
  • Ketikkan data yang ditambahkan
  • Simpan

 

  • Nama file : kontak_tambah.php
<!DOCTYPE html>
<html lang="id-ID">
<head>
  <title>Daftar Pengunjung Taman Wisata</title>
    <meta name="author" content="Suharmoyo">
    <meta name="description" content="Daftar Pengunjung Taman Wisata">
  <meta name="keyword" content="website, imdkom, belajar, covid, bengkayang">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- pustaka -->
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/popper.js/popper.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css"> 
</head>
<body>
<body>
    <center>
    <h2>TAMBAH DATA</h2>
        <h5>Daftar Pengunjung Taman Wisata</h5>
    </center>
    <br/>
    <br/>
    <div class="container">
        <form id='f_tambah'>
            <div class="form-group row">
                <div class="col-sm-6">
                    <label for="nama">Nama Lengkap :</label>
                    <input class="form-control" id="nama" type="text" placeholder="Ketikkan nama">
                </div>
                <div class="col-sm-12">
                    <label for="alamat">Alamat :</label>
                    <input class="form-control" id="alamat" type="text" placeholder="Ketikkan alamat">
                </div>                
                <div class="col-sm-6">
                    <label for="kota">Kota :</label>
                    <input class="form-control" id="kota" type="text" placeholder="Ketikkan kota">
                </div> 
                <div class="col-sm-8">
                  <label for="email">Email :</label>
                  <input class="form-control" id="email" type="text" placeholder="Ketikkan email">
                </div>   								
            </div>        
            <button type="submit" class="btn btn-primary">Tambahkan Data</button>
            <button id="btn_kembali" class="btn btn-primary">Kembali</button>
        </form>
        <p id="pesan" style="font-style: italic;color:red">--</p>
    </div>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(){
        
    $( "#f_tambah" ).submit(function( event ) {
        event.preventDefault();
        var para={};
        para.nama=$( "#nama" ).val();     
        para.alamat=$( "#alamat" ).val();     
        para.kota=$( "#kota" ).val();
        para.email=$( "#email" ).val();	
        
        if (para.nama.length<3) {
            $("#pesan").html("*** Nama minimal 3 huruf");
            $("#nama").focus();
            return;
        }
        
        var posting = $.post( "kontak_tambah_simpan.php", para );
        posting.done(function( data ) {
            $("#pesan").html("*** "+data);
            $("#nama").val("");
            $("#alamat").val("");
            $("#kota").val("");
            $("#nama").focus();
        });
    });
    
    $( "#btn_kembali" ).click(function( event ) {
        event.preventDefault();
        document.location.href = "kontak_tampil.php";
    });
});
</script>

 

  • Nama file : kontak_tambah_simpan.php
<?php
include "koneksi.php";

$nama =  addslashes($_POST["nama"]);
$alamat = $_POST["alamat"];
$kota = $_POST["kota"];
$email = $_POST["email"];

$sql = "INSERT INTO kontak (nama, alamat, kota, email) VALUES ('$nama', '$alamat', '$kota', '$email')";

if ($conn->query($sql) === TRUE) {
  echo "Data sudah disimpan";
} else {
  echo "Ada kesalahan : " . $sql . "<br>" . $conn->error;
}

$conn->close();        
?>