TUGAS PEMROGRAMAN WEB

TWITTER BOOTSTRAP

Disusun oleh:

MOCH GHUFRON

1310651058

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2015

1) MEMBUAT DATABASE

Buatlah database dengan nama praktikum5

2) MEMBUAT TABEL

Pada database praktikum5 yang telah dibuat dilangkah 1, buatlah tabel-tabel berikut

ini:

Buatlah tabel dengan nama mahasiswa yang terdiri dari 8 kolom yaitu: nim,nama,

tempatlahir, tanggallahir, agama, jeniskelamin, notelp, emaildengan ketentuan

sebagai berikut:

- nim tipe varchar dengan length 10 dan dijadikan sebagai primary key

- nama tipe varchar dengan length 50

- tempatlahir tipe varchar dengan length 15

- tanggallahir tipe date

- agama tipe varchar dengan length 10

- jeniskelamin tipe varchar dengan length 10

- notelp tipe varchar dengan length 12

- email tipe varchar dengan length 30

Sehingga struktur tabelnya seperti berikut:

Buatlah tabel matakuliah yang terdiri dari 5 kolom yaitu: kodemk, namamk,

sksmk, singkatanmk, semester dengan ketentuan sebagai berikut:

- kodemk tipe varchar (6) dan jadikan sebagai primary key

- namamk tipe varchar (50)

- sksmk tipe int (2)

- singkatanmk tipe varchar (15)

- semester int (2)

Sehingga struktur tabelnya adalah sebagai berikut:

Buatlah tabel krs yang terdiri dari 3 kolom yaitu: idkrs, nim, kodemk dengan

ketentuan sebagai berikut:

- idkrs tipe int (10) primary key dan auto increment

- nim tipe varchar (10)

- kodemk tipe varchar (6)

Sehingga struktur tabel krs digambarkan seperti gambar berikut ini:

Dari ketiga tabel tersebut akan ada keterhubungan seperti gambar berikut:

3) INSERT DATA

Insert 5 data pada tabel mahasiswa:

Insert 5 data pada tabel matakuliah:

Insert data krs:

4) SELECT DATA

Menampilkan data nim, nama mahasiswa, nama matakuliah yang ditempuh, jumlah

SKS, dan semester. Perlu diperhatikan, data tersebut merupakan gabungan antara

tabel mahasiswa, matakuliah, dan krs. Sehingga untuk menampilkan semua data

tersebut bersamaan harus dijoinkan dengan query JOIN. Pada latihan ini kita

menggunakan LEFT JOIN.

Dari query LEFT JOIN diatas, akan ditampilkan data sebagai berikut:

Jika ingin memfilter berdasarkan nim tertentu, beri syarat dengan WHERE. Misalkan

menampilkan matakuliah yang ditempuh oleh nim 1310651020, maka query nya

adalah sebagai berikut:

Data yang ditampilkan adalah sebagai berikut:

5) MEMBUAT KONEKSI PHP ke MySQL

Untuk dapat mengakses database MySQL di PHP, harus membuat koneksi ke

database terlebih dahulu yang dituliskan ke file koneksi.php

Jika koneksi berhasil maka tampilan kosong seperti berikut ini

6) MEMBUAT MENU UTAMA

Buatlah halaman index.php yang berisi menu seperti berikut ini (icon telah

disediakan):

Jika di jalankan akan menghasilkan tampilan berikut ini

Dari setiap icon tersebut, link-kan image tersebut ke file

mahasiswa.php, Dan tambahkan perintah css twitter

Membuat file matakuliah.php

Dan tambahkan perintah css twitter

Membuat file krs.php

Dan tambahkan perintah css twitter

7) MENAMPILKAN DATA MAHASISWA

Buatlah file dengan nama mahasiswa.php yang isinya menampilkan semua data

mahasiswa:

8) MENAMPILKAN DATA MATA KULIAH

Tampilkan data mata kuliah pada file matakuliah.php

9) MENU KRS

Buatlah file krs.php

dan tampilannya seperti berikut:

Kesimpulan

Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman

website 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 halaman Twitter atau

desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan