[Basic] 4. data manipulation
Upcoming SlideShare
Loading in...5
×
 

[Basic] 4. data manipulation

on

  • 457 views

 

Statistics

Views

Total Views
457
Views on SlideShare
447
Embed Views
10

Actions

Likes
0
Downloads
27
Comments
1

1 Embed 10

http://blog.scgeneration.com 10

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

[Basic] 4. data manipulation [Basic] 4. data manipulation Document Transcript

  • UJK RPL TUTS™ Part Four Data Manipulation Input, Edit, Delete, View & Search 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 . Basic LevelUJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 1
  • OverviewGambaran Part Four : Data ManipulationSebelum 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: Basic Level Input Input Database No Edit Search Delete Confirm Tampil Yes Delete Did you know? #Database atau #BasisData adalah ruang penyimpanan data berupa text dan informasi bagi sebuah aplikasi, entah berbasis Dekstop ataupun Web. @enjangdspcUJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 2
  • First DoLakukan ini dulu ~ Jika sudah melakukan tutorial sebelumnya lewati langkah ini ~Buat Database & TabelSebelum memulai Tutorial ini buatlah sebuah database dengan tabel yang diinstruksikan padatutorial part one : Table & Relation. Yakni Database KreditMotor dengan Tabel:File KoneksiBuat file koneksi.phpIsikan dengan kode seperti dibawah ini host user password Nama databaseUJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 3
  • Step 1 : Input Form & ActionBuatlah sebuah form input untuk sebuah tabel, dalam tutorial ini akan digunakan tabel Detail yangtelah 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: <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" /> Setelah form terbuat, taruh kode php input action di atas tag html Berikut Kode php input actionnya // panggil file koneksi // jika tombol input ditekan // field dijadikan variabel // SQL // Jika berhasil // Jika gagal // Penutup If ($sql) // Penutup if (isset)UJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 4
  • Simpan file dengan nama detail_input.php Boleh copy paste dengan syarat memahami <?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"; } } ?>UJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 5
  • Step 2 : View & SearchSetelah input Form sukses dan data masuk database, maka langkah selanjutnya membuat halamantampil 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 // Untuk Nomor // Switch warna BarisUJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 6
  • Boleh copy paste dengan syarat memahami <?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 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 tableSearch 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:UJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 7
  • 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:UJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 8
  • Ganti dengan SQL berikut: Boleh copy paste dengan syarat memahami <?php $find = $_POST[find]; $search = $_POST[search]; $query = "SELECT * FROM detail where $find like %$search% 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"; ?> Save kembali detail_search.phpUJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 9
  • 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:UJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 10
  • Boleh copy paste dengan syarat memahami <?php include "koneksi.php"; if (isset($_GET[Id])) { $id = $_GET[Id]; } else { die ("Error. No Selected!"); } $query = "SELECT * FROM detail WHERE Id=$id"; $sql = mysql_query ($query); $hasil = mysql_fetch_array ($sql); $id = $hasil[Id]; $KodeBrg = $hasil[KodeBrg]; $NamaBrg = $hasil[NamaBrg]; $JumlahBrg = $hasil[JumlahBrg]; 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"; } } ?> Tambahkan script php echo pada setiap field untuk menampilkan data <?php echo $KodeBrg; ?> <?php echo $NamaBrg; ?> <?php echo $JumlahBrg; ?>UJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 11
  • Step 4 : Delete Confirm & ActionUntuk 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 Masukkan Kode berikut Save dengan nama detail_del_cnf.phpUJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 12
  • Delete Action Buat file baru (php) di dreamweaver Masukkan kode berikut Mendapatkan Parameter Id // jika Id tidak kosong // SQL // Jika berhasil // Jika gagal Simpan dengan nama detail_delete.php Boleh copy paste dengan syarat memahami <?php include "koneksi.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"; $sql = mysql_query ($query); 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"; } ?>UJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 13
  • Cheat SheetIngatlah selalu iniGaris besar dari tutorial ini adalah Data Manipulation itu terbagi 5 Tahapan : 1. Input 2. View 3. Search 4. Edit 5. DeleteSebanyak apapun tabelnya, tahapnya tetap sama yaitu 5, setelah membuat 5 tahapan untuk satutabel, 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 enjang.kurniawan@outlook.comUJK RPL Tuts™ Pa rt Four : Da ta Ma nipulation 14