LAPORAN

Pemrograman Berbasis Web

(Twitter Bootstrap)

Disusun oleh :

Alfiyani rindy

(1210651237)

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHMMADIYAH JEMBER

2015

Apa itu CSS Framework ?

CSS Framework

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:

5.Setelah membuat data mahasiswa. Kemudian membuat jadwal di fileMK.php.

dimana pada file MK.php ini terdapat jadwal yang sudah di di inputkan pada

table database mata_kuliah. berikut source code php nya

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: