Laporan Twitter Bootstrap

5/25/2018 Laporan Twitter Bootstrap

1/11

MEMANIPULASIDATABASE DENGAN

TAMPILAN TWITTER

BOOTSTRAP

2014

LAPORAN PEMROGRAMAN BERBASIS WEB

ABDULLAH ZAHIR

UNIVERSITAS MUHAMMADIYAH JEMBER| 1210651136


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


3/11


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


4/11


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/11


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


6/11


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 :


7/11


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


8/11


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


9/11


Page 8 of 11


10/11


Page 9 of 11


11/11


Page 10 of 11

Berikut adalah tampilan dari database yang di include ke file php yang kita kerjakan tadi.

Laporan Twitter Bootstrap

Documents

Transcript of Laporan Twitter Bootstrap