Download Template OnePage Ala Blog Script Kiddies

Kali ini saya akan membagikan template OnePage yang pernah saya buat yang awalnya hanya sekedar iseng - iseng saja tapi saya melihat hasil akhirnya lumayan lah .. :v daripada template yang saya buat ini terbengkalai alangkah baikanya saya bagikan saja sobat dapat mengembangkanya atau bisa digunakan untuk pembelajaran terserah dah :D.

LATAR BELAKANG
Dengan adanya source code ini saya harapkan sobat mengembangkanya, untuk inspirasi atau digunakan untuk pembelajaran juga malah lebih baik. Template ini saya buat menggunakan bantuan bootstrap untuk membuat navbar dan saya berikan beberapa bumbu agar lebih bagus. Template ini juga menggunakan JQuery yang digunakan untuk membuat efek - efek animasi agar tidak terkesan mati.

MAKSUD DAN TUJUAN
Tujuan dari adanya template ini sebagai media pembelajaran dan inspirasi

PRIVIEW

Link Download Klik Tombol Di Bawah
Download Disini
Yaa itulah link download template jika ada kritik saran silahkan berikan komentar pada kolom di bawah atau hubungi saya juga boleh

Membuat Website Perusahaan Sederhana Dengan Bootstrap dan CSS

PENGERTIAN
Website perusahaan merupakan sebuah website yang dikhusukan untuk perusahaan biasanya website perusahaan memiliki tampilan yang menarik. mereka memberikan informasi kepada publik tentang perusahaan daripada melakukan bisnis atau menyediakan layanan lainnya

LATAR BELAKANG
Sebuah perusahaan menurut saya harus memiliki website untuk memperkenalkan peruhsahaanya kepada masyarakat. Hampir setiap perusahaan yang berinteraksi dengan masyarakat memiliki situs perusahaan atau mengintegrasikan fitur yang sama ke dalam website lainnya. Oleh karna itu saya yang bercita - cita sebagai programer handal ingin belajar dan share ilmu yang saya miliki khususnya pada web design harus memiliki bakat dalam membuat website apalagi untuk perusahaan

MAKSUD DAN TUJUAN
Dalam pembuatan website perusahaan sangatlah penting bagi kita yang memiliki hoby di dunia pemrograman. Saya melihat pada situs penyedia jasa pembuatan web perusahaan menawarkan pembuatan web sekaligus pengelolaanya diperlukan biaya sekitar 2jt rupiah lebih jadi menurut saya ini adalah peluang bisnis yang menjanjikan dan disini akan saya jelaskan sedikit pengetahuan saya mengenai website perusahaan sebagai alat pembalajaran kita

ALAT DAN BAHAN

• PC / LAPTOP
• Text Editor
• Template W3 Company 
• Koneksi Internet

TAHAP PELAKSANAAN
1. Copy script yang sudah saya sediakan diatas di text editor sobat
2. Lalu kita coba run pada web browser kita

Kurang lebih seperti ini

3. Oke akan kita coba edit sedikit demi sedikit. Pertama akan kita ganti tulisan "Company" . Tekan CTRL + F pada text editor lalu ketikkan company ketika sudah ketemu kita ganti kata tersebut sesuai keinginan kita

3. Simpan dan lihat hasilnya.
4. Jika didalam web tersebut terdapat kata - kata yang ingin sobat ganti silahkan cari kata kuncinya seperti cara diatas yaitu tekan CTRL + F lalu ketik kata kuncinya dan ganti. Mudahkan ?
5. Jika sobat ingin mengganti warna dari template tersebut silahkan cari kode berikut ini #f4511e lalu ganti sesuai warna yang sobat inginkan
6. Sobat bisa melihat dokumentasi lengkapnya di W3 Schools ( Klik Disini )
7. Jika sobat tlaten dalam mengedit script tersebut pasti akan menghasilkan sebuah kepuasan dan ilmu baru
8. Berikut adalah hasil editan saya

KESIMPULAN
Dengan adanya template gratis dari W3 Schools kita bisa belajar dan mendapatkan pengelaman mengenai website perusahaan dan kita juga akan mendapatkan penghasilan ketika ada perusahaan yang mempercayai kita membuat sebuah website untuk mereka. Sebenarnya ini bukan tutorial tetapi dokumentasi dari apa yang saya kerjakan :D

Belajar Bootstrap Part 16 : Mengenal System Grid Bootstrap

MENGENAL SYSTEM GRID BOOTSTRAP
Grid System Merupakan pengaturan ukuran yang ditampilkan monitor. Grid System berfungsi untuk membuat pengukuran untuk lebar dari masing - masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan dari website yang kita buat dengan Bootstrap. Bootstrap memiliki 12 sistem grid. Bootstrap memiliki beberapa class grid yang memiliki fungsinya masing - masing.

• col-lg-* : Digunakan untuk mengatur grid pada ukuran monitor yang besar
• col-md-* : Digunakan untuk mengatur gid pada ukurang monitor berukuran sedang
• col-sm-* : Digunakan untuk mengatur ukuran grid pada monitor tablet
• col-xs-* : Digunakan untuk mengatur ukuran grid pada monitor handphone / smartphone

Silahkan perhatikan script berikut ini untuk memahami grid system Bootstrap

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 16 : Mengenal Grid System Bootstrap </title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>    
    <style type="text/css">
        div{
            background: #2ea3f2;
            text-align: center;
            border: 1px solid #fff;
            padding: 10px;
            color: #fff;
        }
    </style>
</head>
<body>

        <center><h1>Mengenal Grid System Bootstrap | <a href="http://www.script-kiddies.org/">Script Kiddies</a></h1></center>
        <br/>
        <div class="col-md-12">.col-md-12</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
</body>
</html> 

Montior Full

Ketika layar saya kecilkan

Jadi dapat disimpulkan Bootstrap membagi halaman website menjadi 12 grid. Dan dapat menggunakan beberapa grid untuk menentukan lebar sebuah element yang ingin kita buat. Ukuran col-md-1 adalah ukuran yang paling kecil seperti yang dapat dilihat pada gambar diatas. Penggunaan col-md untuk mengatur ukuran lebar pada ukuran monitor yang sedang, dan col-lg untuk ukuran monitor yang besar, begitu juga untuk col-xs dan col-sm seperti yang sudah dijelaskan pada penjelasan tentang class grid Bootstrap diatas.

Contoh sederhananya jika misalnya sobat memiliki dua buah kotak. Dan pada ukuran laptop biasa sobat ingin menampilkan kotak tersebut dengan bersampingan. Maka sobat bisa memberikan col-md-6 pada masing-masing kotak. Dan jika dibuka melalui smartphone misalnya sobat ingin masing-masing kotak tersebut menampilkan ditampilkan dengan lebar penuh maka sobat bisa menambahkan lagi col-xs-12 pada masing-masing element kotak. Contohnya

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 16 : Mengenal Grid System Bootstrap </title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>    
    <style type="text/css">
        div{
            background: #2ea3f2;
            text-align: center;
            border: 1px solid #fff;
            padding: 10px;
            color: #fff;
        }
    </style>
</head>
<body>

        <center><h1>Mengenal Grid System Bootstrap | <a href="http://www.script-kiddies.org/">Script Kiddies</a></h1></center>
        <br/>
        <div class="col-md-6 col-xs-12">col-md-6 col-xs-12</div>
        <div class="col-md-6 col-xs-12">col-md-6 col-xs-12</div>

</body>
</html>

Akan saya contohkan penggunaan grid system Bootstrap lainya disini saya contohkan membuat layout sederhana dengan Bootstrap

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 16 : Mengenal Grid System Bootstrap </title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>    
    <style type="text/css">
        div{
            background: #2ea3f2;
            text-align: center;
            border: 1px solid #fff;
            padding: 10px;
            color: #fff;
        }
        .konten{
            height: 300px;
        }
        .sidebar{
            height: 300px;
        }
    </style>
</head>
<body>

        <center><h1>Mengenal Grid System Bootstrap | <a href="http://www.script-kiddies.org/">Script Kiddies</a></h1></center>
        <br/>
        <div class="col-md-12 col-xs-12">Ini header</div>
        <div class="col-md-9 col-xs-12 konten">Ini konten</div>
        <div class="col-md-3 col-xs-12 sidebar">Ini sidebar</div>
        <div class="col-md-12 col-xs-12">Ini footer</div>

</body>
</html> 

KESIMPULAN
Setelah membaca penjelasan dari mengenal grid system bootstrap dan melihat beberapa contoh diatas diharapkan sobat dapat mendapatkan pemahaman. Dan dengan adanya grid system Bootstrap kita dimudahkan untuk mengatur ukuran website dengan semua resolusi monitor. Jika ada yang ditanyakan silahkan berikan komentar, Sekian Terima Kasih

REFERENSI : Malas Ngoding

TUTORIAL BOOTSTRAP DASAR LAINYA :  

• Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
• Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
• Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
• Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
• Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
• Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
• Bootstrap Part 7 : Membuat Icon Bootstrap
• Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
• Bootstrap Part 9 : Membuat List Dengan Bootstrap
• Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
• Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
• Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
• Bootstrap Part 13 : Membuat Form Dengan Bootstrap
• Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
• Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
• Bootstrap Part 16 : Mengenal Grid System Bootstrap

Belajar Bootstrap Part 15 : Membuat Modal Dengan Bootstrap

MEMBUAT MODAL DENGAN BOOTSTRAP
Modal adalah sebuah kotak dialog atau sering disebut dengan popup yang menampilkan pesana atau konfirmasi untuk suatu aksi, misalnya sobat ingn mebuat aksi menghapus data maka akan muncul kotak dialog yang kurang lebihnya seperti ini " Apakah anda ingin menghapus data ini ? " Banyak lagi yang dapat dilakukan oleh modal karna modal juga dapat menampilkan data dalam bentuk modal

Bootstrap memberikan plugin yang berfungsi untuk membuat modal, modal yang dihasilkan cukup bagus dan cara membuatnya pun mudah

CARA MEMBUAT MODAL DENGAN BOOTSTRAP

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Part 15 : Membuat Modal dengan Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>  
</head>
<body>
   <div class="container">    
  <center><h1>Membuat Modal dengan Bootstrap | <a href="http://www.script-kiddies.org">Script Kiddies</a></h1></center>
  <br/>
  <!-- Tombol untuk menampilkan modal-->
  <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>

  <!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- konten modal-->
      <div class="modal-content">
        <!-- heading modal -->
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Bagian heading modal</h4>
        </div>
        <!-- body modal -->
        <div class="modal-body">
          <p>Bagian Body Modal</p>
        </div>
        <!-- footer modal -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
        </div>
      </div>
    </div>
  </div>
   </div>
</body>
</html>

Akan saya jelaskan tentang pembuatan modal Bootstrap

data-target="#myModal"

Pada tombol, isi dari atribut tersebut menentukan id modal yang akan dimunculkan ketika tombol "Buka Modal" diklik . Perhatikan pada contoh modal diatas.

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- konten modal-->
      <div class="modal-content">
        <!-- heading modal -->
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Bagian heading modal</h4>
        </div>
        <!-- body modal -->
        <div class="modal-body">
          <p>Bagian Body Modal</p>
        </div>
        <!-- footer modal -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
        </div>
      </div>
    </div>
  </div>

class "fade" berfungsi untuk memberi efek memudar ketika modal terbuka dan menutup

data-dismiss="modal" 

atribut data-dismis seperti diatas memiliki fungsi untuk menutup modal. Kemduian modal memiliki bagian kepala atau heading, body dan footer

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- konten modal-->
      <div class="modal-content">
        <!-- heading modal -->
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Bagian heading modal</h4>
        </div>
        <!-- body modal -->
        <div class="modal-body">
          <p>Bagian Body Modal</p>
        </div>
        <!-- footer modal -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
        </div>

Sobat bisa ganti isi dari heading body dan footer modal sesuai keninginan sobat. Dan jika ingin memperkecil ukuran modal sobat dapat menambahkan class "modal-sm" dan untuk memperbesar modal tambahkan class "modal-lg"

KESIMPULAN
Bootstrap menyediakan fasilitas modal yang responsive dan mudah untuk digunakan. Kita tidak perlu susah payah membuat plugin modal tinggal memanggil classnya saja kita dapat membuat modal tersebut dan yang dihasilkan pun memuaskan

REFERENSI : Malas Ngoding

TUTORIAL BOOTSTRAP DASAR LAINYA :  

• Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
• Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
• Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
• Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
• Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
• Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
• Bootstrap Part 7 : Membuat Icon Bootstrap
• Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
• Bootstrap Part 9 : Membuat List Dengan Bootstrap
• Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
• Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
• Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
• Bootstrap Part 13 : Membuat Form Dengan Bootstrap
• Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
• Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
• Bootstrap Part 16 : Mengenal Grid System Bootstrap

Belajar Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap

MEMBUAT CAROUSEL DENGAN BOOTSTRAP
Carousel atau sering disebut oleh kebanyakan orang slideshow merupakan sebuah proses penampilan gambar yang diberi efek slide yaitu gambar dapat berubah sesuai dengan waktu yang ditentukan atau kita dapat menggeser gambar menjadi gambar yang lain. Sangat banyak website yang menggunakan carousel atau slideshow pada website mereka untuk mempromosikan produk unggulan atau untuk tujuan lainya. Biasanya carousel diletakkan pada halaman depan seuah website dengan tampilan yang menarik agar pengunjung tertarik dan betah mengunjungi website tersebut.

Sangat susah untuk membuat carousel dengan cara manual. Dengan adanya class carousel pada Bootstrap kita dapat dengan mudah membuat carousel. Kita juga dapat menambahkan caption pada carousel kita dengan tujuan promosi atau tujuan lainya dan pastinya tampilan dari carousel tersebut mewah dan responsive.

Yang harus kita lakukan pertama kali adalah menyiapkan beberapa file gambar yang akan kita gunakan menjadi gambar yang muncul pada carousel. Disini saya sudah menyediakan 3 file gambar untuk saya jadikan gambar yang muncul pada carousel.

Gambar yang saya sediakan

Dan sekarang masuk ke car amembuat carousel dengan Bootstrap

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap</title>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container">
    <center><h1>Membuat Carousel Dengan Bootstrap | <a href="http://www.script-kiddies.org">SCRIPT_KIDDIES</a></h1></center><br>
    <div class="col-md-8 col-md-offset-2">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- Deklarasi Carousel -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                <img src="Images/1.jpg" alt="SCRIPT_KIDDIES">
                <div class="carousel-caption">
                <h3>SCRIPT_KIDDIES</h3>
                <p>Tutorial Pemrograman Web, Mobile dan Design</p>
                </div>
                </div>
                <div class="item">
                <img src="Images/2.jpg" alt="SCRIPT_KIDDIES">
                <div class="carousel-caption">
                <h3>SCRIPT_KIDDIES</h3>
                <p>Semua Ilmu Pemrograman Dasar Dari Penulis</p>
                </div>
                </div>
                <div class="item">
                <img src="Images/3.jpg" alt="SCRIPT_KIDDIES">
                <div class="carousel-caption">
                <h3>SCRIPT_KIDDIES</h3>
                <p>Belajar Bootstrap Dasar</p>
                </div>
            </div>
        </div>

    <!-- Membuat Panah next Dan Previous -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
        </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        </a>
    </div>
    </div>
</div>
</body>
</html>

Carousel pun jadi ^^ Sedikit info saya menambahkan class grid untuk mengatur ukuran gambar dan mengatur letak dari gambar tersebut jika sobat tidak membutuhkan class tersebut hapus saja karena grid tidak wajib diletakkan pada carousel

<div class="col-md-8 col-md-offset-2">

Lalu untuk  menambahkan indicator dari carouselnya sobat harus menambahkan class berikut

<!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

Sobat Bisa sobat otak atik sendiri, silahkan ganti gambarnya pada tag img-src dan masukkan nama gambar, slahkan ganti <h3> dan <p> sesuai keinginan sobat

 <div class="carousel-inner" role="listbox">
                <div class="item active">
                <img src="Images/1.jpg" alt="SCRIPT_KIDDIES">
                <div class="carousel-caption">
                <h3>SCRIPT_KIDDIES</h3>
                <p>Tutorial Pemrograman Web, Mobile dan Design</p>
                </div>
                </div>

Untuk membuat icon panah dan ketika panah tersebut kita klik maka gamar tersebut akan berubah gunakan class berikut ini

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
        </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        </a>
    </div>
    </div>

Hasilnya !

Ketika icon panah kita click maka gambar akan berubah

KESIMPULAN
Dengan adanya class carousel pada Bootstrap ini kita dimudahkan untuk membuat carousel / slideshow karena kita tinggal memanggil class Bootstrap dan memahami arti dari setiap class tersebut. hmm tetapi menurut saya dibandingkan dengan class Bootstrap yang lain carousel ini yang paling susah dari pada membuat class Bootstrap yang lain

REFERENSI : Malas Ngoding

TUTORIAL BOOTSTRAP DASAR LAINYA :  

• Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
• Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
• Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
• Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
• Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
• Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
• Bootstrap Part 7 : Membuat Icon Bootstrap
• Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
• Bootstrap Part 9 : Membuat List Dengan Bootstrap
• Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
• Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
• Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
• Bootstrap Part 13 : Membuat Form Dengan Bootstrap
• Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
• Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
• Bootstrap Part 16 : Mengenal Grid System Bootstrap

Belajar Bootstrap Part 13 : Membuat Form Dengan Bootstrap

MEMBUAT FORM DENGAN BOOTSTRAP
Pada tutorial kali ini akan dijelaskan tentang bagaimana cara penulisan syntax, element - element HTML yang kita butuhkan untuk membuat form dengan Bootstrap, Bootstrap telah menyediakan class form yang menarik dan membaginya dalam tiga model, yaitu :

• Form dengan model Vertikal
  Form dengan model vertikal ini merupakan form default Bootstrap
• Form dengan model Inline
  Form dengan model inline adalh sebuah form yang label dan form inputnya terletak sebaris
• Form dengan model Horizontal
  Form dengan model horizontal merupakan form yang memiliki bentuk horizontal. Artinya posisi label dan input form terletak Horizontal

Untuk membuat form dengan Bootstrap sobat dapat menggunakan class "form-control" pada tag <input>, <textarea>, <select> dan element form yang bisa digunakan lainya. Baca Disini tentang cara membuat form dengan Bootstrap

MEMBUAT FORM VERTIKAL DENGAN BOOTSTRAP
Form vertikal Bootstrap merupakan bentuk default dari Bootstrap. Artinya bentuk form vertikal ini merupakan bentuk yang digunakan secara default oleh Bootstrap. Untuk membuat form dengan Bootstrap silahkan perheatikan contoh berikut

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 13 : Membuat Form dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>

   <div class="container">        
   <h1>Membuat Form dengan Bootstrap | www.malasngoding.com</h1> 
    <form>
        <div class="form-group">
            <label for="nama">Nama Anda:</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group">
            <label for="alamat">Alamat anda:</label>
            <input type="text" class="form-control" id="alamat">
        </div>        
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
   </div>

</body>
</html>

Perhatikan contoh form Bootstrap diatas. Untuk membuat form dengan Bootstrap pertama yang harus diperhatikan adalah tambahkan class "form-group" untuk membalut element sebuah form seperti label dan formnya. Kemudian kita berikan clas "form-control"

<div class="form-group">
    <label>Nama Anda:</label>
    <input type="text" class="form-control">
</div>

Tentu sangat mudah bukan? Karena sobat hanya perlu menambahkan class - class yang sudah disediakan oleh Bootstrap . Sedikit tambahan, untuk membuat tombol pada Bootstrap , kita telah mempelajarinya pada tutorial sebelumnya

Silahkan baca Belajar Bootstrap Part 4 : Membuat Tombol Dengan Bootstrap

MEMBUAT FORM INLINE DENGAN BOOTSTRAP
Untuk membuat form inline dengan Bootstrap caranya cukup mudah. Sobat hanya perlu menambahkan class "form-inline" pada tag <form> Perhatikan contoh berikut

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 13 : Membuar Form Dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>

<div class="container">
    <h1>Membuat Form Dengan Bootstrap | <a href="http://www.script-kiddies.org">SCRIPT KIDDIES</a></h1>

<div class="container">        
    <form class="form-inline">
        <div class="form-group">
            <label for="nama">Nama Anda:</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group">
            <label for="alamat">Alamat anda:</label>
            <input type="text" class="form-control" id="alamat">
        </div>        
        <button type="submit" class="btn btn-success">Submit</button>
    </form>
   </div>
</body>
</html>

MEMBUAT FORM HORIZONTAL DENGAN BOOTSTRAP
Cara membuat form horizontal dengan Bootstrap yaitu dengan memberikan class "form-horizontal" pada tag <form> Perhatikan contoh berikut

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 13 : Membuar Form Dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>

<div class="container">
    <h1>Membuat Form Dengan Bootstrap | <a href="http://www.script-kiddies.org">SCRIPT KIDDIES</a></h1>

        <form class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-2" for="nama">Nama Anda:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="alamat">Alamat anda:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="alamat">
                </div>
            </div>        
            <button type="submit" class="btn btn-danger">Simpan</button>
        </form>        
    </div>

Oke akan saya jelaskan tentang pembuatan form Horizontal pada contoh diatas

<form class="form-horizontal">

Kita bisa menggunakan class "form-horizontal" pada tag <fom> kemudian pada label dan formatnya

<label class="control-label col-sm-2" for="nama">Nama Anda:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control">
                </div>

Disini untuk membuat form horizontal kira harus menggunakan grid sistem Bootstrap untuk menentukan letaknya. Mungkin bagi sobat yang belum mempelajari Grid System akan agak kebingungan, untuk tutorial Grid System akan kita pelajari pada tutorial selanjutnya.

Kita tidak hanya dapat memasukkan kode syntax input type text saja tetapi kita dapat memasukkan kode lain dan mengkreasikanya sendiri. Perhatikan contoh berikut

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 13 : Membuar Form Dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>

<div class="container">
    <h1>Membuat Form Dengan Bootstrap | <a href="http://www.script-kiddies.org">SCRIPT KIDDIES</a></h1>

    <form>
        <div class="form-group">
            <label for="nama">Username : </label>
            <input type="text" class="form-conatrol">
        </div>
        <div class="form-group">
            <label for="password">Password : </label>
            <input type="password" class="form-conatrol">
        </div>
        <div class="form-group">
            <label for="alamat">Informasi Anda : </label>
            <textarea type="text" class="form-control" id="alamat"></textarea>
        </div>
            <div class="form-group">
            <label for="jk">Jenis Kelamin : </label>
            <select class="form-control" id="jk">
            <option>Pria</option>
            <option>Wanita</option>
        </select>
        </div>
        <button type="submit" class="btn btn-danger">Submit</button>
    </form>
    </div>
</body>
</html>

KESIMPULAN
Bootstrap telah menyediakan class form yang responsive dan terlihat modern dan kita tinggal mengkreasikanya sesuai kita. Dan kita tidak memerlukan class yang begitu rumit dan sudah saya paparkan diatas. Jika sobat mengalami kesulitan silahkan berikan komentar. Sekian terima Kasih

REFERENSI : Malas Ngoding

TUTORIAL BOOTSTRAP DASAR LAINYA :  

• Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
• Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
• Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
• Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
• Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
• Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
• Bootstrap Part 7 : Membuat Icon Bootstrap
• Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
• Bootstrap Part 9 : Membuat List Dengan Bootstrap
• Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
• Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
• Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
• Bootstrap Part 13 : Membuat Form Dengan Bootstrap
• Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
• Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
• Bootstrap Part 16 : Mengenal Grid System Bootstrap

Belajar Bootstrap Part 12 : Membuat Navigation Bar Bootstrap

MEMBUAT NAVIGATION BAR BOOTSTRAP
Untuk membuat navigation bar dengan Bootstrap tidaklah sulit. Seperti pada tutorial - tutorial Bootstrap sebelumnya sobat hanya perlu menambah class - class yang sudah di sediakan oleh Bootstrap. Pada tutorial kali ini akan dijelaskan membuat navigasi yang memiliki dua warna, yaitu default dan inverse yang akan dilihat pada Belajar Bootstrap Part 12 : Membuat Navigation Bar Bootstrap

Navigation bar Bootstrap dibuat dengan menggunakan tag <nav>. Dan diletakkan dalam tag <bdy> html paling atas

MEMBUAT NAVIGATION BAR BOOTSTRAP

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 12 : Membuat Navigation Bar</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <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="http://www.script-kiddies22.blogspot.co.id">SCRIPT KIDDIES</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="http://www.script-kiddies22.blogspot.co.id">Home</a></li>
                <li><a href="#">Profil</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Tutorial</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
            </div>
            </nav>

            <h1>Membuat Navigation Bar Bootstrap <a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
</body>
</html>

Perhatikan contoh diatas, disini akan saya jelaskan sedikit masing-masing kegunaan dari class-class yang dalam membuat navigator Bootstrap. Dapat dilihat pada contoh diatas untuk membuat menu navigation Bootstrap gunakan class

<nav class="navbar navbar-default">

class "navbar-default" digunakan untuk membuat navigation bar dengan model standart. Sobat bisa menggantinya dengan "navbar-inverse" untuk membuat menu navigation bar Bootstrap dengan model gelap.

<div class="container-fluid">

Digunakan untuk membuat sisi menu navigation penuh atau full. Sobat bisa menggantinya menjadi

<div class="container">

Untuk membuat sisi menu navigation bar tidak penuh dapat kita gunakan class

<div class="navbar-header">

Digunakan untuk membuat bagian header dari menu navigation Bootstrap. "nabar-header" untuk mendefinisikan bagian header menu navigation. dan "navbar-brand" digunakan untuk mendefinisikan judul webiste.

<ul class="nav navbar-nav">
                <li class="active"><a href="http://www.script-kiddies22.blogspot.co.id">Home</a></li>
                <li><a href="#">Profil</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Tutorial</a></li>
            </ul>

Class diatas digunakan untuk membuat menu navigation.

<ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>

Class diatas digunakan untuk membuat link menu yang terletak pada bagian sebelah kanan dari menu navigation bar Bootstrap.

MEMBUAT MENU DROPDOWN PADA MENU NAVIGATION BAR BOOTSTRAP
Sobat juga bisa membuat menun dropdown pada menu navigation bar Bootstrap dengan cara berikut

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 12 : Membuat Navigation Bar</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <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="http://www.script-kiddies22.blogspot.co.id">SCRIPT KIDDIES</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="http://www.script-kiddies22.blogspot.co.id">Home</a></li>
                <li><a href="#">Profil</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Tutorial</a></li>
            <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">BBM</a></li>
                        <li><a href="#">WA</a></li>
                        <li><a href="#">FB</a></li>
            </ul>
            </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
            </div>
            </nav>

            <h1>Membuat Navigation Bar Bootstrap <a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
</body>
</html>

MENAMBAHKAN GAMBAR PADA MENU HEADER
Jika sobat ingin menambahkan gambar pada navbar brand. Sobat bosa mengikuti contoh membuat gambar pada navigation berikut

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

MEMBUAT NAVIGATION RESPONSIVE DENGAN BOOTSTRAP
Ada sebuah kelebihan pada Bootstrap. Yaitu sobat dapat membuat navigation yang responsive saat dijalankan dari smartphone atau bisa monitor yang resolusinya lebih kecil. Silahkan perhatikan pada contoh berikut ini

 <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 12 : Membuat Navigation Bar</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="http://www.script-kiddies22.blogspot.co.id">SCRIPT KIDDIES</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="http://www.script-kiddies22.blogspot.co.id">Home</a></li>
                <li><a href="#">Profil</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Tutorial</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">BBM</a></li>
                        <li><a href="#">WA</a></li>
                        <li><a href="#">FB</a></li>
            </ul>
            </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
            </div>
            </nav>

            <h1>Membuat Navigation Bar Bootstrap </h1>
</body>
</html>

ketika kita kecilkan

Perhatikan contoh diatas. Sobat juga dapat membuat form pada menu navigation bar adapun kegunaan dari

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only"> Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

Sebagai tombol yang muncul saat laman web dibuka dari monitor yang memiliki resolusi kecil seperti screenshot diatas

KESIMPULAN
Dengan adanya class nav pada Bootstrap ini kita dimudahkan untuk membuat navigation bar pada sebuah website dan kita suguhkan dengan tampilan yang rapi dan modern dan tentunya responsive di semua resolusi layar.

REFERENSI : Malas Ngoding

TUTORIAL BOOTSTRAP DASAR LAINYA :  

• Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
• Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
• Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
• Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
• Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
• Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
• Bootstrap Part 7 : Membuat Icon Bootstrap
• Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
• Bootstrap Part 9 : Membuat List Dengan Bootstrap
• Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
• Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
• Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
• Bootstrap Part 13 : Membuat Form Dengan Bootstrap
• Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
• Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
• Bootstrap Part 16 : Mengenal Grid System Bootstrap