PEMROGRAMAN WEB

APLIKASI CRUD DENGAN PHP MENGGUNAKAN TWITTER

BOOTSTRAP

Disusun oleh:

(Ika Purwatiningsih)

(1310651023)

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2015

1. Pengertian twitter bootstrap

Twitter Bootstrap merupakan sebuah framework CSS dari twitter yang menyediakan

berbagai macam komponen antarmuka web untuk digunakan bersama-sama. Selain

komponen antarmuka, bootstrap juga menyediakan layout halaman dengan mudah dan rapi.

Twitter bootstrap ini menerapkan konsep responsive template sehingga layout dapat

menyesuaikan dengan lebar dari media yang mengaksesnya.

2. Cara membuat aplikasi CRUD mahasiswa, mata kuliah, dan KRS

dengan PHP menggunakan tampilan twitter bootstrap.

1. Pertama, buatlah TABEL mahasiswa, matakuliah dan krs di DATA BASE. 2. Kedua, Menyiapkan Twitter Bootstrap.

Silahkan ekstrak file bootstrap.zip pada direktori kerja tugas4. Hasil ekstraksi terdapat 3

folder: css, js, img.

Maka akan didapatkan struktur file seperti berikut:

3. Ketiga, membuat script CRUD mahasiswa, matakuliah dan krs menggunakan kode PHP. Seperti di bawah ini!!!!

MAHASISWA

PENJELASAN:

Pertama, Mengakses Twitter Bootstrap untuk merubah tulisan.

kedua, Basic Bootstrap: Table untuk mempercantik tampilan tabel

ketiga, berfungsi untuk memberi warna hijau pada baris

keempat, berfungsi memberi warna merah dan oranye pada button edit dan delete

kelima, berfungsi meberi warna hitam pada button insert

OUTPUT:

INSERTMAHASISWA

PENJELASAN:

Gambar yang dilingkari adalah Mengakses Twitter Bootstrap untuk mengubah tulisan.

OUTPUT:

EDITMAHASISWA

PENJELASAN:

Gambar yang dilingkari adalah Mengakses Twitter Bootstrap untuk mengubah tulisan.

OUTPUT:

DELETEMAHASISWA

PENJELASAN:

Pertama, Gambar yang dilingkari adalah Mengakses Twitter Bootstrap untuk mengubah tulisan.

Kedua dan ketiga, memberi warna hijau pada tombol button oke dan cancel.

OUTPUT:

MATAKULIAH

PENJELASAN:

Pertama, Mengakses Twitter Bootstrap untuk merubah tulisan.

kedua, Basic Bootstrap: Table untuk mempercantik tampilan tabel

ketiga, berfungsi untuk memberi warna merah pada baris

keempat, berfungsi memberi warna merah dan oranye pada button edit dan delete

kelima, berfungsi meberi warna hitam pada button insert

OUTPUT:

INSERTMATAKULIAH

PENJELASAN:

Gambar yang dilingkari adalah Mengakses Twitter Bootstrap untuk mengubah tulisan.

Kedua, memberi warna hijau pada tombol button simpan.

OUTPUT:

EDITMATAKULIAH

PENJELASAN:

Pertama, Gambar yang dilingkari adalah Mengakses Twitter Bootstrap untuk mengubah tulisan.

Kedua, memberi warna hijau pada tombol button simpan.

OUTPUT:

DELETEMATAKULIAH

PENJELASAN:

Pertama, Gambar yang dilingkari adalah Mengakses Twitter Bootstrap untuk mengubah tulisan.

Kedua dan ketiga, memberi warna hijau pada tombol button oke dan cancel.

OUTPUT:

KRS

PENJELASAN:

Pertama, Gambar yang dilingkari adalah Mengakses Twitter Bootstrap untuk mengubah tulisan.

Kedua, Basic Bootstrap: Form untuk format tampilan form

ketiga, memberi warna hijau pada tombol button cari.

OUTPUT: