LAPORAN

Pemrograman Berbasis Web

Tugas Web (Twitter Bootstrap)





disusun oleh :
Alfian Bayu Saputro
(1210651060)


PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHMMADIYAH JEMBER
2014

Apa itu CSS Framework
Ada yang belum tahu apa itu CSS Framework?. saya jelaskan secara singkat. Jadi CSS
Framework itu adalah tools yang memudahkan kita untuk membuat aplikasi web dengan
menggunakan HTML dan CSS.
Atau kalau kalo belum paham seperti ini maksudnya :
Sekumpulan abstraksi yang disediakan oleh pengembang framework untuk memberikan
fungsionalitas umum dari aplikasi, yang kemudian dapat digunakan oleh pengguna
framework untuk membangun sebuah aplikasi spesifik.

Apa itu Twitter Bootstrap
Bootstrap merupakan sebuah framework CSS dari Twitter, yang menyediakan kumpulan
komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa
untuk digunakan bersama-sama.
Bootstrap pertama kali muncul pada ajang hack week dan kini sudah mulai penyempurnaan.
Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa
membuat website yang powerfull mengikuti perkembangan browser. Website yang
menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.
Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau
tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak
sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website
tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya
perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML
standart bootstrap yang sangat simple. Tapi penggunaan bootstrap kadang membuat kita jadi
kurang kreatif, Coding yang sudah di buatkan oleh pengembang membuat desain web kita
terbatas. Sebenarnya kita masih bisa tambahkan CSS manual pada elemen-elemen bootstrap
untuk mempercantiknya, tapi jelas ini membuat web kita nanggung. Menambahkan CSS
manual sama saja kembali ke cara lama.

Jadi, pilihan Anda apakah akan mengikuti perkembangan jaman bersama bootstrap, editing
dan kelola website secara instan. Atau lebih suka oprek template sendiri berkutat dengan
kode CSS yang Anda susun-susun sendiri. Semua ini tergantung gantung pada programmer
itu sendiri apakah mau memdesain template sendiri yang menggunakan CSS manual atau
mengikti perkembangan jaman menggunakn bootstrap yang secara instan tanpa mengatur-
atur CSS secara manual. Berikut sedikit contoh gambaran web yang saya buat mengunakan
Twitter Bootstrap.



Soal
Membuat sebuah aplikasi CRUD dengan PHP tentang Mahasiswa, mata kuliah dan KRS.
Dimana dalam tampilannya menggunakan Twitter Bootstrap.

Jawaban
1. Pertama, membuat database sebagai tempat menyimpan datanya yang nantinya di insertkan
atau di tambahkan. Ini database yang saya buat beserta tabelnya :

Entitas/ Struktur dan data pada Mahasiswa








Entitas/ Struktur dan data pada Mata Kuliah




Entitas/ Struktur pada Hasil krs





2. Setelah membuat database, kemuadian membuat file koneksi.php dimana koseksi ini
sebagai penghubung dari file satu ke file yang lainnya. Berikut source code php nya:


3. Setelah membuat file koneksi.php kemudian membuat file login.php, di mana login ini
menggunakan form dari twitter boostrap. Sebagai langkah awal untuk memjalankan
perintah, berikut source code php nya:







Di dalam file login ini password memiliki kesamaan dengan nim yang di inputkan. Berikut
tampilan loginnya.:


4. Setelah sign in di tekan, akan masuk di pada file mahasiswa.php. pada file mahasiswa ini
akan langsung menampilkan data login yang sudah di set login yang kemudian data yang di
inputkan di ambil pada database. berikut source code php nya:








Berikut tampilan Data Mahasiswanya.:

5. Setelah membuat data mahasiswa. Kemudian membuat jadwal di file MK.php. dimana
pada file MK.php ini terdapat jadwal yang sudah di di inputkan pada table database
mata_kuliah. berikut source code php nya:


Berikut tampilan Data Maka Kuliah :


6. Kemudian setelah membuat file MK dan mahasiswa, kita membuat file baru dengan nama
krs, dimana krs ini menampung inputan data dari mahasiswa dan data dari mata kuliah.
Berikut lebih jelasnya:






dan ini tampilan krs.php sebelum mendapatkan inputan dari user:


7. Setelah membuat file login, mahasiswa dan mata kuliah kemudian. Untuk melakukan
penambahan atau insert digunakan file baru yakni proses.php. dimana di dalam proses.php
di dalamnya meng GET nilai dari file MK.php..














Kemudian setelah meng GET nilai baru menambahkan data. Berikut sourcede nya:



Berikut tampilan Proses penambahan data :


Tampilan Proses penambahan data, kemudian masuk pada file krs.php


Tampilan Proses penambahan data yang sudah tampil di atas. Akan tampil secara otomatis
pada table hasil_krs di dalam database krs.


8. Setelah proses insert. Kemudian membuat proses mengupdate atau lebih tepatnya
merubah data untuk di perbaharui. Dimana di butuhkan file baru, namanya update.php.
kali ini data mahasiswa yang di update, file ini sama seperti file mahasiswa. Namun yang
membedakannya adalah querynya,. Berikut querynya :


Dan ini tampilan data sebelum di tekan button edit, yang kemudian akan menuju pada
update.php.


Tampilan setelah button edit di tekan.












Tampilan setelan di tekan button simpan akan otomatis menyimpan di data mahasiswa
awalnya.


Dan data update ini juga tersimpan otomatis di dalam database , table hasil_tes.

9. Setelah data sudah bisa di tambah dan di update,maka langkah selanjutnya bagaimana
cara menghapus data nya. Buat file baru dengan nama delete.phpuntuk melakukan proses
delete. Querynya berikut ini:










Data insert sebelumnya, dan belum di hapus:


Data setelah di hapus akan otomatis akan langsung di tersimpan pada database:


Dan data yang di database juga akan terhapus:


Sekian sedikit penjelasan yang saya bisa sampaikan, kurang lebihnya saya mintak maaf yang
sebesar-besarnya Terima Kasih