memulai belajar pemrograman web dan internet

Pada artikel ini akan membahas tentang bagaimana untuk memulai langkah awal untuk menjadi seorang programmer. bahasa pemograman apa saja yang perlu dikuasai dalam pemograman web dan pemograman internet.

Definisi pemograman web

World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya. Hiperteks dilihat dengan sebuah program bernama browser web yang mengambil informasi (disebut "dokumen" atau “halaman web") dari server web dan menampilkannya, biasanya di sebuah monitor. Kita lalu dapat mengikuti pranala di setiap halaman untuk pindah ke dokumen lain atau bahkan mengirim informasi kembali kepada server untuk berinteraksi dengannya. Ini disebut "surfing" atau "berselancar" dalam bahasa Indonesia. Halaman web biasanya diatur dalam koleksi material yang berkaitan yang disebut “situs web".

Definisi Internet

Menurut Budhi Irawan (2005 : 69), Internet adalah suatu jaringan komputer global yang terbentuk dari jaringan-jaringan lokal dan regional yang memungkinkan komunikasi data antar komputer yang terhubung ke jaringan tersebut. Internet merupakan hubungan antar berbagai jenis komputer dan jaringan di dunia yang berbeda sistem operasi maupun aplikasinya, dimana hubungan tersebut memanfaatkan kemajuan media komunikasi (telepon dan satelit) yang menggunakan protokol standar dalam berkomunikasi yaitu protokol TCP/IP. Untuk dapat menggunakan fasilitas internet, komputer kita harus terhubung ke salah satu ISP (Internet Service Provider). ISP adalah perusahaan yang menyediakan layanan untuk menghubungkan komputer kita ke internet atau disebut juga sebagai pintu gerbang ke internet. Untuk itu, kita perlu mendaftarkan diri ke ISP untuk mendapatkan nama dan alamat di internet

Bahasa Pemograman yang perlu dikuasai dalam pemrograman web dan internet

1.HTML

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C). Versi terakhir dari HTML adalah HTML 5, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

2.CSS

Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yg ada di situs kita sekaligus memformat ulang situs kita. CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.

Keuntungan dari CSS yaitu Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturanaturan CSS tersebut untuk diterapakan pada seluruh dokumendokumen HTML pada halaman situs kita. User yang berbeda dapat mempunyai style-sheet yg berbeda pula. Ukuran dan kompleksitas document code dapat diperkecil.

pada saat ini sudah banyak framework css instant yang sangat mudah digunakan dan cepat dan sesainnya sudah kren. seperti salah satunya twitter Bootsrap

3.Javascript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukanmasukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Jquery adalah salah satu framework js . yang sudah dirancang dengan baik untuk penggunaan js lebih mudah dan simple.slah satunya membuat animasi loader dengan ajax akan lebih mudah megunakan jquery.

4.PHP

Menurut Didik Dwi Presetyo (2004 : 76), PHP merupakan bahasa scripting server-side, dimana pemrosesan datanya dilakukan pada sisi server. Sederhananya, serverlah yang akan menerjemahkan skrip program, baru kemudian hasilnya akan dikirim kepada client yang melakukan permintaan.

dengan php kita dapat menghubungkan dengan database. agar dapat melakukan proses dasar pada database sepert insert, update dan delete data.

apa itu web server ?

Web server adalah software yang menjadi tulang belakang dari world wide web (www). Web server menunggu permintaan dari client yang menggunakan br owser seperti Netscape Navigator, Internet Explorer, Modzilla, dan program browser lainnya. Jika ada permintaan dari browser, maka web server akan memproses permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan kembali ke browser. Data ini mempunyai format yang standar, disebut dengan format SGML ( standar general markup language). Data yang berupa format ini kemudian akan ditampilkan oleh browser sesuai dengan kemampuan browser tersebut. Contohnya, bila data yang dikirim berupa gambar, browser yang hanya mampu menampilkan teks (misalnya lynx) tidak akan mampu menampilkan gambar tersebut, dan jika ada akan menampilkan alternatifnya saja. Web server, untuk berkomunikasi dengan client -nya (web browser) mempunyai protokol sendiri, yaitu HTTP (hypertext transfer protocol ). Dengan protokol ini, komunikasi antar web server dengan client-nya dapat saling dimengerti dan lebih mudah. Seperti telah dijelaskan diatas, format data pada world wide web adalah SGML. Tapi para pengguna internet saat i ni lebih banyak menggunakan format HTML (hypertext markup language) karena penggunaannya lebih sederhana dan mudah dipelajari. Kata HyperText mempunyai arti bahwa seorang pengguna internet dengan web browsernya dapat membuka dan membaca dokumen -dokumen yang ada dalam komputernya atau bahkan jauh tempatnya sekalipun. Hal ini memberikan cita rasa dari suatu proses yang tridimensional, artinya pengguna internet dapat membaca dari satu dokumen ke dokumen yang lain hanya dengan mengklik beberapa bagian dari ha laman-halaman dokumen (web) itu. Proses yang dimulai dari permintaan webclient (browser), diterima web server, diproses, dan dikembalikan hasil prosesnya oleh web server ke web client lagi dilakukan secara transparan. Setiap orang dapat dengan mudah menget ahui apa yang terjadi pada tiap - tiap proses. Secara garis besarnya web server hanya memproses semua masukan yang diperolehnya dari web clientnya.

5.MySQL

Menurut Didik Dwi Prasetyo (2004 :18) MySQL merupakan salah satu database server yang berkembang di lingkungan open source dan didistribusikan secara free (gratis) dibawah lisensi GPL. MySQL merupakan RDBMS (Relational Database Management System) server. RDBMS adalah program yang memungkinkan pengguna database untuk membuat, mengelola, dan menggunakan data pada suatu model relational. Dengan demikian, tabel-tabel yang ada pada database memiliki relasi antara satu tabel dengan tabel lainnya.

dari penjelasan diatas dapat kita simpulkan bahwa semua bahasa pemograman baik itu termasuk dalam kategori client side maupun server side yang ada diatas. wajib di kuasai untuk menjadi seorang programmer berbasis web.

Membuat Form Login popup pada web

selamat datang di arsipbertuah blog. pada posting sne kali ini. ane akan membahas tentang cara membuat form login popup atau melayang. menggunakan Bootstrap. seperti yang kita ketahui Bootstrap adalah framework untuk mendesain sebuah aplikasi / sistem yang berbasis web. bootstrap memberikan kemudahan untuk kita dalam mendesain user interface pada web. yang telah di desain sendiri komponen- komponen HTML menggunakan CSS sehingga tampilan web lebih teratur dan rapi . dan dengan sentuhan javascrip yang sudah diatur sedemikin rupa akan membuat web yang kita buat lebih interaktif dengan user. salah satu komponen untuk membuat form login tampilan popup atau melayang adalah menggunakan salah satu komponen bootstrap yaitu Modal. Modal pada botstrap adalah sebuah activity dialog yang muncul di tengah layar.

pada artikel ini kita akan belajar membuat desain form login menggunakan modal Twitter Bootstrap. dengan tujuan hanya untuk membuat website atau sistem memiliki tampilan yang lebih kren dan interaktif dengan user. lihat kode basic modal bootstrap dibawah ini:

Basic Modal Bootstrap

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div> 

kode diatas adalah kode dasar dari dialog modal bootstrap. diatas bisa kita lihat ada beberapa kompone yang ada pada modal tersebut.

1.Button untuk aksi memanggil atau acuan untuk menampilkan modal

2.Header modal yaitu tempat memberikan judul misalnya.

3.Content yaitu tempat meletekan isi dari dari suatu dialog

4.footer yaitu biasanya tempat meletakkan buuton dan lain-lain

Membuat Form Login pop up

nah, untuk membuat form login menggunakan modal Bootstrap kita modif saja kode diatas seperi dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>belajar membuat form login menggunakan modal</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">
  <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Log in</button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Form Login</h4>
                  </div>
                  <div class="modal-body">
                    <form method="post" action="" class="form-horizontal">
                
              <div class="form-group">
                  <label for="nama" class="col-sm-2 control-label">email</label>
                  <div class="col-sm-10">
                  <input type="email" class="form-control" name="email" requered ></div>
            </div>
            <div class="form-group">
                  <label for="nama" class="col-sm-2 control-label">password</label>
                  <div class="col-sm-10">
                  <input type="password" class="form-control" name="pwd" requered ></div>
                  
            </div>
            <div class="form-group">
            <label class="col-sm-2"></label>
                  <div class="col-sm-10">
                    <a href="">lupa password ?</a>
                  </div>
            </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" name="s"class="btn btn-primary">LOGIN</button>
                  </div>
                     </form>
                </div>
              </div>
            </div>
            </div>
            <!-- Modal -->
</div>

</body>
</html> 

begitu gan contoh membuat form login pop up menggunakan modal bootstrap. silahkan kopas kode diatas untuk melihat hasilnya.tapi harus ada koneksi internet karena instalasi bootstrap pada kode diatas menggunakan CDN lihatlah pada tag head diatas. supaya bisa offline instal baca cara instalasi bootstrap disini .ane juga pernah buat seperti gambar ini gan.

begitulah hasilnya yang pernah ane buat. sekaian dari ane semoga dapat memberikan manfaat buat agan. selamat mencoba dan semoga sukses.

Koding PHP membuat nomor halaman / pagination

Belajar membuat pagination menggunakan php dan Bootstrap

selamat datang di arsipbertuah blog. pada posting kali ini ane akan membahas tentang bagaimana membuat nomor halaman atau lebih dikenal lagi dengan sebutan pagenation menggunakan bahasa pemograman PHP. pagination adalah sebuah sistem penomoran.tujuan membuat nomor halaman ini adalag agar mempersingkat list pada halaman web. contohnya pada sebuah tabel yang memiliki banyak data maka dengan pagination data tersebut tidak akan muncul semu kerena sudah dibagi-bagi menjadi beberapa halaman.pada umumnya  banyak sistem yang berbasis web pada saat ini dalam menampilkan data menggunakan pagination. untuk itu ane share cara membuat nomor halaman buat kita yang masih pemula dalam programming. untuk membuat pagination sederhana ini bisa dilakukan semua bahasa pemograman. tapi pada artikel ini ane menggunakan bahasa pemograman PHP karena sepertinya pada saat ini lebih banyak yang menngunakan php. dan untuk desainnya ane gunakan framework Bootstrap. karena Bootstrap sendiri sudah ada menyediakan komponen Pagination. hanya saja perlu di dalami lagi untuk menggunakan pagination tersebut menggunakan PHP. dan disini akan ane bagikan koding pagination serta koding php dan juga sebagai contoh pagnationnya pada sebuah tabel data dari mysql. contohnya seperti gambar dibawah ini:

pada gambar diatas ane membuat sebuah tabel yang isinya data pegawai. dapat dilihat disana hanya ada 3 halam karena datanya sedikit.untuk membuat tampilan tabel yang menggunakan pagination tersebut koding phpnya seperti berikut :

<div class="col-md-12">
  <?php 
  //menghitung data yang akan di tampilkan pada tabel
  $perhalaman=5;
  $data=mysql_query("select * from pegawai");
  $jum=mysql_num_rows($data);
  $halaman=ceil($jum/$perhalaman);
  $page=(isset($_GET['page']))?(int)$_GET['page']:1;
  $start=($page - 1) * $perhalaman;
  ?>

<!--start koding untuk menampilkan tabel dan isinya-->
  <table class="table table-responsive">
    <thead>
      <tr>
        <th>no</th>
        <th>profil</th>
        <th>nama</th>
        <th>jabatan</th>
        <th>email</th>
        <th>tgl lahir</th>
        <th>jenis kelamin</th>
        <th>telp</th>
        <th>alamat</th>
      </tr> 
    </thead>
  
       <?php 
       $data2 = mysql_query("select * from pegawai LIMIT $start,$perhalaman");
        ?>
        <tbody>
          <tr>
            <td><?php echo "$i"; ?></td>
            <td><img src="img/<?php echo "$h[dp]"; ?>" width="60px" height="60px" class="img-circle"></td>
            <td><?php echo "$h[nama]"; ?></td>
            <td><?php echo "$h[jabatan]"; ?></td>
            <td><?php echo "$h[email]"; ?></td>
            <td><?php echo "$h[tgl_lahir]"; ?></td>
            <td><?php echo "$h[jk]"; ?></td>
            <td><?php echo "$h[telp]"; ?></td>
            <td><?php echo "$h[alamat]"; ?></td>

            <?php if ($hk==1) { ?>
              <td> <a href="pegawai-hapus.php?id=<?php echo $h['id_peg']; ?>"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-trash" ></span></button></a></td>
            <?php } ?>
            
          </tr>
        </tbody>
        <?php } ?>
  </table>

<!-- star koding nomor halaman-->
  <div class="col-md-12" align="center">
    <ul class="pagination">
    <?php if ($page>1) { ?>
    <li>
      <a href="?page=<?php echo $page - 1; ?>" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
      <?php }else{ ?> <li class="disabled">
      <a href="?page=<?php echo $page; ?>" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li> <?php } ?>
    <?php 
    
    for ($x=1; $x<=$halaman ; $x++) {
      if ($page==$x) {
        $ini="active";
      }else{$ini="";}
      ?>
    <li class="<?php echo "$ini"; ?>"><a href="?page=<?php echo "$x"; ?>"><?php echo "$x"; ?></a></li>
   <?php  } ?>
    <li>
      <a href="?page=<?php echo $page + 1; ?>" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
  </div>

</div>

karena kodingnya lumayan panjang pada koding diatas ane hanya menggambil kode tabel dan paginationnya saja. untuk agan yang ingin membuat nomor halaman dari koding diatas ane sarankan untuk meletakan dalam tag <body> dan jangan lupa pada <head> gunakan Bootsrap. belum tau cara instalansi Bootsrap baca disini. dan disana untuk datanya ane ambil dari database project ane . jadi ane sarankan sesuaikan Query mysqlnya dengan database punya agan yang akan agan tampilkan di tabel. silahkan ajukan pertanyaan pada komen dibawah ini .terimakasih atas kunjungannya semoga memberi manfaat.

Belajar web membuat MENU TAB

selamat datang di arsipbertuah blog. tutorial ane kali ini ane akan membahas tentang cara untuk membuat menu tab pada web. menu Tab adalah sederetan menu yang ditandai dengan teks. terdiri dari tab File, Insert, Page Layout, dll. Ribbon adalah area yang digunakan untuk menampilkan tab dan menu dari tab yang aktif. Sedangkan Group adalah kelompok menu dalam tiap Ribbon yang memiliki kesamaan fungsi.untuk membuat tab ini bisa olah menggunakan css. tpi ada cara yang lebih mudah dan cepatnya yaitu mengunakan Bootsrap.

Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Membuat TAB menggunakan Bootsrap sangatlah mudah codenya bisa di ambil di website resminya www.getbootsrap.com  pada menu javascrip disana juga bnyak komponen-komponen yang sudah jadi yang telah menggunakan javascript sehingga web kita akan jadi lebih interaktiv.

Cara membuat menu tab menggunakan bootstrap yang pertama harus agan ketahui adalah cara instalansi bootsrap jika agan belum tau bisa baca di cara instalansi bootsrap online dan ofline.

lihatlah contoh code html menggunakan menu tab dibawah ini. silahkan di ambil dan digunakan untuk keperluan agan.

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>belajar membuat menu tab</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">
  <div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">TAB 1</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">TAB 2</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">TAB 3</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">TAB 4</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
    	<h1> Hallo ini adalah Isi tab satu</h1>
    </div>

    <div role="tabpanel" class="tab-pane" id="profile">
    <h1> dan ini adalah Isi tab dua</h1></div>

    <div role="tabpanel" class="tab-pane" id="messages">
   	<h1> welcome ini Isi tab tiga</h1></div>

    <div role="tabpanel" class="tab-pane" id="settings">
    <h1> terakhir ini contoh Isi tab empat</h1></div>
  </div>

</div>
</div>

</body>
</html>

sekian kodingnya gan. semoga dapat memberikan manfaat buat agan. terimakasih atas kunjungannya. silahkan bertanya pada kolom komentar dibawah ini.

Belajar cara instalasi bootstrap

Definisi Bootstrap

selamat datang di arsipbertuah blog. pada posting ane ini ane akan baerbagi kepada agan yang masih pemula untuk belajar desain web menggunakan bootstrap.bootstrap adalah sebuah framework yang menyediakan komponen interface dasar pada web yang telah dimodifikasi sedemikian rupa untuk mempermudah dalam mendesain atau merancang tampilan web dengan cepat dan desain komponen yang kren daripada komponen default html. bootsrap juga sarana untuk membengun desain web yabg responsive, rapi dan membuat tampilan dasar HTML lebih teratur dengan komponen lain. Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.selain itu bootstrap juga berkolaborasi dengan javascript yang mana dapat membuat tampilan web menjadi lebih interaktif kepada usernya.

Cara menggunakan atau instalansi Bootstrap

untuk menggunakan bootsrap ada dua cara yang sering digunakan yaitu

1. instalansi dengan cara mendownload komponen bootsrap

cara ini agan bisa juga digunakan saat pc dalam keadaan offline. karena semua komponen bootsrap yang sudah dirancang sedemikin rupa kedalam bentuk dokumen CSS dan javascript bisa agan simpan di directori pc agan.

1.cara pertama agan harus mendownload botrap di websitenya www.getbootstrap.com

2.setelah download selesai extract hasil download tadi yang masih terbungkus rar dan letakkan semua folder yang ada ke sebuah folder tempat project agan.

3.sekarang buat sebuah halaman html seperti dibawah ini simpan di dalam folder project agan

<html>
<head>
<title>Belajar bootsrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="" href="css/bootstrap.min.css">
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/bootstrap.js"></script>
</head>
<body>

 <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

</body>
</html>

dan jalankan di browser

2. cara intalansi menggunakan CDN

CDN (Content Delivery Network)adalah sebuah sistem jaringan server untuk mendistribusikan konten yang ada dalam sebuah aplikasi/web ke berbagai pengakses/pengguna di berbagai belahan dunia agar data/konten yang dikirim diterima lebih cepat. namun cara ini agan harus belajar dalam kondisi online. perbedaan dengan instalansi diatas hanya pada pemaggilan file css dan javasciptnya saja. perhatikan didalam tag <head> pada kode diatas, css bootstrap akan di panggil memlalui url folder sedangkan menggunakan CDN file css dan jsnya akan dipanggil melalui url internet. jadi keuntungan menggunakan CDN kita tidak perlu lagi mendownload lebih simple . lihat contoh pemanggilan css dan js pada koding html dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

sekian penjelasan dari ane semoga dapat memberikan manfaat.terimakasih atas kunjugan agan. silahkan bertanya pada kolom koment dibawah ini.