Tutorial PHP dan JQuery Dengan BOOTSTRAP

Pada materi tutorial PHP dan JQuery kali ini, kangsoel akan membuat aplikasi data mahasiswa sederhana. Pada aplikasi yang akan kita buat ini, data akan disimpan dalam database MySQL dengan menerapkan form yang didukung oleh JQuery saat proses penyimpanan. 

MENYIAPKAN FOLDER, JQUERY DAN BOOTSTRAP

Sebagai langkah awal, kita perlu menyiapkan segala kebutuhan untuk menyelesaikan tutorial php dan jquery ini. Beberapa yang perlu anda siapkan adalah penataan folder, mendownload Jquery dan juga bootstrap untuk mempercepat tampilan aplikasi yang akan kita buat. Berikut ini langkah-langkahnya:

1. Buat folder project baru dengan nama mahasiswa
2. Download Bootstrap versi 3 melalui getbootstrap.com Extract hasil download, kemudian letakkan folder css,js,dan fonts kedalam folder mahasiswa
3. Download jquery, dan simpan hasil download pada folder js yang ada pada folder mahasiswa.

Seharusnya, struktur folder yang anda miliki seperti berikut ini:

gambar 1. File mhs.js nanti akan kita buat pada langkah-langkah berikutnya. Sementara diabaikan dulu

MEMBUAT DATABASE

Langkah berikutnya adalah menyiapkan database dan tabel untuk menyimpan data mahasiswa. Pada tutorial php dan jquery ini, kita akan menggunakan database MySQL. Pastikan anda telah memilikinya dan dapat mengaksesnya sebagai admin. Selanjutnya ikuti langkah-langkah berikut ini:

1. Buat database atau gunakan database yang ada dan buat sebuah tabel mahasiswa dengan struktur tabel seperti gambar di bawah ini:
   

   Perhatikan untuk field id jadikan primary key dan Auto Increment
2. Pada folder mahasiswa, buat file koneksi.php. sesuaikan nama database dan username dan password database MySQL
   

   <?php
       $con=mysqli_connect("localhost","root",""); 
      //silahkan sesuaikan dengan setting di webserver anda
       $db=mysqli_select_db($con,"test");
   ?>

MENULISKAN KODE PHP & JAVASCRIPT

Aplikasi yang akan kita buat akan menerapkan metode Model View Controller (MVC) secara sederhana. Kita buat terlebih dahulu file model.php dalam folder mahasiswa.

<?php
/**
 * Created by Dwi Susanto.
 * User: studiobroadcastmmb
 * Date: 1/10/16
 * Time: 11:15 AM
 */

function lihat_data($con){
    $sql="select * from mahasiswa ORDER BY id DESC ";
    $hasil=mysqli_query($con,$sql);

    $output="<table class='table table-striped'>";
    $output.="<tr><th>Nama</th><th>Alamat</th><th>Email</th><td>Operasi</td></tr>";
    while($row=mysqli_fetch_array($hasil)){
        $output.="<tr><td>".$row['nama']."</td>";
        $output.="<td>".$row['alamat']."</td>";
        $output.="<td>".$row['email']."</td>";
        $output.="<td><a href='#' class='btn btn-info edit'>Edit</a> | ";
        $output.="<a href='#' class='btn btn-danger hapus'> Delete</a> </td>";
        $output.="</tr>";
    }
    $output.="</table>";
    return $output;
}

function simpan_data($data,$con){
    $sql="insert into mahasiswa (nama,alamat,email)
          values('".$data['nama']."','".$data['alamat']."','".$data['email']."')";
    $hasil=mysqli_query($con,$sql);
    if($hasil)
        return TRUE;
    else
        return FALSE;
}
?>

Selanjutnya kita buat file baru bernama controller.php dalam folder mahasiswa
File ini berfungsi untuk menjembatani permintaan user

<?php
/**
 * Created by Dwi Susanto.
 * User: -
 * Date: 1/10/16
 * Time: 11:17 AM
 */

if(isset($_POST['nama'])){
    include_once "koneksi.php";
    include_once "model.php";

    $data['nama']=$_POST['nama'];
    $data['alamat']=$_POST['alamat'];
    $data['email']=$_POST['email'];
    $hasil=simpan_data($data,$con);
    if($hasil){
        $output="<div class='alert alert-info'> Data Berhasil Disimpan</div>";
    }else{
        $output="<div class='alert alert-info'> Data Gagal Disimpan</div>";
    }
    $output.=lihat_data($con);
    echo $output;
}else{
    $output=lihat_data($con);
}
?>

Berikutnya dalam folder js, buat file mhs.js seperti berikut ini:

/**
 * Created by Dwi Susanto
 * studiobroadcastmmb on 1/10/16.
 */
$(document).ready(function(){
   $("#form_mhs").submit(function(){
       var nama=$("#nama").val();
       var alamat=$("#alamat").val();
       var email=$("#email").val();
       $.ajax({
           type: "POST",
           url: "controller.php",
           data: {nama:nama,alamat:alamat,email:email},
           dataType: "text",
           cache:false,
           success:
               function(data){
                   $("#hasildata").empty().append(data);
               }
       });
       return false;
   });
});

Dan yang terakhir, dalam folder mahasiswa, buatlah file lihat_data.php seperti di bawah ini:

<?php
include_once "koneksi.php";
include_once "model.php";
include_once "controller.php";
?>

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/mhs.js"></script>

<div class="container">
    <div class="row" style="margin-top: 20px;">
        <div class="col-sm-6">
            <h3>Data Siswa</h3>
            <div id="hasildata">
                <?php echo $output;?>
            </div>
        </div>

        <div class="col-sm-6" style="border-left: 2px solid #dddddd; min-height: 300px;">
            <form class="form-horizontal" id="form_mhs">
                <h3> Tambah Data Baru Siswa</h3>
                <div class="form-group">
                    <label for="nama" class="col-sm-2 control-label">Nama</label>
                    <div class="col-sm-10">
                        <input type="text" id="nama" class="form-control" placeholder="Nama Mahasiswa">
                    </div>
                </div>
                <div class="form-group">
                    <label for="alamat" class="col-sm-2 control-label">Alamat</label>
                    <div class="col-sm-10">
                        <input type="text" id="alamat" class="form-control" placeholder="Alamat Mahasiswa">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" id="email" class="form-control" placeholder="Email Mahasiswa">
                    </div>
                </div>
                <div class="form-group">
                    <label for="nama" class="col-sm-2 control-label"></label>
                    <div class="col-sm-10">
                        <button class="btn btn-primary" id="simpan"> Simpan</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

Struktur akhir file-file yang telah anda buat seharusnya seperti gambar di bawah ini:

Struktur folder akhir setelah semua file dibuat

Silahkan jalannkan file lihatdata.php melalui web server anda. Harusnya hasil tampilan yang anda peroleh seperti di bawah ini:

hasil akhir belajar php dan jquery

Silahkan anda coba isi melalui form yang telah anda buat. Apabila berhasil, maka data akan langsung ditampilkan di sebelah kiri. Apabila belum berhasil, silahkan dicek lagi file-file yang telah anda buat.

Tweet