Belajar Membuat Template Web dengan Bootstrap

– Bootstrap, siapa sih yang tidak tau. Sebuah framework css yang sangat membantu pendesain website, sehingga pendesain website bisa membuat template website dengan bootstrap, bisa membuat website dengan bootstrap, bisa membuat web responsive dengan bootstrap. Dan bagi kalian yang belum tau apa itu bootstrap kali ini onphpid akan mengajak kalian untuk belajar bootstrap untuk pemula dan di tutorial belajar bootstrap ini kita akan membuat sebuah template website sederhana dengan bootstrap.

Apa itu bootstrap ?

Bootstrap adalah front-end framework atau framework css yang sengaja dibangun untuk memudahkan pendesain web dalam membuat website atau membuat template website. Framework yang dulu pernah dikenal dengan twitter bootstrap ini dilengkapi dengan komponen-komponen website yang sering digunakan seperti breadcrumb, pagination, modal dialog, navigation bar dan lain-lain yang sangat memudahkan pendesain web saat membuat webiste, bahkan bootstrap ini selalu diunggul-unggulkan dengan fitur website responsive-nya yang memungkinkan kita cukup membuat satu template website saja dan kita bisa memperoleh template yang bisa dibuka atau kompatibel diberbagai device (laptop, handphone, atau tablet).

Manfaat Bootstrap ?

Seperti yang telah terurai di atas template website yang dibangun dengan bootstrap sudah responsif sehingga kita cukup membuat satu buah template lengkap saja dan sudah support atau kompatibel diberbagai browser sekaligus berbagai device baik untuk desktop, laptop, tablet maupun smartphone sekalipun. Template yang kita buat dengan bootstrap ini akan langsung menyesuaikan diri dengan lebar layar dari masing-masing device. Fitur responsif ini juga telah menjadi rekomendasi google guna memperkuat SEO mobile dari website yang kita buat.

Pada tutorial kali ini onphpid akan berbagi sedikit tentang belajar membuat template website bootstrap, tutorial ini dibuat karena onphpid sedang dalam proyek tutorial membuat website yang dapat kalian lihat di cara membuat website. Di tutorial bootstrap ini kiata akan mencoba membuat template website dengan layout dua kolom dengan menggunakan fitur grid dari bootstrap dan tentunya akan kita bahas langkah demi langkah sebagai berikut.

Membuat Template Website dengan bootstrap

Persiapan membuat template dengan bootstrap

Silahkan download source code bootstrap di situs resminya getbootstrap.com yang disediakan oleh bootstrap secara gratis untuk diunduh oleh siapa saja.
Download jquery di jquery.com atau library google. karena bootstrap tidak menyediakan jquery dalam paketan source code-nya. Jquery ini digunakan untuk menjalankan komponen-komponen bawaan bootstrap seperti modal dialog, navigation agar berjalan dengan normal.
Pastikan kalian sudah punya code editor seperti notepad++, dreamweaver atau Sublime Text yang nanti akan kita gunakan untuk membuat template website dengan bootstrap.
Agar lebih terasa bawa kita membuat website, kita akan menggunakan xampp dan file dengan extention php dalam membuat template website ini.

Memulai membuat template web

Pastikan XAMPP sudah terinstall dan sudah dalam kondisi running.
Buat sebuah folder di htdocs dengan nama template
Buka folder template (baru saja kita buat tadi) dan buatlah sebuah folder baru dengan nama assets dan satu buat file dengan nama index.php
Buatlah dua folder baru di dalam folder assets dengan nama bootstrap dan jquery. Dimana hasil download-an bootstrap akan kita ekstrak di folder bootstrap yang baru kita buat dan hasil download-an jquery akan kita letakkan di folder jquery yang baru kita buat. Tambahkan dua file baru yaitu style.css dan custom.js. Kurang lebih hasil dan pembuatan struktur direktori websitenya adalah sebagai berikut :

htdocs/

|— template/

| |— assets/

| | | —bootstrap/

| | | ├── css/

| | | │ ├── bootstrap.css

| | | │ ├── bootstrap.css.map

| | | │ ├── bootstrap.min.css

| | | │ ├── bootstrap–theme.css

| | | │ ├── bootstrap–theme.css.map

| | | │ └── bootstrap–theme.min.css

| | | ├── js/

| | | │ ├── bootstrap.js

| | | │ └── bootstrap.min.js

| | | └── fonts/

| | | ├── glyphicons–halflings–regular.eot

| | | ├── glyphicons–halflings–regular.svg

| | | ├── glyphicons–halflings–regular.ttf

| | | ├── glyphicons–halflings–regular.woff

| | | └── glyphicons–halflings–regular.woff2

| | |— jquery/

| | | |— jquery.min.js

| | |— style.css

| | |— custom.js

| |— index.php

Baca Juga Membuat Halaman Login dengan Bootstrap dan PHP

Buka file index.php dan kita akan memulai membuat template websitenya dengan menuliskan kode dibawah ini di file index.php.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Membuat Template Website Bootstrap</title>

<!– Bootstrap –>
<link href=”assets/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<!– HTML5 shim and Respond.js for IE8 support of
HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js
https://oss.maxcdn.com/respond/1.4.2/respond.min.js
<![endif]–>

<!– Custom CSS –>
<link href=”assets/style.css” rel=”stylesheet”>

</head>
<body>

<!–happy code–>

<!– jQuery online menggunakan CDN –>
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

<!– jQuery lokal –>
http://assets/jquery/jquery.min.js

http://assets/bootstrap/js/bootstrap.min.js

<!– Custom JS –>
http://assets/custom.js
</body>
</html>

<!DOCTYPE html>

<head>

<title>Membuat Template Website Bootstrap</title>

<!— Bootstrap —>

<!— HTML5 shim and Respond.js for IE8 support of

HTML5 elements and media queries —>

<!— WARNING: Respond.js doesn‘t work if you view the page via file:// –>

<!—[if lt IE 9]>

src=“https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”>

src=“https://oss.maxcdn.com/respond/1.4.2/respond.min.js”>

<![endif]—>

<!— Custom CSS —>

</head>

<body>

<!—happy code—>

<!— jQuery online menggunakan CDN —>

src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”>

<!— jQuery lokal —>

src=“assets/jquery/jquery.min.js”>

src=“assets/bootstrap/js/bootstrap.min.js”>

<!— Custom JS —>

src=“assets/custom.js”>

</body>

</html>

Dari script html di atas kita dapat melihat ada komentar tentang jquery lokal dan jquery online maksudnya kita dapat memilih salah satu dari kedua jquery tersebut sesuka hati. kita bisa menggunakan jquery online atau cdn dengan asumsi kita membuat template website dengan bootstrap ini dalam kondisi terhubung dengan internet, jika tidak terhubung maka sebaiknya gunakan jquery lokal saja karena jquery online tidak dapat di unduh jika dalam kondisi offline.

Langkah berikutnya adalah membuat layout website dengan bootstrap bagian header, content dan sidebar serta footer dengan menambahkan kode berikut ini di atas komentar <!–happy code–>. Agar kalian lebih memahami layouting dari bootstrap sebaiknya kalian baca Belajar Grid System Bootstrap 3.

</div>
<!– End Bagian Header –>

<!– Bagian Wrapper 2 kolom –>

</div>
<!– End Bagian wrapper –>

<!– Bagian footer –>

</div>
<!– End Bagian footer –>

</div>

<!— Bagian Header —>

<!— isi header —>

</div>

<!— End Bagian Header —>

<!— Bagian Wrapper 2 kolom —>

<!— isi content —>

</div>

<!— isi sidebar —>

</div>

<!— End Bagian wrapper —>

<!— Bagian footer —>

<!— isi footer —>

</div>

<!— End Bagian footer —>

</div>

Kode baru di atas adalah kode yang akan membagi header, content, sidebar, dan footer. di dalam system grid bootstrap total lebar layar atau lebar kerja diberi nilai 12 kolom.

Kita akan memulai mengisi bagian header dengan mengganti komentar <!– isi header–> dengan kode berikut :

<header>
<h1 class=”title-site”>Belajar Bootstrap</h1>
<p class=”description”>Belajar Membuat Template Website Dengan Bootstrap</p>
</header>
<nav class=”menus”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Portfolio</a></li>
</ul>
</nav>

<h1 class=“title-site”>Belajar Bootstrap</h1>

<p class=“description”>Belajar Membuat Template Website Dengan Bootstrap</p>

</header>

<ul>

<li><a href=“#”>About Us</a></li>

<li><a href=“#”>Portfolio</a></li>

</ul>

</nav>

kemudian kita akan mengisi kolom konten dengan mengganti komentar <!– isi content –> dengan kode berikut :

<article class=”posts”>
<h2 class=”title-post”>Lorem ipsum dolor sit amet</h2>

Onphpid
13 Juni 2015

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nisi veniam quibusdam amet, odit, odio consectetur ratione quod, cupiditate repellendus voluptatum. Laudantium tempora, neque quo ex aspernatur veritatis sequi incidunt.

</article>

<h2 class=“title-post”>Lorem ipsum dolor sit amet</h2>

<span><em class=“glyphicon glyphicon-user”></em> Onphpid</span>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nisi veniam quibusdam amet, odit, odio consectetur ratione quod, cupiditate repellendus voluptatum. Laudantium tempora, neque quo ex aspernatur veritatis sequi incidunt.</p>

</div>

</article>

kemudian pada kolom sidebar silahkan ganti komentar <!– isi sidebar –> dengan kode berikut :

<aside class=”widgets”>
<h3 class=”widget-title”>Latest Posts</h3>
<ul>
<li><a href=”#”>Lorem Ipsum</a></li>
<li><a href=”#”>Lorem Ipsum</a></li>
<li><a href=”#”>Lorem Ipsum</a></li>
<li><a href=”#”>Lorem Ipsum</a></li>
<li><a href=”#”>Lorem Ipsum</a></li>
</ul>
</aside>

<h3 class=“widget-title”>Latest Posts</h3>

<ul>

<li><a href=“#”>Lorem Ipsum</a></li>

</ul>

</aside>

kemudian pada bagian footer silahkan ganti <!– isi footer –> dengan kode berikut :

1	<footer class=“copyright text-center”><p>© 2015 onphpid.com</p></footer>

dan untuk sentuhan terakhir kita akan memberikan style secara custom agar halaman kita tampak lebih baik. silahkan tulis kode berikut di file style.css

body {
background-color: #e5e5e5;
}

.meta-post {
font-size: 12px;
margin-bottom: 10px;
}

.header header {
background-color: #fff;
padding: 10px 20px;
}

nav.menus {
background-color: #e74c3c;
padding: 10px;
}

nav.menus ul {
margin: 0;
padding: 0;
}

nav.menus ul li {
display: inline-block;
}

nav.menus ul li a {
display: block;
padding: 3px 7px;
color: #fff;
}

nav.menus ul li a:hover, nav.menus ul li a:focus{
text-decoration: none;
background-color: #c0392b;
color: #fff;
}

article.posts {
padding: 10px 20px;
background-color: #fff;
margin-top: 20px;
}

aside.widgets {
padding: 10px 20px;
margin-top: 20px;
background-color: #fff;
}
aside.widgets ul {
margin:0;
padding:0;
}
aside.widgets li {
list-style: none;
padding: 0;
margin:0;
}

.widget-title {
border-bottom: 4px solid #E74C3C;
padding-bottom: 4px;
}

footer.copyright {
padding: 10px 20px;
font-size: 12px;
}

body {

background–color: #e5e5e5;

}

.meta–post {

font–size: 12px;

margin–bottom: 10px;

}

.header header {

background–color: #fff;

padding: 10px 20px;

}

nav.menus {

background–color: #e74c3c;

padding: 10px;

}

nav.menus ul {

margin: 0;

padding: 0;

}

nav.menus ul li {

display: inline–block;

}

nav.menus ul li a {

display: block;

padding: 3px 7px;

color: #fff;

}

nav.menus ul li a:hover, nav.menus ul li a:focus{

text–decoration: none;

background–color: #c0392b;

color: #fff;

}

article.posts {

padding: 10px 20px;

background–color: #fff;

margin–top: 20px;

}

aside.widgets {

padding: 10px 20px;

margin–top: 20px;

background–color: #fff;

}

aside.widgets ul {

margin:0;

padding:0;

}

aside.widgets li {

list–style: none;

padding: 0;

margin:0;

}

.widget–title {

border–bottom: 4px solid #E74C3C;

padding–bottom: 4px;

}

footer.copyright {

padding: 10px 20px;

font–size: 12px;

}

Sekian tutorial membuat template website dengan bootstrap. untuk hasilnya bisa dilihat di bawah ini.

Demo

referensi belajar bootstrap

https://id.wikipedia.org/wiki/Twitter_Bootstrap

http://getbootstrap.com

Sumber : https://www.onphpid.com/belajar-membuat-template-web-menggunakan-bootstrap.html

Posted in Bootstrap | Leave a comment

Bootstrap Part 3 : Tampilan Gambar Dengan Bootstrap

Posted on 23 June 2016 by Choirul Anam

Tampilan Gambar Dengan Bootstrap

Pada tutorial kali ini akan di bahas tentang cara membuat tampilan gambar yang menarik dengan bootstrap. yaitu membuat gambar berbentuk melengkung pada sisi sudut, gambar dengan bentuk lingkaran, gambar thumbnail dan gambar responsive dengan bootstrap.

Bootstrap menyediakan class untuk mengatur gambar sesuai dengan keinginan, misalnya membuat gambar dengan bentuk rounder, circle(lingkaran) dan gambar yang responsive. berikut ini di jelaskan tentang beberapa class bootstrap yang bisa di gunakan untuk membuat memanipulasi tampilan gambar pada bootstrap

.img-responsive
class img-responsive berguna untuk membuat gambar menjadi responsive saat di jalankan pada semua bentuk dan ukuran resolusi.
img-rounded
class img-rounded di gunakan untuk membuat gambar berbentuk round atau pada sisi sudut gambar memiliki bentuk melengkung.
img-circle
class img-circle di gunakan untuk membuat gambar dengan bentuk lingakaran.
img-thumbnail
class img-thumbnail di gunakan untuk membuat gambar thumbnail dengan bootstrap.

berikut ini beberapa contoh yang dapat di lihat untuk membuat tampilan gambar dengan bootstrap.

Membuat gambar thumbnail dengan bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 3 : Tampilan gambar dengan Bootstrap</title>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>
http://js/jquery.js
http://js/bootstrap.js
</head>
<body>
<h1>Cara Membuat tampilan gambar dengan Bootstrap | http://www.malasngoding.com</h1>
<img src=”malasngoding.png” class=”img-thumbnail” alt=”Gambar malas ngoding” width=”304″ height=”236″>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 3 : Tampilan gambar dengan Bootstrap</title>

type=“text/javascript” src=“js/jquery.js”>

type=“text/javascript” src=“js/bootstrap.js”>

</head>

<body>

<h1>Cara Membuat tampilan gambar dengan Bootstrap | www.malasngoding.com</h1>

</body>

</html>

pada gambar di atas kita menggunakan class “img-thumbnail” untuk membuat gambar thumbnail dengan menggunakan bootstrap.

1	<img src=“malasngoding.png” class=“img-thumbnail” alt=“Gambar malas ngoding”>

tampilan gambar dengan bootstrap

Membuat gambar circle dengan bootstrap

Sama dengan cara membuat gambar thumbnail pada contoh di atas. untuk membuat gambar dengan bentuk lingkaran anda dapat menggunakan class “img-circle”. tampilan gambar dengan bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 3 : Tampilan gambar dengan Bootstrap</title>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>
http://js/jquery.js
http://js/bootstrap.js
</head>
<body>
<h1>Cara Membuat tampilan gambar dengan Bootstrap | http://www.malasngoding.com</h1>
<img src=”malasngoding.png” class=”img-circle” alt=”Gambar malas ngoding” width=”304″ height=”236″>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 3 : Tampilan gambar dengan Bootstrap</title>

type=“text/javascript” src=“js/jquery.js”>

type=“text/javascript” src=“js/bootstrap.js”>

</head>

<body>

<h1>Cara Membuat tampilan gambar dengan Bootstrap | www.malasngoding.com</h1>

</body>

</html>

membuat gambar lingkaran dengan bootstrap

Membuat gambar round dengan bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 3 : Tampilan gambar dengan Bootstrap</title>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>
http://js/jquery.js
http://js/bootstrap.js
</head>
<body>
<h1>Cara Membuat tampilan gambar dengan Bootstrap | http://www.malasngoding.com</h1>
<img src=”malasngoding.png” class=”img-rounded” alt=”Gambar malas ngoding” width=”304″ height=”236″>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 3 : Tampilan gambar dengan Bootstrap</title>

type=“text/javascript” src=“js/jquery.js”>

type=“text/javascript” src=“js/bootstrap.js”>

</head>

<body>

<h1>Cara Membuat tampilan gambar dengan Bootstrap | www.malasngoding.com</h1>

</body>

</html>

manipulasi tampilan gambar dengan bootstrap

Membuat gambar responsive dengan bootstrap

untuk membuat gambar responsive dengan menggunakan bootstrap anda dapat melakukannya dengan menambahkan class “img-responsive” pada elemeng gambar. tampilan gambar dengan bootstrap

http://codepen.io/malasngoding/embed/rxypLw?animations=run&default-tab=result&slug-hash=rxypLw&theme-id=0&height=268&user=malasngoding

sekian tutorial belajar bootstrap part 3 tentang membuat tampilan gambar dengan bootstrap.

Tutorial Bootstrap Dasar Lainnya

Sumber : http://www.malasngoding.com/bootstrap-part-3-tampilan-gambar-dengan-bootstrap/

Posted in Bootstrap | Leave a comment

Bootstrap Part 2 : Membuat Table Dengan Bootstrap

Posted on 23 June 2016 by Choirul Anam

Bootstrap Part 2 : Membuat Table Dengan Bootstrap

Untuk membuat table dengan bootstrap, anda hanya perlu memasukkan class-class bootstrap yang di gunakan untuk mendesign table. Adapun beberapa class bootstrap yang di gunakan untuk design atau membuat table adalah sebagai berikut.

.table
class ini di gunakan untuk mendefinisikan atau membuat table standar/ table biasa.
.table-striped
table-striped merupakan class tambahan untuk membuat table dengan menggunakan bootstrap. class ini berfungsi untuk membuat baris table yang bergaya belang-beling (strip).
.table-bordered
table-bordered di gunakan untuk membuat table yang memiliki garis dan termasuk class tambahan pada bootstrap untuk mendesign table.
.table-hover
table-hover merupakan class tambahan untuk mendesign table menggunakan bootstrap. table hover di gunakan untuk membuat efek hover pada row table pada saat cursor mouse di letakkan di atas row table.

Untuk membuat pewarnaan pada row atau table data anda dapat menggunakan class-class berikut ini yang dapat anda tambahkan pada tag <tr> untuk memberi warna pada table row, atau tambahkan pada tag <td> untuk memberi warna pada table data.

.success
class ini di gunakan untuk memberi tanda sukses atau warna hijau pada table row atau table data.
.danger
class ini di gunakan untuk memberi warna merah pada table row atau table data.
.info
class ini di gunakan untuk memberi warna biru pada table row atau table data.
.warning
class ini di gunakan untuk memberi warna kuning pada table row atau table data.

Cara membuat table dengan bootstrap

untuk membuat atau mendesign table dengan bootstrap buat sebuah file php atau html. di sini saya membuat file index.php. untuk cara menghubungkan bootstrap telah di bahas pada tutorial sebelumnya.

index.php

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>
http://js/jquery.js
http://js/bootstrap.js
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | http://www.malasngoding.com</h1>
<table class=”table”>
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>

type=“text/javascript” src=“js/jquery.js”>

type=“text/javascript” src=“js/bootstrap.js”>

</head>

<body>

<h1>Cara Membuat table dengan Bootstrap | www.malasngoding.com</h1>

<thead>

<tr>

<th>Makanan</th>

<th>Harga</th>

</tr>

</thead>

<tbody>

<tr>

<td>Bakso</td>

</tr>

<tr>

<td>Mie Goreng</td>

</tr>

<tr>

<td>Nasi Goreng</td>

</tr>

<tr>

<td>Sate Padang</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

membuat table dengan bootstrap

perhatikan pada contoh di atas, kita hanya perlu menambahkan class “table” pada element tag <table> pembuka. dan hasilnya tampilan table akan seperti di atas.

Membuat table border dengan bootstrap

untuk membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class “table_bordered” bersamaan dengan class “table”. contohnya

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>
http://js/jquery.js
http://js/bootstrap.js
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | http://www.malasngoding.com</h1>
<table class=”table table-bordered”>
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>

type=“text/javascript” src=“js/jquery.js”>

type=“text/javascript” src=“js/bootstrap.js”>

</head>

<body>

<h1>Cara Membuat table dengan Bootstrap | www.malasngoding.com</h1>

<thead>

<tr>

<th>Makanan</th>

<th>Harga</th>

</tr>

</thead>

<tbody>

<tr>

<td>Bakso</td>

</tr>

<tr>

<td>Mie Goreng</td>

</tr>

<tr>

<td>Nasi Goreng</td>

</tr>

<tr>

<td>Sate Padang</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

membuat table border dengan bootstrap

membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class “table-bordered” pada tag <table> pembuka seperti contoh di atas.

1	<table class=“table table-bordered”>

Membuat Table strip dengan bootstrap

table dengan gaya strip atau belang-belang dapat di buat dengan menggunakan class “table-striped” pada bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>
http://js/jquery.js
http://js/bootstrap.js
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | http://www.malasngoding.com</h1>
<table class=”table table-bordered table-striped”>
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>

type=“text/javascript” src=“js/jquery.js”>

type=“text/javascript” src=“js/bootstrap.js”>

</head>

<body>

<h1>Cara Membuat table dengan Bootstrap | www.malasngoding.com</h1>

<thead>

<tr>

<th>Makanan</th>

<th>Harga</th>

</tr>

</thead>

<tbody>

<tr>

<td>Bakso</td>

</tr>

<tr>

<td>Mie Goreng</td>

</tr>

<tr>

<td>Nasi Goreng</td>

</tr>

<tr>

<td>Sate Padang</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

tambahkan class “table-striped” pada tag <table> pembuka seperti contoh di atas.

1	<table class=“table table-bordered table-striped”>

dan hasilnya

membuat table striped dengan bootstrap

Membuat table hover dengan bootstrap

seperti pada contoh-contoh membuat table dengan bootstrap di atas, untuk membuat efek hover pada table anda hanya perlu menambahkan class “table-hover” pada tag <table> pembuka.

1	<table class=“table table-hover”>

perhatikan lagi contoh membuat table dengan bootstrap berikut ini

http://codepen.io/malasngoding/embed/yeMPRY?animations=run&default-tab=result&slug-hash=yeMPRY&theme-id=0&height=268&user=malasngoding

Membuat table responsive dengan bootstrap

untuk membuat table yang responsive dengan bootstrap anda hanya tinggal meletakkan element table di dalam element

yang di beri class “table-responsive”.

. kelebihan dari class table-responsive ini akan membuat table anda tidak akan berantakan walaupun di buka melalui smartphone yang memiliki resolusi layar yang lebih kecil. akan muncul scrol secara otomatis untuk membuat menjaga table tetap utuh. berikut ini adalah contoh membuat table responsive dengan bootstrap.

Bootstrap Part 2 : Membuat table dengan Bootstrap

http://js/jquery.js
http://js/bootstrap.js

Cara Membuat table dengan Bootstrap | http://www.malasngoding.com

No	Makanan	Harga
1	Bakso	12.000
2	Mie Goreng	7.000
3	Nasi Goreng	15.000
4	Sate Padang	17.000
5	Nasi Soto	20.000

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>

type=“text/javascript” src=“js/jquery.js”>

type=“text/javascript” src=“js/bootstrap.js”>

</head>

<body>

<h1>Cara Membuat table dengan Bootstrap | www.malasngoding.com</h1>

<thead>

<tr>

<th>Makanan</th>

<th>Harga</th>

</tr>

</thead>

<tbody>

<tr>

<td>Bakso</td>

</tr>

<tr>

<td>Mie Goreng</td>

</tr>

<tr>

<td>Nasi Goreng</td>

</tr>

<tr>

<td>Sate Padang</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

sekain lah cara mendesign dan membuat table dengan bootstrap. anda hanya perlu menambahkan class-class table bootstrap untuk membuat table sesuai keinginan anda. dan tentu setelah anda mempelajari cara membuat table dengan bootstrap ini pasti anda telah menemukan sendiri apa kelebihan dari bootstrap dalam hal design interface website.

Tutorial Bootstrap Dasar Lainnya

Sumber : http://www.malasngoding.com/membuat-table-dengan-bootstrap/

Posted in Bootstrap | Leave a comment

Bootstrap Part 1 : Pengertian Dan Cara Menggunakan Bootstrap

Posted on 23 June 2016 by Choirul Anam

Bootstrap Part 1 : Pengertian Dan Cara Menggunakan Bootstrap

Pada tutorial Bootstrap Part 1 ini akan dijelaskan tentang Pengertian dan cara menggunakan bootstrap. Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan front-end website. bootstrap merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer. pada saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.

Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.

Salah satu contoh website besar yang menggunakan framework bootstrap adalah Twitter, tentu anda sudah familiar dengan twitter bukan ? yap, interface twitter di bangun dengan menggunakan bootstrap. karena sebenarnya bootstrap di kembangkan oleh developer twitter sendiri sehingga bootstrap sering juga di sebut “twitter bootstrap”. Bootstrap berisi kumpulan class yang siap pakai. misalnya anda ingin membuat sebuah tombol dengan cepat dan tana harus merancang dan mengetikkan syntax css untuk membuat sebuah tombol, maka dengan bootstrap anda dapat membuatnya dengan sangat cepat, yaitu hanya dengan menambahkan class “btn” dan menambahkan class btn tambahan yang akan kita jelaskan pada tutorial selanjutnya di tutorial edisi belajar bootstrap di http://www.malasngoding.com.

Tentu anda bertanya-tanya kenapa sangat banyak yang telah menggunakan bootstrap dalam pengembangan website. berikut ini akan di jelaskan beberapa kegunaan yang telah menjadi kelebihan pada bootsrap. adapun beberapa kelebihan bootstrap adalah sebagai berikut.

Penggunaan bootstrap sangat menghemat waktu.
Tampilan bootstrap yang sudah cukup terlihat modern.
Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet dan smartphone.
Sangat ringan karena bootstrap di buat dengan sangat terstruktur.
Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap.

Sebelum di jelaskan tentang cara menggunakan bootstrap, alangkah lebih baik nya jika anda terlebih dahulu mempelajari CSS dasar. klik di sini untuk membaca tutorial belajar CSS di www.malasngoding.com.

Cara Menggunakan Bootstrap

Untuk cara menggunaan bootstrap yang pertama kali yang harus anda lakukan adalah melakukan instalasi bootstrap. anda dapat mendownload langsung bootstrap pada website resminya di http://getbootstrap.com/getting-started/.

pengertian dan cara menggunakan bootstrap

untuk sampai saat ini bootsrap telah di rilis sampai versi 4. klik di sini untuk mendapatkan bootstrap versi 4. berikut ini adalah struktur isi dari bootstrap setelah anda mendownloadnya.

bootstrap/<br /><br />
├── css/<br /><br />
│ ├── bootstrap.css<br /><br />
│ ├── bootstrap.css.map<br /><br />
│ ├── bootstrap.min.css<br /><br />
│ ├── bootstrap.min.css.map<br /><br />
│ ├── bootstrap-theme.css<br /><br />
│ ├── bootstrap-theme.css.map<br /><br />
│ ├── bootstrap-theme.min.css<br /><br />
│ └── bootstrap-theme.min.css.map<br /><br />
├── js/<br /><br />
│ ├── bootstrap.js<br /><br />
│ └── bootstrap.min.js<br /><br />
└── fonts/<br /><br />
├── glyphicons-halflings-regular.eot<br /><br />
├── glyphicons-halflings-regular.svg<br /><br />
├── glyphicons-halflings-regular.ttf<br /><br />
├── glyphicons-halflings-regular.woff<br /><br />
└── glyphicons-halflings-regular.woff2

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap.min.css.map

│ ├── bootstrap–theme.css

│ ├── bootstrap–theme.css.map

│ ├── bootstrap–theme.min.css

│ └── bootstrap–theme.min.css.map

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons–halflings–regular.eot

├── glyphicons–halflings–regular.svg

├── glyphicons–halflings–regular.ttf

├── glyphicons–halflings–regular.woff

└── glyphicons–halflings–regular.woff2

sedikit informasi tambahan sebelum anda mendownload bootstrap anda dapat menentukan sendiri atau meng-costumize bootstrap sesuai dengan keinginan anda. tutorial bootstrap bahasa indonesia untuk pemula.

Cara Menginstal Bootstrap

Cara menginstall bootstrap ada beberapa cara. anda bisa menginstall bootstrap dengan composer, bower, menggunakan npm, secara offline dan online. berikut ini contoh perintah untuk menginstall bootstrap menggunakan bower.

bower install bootstrap

1	bower install bootstrap

untuk menginstall bootstrap menggunakan npm

npm install bootstrap

1	npm install bootstrap

Install bootstrap dengan composer

composer require twbs/bootstrap

1	composer require twbs/bootstrap

tetapi cara yang paling banyak di gunakan adalah dengan cara offline dan online. tutorial bootstrap dasar.

Cara menginstall bootstrap secara online

anda bisa memilih salah satu dari tiga contoh berikut untuk menginstall bootstrap secara online. syntax berikut bisa anda letakkan pada pada bagian <head> pada halaman HTML anda sama seperti menghubungkan HTML dengan CSS dan Javscript.

<!– Latest compiled and minified CSS –><br /><br />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” integrity=”sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=”anonymous”></p><br />
<p><!– Optional theme –><br /><br />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css” integrity=”sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r” crossorigin=”anonymous”></p><br />
<p><!– Latest compiled and minified JavaScript –><br /><br />
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

<!— Latest compiled and minified CSS —>

<!— Optional theme —>

<!— Latest compiled and minified JavaScript —>

src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” integrity=“sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=“anonymous”>

Cara menginstall boostrap secara offline

Cara menginstall bootstrap secara offline ini sangat banyak di gunakan oleh pada developer, karena anda dapat bekerja menggunakan bootstrap tanpa harus terkoneksi dengan internet lagi, karena file framework bootstrap sudah terletak pada pc kita sendiri. lain dengan penginstalan bootstrap secara online yang file-file bootstrap nya terletak pada server luar. pengertian dan cara menggunakan bootstrap

setelah anda mendownload framwork css bootstrap kemudian ekstrak pada project anda. di sini saya meletakkannya pada localhost saya dengan alamat http://localhost/malasngoding/bootstrap/

cara menginstall bootstrap

kemudian untuk menghubungkan atau menginstall bootstrap buat sebuah file HTML atau PHP yang akan kita hubungkan dengan bootstrap. di sini saya membuat sebuah file dengan nama index.php. tutorial bootstrap bahasa indonesia untuk pemula.

Bootstrap juga memerlukan jquery karena untuk bagian javascript nya bootstrap menggunakan jquery, jadi jangan lupa untuk menambahkan juga file jquery pada folder js bootstrap atau letakkan sesuai keinginan anda asalkan direktori saat menghubungkan file css dan js nanti sesuai. baca juga di sini untuk cara menggunakan jquery.

index.php

<!DOCTYPE html><br /><br />
<html><br /><br />
<head><br /><br />
<title>Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap</title><br /><br />
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”><br /><br />
http://js/jquery.js<br /><br />
http://js/bootstrap.js<br /><br />
</head><br /><br />
<body><br /><br />
<h1>Cara Menggunakan Bootstrap | http://www.malasngoding.com</h1><br /><br />
<button class=”btn btn-danger”>TOMBOL MERAH</button><br /><br />
<button class=”btn btn-primary”>TOMBOL BIRU</button><br /><br />
</body><br /><br />
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap</title>

type=“text/javascript” src=“js/jquery.js”>

type=“text/javascript” src=“js/bootstrap.js”>

</head>

<body>

<h1>Cara Menggunakan Bootstrap | www.malasngoding.com</h1>

<button class=“btn btn-danger”>TOMBOL MERAH</button>

<button class=“btn btn-primary”>TOMBOL BIRU</button>

</body>

</html>

dapat di perhatikan pada contoh cara menghubungkan file bootstrap di atas. untuk menghubungkan file html atau php anda dengan bootstrap.css

1	<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.css”>

kemudian hubungkan file html atau php anda dengan bootstrap.js dan jquery.js. ingat letakkan jquery.js pada bagian atas karena bootstrap bekerja menggunakan bantuan jquery bukan jquery menggunakan bantuan bootstrap.

http://js/jquery.js<br /><br />
http://js/bootstrap.js

1 2	type=“text/javascript” src=“js/jquery.js”> type=“text/javascript” src=“js/bootstrap.js”>

kemudian class “btn” pada element <button> di atas merupakan class bootstrap yang bisa di gunakan untuk membuat tombol. dan “btn-danger” dan “btn-primary” untuk menentukan warna dari tombol yang ingin kita buat. kita tidak membahas tentang cara membuat tombol dengan bootstrap pada tutorial ini karena untuk cara membuat tombol dengan bootstrap akan kita bahas pada tutorial selanjutnya di tutorial edisi belajar bootstrap dasar di http://www.malasngoding.com. pengertian dan cara menggunakan bootstrap

dan jika di jalankan pada browser maka hasilnya

contoh penggunaan bootstrap

http://codepen.io/malasngoding/embed/BjWwer?animations=run&default-tab=result&slug-hash=BjWwer&theme-id=0&height=268&user=malasngoding

Sekian lah tutorial belajar bootstrap part 1 : pengertian dan cara menggunakan bootstrap. untuk tutorial bootstrap selanjutnya akan di bahas pada tutorial bootstrap selanjutnya di http://www.malasngoding.com.

NOTE : Perhatikan letak direktori file css dan js bootstrap dan jquery pada saat anda menghubungkannya. anda juga tidak perlu menghubungkan seluruh isi bootstrap, yang hanya perlu di hubungkan adalah file bootstrap.css dan bootstrap.js.

Tutorial Bootstrap Dasar Lainnya

Sumber : http://www.malasngoding.com/pengertian-dan-cara-menggunakan-bootstrap/

Posted in Bootstrap | 2 Comments

Soto Madura

Posted on 11 December 2014 by Choirul Anam

Bahan soto ayam madura :

1 ekor ayam, potong potong
2 liter air
1 sendok makan garam
1/2 sendok makan gula pasir
1/4 sendok teh merica bubuk
3 lembar daun jeruk
1 batang seri memarkan
2 sendok makan minyak untuk menumis
minyak untuk menggoreng

Bumbu yang dihaluskan :

7 siung bawang putih
2 cm kunyit, dibakar
1/2 sendok teh merica
4 buah kemiri sangrai
1 cm jahe

Bahan pelengkap :

3 butir telur rebus, potong potong
2 batang daun bawang, iris iris
2 batang seledri iris halus
2 buah jeruk nipis
75 gram tauge pendek
1 sendok makan kecap manis
50 gram soun, seduh dengan air panas

Bahan taburan :

bawang goreng
keriik kentang

Cara membuat soto ayam madura asli :

Pertama kita rebus ayam yang telah dipotong potong dengan 2 liter air. Rebus hingga air mendidih dan berkaldu. Angkat. Setelah itu saring kaldunya 1,5 liter.
Panaskan minyak goreng dalam wajan kemudian goreng ayam hingga berkulit kemudian angkat dan tiriskan. Kemudian suwir suwir daging ayam. Sisihkan.
Panaskan minyak untuk menumis, kemudian tumis bumbu yagn telah dihaluskan, serai dan juga daun jeruk hingga harum.
Setelah itu masukkan ke dalam kaldu ayam, masukkan juga gula pasir, merica bubuk dan garam. Aduk aduk rata hingga mendidih.
Penyajian soto madura asli : tata ayam dan bahan pelengkap dalam mangkuk saji kemudian tuan kaldu soto dan beri tambahan bahan taburan. Sajikan selagi masih hangat.

Demikian resep soto ayam madura yang enak dan maknyus.

Sumber : http://kumpulan-resep-lengkap.blogspot.com/2014/03/resep-soto-ayam-madura-asli.html

Resep soto madura versi lain dapat Anda lihat dalam tayangan video dibawah ini:

Posted in Kuliner | Leave a comment

Pelatihan di SMAN 2 Wonosari

Posted on 10 December 2014 by Choirul Anam

Bapak-ibu perserta, mohon mengisi data-data pribadi untuk kita semua. Caranya klik link ini

Pelatihan Android JIS DIY

Posted on 17 October 2014 by Choirul Anam

Agar tidak terjadi kesalahan penulisan sertifikat pelatihan ini, maka diharapkan Bapak/Ibu peserta untuk menuliskan kembali biodata dalam link ini.

Untuk hari Minggu yang ini yaaaa.

Yang ini untuk praktek html ke apk

Bahan tentang Google Apps disini

Yang ini modul Android

Atas perhatian Bapak/Ibu, kami sampaikan terima kasih

Posted in Umum | Leave a comment

SELAMAT DATANG DI PELAJARAN WEB DINAMIS

Posted on 27 September 2014 by Choirul Anam

Pelajaran Web Dinamis mempelajari tentang cara pembuatan sebuah website yang dapat bekerja secara dinamis. Yang dimahsud dinamis disini adalah :
1. Dinamis dalam proses mengedit isi/kontennya.
2. Dinamis dalam penugasan sebagai admin.
3. dll

Posted in XI Web Dinamis RPL | Leave a comment

Percobaan Formulir

Posted on 16 September 2014 by Choirul Anam

Silahkan lengkapi data Anda pada formulir disini

Apa itu bootstrap ?

Manfaat Bootstrap ?

Membuat Template Website dengan bootstrap

Persiapan membuat template dengan bootstrap

Memulai membuat template web

Tampilan Gambar Dengan Bootstrap

Membuat gambar thumbnail dengan bootstrap

Membuat gambar circle dengan bootstrap

Membuat gambar round dengan bootstrap

Membuat gambar responsive dengan bootstrap

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 2 : Membuat Table Dengan Bootstrap

Cara membuat table dengan bootstrap

Membuat table border dengan bootstrap

Membuat Table strip dengan bootstrap

Membuat table hover dengan bootstrap

Membuat table responsive dengan bootstrap

Cara Membuat table dengan Bootstrap | http://www.malasngoding.com

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian Dan Cara Menggunakan Bootstrap

Cara Menggunakan Bootstrap

Cara Menginstal Bootstrap

Cara menginstall bootstrap secara online

Cara menginstall boostrap secara offline

Tutorial Bootstrap Dasar Lainnya

Kalender

Categories

My Faceebook

Arsip