PEMROGRAMAN BERBASIS WEB

TWITTER BOOTSTRAP

Oleh : Luszara Lucky Viona

Nim :120651229

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

1. Tujuan Perkuliahan:

Memahami konsep dasar Twitter Bootstrap dan penggunaannya sebagai

templating pada website. 2. Dasar Teori

Framework CSS yang dibuat oleh Twitter

CSS siap pakai, sehingga developer tidak perlu menulis CSS dari awal

Download: http://twitter.github.com/bootstrap/

Support dengan modern web browser

Layout mirip dengan twitter

Kompatible dengan semua platform

3. Komponen Twitter Bootstrap:

Button groups

Button dropdowns

Navigational tabs, pills, and lists

Navbar

Labels

Badges

Page header and hero unit

Thumbnails

Alerts

Progress bars

Modals

Dropdowns

Tooltips

Popovers

Accordion

Carousel

Typeahead

4. Komponen Bootstrap Button

Nah.. sekarang saya akan mencoba membuat sebuah aplikasi CRUD dengan

PHP tentang mahasiswa, mata kuliah, dan KRS.

(Form tampilan menggunakan twitter bootstrap).

Langkah pertama:

membuat Database dengan nama crud. Kemudian membuat table Mahasiswa:

Lanjut lagi membuat tabel mata_kuliah

Hasilnya:

Kemudian buat lagi tabel krs

Hasilnya:

Nah.. langkah selanjutnya, langsung menuju script nya.

Script yang pertama adalah Koneksi.php

Index.php

Mahasiswa.data.php

Lalu, script selanjutnya.. Mahasiswa.form.php

Kemudian Mahasiswa.input.php

Maka tampilannya seperti ini:

Lalu klik Button Mahasiswa, maka seperti ini tampilannya

Tampilan Edit:

Tampilan Delete:

Kemudian Script untuk mata_kuliah.input.php

Selanjutnya, mata_kuliah.form.php

Mata_kuliah.index.php

Mata_kuliah.data.php

Hasilnya:

Nah.. script yang terakhir krs.index.php

Krs..input.php

Krs.form.php

Krs.data.php

Maka Hasilnya:

Form ubah data: