Aplikasi

Data Mahasiswa Sederhana Dengan PHP Dan JQuery

Langkah Kerja:

1. Buat folder project baru dengan nama mahasiswa
2. Download Bootstrap versi 3 melalui getbootstrap.com
3. Extract hasil download, kemudian letakkan folder css,js,dan fonts kedalam folder
mahasiswa
4. Download jquery, dan simpan hasil download pada folder js yang ada pada folder
mahasiswa. Seharusnya, struktur folder yang anda miliki seperti berikut ini:

gambar 1. File mhs.js nanti akan kita buat pada langkah-langkah berikutnya.
Sementara diabaikan dulu


5. Buat database atau gunakan database yang ada dan buat sebuah tabel mahasiswa
dengan struktur tabel seperti gambar di bawah ini:

Materi Kuliah Desain dan Pemrograman Web PJJ PENS | Oleh: Dwi Susanto S.ST MT

Perhatikan untuk field id jadikan primary key dan Auto Increment

6. Pada folder mahasiswa, buat file koneksi.php. sesuaikan nama database dan
username dan password database MySQL

Materi Kuliah Desain dan Pemrograman Web PJJ PENS | Oleh: Dwi Susanto S.ST MT


7. Aplikasi yang akan kita buat akan menerapkan metode Model View Controller (MVC)
secara sederhana. Kita buat terlebih dahulu file model.php dalam folder mahasiswa

Materi Kuliah Desain dan Pemrograman Web PJJ PENS | Oleh: Dwi Susanto S.ST MT


8. Selanjutnya kita buat file baru bernama controller.php dalam folder mahasiswa
File ini berfungsi untuk menjembatani permintaan user

9. Berikutnya dalam folder js, buat file mhs.js seperti berikut ini:

Materi Kuliah Desain dan Pemrograman Web PJJ PENS | Oleh: Dwi Susanto S.ST MT


10. Dan yang terakhir, dalam folder mahasiswa, buatlah file lihat_data.php seperti di
bawah ini:

Materi Kuliah Desain dan Pemrograman Web PJJ PENS | Oleh: Dwi Susanto S.ST MT


11. Struktur akhir file-file yang telah anda buat seharusnya seperti gambar di bawah ini:

12. Silahkan jalannkan file lihatdata.php melalui web server anda. Harusnya hasil
tampilan yang anda peroleh seperti di bawah ini:

Silahkan anda coba isi melalui form yang telah anda buat. Apabila berhasil, maka
data akan langsung ditampilkan di sebelah kiri. Apabila belum berhasil, silahkan
dicek lagi file-file yang telah anda buat.1

Materi Kuliah Desain dan Pemrograman Web PJJ PENS | Oleh: Dwi Susanto S.ST MT