• Aucun résultat trouvé

[PDF] Tutorial bootstrap bahasa indonesia pdf | Cours Bootstrap

N/A
N/A
Protected

Academic year: 2021

Partager "[PDF] Tutorial bootstrap bahasa indonesia pdf | Cours Bootstrap"

Copied!
9
0
0

Texte intégral

(1)

BOOTSTRAP dan JQUERY

Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan

tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan

mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah

membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT. Kita bisa memantau perkembangan proyek Bootstrap melalui web resminya di getbootstrap.com dan Githubnya di https://github.com/twbs/bootstrap. Jujur saja, saya sendiri sangat terbantu oleh Bootstrap. Banyak sekali tampilan web yang telah saya buat dengan bantuan Bootstrap, bahkan web CodePolitan yang ini pun kami kembangkan tamplatenya dengan Bootstrap. Bootstrap sangat memanjakan kita dalam membuat tampilan web dan membuat kerja menjadi lebih cepat. Bagaimana tidak, kita tidak lagi harus memulai semuanya dari nol ketika membuat tampilan web. Bootstrap telah menyediakan banyak sekali class CSS dan plugin JavaScript yang bisa langsung kita pakai untuk membantu mempermudah kita membuat halaman web. Karena kemudahaan

penggunaan, banyaknya komponen dan kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan di dunia.

Saat tulisan ini dibuat sebenernya udah ada Bootstrap 4, namun masih versi Alpha. So, kita pakai saja dulu Bootstrap 3-nya yang udah stabil untuk memulai belajar sambil menunggu Bootstrap 4 versi stabilnya keluar.

Sebelum kita akan mulai bagaimana cara menggunakan Bootstrap dalam membuat halaman web, kita perlu tahu dulu bagaimana cara Bootstrap itu bekerja. Sehingga nanti kita bisa mengoptimalkan manfaatnya buat pembuatan web kita. Jadi pada dasarnya Bootstrap merupakan sebuah kumpulan class CSS dan plugin JavaScript yang sudah siap pakai.

Biasanya kan ketika kita membuat sebuah tampilan web kita akan membuat file HTML yang di dalamnya berisi berbagai macam TAG HTML.

Misalnya saja ketika kita ingin membuat sebuah tombol berwarna merah seperti berikut:

Maka yang biasa kita lakukan adalah membuat sebuah TAG HTML yaitu TAG BUTTON kemudian memberikan CLASS, contohnya tombol-merah, seperti berikut:

<button type="button" class="tombol-merah">CONTOH TOMBOL</button>

Selanjutnya kita harus membuat file CSS untuk mengatur bagaimana penampilan dari dari CLASS atau ID button yang telah kita buat tadi. Misalnya seperti berikut:

(2)

.tombol-merah { background: #c0392b; color: #ffffff; border: 1px solid #c0392b; padding: 20px 30px; }

Nah, dengan Bootstrap kita tidak lagi akan memulainya dari nol. Tidak lagi harus menulis semua kode CSS, terutama yang standar, karena itu sudah dilakukan oleh Bootstrap. Kita hanya perlu menuliskan kode CSS yang kita butuhkan saja yang tidak disediakan oleh Bootstrap. Umpamanya kita ingin membuat sebuah tombol, maka kita bisa melihat bahwa Bootstrap telah menyediakan 6 jenis tombol yang bisa kita gunakan.

Kalau kita ingin membuat tombol merah, kita cukup memberikan class btn dan btn-danger pada TAG BUTTON yang ingin kita buat merah, maka simsalabim langsung berubah jadi merah dengan indah, bahkan tanpa kita turun tangan untuk menulis kode CSS-nya.

<button type="button" class="btn btn-primary">CONTOH TOMBOL</button> Hasilnya seperti berikut:

Nggak kalah gaul dan ketche kan tombolnya? Hehehe... :D

Wah tombolnya kecil banget, saya pengen tombolnya agak besar

Yasudah tambahkan class btn-lg pada tombol tersebut, maka akan langsung berubah jadi besar tombolnya. Karena Bootstrap punya 4 jenis ukuran untuk tombol, tinggal yang mana yang kita gunakan, tergantung kebutuhan.

<button type="button" class="btn btn-primary btn-lg">CONTOH TOMBOL</button> Hasilnya:

Oke, intinya seperti itu. Jadi si Bootstrap itu sudah menyediakan banyak sekali class yang bisa kita gunakan, mulai dari tombol, form, tabel, grid, nav, list, dan lain sebagainya. Tapi bagaimana jika dari tombol yang disediakan Bootstrap tidak ada yang saya inginkan, atau saya ingin memodifnya?

Nah disitulah baru kita menulis kode CSS tambahan kita. Karena sejatinya Bootstrap hanyalah sebuah framework yang memungkinkan untuk mempermudah kerja kita, namun

(3)

pasti ada saja sesuatu yang tidak akan ada pada Bootstrap yang kita butuhkan. Tapi paling tidak kerjaan kita pasti menjadi lebih cepat dan terbantu.

Oke, saya paham. Jadi sekarang bagaimana caranya saya bisa memulai menggunakan Bootstrap?

Baik, untuk bisa menggunakan Bootstrap berikut ini langkah-langkahnya:

1. Download File Bootstrap

Untuk memulainya, pertama-tama kita harus mendownload file Bootstrap terlebih di http://getbootstrap.com/getting-started/.

(4)

Kemudian klik tombol Download Bootstrap yang paling kiri. FYI, di situ kan ada beberapa jenis file Bootstrap yang bisa didownload, untuk sementara abaikan saja dulu. Dua tombol sisanya itu merupakan pembahasan yang terpisah :D

(5)

Setelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama bootstrap-3.3.6-dist.zip.

2. Ekstrak File Bootstrap

Selanjutnya ekstraklah file Bootstrap yang telah didownload tadi (bootstrap-3.3.6-dist.zip) kemudian simpan di sebuah folder tertentu. Akan muncul sebuah folder dengan nama bootstrap-3.3.6-dist dan di dalamnya ada beberapa folder lagi yaitu css, js dan fonts. Jika file Bootstrap yang kamu download sama versinya dengan saat tulisan ini dibuat, maka kurang lebih seperti berikut isi file bootstrap-3.3.6-dist.zip yang telah diekstrak tadi. bootstrap-3.3.6-dist/ ├── 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

3. Buatlah Sebuah File

Selanjutnya, buatlah sebuah file sebagai bahan percobaan. Misalnya dengan nama

index.html, simpan file tersebut di dalam folder bootstrap-3.3.6-dist tadi, kemudian tuliskan kode berikut:

<!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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<title>Bootstrap 101 Template</title> <!-- Bootstrap -->

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

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

(6)

<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Hello, world!</h1>

<p><button class="btn btn-primary btn-lg">SAMPLE BUTTON</button></p> </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></s cript>

<!-- Include all compiled plugins (below), or include individual files as needed -->

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

</html>

Kode di atas merupakan format standar Bootstrap. Yang perlu diperhatikan adalah:

1. Pastikan link stylesheet Bootstrap mengarah pada path yang tepat dimana file CSS Bootstrap berada, relative terhadap file html yang memanggilnya.

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

Karena kebetulan file index.html yang kita buat berada di dalam folder bootstrap-3.3.6-dist dan di dalamnya langsung bersisi file Bootstrap, maka kita tulis css/bootstrap.min.css. 2. Pastikan juga script JavaScript Bootstrap mengarah pada path yang tepat dimana file JavaScript Bootstrap berada, relative terhadap file html yang memanggilnya. <script src="js/bootstrap.min.js"></script>

Karena pada contoh kita, file index.html yang kita buat di dalam folder bootstrap-3.3.6-dist dan di dalamnya sudah ada file Bootstrap, maka path-nya bisa kita tulis js/bootstrap.min.js. Jika nanti kamu membuat file index.html nya tidak seperti path yang kita buat di atas nggak usah masalah, tinggal disesuaikan saja path-nya.

3. Pastikan JQuery terpanggil

Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So, pastikan JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas, kita panggil JQuery langsung dari library-nya Google: <script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></s cript>

(7)

Sebenernya kamu bisa juga sih memanggil JQuery-nya offline (karena mungkin aplikasi kamu tidak harus online) yaitu dengan download file JQuery-nya terlebih dahulu, itu bebas-bebas saja.

Oke, jika semuanya sudah aman, coba silahkan buka file index.html yang tadi dibuat dengan menggunakan browser. Jika tampilannya sudah seperti berikut, maka itu artinya kamu telah berhasil menginstall Bootstrap pada halaman web yang kamu buat.

Oke demikianlah tutorial cara penggunaan Bootstrap kali ini. Semoga bermanfaat dan dapat membantu buat temen-temen Coders yang mau belajar menggunakan Bootstrap. Jika ada yang kurang jelas atau yang perlu ditambahkan dari tutorial saya di atas, silahkan dituliskan saja ya di kolom komentar :D

(8)

MENGETAHUI APA JQUERY .

jQuery adalah Javascript Library, Kumpulan kode/fungsi Javascript siap pakai, sehingga

memudahkan dan mempercepat kita dalam membuat kode javascript. Dari pengertian jQuery di atas, Secara standar apabila kita membuat kode javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami, misalnya fungsi javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut:

functionstripe (id){ var even = false;

var evenColor = arguments[1] ? arguments[1] : “#fff”; var oddColor = arguments[2] ? arguments[2] : “#eee”; var table = document.getElementById(id);

if (!table) {return;}

var tbodies = table.getElementsByTagName(“tbody”); for (var h=0; h < tbodies.length; h++) {

var trs = tbodies[h].getElementsByTagName(“tr”); for (var i=0; i < trs.length; i++){

if (! hasClass(trs[i]) && ! trs[i].style.backgroundColor){ var tds = trs[i].getElementsByName(“td”);

for (var j=0; j<tds.length; j++){ var mytd=tds[j];

if (!hasClass(mytd) && ! mytd.style.backgroundColor){ mytd.style.backgroundColor=even ? evenColor:oddColor; } } } } }

(9)

}

Nah disinilah peran/kemampuan jQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam Library tersebut, menariknya dengan kode jQuery kita hanya memerlukan satu/dua baris untuk membuat warna selang-seling pada suatu tabel, berikut kode sederhana jQuery:

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);

Buset, ringkas banget kan jika kita menulis dengan kode jQuery? Oke, pada kesimpulannya kode jQuery menyederhanakan kode javascript. Hal ini sesuai dengan slogan kode jQuery yaitu “Write less, do more” yang artinya sedikit menulis tetapi melakukan banyak hal.

Références

Documents relatifs

L’objectif de la présente étude consiste à valider une échelle de mesure de la conscience de l’environnement d’affaires, un concept qui se définit comme l’ensemble des savoirs

The explanatory capacity shared by environmental characteristics and physiological indicators tended to be particularly low for LASSO models using cortisol as a

La crise financière mondiale mène à une baisse du volume des flux financiers, qui touche particulièrement certains pays émergents pour lesquels les investisseurs

Représentations citadines sur le milieu rural, les agriculteurs et agricultrices : principaux résultats d’un sondage réalisé à Rennes le 8 mars 1988.?. REPRESENTATIONS CITADINES sur

Les problèmes étudiés dans cette thèse correspondent au régime où Pe est grand (effets de l’advection important comparé à la diffusion, c’est-à-dire régime turbulent) et où

De ce fait, l’excrétion des bactéries pathogènes zoonotiques dans les matières fécales des animaux de production, leur survie dans les fumures entreposées, les fumures épandues

Couples' support-related communication, psychological distress, and relationship satisfaction among women with early stage breast cancer. Partner unsupportive responses,

Dans la présente recherche, le terme récidive sexuelle est défini comme étant toutes nouvelles condamnations de nature sexuelle inscrite à la fiche criminelle de l’individu (fiche