Tutorial CRUD sederhana dengan mysqli dan validasi



Halo , perkenalkan nama saya Tia. Kali ini saya akan memberikan tutorial sederhana mengenai CRUD (Create, Read, Update, Delete) dengan menggunakan PHP.
Beberapa tools yang digunakan antara lain:
  1. XAMPP
  2. Text Editor
Langkah-langkah
  1. Pertama buat sebuah folder di dalam htdocs supaya bisa diakses pada localhost.
  2. Buka text editor anda dan buka folder yang telah dibuat.
Membuat Database
Akses localhost/phpmyadmin pada browser anda, kemudian buat sebuah database dengan nama dbcrud. Kemudian pada tab SQL ketikkan code berikut:


Buat file config.php
File config.php berfungsi untuk membuat dan mengecek koneksi ke database. Ketikkan code seperti berikut:


Buat file index.php
Ketikkan kode seperti berikut ini:
<?php
//memasukkan file config.php
include('config.php');
?>
<!DOCTYPE html>
<html>
<head>
    <title>CRUD TIA</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">CRDU TIA</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.php">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="tambah.php">Tambah</a>
                    </li>
                </ul>
            </div>
        </div>
        <!--slide menu-->
        <div class="header">
        <header>
        <button class="tombol">MENU</button>
        <nav class="menu">   
        <h4>Menu Navigasi</h4>
        <ul>
        <li><a href="index.php">HOME</a></li>
        <li><a href="tambah.php">TAMBAH</a></li>
      </ul>
        </nav>
        </header>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('.tombol').click(function(){
                $('.menu').toggleClass("slide-menu-tampil");
            });
        });
    </script>

    </nav>
   
    <div class="container" style="margin-top:20px">
        <h2>Daftar User</h2>
       
        <hr>
       
        <table class="table table-striped table-hover table-sm table-bordered">
            <thead class="thead-dark">
                <tr>
                    <th>NO.</th>
                    <th>NAMA</th>
                    <th>USERNAME</th>
                    <th>PASSWORD</th>
                    <th>EMAIL</th>
                    <th>AKSI</th>
                </tr>
            </thead>
            <tbody>
                <?php
                //query ke database SELECT tabel user urut berdasarkan id yang paling besar
                $sql = mysqli_query($koneksi, "SELECT * FROM user ORDER BY id DESC") or die(mysqli_error($koneksi));
                //jika query diatas menghasilkan nilai > 0 maka menjalankan script di bawah if...
                if(mysqli_num_rows($sql) > 0){
                    //membuat variabel $no untuk menyimpan nomor urut
                    $no = 1;
                    //melakukan perulangan while dengan dari dari query $sql
                    while($data = mysqli_fetch_assoc($sql)){
                        //menampilkan data perulangan
                        echo '
                        <tr>
                            <td>'.$no.'</td>
                            <td>'.$data['nama'].'</td>
                            <td>'.$data['username'].'</td>
                            <td>'.$data['password'].'</td>
                            <td>'.$data['email'].'</td>
                            <td>
                                <a href="edit.php?id='.$data['id'].'" class="badge badge-warning">Edit</a>
                                <a href="delete.php?id='.$data['id'].'" class="badge badge-danger" onclick="return confirm(\'Yakin ingin menghapus data ini?\')">Delete</a>
                            </td>
                        </tr>
                        ';
                        $no++;
                    }
                //jika query menghasilkan nilai 0
                }else{
                    echo '
                    <tr>
                        <td colspan="6">Tidak ada data.</td>
                    </tr>
                    ';
                }
                ?>
            <tbody>
        </table>
       
    </div>
   
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <div id="footer">
        Copyright &copy; 2019
        Designed by Tia STS
    </div>  
</body>
</html> 

TAMPILAN



Buat file style.css
Berikut kode untuk membuat css:
html,body{
    height:100%;
}
body{

background: url(image/image.jpg) no-repeat  fixed;
  background-size:100% 100%;
}

#footer{
    height:50px;
    line-height:50px;
    background:#333;
    width: 100%;
    color:#fff;
    text-align: center;

    position:absolute;
    bottom:0px;
}

#container{
    min-height:100%;
    position:relative;
}

/*slide menu **/
body{
            padding: 0;
            margin: 0;
        }
        header{
            background:#232323;
            padding:10px;   
            color:#fff;
            font-family:"open sans";
            overflow:hidden;
            margin: 0;
        }

        .judul{
            float: left;
            margin: 0;
        }

        .menu{
            position: fixed;
            background: #f6f6f6;
            color: #232323;           
            height: 100%;
            width: 200px;
            top: 0;
            left: -300px;
            -webkit-transition: left 0.2s;
            transition: left 0.2s;
            padding: 20px;
            border: 1px solid #ccc;           
        }

        .menu ul{
            padding: 0;
        }

        .menu li{
            list-style-type: none;
            padding: 10px 0px;
        }

        .menu a{
            color: #232323;
            text-decoration: none;
            font-size: 10pt;
        }

        .tombol{
            float: right;
            background: transparent;
            padding: 2px;
            color: #fff;
            border: 1px solid #fff;
            cursor: pointer;
        }

        .slide-menu-tampil{
            left: 0 !important;
        }
/*----------------------------- **/

Buat file tambah.php
Isi dari file tambah.php adalah form yang sesuai dengan field-field yang dibutuhkan seperti username, nama, email dan password. Berikut kode untuk membuat form:

<?php include('config.php'); ?>
<!DOCTYPE html>
<html>
<head>
    <title>CRUD TIA</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">CRDU TIA</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php">Home</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="tambah.php">Tambah</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
   
    <div class="container" style="margin-top:20px">
        <h2>Tambah User</h2>
       
        <hr>
       
        <?php
        if(isset($_POST['submit'])){
            $nama = @$_POST['nama'];
            $username = @$_POST['username'];
            $password = @$_POST['password'];
            $email = @$_POST['email'];
           
            $cek = mysqli_query($koneksi, "SELECT * FROM user WHERE username='$username'") or die(mysqli_error($koneksi));
           
            if(mysqli_num_rows($cek) == 0){
                $sql = mysqli_query($koneksi, "INSERT INTO user( nama,username, password, email) VALUES( '$nama','$username', '$password', '$email')") or die(mysqli_error($koneksi));
               
                if($sql){
                    echo '<script>alert("Berhasil menambahkan data."); document.location="tambah.php";</script>';
                }else{
                    echo '<div class="alert alert-warning">Gagal melakukan proses tambah data.</div>';
                }
            }else{
                echo '<div class="alert alert-warning">Gagal, Nama sudah terdaftar.</div>';
            }
        }
        ?>
       
        <form action="tambah.php" method="post">
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">NAMA</label>
                <div class="col-sm-10">
                    <input type="text" name="nama" id="nama" placeholder="Nama" class="form-control" required onkeypress='return harusHuruf(event)'>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">USERNAME</label>
                <div class="col-sm-10">
                    <input type="text" name="username" id="username" placeholder="Username" class="form-control" required="required">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">PASSWORD</label>
                <div class="col-sm-10">
                    <input type="password" name="password" id="password" maxlength="8" placeholder="Password" class="form-control" required="required">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">EMAIL</label>
                <div class="col-sm-10">
                    <input type="email" name="email" data-validate-length-range="8" id="email" onchange="ValidateEmail()" placeholder="example@mail.com" class="form-control" required="required">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-sm-2 col-form-label">&nbsp;</label>
                <div class="col-sm-10">
                    <input type="submit" name="submit" class="btn btn-primary" value="SIMPAN">
                    <a href="index.php" class="btn btn-danger"><i class="fa fa-ban"></i> KEMBALI</a>
                </div>
            </div>
        </form>
       
    </div>   

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
   
    <div id="footer">
        Copyright &copy; 2019
        Designed by Tia STS
    </div>
</body>
</html>

<script>

function harusHuruf(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode
        if ((charCode < 65 || charCode > 90)&&(charCode < 97 || charCode > 122)&&charCode>32)
            return false;
        return true;
}

</script>                                                                        TAMPILAN





Buat file edit.php
Ketikkan code berikut ini pada file edit.php:
<?php include('config.php'); ?>
<!DOCTYPE html>
<html>
<head>
    <title>CRUD TIA</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">CRDU TIA</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="tambah.php">Tambah</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
   
    <div class="container" style="margin-top:20px">
        <h2>Edit User</h2>
       
        <hr>
       
        <?php
        //jika sudah mendapatkan parameter GET id dari URL
        if(isset($_GET['id'])){
            //membuat variabel $id untuk menyimpan id dari GET id di URL
            $id = $_GET['id'];
           
            //query ke database SELECT tabel user berdasarkan id = $id
            $select = mysqli_query($koneksi, "SELECT * FROM user WHERE id='$id'") or die(mysqli_error($koneksi));
           
            //jika hasil query = 0 maka muncul pesan error
            if(mysqli_num_rows($select) == 0){
                echo '<div class="alert alert-warning">ID tidak ada dalam database.</div>';
                exit();
            //jika hasil query > 0
            }else{
                //membuat variabel $data dan menyimpan data row dari query
                $data = mysqli_fetch_assoc($select);
            }
        }
        ?>
       
        <?php
        //jika tombol simpan di tekan/klik
        if(isset($_POST['submit'])){
           
            $nama        = @$_POST['nama'];
            $username    = @$_POST['username'];
            $password   = @$_POST['password'];
            $email        = @$_POST['email'];
           
            $sql = mysqli_query($koneksi, "UPDATE user SET nama='$nama',username='$username', password='$password', email='$email' WHERE id='$id'") or die(mysqli_error($koneksi));
           
            if($sql){
                echo '<script>alert("Berhasil menyimpan data."); document.location="edit.php?id='.$id.'";</script>';
            }else{
                echo '<div class="alert alert-warning">Gagal melakukan proses edit data.</div>';
            }
        }
        ?>
       
        <form action="edit.php?id=<?php echo $id; ?>" method="post">
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">NAMA</label>
                <div class="col-sm-10">
                    <input type="text" name="nama" class="form-control" value="<?php echo $data['nama']; ?>" required>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-sm-2 col-form-label">USERNAME</label>
                <div class="col-sm-10">
                    <input type="text" name="username" class="form-control" value="<?php echo $data['username']; ?>" required>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">PASSWORD</label>
                <div class="col-sm-10">
                    <input type="text" name="password" class="form-control" value="<?php echo $data['password']; ?>" required>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">EMAIL</label>
                <div class="col-sm-10">
                    <input type="text" name="email" class="form-control" value="<?php echo $data['email']; ?>" required>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">&nbsp;</label>
                <div class="col-sm-10">
                    <input type="submit" name="submit" class="btn btn-primary" value="SIMPAN">
                    <a href="index.php" class="btn btn-warning">KEMBALI</a>
                </div>
            </div>
        </form>
       
    </div>
   
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>     
        Designed by Tia STS
    </div>
</body>
</html> 
       TAMPILAN





Buat file hapus.php
Ketikkan code berikut ini pada file delete.php:
<?php
//include file config.php
include('config.php');

//jika benar mendapatkan GET id dari URL
if(isset($_GET['id'])){
    //membuat variabel $id yang menyimpan nilai dari $_GET['id']
    $id = $_GET['id'];
   
    //melakukan query ke database, dengan cara SELECT data yang memiliki id yang sama dengan variabel $id
    $cek = mysqli_query($koneksi, "SELECT * FROM user WHERE id='$id'") or die(mysqli_error($koneksi));
   
    //jika query menghasilkan nilai > 0 maka eksekusi script di bawah
    if(mysqli_num_rows($cek) > 0){
        //query ke database DELETE untuk menghapus data dengan kondisi id=$id
        $del = mysqli_query($koneksi, "DELETE FROM user WHERE id='$id'") or die(mysqli_error($koneksi));
        if($del){
            echo '<script>alert("Berhasil menghapus data."); document.location="index.php";</script>';
        }else{
            echo '<script>alert("Gagal menghapus data."); document.location="index.php";</script>';
        }
    }else{
        echo '<script>alert("ID tidak ditemukan di database."); document.location="index.php";</script>';
    }
}else{
    echo '<script>alert("ID tidak ditemukan di database."); document.location="index.php";</script>';
}

?>

 SOURCE CODE : https://github.com/tia19/crudtia


Komentar

Posting Komentar

Translate