OOP 171215

{ Object Oriented Programming

Pertemuan 17-12-2015

Aplikasi Input Data pada PHP

1. Sebagai langkah awal, buat folder baru pada

C:/xampp/htdocs dengan nama belajar. Folder ini

akan menjadi area kerja dalam pembuatan aplikasi

yang nantinya dapat diakses menggunakan

browser dengan mengetikkan

localhost/nama_folder.

2. Buat database dengan nama belajar. Kemudian

buat tabel dengan nama user .

Gambar 1 Tabel User

Membuat Database dan Table

3. Buat koneksi ke database terlebih dahulu dengan membuat file script

html pada Notepad dengan nama config.php. Seperti script dibawah ini :

<?php //Host yang digunakan $host = 'localhost'; //Username untuk login ke host $user = 'root'; //Apabila menggunakan PC pribadi sebagai host, secara default password dikosongkan $pass = '';

//Isikan nama database sesuai database //yang telah dibuat $dbname = 'belajar'; //Untuk menghubungkan ke host $connect = mysql_connect($host, $user, $pass) or die(mysql_error()); //Untuk memilih database yang akan digunakan $dbselect = mysql_select_db($dbname);

File config.php tersebut nantinya dapat digunakan pada file-file lain dalam

menghubungkan ke server untuk menyimpan, merubah, maupun

menghapus data.

Membuat Koneksi ke Database

Ketikkan kode berikut pada Notepad, kemudian simpan dalam folder belajar dengan

nama index.php.

Membuat Form Input Data

<html> <head> <title>Belajar PBO dengan PHP</title> </head> <body> <h1>Form Input Data User</h1> <?php if (!empty($_GET['message']) && $_GET['message'] == 'success') { echo '<h3>Anda Berhasil Menambah Data!</h3>'; } ?> <form name="input_data" action=" insert.php"method="post"> <table border="0" cellpadding="5" cellspacing="0"> <tbody> <tr> <td>Username</td> <td>:</td> <td><input type="text" name="username" maxlength="20" required="required"

Teks script yang berwarna merah,

untuk menampilkan pesan

sukses ketika berhasil

menyimpan data.

<td>Agama</td> <td>:</td> <td><input type="text" name="agama" required="required" /></td> </tr> <tr> <td>Nomor HP</td> <td>:</td> <td><input type="text" name="no_hp" maxlength="14" required="required" /></td> </tr> <tr> <td align="right" colspan="3"><input type="submit" name="submit" value="Simpan" /></td> </tr> </tbody> </table> </form> <a href="view.php">Lihat Data</a> | <a href="logout.php">Logout</a> </body> </html>

Sekarang coba buka pada browser dan ketikkan localhost/belajar pada address

bar, maka akan tampil form input data seperti ini Gambar 2.

Untuk menampilkan halaman daftar

data-data yang telah disimpan

Gambar 2 Tampilan Form Input

<?php //Panggil file config.php untuk menghubungkan ke server include('config.php'); //Baca data dari form $username = $_POST['username']; $password = $_POST['password']; $fullname = $_POST['fullname']; $email = $_POST['email']; $agama = $_POST['agama']; $no_hp = $_POST['no_hp']; //Simpan data ke database $query = mysql_query("insert into user values('', '$username', '$password', '$email', '$fullname', '$agama', '$no_hp')") or die(mysql_error()); if ($query) { header('location:index.php?message=success'); }

Menyimpan Data

Ketikkan kode script dibawah ini dan simpan dengan nama insert.php.

Jalankan aplikasi dengan mengetikkan localhost/belajar pada browser.

Kemudian isikan data pada form, lalu klik tombol Simpan.

Apabila berhasil, maka akan ditampilkan pesan Anda Berhasil Menambah

Data! , seperti Gambar 3. Apabila gagal, maka periksa kembali script pada

notepad yang telah diketik.

Gambar 3 Halaman Pesan Berhasil Tambah Data

Menampilkan Data

1. Buat halaman untuk menampilkan data-data yang telah di simpan.

2. Ketikkan script dibawah ini pada notepad dan simpan dengan nama view.php.

<?php include('config.php') ?> <html> <head> <title>Belajar PBO dengan PHP</title> </head> <body> <h1>Data User</h1> <?php if (!empty($_GET['message']) && $_GET['message'] == 'success') { echo '<h3>Anda Berhasil Update Data!</h3>'; } ?> <a href="index.php">+ Tambah Data</a> | <a href="logout.php"> Logout</a> <table border="1" cellpadding="5" cellspacing="0"> <thead> <tr> <td>No.</td> <td>Username</td> <td>Password</td> <td>Email</td> <td>Fullname</td> <td>Agama</td>

Baris script yang berwarna kuning

merupakan script tambahan untuk

memberikan info pesan bahwa update data

berhasil.

<td>No. HP</td> <td>Opsi</td> </tr> </thead> <tbody> <?php $query = mysql_query("select * from user"); $no = 1; while ($data = mysql_fetch_array($query)) { ?> <tr> <td><?php echo $no; ?></td> <td><?php echo $data['username']; ?></td> <td><?php echo $data['password']; ?></td> <td><?php echo $data['email']; ?></td> <td><?php echo $data['fullname']; ?></td> <td><?php echo $data['agama']; ?></td> <td><?php echo $data['no_hp']; ?></td> <td> <a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> || <a href="delete.php?id=<?php echo $data['user_id']; ?>">Hapus</a> </td> </tr> <?php $no++; } ?> </tbody> </table> </body> </html>

Baris script yang berwarna kuning adalah

baris script LINK tambahan.

Untuk melihat hasilnya, jalankan aplikasi dengan mengetikkan

localhost/belajar/view.php pada address bar !

Gambar 4 Halaman View.php

Update Data

Dalam suatu aplikasi, update data diperlukan untuk mengatasi

masalah pada kesalahan input, kesalahan data yang

dimasukkan, dan lainnya. Oleh sebab itu data salah yang telah

tersimpan dalam database dapat diedit / diperbaiki.

Pada dasarnya, form edit data sama dengan form input data.

Yang membedakan hanya pada form edit tersebut, data yang

akan diedit dapat ditampilkan.

Langkah-langkah membuat form edit data :

1. Pada notepad buat file baru dengan nama edit.php

2. Salin semua script file index.php kedalam file edit.php

3. Tambahkan beberapa script agar data yang akan diedit

dapat ditampilkan.

<tr> <td>Username</td> <td>:</td> <td><input type="text" name="username" maxlength="20" required="required" value="<?php echo $data['username']; ?>" disabled /></td> </tr> <tr> <td>Password</td> <td>:</td> <td><input type="password" name="password" maxlength="20" required="required" value="<?php echo $data['password']; ?>" /></td> </tr> <tr> <td>Fullname</td> <td>:</td> <td><input type="text" name="fullname" maxlength="100" required="required" value="<?php echo $data['fullname']; ?>" /></td> </tr> <tr> <td>Email</td> <td>:</td> <td><input type="email" name="email" required="required" value="<?php echo $data['email']; ?>" /></td> </tr>

Penggunaan atribut disabled,

agar username tidak dapat dirubah

<tr> <td>Agama</td> <td>:</td> <td><input type="text" name="agama" required="required" value="<?php echo $data['agama']; ?>" /></td> </tr> <tr> <td>Nomor HP</td> <td>:</td> <td><input type="text" name="no_hp" maxlength="14" required="required" value="<?php echo $data['no_hp']; ?>" /></td> </tr> <tr> <td align="right" colspan="3"><input type="submit" name="submit" value="Simpan" /></td> </tr> </tbody> </table> </form> <td><a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> || <a href="#">Hapus</a></td> </body> </html>

Baris script yang berwarna kuning

pengganti script sebelumnya :

<a href="view.php">Lihat Data</a>

Sampai pada tahapan ini perubahan data belum

dapat dilakukan, melainkan hanya dapat

menampilkan data pada form edit saja.

Untuk dapat merubah data pada database,

maka perlu dibuat query SQL lagi untuk meng-

update database dengan data yang baru.

Langkah-langkanya adalah sebagai berikut :

1. Buat file baru dengan nama update.php

2. Ketikkan kode script berikut :

3. Tambahkan baris script berikut pada file view.php setelah <h1> </h1>

<?php if (!empty($_GET['message']) && $_GET['message'] == 'success') { echo '<h3>Berhasil meng-update data!</h3>'; } ?>

Perubahan script pada file view.php setelah ditambahkan baris script diatas,

dapat dilihat pada pembahasan / slide sebelumnya.

1. Apabila tahapan ini sudah dilakukan, maka untuk mengetahui form edit

data berfungsi dengan benar, sekarang coba jalankan aplikasi dengan

membuka halaman view.php pada browser.

2. Kemudian ubah-lah salah satu data yang telah diinputkan dengan meng-

klik tombol edit pada daftar data user. Lihat Gambar 5.

Gambar 5 Halaman Daftar Data User Akan Dilakukan Edit Record

Sebagai contoh pada Gambar 5, record no. 4 atas nama Balla Dewa Putra akan

dilakukan ubah data yaitu data Password dan No. HP.

Gambar 6 Form Edit Data

Pada Gambar 6 form edit data

dilakukan ubah data Password dan

Nomor HP

Gambar 7 Tampilan Halaman View Setelah Dilakukan Edit Data

Hapus Data

1. Buat file baru dengan nama delete.php dan ketikkan kode script berikut :

<?php include('config.php'); $id = $_GET['id']; $query = mysql_query("delete from user where user_id='$id'") or die(mysql_error()); if ($query) { header('location:view.php?message=delete'); } ?>

2. Kemudian tambahkan baris script pada link dalam file view.php seperti

berikut :

<td> <a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> || <a href="delete.php?id=<?php echo $data['user_id']; ?>">Hapus</a> </td>

Perubahan script pada file view.php setelah ditambahkan baris script diatas,

dapat dilihat pada pembahasan / slide sebelumnya.

3. Jalankan aplikasi dengan membuka halaman view.php pada browser.

4. Hapus-lah satu record data user pada daftar dengan meng-klik Hapus.

Gambar 8 Halaman Daftar Data User Akan Dilakukan Hapus Record

Gambar 9 Halaman Daftar Data User Setelah Dilakukan Hapus Record

Pada Gambar 9, yang menunjukkan record nomor 4 atas nama Balla Dewa

Putra telah terhapus dari daftar data user.

SELAMAT MENTJOBA &

SALAM SOEKSES

OOP 171215

Documents

Transcript of OOP 171215