Tugas WEB

Twitter Bootstrap
(mengubah tampulan CRUD menjadi Bootsrap)

Oleh
(Anatas Angin Budi P.D)
(1310651154)
(TI-F)

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2014/2015

Page 1 of 12

Tampilan Awal

Untuk tampilan awal saya tidak mengubahnya. untuk menjaga nilai originalitasnya.
Oke, langsung saja saya akan mengakses File Mahasiswa.

Disini saya menambahkan link href="css/bootstrap.min.css" rel="stylesheet" media="screen"

dibawah title agar saya dapat mengakses fitur css yang ada di folder., saya gunakan class
container, dan port horizontal agar tampilan terlihat lebih rapi dan teratur, kemudian untuk
header mahasiswa, saya berikan bg color #FF0000 solid red untuk tampilan header dan bg

Page 2 of 12

color #6666EF solid blue untuk tampilan tabel. dan menggunakan class table table-condensed
merapatkan jarak antar objek sehingga tida terlihat memudar / terpisah-pisah.

EDIT

Saya tambahkan div class container setelah sebelumnya saya sisipkan link
href="css/bootstrap.min.css" agar konten dari folder css dapat diekstrak. setelah itu saya
berikan div class row unit dan span12 (maksimal) dengan background color warna biru muda.
lalu pada table saya gunakan class table table-hover agar pada saat kursor digerakkan

Page 3 of 12

nantinya seperti ada block tipis dibalik kursor. nah untuk tombol submit saya gunakan btn
btn-primary sehingga berwarna biru. Berikut hasilnya.

DELETE

Kali ini saya hanya menambahkan class="btn btn-primary" pada <td coolspan=3
align="center"> button dan submit dan span 4 sehingga memberikan kesan background
secukupnya.

Page 4 of 12

ADD

Cara yang saya gunakan sama seperti sebelumnya, karena pada intinya hanya perlu
menambahkan link href="css/bootstrap.min.css" rel="stylesheet" media="screen pada head
dan menambahkan properti seperti div class container maka secara otomatis tampilan php
akan berubah. Kali ini saya membuat tulisan pada tr dengan nilai <p class="text-error">
sehingga tulisan pada table berwarna merah.

Page 5 of 12

MATAKULIAH

Kali ini saya menggunakan fitur table class="table table-bordered" sehingga tampilannya
terlihat seperti diatas, saya berikan bg color #FF0000 solid red untuk tampilan header dan bg
color #6666EF solid blue untuk tampilan tabel.

Page 6 of 12

EDIT

Kali ini saya menggunakan fitur span sepanjang 12 dan background color #BBD8E9 light
blue dan menggunakan class table table-hover, dan tr class success sehingga akan
menampilkan tampilan seperti dibawah.

Page 7 of 12

DELETE

Untuk hapus Matakuliah saya menggunakan span sepanjang 4 dan background light blue
sedangkan untuk tombol saya gunakan input class="btn btn-primary".

Page 8 of 12

ADD

Sama seperti form lainnya, tetapi kalo ini saya gunakan table class="table table hover", tr
class="success" dan submit btn primary.

Page 9 of 12

KRS
SEARCH

Pada properti KRS disini saya menggunakan fitur form class="form-search" dan span
sepanjang 12 dan background color ligh blue dan btn-primary sehingga tampilan terlihat
seperti dibawah ini.

Page 10 of 12

ADD

Form ini menggunakan div class container, row-unit, span6 dan bg color light blue. Style
table class="table table-hover", tr class="success" dan button class primary.

Page 11 of 12

(...................................)

Page 12 of 12