twitter bootstrap

PEMROGRAMAN WEB

TUGAS 4

TWITTER BOOTSTRAP

Disusun oleh:

Nama : Infatkhul Afifah Rahmawati

Nim : 1410651115

Kelas :E

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2015

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

2

I. TUJUAN

1. Mengenalkan tentang Twitter Bootstrap

2. Memahami penggunaan Twitter Bootstrap sebagai framework CSS

3. Mengetahui cara menerapkan Twitter Bootstrap untuk template website

4. Mengetahui cara membuat desain layout dengan Twitter Bootstrap

II. DASAR TEORI

1. DEFINISI 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.

III. ALAT DAN BAHAN

1) Notepad++ / Sublime Text / Aptana Studio / Netbeans / Eclipse / dan lain-lain

2) Web Browser (Mozilla Firefox / Google Chrome / Opera / dan lain-lain)

3) XAMPP (sebagai paket tools untuk menjalankan program berbasis PHP)

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

3

Index.php

SISTEM INFORMASI AKADEMIK

Tentang Sistem Informasi

Akademik Mahasiswa

MAHASISWA

MATA KULIAH

KRS

Hasilnya seperti ini

Mahasiswa.php

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

4

Mahasiswa

Daftar Nama Mahasiswa :

NO

NIM

NAMA

TEMPAT LAHIR

TANGGAL LAHIR

AGAMA

JENIS KELAMIN

NO.TELP

EMAIL

ACTION

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

5

echo "";

echo "".$i++.""; echo "". $row['nim'].

"";

echo "". $row['nama']. "";

echo "". $row['tempatlahir']. "";

echo "". $row['tanggallahir']. "";

echo "". $row['agama']. "";

echo "". $row['jeniskelamin']. "";

echo "". $row['notelp']. "";

echo "". $row['email']. "";

echo "";

echo "";

echo "";

}

?>

Hasilnya seperti ini

Insert-mahasiswa.php

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

6

Insert Data Mahasiswa

FORM TAMBAH MAHASISWA

NIM

:

Nama

:

Tempat Lahir

:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

7

Tanggal Lahir

:

Agama

:

Jenis Kelamin

:

No Telp

:

E-Mail

:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

8

$nim = $_POST['nim'];

$nama = $_POST['nama'];

$tempatlahir = $_POST['tempatlahir'];

$tanggallahir = $_POST['tanggallahir'];

$agama = $_POST['agama'];

$nim = $_POST['nim'];

$jeniskelamin = $_POST['jeniskelamin'];

$notelp = $_POST['notelp'];

$email = $_POST['email'];

# Memasukkan data Mahasiswa pada MySQL

$queryinsertmahasiswa = "INSERT INTO mahasiswa (

nim, nama, tempatlahir,tanggallahir, agama,

jeniskelamin, notelp,email )

values ('$nim','$nama','$tempatlahir',

'$tanggallahir','$agama','$jeniskelamin','$notelp' ,'$email')";

# Bila data berhasil

if (mysqli_query($koneksi, $queryinsertmahasiswa)) {

echo "New record oreated succesfully";

# jika error

}else{

echo "Error : ". $queryinsertmahasiswa.

"".mysqli_error($koneksi);

}

mysqli_close($koneksi);

}

?>

Hasilnya seperti ini

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

9

Edit data mahasiswa

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

10

FORM EDIT DATA MAHASISWA

FORM EDIT DATA MAHASISWA

NIM

:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

11

$row['nim']; ?>"/>

NAMA

:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

12

EMAIL

:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

13

email = '$email'

WHERE nim=$nim";

if (mysqli_query($koneksi, $queryupdatemahasiswa)) {

echo "Update Data Succesfully";

}else{

echo "Error : ". $queryupdatemahasiswa.

"".mysqli_error($koneksi);

}

mysqli_close($koneksi);

}

?>

Hasilnya seperti ini

Delete-mahasiswa.php

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

14

Delete Data Mahasiswa

Apakah anda yakin ingin menghapus data ini ?

Nama Mahasiswa

:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

15

Hasilnya seperti ini

Matakuliah.php

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

16

MATA KULIAH

Daftar Mata Kuliah

:

No

Kode MK

Mata Kuliah

SKS

Singkatan

Semester

Action

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

17

# Menampilkan data dalam kolom

$i = 1;

while ($row = mysqli_fetch_array($resultMahasiswa, MYSQLI_ASSOC)) {

echo "";

echo "".($i++)."";

echo "". $row['kodemk']. "";

echo "". $row['namamk']. "";

echo "". $row['sksmk']. "";

echo "". $row['singkatanmk']. "";

echo "". $row['semester']. "";

echo "";

echo "";

echo ""; }

?>

Hasilnya seperti ini

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

18

Edit-mk.php

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

19

FORM EDIT DATA MATAKULIAH

FORM EDIT DATA MATAKULIAH

KODE MK

:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

20

NAMA MK

:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

21

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

22

Delete Data matakuliah

Apakah anda yakin ingin menghapus data ini ?

Nama matakuliah

:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

23

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

24

MENU KRS

Cari KRS Mahasiswa:

PEMROGRAMAN WEB

Infatkhul Afifah Rahmawati | 1410651115

25

$selectmhs = "SELECT mahasiswa.nim, mahasiswa.nama, namamk, sksmk, semester

FROM (mahasiswa LEFT JOIN krs ON mahasiswa.nim = krs.nim)

LEFT JOIN matakuliah ON matakuliah.kodemk = krs.kodemk WHERE

krs.nim='$cari'";

// variable untuk menyimpan query select

$resultmhs = mysqli_query($koneksi, $selectmhs);

// pengeksekusian query yg tersimpan pada variable resulmhs

while ($row=mysqli_fetch_array($resultmhs, MYSQLI_ASSOC)) {

extract($row);

// penyimpanan database dalam bentuk array

echo "";

echo "".$nim."";

echo "".$nama."";

echo "".$namamk."";

echo "".$sksmk."";

echo "".$semester."";

echo "";

}

}

?>

Hasilnya seperti ini