Dasar-Dasar Perangkat Lunak dan GIM 141 penamaan file, karena ada beberapa kasus di mana designer tidak memberikan nama yang pas untuk assets desain yang ia desain. Alhasil, untuk tracing assets design (misal: icon) ataupun memanggil assetsnya di codingan menjadi membingungkan. Ditambah lagi, ada beberapa assets design yang nama filenya sama dengan assets design yang lain. Tentu ini akan membuat frustasi developer yang menggunakannya. Penamaan file di dalam assets design sangat penting. Hal itu akan memudahkan designer maupun developer yang akan memindahkan desain ke dalam codingan. Umumnya, penamaan assets design itu menggunakan prefix, sama halnya dengan penamaan tabel di database, menggunakan prefix atau suffix. Contoh: ic_email: menandakan ini icon untuk email. bg_email: menandakan ini background untuk halaman email. ic_email selected: menandakan ini icon email ketika dipilih. ic_email_pressed: menandakan ini icon email ketika ditekan. Ya, menggunakan prefix ic_ untuk icon, bg_ untuk background, suffix _selected untuk icon yg dipilih, suffix _pressed untuk icon yang ditekan, dan lain sebagainya. Dan ada pula yang ditaruh ke dalam sub folder tertentu untuk background di dalam folder tersendiri, untuk icon di dalam folder tersendiri, dan lain-lain. Dengan begitu, manajemen assets design jadi tertata dengan baik. User Interface 1. Pengertian User Interface User Interface merupakan tampilan visual dari sebuah produk yang berfungsi untuk menjembatani sistem dengan user atau pengguna. Di mana tampilan UI bisa berupa warna, bentuk serta tulisan yang didesain dengan semenarik mungkin. Namun secara sederhana, UI dapat diartikan sebagai bagaimana tampilan suatu produk dilihat oleh pengguna atau user. Untuk lebih jelasnya, UI dapat dianalogikan berupa sebuah rumah yang sedang Anda kunjungi kemudian Anda akan melihat tampilan tersebut. Dimana tampilan yang bisa Anda lihat antara lain halaman depan, jendela, pintu dan dinding. Tampilan rumah yang Anda lihat itulah yang dinamakan dengan User Interface.
Cita Puspitasari, S.Pd dan Renita, S.Kom. 142 Biasanya tampilan UI diterapkan untuk sistem operasi, website, aplikasi dan blog. Biasanya tampilan UI didesain dari beberapa aspek yaitu gambar logo, layout, pemilihan warna, typography agar mudah dibaca dan aspek lain yang dapat mempercantik tampilan. Semua elemen yang dapat memperindah tampilan sebuah produk digital maka dapat dikategorikan sebagai elemen UI. Tidak hanya pada aplikasi saja, tampilan UI pada website juga harus menarik agar mengundang lebih banyak pengunjung. 2. Fungsi User Interface Jika sebuah aplikasi atau website dirancang sedemikian indah, tentu akan membuat para pengguna merasa terkesan dan nyaman. Hal ini tentu membuat mereka tidak akan mudah meninggalkan produk digital tersebut begitu saja. Sebaliknya jika sebuah produk digital tidak memiliki User Interface yang baik, maka membuat pengguna cepat bosan dan meninggalkan produk tersebut. Untuk itulah UI hadir dengan berbagai fungsi antara lain sebagai berikut: a. Mempermudah Interaksi Pengguna dengan Produk, b. Meningkatkan Pertumbuhan Bisnis dan Penjualan, c. Meningkatkan Kualitas Branding. 3. Cara Kerja User Interface Setelah mengetahui fungsi penting User Interface bagi produk digital, selanjutnya ketahui juga cara kerjanya. Berikut cara kerja UI yang perlu Anda ketahui: a. Persiapan Sebelum Anda membuat user interface untuk produk, terdapat beberapa hal yang perlu Anda persiapkan antara lain sebagai berikut: 1) Menentukan masalah yang akan diselesaikan. 2) Mengenali pengguna produk. 3) Melihat yang dilakukan oleh kompetitor. 4) Mengumpulkan seluruh persyaratan produk. b. Wireframe Wireframe adalah sebuah sketsa kasar dari tampilan website atau aplikasi. Biasanya dipakai untuk menyusun tata
Dasar-Dasar Perangkat Lunak dan GIM 143 letak awal pada sebuah desain. Wireframe bisa Anda coret memakai tangan maupun tools dari aplikasi khusus. c. Mockup Mockup memberikan gambaran detail sebelum akhirnya produk dibuat. Mockup biasanya menggambarkan aspek desain visual, warna, gambar serta tipografi. Dengan mockup ini maka ide dapat diterjemahkan ke dalam bahasa yang mudah dimengerti tetapi mockup bersifat statis serta tidak dapat dioperasikan. d. Prototype Prototype merupakan simulasi interaksi pengguna dengan tampilan interface produk sehingga pengguna bisa melihat serta berinteraksi dengan UI secara langsung. Prototype memang belum terlihat seperti produk akhir namun hampir mendekati. Materi Pertemuan 11 Mengenal CorelDraw Mengutip EDUCBA, CorelDraw dirilis pada 16 Januari 1989 oleh Corel Corporation, sehingga disebut juga Corel's Graphic Suite. CorelDraw adalah perangkat lunak desain berbasis vektor yang digunakan untuk membuat gambar dua dimensi. Seperti logo, brosur, kartu undangan, dan segala jenis desain vektor berdasarkan garis. CorelDraw dapat digunakan untuk pelajar, desainer grafis profesional, dan ilustrasi teknis. Langkah-langkah membuat gambar menggunakan coreldraw ada pada jobsheet. Materi Pertemuan 12 Adobe Audition Adobe Audition adalah multitrack digital audio recording, editor, dan mixer yang mudah digunakan serta memiliki berbagai fasilitas pengolahan suara. Langkah-langkah mengedit suara menggunakan adobe audition ada di jobsheet.
Cita Puspitasari, S.Pd dan Renita, S.Kom. 144 Materi Pertemuan 13 Filmora Filmora merupakan salah satu software editing video terpopuler yang perlu dikuasai jika Anda ingin mencoba berkarier menjadi video editor. Menurut CompareCamp salah satu alasan yang membuat software yang satu ini sangat populer tentunya karena beragam fitur canggihnya untuk mengedit video dan audio. Langkah-langkah mengedit video menggunakan filmora ada di jobsheet. Materi Pertemuan 14 Algoritma adalah urutan langkah logis yang digunakan untuk menyelesaikan suatu masalah. Varian adalah jenis atau turunan dari alur logikal yang digunakan sebelum pembuatan aplikasi (pra-built aplication). Invarian adalah bentuk logikal dari external algoritma (fungsi/program bagian) yang terintegrasi dengannya. Varian adalah variabel yang tidak mempunyai tipe data sedangkan invarian adalah variabel yang mempunyai tipe data. Flowchart atau bagan alur adalah diagram yang menampilkan langkah-langkah dan keputusan untuk melakukan sebuah proses dari suatu program. Materi Pertemuan 15 Simbol-simbol flowchart
Dasar-Dasar Perangkat Lunak dan GIM 145 4. GLOSARIUM a. Tool pengembangan perangkat lunak adalah tool berbasis komputer yang dimaksudkan untuk membantu proses siklus hidup perangkat lunak. b. Aset desain adalah resources tertentu di dalam UI/UX yang digunakan ke dalam proses pengembangan perangkat lunak atau aplikasi. c. User Interface merupakan tampilan visual dari sebuah produk yang berfungsi untuk menjembatani sistem dengan user atau pengguna. d. Algoritma adalah urutan langkah logis yang digunakan untuk menyelesaikan suatu masalah. e. Varian adalah jenis atau turunan dari alur logikal yang digunakan sebelum pembuatan aplikasi (pra-built aplication). f. Invarian adalah bentuk logikal dari external algoritma (fungsi/program bagian) yang terintegrasi dengannya. g. Varian adalah variabel yang tidak mempunyai tipe data sedangkan invarian adalah variabel yang mempunyai tipe data. h. Flowchart atau bagan alur adalah diagram yang menampilkan langkah-langkah dan keputusan untuk melakukan sebuah proses dari suatu program. 5. DAFTAR PUSTAKA Utama, Yustia A. dkk. Dasar-dasar Pengembangan Perangkat Lunak dan Gim. 2021. Jakarta: Pusat Kurikulum dan Perbukuan BPPP Kemenristek. https://kelasdesain.com/tutorial-membuat-logo-indosiar/ http://www.kangwidi.com/2018/11/cara-merekam-dan-mengeditvocal.html https://jagoketik.com/blog/5-tahap-mudah-membuat-flowchartdengan-microsoft-visio/ https://today.line.me/id/v2/article/BMknBn http://rizarizkixxx.blogspot.com/2015/11/tool-pengembanganperangkat-lunak.html https://butterflydroid.wordpress.com/2018/07/31/pentingnyamemahami-penamaan-assets-di-dalam-desain/ https://idcloudhost.com/apa-itu-user-interface-ui-pengertianfungsi-dan-cara-kerjanya/
Cita Puspitasari, S.Pd dan Renita, S.Kom. 146 5. PEMROGRAMAN TERSTRUKTUR MODUL AJAR SMK MA’ARIF NU 1 AJIBARANG PEMROGRAMAN TERSTRUKTUR Kelas: X / Fase E Semester: 1 A. INFORMASI UMUM 1. Identitas Modul Nama Penyusun : Cita Puspitasari, S.Pd Renita, S.Kom Nama Sekolah : SMK MA’ARIF NU 1 AJIBARANG Tahun Penyusunan : 2021 Jenjang Sekolah : SMK Alokasi Waktu : 9 Pertemuan x 6 JP (54 JP) Elemen : Pemrograman terstruktur Capaian Pembelajaran : Pada akhir fase E, peserta didik mampu melakukan pemrograman terstruktur, antara lain penerapan struktur data yang terdiri dari data statis (array baik dimensi, panjang, tipe data, pengurutan) dan data dinamis (list, stack), penggunaan tipe data, struktur kontrol perulangan dan percabangan pada proyek pengembangan perangkat lunak sederhana dan gim. 2. Kompetensi Awal Peserta didik telah memiliki pengetahuan awal tentang: 1. Tools pengembang perangkat lunak dan gim 2. Algoritma 3. Flowchart 3. Profil Pelajar Pancasila Setelah mengikuti pembelajaran ini, Profil Pelajar Pancasila yang diharapkan muncul pada peserta didik adalah: 1. Bertakwa kepada Tuhan YME
Dasar-Dasar Perangkat Lunak dan GIM 147 2. Bernalar kritis 3. Mandiri 4. Bergotong royong 4. Sarana & Prasarana Sarana dan Prasarana yang dibutuhkan pada saat belajar dengan modul ini antara lain: LKPD Alat Tulis Android Laptop/komputer 5. Target Peserta Didik Peserta didik reguler/tipikal: 75% Peserta didik dengan kesulitan belajar: 15% Peserta didik dengan pencapaian tinggi: 10% 6. Model Pembelajaran yang Digunakan Pembelajaran secara project based learning B. KOMPONEN INTI 1. Tujuan Pembelajaran Peserta didik dapat menjelaskan bahasa pemrograman dengan kata-kata sendiri (pertemuan 16) Peserta didik dapat menganalisis jenis-jenis bahasa pemrograman (pertemuan 16) Peserta didik dapat menginstalasi tool pengembang perangkat lunak dengan mandiri (pertemuan 17) Peserta didik dapat menjelaskan tentang pengertian dan contoh variable dan tipe data dengan kata-kata sendiri (pertemuan 18) Peserta didik dapat menerapkan variabel dan tipe data pada program dengan kreatif dan mandiri (pertemuan 19) Peserta didik dapat menjelaskan tentang data statis (array) dengan kata-kata sendiri (pertemuan 20) Peserta didik dapat menerapkan data statis (array) pada program dengan kreatif dan mandiri (pertemuan 20) Peserta didik dapat menjelaskan tentang struktur kontrol perulangan dengan kata-kata sendiri (pertemuan 21)
Cita Puspitasari, S.Pd dan Renita, S.Kom. 148 Peserta didik dapat menerapkan struktur kontrol perulangan pada program dengan kreatif dan mandiri (Pertemuan 22). Peserta didik dapat menjelaskan tentang struktur kontrol percabangan dengan kata-kata sendiri (Pertemuan 23). Peserta didik dapat menerapkan struktur kontrol percabangan pada program dengan kreatif dan mandiri (Pertemuan 24). 2. Pemahaman Bermakna Bahasa pemrograman Tool pengembang perangkat lunak dan gim Variabel dan tipe data Data statis Struktur kontrol perulangan Struktur kontrol percabangan 3. Pertanyaan Pemantik Apa yang kalian ketahui tentang bahasa pemrograman? Sebutkan jenis-jenis bahasa pemrograman yang kalian ketahui! Apakah kalian pernah membuat sebuah program? Tool apa yang kalian gunakan untuk membuat program? Apa itu variabel dan tipe data? Apakah kalian pernah mendengar data statis? Apa itu data statis? Bagaimana cara menulis angka 1–1000 pada sebuah program? Bagaimana cara menentukan sebuah kondisi, misalkan lulus atau tidak lulus? 4. Persiapan Pembelajaran Menyiapkan presentasi pembelajaran Menyiapkan jobsheet praktik Membuat pertanyaan yang harus dijawab oleh peserta didik
Dasar-Dasar Perangkat Lunak dan GIM 149 5. Kegiatan Pembelajaran: KEGIATAN PEMBELAJARAN Pertemuan 16 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik. 4. Peserta didik melakukan assessment diagnostik kognitif dan non kognitif. 5. Menyampaikan pertanyaan pemantik yaitu: Apa yang kalian ketahui tentang bahasa pemrograman? Sebutkan jenis-jenis bahasa pemrograman yang kalian ketahui! 6. Guru memberikan gambaran tentang manfaat mempelajari materi yang akan dipelajari. 7. Guru menyampaikan tujuan pembelajaran pada pertemuan yang akan berlangsung. 20 menit Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang pengertian dan jenis-jenis Bahasa pemrograman di internet (Profil bernalar kritis) 2. Beberapa peserta didik menyampaikan informasi yang didapat di internet 210 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 150 tentang pengertian dan jenis-jenis bahasa pemrograman. Eksplorasi Konsep 3. Guru menyampaikan materi pengertian dan jenis-jenis Bahasa pemrograman 4. Peserta didik menyimak materi yang diberikan oleh guru Ruang Kolaborasi 5. Peserta didik membentuk kelompok untuk menganalisis contoh-contoh bahasa pemrograman (Profil bergotong royong). Refleksi Terbimbing 6. Guru membimbing peserta didik untuk melakukan diskusi kelompok. 7. Secara berkelompok, peserta didik mempresentasikan hasil pekerjaan kelompoknya. 8. Kelompok lain/guru menanggapi jawaban dari kelompok yang sedang presentasi. 9. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. Demonstrasi Kontekstual 10.Peserta didik secara mandiri mengerjakan soal yang diberikan oleh guru tentang bahasa pemrograman (Profil mandiri). Elaborasi Pemahaman 11.Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 12.Guru membimbing peserta didik yang
Dasar-Dasar Perangkat Lunak dan GIM 151 mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi Peserta Didik Bersama 1. Guru bersama peserta didik menyimpulkan materi yang telah dipelajari. 2. Guru memberikan penjelasan jawaban atas pertanyaan-pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru Aksi Nyata 4. Guru memberikan motivasi kepada peserta didik. 5. Guru menutup dengan memberikan salam. 40 menit KEGIATAN PEMBELAJARAN Pertemuan 17 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik 4. Guru menyampaikan tujuan pembelajaran yang ingin dicapai 5. Guru menyampaikan pertanyaan pemantik o Apakah kalian pernah membuat sebuah program? Tool apa yang kalian gunakan untuk membuat program? 6. Mengaitkan kejadian sehari-hari dengan materi 7. Memberikan gambaran tentang manfaat 20 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 152 mempelajari materi dalam kehidupan sehari-hari Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang macam-macam tools yang digunakan untuk mengembangkan perangkat lunak di internet (Profil bernalar kritis). 2. Peserta didik menyampaikan informasi yang didapat di internet tentang tools yang digunakan untuk membuat program. Eksplorasi Konsep 3. Guru memberikan penjelasan tentang jobsheet praktik untuk instalasi tool pengembang perangkat lunak. 4. Peserta didik menyimak penjelasan yang diberikan oleh guru. Ruang Kolaborasi 5. Peserta didik membentuk kelompok kemudian mengerjakan langkah-langkah yang sudah ada pada jobsheet (Profil bergotong royong). Refleksi Terbimbing 6. Secara berkelompok, peserta didik menunjukkan hasil pekerjaan kelompoknya. 7. Guru dan kelompok lain menanggapi hasil praktik dari kelompok tersebut. 8. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. 9. Peserta didik menanyakan kepada guru jika mengalami kesulitan saat praktik. Demonstrasi Kontekstual 10.Peserta didik menjawab pertanyaan yang 210 menit
Dasar-Dasar Perangkat Lunak dan GIM 153 diberikan oleh guru tentang proses instalasi tool pengembang perangkat lunak dan gim yang sudah dipraktikkan (Profil mandiri) Elaborasi Pemahaman 11.Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi 12.Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi Penutup Koneksi Antar Materi 1. Peserta didik bersama guru menyimpulkan hasil diskusi untuk pembelajaran hari ini. 2. Guru memberikan penjelasan jawaban atas pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 4. Guru memberikan motivasi kepada peserta didik. 5. Guru menutup dengan memberikan salam. 40 menit KEGIATAN PEMBELAJARAN Pertemuan 18 – 19 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia). 3. Guru mengecek kehadiran peserta didik. 4. Guru menyampaikan tujuan pembelajaran yang ingin dicapai. 20 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 154 5. Guru menyampaikan pertanyaan pemantik o Apa itu variabel dan tipe data? 6. Mengaitkan kejadian sehari-hari dengan materi. 7. Memberikan gambaran tentang manfaat mempelajari materi dalam kehidupan sehari-hari. Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang variabel dan tipe data di internet (Profil bernalar kritis). 2. Peserta didik menyampaikan informasi yang didapat di internet tentang variabel dan tipe data. Eksplorasi Konsep 3. Guru memberikan penjelasan mengenai jobsheet praktik untuk membuat variabel dan tipe data. 4. Peserta didik menyimak penjelasan yang diberikan oleh guru. Ruang Kolaborasi 5. Peserta didik membentuk kelompok kemudian mengerjakan langkah-langkah yang sudah ada pada jobsheet (Profil bergotong royong). Refleksi Terbimbing 6. Secara berkelompok, peserta didik menunjukkan hasil pekerjaan kelompoknya. 7. Guru dan kelompok lain menanggapi hasil praktik dari kelompok tersebut. 8. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. 9. Peserta didik menanyakan kepada guru 210 menit
Dasar-Dasar Perangkat Lunak dan GIM 155 jika mengalami kesulitan saat praktik. Demonstrasi Kontekstual 10.Peserta didik menjawab pertanyaan yang diberikan oleh guru tentang variabel dan tipe data (Profil mandiri). Elaborasi Pemahaman 11.Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 12.Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi Penutup Koneksi Antar Materi 1. Peserta didik bersama guru menyimpulkan hasil diskusi untuk pembelajaran hari ini. 2. Guru memberikan penjelasan jawaban atas pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 4. Guru memberikan motivasi kepada peserta didik. 5. Guru menutup dengan memberikan salam. 40 menit KEGIATAN PEMBELAJARAN Pertemuan 20 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia). 3. Guru mengecek kehadiran peserta didik. 20 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 156 4. Guru menyampaikan tujuan pembelajaran yang ingin dicapai. 5. Guru menyampaikan pertanyaan pemantik. o Apakah kalian pernah mendengar data statis? Apa itu data statis? 6. Mengaitkan kejadian sehari-hari dengan materi. 7. Memberikan gambaran tentang manfaat mempelajari materi dalam kehidupan sehari-hari. Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang data statis di internet (Profil bernalar kritis). 2. Peserta didik menyampaikan informasi yang didapat di internet tentang data statis. Eksplorasi Konsep 3. Guru memberikan penjelasan jobsheet praktik penggunaan array. 4. Peserta didik menyimak penjelasan yang diberikan oleh guru. Ruang Kolaborasi 5. Peserta didik membentuk kelompok kemudian mengerjakan jobsheet praktik penerapan array pada program (Profil bergotong royong). Refleksi Terbimbing 6. Secara berkelompok, peserta didik menunjukkan hasil pekerjaan kelompoknya. 7. Guru dan kelompok lain menanggapi hasil praktik dari kelompok tersebut. 8. Guru memberikan semangat kepada 210 menit
Dasar-Dasar Perangkat Lunak dan GIM 157 peserta didik lain untuk menjawab pertanyaan. 9. Peserta didik menanyakan kepada guru jika mengalami kesulitan saat praktik. Demonstrasi Kontekstual 10.Peserta didik menjawab pertanyaan yang diberikan oleh guru tentang array yang sudah dipraktikkan (Profil mandiri). Elaborasi Pemahaman 11.Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 12.Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi 1. Peserta didik bersama guru menyimpulkan hasil diskusi untuk pembelajaran hari ini. 2. Guru memberikan penjelasan jawaban atas pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 4. Guru memberikan motivasi kepada peserta didik. 5. Guru menutup dengan memberikan salam. 40 menit KEGIATAN PEMBELAJARAN Pertemuan 21 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin 20 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 158 kegiatan berdoa sebelum pembelajaran dimulai (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia). 3. Guru mengecek kehadiran peserta didik. 4. Guru menyampaikan tujuan pembelajaran yang ingin dicapai. 5. Guru menyampaikan pertanyaan pemantik o Bagaimana cara menulis angka 1–1000 pada sebuah program? 6. Mengaitkan kejadian sehari-hari dengan materi. 7. Memberikan gambaran tentang manfaat mempelajari materi dalam kehidupan sehari-hari. Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang struktur kontrol perulangan di internet (Profil bernalar kritis). 2. Peserta didik menyampaikan informasi yang didapat di internet tentang struktur kontrol perulangan. Eksplorasi Konsep 3. Guru memberikan penjelasan jobsheet praktik penerapan struktur kontrol perulangan pada sebuah program. 4. Peserta didik menyimak penjelasan yang diberikan oleh guru. Ruang Kolaborasi 5. Peserta didik membentuk kelompok kemudian mengerjakan praktik penerapan struktur kontrol perulangan pada sebuah program (Profil bergotong royong). Refleksi Terbimbing 6. Secara berkelompok, peserta didik menunjukkan hasil pekerjaan 210 menit
Dasar-Dasar Perangkat Lunak dan GIM 159 kelompoknya. 7. Guru dan kelompok lain menanggapi hasil praktik dari kelompok tersebut. 8. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. 9. Peserta didik menanyakan kepada guru jika mengalami kesulitan saat praktik. Demonstrasi Kontekstual 10. Peserta didik menjawab pertanyaan yang diberikan oleh guru tentang perulangan yang sudah dipraktikkan (Profil mandiri). Elaborasi Pemahaman 11. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 12. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi 1. Peserta didik bersama guru menyimpulkan hasil diskusi untuk pembelajaran hari ini. 2. Guru memberikan penjelasan jawaban atas pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 4. Guru memberikan motivasi kepada peserta didik. 5. Guru menutup dengan memberikan salam. 40 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 160 KEGIATAN PEMBELAJARAN Pertemuan 22 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik. 4. Guru menyampaikan tujuan pembelajaran yang ingin dicapai. 5. Guru menyampaikan pertanyaan pemantik o Bagaimana cara menentukan sebuah kondisi, misalkan lulus atau tidak lulus? 6. Mengaitkan kejadian sehari-hari dengan materi. 7. Memberikan gambaran tentang manfaat mempelajari materi dalam kehidupan sehari-hari. 20 menit Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang struktur kontrol percabangan di internet (Profil bernalar kritis). 2. Peserta didik menyampaikan informasi yang didapat di internet tentang struktur kontrol percabangan. Eksplorasi Konsep 3. Guru memberikan penjelasan jobsheet praktik penerapan struktur kontrol percabangan pada sebuah program. 4. Peserta didik menyimak penjelasan yang diberikan oleh guru. 210 menit
Dasar-Dasar Perangkat Lunak dan GIM 161 Ruang Kolaborasi 5. Peserta didik membentuk kelompok kemudian mengerjakan praktik penerapan struktur kontrol percabangan pada sebuah program (Profil bergotong royong). Refleksi Terbimbing 6. Secara berkelompok, peserta didik menunjukkan hasil pekerjaan kelompoknya. 7. Guru dan kelompok lain menanggapi hasil praktik dari kelompok tersebut. 8. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. 9. Peserta didik menanyakan kepada guru jika mengalami kesulitan saat praktik. Demonstrasi Kontekstual 10. Peserta didik menjawab pertanyaan yang diberikan oleh guru tentang struktur kontrol percabangan yang sudah dipraktikkan (Profil mandiri) Elaborasi Pemahaman 11. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 12. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi 1. Peserta didik bersama guru menyimpulkan hasil diskusi untuk pembelajaran hari ini. 2. Guru memberikan penjelasan jawaban atas pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 4. Guru memberikan motivasi kepada peserta 40 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 162 didik. 5. Guru menutup dengan memberikan salam. KEGIATAN PEMBELAJARAN Pertemuan 23–24 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia). 3. Guru mengecek kehadiran peserta didik. 4. Guru menyampaikan tujuan pembelajaran yang ingin dicapai. 5. Guru menyampaikan pertanyaan pemantik o Bagaimana cara menulis angka 1–1000 pada sebuah program? o Bagaimana cara mentukan sebuah kondisi, misalkan lulus atau tidak lulus? 6. Mengaitkan kejadian sehari-hari dengan materi. 7. Memberikan gambaran tentang manfaat mempelajari materi dalam kehidupan sehari-hari. 20 menit Kegiatan Inti Mulai dari diri 13. Peserta didik menggali informasi kembali materi tentang struktur kontrol perulangan dan percabangan yang sudah dipelajari (Profil bernalar kritis). Eksplorasi Konsep 14. Guru memberikan penjelasan jobsheet proyek program sederhana yang menerapkan struktur kontrol percabangan dan perulangan. 210 menit
Dasar-Dasar Perangkat Lunak dan GIM 163 15. Peserta didik menyimak penjelasan yang diberikan oleh guru. Ruang Kolaborasi 16. Peserta didik membentuk kelompok kemudian mengerjakan proyek yang diberikan oleh guru (Profil bergotong royong). Refleksi Terbimbing 17. Secara berkelompok, peserta didik menunjukkan hasil pekerjaan kelompoknya. 18. Guru dan kelompok lain menanggapi hasil praktik dari kelompok tersebut. 19. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. 20. Peserta didik menanyakan kepada guru jika mengalami kesulitan saat praktik. Demonstrasi Kontekstual 21. Peserta didik menjawab pertanyaan yang diberikan oleh guru tentang proyek yang sudah dikerjakan (Profil mandiri). Elaborasi Pemahaman 22. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 23. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi 1. Peserta didik bersama guru menyimpulkan hasil diskusi untuk pembelajaran hari ini. 2. Guru memberikan penjelasan jawaban atas pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. 40 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 164 Aksi Nyata 4. Guru memberikan motivasi kepada peserta didik. 5. Guru menutup dengan memberikan salam. 6. Assessment Soal Diskusi dan Tes Formatif (Terlampir) 7. Pengayaan & Remedial Terlampir 8. Refleksi Peserta Didik dan Guru Apa ada kendala pada kegiatan pembelajaran? Apakah semua peserta didik aktif selama mengikuti kegiatan pembelajaran? Apa saja kesulitan yang dihadapi peserta didik selama mengikuti kegiatan pembelajaran? Apakah kesulitan yang dialami peserta didik dapat teratasi? Apa level pencapaian rata-rata peserta didik dalam kegiatan pembelajaran ini? Apakah seluruh peserta didik dapat tuntas dalam pelaksanaan pembelajaran? Apa strategi yang harus dipilih supaya peserta didik dapat menuntaskan kompetensi? C. LAMPIRAN 1. LKPD a) Tes formatif Soal Latihan 1 Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 1. Jelaskan pengertian bahasa pemrograman! 2. Berikan contoh bahasa pemrograman! 3. Jelaskan pengertian variabel! 4. Berikan contoh penulisan variabel yang benar! 5. Jelaskan pengertian tipe data! 6. Sebutkan contoh tipe data!
Dasar-Dasar Perangkat Lunak dan GIM 165 7. Apa yang dimaksud dengan array? 8. Tuliskan contoh array! 9. Jelaskan konsep struktur kontrol perulangan! 10. Jelaskan konsep struktur kontrol percabangan! Kunci jawaban dan norma penilaian Soal Latihan 1 No Kunci Jawaban Skor 1 Bahasa Pemrograman (programming language) adalah sebuah instruksi standar untuk memerintah komputer agar menjalankan fungsi tertentu 10 2 C++, javaScript, Pascal, Java, PHP dll 10 3 Variabel adalah wadah sementara nilai dengan tipe data tertentu pada sebuah alamat memori 10 4 jari2 ibuKota result_x 10 5 Tipe data adalah jenis dari sebuah data 10 6 Integer, boolean, string dll 10 7 Array adalah istilah yang digunakan dalam program untuk menyimpan data bertipe sama dalam sebuah urutan indeks akses 10 8 var mahasiswa =new Array(); mahasiswa = ['Rini','Aldi','Acep','Putra'] 10 9 Perulangan (looping) adalah suatu bentuk kontrol program yang memungkinkan kita mengulang eksekusi program selama kondisi masih terpenuhi. 10 10 Percabangan (branching) adalah salah satu bentuk kontrol program. Percabangan berguna untuk mengatur alur jalannya program sesuai dengan suatu kondisi yang terpenuhi. 10 Total 100
Cita Puspitasari, S.Pd dan Renita, S.Kom. 166 b) LKPD Jobsheet Praktik Penerapan Variabel dan Tipe data Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code 3. Node.js Langkah kerja: Buat projek baru pada VSC kemudian ketik script latihan berikut ini! Jelaskan script tersebut kemudian tulis outputnya! Latihan 1 var namaDepan; var namaBelakang; namaDepan = "Ani"; namaBelakang = namaDepan; console.log(namaDepan, namaBelakang); Latihan 2 var angka1=10; var angka2=5; var hasil = angka1+angka2; console.log(hasil); Jobsheet Praktik Data Statis (Array) Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code 3. Node.js
Dasar-Dasar Perangkat Lunak dan GIM 167 Langkah kerja: Buat projek baru pada VSC kemudian ketik script latihan berikut ini! Jelaskan script tersebut kemudian tulis outputnya! Latihan 3 const array1 = [50, 40, 30]; array1[0] = 15; array1[1] = 30; array1[2] = 10; console.log(array1); Latihan 4 const array = ["RPL", "TKJ", "TSM"]; console.log(array[0]); Jobsheet Praktik Struktur Kontrol Perulangan Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code 3. Node.js Langkah kerja: Buat projek baru pada VSC kemudian ketik script latihan berikut ini! Jelaskan script tersebut kemudian tulis outputnya! const array = []; let i = 0; while (i < 5) { array.push(i); i++; }
Cita Puspitasari, S.Pd dan Renita, S.Kom. 168 console.log(array); Jobsheet Praktik Struktur Kontrol Percabangan Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code 3. Node.js Langkah kerja: Buat projek baru pada VSC kemudian ketik script latihan berikut ini! Jelaskan script tersebut kemudian tulis outputnya! var num; num = 10; if (num > 15) { console.log("nilai lebih dari 15"); } else if (num < 5) { console.log("nilai kurang dari 5"); } else { console.log("nilai diantara 5 sampai 15"); } Norma Penilaian Praktik No Aspek penilaian Skor maks 1 Hasil praktik 50 2 Kerja sama kelompok 20 3 Waktu 20 Total skor 90 c) Pengayaan dan Remedi Soal Remedi Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 1. Jelaskan pengertian bahasa pemrograman! 2. Berikan contoh bahasa pemrograman! 3. Jelaskan pengertian variabel! 4. Berikan contoh penulisan variabel yang benar!
Dasar-Dasar Perangkat Lunak dan GIM 169 5. Jelaskan pengertian tipe data! 6. Sebutkan contoh tipe data! 7. Apa yang dimaksud dengan array? 8. Apa yang dimaksud dengan list and stack? 9. Jelaskan konsep struktur kontrol perulangan! 10. Jelaskan konsep struktur kontrol percabangan! Soal Pengayaan Carilah materi tentang pemrograman berorientasi objek! Apa yang dimaksud dengan pemrograman berorientasi objek! 2. Bahan Bacaan Guru dan Peserta Didik MATERI PERTEMUAN 16 BAHASA PEMROGRAMAN Bahasa adalah sarana untuk berkomunikasi, dalam hal ini adalah komunikasi antara manusia dengan komputer. Program adalah deretan perintah atau instruksi yang dikenal oleh mesin komputer untuk mengerjakan suatu proses tertentu. Jadi, bahasa pemrograman adalah sebuah bahasa yang menerjemahkan perintah yang diberikan oleh pengguna dalam susunan instruksi berupa kodekode terstruktur kepada mesin komputer untuk mengerjakan suatu proses tertentu. Bahasa pemrograman memiliki beberapa karakteristik, yaitu: 1. Memiliki tata bahasa dengan aturan khisis dalam pendeklarasiannya. 2. Memiliki interrupt libraty untuk menerjemahkan perintah yang diinputkan. 3. Menggunakan interpreter atau compiler untuk menerjemahkan sintaks pemrograman ke dalam bahasa mesin. Berdasarkan penggunaannya, ada dua kategori bahasa pemrograman yaitu: 1. Bahasa pemrograman umum, yaitu bahasa pemrograman yang digunakan untuk membuat aplikasi yang bersifat umum, contohnya Bahasa C, Java, JavaScript, PHP, dan lain-lain.
Cita Puspitasari, S.Pd dan Renita, S.Kom. 170 2. Bahasa pemrograman khusus, yaitu bahasa pemrograman yang digunakan untuk membuat aplikasi yang bersifat khusus atau untuk keperluan tertentu, contoh COBOL untuk keperluan bisnis, FORTRAN untuk komunikasi ilmiah, assembler untuk pengontrolan hardware, serta prolog dan phyton untuk artificial intelegence (kecerdasan buatan). Sedangkan menurut levelnya, bahasa pemrograman dibagi menjadi dua yaitu: 1. Bahasa tingkat rendah atau low level language Adalah bahasa yang hanya dimengerti oleh mesin berupa bilangan 0 dan 1, contohnya bahasa rakitan atau assembler. 2. Bahasa tingkat tinggi atau high level language Adalah bahasa yang dirancang mendekati bahasa manusia sehari-hari, sehingga mudah untuk dimengerti manusia. Bahasa tingkat tinggi membutuhkan translator untuk mentranslasikannya ke dalam bahasa mesin. Contohnya Bahasa C, Java, JavaScript, PHP, dan lain-lain. Berikut ini terdapat 2 jenis translator yang digunakan untuk menerjemahkan bahasa pemrograman ke dalam bahasa mesin, yaitu: 1. Interpreter Kode program akan diterjemahkan baris demi baris hingga akhir program tanpa melihat adanya error. Jadi, walaupun terdapat error pada kode program, kode program tersebut akan tetap dieksekusi atau dijalankan. 2. Compiler Compiler akan memerika semua baris kode program yang sudah dideklarasikan sampai tidak terjadi error. Jika ternyata ada kesalahan kode, maka compiler akan menghentikan eksekusi dan memberitahukan letak kesalahan baris program. MATERI PERTEMUAN 17 CARA MENGINSTALL VISUAL STUDIO CODE Berikut ini terdapat 2 jenis translator yang digunakan untuk Apa itu Visual Studio Code ? Visual Studio Code adalah text editor yang dikembangkan oleh
Dasar-Dasar Perangkat Lunak dan GIM 171 Microsoft yang dirilis pada awal 29 April 2015. Visual Studio Code bisa disebut dengan VSCode. Versi VSCode saat ini yang dirilis yaitu Version 1.52 dikeluarkan pada bulan November 2020. Visual Studio Code merupakan salah satu text editor yang paling populer di kalangan Web developer di seluruh dunia. Para web developer itu yang mengembangkan aplikasi web menggunakan ASP.NET, Node.js, HTML, CSS, Less, Sass, dan JSON. Seperti editor pada umumnya VSCode memiliki fitur syntax coloring dan bracket matching. Bahasa pemrograman yang mendukung fitur tadi adalah Batch, C++, Closure, Makefile, Markdown, Objective-C, Perl, PHP, PowerShell, Python, R, Razor, Ruby, SQL, Visual Basic, dan lain-lain. Cara Install Visual Studio Code? Download Aplikasi Visual Code Studio terbaru pada link https://code.visualstudio.com/Download. Klik tombol yang diberi tanda merah. Setelah didownload buka file maka akan muncul dialog license aggreement seperti gambar di bawah ini. Pilih “I accept the agreement” untuk menyetujui kebijakan dari VSCode lalu klik Next.
Cita Puspitasari, S.Pd dan Renita, S.Kom. 172 Kemudian Ceklis “Create Desktop Icon” jika ingin membuat shortcut VSCode nya kemudian ceklis “Add to PATH (available after restart) jika sudah klik Next. Klik Install tunggu sampai “Setup has finished installing Visual Studio Code on your computer”. Kemudian klik Finish seperti gambar di bawah ini.
Dasar-Dasar Perangkat Lunak dan GIM 173 ketika sudah selesai installasi maka dialog menjadi seperti di bawah ini. Biarkan centang pada Lounch Visual Code. Jika ingin membuka langsung Visual Studio Code. Bagaimana Cara Install Extension VS Code? Caranya mudah, install Extension Visual Studio Code pergi ke extension atau tekan ctrl+shift+x. Cari extenstion yang diinginkan diinstall dan klik install untuk menginstall Beberapa extension yang sering digunakan Web Development untuk mempermudah mengembangkan website atau aplikasi:
Cita Puspitasari, S.Pd dan Renita, S.Kom. 174 1. PHP Intelephense memberikan fitur code completion dengan saran yang detail dan dukungan go to langsung ke sumber. Extension ini membuat kita tidak perlu mengingat seluruh sintaks perintah yang akan ditulis karena fitur intellisense dapat langsung bekerja. 2. Auto Close Tag memberikan fitur auto close pada html. Auto Close Tag 3. Guides memberikan fitur garis yang berbada pada setiap tab yang sudah kita tulis. Guides visual code Cara Menginstall Node.js Cara Install Visual Studio Code? Apa itu Node.js? Ada yang sudah tau JavaScript? Kalo selama ini kita mengenal JavaScript sebagai client side scripting, sekarang JavaScript sudah ada untuk server side scriptingnya juga. Dialah Node.js. Artinya sekarang anda bisa membangun layanan web menggunakan bahasa JavaScript. Node.js mempunyai NPM atau Node Package Manager, yaitu managemen paket library untuk Node.js. NPM memudahkan pengembang untuk membagikan library dan aplikasi node, sehingga orang lain dapat dengan mudah memasang dan mencopot library pada programnya.
Dasar-Dasar Perangkat Lunak dan GIM 175 Adapun cara menginstal Node.js khususnya di sistem operasi windows adalah sebagai berikut: Download Node.JS Installer pada website resminya di https://nodejs.org/download/ 1. Jalankan file msi yang sudah didownload. 2. Ikuti petunjuk dan User Agreement. Dan tunggu sampai installasi selesai. 3. Restart computer agar node js dapat terinstall dengan sempurna. 4. Jika sudah mengikuti tahap-tahap di atas, maka sekarang NodeJS sudah terinstall.
Cita Puspitasari, S.Pd dan Renita, S.Kom. 176 5. Untuk mengetahui instalasi berhasil atau tidak, Anda bisa membuka command prompt, dan ketikkan kode berikut. node -v untuk melihat versi node js yang terinstall npm -v untuk melihat versi npm yang terinstall MATERI PERTEMUAN 18-19 PENGENALAN JAVASCRIPT JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif. JavaScript dapat meningkatkan fungsionalitas pada halaman web. Bahkan dengan JavaScript ini anda bisa membuat aplikasi, tools, atau bahkan game pada web. Bicara teknis, JavaScript atau kita singkat menjadi JS merupakan bahasa pemrograman jenis interpreter, sehingga tidak memerlukan compiler untuk menjalankannya. JavaScript memiliki fitur-fitur seperti berorientasi objek, client-side, high-level programming, dan loosely typed. JavaScript menjadi salah satu bahasa pemrograman yang sangat populer. Mengapa? Di tahun 2016 saja sudah ada sekitar
Dasar-Dasar Perangkat Lunak dan GIM 177 92% pembuatan web menggunakan JS, apalagi di tahun-tahun sekarang. Tentunya web yang dibuat dengan JS akan lebih dinamis dan interaktif. Banyak perusahaan top global yang sudah mengimplementasikan JS sebagai bahasa pemrograman andalannya. Kita bisa buktikan juga bahwa JS itu populer dan menjadi bahasa yang paling banyak digunakan di Github. Seperti FB, Linkedin, Trello, Medium, bahkan Google, salah satu bahasa yang digunakan di antaranya adalah JS (JavaScript). Itulah alasan mengapa para developer berlomba-lomba untuk jadi yang terbaik dalam mempelajari JavaScript. SEJARAH JAVASCRIPT Pada tahun 1994 JavaScript mulai dikenal, pada saat itu web dan internet sudah mulai berkembang. JavaScript didesain oleh Brendan Eich yang merupakan karyawan Netscape. Transformasi nama JavaScript, dimulai dari Mocha, Mona, LiveScript, hingga akhirnya resmi bernama JavaScript. Versi awal bahasa JS hanya dipakai di kalangan Netscape beserta dengan fungsionalitas pun yang masih terbatas. Singkat cerita pada tahun 1996 JavaScript secara resmi dinamakan sebagai ECMAScript. ECMAScript 2 dikembangkan pada tahun 1998 yang dilanjutkan dengan ECMAScript 3 setahun kemudian. ECMAScript terus dikembangkan sampai akhirnya menjadi JavaScript atau JS hingga saat ini. Pada tahun 2016, 92% web diketahui telah menggunakan JavaScript. Itulah mengapa JavaScript atau JS terus berkembang. FUNGSI JAVASCRIPT Selain membuat web jadi lebih dinamis dan interaktif, JS digunakan juga untuk proses logika data. “Intinya, fungsi JS tidak hanya soal urusan front end, tapi juga sekaligus dipakai untuk urusan back end,” imbuh developer. KEUNGGULAN JAVASCRIPT 1. General Purpose Saat ini JavaScript tidak hanya digunakan di sisi client (browser) saja. Semenjak adanya Node.js JavaScript dapat digunakan di luar dari browser. Dengan begitu Anda bisa mengembangkan back-end
Cita Puspitasari, S.Pd dan Renita, S.Kom. 178 (server), console, program desktop, mobile, IoT, game, dan lainnya menggunakan JavaScript. 2. Mudah untuk Dipelajari Setiap bahasa pemrograman memiliki tingkat kesulitan yang berbeda. Tingkat kesulitan bisa dilihat dari beberapa faktor. JS masih tergolong mudah dipelajari asalkan serius dalam belajar dan selalu berani melakukan improvement atau bermain-main dengan itu. 3. Sangat Powerfull JavaScript termasuk bahasa pemrograman yang sudah mature, sifat inilah yang membuat JavaScript sangat powerfull. Dulu, website basisnya masih PHP atau mungkin saja kita pakai WordPress. Semua logika web dibuat dan bergantung pada sisi server. Inilah yang membuat web browser lebih statis. Browser modern memiliki sifat interaktif dan dinamis. Logika yang sebelumnya harus di-handle oleh sisi server, kini sepenuhnya dapat di-handle pada sisi client, semua berkat JavaScript. 4. Banyak perusahaan yang mengimplementasikan JS JavaScript menempati urutan ke-4 soal gaji developer tertinggi di tahun 2018 dengan rata-rata pendapatan adalah $105,415 (Techrepublic). Bayangkan jika dirupiahkan? Apalagi pada tahun ini bisa makin lebih besar nih. Dan lebih manisnya lagi, jika Anda bekerja sebagai developer Google dan sebagainya karena mereka semua sudah menerapkan JavaScript sebagai penunjang teknologi. Dan itupun juga tergantung pada level pemrograman Anda dan juga posisi kerja. 5. Dukungan Komunitas Inilah salah satu alasan JavaScript banyak digandrungi oleh developer. Dukungan dari komunitas adalah hal penting dalam memilih sebuah bahasa pemrograman. Tentu saja, jika anda sedang mengembangkan sebuah aplikasi, serta menemukan bug. Dengan dukungan komunitas yang baik, maka anda akan lebih mudah untuk menemukan solusi dari bug tersebut. PENULISAN VARIABEL, TIPE DATA, DAN OPERATOR DI JAVASCRIPT Dalam JS aturan untuk menuliskan sebuah variable adalah: Nama variabel dapat terdiri dari angka, huruf, dan $ atau _, tetapi tidak boleh mengandung spasi atau dimulai dengan angka. Contohnya:
Dasar-Dasar Perangkat Lunak dan GIM 179 var namaDepan; var angka_1; Dalam JS, penulisan nama variabel tidak diikuti dengan tipe data. Untuk memberikan nilai pada variabel, Anda bisa menggunakan tanda sama dengan (=). Jika ingin memberikan nilai berupa string maka nilai tersebut harus diapit oleh tanda petik dua (“ … “), sedangkan jika nilai yang diberikan berupa angka maka tidak perlu menuliskan tanda petik dua. Contohnya: var namaDepan; namaDepan = “ana”; var angka_1; angka_1 = 10; Pemberian nilai pada variabel juga dapat ditulis langsung pada saat membuat nama variabel, contohnya: var angka_1 = 0; Pada JS terdapat cara lain untuk mendeklarasikan variabel yaitu dengan keyword let, keyword ini memungkinkan agar tidak terjadi pemberian nilai yang berulang pada variabel yang sama. Contohnya adalah sebagai berikut: let namaDepan = “ana”; let namaDepan = “ani”; Pada kode program di atas akan memunculkan eror karena variabel nama depan diberi nilai 2 kali. Selain keyword let, terdapat juga keyword const untuk mendeklarasikan variabel. Penggunaan const bersifat read-only. Nilai dari variabel dengan keyword const tidak dapat diubah, contohnya: const namaDepan = “ana”; namaDepan = “ani”; Pada kode program di atas akan memunculkan error, karena nilai dari namaDepan sudah ditentukan.
Cita Puspitasari, S.Pd dan Renita, S.Kom. 180 MATERI PERTEMUAN 20 Pengertian Array Array adalah variabel jamak atau bisa disebut juga tipe data yang dapat menampung banyak nilai. Ibaratnya seperti sebuah kotak lemari yang dapat menyimpan pakaian, sepatu, buku. Array juga dapat menyimpan beberapa data, baik dengan tipe yang sama maupun berbeda. Inisialisasi Array di Javascript var mahasiswa =new Array(); Array didefinisikan dengan kata new kemudian diikuti objek Array(). Di dalam javascript, array merupakan sebuah objek. Contoh: siswa = ['Rini','Aldi','Acep','Putra'] Sintaks di atas adalah untuk membuat elemen dalam array. Dengan menggunakan tanda siku [] yang nilainya dapat diisi di dalamnya. Jika nilai berupa karakter atau string mengunakan tanda petik, jika numerik tanpa tanda petik. Untuk memisahkan antara elemen 1 dan lainnya menggunakan tanda koma. Array memiliki index yang dimulai dari 0 sebagai contoh dari array mahasiswa di atas jika kita tempatkan pada masing-masing indeks maka Rini menempati posisi indeks ke-0, Aldi ke-1, Acep ke-2 dan Putra ke-3. Jika kita ingin menampilkan elemen array maka perlu didefinisikan elemen pada indeks ke berapa yang ingin ditampilkan. Sebagai contoh saya ingin mencetak Acep, maka indeks yang ditulis adalah 2. console.log(siswa[2])
Dasar-Dasar Perangkat Lunak dan GIM 181 Hasil output Acep PERULANGAN DI JAVASCRIPT Dalam pemrograman pasti akan ada proses untuk mengerjakan perintah yang sama yang harus diulang. Misalnya kita ingin mencetak kalimat Hello world sebanyak 100 kali, apakah kita harus menulis kode console.log(‘Hello world’) sebanyak 100 kali ? Tentulah tidak karena sangat merepotkan dan tidak efisien. Dibutuhkan yang namanya perulangan atau looping untuk menyelesaikan masalah yang demikian. Terdapat tiga jenis perulangan, yaitu: Perulangan For Perulangan While Perulangan Do While Perulangan For Penggunaan perulangan for diperuntukkan ketika sudah diketahui berapa kali jumlah perulangan yang harus dilakukan berdasarkan kondisi yang ditetapkan. Bentuk umum: for (nilai_awal;kondisi;modifier){ perintah_yang_diulang; } Keterangan: nilai_awal merupakan nilai yang ditetapkan sebagai nilai awal menjadi patokan perulangan harus dimulai dari nilai ini. kondisi merupakan pendefinisian kondisi menggunakan operator relasi/pembanding. modifier merupakan bagian di mana kita bisa menentukan berapa jumlah penambahan nilai (increment) atau pengurangan (decrement) dalam proses perulangan. MATERI PERTEMUAN 21 – 22
Cita Puspitasari, S.Pd dan Renita, S.Kom. 182 Setiap Perintah yang berada dalam blok for secara otomatis akan diulang saat kondisi bernilai benar. Contoh: var i; for (i=1;i<=5;i++){ console.log("Perulangan for ke-"+i) } Hasil: Perulangan for ke-1 Perulangan for ke-2 Perulangan for ke-3 Perulangan for ke-4 Perulangan for ke-5 Dapat dilihat dari contoh di atas perulangan for dilakukan sebanyak 5 kali dari 1 sampai 5 sesuai dengan nilai awal yang ditetapkan yaitu i=1 dengan kondisi i<=5. Ketika kondisi bernilai benar maka nilai i akan ditambahkan 1 (i++) proses ini dinamakan increment. Dalam proses perulangan nilai i dapat ditambah sesuai yang diinginkan. Misalnya kita ingin menambah 2 dari nilai awal maka modifier yang didefinisikan adalah i=i+2. var i; for (i=1;i<=5;i=i+2){ console.log("Perulangan for ke-"+i) } Hasil: Perulangan for ke-1 Perulangan for ke-3 Perulangan for ke-5
Dasar-Dasar Perangkat Lunak dan GIM 183 Hasilnya nilai i dalam proses perulangan akan terus ditambah 2. sehingga hasil output nya adalah 1,3,5. Perulangan While Perulangan while pada dasarnya digunakan untuk perulangan yang belum diketahui berapa kali perulangan akan dilakukan. Bentuk umumnya seperti berikut: while (kondisi){ perintah_yang_diulang; } Selama kondisi bernilai benar (true) perintah dalam blok while akan terus diulang. Untuk menghentikan perulangan kita perlu mengubah nilai agar kondisi bernilai salah (false). Contoh: const ourArray = []; let i = 0; while (i < 5) { ourArray.push(i); i++; } console.log(ourArray); Output dari kode program di atas adalah [ 0, 1, 2, 3, 4 ] Perulangan Do While Perulangan do while akan melakukan perulangan minimal satu kali kemudian barulah dicek kondisinya. Bentuk umum: do { perintah_yang_diulang } while (kondisi) Contoh: const ourArray = []; let i = 0; do { ourArray.push(i);
Cita Puspitasari, S.Pd dan Renita, S.Kom. 184 i++; } while (i < 5); console.log(ourArray); Output dari kode program di atas adalah [ 0, 1, 2, 3, 4 ] Kesimpulan Jika pada perulangan for untuk melakukan perulangan yang sudah diketahui berapa kali jumlah perulangan harus dilakukan, sementara pada perulangan while maupun do while digunakan untuk perulangan yang belum diketahui jumlah iterasi yang dilakukan. MATERI PERTEMUAN 23 – 24 PERCABANGAN DI JAVASCRIPT Percabangan adalah suatu keadaan dimana pernyataan dapat dieksekusi apabila suatu kondisi memenuhi syarat untuk mengerjakan pernyataan tersebut. Beberapa percabangan yang akan dipelajari adalah: if, if else, else if, switch. Percabangan If di Javascript Percabangan If merupakan bentuk percabangan yang paling sederhana jika dibandingkan dengan bentuk percabangan lain. Bentuk umumnya seperti berikut: if (kondisi){ pernyataan } Percabangan if hanya memiliki satu kondisi, setiap perintah program yang ada dalam blok if akan dieksekusi saat kondisi yang ditetapkan bernilai benar (true).
Dasar-Dasar Perangkat Lunak dan GIM 185 Contoh: a=10 if (a==10){ console.log("Variabel a berisini nilai 10") } Dapat dilihat pada contoh di atas variabel a kita tetapkan nilainya adalah 10. Kemudian percabangan if akan mengecek kondisi apakah a==10 ? kondisi ini bernilai benar (true) sehingga perintah console.log(“Variabel a berisi nilai 10”) akan dieksekusi. Bagaimana jika kondisi tidak terpenuhi? Karena percabangan if hanya akan mengerjakan ketika kondisi terpenuhi, jika tidak terpenuhi maka program tidak akan menjalankan perintah apapun yang didefinisikan dalam blok if. Agar program dapat mengeksekusi pernyataan alternatif maka kita perlu menambahkan blok ELSE. Percabangan IF ELSE Blok else memungkinkan program untuk menjalankan pernyataan alternatif jika kondisi bernilai salah (false). if (kondisi){ pernyataan1 }else { pernyataan2 } Pernyataan 1 akan dieksekusi ketika kondisi benar sementara jika salah maka pernyataan2 yang akan dieksekusi. Contoh: var nilai=10 if (nilai>=60){ console.log("Selmat Anda lulus!") }else { console.log("Maaf Anda gagal!")
Cita Puspitasari, S.Pd dan Renita, S.Kom. 186 } Output: Maaf Anda gagal! Variabel nilai diberi nilai 10, percabangan if akan mengecek kondisi apakah nilai>=60? Salah sehingga perintah pada blok else lah yang dieksekusi dengan menampilkan kalimat: Maaf Anda gagal! Percabangan Else If Jika pada bentuk percabangan if hanya memiliki satu kondisi. Pada bentuk percabangan Else if mempunyai lebih dari satu kondisi. if (kondisi1){ pernyataan1 }else if (kondisi2){ pernyataan2 }else if (kondisi3){ pernyataan3 }else { pernyataan_alternatif } Contoh: var nilai = 70 if (nilai > 80){ console.log("grade A") }else if(nilai <= 80 && nilai >60){ console.log("grade B") }else if(nilai <= 60 && nilai >50){ console.log("grade C") }else{
Dasar-Dasar Perangkat Lunak dan GIM 187 console.log("grade D") } Output dari contoh di atas adalah “grade B”, karena diketahui nilai awal adalah 70. Percabangan Switch Case Switch case merupakan struktur pemilihan yang bekerja dengan cara membandingkan suatu nilai pada setiap case yang ada. Dengan demikian akan menghasilkan banyak kemungkinan dari nilai yang dibandingkan. Bentuk Umum: switch(nilai) { case nilai1: //Blok perintah yang dieksekusi, bila nilai1 sama dengan nilai break case nilai2: //Blok perintah yang dieksekusi, bila nilai2 sama dengan nilai break case nilai3: //Blok perintah yang dieksekusi, bila nilai3 sama dengan nilai break default //Blok perintah yang dieksekusi jika semua nilai tidak sama dengan nilai pembanding } Setiap case nilai yang dilakukan pembanding bisa berupa numerik ataupun karakter string. Blok perintah yang ada di masingmasing case akan dijalankan saat case nilai sama dengan nilai pembanding. Setiap case akan diakhiri dengan break berfungsi agar program tidak mengeksekusi pernyataan selanjutnya dalam switch. Di bagian akhir terdapat bagian default. Bagian ini akan dijalankan jika semua case tidak memenuhi kondisi yang ada. Perintah default tidak wajib, jika memang diperlukan bisa digunakan.
Cita Puspitasari, S.Pd dan Renita, S.Kom. 188 Contoh: Pada contoh program switch case saya membuat program untuk menentukan bobot nilai dari grade nilai A, B, C, D, E. var menu; menu=3; switch(menu){ case 1: console.log("anda memilih menu 1"); break; case 2: console.log("anda memilih menu 2"); break; case 3: console.log("anda memilih menu 3"); break; case 4: console.log("anda memilih menu 4"); break; } Output dari kode program di atas adalah “anda memilih menu 3”, karena nilai dari menu adalah 3. 3. Glosarium Bahasa pemrograman atau sering diistilahkan juga dengan bahasa komputer atau bahasa pemrograman komputer adalah instruksi standar untuk memerintah. Variabel adalah wadah sementara nilai dengan tipe data tertentu pada sebuah alamat memori. Tipe data adalah jenis dari sebuah data. Array adalah istilah yang digunakan dalam program untuk menyimpan data bertipe sama dalam sebuah urutan indeks akses. Perulangan (looping) adalah suatu bentuk kontrol program yang memungkinkan kita mengulang eksekusi program selama kondisi masih terpenuhi. Percabangan (branching) adalah salah satu bentuk kontrol program. Percabangan berguna untuk mengatur alur jalannya program sesuai dengan suatu kondisi yang terpenuhi.
Dasar-Dasar Perangkat Lunak dan GIM 189 4. Daftar Pustaka Novianto, Andi. 2017. Pemrograman Dasar untuk SMK/MAK Kelas X. Surakarta: Erlangga. David, Maykhel. 2015. Cara Install Node JS dan NPM pada Windows. https://www.dumetschool.com/blog/cara-installnode-js-dan-npm-pada-windows diakses pada tanggal 19 Januari 2022 pukul 14.40 WIB FreeCodeCamp.org. https://www.freecodecamp.org/learn/javascript-algorithmsand-data-structures/basic-javascript/ diakses pada tanggal 19 Januari 2022 pukul 14.00 WIB. Haryanto, Toni. 2015. Cara Install Node.js. https://www.codepolitan.com/cara-install-nodejs diakses pada tanggal 19 Januari 2022 pukul 14.40 WIB. Manu, Gerald A., Bahasa Pemrograman. https://cbn.ac.id/my/blog/view/56/bahasa-pemrograman diakses pada tanggal 16 Oktober 2021 pukul 10.00 WIB. Prastya, Surya Hadi. 2021. Cara Menginstall Visual Studio Code di Windows. https://tutorialkodingku.com/cara-menginstallvisual-studio-code-di-windows/ diakses pada tanggal 16 Oktober 2021 pukul 10.00 WIB.
Cita Puspitasari, S.Pd dan Renita, S.Kom. 190 6. PEMROGRAMAN BERORIENTASI OBJEK MODUL AJAR SMK MA’ARIF NU 1 AJIBARANG PEMROGRAMAN BERORIENTASI OBJEK Kelas: X / Fase E Semester: 1 A. INFORMASI UMUM 1. Identitas Modul Nama Penyusun : Cita Puspitasari, S.Pd Renita, S.Kom Nama Sekolah : SMK MA’ARIF NU 1 AJIBARANG Tahun Penyusunan : 2021 Jenjang Sekolah : SMK Alokasi Waktu : 8 Pertemuan x 6 JP (48 JP) Elemen : Pemrograman berorientasi objek Capaian Pembelajaran : Pada akhir fase E, peserta didik mampu melakukan pemrograman berorientasi objek dengan menerapkan class, objek, method, dan package, membedakan berbagai macam access modifier, menunjukkan enkapsulasi, interface, pewarisan, dan polymorphism pada projek pengembangan perangkat lunak sederhana. 2. Kompetensi Awal Peserta didik telah memiliki pengetahuan awal tentang: a. Fungsi atau prosedur yang dibutuhkan program komputer. b. Pengenalan struktur data yang terdiri dari data statis dan data dinamis. c. Penggunaan tipe data, struktur kontrol perulangan dan percabangan. 3. Profil Pelajar Pancasila Setelah mengikuti pembelajaran ini, Profil Pelajar Pancasila yang diharapkan muncul pada peserta didik adalah: a. Bertakwa kepada Tuhan YME b. Bernalar Kritis