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 Update Your Informatic Technology Knowledge


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



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



TAMPILAN STRUKTURNYA :

MEMBUAT KONEKSI DATA : (koneksi.php)
mysql_connect($server,$username,$password) ordie("koneksi gagal");

mysql_select_db($database) ordie("database tidak bisa dibuka"); ?>

MEMBUAT KONEKSI DATA DENGAN PENJELASANNYA :
//mengkoneksikan ke server 5



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



MEMBUAT FORM INPUT DATA : (form_input.php) Form Input Berita

Input Data Peserta Seminar

Nama :

Jenis Kelamin : Laki-Laki
Perempuan

Alamat :

7



MEMBUAT FORM INPUT DATA BESERTA PENJELASAN Form Input Berita


Nama :

Perempuan

Alamat :

8



MEMBUKA/MENGEKSEKUSI FILE form_input.php DI BROWSER :

Ketikkan localhost/pkm/form_input.php (ENTER) tampilan di browser :

9



MEMBUAT PROSES INPUT DATA : (proses_input.php)
mysql_query("insert into identitas (no_urut, nama, jenis_kel, alamat) values ('$no','$nama','$jenis_kelamin','$alamat')");

header("Location:tampil_data.php"); ?>

10



MEMBUAT PROSES INPUT DATA BESERTA PENJELASAN : (proses_input.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



MEMBUAT TAMPIL DATA : (tampil_data.php) "; echo " No Nama Jenis Kelamin Alamat Aksi "; $result = mysql_query("SELECT * FROM identitas ORDER BY no_urut ASC"); while($r=mysql_fetch_array($result)) { echo " $r[no_urut] $r[nama] $r[jenis_kel] $r[alamat]"; echo"Edit"; echo"Hapus"; } echo ""; echo ""; echo "Tambah Data Lagi"; ?>

12



MEMBUAT TAMPIL DATA BESERTA PENJELASANNYA "; echo " No Nama Jenis Kelamin Alamat Aksi "; /* 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 " $r[no_urut] $r[nama] $r[jenis_kel] $r[alamat]"; //Membuat link ke edit.php dengan membawa variabel id yang berisi no_urut echo"Edit"; //Membuat link ke hapus.php dengan membawa variabel id yang berisi no_urut echo"Hapus"; } echo ""; echo ""; echo "Tambah Data Lagi"; ?>

13



MEMBUKA/MENGEKSEKUSI FILE tampil_data.php DI BROWSER :

Ketikkan localhost/pkm/tampil_data.php (ENTER) tampilan di browser :

14



MEMBUAT EDIT DATA : (edit.php)
15



16




No Urut :

Nama :


Perempuan


Perempuan

Alamat :

MEMBUAT EDIT DATABESERTA PENJELASANNYA
17



18




No Urut :

Nama :


Perempuan


Perempuan

Alamat :

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



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



MEMBUAT PROSES EDIT DATABESERTA PENJELASANNYA

Catatan : Bila file berisi full kode PHP maka tidak ada tampilannya, kode PHP adalah kode “Proses”

21



MEMBUAT HAPUS DATA : (hapus.php)

MEMBUAT HAPUS DATA BESERTA PENJELASANNYA

Untuk melihat hasil eksekusi bisa berjalan atau tidak coba jalankan localhost/pkm/tampil_data.php kemudian klik link hapus

22



MEMBUAT PROGRAM CARI Hal yang harus dilsayakan : 1. Membuat Form Cari 2. Membuat Proses Cari

KODE FORM CARI (form_cari.php)

Cari Data
Masukkan Kata Kunci :

MEMBUKA/MENGEKSEKUSI FILE form_cari.php DI BROWSER :

Ketikkan localhost/pkm/form_cari.php (ENTER) tampilan di browser :

23



KODE PROSES CARI (proses_cari.php) "; $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
"; echo"==========================
"; While($hasil=mysql_fetch_assoc($query)){ echo""; echo""; echo""; echo""; echo""; echo""; echo""; echo""; echo""; echo""; echo""; echo""; echo"";

echo""; echo"
<strong>No Urut :".$hasil[‘no_urut’]."
<strong>Nama : ".$hasil[‘nama’]."
<strong>Jenis Kelamin : ".$hasil[‘jenis_kel’]."
<strong>Alamat : ".$hasil[‘alamat’]."

"; echo"
"; } ?> 24



Cara menjalankan program cari : 1. Masukkan kata kunci yang akan dicari misal :

2. Maka hasil pencariannya :

25



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

([email protected])

26


Kasih

Input Data Peserta Seminar
Nama :
Jenis Kelamin :	Laki-Laki Perempuan
Alamat :

Input Data Peserta Seminar
No Urut :
Nama :
Jenis Kelamin :	Laki-Laki
	Perempuan
Jenis Kelamin :	Laki-Laki
	Perempuan
Alamat :

Update Your Informatic Technology Knowledge

Recommend Documents