Kiat-Kiat Membangun Website Dengan Framework Bootstrap
Table of Contents
Pada dasarnya para developer web professional membedakan pengembangan sebuah web menjadi Front-End Developer dan Back End Developer. Front End Developer lebih kepada pengembangan interface dan desain web, yang mana nantinya berfungsi secara langsung untuk berinteraksi dengan user. Sedangkan Back End Developer bertugas untuk mengembangkan alir sistem web.
Okey, kali ini saya akan menjelaskan tentang Front End Developer saja. Akhir-akhir ini, para pengembang Front End cenderung menggunakan framework canggih yang mampu menghasilkan website dengan kualitas prima dalam waktu singkat. Framework apakah itu? jawabannya adalah Bootstrap. Mengembangkan web dengan Bootstrap bagaikan makan dengan disuapin. Betapa tidak, banyak konten-konten menarik seperti CSS dan JavaScript yang sudah tersedia dan tinggal pakai saja, bahkan kelebihan yang paling keren adalah bootstrap mendukung Responsive-Web, jadi bisa dibuka lewat device apa saja tanpa mengganggu tempilan interface, keren kan?.
Saya akan memberikan contoh bagaimana membuat website dengan Framework Bootsrap, tentunya berdasarkan pengalaman saya yang masih newbie. (^_^)...
Pertama, teman-teman download terlebih dahulu framework bootstrap lewat situs resminya, silakan masuk disini getbootstrap.com. Hingga saya menulis tulisan ini, bootsrap udah masuk ke versi 3.1.1 lho, terdapat beberapa fitur tambahan walaupun dasarnya tetap sama.
Setelah download akan muncul file bootstrap.rar silakan diekstrak terlebih dahulu. Didalam folder hasil ekstrak terdapat ketiga folder berikut. Ketiga folder inilah yang menjadi pondasi pokok Framework Bootstrap.
Lantas, teman-teman pindahkan ketiga folder framework bootstrap diatas ke folder baru tempat kalian akan membuat web. Yupz, pengaturan secara teknis udah selesai, sekarang waktunya ngoding webnya.. Let's Code !!!
Letakkan kode berikut kedalam Editor HTML teman-teman, saya memakai notepad++ . Kode berikut adalah kode standar yang harus ada untuk mengintegrasikan code web dengan framework bootstrap, jika kode ini tidak ada, ya gak bakal jadi web..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ketuk Perpus</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<!--<link rel="stylesheet" type="text/css" href="css/style.css"> -->
</head>
<body>
Konten Kamu, Isi Disini
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Ketuk Perpus</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<!--<link rel="stylesheet" type="text/css" href="css/style.css"> -->
</head>
<body>
Konten Kamu, Isi Disini
</body>
</html>
Simpan file diatas dengan nama index.html letakkan 1 folder dengan file-file framework bootstrap tadi. Jika kalian run, tidak akan muncul apa-apa kecuali tulisan Konten Kamu, Isi Disini. Karena memang pada bagian body web belum kita isikan konten apa-apa.
Okey, pondasi web sudah kita buat, sekarang membuat rumahnya. Let's Code !! Hapus kode <body> </body> diatas dan gantikan dengan kode berikut..
<body class="bodi">
<nav class="navbar navbar-default navbar-fixed-top navigasi" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="image/twitter-icon.png" class="logo" /> Ketuk Perpus</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Bahasa<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
<style>
@font-face
{
font-family: sembarang;
src: url(font/SourceSansPro-Regular.ttf);
}
.margin50{
margin-top:50px;
}
body{font-family: sembarang}
.m5{margin: 5px 5px 5px 0px; }
.m6{min-width: 255px;}
.m7{margin: 10px;}
.home{margin-top: 50px;}
.kontainer{margin-top: 70px;}
.profil{margin-top: 20px}
.register{margin-top:5px;}
.judulRegister{border-bottom:1px solid #ccc ; padding:10px;}
.inputRegister{padding: 0px 10px 10px 10px;}
.white{background:white;padding:10px;border-radius:5px;}
.white2{background:white;padding:20px;border-radius:5px; min-height: 425px }
.white3{background:white;padding:0px;border-radius:5px;}
.navigasi{background:white;}
.footer2{margin-top: 30px ; font-size: 12px; font-weight: bold;}
.footer2 ul li a {color: white; text-shadow:1px 1px 5px #7A7A7A;}
.logo{width: 40px;
margin-top: -10px;}
.bodi{background: #87e0fd; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #87e0fd 0%, #069fdb 99%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#87e0fd), color-stop(99%,#069fdb)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #87e0fd 0%,#069fdb 99%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #87e0fd 0%,#069fdb 99%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #87e0fd 0%,#069fdb 99%); /* IE10+ */
background: radial-gradient(ellipse at center, #87e0fd 0%,#069fdb 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#069fdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#email{width: 175px; top: 300px; right:200px;}
#pass{width:150px; }
#login{position:1075px;}
.login{margin-top:50px;margin-bottom:-30px;}
.nav-sebelah{background: #eee;border-radius: 4px;}
@media(max-width: 991px){
.white, .white3{margin:15px 15px 0px 15px}
}
</style>
<nav class="navbar navbar-default navbar-fixed-top navigasi" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="image/twitter-icon.png" class="logo" /> Ketuk Perpus</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Bahasa<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
<style>
@font-face
{
font-family: sembarang;
src: url(font/SourceSansPro-Regular.ttf);
}
.margin50{
margin-top:50px;
}
body{font-family: sembarang}
.m5{margin: 5px 5px 5px 0px; }
.m6{min-width: 255px;}
.m7{margin: 10px;}
.home{margin-top: 50px;}
.kontainer{margin-top: 70px;}
.profil{margin-top: 20px}
.register{margin-top:5px;}
.judulRegister{border-bottom:1px solid #ccc ; padding:10px;}
.inputRegister{padding: 0px 10px 10px 10px;}
.white{background:white;padding:10px;border-radius:5px;}
.white2{background:white;padding:20px;border-radius:5px; min-height: 425px }
.white3{background:white;padding:0px;border-radius:5px;}
.navigasi{background:white;}
.footer2{margin-top: 30px ; font-size: 12px; font-weight: bold;}
.footer2 ul li a {color: white; text-shadow:1px 1px 5px #7A7A7A;}
.logo{width: 40px;
margin-top: -10px;}
.bodi{background: #87e0fd; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #87e0fd 0%, #069fdb 99%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#87e0fd), color-stop(99%,#069fdb)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #87e0fd 0%,#069fdb 99%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #87e0fd 0%,#069fdb 99%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #87e0fd 0%,#069fdb 99%); /* IE10+ */
background: radial-gradient(ellipse at center, #87e0fd 0%,#069fdb 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#069fdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#email{width: 175px; top: 300px; right:200px;}
#pass{width:150px; }
#login{position:1075px;}
.login{margin-top:50px;margin-bottom:-30px;}
.nav-sebelah{background: #eee;border-radius: 4px;}
@media(max-width: 991px){
.white, .white3{margin:15px 15px 0px 15px}
}
</style>
Hasilnya ! Navbar pun terbentuk, mirip kayak di twitter. Perlu teman-teman perhatikan, agar dapat memanggil icon pada Navbar, tambahkan folder image pada folder web teman-teman. Isikan dengan gambar berekstensi file gambar misal .png, misal : twitter-icon.png. Sesuaikan nama gambar dengan kode program pemanggilan gambarnya ya. Pada kode diatas, kode pemanggilan gambar terdapat pada baris belasan dari atas.
Agar web baru kita lebih mirip tampilan login twitter, kita lanjutin ngodingnya.. Tambahkan kode berikut, tepat diatas </body> dan tepat dibawahnya </nav>
<div class="container kontainer">
<div class="row margin50">
<div class="col-md-6 col-md-offset-1">
<div class="white2">
<!--<h3 class="text-muted">Selamat Datang</h3>
<h4 class="text-muted">Ketuk Perpus</h4>b-->
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li class="dropdown">
<a href="" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Profil<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li class=""><a href="#profile1" tabindex="-1" data-toggle="tab">Band A</a></li>
<li class=""><a href="#profile2" tabindex="-1" data-toggle="tab">Band B</a></li>
</ul>
</li>
<li><a href="#messages" data-toggle="tab">Tentang</a></li>
<li><a href="#settings" data-toggle="tab">Keterangan</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active fade in" id="home">
<div class="home">
<h3 class="text-muted text-center">Selamat Datang</h3>
<h4 class="text-muted text-center">Ketuk Perpus</h4>
</div>
</div>
<div class="tab-pane fade" id="messages">
<p class="text-justify profil">Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
</p>
</div>
<div class="tab-pane fade" id="settings">
<p class="text-justify profil">Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
</p>
</div>
<div class="tab-pane fade" id="profile1">
<p class="text-justify profil">
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
</p>
</div>
<div class="tab-pane fade" id="profile2">
<p class="text-justify profil">
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="white">
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control m5" placeholder="Username" />
</div>
</div>
<div class="row">
<div class="col-md-8">
<input type="password" class="form-control m5 m6" placeholder="Password" />
</div>
<div class="col-md-4">
<button class="btn btn-info btn-block m5">Login</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="checkbox" class="m7" /> Ingat Sandi .<a href="" class="m5"> Lupa Password?</a>
</div>
</div>
</div>
</div>
<div class="row register">
<div class="white3">
<h4 class="judulRegister"><strong>Register?</strong></h4>
<div class="inputRegister">
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control m5" placeholder="Nama Lengkap" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control m5" placeholder="Email" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="password" class="form-control m5" placeholder="Sandi" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="password" class="form-control m5" placeholder="Ulang Sandi" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-warning pull-right m5">Register</button>
<div class"clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row margin50">
<div class="col-md-6 col-md-offset-1">
<div class="white2">
<!--<h3 class="text-muted">Selamat Datang</h3>
<h4 class="text-muted">Ketuk Perpus</h4>b-->
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li class="dropdown">
<a href="" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Profil<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li class=""><a href="#profile1" tabindex="-1" data-toggle="tab">Band A</a></li>
<li class=""><a href="#profile2" tabindex="-1" data-toggle="tab">Band B</a></li>
</ul>
</li>
<li><a href="#messages" data-toggle="tab">Tentang</a></li>
<li><a href="#settings" data-toggle="tab">Keterangan</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active fade in" id="home">
<div class="home">
<h3 class="text-muted text-center">Selamat Datang</h3>
<h4 class="text-muted text-center">Ketuk Perpus</h4>
</div>
</div>
<div class="tab-pane fade" id="messages">
<p class="text-justify profil">Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
</p>
</div>
<div class="tab-pane fade" id="settings">
<p class="text-justify profil">Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
</p>
</div>
<div class="tab-pane fade" id="profile1">
<p class="text-justify profil">
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
hahahahahahahahahahah
</p>
</div>
<div class="tab-pane fade" id="profile2">
<p class="text-justify profil">
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
Selamat datang di ketukperpus.com
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="white">
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control m5" placeholder="Username" />
</div>
</div>
<div class="row">
<div class="col-md-8">
<input type="password" class="form-control m5 m6" placeholder="Password" />
</div>
<div class="col-md-4">
<button class="btn btn-info btn-block m5">Login</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="checkbox" class="m7" /> Ingat Sandi .<a href="" class="m5"> Lupa Password?</a>
</div>
</div>
</div>
</div>
<div class="row register">
<div class="white3">
<h4 class="judulRegister"><strong>Register?</strong></h4>
<div class="inputRegister">
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control m5" placeholder="Nama Lengkap" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control m5" placeholder="Email" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="password" class="form-control m5" placeholder="Sandi" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="password" class="form-control m5" placeholder="Ulang Sandi" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-warning pull-right m5">Register</button>
<div class"clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Save dan run di browser. Hasilnya, sungguh memukau, sudah agak mirip tampilan twitter kan? Hmmm... Lumayan sih..
Mantep kan? Hebatnya lagi, web kita ini sudah mendukung responsive lho, coba saja tarik browsernya agar tampilan menyempit..
Sekian dulu yang dapat saya berikan, semoga membantu dan bermanfaat ya! tetap semangat belajar kawan !!!
Posted By