Cara menggunakan javascript bootstrap mentah

Question

Pada tahap awal pastikan laptop atau komputer sudah terinstall XAMPP Nama XAMPP merupakan singkatan dari X (apapun sistem operasinya), Apache, MySQL, PHP dan Perl. sebagai server mandiri (localhost), yang terdiri dari program Apache HTTP Server, database MySQL, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl yang dapat diunduh di url berikut

https. // www. apachefriends. org/unduh. html

bisa menggunakan versi terbaru yaitu versi 8

Pastikan sebelum memulai latihan, XAMPP (Apache dan MySQL) sudah aktif, seperti terlihat pada gambar berikut

Langkah selanjutnya adalah membuat folder ayobelajarform di drive C. //xampp/htdochs/ seperti gambar berikut

Kemudian buat folder foto di folder ayobelajarform dengan hasil sebagai berikut

Kemudian unduh bootstrap pada tautan berikut

https. //getbootstrap. com/docs/5. 1/memulai/unduh/

klik tombol unduh

Setelah download, masukkan file Bootstap ke dalam folder ayobelajarform dan ekstrak file bootstrap-5. 1. 0-dist. zip hingga isi folder ayobelajarform adalah sebagai berikut

Selanjutnya buat file-file yang diperlukan di folder ayobelajarform dengan cara seperti gambar berikut

klik menu File > Open Folder (mari kita pelajari form yang sudah dibuat)

Folder ayobelajarform sudah ada di kode visual studio

Kemudian tambahkan file indeks. php, koneksi. php, buat. php, proses_buat. php, perbarui. php, proses_pembaruan. php, hapus. php dengan mengklik New File seperti yang terlihat pada gambar di bawah ini

menulis indeks. php dan tekan enter

setelah menekan enter, hasilnya seperti yang terlihat pada gambar di bawah ini

Anda dapat terus menambahkan file koneksi. php, buat. php, proses_buat. php, perbarui. php, proses_pembaruan. php, hapus. php dengan hasil akhir seperti pada gambar di bawah ini

Selanjutnya buat database baru dengan nama database formsiswa dan buat tabel di database dengan nama siswa sebanyak 10 kolom dengan mengikuti cara dibawah ini

Buka tab baru dengan mengetikkan localhost/phpmyadmin

Klik New lalu tuliskan nama database formsiswa

Tulis nama database formsiswa dan klik tombol create

Pada tabel Create isikan nama. siswa dan kolom 10 lalu klik Go

Jika sudah diisi seperti pada gambar, klik SAVE

Jika berhasil maka hasilnya seperti ini

LALU PASTE KODE SEPERTI LANGKAH-LANGKAH DI BAWAH INI

Tempel kode berikut di file indeks. 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. Rekatkan kode berikut di 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. Rekatkan kode berikut di file buat. 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. Rekatkan kode berikut di file process_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. Rekatkan kode berikut di file pembaruan. 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. Rekatkan kode berikut di file process_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. Rekatkan kode berikut di file hapus. 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 diuji dengan menjalankan atau membuka url localhost/ayobelajarform

Tampilkan Jika Berhasil

Selanjutnya di Test dengan mengklik Tombol Add Data

Tampilkan Jika Berhasil Menambah Siswa

Selanjutnya silahkan coba Tambah Data lagi dan coba Edit pada tombol Edit dan coba Hapus pada tombol Hapus

SELESAI, selanjutnya teman-teman bisa praktek mencoba mengembangkan dengan membuat berbagai bentuk atau studi kasus. semoga lancar dan semangat 🙂

kode javascript