Update Your Informatic Technology Knowledge

TUTORIAL BELAJAR PEMROGRAMAN BERBASIS WEB DENGAN DATABASE MEMBUAT APLIKASI SEDERHANA ( INPUT, TAMPIL, EDIT, HAPUS, CARI ) Disusun Oleh : Anna Kharismaning Shinta Ayu, S.Kom UPTECHNO.COM

Langkah-langkah yang harus dilakukan adalah : 1. Membuat perancangan tentang website yang akan dibuat. 2. Membuat Database beserta tabel-tabel sesuai kebutuhan. 3. Membuat koneksi data untuk menghubungkan antara file web dengan database Biasanya : koneksi.php. REKOMENDASI Membuat Desain Web agar tampilan lebih menarik. Secara sederhana dapat menggunakan table atau frame. Minimal sebuah Website Memiliki : Header, Content dan Footer. 4. Membuat Aplikasi Input. 5. Membuat Aplikasi Proses Input. 6. Membuat Aplikasi Tampil. 7. Membuat Aplikasi Edit. 8. Membuat Aplikasi Proses Edit. 9. Membuat Aplikasi Hapus. 10. Membuat Aplikasi Cari. 11. Membuat Aplikasi Proses Cari dan Tampilan pencariannya. TAMBAHAN 12. Membuat Aplikasi LOGIN. 13. Membuat Aplikasi Tambahan seperti Counter (Untuk melihat seberapa banyak orang yang mengunjungi website kita). 14. Membuat Aplikasi Tambahan seperti Tanggal. 2 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT DATABASE : PASTIKAN XAMPPNYA SUDAH AKTIF DI XAMPP CONTROL PANEL 1. Buka PhpMyadmin di Browser caranya : Ketikkan Localhost/phpmyadmin 2. Buat Database Baru dengan mengklik Databases CATATAN : Perhatikan Bahasa/Language yang di gunakan dalam PhpMyadmin pastikan menggunakan bahasa yang mudah kita pahami. 3. Ketikkan nama database yang kita inginkan kemudian klik Create 3 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

Catatan : Dalam pembuatan nama database/nama tabel/nama foder/nama file pastikan huruf kecil, singkat, tidak boleh ada spasi dan mudah diingat 4. Klik nama database yang sudah kita buat tadi disebelah kiri / dibawah Logo phpmyadmin 5. Buat tabel baru dengan nama identitas dengan jumlah kolom 4 6. Isikan Struktur tabel a sebagai berikut : Column Type Lenght INDEX TAMBAHAN no_urut Int 3 PRIMARY_KEY AUTO_INCREMENT nama Varchar 20 - - jenis_kel Varchar 10 - - alamat Varchar 25 - - Kemudian Pilih SAVE (Untuk menyimpan struktur table yang kita buat tadi) Kalau GO berfungsi untuk menambahkan 1 kolom baru lagi. 4 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

TAMPILAN STRUKTURNYA : MEMBUAT KONEKSI DATA : (koneksi.php) $server="localhost"; $username="root"; $password=""; $database="adek"; mysql_connect($server,$username,$password) ordie("koneksi gagal"); mysql_select_db($database) ordie("database tidak bisa dibuka"); MEMBUAT KONEKSI DATA DENGAN PENJELASANNYA : $server="localhost"; //host $username="root"; $password=""; $database="adek"; //nama database //mengkoneksikan ke server 5 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

mysql_connect($server,$username,$password) ordie("koneksi gagal"); //memilih database yg dipakai ke server mysql_select_db($database) ordie("database tidak bisa dibuka"); CATATAN PENTING : File tersebut disimpan pada folder XAMPP C:/ xampp htdocs Buat Folder Baru/penamaan terserah pkm File tersebut disimpan dalam folder pkm MEMBUKA/MENGEKSEKUSI FILE KONEKSI DATA DI BROWSER : Ketikkan localhost/pkm/koneksi.php (ENTER) Bila tampilan di browser kosong berarti koneksi.php berhasil 6 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT FORM INPUT DATA : (form_input.php) <html> <title>form Input Berita</title> <body> <form action="proses_input.php" method="post"> <table border=1 bgcolor=#ff6600> <td colspan=2 >Input Data Peserta Seminar</td> <td>nama :</td> <td><input type="text" name="nama"></td> <td>jenis Kelamin :</td> <td><input type="radio" name="jenis_kelamin" value="laki- Laki">Laki-Laki</select><br> <input type="radio" name="jenis_kelamin" value="perempuan">perempuan</select></td> <td>alamat :</td> <td><input type="text" name="alamat"></td> <td colspan=2 align="center"><input type="submit" value="proses"></td> </table> </form> </body> </html> 7 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT FORM INPUT DATA BESERTA PENJELASAN <html> <title>form Input Berita</title> <body> <form action="proses_input.php" method="post">  <table border=1 bgcolor=#ff6600> <td colspan=2 >Input Data Peserta Seminar</td> <td>nama :</td> <td><input type="text" name="nama"></td> <td>jenis Kelamin :</td> <td><input type="radio" name="jenis_kelamin" value="laki- Laki">Laki-Laki</select><br>  <input type="radio" name="jenis_kelamin" value="perempuan">perempuan</select></td> <td>alamat :</td> <td><input type="text" name="alamat"></td> <td colspan=2 align="center"><input type="submit" value="proses"></td>  </table> </form> 8 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

</body> </html> MEMBUKA/MENGEKSEKUSI FILE form_input.php DI BROWSER : Ketikkan localhost/pkm/form_input.php (ENTER) tampilan di browser : 9 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT PROSES INPUT DATA : (proses_input.php) include "koneksi.php"; $no=$_post['no']; $nama=$_post['nama']; $jenis_kelamin=$_post['jenis_kelamin']; $alamat=$_post['alamat']; mysql_query("insert into identitas (no_urut, nama, jenis_kel, alamat) values ('$no','$nama','$jenis_kelamin','$alamat')"); header("location:tampil_data.php"); 10 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT PROSES INPUT DATA BESERTA PENJELASAN : (proses_input.php) //memanggil dan memasukkan koneksi database include "koneksi.php"; //menerima variabel yang telah dikirimkan dari form $no=$_post['no']; //variabel tujuan($no) = mengirimkan data //inputan ['no'](sesuai name di textbox form/harus sama) //tujuan <-- sumber dst untuk lainnya $nama=$_post['nama']; $jenis_kelamin=$_post['jenis_kelamin']; $alamat=$_post['alamat']; //perintah untuk memasukkan data kedalam database mysql_query("insert into identitas (no_urut, nama, jenis_kel, alamat) values ('$no','$nama','$jenis_kelamin','$alamat')"); /* masukkan data kedalam tabel identitas dengan field no_urut, nama, jenis_kel, alamat (harus sama dengan database) yang berisi data dari variabel '$no','$nama','$jenis_kelamin','$alamat' */ //pindah ke file tampil_data.php setelah proses berhasil header("location:tampil_data.php"); Catatan : Bila file berisi full kode PHP maka tidak ada tampilannya, kode PHP adalah kode Proses 11 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT TAMPIL DATA : (tampil_data.php) include "koneksi.php"; echo "<table width=900 border=1>"; echo "<tr bgcolor = '#CCCCCCC'> <td align='center' width=50><b>no</b></td> <td align='center' width=350><b>nama</b></td> <td align='center' width=200><b>jenis Kelamin</b></td> <td align='center' width=400><b>alamat</b></td> <td align='center' colspan=2><b>aksi</b></td> "; $result = mysql_query("select * FROM identitas ORDER BY no_urut ASC"); while($r=mysql_fetch_array($result)) { echo " <td align='center'>$r[no_urut]</td> <td>$r[nama]</td> <td>$r[jenis_kel]</td> <td>$r[alamat]</td>"; echo"<td ><a href='edit.php?id=$r[no_urut]'>edit</a></td>"; echo"<td colspan=2><a href='hapus.php?id=$r[no_urut]'>hapus</a></td>"; } echo ""; echo "</table>"; echo "<a href='form_input.php'>tambah Data Lagi</a>"; 12 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT TAMPIL DATA BESERTA PENJELASANNYA //Memanggil koneksi database include "koneksi.php"; //Membuat tabel echo "<table width=900 border=1>"; echo "<tr bgcolor = '#CCCCCCC'> <td align='center' width=50><b>no</b></td> <td align='center' width=350><b>nama</b></td> <td align='center' width=200><b>jenis Kelamin</b></td> <td align='center' width=400><b>alamat</b></td> <td align='center' colspan=2><b>aksi</b></td> "; /* Perintah untuk mengambil data dari tabel identitas - mengurutkan nama secara descending (maksud ASC) */ $result = mysql_query("select * FROM identitas ORDER BY no_urut ASC"); //Menampilkan data yang diambil dari database secara array while($r=mysql_fetch_array($result)) { echo " <td align='center'>$r[no_urut]</td> <td>$r[nama]</td> <td>$r[jenis_kel]</td> <td>$r[alamat]</td>"; //Membuat link ke edit.php dengan membawa variabel id yang berisi no_urut echo"<td ><a href='edit.php?id=$r[no_urut]'>edit</a></td>"; //Membuat link ke hapus.php dengan membawa variabel id yang berisi no_urut echo"<td colspan=2><a href='hapus.php?id=$r[no_urut]'>hapus</a></td>"; } echo ""; echo "</table>"; echo "<a href='form_input.php'>tambah Data Lagi</a>"; 13 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUKA/MENGEKSEKUSI FILE tampil_data.php DI BROWSER : Ketikkan localhost/pkm/tampil_data.php (ENTER) tampilan di browser : 14 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT EDIT DATA : (edit.php) //masukkan koneksi database include 'koneksi.php'; //menerima variabel id yang dikirimkan melalui url $id = $_GET['id']; //mengambil data dari tabel identitas menurut id yang telah dikirimkan $result = mysql_query("select * FROM identitas where no_urut='$id'"); //memasukkan hasil quuery secara array while($r=mysql_fetch_array($result)) { $no = $r['no_urut']; //$no(var buatan) =$r['sesuai field yg ada di tabel, DB']; $nama = $r['nama']; $jenis_kelamin = $r['jenis_kel']; $alamat = $r['alamat']; } <form action="proses_edit.php" method="post"> <table border=0 bgcolor=#ff6600>  <td colspan=2 >Input Data Peserta Seminar</td> <td>no Urut :</td> <td><input type="hidden" name="no" value='echo "$no"; '></td> <td>nama :</td> <td><input type="text" name="nama" value='echo "$nama"; '></td> 15 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

if($jenis_kelamin=='laki-laki') { <td>jenis Kelamin :</td> <td><input type="radio" name="jenis_kelamin" value="laki-laki" checked>laki-laki</td> <td></td> <td><input type="radio" name="jenis_kelamin" value="perempuan">perempuan</select></td> } else if($jenis_kelamin=='perempuan') { <td>jenis Kelamin :</td> <td><input type="radio" name="jenis_kelamin" value="laki-laki" >Laki-Laki</td> <td></td> <td><input type="radio" name="jenis_kelamin" value="perempuan" checked>perempuan</select></td> } <td>alamat :</td> <td><input type="text" name="alamat" value=' echo "$alamat"; '></td> <td colspan=2 align="center"><input type="submit" value="update"></td> 16 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

</table> </form> </body> </html> MEMBUAT EDIT DATABESERTA PENJELASANNYA //masukkan koneksi database include 'koneksi.php'; //menerima variabel id yang dikirimkan melalui url $id = $_GET['id']; //mengambil data dari tabel identitas menurut id yang telah dikirimkan $result = mysql_query("select * FROM identitas where no_urut='$id'"); //memasukkan hasil quuery secara array kedalam $r while($r=mysql_fetch_array($result)) { $no = $r['no_urut']; //$no(var buatan) =$r['sesuai field yg ada di tabel, DB']; $nama = $r['nama']; $jenis_kelamin = $r['jenis_kel']; $alamat = $r['alamat']; } <form action="proses_edit.php" method="post"> <table border=0 bgcolor=#ff6600>  <td colspan=2 >Input Data Peserta Seminar</td> <td>no Urut :</td> 17 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

<td><input type="hidden" name="no" value='echo "$no"; '></td> <td>nama :</td> <td><input type="text" name="nama" value='echo "$nama"; '></td> if($jenis_kelamin=='laki-laki') { <td>jenis Kelamin :</td> <td><input type="radio" name="jenis_kelamin" value="laki-laki" checked>laki-laki</td> <td></td> <td><input type="radio" name="jenis_kelamin" value="perempuan">perempuan</select></td> } else if($jenis_kelamin=='perempuan') { <td>jenis Kelamin :</td> <td><input type="radio" name="jenis_kelamin" value="laki-laki" >Laki-Laki</td> <td></td> <td><input type="radio" name="jenis_kelamin" value="perempuan" checked>perempuan</select></td> } <td>alamat :</td> 18 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

<td><input type="text" name="alamat" value=' echo "$alamat"; '></td> <td colspan=2 align="center"><input type="submit" value="update"></td> </table> </form> </body> </html> MEMBUKA/MENGEKSEKUSI FILE edit.php DI BROWSER : Untuk memunculkan tampilan dibawah ini buka tampil_data.php Kemudian klik link edit. *** Kalau langsung mengetikkan localhost/pkm/edit.php itu tidak boleh karena harus ada pembacaan data dari tampil_data.php tampilan di browser : 19 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT PROSES EDIT DATA : (proses_edit.php) include "koneksi.php"; $no=$_post['no']; $nama=$_post['nama']; $jenis_kelamin=$_post['jenis_kelamin']; $alamat=$_post['alamat']; $result = mysql_query("update identitas SET nama = '$nama', jenis_kel = '$jenis_kelamin', alamat = '$alamat' WHERE no_urut = $no"); header("location:tampil_data.php"); 20 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT PROSES EDIT DATABESERTA PENJELASANNYA //masukkan koneksi database include "koneksi.php"; //menerima variabel yang telah dikirimkan dari form $no=$_post['no']; $nama=$_post['nama']; $jenis_kelamin=$_post['jenis_kelamin']; $alamat=$_post['alamat']; //perintah untuk mengupdate tabel berdasarkan nomor urut yang telah dikirim $result = mysql_query("update identitas SET nama = '$nama', jenis_kel = '$jenis_kelamin', alamat = '$alamat' WHERE no_urut = $no"); //dialihkan ke tampil_data.php header("location:tampil_data.php"); Catatan : Bila file berisi full kode PHP maka tidak ada tampilannya, kode PHP adalah kode Proses 21 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT HAPUS DATA : (hapus.php) include 'koneksi.php'; $id = $_GET['id']; $result = mysql_query("delete FROM identitas WHERE no_urut = $id"); header("location:tampil_data.php"); MEMBUAT HAPUS DATA BESERTA PENJELASANNYA //masukkan koneksi database include 'koneksi.php'; //menerima variabel id yang dikirimmkan melalui url $id = $_GET['id']; //menghapus data dari tabel identitas menurut id yang telah dikirimkan $result = mysql_query("delete FROM identitas WHERE no_urut = $id"); //dialihkan ke tampil_data.php header("location:tampil_data.php"); Untuk melihat hasil eksekusi bisa berjalan atau tidak coba jalankan localhost/pkm/tampil_data.php kemudian klik link hapus 22 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

MEMBUAT PROGRAM CARI Hal yang harus dilsayakan : 1. Membuat Form Cari 2. Membuat Proses Cari KODE FORM CARI (form_cari.php) <html> <head> <title>cari Data</title> </head> <body> <form action="proses_cari.php" method="post"> Masukkan Kata Kunci : <input type="text" name="kunci" size=25> <input type="submit" name="cari" value="cari"> </form> </body> </html> MEMBUKA/MENGEKSEKUSI FILE form_cari.php DI BROWSER : Ketikkan localhost/pkm/form_cari.php (ENTER) tampilan di browser : 23 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

KODE PROSES CARI (proses_cari.php) $kunci=$_post[ kunci ]; echo"data yang akan dicari: $kunci<br>"; $konek=mysql_connect('localhost','root'); mysql_select_db('adek',$konek); $query=mysql_query("select*from `identitas` WHERE `nama` like '%$kunci%'"); $jumlah=mysql_num_rows($query); echo"jumlah data yang ditemukan=$jumlah<br>"; echo"==========================<br>"; While($hasil=mysql_fetch_assoc($query)){ echo"<table width=600 border=0 cellspacing=1 cellpadding=2>"; echo""; echo"<td bgcolor=#ff9900><strong><font color=#ffffff>no Urut :".$hasil[ no_urut ]."</font></strong></td>"; echo""; echo""; echo"<td bgcolor=#660000><strong><font color=#ffffff>nama : ".$hasil[ nama ]."</font></strong></td>"; echo""; echo""; echo"<td bgcolor=#660000><strong><font color=#ffffff>jenis Kelamin : ".$hasil[ jenis_kel ]."</font></strong></td>"; echo""; echo""; echo"<td bgcolor=#660000><strong><font color=#ffffff>alamat : ".$hasil[ alamat ]."</font></strong></td>"; echo""; echo""; echo"</table>"; echo"<br>"; } 24 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

Cara menjalankan program cari : 1. Masukkan kata kunci yang akan dicari misal : 2. Maka hasil pencariannya : 25 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com

Referensi : Kadir, Abdul. 2008. Dasar Pemrograman WEB Dinamis Menggunakan PHP. Yogyakarta: ANDI. Biografi Penulis Perkenalkan nama saya Anna Kharismaning Shinta Ayu, biasa dipanggil Anna. Kelahiran tahun 1993 tepatnya 21 September 1993. Riwayat pendidikan, tahun 2011 lulus dari SMK Negeri 2 Semarang jurusan Rekayasa Perangkat Lunak dan tahun 2016 telah menyelesaikan kuliah Program Studi Teknik Informatika (S1) Universitas Semarang. Pengalaman komunitas dan organisasi yaitu Informatic Technology Community (ITC) Universitas Semarang dan volunteer Female Developer (FemaleDev) Kota Semarang. Share pengalaman nih, dulu saat saya ditunjuk FemaleDev Kota Semarang untuk berpartisipasi dalam acara Code For Vote dalam pemilihan Calon Presiden di Jakarta Tahun 2014 lalu dalam satu team, saya berkolaborasi dengan teman-teman dari UDINUS dan UNDIP. Team kami membuat sebuah sistem berbasis web dengan memanfaatkan data-data (API) yang diberikan oleh KPU pusat. Saat user memvoting menggunakan sistem kami, secara otomatis memberikan user location (Google Map) pada peta indonesia yang ada disistem kami. Akhirnya team kami diberi kesempatan untuk mempresentasikan dan sharing dalam acara Google Developer Group (GDG) Kota Semarang. Sungguh pengalaman yang luar biasa, So, teman-teman janganlah menyerah untuk terus berkarya. Satu karya sederhana tetapi bermanfaat untuk masyarakat luas adalah hal yang sangat berharga demi memajukan negeri tercinta kita. Terima Kasih (kharismaanna@gmail.com) 26 Tutorial Belajar Pemrograman Berbasis Web dengan Database uptechno.com