[Basic] 4. data manipulation

UJK RPL Tuts™ Part Four : Data Manipulation 1

Data Manipulation Input, Edit, Delete, View & Search

UJK RPL TUTS™

Part Four

Basic Level

Lisensi Dokumen

Seluruh dokumen yang dibuat oleh SCG dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk

tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan

pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penu lisan ulang, kecuali mendapatkan ijin terlebih dahulu dari Penulis atau Software Community Generation.

Copyright © 2012 Software Community Generation.


Overview Gambaran

Sebelum memulai Tutorial ini, harap sediakan dan pastikan komponen-komponen berikut:

Telah memahami dan menyelesaikan Tutorial sebelumnya

Adobe Dreamweaver CS3

XAMPP 1.8.0

Jalankan XAMPP Control Panel, dan pastikan service Apache dan MySQL running.

Hierarki Data Manipulation:

Input

Part Four : Data Manipulation

Did you know?

#Database atau #BasisData adalah ruang penyimpanan data berupa text dan informasi

bagi sebuah aplikasi, entah berbasis Dekstop ataupun Web.

@enjangdspc

Input

Tampil

Search Delete Confirm Edit

Delete

Database

No

Yes

Basic Level


First Do Lakukan ini dulu

~ Jika sudah melakukan tutorial sebelumnya lewati langkah ini ~

Buat Database & Tabel

Sebelum memulai Tutorial ini buatlah sebuah database dengan tabel yang diinstruksikan pada

tutorial part one : Table & Relation. Yakni Database KreditMotor dengan Tabel:

File Koneksi

Buat file koneksi.php

Isikan dengan kode seperti dibawah ini

host user password

Nama database


Step 1 : Input Form & Action

Buatlah sebuah form input untuk sebuah tabel, dalam tutorial ini akan digunakan tabel Detail yang telah dibuat di tutorial sebelumnya.

Buka Dreamweaver, dan buat File Baru (PHP) Sisipkan Form dengan mengklik ikon form di dreamweaver

Lalu sisipkan tabel dengan column 3 dan baris 7 dengan mengklik ikon table

Lalu susun sedemikian rupa sehingga seperti gambar:

Setelah form terbuat, taruh kode php input action di atas tag html

Berikut Kode php input actionnya

<input name="KodeBrg" type="text" id="KodeBrg" size="8" maxlength="8" />

<input type="text" name="NamaBrg" id="NamaBrg" />

<input name="JumlahBrg" type="text" id="JumlahBrg" size="8" maxlength="8" />

<input type="submit" name="input" id="input" value="Input" />

// panggil file koneksi

// jika tombol input ditekan

// field dijadikan variabel

// SQL

// Jika berhasil

// Jika gagal // Penutup If ($sql) // Penutup if (isset)


Simpan file dengan nama detail_input.php

<?php

include "koneksi.php";

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

$KodeBrg = $_POST['KodeBrg'];

$NamaBrg = $_POST['NamaBrg'];

$JumlahBrg = $_POST['JumlahBrg'];

$sql = mysql_query ("INSERT INTO detail (KodeBrg, NamaBrg, JumlahBrg) VALUES('$KodeBrg', '$NamaBrg', '$JumlahBrg')");

if ($sql) {

echo "Data berhasil ditambahkan, klik <a href='detail_view.php'>di sini</a> untuk melihat";

} else {

echo "Data gagal ditambahkan";

}

}

?>

Boleh copy paste dengan syarat memahami


Step 2 : View & Search

Setelah input Form sukses dan data masuk database, maka langkah selanjutnya membuat halaman

tampil data untuk tabel detail.

View

Buat file baru (php) di dreamweaver

Buatlah tabel dengan 2 row dan colomn 5, dan susun sehingga seperti gambar:

Include file koneksi dan taruh diatas tag html

Masukkan script tampil data di antara baris 1 dan baris 2 tabel.

Berikut script tampil datanya:

// SQL

// Switch warna Baris

// Untuk Nomor


Masukkan kode php echo disetiap kolom yang akan menampilkan data

Untuk membuat warna baris silang masukkan kode php berikut di tag TR ke dua sebagai

bgcolor.

Kasih link di Edit dan Delete

Edit = detail_edit.php?Id=<?php echo $id; ?>

Delete = detail_del_cnf.php?Id=<?php echo $id; ?>

Kemudian masukkan kode php penutup looping sebelum tag penutup table

Search

Setelah Data dapat ditampilkan, maka tambahkan satu baris tabel dengan colomn 3 di atas

tabel tampil data, dan masukkan tag form di kolom ke 2, lihat gambar yang bergaris merah:

<?php

<?php

$query = "SELECT * FROM detail ORDER BY Id";

$sql = mysql_query ($query);

$no = 1;

while ($hasil = mysql_fetch_array($sql)) {

$id = $hasil['Id'];

$KodeBrg = $hasil['KodeBrg'];

$NamaBrg = $hasil['NamaBrg'];

$JumlahBrg = $hasil['JumlahBrg'];

$warna = ($no%2==1)?"#ffffff":"#c5c5c5";

?>



Masukkan 1 List/Menu dengan mengklik (beri name find) dengan Values Kolom

sebagai berikut:

Setelah itu masukkan text field (dengan name search) disebelah filed list/menu. Dan 1 button

submit dengan values Search

Lihat bagian kode dari form actionnya, arahkan pada detail_search.php?find=<?php echo

$find; ?>&search=<?php echo $search; ?>

Setelah selesai dengan itu, save dengan nama detail_view.php dan save as kembali dengan

nama detail_search.php

di file detail_search.php cari kode SQL berikut:


Ganti dengan SQL berikut:

Save kembali detail_search.php

<?php

$find = $_POST['find'];

$search = $_POST['search'];

$query = "SELECT * FROM detail where $find like '%$search%' ORDER BY Id";


$no = 1;

while ($hasil = mysql_fetch_array($sql)) {

$id = $hasil['Id'];




$warna = ($no%2==1)?"#ffffff":"#c5c5c5";

?>



Step 3 : Edit Form & Action

Buka file detail_input.php yang diawal sudah dibuat, kemudian save as dengan nama detail_edit.php Ubahlah hal-hal berikut:

1. Ubah tombol input menjadi Edit

2. Ganti script input menjadi edit, seperti dibawah ini:


Tambahkan script php echo pada setiap field untuk menampilkan data

<?php echo $KodeBrg; ?>

<?php echo $NamaBrg; ?>

<?php echo $JumlahBrg; ?>

<?php


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

$id = $_GET['Id'];

} else {

die ("Error. No Selected!");

}

$query = "SELECT * FROM detail WHERE Id='$id'";


$hasil = mysql_fetch_array ($sql);

$id = $hasil['Id'];




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

$KodeBrg = $_POST['KodeBrg'];

$NamaBrg = $_POST['NamaBrg'];

$JumlahBrg = $_POST['JumlahBrg'];

$sql = mysql_query ("UPDATE detail SET KodeBrg='$KodeBrg', NamaBrg='$NamaBrg', JumlahBrg='$JumlahBrg' WHERE

Id='$id'");

if ($sql) {

echo "Data berhasil diedit, klik <a href='detail_view.php'>di sini</a> untuk melihat";

} else {

echo "Data gagal diedit";

}

} ?>



Step 4 : Delete Confirm & Action Untuk menghapus data, pada tutorial ini akan menggunakan delete confirm yang cukup sederhana. Berikut tahapannya.

Delete Confirm

Buat file baru (php) di dreamweaver Sisipkan tabel dengan colomn 4 dan baris 1

Pada kolom ke 2 masukkan form dengan form action “detail_delete.php?Id=<?php echo $id; ?>” dan sebuah button bervalues Konfirm

Lalu pada kolom ke 3 masukkan form juga dengan form action “detail_view.php”

dan sebuah button bervalues Batal

Terakhir, masukkan kode berikut di atas tag html yang berfungsi mengambil parameter Id

Save dengan nama detail_del_cnf.php

Masukkan Kode berikut


Delete Action

Buat file baru (php) di dreamweaver Masukkan kode berikut

Simpan dengan nama detail_delete.php

Mendapatkan Parameter Id

// jika Id tidak kosong

// SQL

// Jika berhasil

// Jika gagal

<?php


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

$id = $_GET['Id'];

} else {

die ("<h1>Error. No Selected! </h1>");

}

?>

<?php

if (!empty($id) && $id != "") {

$query = "DELETE FROM detail WHERE Id='$id'";


if ($sql) {

echo "Data Detail telah berhasil dihapus";

} else {

echo "Data Detail gagal dihapus";

}

echo "Klik <a href='detail_view.php'>di sini</a> untuk kembali ke halaman data Detail";

}

?>



Cheat Sheet Ingatlah selalu ini

Garis besar dari tutorial ini adalah Data Manipulation itu terbagi 5 Tahapan :

1. Input

2. View

3. Search

4. Edit

5. Delete

Sebanyak apapun tabelnya, tahapnya tetap sama yaitu 5, setelah membuat 5 tahapan untuk satu tabel, untuk tabel lainnya tinggal copy dan edit.

Do the Best and Good Luck.

This Tuts Brought To You By

Author : Enjang Kurniawan

AKA enjangdspc. Work as Web Programmer and Chief Web Officer at

SCGeneration. Alumni of RPL SMKN 1 Karawang 2011.

@enjangdspc on.fb.me/enjangdspc [email protected]

http://www.twitter.com/enjangdspc

http://on.fb.me/enjangdspc

[Basic] 4. data manipulation

Education

Transcript of [Basic] 4. data manipulation