XI Pemograman TKJ 2627

 

Mapel Kejuruan

Pada akhir fase F peserta didik mampu memahami konsep dan menerapkan perintah HTML, CSS, pemrograman Javascript, bahasa pemrograman server-side serta implementasi framework pada pembuatan web statis dan dinamis untuk beragam kebutuhan yang kontekstual. Selain itu, peserta didik juga mampu mendokumentasikan serta mempresentasikan web statis dan dinamis yang telah dikembangkan.

Kegiatan 1

Panduan Membuat File HTML Menggunakan Acode di Android
Acode adalah editor kode yang sangat mumpuni untuk perangkat Android. Berikut adalah panduan langkah demi langkah untuk membuat file HTML Anda.
1. Persiapan Awal
Unduh dan instal aplikasi Acode dari Google Play Store.
Buka aplikasi dan berikan izin akses penyimpanan (Storage Permission) agar Anda dapat menyimpan file di perangkat Anda.
2. Membuat File Baru
Buka Acode.
Ketuk ikon + (New File) di bagian atas.
Beri nama file Anda dengan akhiran .html (Contoh: index.html).
Klik Save dan pilih folder tempat Anda ingin menyimpan file tersebut.

3. Menulis Kode HTML
Ketik atau tempel kode HTML Anda di ruang kerja. Sebagai contoh, gunakan struktur dasar berikut:

latihan 1 

4. Menguji Hasil (Preview)
Untuk melihat tampilan kode Anda di browser:
Klik ikon tiga titik di pojok kanan atas.
Pilih opsi Open in browser.
Browser akan terbuka dan menampilkan hasil dari kode HTML Anda.

latihan 2

kirimkan Kode dan Hasil 

Link pengumpulan https://forms.gle/AbRJ65ZTG86LBRBb6

Kegiatan 2 - 3 Agustus 2026

Latihan 1

Latihan 2

Link pengumpulan https://forms.gle/sfPZKdjdGkuLwdX67

Kegiatan 3 - 4 Agustus 2026

Materi : https://www.simonmurd.com/2024/01/pemrograman-web-teknologi-aplikasi-web.html

C. TUGAS MANDIRI
Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!
1. Sebutkan profesi yang termasuk web master dan jelaskan!
2. Jelaskan konsep world wide web!
3. Jelaskan fungsi web browser!
4. Apa fungsi dari web server?
5. Sebutkan dan jelaskan 3 macam editor text yang biasa digunakan untuk membangun website!

6. Sebutkan dan jelaskan 4 editor text yang digunakan untuk membangun website selain yang telah disebutkan pada uraian materi di atas!
7. Jelaskan konsep kerja web server!
8. Sebutkan dan jelaskan 3 jenis web server selain yang telah disebutkan pada materi di atas!
9. Apa sajakah yang menjadi tool pengembang web?
10. Jelaskan sejarah internet!

Link pengumpulan : https://forms.gle/XRTKdmWbJEjwKpHS8

Kegiatan 4 - 10 Agustus 2026

Aplikasi Kalkulator Gizi Program Makan Bergizi Gratis (MBG) telah dibuat dengan tampilan profesional berstandar institusi (menggunakan desain modern ala dashboard pemerintah/kesehatan dengan Tailwind CSS, dukungan diagram Chart.js, serta fitur kalkulasi gizi otomatis real-time).

Tugas :

1. NASI / KARBOHIDRAT - Option nya di tambah
2. PROTEIN HEWAN - Option nya di tambah
3. PROTEIN NABATI - Option nya di tambah
4. SAYURAN - Option nya di tambah
Link pengumpulan : https://forms.gle/FmCpy8rWrMFWQPXg6

Kegiatan 5 - 18 Agustus 2026

Berikut adalah kode lengkap aplikasi Kalkulator Kasir / Belanjaan Koperasi Desa (Kopdes) yang dirancang dengan antarmuka (UI/UX) terinspirasi dari dashboard profesional kasir modern (seperti sistem POS di Alfamart/Indomaret).

Tugas :

1. 1. Tombol Kategori - button onclick nya di tambah

2. 2. Script Logika Sistem POS - id: 13, name: nya di tambah 4 id lagi

Link pengumpulan : https://forms.gle/VaFcz14vbZDDHe4c9

Kegiatan 6 - 18 Agustus 2026

Materi :https://www.simonmurd.com/2024/04/pemrograman-web-format-text-dengan-html.html

Contoh Penerapan 1

Contoh Penerapan 2

Link kumpulkan : https://forms.gle/GUhh1T4GpgSTjUZA9

Kegiatan 7 - 25 Agustus 2026

Materi : https://www.simonmurd.com/2024/04/pemrograman-web-format-text-dengan-html.html

Link kumpulkan : https://forms.gle/idNQisF3PXPhxfnD7

Kegiatan 8 - 31 Agustus 2026

Materi : https://www.simonmurd.com/2024/04/pemrograman-web-format-text-dengan-html.html

Link kumpulkan : https://forms.gle/PxoMs7wiWApKKxhJ8

Kegiatan 9 - 1 September 2026

Materi : https://www.simonmurd.com/2024/04/pemrograman-web-format-text-dengan-html.html

Link kumpulkan : https://forms.gle/Zw6Q5zc9ARthMt937

Kegiatan 10 - 7 September 2026

Materi : https://www.simonmurd.com/2024/01/pemrograman-web-teknologi-aplikasi-web.html

Bagian 5: Uji Kompetensi Teknologi Web:

Menjawab 20 Soal Pilihan Ganda: Siswa diwajibkan untuk menjawab 20 pertanyaan pilihan ganda yang telah disediakan secara khusus untuk menguji pemahaman mereka mengenai arsitektur client-server dan ekosistem perangkat lunak web.

Memastikan Kelengkapan Sebelum Mengirim (Submit): Pada bagian petunjuk penyelesaian, siswa ditekankan untuk memastikan bahwa seluruh soal uji kompetensi beserta tabel pengamatan praktikum (dari simulasi di Bagian 3 dan 4) telah terisi dengan lengkap sebelum menekan tombol pengiriman (menyelesaikan LKPD) agar nilai akhir dapat tersimpan dan terekapitulasi dengan baik.

Link LKPD : https://simonmurd.github.io/PemogramanWeb/lkpd_web_1.html

Kegiatan 11 - 8 September 2026

Materi : https://www.simonmurd.com/2024/04/pemrograman-web-format-text-dengan-html.html

Bagian 5: Uji Kompetensi Teknologi Web:

Menjawab 20 Soal Pilihan Ganda: Siswa diwajibkan untuk menjawab 20 pertanyaan pilihan ganda yang telah disediakan secara khusus untuk menguji pemahaman mereka mengenai arsitektur client-server dan ekosistem perangkat lunak web.

Memastikan Kelengkapan Sebelum Mengirim (Submit): Pada bagian petunjuk penyelesaian, siswa ditekankan untuk memastikan bahwa seluruh soal uji kompetensi beserta tabel pengamatan praktikum (dari simulasi di Bagian 3 dan 4) telah terisi dengan lengkap sebelum menekan tombol pengiriman (menyelesaikan LKPD) agar nilai akhir dapat tersimpan dan terekapitulasi dengan baik.

Link LKPD : https://simonmurd.github.io/PemogramanWeb/lkpd_web_2.html

Kegiatan 12 - 14 September 2026

Materi : https://www.simonmurd.com/2024/04/pemrograman-web-table-dengan-html-bab-3.html

Bagian 5: Uji Kompetensi Teknologi Web:

Menjawab 20 Soal Pilihan Ganda: Siswa diwajibkan untuk menjawab 20 pertanyaan pilihan ganda yang telah disediakan secara khusus untuk menguji pemahaman mereka mengenai arsitektur client-server dan ekosistem perangkat lunak web.

Memastikan Kelengkapan Sebelum Mengirim (Submit): Pada bagian petunjuk penyelesaian, siswa ditekankan untuk memastikan bahwa seluruh soal uji kompetensi beserta tabel pengamatan praktikum (dari simulasi di Bagian 3 dan 4) telah terisi dengan lengkap sebelum menekan tombol pengiriman (menyelesaikan LKPD) agar nilai akhir dapat tersimpan dan terekapitulasi dengan baik.

Link LKPD : https://simonmurd.github.io/PemogramanWeb/lkpd_web_3.html

Kegiatan 13 - 15 September 2026

Materi : https://www.simonmurd.com/2024/05/pemrograman-web-format-multimedia.html

Bagian 5: Uji Kompetensi Teknologi Web:

Menjawab 20 Soal Pilihan Ganda: Siswa diwajibkan untuk menjawab 20 pertanyaan pilihan ganda yang telah disediakan secara khusus untuk menguji pemahaman mereka mengenai arsitektur client-server dan ekosistem perangkat lunak web.

Memastikan Kelengkapan Sebelum Mengirim (Submit): Pada bagian petunjuk penyelesaian, siswa ditekankan untuk memastikan bahwa seluruh soal uji kompetensi beserta tabel pengamatan praktikum (dari simulasi di Bagian 3 dan 4) telah terisi dengan lengkap sebelum menekan tombol pengiriman (menyelesaikan LKPD) agar nilai akhir dapat tersimpan dan terekapitulasi dengan baik.

Link LKPD : https://simonmurd.github.io/PemogramanWeb/lkpd_web_4.html