Cara menggunakan crud bootstrap

Question

Pada tahap awal pastikan laptop atau komputer sudah terinstall XAMPP, Nama XAMPP merupakan singkatan dari X (tempat sistem operasi apapun), Apache, MySQL, PHP dan Perl. sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl yang bisa didownload di url berikut :

https://www.apachefriends.org/download.html

bisa menggunakan versi terbaru yaitu versi 8

Pastikan sebelum memulai praktik, XAMPP (Apache dan MySQL) dalam keadaan aktive, seperti gambar berikut :

Langkah berikutnya membuat folder ayobelajarform di drive C://xampp/htdochs/ seperti gambar berikut :

Selanjutnya membuat folder foto pada folder ayobelajarform dengan hasil seperti berikut :

Selanjutnya download bootstrap pada link berikut :

https://getbootstrap.com/docs/5.1/getting-started/download/

klik tombol download

Setelah di download masukan file Bootstap ke folder ayobelajarform dan lakukan extract file bootstrap-5.1.0-dist.zip sehingga isi folder ayobelajarform menjadi seperti berikut :

Selanjutnya membuat file yang dibutuhkan didalam folder ayobelajarform dengan cara seperti gambar berikut :

klik menu File > Open Folder (ayobelajarform yang sudah dibuat)

Folder ayobelajarform sudah masuk pada visual studio code

Selanjutnya menambahkan file index.php, koneksi.php, create.php, proses_create.php, update.php, proses_update.php, delete.php dengan cara klik New File seperti gambar dibawah ini :

tuliskan index.php lalu tekan enter

setelah di tekan enter maka hasilnya seperti gambar dibawah ini :

Selanjutnya bisa diteruskan menambahkan file koneksi.php, create.php, proses_create.php, update.php, proses_update.php, delete.php dengan hasil akhirnya seperti gambar dibawah ini :

Selanjutnya membuat membuat database baru dengan nama database formsiswa dan membuat tabel pada database dengan nama siswa jumlah kolom 10, dengan mengikuti cara dibawah ini :

Buka tab baru dengan mengetikan localhost/phpmyadmin

Klik New lalu tuliskan nama database formsiswa

Tuliskan nama database formsiswa lalu klik tombol create

Pada Create table isi name : siswa dan columns 10 lalu klik Go

Jika sudah terisi sesuai di gambar lakukan klik SAVE

Jika berhasil hasilnya seperti ini

SELANJUTNYA PASTE KAN CODE SEPERTI LANGKAH-LANGKAH DIBAWAH INI :

Paste code berikut pada file index.php yang sudah dibuat :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List Data Siswa</title>

    <!-- Link CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Style CSS -->
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Arial';
            font-weight: 500;
        }

        .container {
            margin-top: 50px;
        }

        .foto {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    </style>

    <!-- Link JS -->
    <script src="js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="text-center mb-5">List Data Siswa</h2>
        <?php 
            if(isset($_GET['pesan'])){
                if($_GET['pesan'] == "insert"){
                    echo "
                    <script>
                    alert('Siswa Berhasil di Tambah')
                    </script>
                  ";
                }elseif ($_GET['pesan'] == "update") {
                    echo "
                    <script>
                    alert('Siswa Berhasil di Update')
                    </script>
                  ";
                }
                elseif ($_GET['pesan'] == "delete") {
                    echo "
                    <script>
                    alert('Siswa Berhasil di Hapus')
                    </script>
                  ";
                }
            }
	    ?>

        <br>
        <a href="create.php" class="btn btn-primary mb-4">Tambah Siswa</a>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Nama</th>
                    <th scope="col">Umur</th>
                    <th scope="col">Jenis Kelamin</th>
                    <th scope="col">Tgl Lahir</th>
                    <th scope="col">hobi</th>
                    <th scope="col">Kelas</th>
                    <th scope="col">Deskripsi</th>
                    <th scope="col">Opsi</th>
                </tr>
            </thead>
            <tbody>
            <?php 
            
            include 'koneksi.php';
            $data = mysqli_query($koneksi, "select * from siswa");
            while($d = mysqli_fetch_array($data)){
                ?>
                <tr>
                    <th scope="row"><img class="foto" src="<?php echo "foto/".$d['foto']; ?>"></th>
                    <td><?php echo $d['nama'] ?></td>
                    <td><?php echo $d['umur'] ?> Tahun</td>
                    <td><?php echo $d['jenis_kelamin'] ?></td>
                    <td><?php echo $d['tgl_lahir'] ?></td>
                    <td><?php echo $d['hobi'] ?></td>
                    <td><?php echo $d['kelas'] ?> <?php echo $d['jurusan'] ?></td>
                    <td><?php echo $d['deskripsi'] ?></td>
                    <td>
                        <a href="update.php?id=<?php echo $d['id']; ?>" class="btn btn-warning text-white mb-2">Edit</a>
                        <a href="delete.php?id=<?php echo $d['id']; ?>" class="btn btn-danger mb-2">Hapus</a>
                    </td>
                </tr>
                <?php
            }
            ?>
            </tbody>
        </table>

    </div>
</body>

</html>

2. Paste code berikut pada file koneksi.php yang sudah dibuat :

<?php

$koneksi = mysqli_connect("localhost", "root", "", "formsiswa");

if (mysqli_connect_errno()) {
    echo "Database Tidak Terkoneksi";
}

mysqli_connect_error();

?>

3. Paste code berikut pada file create.php yang sudah dibuat :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Data Siswa</title>

    <!-- Link CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Style CSS -->
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Arial';
            font-weight: 500;
        }

        .container {
            margin-top: 50px;
        }

        .file {
            visibility: hidden;
            position: absolute;
        }
    </style>

    <!-- Link JS -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</head>

<body>
    <div class="container">
        <div class="card">
            <div class="card-header text-center font-weight-bold">
                Tambah Data Siswa
            </div>
            <div class="card-body">
                <form method="post" action="proses_create.php" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="nama">Nama :</label>
                        <input type="text" name="nama" class="form-control" id="nama" placeholder="Nama Siswa" required>
                    </div>
                    <div class="form-group">
                        <label for="umur">Umur :</label>
                        <input type="number" name="umur" class="form-control" id="umur" placeholder="Umur Siswa"
                            required>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">Jenis Kelamin :</label>
                        <select class="form-control" name="jenis_kelamin" id="exampleFormControlSelect1">
                            <option>Pilih Jenis Kelamin</option>
                            <option value="Laki-Laki">Laki - Laki</option>
                            <option value="Perempuan">Perempuan</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="tgl_lahir">Tanggal Lahir :</label>
                        <input type="date" name="tgl_lahir" class="form-control" id="tgl_lahir"
                            placeholder="Tanggal Lahir Siswa" required>
                    </div>
                    <div class="form-group">
                        <label for="kelas">Kelas :</label><br>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="10" value="10" name="kelas" class="custom-control-input">
                            <label class="custom-control-label" for="10">10</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="11" value="11" name="kelas" class="custom-control-input">
                            <label class="custom-control-label" for="11">11</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="12" value="12" name="kelas" class="custom-control-input">
                            <label class="custom-control-label" for="12">12</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="kelas">Jurusan :</label><br>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="RPL" value="RPL" name="jurusan" class="custom-control-input">
                            <label class="custom-control-label" for="RPL">RPL</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="TKJ" value="TKJ" name="jurusan" class="custom-control-input">
                            <label class="custom-control-label" for="TKJ">TKJ</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="SIJA" value="SIJA" name="jurusan" class="custom-control-input">
                            <label class="custom-control-label" for="SIJA">SIJA</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="MM" value="MM" name="jurusan" class="custom-control-input">
                            <label class="custom-control-label" for="MM">MM</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="hobi">Hobi :</label><br>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobi[]" id="inlineCheckbox1"
                                value="Ngoding">
                            <label class="form-check-label" for="inlineCheckbox1">Ngoding</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobi[]" id="inlineCheckbox2"
                                value="Gamer">
                            <label class="form-check-label" for="inlineCheckbox2">Gamer</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobi[]" id="inlineCheckbox3"
                                value="Futsal">
                            <label class="form-check-label" for="inlineCheckbox3">Futsal</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1">Biodata Siswa</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Deskripsi Siswa"
                            name="deskripsi" rows="3"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="image">Upload Foto</label><br>
                        <img src="https://via.placeholder.com/300" id="preview" class="img-fluid" width="300px"
                            height="300px">
                        <input type="file" name="foto" class="file" accept="image/*">
                        <div class="input-group my-3">
                            <input type="text" class="form-control" disabled placeholder="Upload Foto" id="file">
                            <div class="input-group-append">
                                <button type="button" class="browse btn btn-primary">Browse</button>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success btn-block">Submit</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(document).on("click", ".browse", function () {
            var file = $(this).parents().find(".file");
            file.trigger("click");
        });
        $('input[type="file"]').change(function (e) {
            var fileName = e.target.files[0].name;
            $("#file").val(fileName);

            var reader = new FileReader();
            reader.onload = function (e) {
                // get loaded data and render thumbnail.
                document.getElementById("preview").src = e.target.result;
            };
            // read the image file as a data URL.
            reader.readAsDataURL(this.files[0]);
        });
    </script>
</body>

</html>

4. Paste code berikut pada file proses_create.php yang sudah dibuat :

<?php

include 'koneksi.php';

$nama = $_POST['nama'];
$umur = $_POST['umur'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$tgl_lahir = $_POST['tgl_lahir'];
$kelas = $_POST['kelas'];
$jurusan = $_POST['jurusan'];
$deskripsi = $_POST['deskripsi'];

$namaFile = $_FILES['foto']['name'];
$namaSementara = $_FILES['foto']['tmp_name'];
$dirUpload = "foto/";

$terupload = move_uploaded_file($namaSementara, $dirUpload.$namaFile);

$hobi = implode(",", $_POST['hobi']);

mysqli_query($koneksi, "INSERT INTO siswa VALUES('', '$nama' , '$umur' , '$jenis_kelamin' , '$tgl_lahir' , '$kelas' , '$jurusan' , '$hobi' , '$deskripsi' , '$namaFile')");

header("location:index.php?pesan=insert");

?>

5. Paste code berikut pada file update.php yang sudah dibuat :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Data Siswa</title>

    <!-- Link CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Style CSS -->
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Arial';
            font-weight: 500;
        }

        .container {
            margin-top: 50px;
        }

        .file {
            visibility: hidden;
            position: absolute;
        }
    </style>

    <!-- Link JS -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</head>

<body>
    <div class="container">
        <?php
            include 'koneksi.php';
            $id = $_GET['id'];
            $data = mysqli_query($koneksi,"select * from siswa where id='$id'");
            while($d = mysqli_fetch_array($data)){
            $datahobi=explode(',', $d['hobi']);
        ?>

        <div class="card">
            <div class="card-header text-center font-weight-bold">
                Edit Data Siswa
            </div>
            <div class="card-body">
                <form method="post" action="proses_update.php" enctype="multipart/form-data">
                    <div class="form-group">
                        <input type="hidden" name="id" value="<?php echo $d['id'] ?>">
                        <label for="nama">Nama :</label>
                        <input type="text" name="nama" class="form-control" id="nama" value="<?php echo $d['nama'] ?>" placeholder="Nama Siswa" required>
                    </div>
                    <div class="form-group">
                        <label for="umur">Umur :</label>
                        <input type="number" name="umur" class="form-control" id="umur" value="<?php echo $d['umur'] ?>" placeholder="Umur Siswa"
                            required>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">Jenis Kelamin :</label>
                        <select class="form-control" name="jenis_kelamin" id="exampleFormControlSelect1">
                            <?php
                                if ($d['jenis_kelamin'] == 'Laki-Laki') {
                                    echo "<option value='Laki-Laki'>Laki - Laki</option>";
                                    echo "<option value='Perempuan'>Perempuan</option>";
                                } else {
                                    echo "<option value='Perempuan'>Perempuan</option>";
                                    echo "<option value='Laki-Laki'>Laki - Laki</option>";
                                }
                            ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="tgl_lahir">Tanggal Lahir :</label>
                        <input type="date" name="tgl_lahir" class="form-control" value="<?php echo $d['tgl_lahir'] ?>" id="tgl_lahir"
                            placeholder="Tanggal Lahir Siswa" required>
                    </div>
                    <div class="form-group">
                        <label for="kelas">Kelas :</label><br>
                        <?php
                                if ($d['kelas'] == '10') {
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='10' value='10' name='kelas' class='custom-control-input' checked>
                                        <label class='custom-control-label' for='10'>10</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='11' value='11' name='kelas' class='custom-control-input'>
                                        <label class='custom-control-label' for='11'>11</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='10' value='12' name='kelas' class='custom-control-input'>
                                        <label class='custom-control-label' for='12'>12</label>
                                    </div>
                                    ";
                                }elseif ($d['kelas'] == '11') {
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='10' value='10' name='kelas' class='custom-control-input'>
                                        <label class='custom-control-label' for='10'>10</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='11' value='11' name='kelas' class='custom-control-input' checked>
                                        <label class='custom-control-label' for='11'>11</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='12' value='12' name='kelas' class='custom-control-input'>
                                        <label class='custom-control-label' for='12'>12</label>
                                    </div>
                                    ";
                                }
                                 else {
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='10' value='10' name='kelas' class='custom-control-input'>
                                        <label class='custom-control-label' for='10'>10</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='11' value='11' name='kelas' class='custom-control-input'>
                                        <label class='custom-control-label' for='11'>11</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='12' value='12' name='kelas' class='custom-control-input' checked>
                                        <label class='custom-control-label' for='12'>12</label>
                                    </div>
                                    ";
                                }
                            ?>
                    </div>
                    <div class="form-group">
                        <label for="kelas">Jurusan :</label><br>
                        <?php
                                if ($d['jurusan'] == 'RPL') {
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='RPL' value='RPL' name='jurusan' class='custom-control-input' checked>
                                        <label class='custom-control-label' for='RPL'>RPL</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='TKJ' value='TKJ' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='TKJ'>TKJ</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='SIJA' value='SIJA' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='SIJA'>SIJA</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='MM' value='MM' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='MM'>MM</label>
                                    </div>
                                    ";
                                }elseif ($d['jurusan'] == 'TKJ') {
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='RPL' value='RPL' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='RPL'>RPL</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='TKJ' value='TKJ' name='jurusan' class='custom-control-input' checked>
                                        <label class='custom-control-label' for='TKJ'>TKJ</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='SIJA' value='SIJA' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='SIJA'>SIJA</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='MM' value='MM' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='MM'>MM</label>
                                    </div>
                                    ";
                                }elseif ($d['jurusan'] == 'SIJA') {
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='RPL' value='RPL' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='RPL'>RPL</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='TKJ' value='TKJ' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='TKJ'>TKJ</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='SIJA' value='SIJA' name='jurusan' class='custom-control-input' checked>
                                        <label class='custom-control-label' for='SIJA'>SIJA</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='MM' value='MM' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='MM'>MM</label>
                                    </div>
                                    ";
                                }
                                 else {
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='RPL' value='RPL' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='RPL'>RPL</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='TKJ' value='TKJ' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='TKJ'>TKJ</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='SIJA' value='SIJA' name='jurusan' class='custom-control-input'>
                                        <label class='custom-control-label' for='SIJA'>SIJA</label>
                                    </div>
                                    ";
                                    echo "
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='MM' value='MM' name='jurusan' class='custom-control-input' checked>
                                        <label class='custom-control-label' for='MM'>MM</label>
                                    </div>
                                    ";
                                }
                            ?>
                    </div>
                    <div class="form-group">
                        <label for="hobi">Hobi :</label><br>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobi[]" <?php if (in_array("Ngoding", $datahobi)) echo "checked";?> id="inlineCheckbox1"
                                value="Ngoding">
                            <label class="form-check-label" for="inlineCheckbox1">Ngoding</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobi[]" <?php if (in_array("Gamer", $datahobi)) echo "checked";?> id="inlineCheckbox2"
                                value="Gamer">
                            <label class="form-check-label" for="inlineCheckbox2">Gamer</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobi[]" <?php if (in_array("Futsal", $datahobi)) echo "checked";?> id="inlineCheckbox3"
                                value="Futsal">
                            <label class="form-check-label" for="inlineCheckbox3">Futsal</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1">Deksripsi Siswa</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Deskripsi Siswa"
                            name="deskripsi" rows="3"><?php echo $d['deskripsi'] ?></textarea>
                    </div>

                    <div class="form-group">
                        <label for="image">Upload Foto</label><br>
                        <img src="<?php echo "foto/".$d['foto']; ?>" id="preview" class="img-fluid" width="300px"
                            height="300px">
                        <input type="file" name="foto" class="file" accept="image/*">
                        <div class="input-group my-3">
                            <input type="text" class="form-control" disabled placeholder="<?php echo $d['foto'] ?>" id="file">
                            <div class="input-group-append">
                                <button type="button" class="browse btn btn-primary">Browse</button>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success btn-block">Submit</button>
                </form>
            </div>
        </div>
        <?php 
                       }
                    ?>
    </div>

    <script>
        $(document).on("click", ".browse", function () {
            var file = $(this).parents().find(".file");
            file.trigger("click");
        });
        $('input[type="file"]').change(function (e) {
            var fileName = e.target.files[0].name;
            $("#file").val(fileName);

            var reader = new FileReader();
            reader.onload = function (e) {
                // get loaded data and render thumbnail.
                document.getElementById("preview").src = e.target.result;
            };
            // read the image file as a data URL.
            reader.readAsDataURL(this.files[0]);
        });
    </script>
</body>

</html>

6. Paste code berikut pada file proses_update.php yang sudah dibuat :

<?php

include 'koneksi.php';

$id = $_POST['id'];
$nama = $_POST['nama'];
$umur = $_POST['umur'];
$tgl_lahir = $_POST['tgl_lahir'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$kelas = $_POST['kelas'];
$jurusan = $_POST['jurusan'];
$deskripsi = $_POST['deskripsi'];
$namaFile = $_FILES['foto']['name'];
if ($namaFile != "") {
    $namaSementara = $_FILES['foto']['tmp_name'];

    $dirUpload = "foto/";

    $terupload = move_uploaded_file($namaSementara, $dirUpload.$namaFile);


    $hobi = implode(",", $_POST['hobi']);

    $query = mysqli_query($koneksi, "UPDATE siswa set nama='$nama', umur='$umur' , jenis_kelamin='$jenis_kelamin' , tgl_lahir='$tgl_lahir', kelas='$kelas', jurusan='$jurusan' , hobi='$hobi', deskripsi='$deskripsi' , foto='$namaFile' WHERE id='$id'");

    if ($query) {
        header('location:index.php?pesan=update');
    }
} else {
    $data = mysqli_query($koneksi,"select * from siswa where id='$id'");
    $p = mysqli_fetch_array($data);
    $foto = $p['foto'];
    $hobi = implode(",", $_POST['hobi']);

    $query = mysqli_query($koneksi, "UPDATE siswa set nama='$nama', umur='$umur' , jenis_kelamin='$jenis_kelamin' , tgl_lahir='$tgl_lahir', kelas='$kelas', jurusan='$jurusan' , hobi='$hobi', deskripsi='$deskripsi' , foto='$foto' WHERE id='$id'");

    if ($query) {
        header('location:index.php?pesan=update');
    }
}

?>

7. Paste code berikut pada file delete.php yang sudah dibuat :

<?php

include 'koneksi.php';

$id = $_GET['id'];

mysqli_query($koneksi, "DELETE FROM siswa WHERE id='$id'");

header("location:index.php?pesan=delete");

?>

Selanjutnya di uji coba dengan menjalankan atau membuka url localhost/ayobelajarform

Tampilan Jika Berhasil

Selanjutnya di Uji Coba dengan mengklik Tombol Tambah Data

Tampilan Jika Berhasil Tambah Siswa

Selanjutnya silahkan dicoba melakukan Tambah Data kembali dan mencoba melakukan Edit pada tombol Edit serta mencoba melakukan Hapus pada tombol Hapus.

SELESAI, dan Selanjutnya teman2 bisa latihan mencoba mengembangkan dengan pembuatan form atau studi kasus yang berbeda. semoga lancar dan salam semangat yaa 🙂

kode bootstrap

Cara menggunakan crud bootstrap

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social