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