Cara membuat Crud Sederhana Menggunakan PHP & Mysqli With Boostrapp

Langkah Pertama Membuat database dengan nama 

- crud_php di http://localhost:8080/phpmyadmin/

Langkah kedua Membuat table diDatabase 

CREATE TABLE `tbl_data` (

  `id_data` int(11) NOT NULL,

  `nama` char(90) NOT NULL,

  `jenis_kelamin` enum('L','P') NOT NULL,

  `tanggal_lahir` char(40) NOT NULL,

  `alamat` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;


Langkah Ketiga Buat file index.php

Didalam file ini ada beberapa proses input edit dan delete kedalam database seperti :

 if(isset($_POST['input'])){ // fungsi ini digunakan untuk menginput data kedalama database

 if(isset($_POST['edit'])){ // fungsi ini digunakan untuk mengedit data berdasarakan id_data kedalam database

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Crud Php & Bootstrap 4</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>



  <!-- Font -->

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  

    <!-- data tab -->

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">


    <!-- date -->

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>

    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />


</head>

<body>


<nav class="navbar navbar-expand-md bg-dark navbar-dark">

  <!-- Brand -->

  <a class="navbar-brand" href="#">Crud PHP Mysqli & Bootstrap</a>


  <!-- Toggler/collapsibe Button -->

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

    <span class="navbar-toggler-icon"></span>

  </button>


  <!-- Navbar links -->

  <div class="collapse navbar-collapse" id="collapsibleNavbar">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" href="index.php">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="index.php?data_mahasiswa">Data Mahasiswa</a>

      </li>

      <li class="nav-item">

        <a class="nav-link text-danger" href="#">Logout</a>

      </li>

    </ul>

  </div>

</nav>

<br>


<div class="container">

    <?php

    $conn = mysqli_connect('localhost','root','','crud_php') or die(mysqli_error());

     //$_POST

      if(isset($_POST['input'])){

        $nama               = $_POST['nama'];

        $jenis_kelamin      = $_POST['jenis_kelamin'];

        $tanggal_lahir      = $_POST['tanggal_lahir'];

        $alamat             = $_POST['alamat'];

        

                    //insert database

                    $insert = mysqli_query($conn,"INSERT INTO `tbl_data` (`nama`,`jenis_kelamin`,`tanggal_lahir`,`alamat`)

                                                                    values('$nama','$jenis_kelamin','$tanggal_lahir','$alamat')") or die(mysqli_error());

                            if($insert=="True"){

                                setcookie("message", "Berhasil Input Kedatabase", time()+600);

                            }else{

                                setcookie("message","Gagal Input Kedatabase", time()+600);

                            }

                    header('location: index.php?data_mahasiswa');

      }else

        if(isset($_POST['edit'])){

            $id_data  = $_POST['id_data'];

            $nama     = $_POST['nama'];

            $jenis_kelamin    = $_POST['jenis_kelamin'];

            $tanggal_lahir    = $_POST['tanggal_lahir'];

            $alamat           = $_POST['alamat'];


            //update kedata base

            $update = mysqli_query($conn,"UPDATE `tbl_data` SET nama='$nama', jenis_kelamin='$jenis_kelamin', tanggal_lahir='$tanggal_lahir', alamat='$alamat'

                                              WHERE id_data='$id_data' ");

                            if($update=="True"){

                                setcookie("message", "Berhasil Edit Kedatabase", time()+600);

                            }else{

                                setcookie("message", "Gagal Edit Kedatabase", time()+600);

                            }

                            header('location: index.php?data_mahasiswa');

        }else

            if(isset($_GET['edit'])){

                $id_data       = $_GET['edit'];

                include_once"edit.php";

            }else

            if(isset($_GET['hapus'])){

                $id_data    = $_GET['hapus'];

                //hapus database berdasarkan id_data

                $delete = mysqli_query($conn,"DELETE FROM `tbl_data` WHERE id_data='$id_data' ");

                    if($delete){

                      setcookie("message", "Berhasil Hapus Kedatabase", time()+600);

                    }else{

                      setcookie("message", "Gagal Hapus Kedatabase", time()+600);

                    }

                    header('location: index.php?data_mahasiswa');

            }else

            if(isset($_GET['data_mahasiswa'])){

                // Cek apakah terdapat cookie dengan nama message

                if(!empty($_COOKIE["message"])){ // Jika ada

                    echo"<div class='alert alert-success alert-dismissible'>

                        <button type='button' class='close' data-dismiss='alert'>&times;</button>

                        <strong>Success!</strong> $_COOKIE[message] 

                      </div>";

                }

                include_once"data_mahasiswa.php";

            }else{

                echo'<div class="alert alert-secondary">

                <strong>Home</strong> Crud Sederhana Menggunakan Php Mysqli & Boostrapp By Fadillah Nugroho

              </div>';

            }

        ?>



<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

<script>

        //datatab

        $(document).ready(function() {

            $('#datatab').DataTable();

        } );


        //datepicker

        $('#datepicker').datepicker({

            uiLibrary: 'bootstrap4'

        });


        //konfirmasi Hapus

        function konfirmasi(){

            tanya = confirm("Anda Yakin Akan Menghapus Data ?");

              if(tanya == true) return true;

                else return false;

        }

</script>


</div>


</body>

</html>


Langkah Ke empat Buat File data_mahasiswa.php
file ini digunakan untuk menampilkan data mahasiswa yang sudah diinput kan kedalam database serta file ini terdapat form modal yang nantinya digunakan untuk menginput data 

<div class="overflow-hidden alert alert-secondary">
                    <strong><span class="glyphicon glyphicon-home"></span> Data Mahasiswa</strong> <a href="#"  data-toggle="modal" data-target="#myModal" class="btn btn-primary text-white"><i class='fa fa-pencil'></i> Input</a>
                </div>

                <table class="table table-striped table-hover" id="datatab">
                <thead>
                <tr class="bg-dark text-white">
                    <th>No</th>
                    <th>Nama</th>
                    <th>Jenis Kelamin</th>
                    <th>Tanggal Lahir</th>
                    <th>Alamat</th>
                    <th>Menu</th>
                </tr>
                </thead>
                <tbody>
                <?php
                    $data = mysqli_query($conn,"select * from tbl_data");
                        $no =1;
                        while($row = mysqli_fetch_array($data)){
                            echo"<tr>
                                <td>$no</td>
                                <td>$row[nama]</td>
                                <td>$row[jenis_kelamin]</td>
                                <td>".$row['tanggal_lahir']."</td>
                                <td>".$row['alamat']."</td>
                                <td><a class='btn btn-dark text-success' title='edit' href='index.php?edit=$row[id_data]'><i class='fa fa-edit'></i></a> <a onclick='return konfirmasi()' href='index.php?hapus=$row[id_data]' class='btn btn-danger text-white'><i class='fa fa-trash'></i></a></td>
                            </tr>";
                        $no++;
                        }
                ?>
                 </tbody>
                </table>
                

          <!-- The Modal -->
          <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Input Data Mahasiswa</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <form action="" method="post">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="nama">Nama</label>
                                <input type="nama" class="form-control" placeholder="Nama...." name="nama" id="nama" required/>
                            </div>
                            <div class="form-group">
                                <label for="pwd">Jenis Kelamin</label>
                                <select name="jenis_kelamin" id="jenis_kelamin" class="form-control bg-secondary text-white" required>
                                    <option value=""> -- Jenis Kelamin -- </option>
                                    <option value="L">Pria</option>
                                    <option value="P">Wanita</option>
                                </select>                            
                            </div>
                            <div class="form-group">
                                <label for="pwd">Tanggal Lahir</label>
                                <input type="text" name="tanggal_lahir" id="datepicker" placeholder="00/00/0000" class="form-control/>
                            </div>
                            <div class="form-group">
                                <label for="pwd">Alamat</label>
                                <textarea name="alamat" id="alamat" cols="" rows="" class="form-control border border-secondary" placeholder="Alamat..."></textarea>
                            </div>
                        </div>
                        
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="submit" name="input" class="btn btn-primary">Save</button><button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                    </form>
                    </div>
                </div>
                </div>
<!-- end modal -->

- Langkah Kelima Buat File edit.php
file ini digunakan untuk mengedit data berdasarkan id_data 

<?php
        $id_data    = $_GET['edit'];
        $select = mysqli_query($conn,"select * from tbl_data where id_data='$id_data' ");
                $row_select = mysqli_fetch_array($select);
                    if($row_select['jenis_kelamin']=="P"){
                        $jk ="Pria";
                    }else{
                        $jk ="Wanita";
                    }
?>
                <div class="overflow-hidden alert alert-secondary">
                    <strong><span class="glyphicon glyphicon-home"></span>Edit Data Mahasiswa</strong> <a href="index.php?data_mahasiswa" class="text-danger float-right"><i class='fa fa-arrow-left'></i> Kembali</a>
                </div>
                    <form action="" method="post">
                            <div class="form-group">
                                <input type="hidden" name="id_data" id="id_data" class="form-control" value="<?php echo $row_select['id_data'];?>">
                            </div>
                            <div class="form-group">
                                <label for="nama">Nama</label>
                                <input type="text" class="form-control" placeholder="Nama...." name="nama" id="nama" value="<?php echo $row_select['nama'];?>" required/>
                            </div>
                            
                            <div class="form-group">
                                <label for="pwd">Jenis Kelamin</label>
                                <select name="jenis_kelamin" id="jenis_kelamin" class="form-control bg-secondary text-white" required>
                                    <?php echo"<option value='$row_select[jenis_kelamin]'>$jk</option>";?>
                                    <option value=""> -- Jenis Kelamin -- </option>
                                    <option value="L">Pria</option>
                                    <option value="P">Wanita</option>
                                </select>                            
                            </div>
                            
                            <div class="form-group">
                                <label for="pwd">Tanggal Lahir</label>
                                <input type="text" name="tanggal_lahir" id="datepicker" value="<?php echo $row_select['tanggal_lahir'];?>" placeholder="00/00/0000" class="form-control"/>
                            </div>
                            
                            <div class="form-group">
                                <label for="pwd">Alamat</label>
                                <textarea name="alamat" id="alamat" cols="" rows="" class="form-control border border-secondary" placeholder="Alamat..."><?php echo $row_select['alamat'];?></textarea>
                            </div>

                            <div class="form-group">
                                <button type="submit" name="edit" class="btn btn-success text-white">Edit Data</button>
                            </div>

                    </form>
                        



Posting Komentar

0 Komentar