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 .
Membuat Database dan Table
Gambar 1 Tabel User
Membuat Koneksi ke Database

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';
//Isikan nama database sesuai database

//yang telah dibuat
$dbname = 'belajar';
//Username untuk login ke host

$user = 'root';
//Untuk menghubungkan ke host

$connect = mysql_connect($host, $user,
$pass) or die(mysql_error());
//Apabila menggunakan PC pribadi

sebagai host, secara default password
dikosongkan
$pass = '';
//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 Form Input Data

Ketikkan kode berikut pada Notepad, kemudian simpan dalam folder belajar dengan
nama index.php.
<html>
<head>
<title>Belajar PBO dengan PHP</title>
</head>
<body>
<h1>Form Input Data User</h1>
Teks script yang berwarna merah,

untuk menampilkan pesan
sukses ketika berhasil
menyimpan data.
<?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"
<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>
Untuk menampilkan halaman daftar
</tr>
data-data yang telah disimpan
</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.
Gambar 2 Tampilan Form Input
Menyimpan Data
Ketikkan kode script dibawah ini dan simpan dengan nama insert.php.
<?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');
}
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.
2.
Buat halaman untuk menampilkan data-data yang telah di simpan.

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>
Baris script yang berwarna kuning

merupakan script tambahan untuk
memberikan info pesan bahwa update data
berhasil.
<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>
<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>
Baris script yang berwarna kuning adalah
<td><?php echo $data['password']; ?></td>
baris script LINK tambahan.
<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>
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>
Penggunaan atribut disabled,
<td>Password</td>
agar username tidak dapat dirubah
<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>
<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>
Baris script yang berwarna kuning
</tbody>
pengganti script sebelumnya :
</table>
<a href="view.php">Lihat Data</a>
</form>
<td><a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> || <a
href="#">Hapus</a></td>
</body>
</html>
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 mengupdate 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 mengklik 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.
Pada Gambar 6 form edit data

dilakukan ubah data Password dan
Nomor HP
Gambar 6 Form Edit Data
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
Pada Gambar 9, yang menunjukkan record nomor 4 atas nama Balla Dewa
Putra telah terhapus dari daftar data user.
Gambar 9 Halaman Daftar Data User Setelah Dilakukan Hapus Record
SELAMAT MENTJOBA
&
SALAM SOEKSES

Oop 171215

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Oop 171215

Uploaded by

Copyright:

Available Formats

Object Oriented Programming

Aplikasi Input Data pada PHP

2. Buat database dengan nama belajar. Kemudian

Membuat Database dan Table

Gambar 1 Tabel User

Membuat Koneksi ke Database

//Isikan nama database sesuai database

//Username untuk login ke host

//Untuk menghubungkan ke host

//Apabila menggunakan PC pribadi

//Untuk memilih database yang akan

Membuat Form Input Data

Teks script yang berwarna merah,

Gambar 2 Tampilan Form Input

//Simpan data ke database

Jalankan aplikasi dengan mengetikkan localhost/belajar pada browser.

Gambar 3 Halaman Pesan Berhasil Tambah Data

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

<?php include('config.php') ?>

Baris script yang berwarna kuning

<a href="index.php">+ Tambah Data</a> | <a href="logout.php"> Logout</a>

Untuk melihat hasilnya, jalankan aplikasi dengan mengetikkan

Gambar 4 Halaman View.php

Dalam suatu aplikasi, update data diperlukan untuk mengatasi

Sampai pada tahapan ini perubahan data belum

Untuk dapat merubah data pada database,

Gambar 5 Halaman Daftar Data User Akan Dilakukan Edit Record

Pada Gambar 6 form edit data

Gambar 6 Form Edit Data

Gambar 7 Tampilan Halaman View Setelah Dilakukan Edit Data

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

Gambar 8 Halaman Daftar Data User Akan Dilakukan Hapus Record

Gambar 9 Halaman Daftar Data User Setelah Dilakukan Hapus Record

You might also like