PENGANTAR
Anatomi CSS
Bentuk umum penulisan CSS terdiri dari selector, property dan value. Selector merupakan nama tag
HTML atau kelas yang akan diatur propertynya. Property adalah bagian dari karakteristik suatu
objek, misalnya warna, warna latar belakang, forn, dan sebagainya. Anatomi dari CSS dapat
digambarkan sebagai berikut:
contoh :
h1 { color: blue; }
h2 { font-family: “Arial”;
text-align:”center”;
font-size:”40px”;
color:”red”
}
selector :
Untuk memilih dan memanipulasi elemen spesifik pada HTML
Elemen HTML dipilih berdasarkan tag, id, class maupun pola (pattern)
Semakin kompleksstruktur HTML, selector juga semakin kompleks/ spesifik
Penempatan CSS
Embed
<style></style>
Inline
<p style=”color:red;”> </p>
External
<link rel=”stylesheet” href=”style.css”>
Bootstrap
Bootstrap merupakan sebuah pustaka framework CSS yang di buat khusus untuk bagian
pengembangan front-end website. Bootstrap menyediakan kumpulan komponen class
interface dasar yang di rancang sedemikian rupa untuk menciptakan tampilan yang lebih
menarik, terlihat bersih dan ringan. Bootstrap merupakan salah satu framework HTML, CSS
dan javascript yang paling populer di kalangan web developer. Saat ini hampir semua web
developer menggunakan Bootstrap untuk membuat tampilan front-end yang menyebabkan
pembuatan program web menjadi lebih mudah dan sangat cepat untuk diselesaikan, kita
hanya perlu menambahkan class-class tertentu pada tag-tag HTML kita untuk mengubah
bentuk tampilannya, misalnya membuat tombol, grid, navigasi dan lain-lain.
2. Menyisipkan CSS
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
CARA KERJA
1. Jalankan dahulu perangkat lunak Apache Web Server malalui XAMPP Control Panel.
2. Jalankan juga perangkat lunak MySQL malalui XAMPP Control Panel.
3. Jalankan perangkat lunak Visual Studio Code Editor dan aktifkan folder kamu tersebut.
4. Salin program ketiga program di atas simpan dengan nama dan tempat yang sesuai.
5. Lakukan penelitian laboratorium sesuai soal-soal di bawah ini.
NAMA : ____________________________
CSS, Bootstrap dan DataTables
Projek Penelitian
Salin program-program di atas (3 program), ujilah sampai program tersebut dapat berjalan
dengan baik, kemudian buatlah laporan penelitian (responsi) untuk soal-soal penelitian di
bawah ini.
Soal Penelitian :
1. Buatlah kelas Tabel seperti Percobaan 6, namun hasil yang ditampilkan sudah dilengkapi
dengan fitur Pagination, Sorting dan Seraching memanfaatkan plugin jQuery DataTables.
Dan buat pembahasan cara membuatnya:
a. Jelaskan secara sistematis (berurutan) langkah-langkah yang harus dilakukan.
b. Screen shoot source code dan berikan pembahasan/ penjelasan cara kerjanya.
c. Screen shoot hasil eksekusi memakai tabel yang cukup banyak kolom dan barisnya
(minimal 5 kolom dan 50 baris data).
2. Buatlah hasil tampilan yang berbeda (bebas) dengan memakai bootstrap dan berikan
penjelasan dilengkapi dengan screen shoot kode program maupun hasilnya mengenai
bagaimana cara membuatnya.