modulll

1 SMKN 1 KENDARI KELAS XI/XII TKJ/RPL Dosen Pembimbing Lapangan ZILA RAZILU S.Pd., M.Pd Sulis Tika Yuni Nanang Rezki Nurul Fikri Ikram Harjun Laisa Eko Prayuda Pemprograman Web & Perangkat Bergerak

Penulis : RPL SMKN 1 KENDARI Perancang sampul : 1. Nanang 2. Rezki Nurul Fikri 3. Sulis Tika Yuni 4. Ikram Hrajun Laisa 5.Eko Prayuda Tahun Terbit : 2023/2024 Penerbit : SMKN 1 KENDARI Alamat : Jln. Jenderal Ahmad Yani N0.12

ii DAFTAR ISI Daftar isi ………………………………………………………………………………..ii Bab 1 PENGENALAN HTML 1.1. Pengenalan ke HTML …………………………………………………………………... 2 1.2. Membuat berkas HTML pertama …………………………………………………..3 1.3. Struktur dasar HTML ………………………………………………………………….... 4 1.4. Identifikasi Elemen pada halaman Website ……………………………........ 5 1.5. Atribut HTML ………………………………………………………………………........... 6 1.6. Paragraf ……………………………………………………………………………... ………. 7 1.7. Heading ……………………………………………………………………………............... 8 1.8. Header, Footer, Main dan Nav ………………………………………………..…… 9 1.9. Elemen dan Atribut pada Tabel ……………………………………………………10 Uji Kompetensi …………………………………………………………………………............ 11 Bab 2 PENGENALAN CSS 3.1. Pengenalan ke Styling …………………………………………………………………. 12 3.2. Keuntungan dan Cara Kerja CSS ……………………………………………….…. 13 3.3. Menuliskan, Melampirkan Aturan Styling pada Dokumen HT………..14 3.4. Menulis Rules pada Berkas CSS ……………………………………………………..15 3.5. Menghubungkan Berkas CSS dengan HTML …………………………………16 Uji Kompetensi ……………………………………………………………………………………..17 Bab 3 JAVASCRIPT BASIC 5.1. Perkenalan JavaScript ……………………………………………………………………..18 5.2. Menuliskan Syntax Javascript pada HTML ………………………………………19 5.3. Comment ………………………………………………………………………………. ……….20 5.4. Variabel …………………………………………………………………………………………….21 5.5. Tipe Data ………………………………………………………………………………………….22 5.6. Arrays dan Objek ……………………………………………………………………………...23 5.7. Operator Komparasi ……………………………………………………………...…………24 5.8. If/Else Statement ……………………………………………………………………………...25 5.9. Loop …………………………………………………………………………………………………26 5.10.Function ……………………………………………………………………………………………27 Uji Kompetensi …………………………………………………………………………………………28 Bab 4 PENGENALAN PHP 6.1. Pengertian dan Fungsi PHP dalam Pemograman Web ………………………29 6.2. Tipe Data dan Variabel ………………………………………………………………………..30 6.3. Perulangan …………………………………………………………………………………………..31 6.4. Fungsi, ……………. …………………………………………………………………………………..32 6.5. Array …………………………………………………………………………………………………….33 Ujian Kompetensi …………………………………………………………………………………….....34 Bab 5 BASIS DATA 7.1. Pengenalan dan fungsi Xampp ……………………………………………………… 35 7.2. Installasi Xampp OS Windows ……………………………………………………….. 36 7.3. Layouting Template admin ……..……………………………………………………… 37 7.4. Membuat Database dan Tabel MySQL dengan PhpMyadmin ……….. 38

iii 7.5. CRUD ( Create, Read, Update, & Delete ) …………………..……………………….... 39 Tugas Akhir ....…..………………………………………………………………………………………… 40 Uji Kompetensi ………………………………………………………………………………………….…41 TIM PENULIS BUKU RP

1.1. Pengenalan ke HTML Seperti yang sudah kita ketahui, HTML berperan sebagai struktur untuk membangun sebuah halaman website. Dan pada modul ini kita akan mencoba menuliskan struktur HTML, siap? Pada akhir modul, kita akan membuat halaman website seperti gambar berikut: Contoh sebuah halaman pada Website. 1.2. Membuat berkas HTML pertama Untuk langkah awal tentunya kita membuat sebuah berkas HTML. Kita akan mencoba membuatnya dari nol dengan menggunakan alat yang ada. Gunakanlah text editor usungan sistem operasi masing-masing agar kita tahu bagaimana pengalaman membuat dan menuliskan sebuah kode tanpa bantuan code completion. Windows Langkah awal dalam membuat berkas HTML adalah kita buka Notepad pada komputer kita. Untuk membukanya bisa melalui beberapa cara, salah satunya melalui fitur Run yang terdapat pada Windows. Silakan gunakan kombinasi tombol Windows + R untuk membuka jendela Run, kemudian tuliskan “notepad” Bab 1. PENGENALAN HTML

2 Kemudian pilih tombol OK, lalu notepad akan muncul pada layar komputer/laptop kita. Selanjutnya kita salin dan tempel teks berikut pada notepad. 1. Bandung 2. Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi ters ebut. 3. 4. 5. Sejarah 6. Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum o leh lava Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu yang diikat berdampingan yang disebut perahu bandung yang digu nakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam mencari t empat kedudukan kabupaten yang baru untuk menggantikan ibu kota yang lama di Dayeuhkolot. 7. 8. 9. Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Ind ung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Band ung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam h idup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda a dalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda be rada. 10. 11. 12. Geografis 13. Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan seb uah mangkok raksasa, secara geografis kota ini terletak di tengah-tengah provinsi Jawa Bara t, serta berada pada ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di be rada di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah sela tan merupakan kawasan rendah dengan ketinggian 675 meter di atas permukaan laut. 14.

3 15. 16. Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citaru m. Dengan kondisi yang demikian, Bandung selatan sangat rentan terhadap masalah banjir teru tama pada musim hujan. 17. 18. 19. Wisata 20. Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikma ti liburan akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selai n menjadi kota wisata belanja, kota Bandung juga dikenal dengan sejumlah besar bangunan lam a berarsitektur peninggalan Belanda. 21. 22. 23. Farm House Lembang 24. Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah se pi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisat a khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable. 25. 26. 27. Observatorium Bosscha 28. Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refrakto r Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat tero pong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh sia pa pun, tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Se mentara itu, kunjungan individu dibuka setiap hari Sabtu. Sehingga sekarang notepad tampak seperti gambar di bawah ini: Simpan perubahan pada notepad dengan melakukan Save (Ctrl + S pada keyboard), kemudian pilih lokasi penyimpanan yang kita inginkan. Pada contoh di bawah ini, berkas HTML akan disimpan pada alamat C -> WebDasar.

4 Lalu di dalam folder WebDasar. Kita simpan berkas dengan nama index.html. Jangan lupa pada bagian Save as type kita pilih “All Files (*.*)” untuk tipe penyimpanannya. Setelah itu, tekan tombol Save. Setelah berhasil menyimpan berkas index.html, berkas tersebut dapat kita lihat pada folder yang sudah kita tentukan tadi.

5 Selamat! Dengan begitu kita sudah membuat berkas HTML pertama. Silakan buka berkas HTML tersebut menggunakan suatu browser (dalam contoh ini, kita menggunakan Google Chrome), maka hasilnya akan nampak seperti ini: 1.3. Struktur dasar HTML Website serupa dengan berkas dokumen yang ada seperti koran, majalah, atau buku. Serupa dalam hal memiliki struktur konten layaknya dokumen sehari-hari yang kita baca. Pada sebuah

6 majalah terdapat judul, gambar yang ditampilkan dan teks dalam bentuk paragraf. Terkadang, jika konten tersebut panjang terdapat sub-judul untuk memisahkannya menjadi beberapa bagian Judul dan subjudul pada sebuah dokumen menggambarkan suatu hierarki dari informasi. Misalnya, judul dengan ukuran besar merupakan judul utama dalam sebuah konten. Kemudian diikuti dengan judul kecil di bawahnya yang menjelaskan informasi dengan lebih mendetail lagi. Berkas HTML dasarnya memiliki struktur yang nampak seperti ini: 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Judul Halaman</title> 5. </head> 6. <body> 7. <h1>Heading Utama</h1> 8. <p>Sebuah Paragraph.</p> 9. </body> 10. </html> Kita dapat melihat bahwa struktur dasar HTML dituliskan dari beberapa elemen. Pada setiap elemen HTML terdapat dua tag, yaitu pembuka tag <> dan penutup tag </>. Lihat gambar berikut untuk lebih jelasnya. Di antara tag pembuka dan penutup sebuah elemen, kita dapat meletakkan sebuah konten. Konten dapat berupa teks ataupun sebuah elemen HTML lain. Contohnya, elemen <html> memiliki konten yaitu elemen <head> dan juga elemen <body>. Lalu, elemen <head> memiliki konten berupa elemen <title> yang di dalamnya memiliki konten berupa teks dari judul halaman yang ditampilkan. Begitu pula dengan elemen lainnya, sehingga hirarki elemen HTML nampak seperti ini.

7 Elemen <html> Hierarki elemen teratas pada berkas HTML adalah elemen HTML-nya itu sendiri. Elemen ini digunakan untuk memberitahu kepada browser bahwa ini merupakan sebuah berkas HTML sekaligus menjadi root dari sebuah berkasnya itu. Seluruh elemen lainnya tentunya dituliskan pada konten elemen ini. Elemen <head> Elemen <head> pada berkas HTML berfungsi sebagai tempat disimpannya informasi dari dokumen HTML. Informasi dapat berupa elemen meta, style, atau link. Dan juga pada elemen ini judul dari dokumen HTML didefinisikan dengan menggunakan elemen <title>. Berikut contoh elemen yang berada pada konten head: • <title> • <style> • <base> • <link> • <meta> • <script> • <noscript> Pada HTML versi 4.01, elemen <head> wajib ada dalam sebuah berkas HTML. Berikut contoh penulisan sebuah elemen <head> beserta contoh konten di dalamnya: 1. <head> 2. <meta charset="utf-8"> 3. <title>Judul halaman</title> 4. <style> Style </style> 5. </head> Tetapi sejak HTML5, penggunaan <head> dapat dihilangkan. Sehingga struktur dasar berkas HTML menjadi seperti ini:

8 1. <!DOCTYPE html> 2. <html> 3. <meta charset="utf-8"> 4. <title>Judul halaman</title> 5. <style> Style </style> 6. <body> 7. <h1>Heading Utama</h1> 8. <p>Sebuah Paragraph.</p> 9. </body> 10. </html> Elemen <body> Seluruh konten yang terdapat pada elemen ini akan ditampilkan pada halaman website. Maka dari itu, elemen ini digunakan untuk menampung seluruh konten atau elemen yang ditampilkan ke dalam jendela browser. Silakan coba tuliskan kode berikut, simpan dalam format HTML dan jalankan pada browser: 1. <html> 2. <head> 3. <title>Ini merupakan judul dari dokumen HTML</title> 4. </head> 5. <body> 6. <h1>header yang diletakan di dalam elemen body</h1> 7. <p>Ini merupakan sebuah paragraph yang juga diletakan pada sebuah konten body, sehi ngga konten ini dapat dilihat oleh pengguna pada jendela browser.</p> 8. </body> 9. </html> Maka seluruh konten yang dituliskan di dalam elemen <body> akan nampak pada browser. Kecuali jika kita ingin menuliskan sebuah notes pada berkas HTML, kita perlu gunakan commenting tag (<!-- -->). Semua yang dituliskan di antara tag komentar tidak akan memberikan pengaruh apa pun, termasuk pada tampilan di jendela browser. Pada HTML, tag komentar dituliskan seperti ini: 1. <!-- Ini merupakan sebuah komentar --> 2. <!-- Ini merupakan 3. sebuah komentar yang 4. terdiri lebih dari satu baris -->

9 Sebuah komentar berguna untuk memberikan label dan mengorganisir sebuah dokumen yang panjang, terlebih ketika kita bekerja secara tim. 1.4. Identifikasi Elemen pada halaman Website Setelah mengetahui struktur dasar HTML, mari kita coba terapkan pada berkas HTML yang sudah kita buat pada langkah awal. Kita buka kembali berkas HTML tersebut dan berikan elemen dasar pada sebuah berkas HTML. 1. <html> 2. <head> 3. </head> 4. <body> 5. 6. </body> 7. </html> 8. Bandung 9. Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi ters ebut. 10. 11. 12. Sejarah 13. Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum o leh lava Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu yang diikat berdampingan yang disebut perahu bandung yang digu nakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam mencari t empat kedudukan kabupaten yang baru untuk menggantikan ibu kota yang lama di Dayeuhkolot. 14. 15. 16. Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Ind ung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Band ung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam h idup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda a dalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda be rada. 17. 18. 19. Geografis 20. Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan seb uah mangkok raksasa, secara geografis kota ini terletak di tengah-tengah provinsi Jawa Bara t, serta berada pada ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di be rada di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah sela tan merupakan kawasan rendah dengan ketinggian 675 meter di atas permukaan laut. 21. 22. 23. Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citaru m. Dengan kondisi yang demikian, Bandung selatan sangat rentan terhadap masalah banjir teru tama pada musim hujan. 24. 25. 26. Wisata 27. Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikma ti liburan akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selai n menjadi kota wisata belanja, kota Bandung juga dikenal dengan sejumlah besar bangunan lam a berarsitektur peninggalan Belanda. 28. 29. 30. Farm House Lembang 31. Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah se pi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisat a khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable. 32. 33. 34. Observatorium Bosscha 35. Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refrakto r Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat tero pong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh sia pa pun, tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib mendaftarkan

10 diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Se mentara itu, kunjungan individu dibuka setiap hari Sabtu. Masukkan seluruh konten pada elemen <body> agar nampak pada browser. 1. <!DOCTYPE html> 2. <html> 3. <head> 4. </head> 5. <body> 6. Bandung 7. Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi ters ebut. 8. 9. 10. Sejarah 11. Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum o leh lava Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu yang diikat berdampingan yang disebut perahu bandung yang digu nakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam mencari t empat kedudukan kabupaten yang baru untuk menggantikan ibu kota yang lama di Dayeuhkolot. 12. 13. 14. Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Ind ung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Band ung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam h idup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda a dalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda be rada. 15. 16. 17. Geografis 18. Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan seb uah mangkok raksasa, secara geografis kota ini terletak di tengah-tengah provinsi Jawa Bara t, serta berada pada ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di be rada di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah sela tan merupakan kawasan rendah dengan ketinggian 675 meter di atas permukaan laut. 19. 20. 21. Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citaru m. Dengan kondisi yang demikian, Bandung selatan sangat rentan terhadap masalah banjir teru tama pada musim hujan. 22. 23. 24. Wisata 25. Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikma ti liburan akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selai n menjadi kota wisata belanja, kota Bandung juga dikenal dengan sejumlah besar bangunan lam a berarsitektur peninggalan Belanda. 26. 27. 28. Farm House Lembang 29. Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah se pi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisat a khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable. 30. 31. 32. Observatorium Bosscha 33. Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refrakto r Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat tero pong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh sia pa pun, tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Se mentara itu, kunjungan individu dibuka setiap hari Sabtu. 34. 35. </body> 36. </html>

11 Dalam mengidentifikasi konten, carilah konten yang paling penting dan bungkus konten tersebut dengan elemen <h1>. Jangan khawatir apabila tampilan tidak sesuai dengan yang kita inginkan, karena nanti kalian akan mengaturnya ketika sudah mempelajari style sheet Setelah itu, kita berikan elemen heading dan elemen paragraf sesuai hasil identifikasi, sehingga kode nampak seperti ini: 1. <!DOCTYPE html> 2. <html> 3. <head> 4. </head> 5. <body> 6. 7. <h1>Bandung</h1> 8. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi te rsebut.</p> 9. 10. <h2>Sejarah</h2> 11. <p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di 12. Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari du a perahu yang diikat berdampingan yang disebut perahu bandung yang digunakan oleh Bupati Ban dung, R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam mencari tempat kedudukan kabupa ten yang baru untuk 13. menggantikan ibu kota yang lama di Dayeuhkolot. </p> 14. 15. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda I ndung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Ban dung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam h idup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda ad alah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda bera da.</p>

12 16. 17. <h2>Geografis</h2> 18. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan s ebuah mangkok raksasa, secara geografis kota ini terletak di tengah-tengah provinsi Jawa Bar at, serta berada pada 19. ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan r endah dengan ketinggian 675 meter di atas permukaan laut.</p> 20. 21. <p>Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum besert a anak-anak sungainya yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citar um. Dengan kondisi yang 22. demikian, Bandung selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.</ p> 23. 24. <h2>Wisata</h2> 25. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menik mati liburan akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Sela in menjadi kota wisata belanja, 26. kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Bela nda.</p> 27. 28. <h3>Farm House Lembang</h3> 29. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisa ta khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable.</p> 30. 31. <h3>Observatorium Bosscha</h3> 32. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refrak tor Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis telesko p terbesar untuk meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat tero pong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siap apun, tanpa tiket. Namun, bagi yang ingin 33. menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.</p> 34. 35. </body> 36. </html> Kemudian simpan berkas HTML tersebut, lalu coba buka pada browser.

13 Selamat, kita sudah berhasil membuat sebuah struktur HTML dasar. Pada modul selanjutnya, kalian akan lebih dalam mengetahui tentang elemen yang ada pada HTML. 1.5. Atribut HTML Pada modul sebelumnya kita sudah mengenal apa itu elemen. Elemen dituliskan dengan awalan tag pembuka <> dan diakhiri dengan tag penutup </>. Ada satu hal lagi yang bisa kita tuliskan pada sebuah elemen, lebih tepatnya pada sebuah tag pembuka, yaitu Attribute. Atribut ini berfungsi memberikan informasi tambahan pada sebuah elemen. Atribut dituliskan pada tag pembuka sebuah elemen setelah nama dari elemennya tersebut ditulis. Contohnya: 1. <p lang="id">Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p> Pada contoh kode tersebut, kita menetapkan artibut bahasa (dengan penulisan lang) dengan nilai “id” atau Indonesia Untuk menuliskan sebuah atribut kita memerlukan nama dari atribut itu diikuti dengan nilai atribut tersebut dalam bentuk string (Dituliskan dalam tanda kutip dua). Untuk lebih jelasnya, perhatikan gambar berikut: RANGKUMAN Website adalah Halaman yang menampilkan informasi melalui teks atau gambar. Website dapat diakses melalui internet dengan menggunakan browser. Browser Sebuah perangkat lunak yang dapat menerjemahkan berkas HTML, CSS, dan Javascript yang di dapat dari server untuk ditampilkan dalam bentuk halaman website. Server berperan pada sebuah website sebagai sebuah software yang dapat menerima transaksi dari HyperText Transfer Protocol. Server yang dapat mengubah/mengarahkan website melalui sebuah nama domain. Perangkat yang meminta (request) suatu layanan tertentu ke suatu server. Salah satu markup language yang digunakan untuk membuat struktur dan menampilkan konten pada World Wide Web (Website).

14 Atribut pada elemen juga dapat dituliskan lebih dari satu. Kita bisa menuliskan kembali seluruh struktur atribut di samping dari atribut yang sudah ada. Contohnya pada elemen paragraf di atas, kita akan memberikan sebuah atribut translate, sehingga penulisannya menjadi seperti ini: 1. <p lang="id" translate="no">Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus me njadi ibu kota provinsi tersebut.</p> Dengan menambahkan atribut translate dan memberikan nilai “no” pada elemen paragraf tersebut, maka konten dari elemen yang dimaksud tidak akan diterjemahkan oleh layanan sistem translate otomatis seperti Google Translate. Lantas atribut apa saja yang dapat digunakan pada elemen HTML? Pada elemen HTML terdapat dua jenis atribut, yaitu Global Attribute dan atribut yang hanya bisa digunakan pada elemen tertentu. Untuk atribut yang spesifik pada sebuah elemen, kita akan mengulasnya pada pembahasan elemen tersebut. Untuk Global Attribute, berikut daftar atribut yang bisa kita gunakan di seluruh elemen HTML. Attribute Description accesskey Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah element. Class Menentukan satu atau lebih classname untuk sebuah elemen. contenteditable Menentukan konten dari elemen merupakan konten yang dapat diubah atau tidak. data-* Digunakan untuk menyimpan sebuah data pribadi khusus ke halaman atau aplikasi. Dir Menentukan arah teks untuk konten pada suatu elemen. draggable Menentukan apakah suatu elemen dapat di-drag atau tidak. dropzone Menentukan apakah data yang di-drag adalah data yang disalin, dipindahkan, atau ditautkan saat dijatuhkan. Hidden Menentukan apakah suatu elemen ditampilkan atau tidak pada browser. Id Menetapkan id pada elemen. Lang Menentukan bahasa pada konten elemen. spellcheck Menentukan apakah elemen harus diperiksa ejaannya dan tata bahasanya

15 atau tidak. Style Menentukan styling secara satu baris untuk suatu elemen. tabindex Menentukan urutan dari suatu elemen. Title Menentukan informasi tambahan tentang suatu elemen. translate Menentukan apakah konten elemen harus diterjemahkan atau tidak. 1.6. Paragraf Paragraf adalah elemen paling mendasar dari sebuah dokumen teks. Pada HTML, kita bisa menunjukkan sebuah paragraf dengan menggunakan elemen <p>. Contohnya seperti ini: 1. <p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum 2. oleh lava 3. Gunung Tangkuban Parahu yang lalu membentuk telaga...</p> 4. 5. 6. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang 7. merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya 8. menyaksikan atau bersaksi...</p> Ketika menggunakan paragraf pada browser, teks selalu ditampilkan dengan garis baru dan terdapat sedikit jarak (space) antar elemennya. Jarak tersebut nantinya bisa kita atur ketika sudah menerapkan styling. Paragraf dapat terdiri dari teks, elemen gambar, dan inline element lainnya. Tetapi hindarilah penggunaan element paragraf untuk konten seperti heading atau list, karena terdapat elemen lain yang lebih tepat untuk digunakan. 1.7. Heading

16 Pada sub-modul sebelumnya, kita sudah melihat contoh penggunaan header yang diterapkan pada konten yang kita siapkan. Kita menggunakan <h1> dan <h2> dalam mengindikasi judul dan sub judul di dalam kontennya. Pada HTML terdapat <h1> hingga <h6> elemen heading yang dapat kita gunakan. Ketika kita menambahkan heading pada konten, Heading ini merepresentasikan garis besar halaman pada sebuah browser. Alat bantu baca seperti screen reader membaca garis besar halaman untuk bantu memetakan dan mengarahkan pengguna selama menjelajahi halaman. Selain itu, heading juga merupakan elemen yang dicari oleh mesin pencarian contohnya Google Search. Berikut ini contoh penerapan heading empat level pada sebuah dokumen. Tiap level heading dituliskan dengan cara yang sama. 1. <h1>Bandung</h1> 2. 3. <h2>Geografis</h2> 4. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa</p> 5. 6. <h2>Wisata</h2> 7. <p>Kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir pekan terutama dari masyarakat yang berasal 8. dari Jakarta sekitarnya.</p> 9. 10. <h3>Farm House Lembang</h3> 11. <h4>Lokasi</h4> 12. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung.</p> 13. 14. <h4>Kondisi</h4> 15. <p>Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam 16. bentuk 17. spot swafoto Instagramable.</p> 18. 19. <h3>Observatorium Bosscha</h3> 20. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg, 21. Cassegrain GOTO, dan Teleskop Surya.</p> Pada browser standarnya heading akan ditampilkan dengan tulisan tebal (bold text), dimulai dari h1 dengan ukuran teks paling besar kemudian berurutan sesuai dengan level heading-nya.

17 1.8. Header, Footer, Main dan Nav Header dan Footer Elemen ini dapat kita gunakan untuk: • Sebuah header dan footer utama yang muncul pada awal dan akhir di sebuah halaman <body>. • Header digunakan sebagai pengantar atau pembuka konten dalam sebuah elemen <article> atau <section>. • Footer digunakan sebagai catatan kaki pada sebuah elemen <article> atau <section>. Pada contoh dibawah ini elemen <header> digunakan untuk menampilkan nama situs dan navigasi utama. 1. <body> 2. <header> 3. <h1>Bandung</h1> 4. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p> 5. <nav> 6. <ul> 7. <li><a href="#sejarah">Sejarah</a></li> 8. <li><a href="#geografis">Geografis</a></li> 9. <li><a href="#wisata">Wisata</a></li> 10. </ul> 11. </nav> 12. </header> 13. </body> Dan elemen <footer> digunakan sebagai informasi hak cipta. 1. <body> 2. <header> 3. <h1>Bandung</h1>

18 4. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota pr ovinsi tersebut.</p> 5. <nav> 6. <ul> 7. <li><a href="#sejarah">Sejarah</a></li> 8. <li><a href="#geografis">Geografis</a></li> 9. <li><a href="#wisata">Wisata</a></li> 10. </ul> 11. </nav> 12. </header> 13. <footer> 14. &copy; 2019, Dicoding Academy 15. </footer> 16. </body> Selain itu, elemen <header> dan <footer> dapat digunakan pada sebuah elemen <article> atau <section>. Header biasanya menampung judul dan penulis, footer dapat menampung sebuah link untuk membagikan artikel pada sebuah sosial media. 1. <article> 2. <header> 3. <h1>Judul Artikel</h1> 4. <h2>Oleh: Dicoding Indonesia</h2> 5. </header> 6. <p>....... Konten artikel dimulai dari sini ......</p> 7. <footer> 8. <p>Bagikan artikel ini melalui</p> 9. <ul> 10. <li>Twitter</li> 11. <li>Facebook</li> 12. <li>......</li> 13. </ul> 14. </footer> 15. </article> Main Element <main> digunakan untuk menampung/mewadahi konten utama (dominan) dalam <body>. Konten main dapat terdiri dari banyak section, ataupun artikel, atau konten apapun di dalam elemen main, selama termasuk konten utama yang dimiliki oleh website. 1. <body> 2. <header> 3. <!-- Konten header website --> 4. </header> 5. <main> 6. <section> 7. <article> 8. <p>Sebuah article</p> 9. </article> 10. </section> 11. <article> 12. <p>Sebuah article lain</p> 13. </article> 14. </main> 15. <footer> 16. <!-- Konten footer website --> 17. </footer> 18. </body>

19 Karena elemen <main> merupakan berisi dari inti konten pada website, jangan gunakan elemen main lebih dari satu pada berkas HTML. Nav Elemen <nav> digunakan untuk menampung sebuah navigasi yang sifatnya penting (major), contohnya navigasi utama pada sebuah website. Tapi tidak menjamin pada sebuah website hanya ada satu navigasi. Contohnya, sebuah akhir artikel pada blog terdapat tautan navigasi menuju artikel yang dianggap relevan dengan artikel yang telah kita baca. Navigasi tersebut tidak dianggap sebagai navigasi yang penting, sehingga kita tidak perlu menggunakan elemen <nav> untuk menampilkannya. Pada pembahasan header dan footer, kita sudah melihat contoh penggunaan dari elemen <nav> yang diletakkan pada elemen <header>. 1. <nav> 2. <ul> 3. <li><a href="#sejarah">Sejarah</a></li> 4. <li><a href="#geografis">Geografis</a></li> 5. <li><a href="#wisata">Wisata</a></li> 6. </ul> 7. </nav> Sebuah navigation pada dasarnya sangat berguna untuk aksesibilitas website kita. Contohnya ketika pengguna website kita menggunakan screen reader dalam mengunjungi website, pengguna akan mudah mencari bagian yang dia inginkan tanpa harus menelusuri seluruh konten website. 1.9. Elemen dan Atribut pada Tabel Sejauh ini, kita sudah mengetahui penerapan dasar untuk sebuah tabel pada HTML. Sebenarnya masih terdapat beberapa anggota elemen dan atributnya yang dapat digunakan pada tabel. Karena elemen ini jarang digunakan sehingga kita akan mengenal secara ringkas dan merangkumnya dalam sebuah tabel berikut: Elemen dan Atribut Deskripsi table Menetapkan elemen tabel. td Menetapkan sebuah sel dalam baris tabel. colspan=”number” Jumlah kolom yang dicakup oleh sel. rowspan=”number” Jumlah baris yang dicakup oleh sel. headers=”nama header” Mengasosiasikan data sel dengan header.

20 Th Menetapkan header yang terkait dengan baris atau kolom. colspan=”number” Jumlah kolom dicakup oleh header. rowspan=”number” Jumlah row yang dicakup oleh header. headers=”nama header” Mengasosiasikan header dengan header lain. scope=”row|col|rowgroup|colgroup” Mengasosiasikan header dengan baris, kelompok baris, kolom atau kelompok kolom. Tr Menetapkan sebuah baris pada tabel. Caption Memberikan judul pada sebuah tabel. col Menetapkan sebuah kolom. Colgroup Menetapkan sebuah kelompok kolom. tbody Mengidentifikasi sebuah body dalam tabel. tfoot Mengidentifikasi sebuah footer dalam tabel. thead Mengidentifikasi sebuah header dalam tabel. A. Pilihlah jawaban yang paling benar! 1. Perintah <br> digunakan untuk ... a. Membuat garis b. Menulis teks pada baris berikutnya (ganti baris) c. Mengatur ukuran font d. Membuat efek tulisan e. Memasang background 2. Untuk memasukkan file gambar ke dalam web menggunakan perintah … a. <embed src="…"> b. <embedded src="…"> c. <image src=”…”> d. <marquee src=”…”> e. <images src=”…”> 3. Berikut ini adalah Software untuk mendisain Halaman Web (Web Design Software), kecuali: a. Adobe Image Ready, b. Macromedia Dreamweaver Uji Kompetensi

21 c. Macromedia Fireworks, d. Microsoft Frontpage e. Google Chrome 4. Software untuk menulis bahasa HTML yang paling sederhana adalah …. a. Ms Word b. Ms Excel c. Ms Powerpoint d. Notepad e. Ms Acces 5. Insert Jump Break pada menu Posting pada Blogger berfungsi sebagai: a. Publikasi Artikel pada halaman Posting b. Menyisipkan Gambar pada halaman Posting c. Memutus Artikel panjang dan memunculkan menu Readmore. d. Menghapus Artikel pada halaman Posting. e. Membuat Tabel pada halaman Posting. 6. Untuk memberi warna teks web diatur dengan mengubah nilai atribut …. a. Body b. Title c. Bgcolor d. Fontcolor e. Head 7. Untuk memberi gambar pada latar belakang web diatur dengan mengubah nilai atribut …. a. Body background b. Body c. Bgcolor d. Fontcolor e. Head 8. Untuk memperlebar ukuran Tampilan Slideshow pada Blogger kita dapat menggunakan menu: a. Tambah Gadget b. Setelan Dasar c. Tambahkan CSS d. Sesuaikan Template e. Tata Letak 9. Untuk menampilkan gambar dalam halaman web maka gambar tersebut harus berformat …. a. SWF b. FLA

22 c. JPG d. DOC e. PDF 10. Terdiri dari tombol-tombol yang dapat digunakan menyisipkan berbagai objek seperti image, table, frame adalah …. a. Insert Bar b. Document Window c. Panel Groups d. Property Inspector e. Tag Selection B. Soal Uraian! Uraikanlah jawaban dari pertanyaan berikut dengan benar! 1. Apakah yang dimaksud dengan HTML ? jelaskan!. 2. Jelaskan dan sebutkan apa saja atribut di dalam HTML? 3. Apa format dokumen sebuah halaman web? … 4. Untuk dapat diakses oleh program Web Server, ekstensi apa yang harus dipakai ? 5. Apa sebutan halaman Web yang di tempatkan di depan situs web.? A. Pilihlah jawaban yang paling benar! 1. Jika kita menuliskan perintah “&copy”, maka pada html akan muncul … a. ☺ RANGKUMAN Atribut ini berfungsi memberikan informasi tambahan pada sebuah elemen. Atribut dituliskan pada tag pembuka sebuah elemen setelah nama dari elemennya tersebut ditulis. Paragraf adalah elemen paling mendasar dari sebuah dokumen teks. Pada HTML, kita bisa menunjukkan sebuah paragraf dengan menggunakan elemen <p>. Kita menggunakan <h1> dan <h2> dalam mengindikasi judul dan sub judul di dalam kontennya. Pada HTML terdapat <h1> hingga <h6> elemen heading yang dapat kita gunakan. Uji Kompetensi

23 b. ® c. © d. С e. @ 2. Type form HTML untuk menerima masukan berupa pilihan, dan pilihan yang dapat dipilih bisa lebih dari satu adalah… a. Radio b. Password c. Checkbox d. Submit e. Button 3. Dalam HTML, dapat ditambahkan hubungan/relasi ke link lain. Berikut ini adalah command dari link yang apabila di klik akan menuju ke www.google.com adalah…. a. <Href a www.google.com></a> b. <a href www.google.com></a> c. <a href="www.google.com"></a> d. <ke= www.google.com></a> e. <pindah ke www.google.com></a> 4. Tag yang berfugsi supaya teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang adalah… a. <br> b. <p> c. <nobr> d. <hr> e. <hn> 5. Atribut yang berfungsi untuk mengatur warna active link dokumen dengan default merah adalah… a. Alink b. Background c. Bgcolor d. Text e. Vlink 6. Atribut tag <link> yang berfungsi untuk mendefinisikan relasi terhadap sebuah dokumen dan dokumen lain yang berisi informasi tentang personil yang memberi kontribusi terhadap dokumen tersebut adalah a. Type b. Rev

24 c. Rel d. Href e. Link 7. Elemen-elemen pada bagian Head akan mengerjakan tugas-tugas berikut KECUALI a. Menyediakan judul dokumen b. Menjembatani hubungan antar dokumen c. Memberitahu browser untuk membuat form pencarian d. Menyediakan metode untuk mengirim pesan ke tipe browser e. Memindah ke baris baru 8. Fungsi dari <textarea> adalah a. Untuk membuat sebuah kotak teks multi baris. b. Untuk membuat sebuah daftar pilihan c. Untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user d. Untuk membuat kotak teks e. Menentukan teks yang tertulis 9. Atribute ACTION digunakan untuk… a. Menentukan nama form b. Menetukan metode pengiriman yang dipakai c. Menentukan alamat halaman web yang akan memproses masukan dariForm. d. Menerima masukan berupa pilihan e. Menandai atau mengatur nilai dari sebuah radio 10. Apa guna dari “&nbsp” dalam HTML…? a. Mengubah warna background b. Mengubah warna huruf c. Mengubah ukuran huruf d. Membuat tabel e. Membuat kolom tabel tanpa apa pun B. Soal Uraian! Uraikanlah jawaban dari pertanyaan berikut dengan benar! 1. Jelaskan struktur dasar dalam tabel!. 2. Jelaskan fungsi Elemen <nav>! … 3. Jelaskan Semantic HTML? … 4. Jelaskan pengertian dari Anchor? 5. Fungsi dari Ordered List adalah? …

25 2.1. Pengenalan ke Styling Pada sub-modul pengenalan sudah disinggung seperti apa peran CSS pada website. Website nampak begitu membosankan dan mengerikan tanpa adanya CSS. Cascading Style Sheet atau biasa disingkat CSS merupakan W3C standar yang digunakan untuk mengatur visualisasi berkas yang ditulis pada HTML. Pada sub-modul ini kita akan belajar penggunaan dasar dari CSS. Tepatnya mulai dari pembuatan berkas CSS, pengenalan struktur sintaksnya, hingga menerapkan dasar styling seperti memberikan warna pada sebuah teks. CSS syntax berbeda dengan HTML, begitu pula dengan JavaScript. CSS bukanlah sebuah bahasa pemrograman karena di dalamnya tidak terdapat logika, tidak dapat membuat sebuah variabel, tidak adanya proses iterasi, dsb. CSS hanya sebuah declarative language yang digunakan untuk mendeklarasikan suatu nilai yang nantinya digunakan untuk mengatur seperti apa sebuah elemen HTML ditampilkan pada browser. 2.2. Keuntungan dan Cara Kerja CSS Dengan menerapkan CSS, tampilan website kita akan lebih menarik. Berikut beberapa keuntungan yang didapatkan ketika kita menerapkan CSS. • Dapat mengontrol dan menerapkan layout secara presisi. Dengan menggunakan CSS kita bisa membuat sebuah website seperti dokumen cetak dengan desain yang menarik dan presisi. • Menghindari pekerjaan yang berulang-ulang dalam menerapkan styling. Kita dapat menetapkan styling pada beberapa berkas HTML hanya dengan menggunakan satu berkas CSS. • Didukung banyak browser. Seluruh browser saat ini minimal sudah mendukung CSS versi 2. Untuk browser yang populer seperti Chrome dan Firefox sudah mendukung CSS versi 3. Tiada alasan kita tidak menerapkan CSS. Terkecuali dukungan pada browser yang terkadang berbeda setiap vendornya (contohnya vendor prefixes), tapi hal tersebut tidak menjadi masalah ketika kita tahu di mana letak perbedaan dan cara penerapannya. Bagaimana Style Sheet Bekerja? Bab 2. PENGENALAN CSS

26 Sebuah style sheet bekerja melalui tahapan berikut: 1. Dimulai dari sebuah dokumen yang telah ditandai dengan tag elemen HTML. 2. Menuliskan aturan styling untuk menentukan bagaimana elemen HTML akan ditampilkan. 3. Melampirkan aturan styling yang sudah dibuat pada dokumen HTML. Ketika browser memuat dokumen, tampilan elemen yang ditampilkan akan menyesuaikan dengan aturan styling yang sudah ditetapkan. 2.3. Menuliskan, Melampirkan Aturan Styling pada Dokumen HTML Sebuah style sheet dibuat terdiri dari satu atau lebih aturan styling (biasa disebut dengan rules atau rule-sets) yang mendeskripsikan bagaimana sebuah elemen atau sebuah kelompok elemen ditampilkan dalam jendela browser. Langkah awal belajar CSS adalah dengan memahami sebuah bagian rule. Berikut ini dua contoh rules yang dituliskan dalam sebuah CSS. Rule yang pertama menetapkan sebuah warna hijau pada elemen <h1> dan rule yang kedua menetapkan ukuran font dan tipe font pada sebuah elemen paragraf. 1. h1 { color: green; } 2. 3. p { 4. font-size: small; 5. font-family: sans-serif; 6. } Dalam penggunaan CSS, terdapat dua bagian dalam sebuah rule. Yang pertama adalah identitas elemen atau elemen yang akan menerapkan rule (singkatnya kita akan sebut selector) dan yang kedua adalah deklarasi atau instruksi yang akan diterapkan pada sebuah selector.

27 Selector Pada contoh di atas, h1 dan p digunakan sebagai selector. Selector ini dipanggil melalui tipe elemennya, dan ini merupakan teknik dasar dari pemanggilan selector. Properti dan nilainya yang terdapat pada declaration/declaration block akan diterapkan pada seluruh elemen <h1> dan <p> yang ada pada dokumen HTML. Pada sub-modul selanjutnya kita akan mengetahui berbagai cara lainnya untuk menetapkan selector dengan lebih canggih lagi. Declarations Bagian deklarasi terdiri dari pasangan properti dengan nilainya. Kita bisa menetapkan lebih dari satu deklarasi pada satu rule, contohnya seperti pada selector p di atas. Kita menetapkan lebih dari satu deklarasi pada declaration block. Setiap deklarasinya harus diakhiri dengan semicolon (;) sebagai tanda diakhirinya sebuah deklarasi. Karena CSS tidak memperhatikan spasi (sama seperti bahasa pemrograman pada umumnya), sebaiknya penulisan deklarasi selalu diawali dengan garis baru supaya mudah dibaca dan dipahami. 1. p { 2. font-size: small; 3. font-family: sans-serif; 4. /* deklarasikan nilai properti lainnya pada garis baru */ 5. }

28 Tapi ingat, walaupun CSS tidak memperhatikan spasi, untuk satuan nilai seperti px, em dan lainnya harus dituliskan tanpa spasi pada nilainya. Contohnya: 1. h1 { 2. margin: 2em; 3. } Jika kita menambahkan spasi di antara satuan dan nilai, maka deklarasi tersebut tidak akan berfungsi. 1. h1 { 2. margin: 2 em; /* Deklarasi tidak akan berfungsi karena terdapat spasi antara nilai dan satuan */ 3. } CSS Comments CSS comments digunakan untuk menjelaskan kode, dan dapat membantu ketika Anda mengedit kode sumber di lain waktu. Apa yang tertulis akan diabaikan oleh browser dan tidak ditampilkan di browser, sehingga dapat menjadi opsi baik untuk memberi catatan atau informasi dokumentasi pada kode. Seperti contoh yang beberapa kali telah Anda lihat di atas, CSS comments ditempatkan pada elemen <style> dengan cara penulisan dimulai dengan /* dan diakhiri */ seperti contoh berikut: 1. p { 2. font-size: small; 3. font-family: sans-serif; 4. /* memilih sans-serif sesuai hasil diskusi klien pada 2 Jan 2021*/ 5. } Setelah kita menuliskan rules, maka tahapan selanjutnya adalah melampirkan atau menerapkan aturan tersebut pada berkas HTML. Sebenarnya, terdapat tiga cara untuk menerapkan styling pada elemen HTML. External Style Sheet External Style Sheet merupakan berkas terpisah yang di dalamnya hanya terdapat sebuah rules. Berkas ini harus berekstensi .css, dan berkas ini nantinya dihubungkan pada dokumen HTML. Cara ini merupakan yang paling powerful dalam menerapkan styling. Karena dengan cara ini, satu berkas styling (.css) dapat digunakan oleh banyak berkas HTML. Untuk menyambungkan berkas .css dengan dokumen HTML, kita dapat menggunakan elemen <link> pada <head> berkas HTML. Contohnya: 1. <head> 2. <title>Document Title</title> 3. <link rel="stylesheet" href="style.css"> 4. </head>

29 Pada elemen <link> tersebut, kita tetapkan berkas CSS yang digunakan dengan menggunakan atribut href dan beri nilai “stylesheet” pada atribut rel sebagai relationship (hubungan) antara berkas style.css dengan dokumen HTML. Pada contoh di atas kita tahu bahwa berkas css yang digunakan merupakan berkas lokal (berkas yang berada pada komputer/server kita sendiri). Nilai atribut href juga dapat berupa berkas .css yang tersedia melalui sebuah URL. Contohnya, banyak pengembang menggunakan bootstraps.min.css untuk membantu penyusunan layout website-nya. Kita bisa menggunakannya pada berkas HTML dengan langsung menuliskan URL untuk berkas tersebut. 1. <head> 2. <title>Document Title</title> 3. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boot strap.min.css"> 4. </head> Embedded Style Sheet Embedded Style Sheet merupakan kumpulan rules yang dituliskan dalam berkas HTML dengan menggunakan elemen <style>. Dengan begitu rules yang dituliskan hanya dapat dicakup oleh satu berkas HTML. Penulisan rules harus dituliskan dalam elemen <style> dan ditempatkan di dalam <head> dari berkas HTML. 1. <head> 2. <title>Document Title</title> 3. <style> 4. /* 5. * Rules styling dituliskan di sini 6. */ 7. </style> 8. </head> Inline Style Inline Style merupakan styling yang diterapkan pada elemen HTML dengan menggunakan atribut style. Contohnya seperti berikut: 1. <h1 style="color: green">Kota Bandung</h1> Untuk menambahkan styling properties lainnya (multiple properties), kita tuliskan dengan menggunakan semicolon (;) sebagai pemisah antar styling properties-nya. 1. <h1 style="color: green; margin-top: 2em">Kota Bandung</h1> Inline styles hanya diterapkan pada elemen di mana atribut style diterapkan. Teknik ini seharusnya dihindari terkecuali benar-benar diperlukan untuk menggantikan sebuah styling yang ditetapkan pada Embedded Style Sheet atau External Style Sheet.

30 Commenting in Style Pada contoh kode di atas, kita sudah melihat sebuah teks pada rule yang dimulai dari /* dan diakhiri dengan */. Teks tersebut merupakan commenting line di dalam sebuah CSS. Sama seperti commenting pada HTML dan bahasa pemrograman lainnya, Teks yang dijadikan sebuah komentar tidak akan diproses oleh browser (sebagai compiler) atau lebih tepatnya “diabaikan”. Berikut adalah contoh memberikan komentar pada CSS: 1. /* ini merupakan komentar satu baris */ 2. 3. /* CSS juga mendukung komentar lebih dari satu baris, 4. seluruh teks yang berada pada pembuka dan penutup sebuah komentar 5. akan diabaikan oleh browser sebagai compiler. 6. */ 2.4. Menulis Rules pada Berkas CSS Untuk latihan awal, kita bisa coba menuliskan sebuah rule styling pada beberapa elemen HTML yang ada pada latihan sebelumnya. Yang pertama, tetapkan tipe font ‘sans-serif’ sebagai font yang digunakan pada seluruh elemen yang ada di dalam <body>. Silakan buka berkas style.css yang sudah kita buat pada text editor dan tuliskan kode berikut: 1. body { 2. font-family: sans-serif; 3. } Yang kedua, kita tetapkan juga warna pada setiap elemen <h2> dan <h3> yang digunakan pada berkas HTML dengan menuliskan kode sebagai berikut: 1. h2 { 2. color: #00a2c6 3. } 4. 5. h3 { 6. color: #00a2c6 7. } Dan yang terakhir, kita coba ubah warna background dan warna teks pada elemen <footer>, serta beri sebuah padding. 1. footer { 2. padding: 20px; 3. color: white; 4. background-color: #00a2c6 5. } Sehingga keseluruhan kode pada berkas style.css akan nampak seperti ini: 1. body {

31 2. font-family: sans-serif; 3. } 4. 5. h2 { 6. color: #00a2c6 7. } 8. 9. h3 { 10. color: #00a2c6 11. } 12. 13. footer { 14. padding: 20px; 15. color: white; 16. background-color: #00a2c6 17. } 2.5. Menghubungkan Berkas CSS dengan HTML Setelah kita menuliskan rules pada berkas style.css, langkah selanjutnya adalah menghubungkan berkas style.css tersebut sebagai stylesheet pada berkas HTML agar elemen yang ditampilkan dapat menerapkan rules yang kita tetapkan. Silakan kita buka kembali berkas index.html, kemudian tambahkan kode berikut di dalam elemen <head>: 1. <link rel="stylesheet" href="assets/styles/style.css"> Sehingga keseluruhan kode pada elemen head nampak seperti ini: 1. <head> 2. <title>Kota Bandung</title> 3. <link rel="stylesheet" href="assets/styles/style.css"> 4. </head> RANGKUMAN keuntungan yang didapatkan ketika kita menerapkan CSS. • Dapat mengontrol dan menerapkan layout secara presisi. Dengan menggunakan CSS kita bisa membuat sebuah website seperti dokumen cetak dengan desain yang menarik dan presisi. • Menghindari pekerjaan yang berulang-ulang dalam menerapkan styling. Kita dapat menetapkan styling pada beberapa berkas HTML hanya dengan menggunakan satu berkas CSS.

32 A. Pilihlah jawaban yang paling benar! 1. CSS merupakan kepanjangan dari …? a. Cascading Style Sheet b. Cascading Sheet Style c. Cascading Select Style d. Cascading Style Select e. Cascading Select Sheet. 2. Yang mendefinisikan tag dalam CSS adalah ... a. <style> b. <html> c. <head> d. <title> e. <DOCTYPE HTML> 3. Selector yaitu ... a. Bagian elemen HTML untuk mengatur style b. Aturan dalam CSS untuk mengubah value yang dipilih c. Sebuah property yang berada didalam tanda {} d. Merupakan nilai dari property CSS e. Dapat berupa class dan value 4. Dibawah ini manfaat penggunaan dari CSS dalam pembuatan web, kecuali... a. Kode HTML menjadi lebih sederhana b. Dapat berkolaborasi dengan javascript c. Mudah untuk mengubah tampilan d. Kapasitas penyimpanan menjadi lebih besar, sehingga load lebih mudah e. Dapat digunakan semua jenis web browser 5. Macam-macam pembuatan dan pengaturan dalam CSS, kecuali ... a. Style font b. Style warna c. Style jenis d. Style bentuk e. Style jarak 6. Jika ada kode HTML sebagai berikut: form {margin-left :0;} Uji Kompetensi

33 Maka maksud dari kode HTML di atas adalah … a. Penggunaan selector dan value dengan nilai property margin left 0 b. Selector yang di atur oleh style dengan jarak filedset batas kiri 0 c. Form selector yang akan mengatur style dengan nilai dari property margin-left 0 d. Penggunaan selector, property, dan value e. Property yang digunakan untuk jarak filedset dari batas kiri layout 7. Perhatikan teks ini: CSS merupakan bahasa style yang distandarkan oleh W3C Kode CSS yang paling tepat untuk membuat style teks diatas adalah: a. p.first-line {font-size:200%; font-weight:bolder; font-style:italic;} b. p:first-line { font-size:200%; font-weight:bolder font-style:italic;} c. p.first-letter { font-size:200%; font-weight:bolder; font-style:italic;} d. p:first-letter { font-size:200%; font-weight:bolder; font-style:italic;} e. p:first-letter { font-size:200% font-weight:bolder; font-style:italic; 8. Salah satu jenis selektor CSS adalah class. Untuk mendeklarasikan sebuah selektor class tanda yang digunakan didepan nama class adalah: a. tanda ‘:’ (titik dua) b. tanda ‘#’ (kresh) c. tanda ‘.’ (titik) d. tanda ‘;’ (titik koma) 9. Dalam CSS dikenal konsep box model yang menyatakan bahwa setiap elemen blok HTML memiliki area padding, margin, dan border. Urutan yang benar dari letak ketiga area tersebut dalam suatu elemen HTML adalah: a. padding-border-margin b. border-margin-padding c. margin-padding-border d. padding-margin-border 10. Status posisi suatu elemen dapat diatur menggunakan properti position yang dapat bernilai: a. left, right, center, justify b. auto, %, piksel, inherit c. top, bottom, middle, d. fixed, relative, static, absolute B. Soal Uraian!

34 Uraikanlah jawaban dari pertanyaan berikut dengan benar! 1. Tuliskan kode CSS untuk membuat link-link pada class ‘artikel’ memiliki style berikut: Teks link berwarna putih dan tidak bergaris bawah. Jika dilewati mouse, teks link akan berwarna kuning 2. Jelaskan fungsi dari Commenting in Style … 3. Jelaskan pengertian dari External Style Sheet? … 4. Jelaskan bagaimana cara menghubungkan CSS dengan HTML? 5. Lihat kode berikut ini! <html> <head> <title>Style dengan CSS</title> </head> <body> <p>Paragrap ini akan ditampilkan dengan pengaturan gaya menggunakan CSS. Paragrap merupakan salah satu dari elemen berjenis block yang akan tampil di browser memenuhi area dari ujung kiri sampai kanan layar. Elemen block lainnya adalah heading</p> </body> <html> Buatlah style CSS dengan cara internal atau embedded style sheet agar teks dalam paragrap tampil dengan warna tulisan merah berlatar belakang kuning, mempunyai border tipis yang berjenis garis kontinyu warna #a9a9a9. Disamping itu, antara teks dengan border memiliki jarak 15 piksel.! Bab 3. JAVASCRIPT BASIC

35 3.1. Perkenalan JavaScript Apa itu JavaScript? JavaScript merupakan bahasa pemrograman client-side sehingga seluruh prosesnya berjalan pada sisi pengguna bukan server. JavaScript diperlukan pada pengembangan website ketika kita membutuhkan suatu interaksi dari pengguna. Sesungguhnya website hanya menampilkan konten yang statis jika hanya menggunakan HTML dan CSS. Karena diolah pada sisi client, JavaScript sangat bergantung pada pengaturan dan kemampuan browser ketika melakukan sebuah proses (compiling atau rendering pada DOM). Bahkan pengguna dapat sepenuhnya tidak mengizinkan JavaScript berjalan pada browser dengan menonaktifkan dukungan JavaScript pada browser. Meskipun memiliki nama JavaScript bahasa pemrograman ini sama sekali tidak ada hubungannya dengan bahasa pemrograman Java. Sebenarnya pada tahun 1995 Netscape melahirkan bahasa pemrograman ini dengan nama “LiveScript”, namun pada saat itu bahasa pemrograman Java sedang populer. Untuk memanfaatkan kepopulerannya, namanya pun diubah menjadi “JavaScript” dan benar bahasa pemrograman ini pun akhirnya memiliki popularitas yang tidak kalah dari Java. Setelah diadopsi di luar Netscape, JavaScript distandarisasi oleh European Computer Manufacturer’s Association (ECMA) itulah sebabnya terkadang ada yang menyebutnya dengan ECMAScript. Terdapat beberapa versi dari JavaScript. Pada tahun 2000 - 2010, ECMAScript 3 merupakan versi yang banyak digunakan ketika JavaScript sedang mendominasi. Selama waktu tersebut, ECMAScript 4 sedang dalam proses pengembangan dengan harapan akan memberikan improvisasi yang cukup signifikan, namun ambisi tersebut tidak berjalan mulus sehingga pada tahun 2008 pengembangan ECMAScript 4 ditinggalkan. Walaupun begitu, ini bukan akhir dari JavaScript. Pengembangan digantikan dengan ECMAScript 5 dengan mengurangi ambisinya dan hanya melakukan perbaikan pada hal yang tidak jadi kontroversi. Pembaharuan tersebut berhasil dan akhirnya ECMAScript 5 rilis pada tahun 2009. Lalu pada tahun 2015 ECMAScript 6 rilis dengan membawa perubahan yang cukup besar termasuk ide - ide yang sudah direncanakan untuk versi 4. Mulai dari itu tiap tahun JavaScript melakukan update bersifat minor. 3.2. Menuliskan Syntax Javascript pada HTML

36 Sama seperti styling, untuk menggunakan JavaScript pada website kita bisa menerapkannya melalui atribut HTML, embed script, atau menggunakan file external. Atribut HTML Untuk menuliskan JavaScript menggunakan atribut, kita bisa menerapkannya pada atribut event seperti “onclick”, sehingga JavaScript akan dieksekusi ketika elemen tersebut ditekan oleh kursor. Contohnya sebagai berikut: 1. <button onclick="alert('Anda menekan elemen button!')">Click di sini!</button> Ada banyak sekali atribut event yang dapat digunakan untuk menuliskan script di dalamnya. Tentunya atribut tersebut kita gunakan sesuai dengan kebutuhan kita. onclick merupakan salah satu atribut yang common atau banyak digunakan karena interaksi tersebut sering pengguna lakukan. Embedded Script JavaScript juga dapat dituliskan dengan menanamnya (embedding) pada berkas HTML dengan menggunakan elemen <script>. 1. <script> 2. // JavaScript dituliskan di sini. 3. </script> Elemen <script> dapat diletakan di dalam elemen <head> atau <body>. Akan tetapi jika kita menerapkan banyak script pada elemen <head> proses memuat halaman akan menjadi lambat, karena HTML akan membaca kode dari atas ke bawah. External Script Metode lainnya yaitu dengan menggunakan berkas external yang berekstensi .js. Di dalam berkas tersebutlah seluruh JavaScript dituliskan. Keuntungan menggunakan metode ini adalah script dapat diterapkan pada berbagai berkas HTML tanpa menuliskan ulang scriptnya (keuntungan yang sama juga ketika kita menggunakan external css).

37 Untuk menghubungkan external script dengan berkas HTML, kita gunakan elemen <script> lalu tambahkan atribut src dengan nilai alamat berkas .js yang digunakan. 1. <script src="berkas-javascript.js"></script> Sama seperti Embedded Script kita bisa tuliskan elemen script tersebut di dalam elemen <header> namun direkomendasikan untuk disimpan di dalam elemen <body> sebelum tag penutup </body>. 3.3. Comment Pada JavaScript juga terdapat fitur komentar. Seluruh teks yang dituliskan pada tanda komentar akan diabaikan (tidak dianggap ada) atau tidak akan dieksekusi. Dalam komentar ini kita bisa menuliskan teks untuk mengingatkan atau menjelaskan kode yang kita tuliskan. Hal ini bisa saja berguna jika kode yang kita tuliskan akan diubah oleh orang lain. Tapi ingat, jangan terlalu berupaya dalam menuliskan komentar yang sebenarnya tidak perlu dituliskan. Terdapat dua metode ketika memberikan komentar. Untuk memberikan komentar pada satu baris saja, kita bisa gunakan tanda dua buah garis miring (//) pada awal barisnya. 1. // ini merupakan komentar satu baris komentar 2. 3. // alert("Terima kasih") Sedangkan untuk menggunakan komentar lebih dari satu baris (multiple lines comment) kita bisa gunakan tanda /* sebagai pembuka komentar dan tanda */ sebagai penutup komentar. Teks apapun yang berada di antara tanda tersebut akan dijadikan komentar dan tidak akan dieksekusi. 1. /* Ini merupakan komentar dengan lebih dari satu baris 2. Teks apapun yang berada disini akan dijadikan komentar. 3. Ketika menggunakan ini, jangan lupa untuk menutupnya. 4. */ 3.4. Variabel Ketika mendengar variabel apakah Anda teringat tentang pelajaran matematika? Yups, variabel di sini memiliki konsep yang sama. Variabel umumnya digunakan untuk menyimpan informasi atau nilai yang akan dikelola di dalam sebuah program. Sebelum ECMAScript 2015 (ES6) untuk membuat variabel pada JavaScript kita gunakan keyword var. 1. var firstName = "Harry"; Tanda sama dengan (=) digunakan untuk menginisialisasikan nilai pada variabel, sehingga sekarang variabel firstName memiliki nilai teks “Harry”.

38 Kita bisa menggunakan apapun yang kita mau untuk menamai sebuah variabel, tetapi pastikan penamaannya masih masuk akal dengan konteksnya agar berikutnya kode mudah dimaintenance. Sebaiknya hindari penamaan variabel dengan istilah umum seperti “data”, Gunakanlah penamaan variabel yang dapat mendeskripsikan nilai dari variabel itu sendiri. Berikut beberapa aturan dalam penamaan variabel yang perlu Anda ketahui: • Harus dimulai dengan huruf atau underscore (_). • Dapat terdiri dari huruf, angka, dan underscore (_) dengan berbagai kombinasi. • Tidak dapat mengandung spasi (white space), jika penamaan variabel lebih dari dua kata maka tuliskan secara camelCase. Contoh firstName, lastName, catName, dll. • Tidak dapat mengandung karakter spesial (! . , / \ + * = dll.) Nilai variabel yang diinisialisasi menggunakan var dapat diubah kembali nilainya, contoh: var firstName = "Harry"; console.log(firstName); firstName = "Ron"; console.log(firstName); Sejak ECMAScript 2015 (ES6) selain var, menginisialisasikan variabel dapat menggunakan let dan const. ES6 melakukan improvisasi pada deklarasi variabel karena menggunakan var terdapat beberapa hal yang kontroversial, salah satunya hoisting. Apa itu hoisting? sesuai artinya “Mengangkat” variabel yang dideklarasikan menggunakan var ini dapat diinisialisasi terlebih dahulu sebelum dideklarasikan, Contoh: x = 100; var x; console.log(x); Ini dikarenakan proses hoisting, sebenarnya di belakang layar deklarasi variabel x diangkat ke atas sehingga kode yang tampak seperti ini: var x; x = 100; console.log(x); Hoisting menjadi kontroversial karena tidak sedikit developer yang dibuat bingung akan hal ini. Masalah ini sudah terselesaikan jika kita menggunakan let dalam mendeklarasikan variabel. y = 100;

39 let y; console.log(y); Kemudian const digunakan untuk mendeklarasikan sebuah variabel yang sifatnya immutable atau tidak perlu diinisialisasi kembali. Jika kita menginisialisasi kembali nilai variabel yang menggunakan const, maka akan mendapati eror “TypeError: Assignment to constant variable.” const z = 100; console.log(z); z = 200; console.log(z) Dengan begitu sebaiknya kita gunakan let atau const ketika mendeklarasikan variabel daripada menggunakan var. 3.5. Tipe Data Nilai yang kita tetapkan pada variabel pasti memiliki tipe data. Tipe data merupakan pengklasifikasian data berdasarkan jenis data tersebut. Pada JavaScript terdapat beberapa tipe data sebagai berikut: Undefined Tipe data ini terbentuk ketika sebuah variabel tidak memiliki nilai, dalam arti lain ketika kita mendeklarasikan variabel tanpa menginisialisasikan nilainya, maka variabel tersebut menjadi undefined. Contoh: let x; console.log(typeof(x)); Pada contoh kode di atas, kita mendeklarasikan variabel x, tetapi kita tidak menginisialisasikan dengan nilai apapun. Ketika kita memastikan tipe data dengan menggunakan fungsi typeof() maka menghasilkan output undefined. Numbers Nilai dari tipe data number adalah angka. JavaScript variabel bertipe data number dituliskan seperti ini: 1. let x = 10;

40 Jika angka tersebut merupakan sebuah bilangan desimal, maka kita bisa gunakan tanda titik pada pecahan bilangannya. let x = 10; console.log(typeof(x)) /* output: number */ let y = 17.25; console.log(typeof(y)) /* output: number */ Pada tipe data number kita juga dapat melakukan perhitungan aritmatika seperti penambahan, pengurangan, perkalian, dll. Berikut operator yang dapat kita gunakan dalam melakukan perhitungan aritmatika pada tipe data number: Operator Fungsi Contoh + Penambahan 10 + 10 = 20 - Pengurangan 15 - 7 = 8 / Pembagian 21 / 7 = 3 * Perkalian 9 * 9 = 81 % Sisa hasil bagi 5 % 2 = 1 let a = 12; let b = 9; console.log(a + b) console.log(a - b) console.log(a * b) console.log(a / b) console.log(a % b) Pada operator aritmatika juga terdapat operator increment (++) dan decrement (--). Operator increment dan decrement digunakan untuk menambahkan atau mengurangi nilai 1 pada nilai variabel yang ada sekarang. Operator ini dapat dituliskan sebelum atau sesudah variabel, tetapi hal tersebut bukan berarti sama. Berikut ketentuannya:

41 • Jika dituliskan setelah variabel (x++), statement akan menghasilkan nilai variabel sebelum ditingkatkan nilainya. • Jika dituliskan sebelum variabel (++x), statement akan menghasilkan nilai variabel setelah ditingkatkan nilainya. Lebih jelasnya berikut contoh kode dalam penerapan operator tersebut, perhatikan hasil yang di dapat. /* Increment dan Decrement */ let postfix = 5; console.log(postfix++); /* output: 5 */ let prefix = 5; console.log(++prefix); Strings Tipe data selanjutnya adalah strings, String ini dasarnya adalah sebuah teks. Pada JavaScript untuk menetapkan nilai string pada variabel, gunakan tanda single (‘) atau double quote (“) di antara teksnya. Contohnya: let greet = "Hello"; console.log(typeof(greet)) Apa pun yang berada di antara tanda double quote atau single quote merupakan sebuah string, baik itu angka, huruf maupun karakter spesial. Pada string juga kita dapat menggunakan operator plus (+). Operator tersebut pada string berfungsi untuk menggabungkan dua teks yang terpisah menjadi satu buah teks. Contohnya seperti ini: let greet = "Hello"; let moreGreet = greet + greet; console.log(moreGreet); Boolean Boolean hanya dapat memiliki dua nilai, yakni true atau false. Tipe data ini menjadi kunci utama dalam penentuan logika, kita akan memahaminya nanti ketika pembahasan if/else statement. Untuk menetapkan nilai boolean pada variabel kita bisa menggunakan keyword true atau false.

42 let x = true; let y = false; console.log(typeof(x)) console.log(typeof(y)) Atau kita bisa gunakan operator komparasi seperti lebih dari (>) atau kurang dari (<). Contohnya: const a = 10; const b = 12; let isGreater = a > b; let isLess = a < b; console.log(isGreater); console.log(isLess); Null Yang terakhir adalah null. Serupa dengan undefined, namun null perlu diinisialisasikan pada variabel. null biasa digunakan sebagai nilai sementara pada variabel, tapi sebenarnya nilai tersebut “tidak ada”. Terkadang kita perlu membuat sebuah variabel, namun kita belum memerlukan nilai apa apa dan tidak ingin terikat oleh tipe data apapun. Nah, daripada kita tidak menetapkan nilai apapun (variabel akan undefined) sebaiknya kita beri nilai null pada variabel tersebut, dan ubah nanti ketika kita membutuhkannya. Untuk menetapkan null pada variabel, kita dapat gunakan keyword null ketika variabel tersebut diinisialisasikan. let someLaterData = null; console.log(someLaterData); Meskipun terdapat beberapa tipe data dalam JavaScript, tetapi variabel pada JavaScript memiliki sifat tipe data yang dinamis. Artinya, kita dapat memberikan tipe data yang berubah-ubah pada satu variabel yang sama. Contohnya: 1. let x; // x merupakan undefined 2. x = 1 // sekarang x merupakan number 3. x = true // sekarang x merupakan boolean 4. x = "Harry" // sekarang x merupakan string 3.6. Arrays dan Objek

43 Kita sudah mengenal tipe data dasar yang ada pada JavaScript. Kali ini kita akan membahas mengenai array dan objek pada JavaScript. Keduanya dapat menampung lebih dari satu tipe data dasar yang digunakan untuk mengelola sebuah data. Arrays Array merupakan tipe data yang dapat mengelompokkan lebih dari satu nilai dari tipe data lain dengan menempatkannya pada satu variabel. Contoh: let myArray = ["Coklat", 42.5, 22, true, "Programming"]; console.log(myArray); Nilai - nilai yang berada pada array disusun dan diakses secara indexing. Untuk mengakses nilai di dalam array kita gunakan tanda kurung siku [] yang di dalamnya berupa angka yang merupakan posisi nilai yang ingin diakses. let myArray = ["Coklat", 42.5, 22, true, "Programming"]; console.log(myArray[1]); Yang perlu kita ketahui adalah nilai index dimulai dari angka 0. Terlihat pada contoh kode di atas, kita mengakses index ke-1 pada myArray. Nilai yang muncul adalah nilai ke-2 dari array tersebut, yakni 42.5. Jika kita mengakses nilai array lebih dari index-nya maka hasilnya akan undefined. Index terakhir array selalu jumlah nilai array - 1. let myArray = ["Coklat", 42.5, 22, true, "Programming"]; console.log(myArray[0]); console.log(myArray[1]); console.log(myArray[2]); console.log(myArray[3]); console.log(myArray[4]); console.log(myArray[5]); console.log("Panjang nilai myArray adalah " + myArray.length + "."); Objek Objek serupa dengan array yang dapat menampung banyak nilai dengan tipe data yang beragam. Untuk mengelola data menggunakan objek, bedanya objek diakses tidak melalui indexing, melainkan menggunakan pendekatan key-value. Untuk mengakses nilainya kita gunakan key. Key juga biasa disebut dengan properti. Untuk menetapkan objek pada variabel gunakan tanda kurung kurawal { } dalam menginisialisasinya. Kemudian di dalamnya kita tetapkan key: value.

44 1. let object = {key1: "value1", key2: "value2", key3: "value3"} Dalam menentukan nama key, gunakanlah nama yang dapat mendeskripsikan dari value-nya. Pada value, kita dapat mengisikan nilai dengan tipe data apapun, termasuk array. Contoh: 1. let user = {firstName: "Harry", lastName: "Potter", age: 20, isMuggle: false, stuff: ["Wan d", "Flying Car", "Owl"]}; Dalam menuliskan objek, baris baru tidaklah penting dan tidak akan berpengaruh apa pun. Sehingga lebih baik setiap kita menetapkan key-value buatlah baris baru untuk memisahkan antar nilainya, hal ini akan memudahkan kita dalam memahami struktur data yang berada pada objek. 1. let user = { 2. firstName: "Harry", 3. lastName: "Potter", 4. age: 20, 5. isMuggle: false, 6. stuff: ["Magic Wind", "Flying Car", "Owl"] 7. }; Kemudian untuk mengakses nilai dari properti objek kita dapat gunakan tanda titik diikuti dengan nama properti-nya. Contoh: let user = { firstName: "Harry", lastName: "Potter", age: 20, isMuggle: false, stuff: ["Magic Wind", "Flying Car", "Owl"] }; console.log("Hallo, nama saya " + user.firstName + " " + user.lastName); console.log("Umur saya " + user.age + " tahun"); Bahkan dalam properti objek, kita dapat menyimpan nilai objek lainnya. Contohnya properti firstName dan lastName dapat dikelompokan kembali dalam sebuah objek baru sebagai berikut: 1. let user = { 2. name: { 3. first: "Harry", 4. last: "Potter" 5. }, 6. age: 20, 7. isMuggle: false, 8. stuff: ["Magic Wind", "Flying Car", "Owl"] 9. }

45 Untuk mendapatkan nilainya kita perlu mengakses properti dari objek user kemudian name. Sehingga penulisannya menjadi seperti berikut: let user = { name: { first: "Harry", last: "Potter", }, age: 20, isMuggle: false, stuff: ["Magic Wind", "Flying Car", "Owl"] }; console.log("Hallo, nama saya " + user.name.first + " " + user.name.last); console.log("Umur saya " + user.age + " tahun"); Mungkin seperti itulah gambaran mengenai objek di JavaScript, penting untuk Anda garis bawahi bahwa dalam mengelola banyak tipe data pada JavaScript, Anda dapat menggunakan array maupun objek. Pembahasan di atas cukup sebagai landasan pengetahuan mengenai dua hal itu ya. Banyak hal sebenarnya yang dapat diceritakan tentang dua hal ini, terutama untuk objek. 3.7. Operator Komparasi Sekarang kita sudah mengetahui bagaimana cara menyimpan nilai pada sebuah variabel, array, ataupun objek. Nah, selanjutnya kita akan belajar mengenai operator komparasi sebagai logika dasar dalam membandingkan nilai pada JavaScript. Terdapat serangkaian karakter khusus yang disebut dengan operator pembanding/komparasi yang dapat mengevaluasi dan membandingkan dua nilai. Berikut daftar operator dan fungsinya: Operator Fungsi == Membandingkan kedua nilai apakah sama. (Tidak Identik) != Membandingkan kedua nilai apakah tidak sama. (Tidak Identik) === Membandingkan kedua nilai apakah identik. !== Membandingkan kedua nilai apakah tidak identik. > Membandingkan dua nilai apakah nilai pertama lebih besar dari nilai kedua.

46 >= Membandingkan dua nilai apakah nilai pertama lebih besar atau sama dengan dari nilai kedua. < Membandingkan dua nilai apakah nilai pertama lebih kecil dari nilai kedua. <= Membandingkan dua nilai apakah nilai pertama lebih kecil dari atau sama dengan nilai kedua. Ketika kita melakukan perbandingan antara dua nilai, JavaScript akan mengevaluasi kedua nilai tersebut dan akan mengembalikan boolean dengan nilai hasil perbandingan tersebut, baik false, atau true. Berikut contohnya: let a = 10; let b = 12; console.log(a < b); console.log(a > b); Perbedaan antara “sama” dan “Identik” Dalam operator komparasi di JavaScript, hal yang menjadi sedikit “tricky” adalah membedakan antara “sama” (==) dan “identik” (===). Kita sudah mengetahui bahwa setiap nilai pasti memiliki tipe data baik itu number, string atau boolean. Contohnya sebuah string “10” dan number 10 merupakan hal yang serupa, tetapi keduanya tidak benar-benar sama. Hal inilah yang membedakan antara sama dan identik pada JavaScript. Jika kita ingin membandingkan hanya dari kesamaan nilainya kita bisa gunakan == tapi jika kita ingin membandingkan dengan memperhatikan tipe datanya kita gunakan ===. Contohnya sebagai berikut: const aString = '10'; const aNumber = 10 console.log(aString == aNumber) // true, karena nilainya sama-sama 10 console.log(aString === aNumber) // false, karena walaupun nilainya sama, tetapi tipe datanya berbeda