laporan twitter bootstrap
DESCRIPTION
HOw to IncludeTRANSCRIPT
-
5/25/2018 Laporan Twitter Bootstrap
1/11
MEMANIPULASIDATABASE DENGAN
TAMPILAN TWITTER
BOOTSTRAP
2014
LAPORAN PEMROGRAMAN BERBASIS WEB
ABDULLAH ZAHIR
UNIVERSITAS MUHAMMADIYAH JEMBER| 1210651136
-
5/25/2018 Laporan Twitter Bootstrap
2/11
Pemrograman Berbasis Web
Page 1 of 11
Laporan PBW
Memanipulasi Database dengan
Tampilan Twitter Bootstrap
Disusun Oleh :
Abdullah Zahir
1210651136
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2012/2013
-
5/25/2018 Laporan Twitter Bootstrap
3/11
Pemrograman Berbasis Web
Page 2 of 11
Penjelasan tentang Twitter Bootstrap
Twitter Bootstrapadalah sebuah alat bantu untuk membuat sebuah tampilan
halamanwebsite yang dapat mempercepat pekerjaan seorang pengembang website ataupun
pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki
tampilan halaman yang sama / mirip dengan tampilan halamanTwitter atau desainer juga dapat
mengubah tampilan halaman website sesuai dengan kebutuhan.
Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout
halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya
dengan memanggil fungsiCSS (class) dalam berkasHTML yang telah didefinisikan. Selain itu juga
terdapat komponen-komponen lainnya yang dibangun menggunakanJavaScript.
Apa Kelebihan Membuat Web Menggunakan Twitter Bootstrap?
1. CepatBootstrap memiliki banyak libraryyang menyediakan potongan kode yang siap Anda
gunakan di website Anda. Web developer tidak perlu membuang banyak waktu untukmenulis baris kode, cukup dengan menemukan potongan kode yang tepat dan
menyocokannya dengan struktur website yang sedang dibangun. Sebagai tambahan lagi,
banyak aspek desain yang sudah dipermudah karena CSS dalam Twitter Bootstrap dibangun
denganLESS.
2. FleksibelHal yang luar biasa dari Twitter Bootstrap adalah Anda dapat menjadikan framework ini
sepenuhnya milik anda. Dengan sesuka hati Anda dapat membongkar seluruh framework,
menyimpan yang berguna dan membuang yang tidak berguna bagi Anda.
Inti dari Bootstrap adalah bahwa framework ini memperbolehkan Anda menyesuaikan
penggunaannya sesuai kebutuhan pembuatan website Anda.
3. Faktor Desain3.1. The Grid
Grid yang baik dibutuhkan untuk membuat layout website yang baik. Menggunakan Grid
dari platform tidak diwajibkan, tetapi dapat membuat pekerjaan Anda jauh lebih mudah.
Pada mode awal, platform Twitter Bootstrap menyediakan Grid selebar 940 px yangtersusun dari 12 kolom. Tiap kolom memiliki lebar 40px dan terdapat juga sela antara tiap
kolom sebesar 20px. Baris dan perenggangan dapat Anda manipulasi sesuai kebutuhan.
Penataan sudah diselesaikan dalam mode otomatis dan developer dapat menyelesaikan
pekerjaannya hanya dengan menaruh konten ke dalam HTML yang mereka kerjakan.
Apabila Anda perlu bekerja dengan menggunakan kolom-kolom dan nesting, berarti Anda
telah menemukan Grid yang tepat.
http://id.wikipedia.org/wiki/Websitehttp://id.wikipedia.org/wiki/Twitterhttp://id.wikipedia.org/wiki/CSShttp://id.wikipedia.org/wiki/HTMLhttp://id.wikipedia.org/wiki/JavaScripthttp://bootstrap.lesscss.ru/less.htmlhttp://bootstrap.stage42.net/doc/gridhttp://bootstrap.stage42.net/doc/gridhttp://bootstrap.lesscss.ru/less.htmlhttp://id.wikipedia.org/wiki/JavaScripthttp://id.wikipedia.org/wiki/HTMLhttp://id.wikipedia.org/wiki/CSShttp://id.wikipedia.org/wiki/Twitterhttp://id.wikipedia.org/wiki/Website -
5/25/2018 Laporan Twitter Bootstrap
4/11
Pemrograman Berbasis Web
Page 3 of 11
3.2. LESS is more!
LESS telah menjadi suatu hal yang popular di kalangan para developer untuk alasan yang
jelas. Dengan Bootstrap platform, Anda dapt menggunakan LESS dan manipulasi-
manipulasi CSS untuk mengkostumisasi Grid pada Twitter Bootstrap. Bootstrap
memanfaatkan beberapa manfaatCSS3 yang paling populer dan menghidupkan mereka
sebagai reaksi yang sama terhadap semua browser.
3.3. JavaScript
Twitter Bootstrap juga dilengkapi dengan library JavaScript yang melebihi penataan dan
strukturisasi standar!
Langsung saja kita ke project !
I. MEMBUAT SYNTAX CSS BERTIPE EMBEDDEDBuat file dengna nama index sebagai main untuk tampilan webnya.
Untuk file index ini kita beri syntax untuk membuat tampilan login, berikut syntaxnya :
http://www.w3schools.com/css3/http://www.w3schools.com/css3/ -
5/25/2018 Laporan Twitter Bootstrap
5/11
Pemrograman Berbasis Web
Page 4 of 11
Disini saya membuat link untuk pemanggilan fungsi twitter bootstrap dengan tipe Metro UI
dan Bootstrap.disini daya juga membuat css tipe embedded yang fungsinya untuk memberi
background dengan warna yang sudah ditentukan dan dengan ukurannya. Untuk form login
saya beri form untuk nim jika nimnya ada di database maka akan masuk ke nim yang telah
dipilih namun jika tidak ada maka ada peringatan, sedangkan untuk tombol submit saya beri
link ke file mahasiswa.phpagar menuju langsung ke profil mahasiswa dan mata kuliah yang
dipilihnya
Jadi dari file index menampilkan halaman depan ini dengan tampilan dari twitter bootstrap,
berikut penjelasan mengenai halaman depan ini :
Tombol submit untuk masuk ke jendela baru yaitu profile user, jadi jika user telahmemasukkan nim yang sudah ada di database maka akan dapat masuk keprofilenya
-
5/25/2018 Laporan Twitter Bootstrap
6/11
Pemrograman Berbasis Web
Page 5 of 11
namun jika nim tersebut tidak ada di database maka akan ada pesan bahwa nim
tersebut belum terdaftar dan secara otomatis akan kembali ke halaman awal
Setelah kita membuat file index maka kita lanjutkan untuk membuat file mahasiswa.php
yang fungsinya untuk memanipulasi data dari tabel mahasiswa yang tentunya terkoneksi
dengan databasenya. Di file mahasiswa.php ini saya menginputkan tampilannya dari
metro ui maksudnya tampilannya akan berbentuk flat/metro. Berikut penjelasan dari filemahasiswa.php ini :
Didalam tag body terdapat beberapa button yag meiliki fungsi masing-masingsesuai namanya, terutama button ambil krs yang gunanya untuk mengambil kars
dari mata kuliah yang telah tersedia
Didalam file mahasiswa ini juga ada dua tampilan pemanggilan table daridatabase tabel yang pertama untuk mahasiswa dan yang kedua untuk tabel krs
Berikut syntaxnya :
-
5/25/2018 Laporan Twitter Bootstrap
7/11
Pemrograman Berbasis Web
Page 6 of 11
Hasil dari syntax diatas seperti gambar dibawah ini, jadi ada judul dengan nama profil
mahasiswa dan tiga button dengan fungsinya, juga ada 2 tampilan untuk profil mahasiswa dan
jadwal matakuliah yang diambil
-
5/25/2018 Laporan Twitter Bootstrap
8/11
Pemrograman Berbasis Web
Page 7 of 11
Untuk gambar yang dibawah ini adalah halaman untuk pengambilan matakuliah, jadi jika di pilih
dengan tanda checklist dan disubmit maka akan masuk ke tabel krs yang ada di halama profil
mahasiswa.
Dan untuk syntax dibawah ini penjelasannya sebagai berikut : File ini juga mengampil tampilan metro Dengan button submit untuk mensubmit ke table kars mata kuliah yang sudah diambil Dan juga button cancel untk kembali ke halaman awal
-
5/25/2018 Laporan Twitter Bootstrap
9/11
Pemrograman Berbasis Web
Page 8 of 11
-
5/25/2018 Laporan Twitter Bootstrap
10/11
Pemrograman Berbasis Web
Page 9 of 11
-
5/25/2018 Laporan Twitter Bootstrap
11/11
Pemrograman Berbasis Web
Page 10 of 11
Berikut adalah tampilan dari database yang di include ke file php yang kita kerjakan tadi.