Twitter Bootstrap

LaporanPemrogramanBerbasis WEB

of 26

TWITTER BOOTSTRAP

Oleh

DarmawanRamadana

1210651040

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2013/2014


of 26

1. Tujuan

Memahami konsep dasar Twitter Bootstrap dan penggunaannya sebagai templating

pada website.

2. Teori

Definisi

Twitter Bootstrap merupakan sebuah framework CSS dari twitter, yang menyediakan

komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian

rupa untuk digunakan bersama-sama.

Komponen-komponen Twitter Bootstrap

Komponen-komponen yang dapat di gunakan pada twitter bootstrap ini antara lain :

Button groups

Button dropdowns

Navigational tabs,

pills, and lists

Navbar

Labels

Badges

Page header and hero

unit

Thumbnails

Alerts

Progress bars

Modals

Dropdowns

Tooltips

Popovers

Accordion

Carousel

Typeahead

Langkah-langkah penggunaan Twitter Bootstrap :

- Download Twitter Bootstrap pada website resminya :

- Ekstrak file zip hasil download.

Judul Laporan:

Twitter Bootstrap – Tugas 5 Pemrograman Berbasis Web


of 26

Maka akan muncul beberapa folder dan file dengan struktur seperti berikut :

- Tambahkan file index.php didalam folder bootstrap, dan tuliskan kode berikut :

Penjelasan :

Kode diatas merupakan penulisan secara default dalam penggunaan

template pada twitter bootstrap. Penggunaan CSS dilakukan dengan meng-

importkan file yang berisi CSS bootstrap serta javascript yang mendukung

pembuatan website menjadi lebih optimal.

File-file yang diimportkan antara lain : bootstrap.css, bootstrap.js, dan

jquery.js. Secara default, templating bootstrap tanpa memiliki fitur responsive,

responsive features berfungsi untuk menjadikan CSS berbasis pada beberapa

kondisi: rasio, width, tipe display, dan lain-lain.


of 26

Dengan fitur responsif tersebut, dapat menyesuaikan dengan layar device,

oleh karena itu perlu meng-import file bootstrap-responsive.css.

Lalu tuliskan kode berikut pada bagian tag <head>

Default Bootstrap grid system menggunakan 12 kolom.

Basic grid HTML

- Layout dibuat melalui class row

- Membuat ukuran kolom yang sesuai menggunakan class span* (tanda *

adalah nomor kolomnya)

Grid Sistem dapat digambarkan seperti gambar dibawah ini :

Komponen Button :

Akan mengeluarkan output seperti berikut :


of 26

Komponen Tabel :

Class Striped : class=”table table-striped”

Class bordered : class=“table table-bodered“

Class hover : class=”table table-hover”

Penggunaan tag <table> dan pilihan kelasnya dituliskan seperti berikut :

Contoh penggunaan class striped:


of 26

3. Tugas

Membuat CRUD dengan PHP tentang mahasiswa, krs, dan matakuliah

Hasil dari tampilan web yang akan di buat…:

o Halaman Depan

o Halaman Info Login Mahasiswa:

o Halaman KRS


of 26

o Halaman Ambil KRS

- Langkah pertama membuat database dengan nama krs

- Membuat 6 tabel dengan struktur seperti berikut :

1. Tabel mahasiwa

2. Tabel krs

3. Tabel matakuliah


of 26

4. Tabel jadwal

5. Tabel pengampuh

6. Tabel thnajar

- Langkah selanjutnya ekstrak file zip framework twitter bootstrap

- Tambahkan file index.php dan ketikkan kode berikut :

<?php

if($_GET['page']=="" or $_GET['page']=="home"){

include "header.php";

}elseif($_GET['page']=="mahasiswa"){

include"./system/mahasiswa/mahasiswa.php";

}elseif($_GET['page']=="krs"){

include"./system/mahasiswa/krs.php";

}elseif($_GET['page']=="tambahkrs"){

include"./system/mahasiswa/tambahkrs.php";

}elseif($_GET['page']=="delete"){

include"./system/mahasiswa/hapus.php";

}elseif($_GET['page']=="logout"){

include"./system/mahasiswa/logout.php";

}else{

echo

of 26

"<script>window.location.href='index.php?page=home';</script>";

}

include "footer.php";

?>

</body>

</html>

- Buat file header.php dan ketikkan kode berikut :

<?php session_start(); ?>

<?php

if(isset($_SESSION['levellogin'])){

if($_SESSION['levellogin'] == "mahasiswa"){

echo

"<script>window.location.href='index.php?page=".$_SESSION['levellogi

n']."';</script>";

}

}

?>

<!DOCTYPE html>

<html>

<head>

<title>Tugas-5 || Pemrograman Berbasis Web</title>

<link href="css/style.css" rel="stylesheet">



<link href="css/bootstrap.css" rel="stylesheet" media="screen">

<link href="css/bootstrap-responsive.css" rel="stylesheet">

<script src="js/jquery.js"></script>

<script src="js/bootstrap.js"></script>

</head>

<body>

<?php

error_reporting(0);

include "./config/koneksi.php";

if(isset($_POST['loginmahasiswa'])){

$nim = $_POST['nim'];

$pass = $_POST['pass'];

$md5pass = md5($pass);


of 26

if(empty($nim)){

echo "<script>alert('Tidak Boleh

Kosong');</script>";

}else{

$cekmahasiswa = mysql_query("select * from

mahasiswa where nim='$nim' and password='$md5pass'");

if(mysql_num_rows($cekmahasiswa) == 1){

$_SESSION['nim'] = $nim;

$_SESSION['levellogin'] = "mahasiswa";

echo

"<script>window.location.href='index.php?page=".$_SESSION['levellogi

n']."';</script>";

}else{

echo "

<div class='alert alert-error teks-tengah isi'

style='margin-top:5px;'>

<button type='button' class='close' data-

dismiss='alert'>×</button>

<h4>Gagal Login!</h4>

Pastikan NIM / Password Anda Benar!

</div>

";

}

}

}

?>

<div class="row">

<div class="navbar navbar-inverse navbar-atas">

<div class="navbar-inner">

<div class="container">

<button type="button" class="btn btn-navbar" data-toggle="collapse"

data-target=".nav-collapse">

<span class="icon-bar"></span>



</button>

<span class="brand">Sistem KRS</span>

<div class="nav-collapse collapse">

<ul class="nav">

<li><a href="index.php?page=home"><i class="icon-home icon-


of 26

white"></i></a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b

class="caret"></b></a>

<ul class="dropdown-menu">

<li class="nav-header">.:: NAVIGASI ::.</li>

<li><a href="#ModalMahasiswa" role="button" data-

toggle="modal">Login Mahasiswa</a></li>

<li class='divider'></li>

<li><a href="#ModalTentang" role="button" data-

toggle="modal">Tentang Program</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

<?php require "./system/model.php";?>

</div>

<div class="isi">

<table width="100%">

<tr>

<th colspan="2" style="color:white;background:#191919;">Halaman

Depan</th>

</tr>

<tr>

<td width="10%"><img src="img/human.png"/></td>

<td>

<pre>

Berikut ini adalah contoh aplikasi sederhana Sistem KRS (Kartu Rencana

Studi).

<p>Bertujuan sebagai bahan pembelajaran dalam menyelesaikan tugas

pada mata kuliah Pemrograman Berbasis Web.</pre>

</td>

</tr>

</table>

</div>

of 26

- Langkah selanjutnya buat file dengan nama footer.php dan ketikkan kode berikut :

<div class="navbar navbar-inverse footer">

<div class="navbar-inner">

<span class="brand" style="font-size:12px;">

Copyright @ <?php echo date('Y'); ?> | Designer By <a href="#">Darmawan

Ramadana</a>

</span>

</div>

</div>

- Buatlah sebuah folder baru dengan nama config dan didalamnya terdapat file

dengan nama koneksi.php, lalu ketikkan kode berikut kedalam file koneksi.php

tersebut :

<?php

$my['host'] = "localhost";

$my['user'] = "root";

$my['pass'] = "";

$my['db'] = "krs";

$koneksi=mysql_connect($my['host'],$my['user'],$my['pass']);

if (! $koneksi){

echo "Gagal Koneksi..! : ".mysql_error();

}

mysql_select_db($my['db'])

or die ("Database Tidak Ada".mysql_error());

?>

- Kembali pada directory root anda lalu buatlah sebuah folder dengan nama system

yang di dalamnya terdapat sebuah file dengan nama model.php dan ketikkan kode

berikut didalamnya :



<div id="ModalMahasiswa" class="modal hide fade" tabindex="-1"

role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-

hidden="true">×</button>

<h4 id="myModalLabel"

style="background:#111111;color:#ffffff;padding:10px;margin-

bottom:0px;">Form Login Mahasiswa</h4>

of 26

</div>

<div class="modal-body">

<form method="POST">

<table>

<tr>

<td>NIM</td>

<td>:</td>

<td><input type="text" name="nim" placeholder="Nomor Induk

Mahasiswa" required></td>

</tr>

<tr>

<td>Password</td>

<td>:</td>

<td><input type="password" name="pass"

placeholder="Password"></td>

</tr>

</table>

</div>

<div class="modal-footer">

<button class="btn btn-inverse" name="loginmahasiswa">Login</button>

<button class="btn" data-dismiss="modal" aria-

hidden="true">Batal</button>

</form>

</div>

</div>



<div id="ModalTentang" class="modal hide fade" tabindex="-1"

role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-

hidden="true">×</button>

<h4 id="myModalLabel" class="teks-tengah"

style="background:#111111;color:#ffffff;padding:10px;margin-

bottom:0px;">

Tentang Program</h4>

</div>

<div class="modal-body">

<blockquote>

<table>


of 26

<tr>

<td>Tugas</td>

<td>:</td>

<td>Penggunaan Framework CSS Bootstrap</td>

</tr>

<tr>

<td>Nama Aplikasi</td>

<td>:</td>

<td>Web System KRS Sederhana</td>

</tr>

<tr>

<td>Programmer</td>

<td>:</td>

<td>Darmawan Ramadana</td>

</tr>

<tr>

<td>Dosen Pengampuh</td>

<td>:</td>

<td>Mudafiq Ryan Pratama, S.Kom</td>

</tr>

</table>

</blockquote>

</div>

<div class="modal-footer">

<button class="btn btn-inverse" data-dismiss="modal" aria-

hidden="true">Tutup</button>

</div>

</div>

- Didalam folder system buatlah sebuah folder dengan nama mahasiswa yang

didalamnya terdapat 6 file php yaitu:

1. Mahasiswa.php


<?php

if($_SESSION['levellogin'] != 'mahasiswa'){

echo "<center>tidak boleh kesini<br><a href='index.php'>kembali</a>";

}else{


$tgllogin = date('H-m-Y');

$jamlogin = date('H:i:s');

of 26

$nim = $_SESSION['nim'];

$q = mysql_query("select * from mahasiswa where nim='$nim'");

$data = mysql_fetch_assoc($q);

echo "

<!DOCTYPE html>

<html>

<head>

<title>Sistem KRS Sederhana</title>

<link href='css/style.css' rel='stylesheet'>



<link href='css/bootstrap.css' rel='stylesheet' media='screen'>

<link href='css/bootstrap-responsive.css' rel='stylesheet'>

<script src='js/jquery.js'></script>

<script src='js/bootstrap.js'></script>

</head>

<body>



<div class='row'>

<div class='navbar navbar-inverse navbar-atas'>

<div class='navbar-inner'>

<div class='container'>

<button type='button' class='btn btn-navbar' data-toggle='collapse' data-

target='.nav-collapse'>

<span class='icon-bar'></span>



</button>

<div class='nav-collapse collapse'>

<ul class='nav'>

<li class='dropdown'>

<a href='#' class='dropdown-toggle' data-toggle='dropdown'><i class='icon-

user icon-white'></i> ".$data['nm_mahasiswa']." <b class='caret'></b></a>

<ul class='dropdown-menu'>

<li><a href='#'>Info Mahasiswa</a></li>

<li><a href='index.php?page=krs'>Kartu Rencana Studi (KRS)</a></li>


<li><a href='#ModalTentang' role='button' data-toggle='modal'>Tentang

Program</a></li>

</ul>

of 26

<li><a href='index.php?page=logout'>Logout</a></li>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>



<table style='margin:150px auto;width:400px;background:#f5f5f5;'>

<tr>

<th colspan='3' style='color:white;background:#191919;'>Informasi

Mahasiswa</th>

</tr>

<tr>

<td>Nama Mahasiswa</td>

<td>: </td>

<td>".$data['nm_mahasiswa']."</td>

</tr>

<tr>

<td>NIM</td>

<td>: </td>

<td>".$nim."</td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td>: </td>

<td>".$data['jkel']."</td>

</tr>

<tr>

<td>Jurusan</td>

<td>: </td>

<td>".$data['prodi']."</td>

</tr>

</table>

";

}

require "./system/model.php";

?>

of 26

2. krs.php


<?php


echo


}else{





echo "

<!DOCTYPE html>

<html>

<head>









</head>

<body>



<div class='row'>




<button type='button' class='btn btn-navbar' data-toggle='collapse'

data-target='.nav-collapse'>




</button>


<ul class='nav'>

of 26


<a href='#' class='dropdown-toggle' data-toggle='dropdown'><i

class='icon-user icon-white'></i> ".$data['nm_mahasiswa']." <b

class='caret'></b></a>


<li><a href='index.php?page=mahasiswa'>Info Mahasiswa</a></li>

<li><a href='#'>Kartu Rencana Studi (KRS)</a></li>


<li><a href='#ModalTentang' role='button' data-

toggle='modal'>Tentang Program</a></li>

</ul>


</li>

</ul>

</div>

</div>

</div>

</div>

</div>



<div class='isicari'>

<form class='form-inline' method='POST'>

<h4><center>KARTU RENCANA STUDI (KRS)</h4>

<table class='table' style='background:#f5f5f5;'>

<tr>

<td width='100px'><img src='img/noname.jpg'></td>

<td>

<table width='95%'>

<tr>

<td width='20%'>Tahun Ajar</td>

<td><input class='input-mini' type='text' readonly='true'

value='20132'></td>

</tr>

<tr>

<td>NIM</td>

<td colspan='2'>".$nim."</td>

</tr>

<tr>

<td>Nama</td>


of 26

<td colspan='2'>".$data['nm_mahasiswa']."</td>

</tr>

<tr>

<td>Jurusan</td>

<td colspan='2'>".$data['prodi']."</td>

</tr>

<tr>

<td>Pembimbing Akademik</td>

<td colspan='2'>".$data['dosen_pa']."</td>

</tr>

<tr>

<td colspan='3'></td>

</tr>

</table>

</td>

</tr>

</table>

</form>

</div>

";

}


?>

<div id="isikrs">

<a href="index.php?page=tambahkrs"><i class="icon-plus-

sign"></i>Tambah KRS</a>

<table class="table table-bordered">

<tr bgcolor="#fcf8e3">

<th style="text-align:center;" width="30px">NO</th>

<th style="text-align:center;" width="100px">Kode Matakuliah</th>

<th style="text-align:center;">Nama Matakuliah</th>

<th style="text-align:center;" width="30px">SKS</th>

<th style="text-align:center;" width="70px">Kelas</th>

<th style="text-align:center;" width="150px">Jadwal</th>

<th style="text-align:center;">Dosen Pengampuh</th>

<th style="text-align:center;" width="50px">Hapus</th>

</tr>

<script language='javascript' type='text/javascript'>


of 26

function hapus(id_krs){

if (confirm('Anda yakin akan menghapus data ini?')) {

window.location.href='index.php?page=delete&id='+id_krs;

}

}

</script>

<?php

$q2 = mysql_query("select * from krs where nim='$nim'");

while($data2 = mysql_fetch_assoc($q2)){

$i++;

$no = 0 + $i;

echo "

<tr>

<td style='text-align:center;'>".$no."</td>

<td width='100px'>".$data2['kode_mk']."</td>

<td>".$data2['nm_mk']."</td>

<td style='text-align:center;'>".$data2['sks']."</td>

<td style='text-align:center;'>".$data2['kelas']."</td>

<td style='text-align:center;'>".$data2['jadwal']."</td>

<td>".$data2['dosen_pengampuh']."</td>

<td style='text-align:center;'><a

href='javascript:hapus(".$data2['id_krs'].");'><i class='icon-

trash'></i></a></td>

</tr>

";

}

?>

</table>

</div>

3. tambahkrs.php


<?php


echo


}else{

of 26






echo "

<!DOCTYPE html>

<html>

<head>









</head>

<body>



<div class='row'>




<button type='button' class='btn btn-navbar' data-toggle='collapse'

data-target='.nav-collapse'>




</button>


<ul class='nav'>


<a href='#' class='dropdown-toggle' data-toggle='dropdown'><i

class='icon-user icon-white'></i> ".$data['nm_mahasiswa']." <b

class='caret'></b></a>


<li><a href='index.php?page=mahasiswa'>Info Mahasiswa</a></li>

<li><a href='#'>Kartu Rencana Studi (KRS)</a></li>

of 26


<li><a href='#ModalTentang' role='button' data-

toggle='modal'>Tentang Program</a></li>

</ul>


</li>

</ul>

</div>

</div>

</div>

</div>

</div>



<div class='isicari'>

<h4><center>KARTU RENCANA STUDI (KRS)</h4>

</div>

";

}

?>

<div id="isikrs">

<table class="table table-bordered">

<tr bgcolor="#fcf8e3">

<th style="text-align:center;" width="30px">NO</th>

<th style="text-align:center;" width="100px">Kode Matakuliah</th>

<th style="text-align:center;">Nama Matakuliah</th>

<th style="text-align:center;" width="30px">SKS</th>

<th style="text-align:center;" width="70px">Kelas</th>

<th style="text-align:center;" width="150px">Jadwal</th>

<th style="text-align:center;">Dosen Pengampuh</th>

<th style="text-align:center;" width="50px">Ambil</th>

</tr>

<?php

$kumpulantabel = mysql_query("

select pengampuh.dosen_pengampuh,

jadwal.kelas,matakuliah.kode_mk,

matakuliah.nm_mk,matakuliah.sks, jadwal.kode_mk, jadwal.jadwal,

thnajar.thnajar

from


of 26

pengampuh inner join matakuliah on

matakuliah.kode_mk=pengampuh.kode_mk

inner join jadwal on

pengampuh.dosen_pengampuh=jadwal.dosen_pengampuh

inner join thnajar on matakuliah.kode_mk=thnajar.kode_mk

WHERE NOT EXISTS (SELECT kode_mk FROM krs k WHERE

k.kode_mk=matakuliah.kode_mk and nim='$nim')

order by matakuliah.kode_mk ASC");

if(mysql_num_rows($kumpulantabel) != 0){

while($data2 = mysql_fetch_array($kumpulantabel)){

$i++;

$no = 0 + $i;

echo "

<tr>

<td style='text-align:center;' widtd='30px'>".$no."</td>

<td style='text-align:center;'

widtd='100px'>".$data2['kode_mk']."</td>

<td style='text-align:center;'>".$data2['nm_mk']."</td>

<td style='text-align:center;' widtd='30px'>".$data2['sks']."</td>

<td style='text-align:center;' widtd='70px'>".$data2['kelas']."</td>

<td style='text-align:center;' widtd='150px'>".$data2['jadwal']."</td>

<td style='text-align:center;'>".$data2['dosen_pengampuh']."</td>

<td style='text-align:center;' widtd='50px'><a class='btn btn-info btn-

mini'

href='./system/mahasiswa/ambil.php?thn=".$data2['thnajar']."&kdmk=

".$data2['kode_mk']."&nmmk=".$data2['nm_mk']."&sks=".$data2['sks

']."

&kls=".$data2['kelas']."&jdwl=".$data2['jadwal']."&dosen=".$data2['d

osen_pengampuh']."'>

Ambil</button></td>

</tr>

";

}

}else{

echo "<script>alert('Batas Mengambil KRS Anda Tidak

Mencukupi');</script>";

echo

"<script>window.location.href='index.php?page=mahasiswa'</script>

";


of 26

}

?>

<tr>

<td colspan="8">

<a class="btn btn-danger btn-small" href='index.php?page=krs'>Batal

KRS</a>

</td>

</tr>

</table>

</div>

4. ambil.php


<?php


echo


}else{

include "../../config/koneksi.php";


$thn = $_GET['thn'];

$kd_mk = $_GET['kdmk'];

$nm_mk = $_GET['nmmk'];

$sks = $_GET['sks'];

$kelas = $_GET['kls'];

$jadwal = $_GET['jdwl'];

$dosen = $_GET['dosen'];

$q = mysql_query("insert into krs

values('','$nim','$thn','$kd_mk','$nm_mk','$sks','$kelas','$jadwal','$dose

n')");

echo

"<script>window.location.href='../../index.php?page=krs'</script>";

}

?>

5. hapus.php


<?php


of 26


echo


}else{


$id = $_GET['id'];

mysql_query("delete from krs where id_krs='$id'");

echo "<script>window.location.href='index.php?page=krs';</script>";

}

?>

6. logout.php

<?php

session_start();

unset($_SESSION['levellogin']);

unset($_SESSION['nim']);

echo


?>

- kembali pada folder root anda dan masuk kedalam folder css lalu buatlah 1 file

dengan nama style.css dan ketikkan kode berikut :

.navbar-atas{

position: fixed;

right:10%;

left:10%;

margin-bottom:0;

}

.isi{

margin-top:45px;

margin-left:10%;

margin-right:10%;

border:1px solid #949595;

}

.isi pre{

background-color:white;

border:none;

}


of 26

.isicari{

padding-top:1px;

margin-top:40px;

margin-left:10%;

margin-right:10%;

}

.teks-tengah{

text-align:center;

}

.footer{

margin-top:3px;

position: fixed;

right:10%;

left:10%;

margin-bottom:0;

}

#isikrs{

margin-left:10%;

margin-right:10%;

}

#isikrs a:hover{

color:red;

text-decoration:none;

}

#isitambahkrs {

margin-top:50px;

margin-left:10%;

margin-right:10%;

}

- Untuk lebih memahami anda bisa mendownload source code lengkap dari project

tugas ini di http://idar.hol.es/tugas5.zip

Twitter Bootstrap

Documents

Transcript of Twitter Bootstrap