Di dalam Bagian 1 dari seri ini, kami membuat 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.
Pada artikel ini kami akan memperkenalkan Anda kepada jQuery dan Bootstrap, dua utilitas tak ternilai untuk menulis kode HTML 5 dengan lebih mudah. Baik jQuery dan Bootstrap dilisensikan di bawah lisensi MIT dan Apache 2.0, yang kompatibel dengan GPL dan dengan demikian merupakan perangkat lunak bebas.
Harap dicatat bahwa konsep dasar HTML, CSS, dan Javascript tidak tercakup dalam artikel apa pun dari seri ini. Jika Anda merasa perlu mempercepat topik ini terlebih dahulu sebelum melanjutkan, saya sangat merekomendasikan
tutorial HTML5 di W3Schools.Untuk mengunduh jQuery, buka situs web proyek di http://jquery.com dan klik tombol yang menampilkan pemberitahuan untuk versi stabil terbaru.
Pada saat penulisan ini adalah v1.11.3 untuk kompatibilitas browser penuh (termasuk Internet Explorer versi 6, 7, dan 8) atau v2.1.4 jika Anda yakin pengunjung Anda tidak akan menggunakan versi IE tersebut.
Kami akan menggunakan opsi kedua ini dalam panduan ini. JANGAN klik pada tautan unduhan (ilustrasi berikut hanya dimaksudkan untuk menunjukkan opsi mana yang tepat).
Anda akan melihat bahwa Anda dapat mengunduh file terkompresi .min.js
atau tidak terkompresi .js
versi jQuery. Yang pertama dimaksudkan khusus untuk situs web dan membantu mengurangi waktu buka halaman (dan dengan demikian 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) ke folder skrip di dalam struktur situs kami.
Klik kanan pada tautan untuk versi produksi terkompresi dan pilih Simpan tautan sebagai…, dan kemudian arahkan ke direktori yang ditunjukkan (Anda mungkin ingin merujuk ke jalur yang ditunjukkan tempat kami memilih untuk menyimpan proyek kami Bagian 1).
Terakhir, klik Menyimpan di bagian bawah dialog saat ini:
Sekarang saatnya untuk menambahkan Bootstrap untuk proyek kami. Pergi ke 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-3.3.5-dist.zip. # cd bootstrap-3.3.5-dist.
# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles. # cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts. # cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts.
Jika Anda sekarang memperluas struktur situs Anda di Netbeans, itu akan terlihat sebagai berikut: