Haikal PG - XI RPL 1 - PWPB Sesi 31

Assalamualaikum Warahmatullahi Wabarokatuh
Kembali lagi dengan saya, Haikal Putra Gustiansyah di Website Pemrograman Web dan Perangkat Bergerak. Pada sesi kali ini kita masih membahas tentang database dan kali ini kita membuat sebuah fitur searching dan ordering. Jadi intinya kita akan membuat sebuah form search dan button untuk ordering. Oh iya, sebelumnya materi ini sejatinya masih melanjutkan materi ini yang kemarin, jadi bagi yang belum membaca artikel-artikel sebelumnya mengenai database, sebaiknya dibaca terlebih dahulu. Ya langsung saja kita mulai materi kali ini.

Searching
Inti dari search ini kita akan membuat sebuah form yang menginputkan data NIS atau nama yang dimana akan muncul sebuah hasil yang dicari. Langsung ke step.
Step 1
Pertama-tama silahkan teman-teman buka folder views dan buka file v_index.php. Jika sudah menemukan silahkan copy kan code berikut:

<form action="index.php" method="get"> Cari Berdasarkan NIS dan NAMA <input class="inputs" type="text" name="search" value="<?= @$search ?>"> <button type="submit">Cari</button> </form>
Simpan code diatas didalam v_index.php. Kegunaan form diatas adalah untuk membuat sebuah form search yang dimana dia akan mengirimkan value dari pencariannya itu melalui method get.

Step 2
Buka file index.php dan copykan code berikut:

$search = @$_GET['search']; if (!empty($search)) $sql .= " WHERE nis LIKE '%$search%' OR nama_lengkap LIKE '%$search%' ";
query diatas digunakan untuk menangkap data yang dikirimkan lewat get tadi dan mencarinya dengan query 'SELECT*FROM siswa WHERE nis LIKE '%search% OR nama_lengkap LIKE '%search%' '. Dan kita coba hasilnya....

Hasil

Sebelum

Sesudah

Note:

Abaikan saja button search dan button ordernya karena nanti akan ada study kasus mengenai kedua tersebut.

Gimana? mudah bukan? oke dan kita lanjut ke materi ordering

Ordering

Ordering adalah mengurutkan dan mengurutkan dibagi menjadi dua yaitu mengurutkan dari atas ke bawah atau dari bawah ke atas atau juga bisa dari kecil ke besar dan sebaliknya. Mudah saja kita hanya perlu menambah query ORDER BY. Langsung saja ke stepnya:

Step 1

Buka file v_index.php dan copykan code berikut:

<a href="index.php?sort=nis&order=asc">▲</a> <a href="index.php?sort=nis&order=desc">▼</a>
Code diatas yang akan kita gunakan untuk mengurutkan. Berupa tag <a> yaitu untuk me-link kan atau mengarahkan ke suatu url tertentu yang didalamnya terdapat 'index.php?sort=alamat&order=asc'  dan  'index.php?sort=alamat&order=desc' value tersebut dikirmkan melalui link dan ditangkap oleh get.
Step 2
Buka file index.php dan copykan code berikut didalamnya:
$order_field = @$_GET['sort']; $order_mode = @$_GET['order']; if (!empty($order_field) && !empty($order_mode)) $sql .= " ORDER BY $order_field $order_mode";
GET diatas menangkap url yang dikirmkan tadi di step 1 dan terdapat selection yang artinya jika order_field tidak kosong dan order_mode tidak kosong maka jalankan query ORDER BY dan coba teman teman jalankan maka hasilnya akan jadi seperti berikut:

sebelum diurutkan menurut nis

sesudah diurutkan menurut nis

Magic... OK materi order by dan search sudah selesai dan kita lanjutkan ke study kasus.

Study Kasus
Study kasus kali ini sebagai berikut:

• Buat searching dan ordering untuk kolom yang lainnya
• Buat tombol untuk mereset seluruh sesarching dan ordering (mengembalikan ke kodisi semula)

Seperti yang kalian lihat di gambar diatas sudah terdapat sebuah button reset dan order by di setiap kolom dan juga kita buat setiap pencarian tidak hanya berdasarkan nama dan nis saja tapi semua data. Langsung saja:

Search setiap kolom

Pertama kita buka index.php dan masukkan code berikut:
$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%'";

 Dan hasilnya maka :

Berdasarkan Ibu Kandung

Sesudah Search

Kita lanjut ke order by setiap kolom untuk codenya seperti berikut:
<tr> <th>#</th> <th> NIS <br> <a href="index.php?sort=nis&order=asc">▲</a> <a href="index.php?sort=nis&order=desc">▼</a> </th> <th> Nama Lengkap <br> <a href="index.php?sort=nama_lengkap&order=asc">▲</a> <a href="index.php?sort=nama_lengkap&order=desc">▼</a> </th> <th> Jenis Kelamin <br> <a href="index.php?sort=jenis_kelamin&order=asc">▲</a> <a href="index.php?sort=jenis_kelamin&order=desc">▼</a> </th> <th> Kelas <br> <a href="index.php?sort=kelas&order=asc">▲</a> <a href="index.php?sort=kelas&order=desc">▼</a> </th> <th> Jurusan <br> <a href="index.php?sort=jurusan&order=asc">▲</a> <a href="index.php?sort=jurusan&order=desc">▼</a> </th> <th> Alamat <br> <a href="index.php?sort=alamat&order=asc">▲</a> <a href="index.php?sort=alamat&order=desc">▼</a> </th> <th> Golongan Darah <br> <a href="index.php?sort=golongan_darah&order=asc">▲</a> <a href="index.php?sort=golongan_darah&order=desc">▼</a> </th> <th> Nama Ibu Kandung <br> <a href="index.php?sort=nama_ibu_kandung&order=asc">▲</a> <a href="index.php?sort=nama_ibu_kandung&order=desc">▼</a> </th> <th colspan="2">Aksi</th> </tr>
Maka hasilnya akan seperti gambar diatas dan kita coba:

Sebelum

Ascending Golongan Darah

Descending Golongan Darah

Mudah bukan? ok yang terakhir yaitu reset. Mudah saja kita hanya perlu mengarahkan ke halaman itu sendiri. Bingung? coba copykan code berikut ke dapam v_index.php:
<form action="index.php"> <button class="reset" type="submit">Reset</button> </form>
Maka hasilnya akan seperti berikut:

Sebelum Reset

Sesudah Reset

Selesaii.......

Mungkin sekian saja pada sesi kali ini, maaf jika ada salah-salah kata atau ada kata yang kurang berkenan. Wassalamualaikum Warahmatullahi Wabarokatuh.