Aplikasi Web Sederhana
-
Upload
gietz-willalwaysluv-helena -
Category
Documents
-
view
64 -
download
0
Transcript of Aplikasi Web Sederhana
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 1/14
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 2/14
Pada tutorial kali ini, saya akan sedikit mengimplementasikan ilmu yang saya dapatkan tentang
pembuatan aplikasi berbasis web dengan menggunakan PHP dan MySQLsebagai databasenya.
Pembuatan aplikasi web tersebut adalah apliksi sederhana dengan fasilitas CRUD (Create, Read,
Update dan Delete) .
Tabel yang akan kita buat sekarang adalah tabel mahasiswa, dimana tabel tersebut memiliki beberapa
kolom, yaitu nim, nama, tanggal_lahir, jurusan dan alamat
Langsung saja kita mulai.....
Membuat database
Sebelum memulai membuat program aplikasi web tersebut, terlebih dahulu kita harus membuatdatabasenya yang berfungsi untuk menyimpan data mahasiswa.
• Buka Terminal dengan menekan tombol CTRL + ALT + T, diteruskan dengan mengetikkan perintah sudo mysql -u root -p, pada password for [user] : isikan password root anda, pada
Enter Password : isikan password MySQL anda, sehingga muncul tampilan seperti berikut ini
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 3/14
• Membuat database universitas, dengan mengetikkan perintah
create database universitas;
• Menggunakan database universitas, dengan mengetikkan perintah
use universitas;
• Membuat tabel mahasiswa, dengan mengetikkan perintah :
create table mahasiswa (nim varchar(8) primary key not null,nama varchar(50) not null,tanggal_lahir date not null,jurusan varchar(50) not null,alamat varchar(75) not null );
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 4/14
Membuat Project Aplikasi
Pada langkah selanjutnya, kita akan menggunakan text editor seperti gedit, nano, vim atau yang lainnya
untuk menuliskan script PHP.
Membuat Form Input Data Mahasiswa
untuk membuat form input data mahasiswa ketikkan script PHP berikut ini ke text editor pilihan anda :
<form method=post action=input_mahasiswa.php><table border=0><tr><td>NIM</td><td><input type=text name=nim></td>
</tr><tr><td>Nama</td><td><input type=text name=nama></td></tr><tr><td>Tanggal Lahir</td><td><input type=text name=tanggal></td></tr><tr><td>Jurusan</td><td><input type=text name=jurusan></td></tr><tr>
<td>Alamat</td><td><input type=text name=alamat></td></tr><tr><td><input type=submit value=Simpan><input type=resetvalue=Reset></td></tr></table></form>
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 5/14
simpan script diatas dengan nama form_mahasiswa.php di /var/www/aplikasi_web/
setelah coba tes apakah script yang kita buat sudah benar, dengan cara melihatnya di browser. Buka browser pilihan anda misalnya Firefox, pada Address Bar isikan
http://localhost/aplikasi_web/form_mahasiswa.php lalu ENTER
Membuat proses input data mahasiswa
Pada langkah sebelumnya kita telah membuat form untuk pengisian data mahasiswa, untuk selanjutnyakita akan membuat script untuk memproses input data mahasiswa yang akan dimasukkan ke database
mahasiswa
Untuk proses input data mahasiswa ke database ketikkan script PHP berikut ini :
<?phpmyql_connect ("localhost", "root", "password");mysql_select_db("universitas");
mysql_query ("insert into mahasiswa values ('$_POST[nim]','$_POST[nama]','$_POST[tanggal_lahir]','$_POST[jurusan]','$_POST[alamat]'
)");
header("location:form_mahasiswa.php");
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 6/14
?>
Simpan script diatas dengan nama input_mahasiswa.php di /var/www/aplikasi_web/
sekarang coba test apakah script yang kita buat berhasil, tidak terjai error dan bisa menyimpan data
mahasiswa. Buka kembali browser pilihan anda misalnya Firefox, pada Address Bar isikanhttp://localhost/aplikasi_web/form_mahasiswa.php lalu ENTER. Pada Form tersebut isikan datamahasiswa sesuai keinginan anda
Jika proses input berhasil coba dan tidak terjadi error, coba buka mysql kembali untuk mengecek apakah data mahasiswa berhasil diinput ke database MySQL. Ketikkan perintah berikut
select * from mahasiswa;
Jika Tampilan MySQL seperti gambar diatas, maka script yang kita buat berhasil.
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 7/14
Membuat Script PHP untuk menampilkan Data mahasiswa
Setelah kita selesai membuat script untuk input data mahasiswa, maka pada bagian ini kita membuat
script untuk menampilkan data mahasiswa yang telah selesai diinput.
ketikkan script PHP berikut ini :
<?php
mysql_connect("localhost", "root", "password");mysql_select_db("universitas");
$sql = mysql_query("select * from mahasiswa order by nim");
$no = 1;
echo "<table border=1>
<tr><th>No</th><th>NIM</th><th>Nama</th><th>Tanggal Lahir</th><th>Jurusan</th><th>Alamat</th>
</tr>";
while ($data = mysql_fetch_array($sql)) {echo "<tr>
<td>$no</td><td>$data[nim]</td><td>$data[nama]</td><td>$data[tanggal_lahir]</td><td>$data[jurusan]</td><td>$data[alamat]</td>
</tr>";$no++;
}
echo "</table>";
?>
Simpan script diatas dengan nama tampil_mahasiswa.php di /var/www/aplikasi_web/
Buka kembali browser pilihan anda misalnya Firefox, pada Address Bar isikan
http://localhost/aplikasi_web/tampil_mahasiswa.php lalu ENTER.
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 8/14
Jika Tampilannya seperti gambar diatas, maka script yang kita buat berhasil.
Membuat Aksi untuk Mengedit Data Mahasiswa
Pada Bagian ini kita akan membuat script untuk mengedit data mahasiswa,bila data tersebut terjadikesalahan. Sebelum membuat script edit tersebut, terlebih dahulu ubah script tampil_mahasiswa.php
menjadi seperti scritp berikut ini :
<?php
mysql_connect("localhost", "root", "password");mysql_select_db("universitas");
$sql = mysql_query("select * from mahasiswa order by nim");
$no = 1;
echo "<table border=1><tr>
<th>No</th><th>NIM</th><th>Nama</th><th>Tanggal Lahir</th><th>Jurusan</th><th>Alamat</th>
<th>Aksi</th> </tr>";
while ($data = mysql_fetch_array($sql)) {echo "<tr>
<td>$no</td><td>$data[nim]</td><td>$data[nama]</td><td>$data[tanggal_lahir]</td>
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 9/14
<td>$data[jurusan]</td><td>$data[alamat]</td> <td><a href=edit_mahasiswa.php?id=$data[nim]>Edit</a> </td>
</tr>";$no++;
}
echo "</table>";
?>
Sehingga tampilan script tersebut seperti berikut ini
Setelah selesai mengubah script tampil_mahasiswa.php, baru kita membuat script edit data
mahasiswa. Caranya :
Ketikkan script berikut ke text editor anda :
<?php
mysql_connect ("localhost", "root", "password");mysql_select_db("universitas");
$edit = mysql_query("select * from mahasiswa where nim=$_GET[id]");
$data = mysql_fetch_array($edit);
echo "<form method=post action=update_mahasiswa.php>";echo "<input type=hidden name=id value=$data[nim]>";
echo "<table border=0><tr>
<td>NIM</td><td>
<input type=text value='$data[nim]' name=nim
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 10/14
readonly></td>
</tr><tr>
<td>Nama</td><td><input type=text name=namavalue='$data[nama]'>
</td></tr><tr>
<td>Tanggal Lahir</td><td><input type=textvalue='$data[tanggal_lahir]' name=tanggal></td>
</tr><tr>
<td>Jurusan</td><td><input type=textvalue='$data[jurusan]'
name=jurusan></td></tr><tr>
<td>Alamat</td><td><input type=text value='$data[alamat]'name=alamat></td>
</tr><tr>
<td><input type=submit value=Ubah></td></tr>
</table></form>";
?>
Simpan script diatas dengan nama edit_mahasiswa.php di /var/www/aplikasi_web/
Test apakah scrit edit_mahasiswa.php. Klik pada link Edit pada script tampil_mahasiswa.php,
seperti gambar dibawah ini
selanjutnya akan menampilkan tampilan seperti berikut ini
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 11/14
Jika tampilan seperti diatas, script yang kita buat berhasil.
Selanjutnya kita akan membuat script untuk mengupdate data yang telah diedit/dirubah kedalamdatabase MySQL. Caranya ketikkan script berikut ini :
<?php
mysql_connect("localhost", "root", "password");mysql_select_db("universitas");
mysql_query("update mahasiswa set nama = '$_POST[nama]',tanggal_lahir= '$_POST[tanggal]',jurusan = '$_POST[jurusan]',alamat = '$_POST[alamat]'");
header("Location: tampil_mahasiswa.php");
?>
Simpan script diatas dengan nama update_mahasiswa.php di /var/www/aplikasi_web/
Untuk mengetest apakah script update_mahasiswa.php berhasil, edit kembali data mahasiswa
mahasiswa seperti berikut ini
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 12/14
Setelah itu klik Ubah, sehingga menampilkan tampilan seperti berikut ini
Lihat tampilan diatas telah berubah. Jika tampilan seperti diatas berarti script yang kita buat berhasil.
Membuat Aksi untuk Menghapus Data Mahasiswa
Pada bagian ini kita akan membuat script untuk menghapus data mahasiswa. Sebelum membuat script
tersebut ubah script tampil_mahasiswa.php seperti berikut ini
<?php
mysql_connect("localhost", "root", "password");mysql_select_db("universitas");
$sql = mysql_query("select * from mahasiswa order by nim");
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 13/14
$no = 1;
echo "<table border=1><tr>
<th>No</th>
<th>NIM</th><th>Nama</th><th>Tanggal Lahir</th><th>Jurusan</th><th>Alamat</th><th>Aksi</th>
</tr>";
while ($data = mysql_fetch_array($sql)) {echo "<tr>
<td>$no</td><td>$data[nim]</td><td>$data[nama]</td><td>$data[tanggal_lahir]</td><td>$data[jurusan]</td><td>$data[alamat]</td><td><a href=edit_mahasiswa.php?id=$data[nim]>Edit</a>
| <a href=hapus_mahasiswa.php?id=$data[nim]> Hapus</a> </td>
</tr>";
$no++;
}
echo "</table>";
?>
Sehingga tampilan script tersebut seperti berikut ini
Setelah selesai mengubah script tampil_mahasiswa.php, baru kita membuat script hapus datamahasiswa. Caranya :
5/16/2018 Aplikasi Web Sederhana - slidepdf.com
http://slidepdf.com/reader/full/aplikasi-web-sederhana-55ab51d67fcb8 14/14
Ketikkan script berikut ke text editor anda :
<?php
mysql_connect("localhost", "root", "password" );mysql_select_db("universitas");
mysql_query("delete from mahasiswa where nim='$_GET[id]'");
header("location: tampil_mahasiswa.php");
?>
Simpan script diatas dengan nama hapus_mahasiswa.php di /var/www/aplikasi_web/
Untuk mengetest apakah script hapus_mahasiswa.php berhasil. Klik pada link Hapus pada scripttampil_mahasiswa.php, seperti gambar dibawah ini
Setelah Diklik Link Hapus, Tampilannya menjadi seperti berikut ini
Demikianlah cara membuat aplikasi web sederhana dengan PHP dan MySQL. Semoga bisa membantuanda dalam memulai pemrograman berbasis web