Bootstrap : Model dan Ajax

Assaalamualaikum Wr. Wb.

   Kembali lagi bersama saya Syahrul di SchoolBlog. Untuk postingan kali ini saya akan membahas tentang yang tertulis di judul postingan ini, yaitu Boorstrap Model dan Ajax. Seperti biasa saya akan menjabarkannya dengan metode Step by Step agar kalian bisa langsung mem[raktikknanya, tapi dengan syarat, kalian harus memulai framework Apache dan MySQL -nya ya!

Mari langsung saja ke step by step -nya :

Step 1

Tambahkan codingan dibawah ini di v_index.php :

<script type="text/javascript" src="<?php echo base_url()?>/media/js/jquery.min.js"></script> <script type="text/javascript" src="<?php echo base_url()?>/media/js/bootstrap.min.js"></script> <!-- Toastr Plugins --> <link rel="stylesheet" href="<?php echo base_url() ?>/media/css/bootstrap.min.css"> <link rel="stylesheet" href="<?php echo base_url() ?>/media/plugins/toastr/toastr.min.css"> <script type="text/javascript" src="<?php echo base_url()?>/media/plugins/toastr/toastr.min.js"></script>

*codingan diatas berguna untuk menghubungkan bootstrap dan cssnya.

<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn-btn-primary btnYa" >Ya</button> <button type="button" class="btn-btn-danger" data-dismiss="modal">Tidak</button> </div> </div> </div> </div>

*simpan codingan ini diakhir body(sebelum tag tutup </body>)

<td><a href="edit.php?nis=<?= $siswa['nis'] ?>" class="btn btn-warning">Edit</a></td> <td><a href="delet.php?nis=<?= $siswa['nis'] ?>" class="btn btn-danger btnDelete">Delete</a></td>

*tambahkan btnDelete pada button Delete

<script type="text/javascript"> $(function() { $(".btnDelete").on("click", function(e) { e.preventDefault(); var nama = $(this).parent().parent().children()[3]; nama = $(nama).html(); var tr = $(this).parent().parent(); $(".modal").modal('show'); $(".modal-title").html('.Konfirmasi'); $(".modal-body").html('Anda yakin ingin menghapus data <b>' + nama + '</b> ?'); var href = $(this).attr('href'); $('.btnYa').off(); $('.btnYa').on('click', function() { $.ajax({ 'url' : href, 'type' : 'POST', 'success' : function(result) { if (result == 1) { $(".modal").modal('hide'); tr.fadeOut(); toastr.success('Data berhasil dihapus', 'informasi'); } } }); }); }); }); </script>

*tambahkan codingan javascrip ini sebelum akhir body. Fungsi dari codingan javascript ini adalah untuk menjalankan jQuery nya yaitu, tampilan ajax dan model. Untuk yang model tampilannya seperti ini :

*tampilan ini muncul setelah kalian menklik button delete

Step 2

Ubah codingan delete.php seperti contoh dibawah ini :

<?php include('lib/library.php'); $nis = $_GET['nis']; if (!empty($nis)) { $sql = "DELETE FROM siswa WHERE nis = $nis"; if ($mysqli->query($sql)) { echo 1; } else { echo 0; } } ?>

Hasilnya :

Setelah mengklik button delete :

*jika mengklik button Tidak,  maka akan kembali ketampilan sembelumnya.

Setelah mengklik button Ya : 

*tampil informasi bahwa data telah di hapus.

Cukup sekian untuk pertemuan kali ini, mohon maaf bila ada kesalahan. Bila ada yang ingin ditanyakan silahkan langsung saja komen dibawah. Terimakasih telah melihat sampai akhir.

Wassalamualaikum Wr. Wb.

Sesi 2

Assalamualaikum Wr. Wb.

Halo gais, di postingan kali saya akan membahas tentang Upload. Seperti biasa, saya akan menjelaskannya dengan metode step by step. Dan selalu ingat jika kalian mempraktikannya, harus dengan apache dan sql yang sudah di nyalakan.

Langsung aja ke step by stepnya aja okeeee.

Step 1
Buat kolom baru di table siswa dengan format seperti di bawah :

Step 2
Buat folder image di folder media untuk menyimpan file uploadnya.

Step 3

Tambahkan kodingan seperti dibawah pada v_tambah.php

<tr> <td><form class="form-horizontal" action="<?= $action ?> " method="post" enctype="multipart/form-data"> <label class="col-sm-2 control-label">Foto</label></td> <td><input type="file" class="form-control" name="foto" value="<?php echo @$listSiswa->file?>" > </form> </td> </tr>

*fungsi kodingan diatas yaitu, untuk menambahkan kolom choose file di pada tampilan tambah data dan edit.

Step 4

Tambahka kodingan seperti di bawah pada v_index.php

<th> <label class="col-sm-2 control-label">Foto</label> <div class="col-sm-6"> <?php if ($listSiswa == "edit") { ?> <img src="<?php echo base_url()?>/media/image/<?php echo @$listSiswa->file ?>"width="80px" alt=""/> <input type="hidden" name="foto" value="<?php echo @$listSiswa->file ?>" /> <?php } ?> </div> </th>

*fungsinya untuk menampilkan kolom Foto di tampilan utama

Hasil di halaman tambah data :

Step 5

Edit file tambah.php seperti contoh di bawah ini :

<?php include 'lib/library.php'; if($_SERVER ['REQUEST_METHOD'] == 'POST') { $nis = $_POST ['nis']; $nama_lengkap = $_POST ['nama_lengkap']; $jenis_kelamin = $_POST ['jenis_kelamin']; $kelas = $_POST ['kelas']; $jurusan = $_POST ['jurusan']; $alamat = $_POST ['alamat']; $golongan_darah = $_POST ['golongan_darah']; $nama_ibu_kandung = $_POST ['nama_ibu_kandung']; $file = $_POST ['file']; $foto = $_FILES ['foto']; if(!empty ($foto) AND $foto['error'] == 0) { $path = './media/image/'; $upload = move_uploaded_file($foto['tmp_name'], $path . $foto['name']); if (!upload) { flash('error', "upload file gagal"); header('loacation:index.php'); } $file = $foto['name']; } $sql = "INSERT INTO siswa (nis, nama_lengkap, jenis_kelamin, kelas, jurusan, alamat, golongan_darah, nama_ibu_kandung, file) VALUES ('$nis','$nama_lengkap','$jenis_kelamin','$kelas','$jurusan','$alamat','$golongan_darah','$nama_ibu_kandung','$file')"; $mysqli->query($sql) or die ($mysqli->error); header('location: index.php'); } include 'views/v_tambah.php'; ?>

Step 6

Tambahka kodingan seperti dibawah ini pada file v_index.php

<td> <img src="<?php echo base_url()?>/media/image/<?php echo $siswa['file'] ?>"width="80px" alt=""/> </td>

Step 7

Edit file edit.php seperti contoh dibawah ini

<?php include 'lib/library.php'; if ($_SERVER['REQUEST_METHOD'] == 'POST') { $nis = $_POST ['nis']; $nama_lengkap = $_POST ['nama_lengkap']; $jenis_kelamin = $_POST ['jenis_kelamin']; $kelas = $_POST ['kelas']; $jurusan = $_POST ['jurusan']; $alamat = $_POST ['alamat']; $golongan_darah = $_POST ['golongan_darah']; $nama_ibu_kandung = $_POST ['nama_ibu_kandung']; $file = $_POST['foto']; $foto = $_FILES['foto']; if(!empty ($foto) AND $foto['error'] == 0){ $path = './media/image/'; $upload = move_uploaded_file($foto['tmp_name'], $path . $foto['name']); if (!upload) { flash('erro', "upload file gagal"); header('loacation:index.php'); } $file = $foto['name']; } $sql = "UPDATE siswa SET nis = '$nis', nama_lengkap = '$nama_lengkap', jenis_kelamin = '$jenis_kelamin', kelas = '$kelas', jurusan = '$jurusan', alamat = '$alamat', golongan_darah = '$golongan_darah', nama_ibu_kandung = '$nama_ibu_kandung', file = '$file' WHERE nis = '$nis' "; $mysqli->query($sql) or die ($mysqli->error); header('location: index.php'); } $nis = $_GET['nis']; if (empty($nis) ) header('location: index.php'); $sql = "SELECT * FROM siswa WHERE nis = '$nis' "; $query = $mysqli->query($sql); $siswa = $query->fetch_array(); if (empty($siswa) ) header('location: index.php'); include 'views/v_tambah.php'; ?>

Hasil jadinya 

halaman tambah data :

halaman utama/beranda : 

Terima kasih sudah mengunjungi blog saya. Semoga kalian dapat terbantu, dan.. Selamat Mencoba!

Wassalamualaikum Wr. Wb.

Sesi 1

Assalamualaikum Wr. Wb.....IM BACK!!!

Di tahun dan semester baru ini saya kembali dengan melanjutkan materi-materi tentang pemrograman web. Untuk postingan kali ini saya akan membahasa tentang LOGIN & AUTHORIZATION. Saya akan memberikan langkah-langkah untuk pembuatannya. Tapi dengan syarat jika kalian mengikuti langkah-langkahnya, kalian wajib menyalakan Aphace dan Mysql di Xampp atau framework lainnya.

Langsung aja ke step by stepnya!

Membuat From Login

Step 1
Buat table login di dalam database, dengan format seperti gambar dibawah ini

Step 2

Insert data dengan enskripsi password SHA1. Untuk lebih jelas lihat gambar ini

Step 3
Membuat V_login.php di folder database yaitu views
Kodingannya :

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <form class="form-horizontal" action="login.php" method="post"> <div class="form-group"> <label class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input type="text" name="username" class="form-control" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" name="password" class="form-control" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"></label> <div class="col-sm-6"> <button type="submit" class="btn btn-primary">Login</button> </div> </div> </form> </body> </html>

Step 4

Membuat Login.php pada folder databasenya langsung

Kodingannya :

<?php include 'lib/library.php'; if ($_SERVER['REQUEST_METHOD'] == "POST") { $username = $_POST['username']; $password = $_POST['password']; $sql = "SELECT * FROM t_login WHERE username = '$username' AND password = SHA1 ('$password') "; $data = $mysqli->query($sql) or die($mysqli->error); if ($data->num_rows != 0) { $row = mysqli_fetch_object($data); $_SESSION['username'] = $row->username; $_SESSION['level'] = $row->level; header('location: index.php'); } else { $error = "Username atau password salah"; } } include 'views/v_login.php'; ?>

Hasilnya :

Setelah klik Login :

Step 5

Membuat Logout.php langsung di folder databasenya

Kodingannya :

<?php session_start(); session_destroy(); header('location: index.php'); ?>

Hasilnya :

Membuat Authorization

Step 1

Edit file Library.php jadi kaya kodingan di bawah ini!

Kodingannya :

<?php session_start(); function base_url() { return "http://localhost/pwpb19"; } function flash($tipe, $pesan = '') { if (empty($pesan)) { $pesan = @$_SESSION[$tipe]; unset($_SESSION[$tipe]); return $pesan; } else { $_SESSION[$tipe] = $pesan; } } function cekLogin() { $username = @$_SESSION['username']; $level = @$_SESSION['level']; if (empty($username) AND empty($level)) { header('location: login.php'); } } function sudahLogin() { $username = @$_SESSION['username']; $level = @$_SESSION['level']; if (empty($username) AND !empty($level)) { header('location: index.php'); } } $host = 'localhost'; $user = 'root'; $pass = ''; $db = 'db_pwpb19'; $mysqli = mysqli_connect($host, $user, $pass, $db) or die('Tidak dapt koneksi ke Database'); ?>

Step 2

Edit file index.php dan file login.phpseperti contoh ini

Kodingan index.php  :

<?php include 'lib/library.php'; $succes = flash('succes'); $error = flash('error'); cekLogin(); $sql = 'SELECT * FROM siswa'; // Searching $search = @$_GET['search']; if(!empty($search)) $sql .= " WHERE nis LIKE '%$search%' OR nama_lengkap LIKE '%$search%' OR jenis_kelamin LIKE '%$search%' OR kelas LIKE '%$search%' OR jurusan LIKE '%$search%' OR alamat LIKE '%$search%' OR golongan_darah LIKE '%$search%' OR nama_ibu_kandung LIKE '%$search%' "; // Ordering $order_field = @$_GET['sort']; $order_mode = @$_GET['order']; if(!empty($order_field) && !empty($order_mode)) $sql .= " ORDER BY $order_field $order_mode"; $listSiswa = $mysqli->query($sql); include 'views/v_index.php'; ?>

Kodingan login.php :

<?php include 'lib/library.php'; sudahLogin(); if ($_SERVER['REQUEST_METHOD'] == "POST") { $username = $_POST['username']; $password = $_POST['password']; $sql = "SELECT * FROM t_login WHERE username = '$username' AND password = SHA1 ('$password') "; $data = $mysqli->query($sql) or die($mysqli->error); if ($data->num_rows != 0) { $row = mysqli_fetch_object($data); $_SESSION['username'] = $row->username; $_SESSION['level'] = $row->level; header('location: index.php'); } else { $error = "Username atau password salah"; } } include 'views/v_login.php'; ?>

Hasilnya :

Terimakasih sudah melihat postingan ini sampai akhir. Mohon maap bila ada penulisan kata yang kurang tepat. Bila ada yang tidak dipahami, bisa langsung komen saja dibawah ya..

Wassalamualaikum Wr. Wb.