Di Bagian 1 dari seri ini, kami menyiapkan proyek HTML 5 dasar menggunakan Netbeans sebagai IDE kami, dan kami juga menyajikan beberapa elemen yang telah ditambahkan dalam spesifikasi bahasa baru ini.
Dalam beberapa kata, Anda dapat memikirkan jQuery sebagai pustaka Javascript lintas-browser dan lintas-platform yang dapat sangat menyederhanakan skrip sisi klien di halaman HTML. Di sisi lain, Bootstrap dapat digambarkan sebagai kerangka kerja lengkap yang mengintegrasikan alat HTML, CSS, dan Javascript untuk membuat halaman web yang ramah seluler dan responsif.
Dalam artikel ini, kami akan memperkenalkan Anda ke jQuery dan Bootstrap , dua utilitas tak ternilai untuk menulis HTML 5 kode dengan lebih mudah. Keduanya jQuery dan Bootstrap dilisensikan di bawah lisensi MIT dan Apache 2.0, yang kompatibel dengan GPL dan karenanya merupakan perangkat lunak bebas.
Harap dicatat bahwa konsep dasar HTML, CSS, dan Javascript tidak tercakup dalam artikel seri ini. Jika Anda merasa perlu memahami topik ini terlebih dahulu sebelum melanjutkan, saya sangat merekomendasikan tutorial HTML 5 di W3Schools.
Menggabungkan jQuery dan Bootstrap ke dalam Proyek Kami
Untuk mengunduh jQuery, buka situs web proyek di http://jquery.com dan klik tombol yang menampilkan pemberitahuan untuk versi stabil terbaru.
Kami akan menggunakan opsi kedua ini dalam panduan ini. JANGAN klik pada link download belum. Anda akan melihat bahwa Anda dapat mengunduh .min.js yang dikompresi atau .js yang tidak dikompresi versi jQuery.
Yang pertama dimaksudkan khusus untuk situs web dan membantu mengurangi waktu buka halaman (sehingga Google akan memberi peringkat situs Anda lebih baik), sedangkan yang kedua sebagian besar ditargetkan pada pembuat kode untuk tujuan pengembangan.
Demi singkatnya dan kemudahan penggunaan, kami akan mengunduh file terkompresi (juga dikenal sebagai diperkecil ) versi skrip folder di dalam struktur situs kami.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Sekarang saatnya menambahkan Bootstrap untuk proyek kami. Buka http://getbootstrap.com dan klik Unduh Bootstrap. Pada halaman berikutnya, klik opsi yang disorot seperti yang ditunjukkan di bawah ini untuk mengunduh komponen yang diperkecil, siap digunakan, dalam file zip:
Saat unduhan selesai, buka Unduhan folder, unzip file, dan salin file yang disorot ke direktori yang ditunjukkan di dalam proyek Anda:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Sekarang salin file CSS dan JS ke folder masing-masing dalam struktur proyek.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Jika Anda sekarang memperluas struktur situs Anda di Netbeans, itu akan terlihat sebagai berikut:
Menambahkan Referensi
Itu memang terlihat bagus, tetapi kami masih belum memberi tahu index.html kami file untuk menggunakan salah satu file tersebut. Untuk mempermudah, kita akan mengganti isi file tersebut dengan file html barebone terlebih dahulu:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Kemudian, cukup drag dan drop setiap file dari bagian navigator proyek ke kode, di dalam </head> tag, seperti yang Anda lihat di screencast berikut. Pastikan referensi ke jQuery muncul sebelum referensi ke Bootstrap karena yang terakhir bergantung pada yang pertama:
Itu saja – Anda telah menambahkan referensi ke jQuery dan Bootstrap, dan sekarang dapat mulai menulis kode.
Menulis Kode Responsif Pertama Anda
Sekarang mari tambahkan bilah navigasi dan letakkan di bagian atas halaman kita. Jangan ragu untuk menyertakan 4-5 tautkan dengan teks tiruan dan jangan tautkan ke dokumen apa pun untuk saat ini – cukup masukkan cuplikan kode berikut ke dalam badan dokumen.
Jangan lupa meluangkan waktu untuk berkenalan dengan fitur pelengkapan otomatis di Netbeans, yang akan menunjukkan kelas yang disediakan oleh Bootstrap saat Anda mulai mengetik.
Di jantung cuplikan kode di bawah ini adalah wadah Bootstrap class, yang digunakan untuk menempatkan konten di dalam wadah horizontal yang akan diubah ukurannya secara otomatis tergantung pada ukuran layar tempat konten tersebut dilihat. Yang tidak kalah pentingnya adalah kelas container-fluid, yang akan memastikan bahwa konten di dalamnya akan menempati seluruh lebar layar.
<div class="container">
<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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Fitur pembeda lainnya dari Bootstrap adalah menghilangkan kebutuhan akan tabel dalam kode HTML. Sebagai gantinya, ia menggunakan sistem grid untuk menata konten dan membuatnya terlihat benar baik di perangkat besar maupun kecil (dari ponsel hingga layar desktop atau laptop besar).
Dalam sistem grid Bootstrap, tata letak layar dibagi menjadi 12 kolom:
Penyiapan tipikal terdiri dari penggunaan 12 kolom tata letak dibagi menjadi 3 kelompok masing-masing 4 kolom, sebagai berikut:
Untuk menunjukkan fakta ini dalam kode, dan untuk menampilkannya seperti itu mulai dari perangkat berukuran sedang (seperti laptop) ke atas, tambahkan kode berikut di bawah </nav> penutup tag:
...
</nav>
<div class="row">
<div class="col-md-4">This is the text in GROUP 1</div>
<div class="col-md-4">This is the text in GROUP 2</div>
<div class="col-md-4">This is the text in GROUP 3</div>
</div>
</div> <!--Closing tag of the container class -->
Anda mungkin telah memperhatikan bahwa kelas kolom di kisi Bootstrap menunjukkan tata letak awal untuk ukuran perangkat tertentu ke atas, seperti md dalam contoh ini adalah singkatan dari medium (yang juga mencakup lg , atau perangkat besar).
Untuk perangkat yang lebih kecil (sm dan xs ), konten div ditumpuk dan muncul satu di atas yang berikutnya.
Dalam screencast berikut, Anda dapat melihat bagaimana tampilan halaman Anda sekarang. Perhatikan bahwa Anda dapat mengubah ukuran jendela browser untuk menyimulasikan ukuran layar yang berbeda setelah meluncurkan proyek menggunakan tombol Jalankan proyek seperti yang kita pelajari di Bagian 1 .
Ringkasan
Selamat! Anda pasti sudah menulis halaman yang sederhana, namun fungsional, dan responsif sekarang. Jangan lupa untuk memeriksa situs web Bootstrap untuk lebih mengenal fungsionalitas kerangka kerja yang hampir tak terbatas ini.
Seperti biasa, jika Anda memiliki pertanyaan atau komentar, jangan ragu untuk menghubungi kami menggunakan formulir di bawah ini.