CREATE PADA PHP


Assalamualaikum, maaf guys udah lama ga upload karna lagi males hehe langsung aja pada blog kali ini saya akan menjelaskan atau memberi tau apa itu CREATE pada PHP menggunakan perintah SQL untuk mengelola database yang sudah kita buat di blog sebelumnya (lebih baik lihat dulu blog sebelumnya agar dari dasar dulu). Pada blog kali ini saya tidak akan banyak menjelaskan menegenai function atau methods yang ada di dalam kodingan. Tapi jangan khawatir saya sudah menyelipkan beberapa komentar untuk menjelaskan mengenai beberapa kodingan yang masih asing menurut kalian

1. Langkah Pertama

Buka file v_index.php di folder views yang telah kita buat sebelumnya dan tambahkan kodingan sebelumnya dengan kodingan yang baru di bawah ini 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Muhamamd Fahru Rozi XI RPL 2</title>
    <script src="https://kit.fontawesome.com/503eca56fe.js" crossorigin="anonymous"></script>     
</head>
<body>
<center>
    <div class="judul">
        <div class="smk">
            <img src="Assets/img/smk.png" width="50%">
        </div>
        <div class="jdl"><br><br>
            <h1>Data Siswa SMK Negeri 4 Bandung</h1>
        </div>
        <div class="ava">
            <img src="Assets/img/ava.png" width="50%">
        </div>
    </div>
    <table border="1" cellspacing="1" width="80%">
        <thead>
            <tr>
                <th>No</th>
                <th>NIS</th>
                <th>Nama Lengkap</th>
                <th>Jenis Kelamin</th>
                <th>Kelas</th>
                <th>Jurusan</th>
                <th>Alamat</th>
                <th>Golongan Darah</th>
                <th>Nama Ibu</th>
                <th>Nama Ayah</th>
            </tr>
        </thead>
        <tbody>
            <?php 
                $i = 1;
                while ($siswa = $list_siswa->fetch_array()) {
            ?>
            <tr align="center">
                    <td><?= $i++ ?></td>
                    <td><?= $siswa['nis'] ?></td>
                    <td><?= $siswa['nama_lengkap']?></td>
                    <td><?= $siswa['jenis_kelamin']?></td>
                    <td><?= $siswa['kelas']?></td>
                    <td><?= $siswa['jurusan']?></td>
                    <td><?= $siswa['alamat']?></td>
                    <td><?= $siswa['golongan_darah']?></td>
                    <td><?= $siswa['nama_ibu']?></td>
                    <td><?= $siswa['nama_ayah']?></td>
            </tr>
            <?php } ?>
        </tbody>
    </table>
    <br><br>

    <!-- Digunakan untuk membuat link yang mengarah ke file tambah.php -->
    <a href="tambah.php">
        <div class="add">
            <h4>Tambahkan Data</h4>
            <img src="Assets/img/plus.png" width="20%" class="plus">
        </div>
    </a>
</center>
</body>
</html>

Penjelasan : Kodingan yang baru ada link untuk menghubungkan ke file tambah data nantinya

2. Langkah Kedua

Buat file v_tambah.php di folder views dan masukan kodingan di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<center>
    <form action="tambah.php" method="POST">
        <fieldset>
            <legend>Input Data Siswa</legend>
            <table align="center" width="100%">
                <tr>
                    <td><label for="nis">NIS</label></td>
                    <td><input autocomplete="off" required type="text" name="nis"></td>
                </tr>
                <tr>
                    <td><label for="nama_lengkap">Nama Lengkap</label></td>                    
                    <td><input autocomplete="off" required type="text" name="nama_lengkap"></td>
                </tr>
                <tr>
                    <td><label for="jenis_kelamin">Jenis Kelamin</label></td>                    
                    <td>
                        <input autocomplete="off" required type="radio" name="jenis_kelamin" value="L">Laki - Laki
                        <input autocomplete="off" required type="radio" name="jenis_kelamin" value="P">Perempuan
                    </td>                    
                </tr>
                <tr>
                    <td><label for="kelas">Kelas</label></td>                    
                    <td>
                        <select required name="kelas" class="select1">
                            <option value="XI-RPL1">XI RPL 1</option>
                            <option value="XI-RPL2">XI RPL 2</option>
                            <option value="XI-RPL3">XI RPL 3</option>
                        </select>                
                    </td>
                </tr>
                <tr>
                    <td><label for="jurusan">Jurusan</label></td>                    
                    <td><input autocomplete="off" required type="text" name="jurusan"></td>
                </tr>
                <tr>
                    <td valign="top"><label for="alamat">Alamat</label></td>                    
                    <td><textarea required name="alamat"cols="40" rows="10"></textarea></td>
                </tr>
                <tr>
                    <td><label for="golongan_darah">Golongan Darah</label></td>                    
                    <td>
                        <select required name="golongan_darah" class="select2">
                            <option value="A">A</option>
                            <option value="AB">AB</option>
                            <option value="B">B</option>
                            <option value="O">O</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="nama_ibu">Nama Ibu</label></td>                    
                    <td><input autocomplete="off" required type="text" name="nama_ibu"></td>
                </tr>
                <tr>
                    <td><label for="nama_ayah">Nama Ayah</label></td>                    
                    <td><input autocomplete="off" required type="text" name="nama_ayah"></td>
                </tr>
                <tr>
                    <td colspan="3" valign="middle" ><br>                    
                        <input type="submit" value="Submit">
                        <a href="index.php"><div class="link"><div class="br"></div>Kembali</div></a>
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>
</center>
</body>
</html>

Penjelasan : Kodingan di atas digunakan sebagai form untuk user menambahkan data

3. Langkah Ketiga

Buat file tambah.php dan masukan kodingan di bawah ini

<?php 
    include 'lib/library.php';
    
    if($_SERVER['REQUEST_METHOD']=='POST') {
    // Digunakan untuk memeriksa apakah ada request dalam bentuk POST yang dikirim ke halaman ini? (Halaman tambah.php)
        $nis            = htmlspecialchars($_POST['nis']);
        $nama_lengkap   = htmlspecialchars($_POST['nama_lengkap']);
        $jenis_kelamin  = htmlspecialchars($_POST['jenis_kelamin']);
        $kelas          = htmlspecialchars($_POST['kelas']);
        $jurusan        = htmlspecialchars($_POST['jurusan']);
        $alamat         = htmlspecialchars($_POST['alamat']);
        $golongan_darah = htmlspecialchars($_POST['golongan_darah']);
        $nama_ibu       = htmlspecialchars($_POST['nama_ibu']);
        $nama_ayah      = htmlspecialchars($_POST['nama_ayah']);

        // Untuk membuat SQL string untuk memasukan data ke tabel siswa
        $sql = "INSERT INTO siswa (nis, nama_lengkap, jenis_kelamin, kelas, jurusan, alamat, golongan_darah, nama_ibu, nama_ayah) VALUES ('$nis', '$nama_lengkap', '$jenis_kelamin', '$kelas', '$jurusan', '$alamat', '$golongan_darah', '$nama_ibu', '$nama_ayah' )";
        
        $mysqli->query($sql) or die ($mysqli->error);
        // Digunakan untuk melakukan query ke SQL. Apabila error maka akan memunculkan pesan error nya

        header('location: index.php');
        // Digunakan untuk mengarahkan (redirect) halaman ke index.php
    }

    include 'views/v_tambah.php';
?>
<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" type="text/css" href="Assets/css/tambah_style.css">
</html>
Penjelasan ada di dalam kodingan agar lebih efektif

4. Pemberian CSS

a. CSS index

body {
    background-image: url(../img/bg.jpg);
    background-size: cover;
}

.judul {
    width:80%;
    height: 150px;
}

.judul .smk {
    float: left;
    width: 20%;
    height: 100%;
}

.judul .ava {
    margin-top: -117px;
    float: right;
    width: 20%;
    height: 100%;
}

.judul .jdl h1{
    margin-right: 280px;
}

img.plus {
    float: right;
    margin-right: 8px;
    margin-top: 5px;
}
h4 {
    float: right;
    margin-top: 15px;
    margin-right: 10px;
}

a {
    text-decoration: none;
    font-size: 18px;
    color: cornsilk;
}

.add {
    width: 200px;
    height: 50px;
    background: #43B05C;
    border-radius: 50px;
}

table {
    border : 3px solid #70E1EE;
    background : white;
}

th {
    background : #0A66A0;
}

tr:nth-child(even) {
    background : lightblue;
}

b. CSS Form Tambah Data

fieldset {
    background : white;
    border-radius : 20px;
    width : 30%;
    border:2px solid lightseagreen;
}

legend {
    border-radius: 10px;
    background : lightseagreen;
    font-size: 25px;
    text-align: center;
    color : black;
    padding : 15px;
}

input[type="text"] {
    margin-top: 7px;
    border-radius: 20px;
    border : 2px solid lightseagreen;
    width : 97%;
    height : 25px;
    padding :5px;
    background : transparent;
}

textarea {
    margin-top: 7px;
    border : 2px solid lightseagreen;
    background : transparent;
    border-radius : 30px;
    padding : 10px;
}

input[type="text"]:hover, textarea:hover {
    box-shadow: 0 0 4px 2px lightseagreen;
}

label {
    font-size: 18px;
}

.select1 {
    margin-left: 5px;
    width: 90px;
    height: 30px;    
    background: lightseagreen;
    border-radius:30px;
    padding: 5px;
}

.select2 {
    margin-left: 5px;
    width: 50px;
    height: 30px;
    background: lightseagreen;
    border-radius:30px;
    padding: 5px;
}

input[type="submit"]{
    float: left;
    width: 100px;
    height: 45px;
    background: #4FE249;
    border-radius:20px;
    border:2px solid lightseagreen;
    font-size: 17px;
}

.link {
    float: left;
    margin-left: 5px;
    width: 100px;
    height: 40px;
    background: red;
    border-radius:20px;
    border:2px solid lightseagreen;
    text-align: center;
}

a {
    text-decoration: none;
    color: black;
    font-size: 17px;
    margin-left: 17px;
    margin-top: -50px;
}

.br {
    height: 10px;
}

input[type="radio"] {
    margin-top: 10px;
    margin-bottom: 10px;
}

5. Hasil Kodingan Sekaligus Studi Kasus

Kita Masuk Kehalaman Index seperti di bawah ini


lalu klik tambahkan data untuk masuk ke halaman tambah data dan akan muncul seperti di bawah ini


isi data diri dan tekan submit untuk menambahkan data, jika tidak jadi menambahkan klik saja kembali maka sistem langsung mengarahkan ke halaman index tanpa mengirim datanya. jika sudah tersubmit, otomatis halaman akan berpindah ke index dan menampilkan data terbaru serperti di bawah ini


maka data akan bertambah sesuai yang diinputkan di halaman tambah data

Mungkin cukup sekian penjelasan yang dapat saya berikan semoga bermanfaat dan bisa di share ke temen temen lainnya agar kita belajar bersama di blog ini, jika masih ada yang bingung bisa ditanyakan di kolom komentar di bawah, wassalamualaikum.