Pemrograman Web

Pertemuan 4
Teknik Informatika - Universitas Ma Chung
26 September 2016

Windra Swastika, Ph.D

Tanggal

Materi

29/8

Pendahuluan (capaian pembelajaran, rencana

pertemuan, referensi, kontrak kuliah)

5/9

Pengantar HTML, CSS

19/9

Bootstrap 1

26/9

Bootstrap 2

3/10

KUIS BESAR I (HTML, CSS dan Bootstrap)

Instalasi PHP & MySQL

10/10

Tipe data, variabel, konstanta, operator, kontrol

program, fungsi

17/10 Array

24/10 Form HTML & pengolahannya

Bootstrap

Front-end framework untuk pengembangan web

secara cepat (FREE)

Desain template yang terdiri dari HTML dan CSS

untuk berbagai elemen website seperti typography,
form, button, tabel, navigasi, dsb.

Responsive design

Membuat halaman
menggunakan bootstrap

Hello, world!

DEMO

Grid system

Aturan umum:

grid system digunakan untuk mengatur layout

berdasarkan baris (row) dan kolom (column).

konten diletakkan dalam baris dan kolom

tertentu.

<div class=container>
<div class=row>
<h1>.. </h1>
<p> .. </p>
<a href= class = button>
<a href= class = button>
</div>
</div>

Row

Column

Row
Column

Row

Column

Column

<div class=container>
<div class=row>
<h1>.. </h1>
<p> .. </p>
<div class = col-md-6>
<div class = col-md-6>
</div>
</div>

Bootstrap review &

examples

http://getbootstrap.com/css/

Bagi kelompok, maks: 2

Kelompok 1: Offsetting columns, Nesting columns,

Column ordering

Kelompok 2: Tables

Kelompok 3: Buttons & Images

Bootstrap review &

examples

http://getbootstrap.com/components/

Kelompok 4: Glyphicons & Dropdowns

Kelompok 5: Button grops & button dropdowns

Kelompok 6: Navs, navbar, breadcumbs

Kelompok 7: Pagination, label, badges,

Kelompok 8: Jumbotron, page header, thumbnail,

alerts

Pelajari topik yang ditentukan terlebih dulu. Buat demo dalam kasus
nyata menggunakan komponen tersebut. (Contoh untuk topik tabel,
buat tabel mata kuliah dan jam mata kuliah, untuk topik Nav, buat
menu yang umum pada sebuah website, dsb) - waktu 20-30 menit.

Presentasikan dalam waktu 5-10 menit.

Yang di presentasikan:
1. Apa kegunaan komponen tsb dan demokan bagaimana
tampilan di halaman web.
2. Bagaimana cara pemakaian komponen (class yang digunakan)
3. Terangkan secara singkat cara pembuatan halaman demo.

Kuis Besar I
1. Membuat layout website menggunakan bootstrap.
2. Dikerjakan secara mandiri di kelas (bawa laptop)
3. Waktu pengerjaan maksimal 90 menit.
4. Open book & internet.

Latihan

Latihan

Buat template website seperti

tampilan di samping.

(image dapat diubah, yang

penting layout sama)