INFORMATIKA

MEDIA MENGAJAR

UNTUK SMP/MTs KELAS VII

• Pemrograman adalah proses untuk menerjemahkan logika berpikir menjadi langkah-langkah atau proses yang dapat dijalankan oleh komputer.
• Proses pemrograman membutuhkan kemampuan menganalisis persoalan, menerjemahkannya menjadi langkah-langkah penyelesaian, dan menuliskannya dalam bentuk kode-kode atau perintah menggunakan bahasa pemrograman tertentu.
• Setelah persoalan dianalisis dan ditemukan solusi, akan dibuat langkah-langkah penyelesaian dalam bentuk algoritme pemrograman yang ditulis dalam bentuk flowchart atau pseudocode, yang selanjutnya akan diterjemahkan menggunakan bahasa pemrograman.
• Bahasa pemrograman adalah bahasa yang dimengerti oleh komputer dan memungkinkan kita sebagai pengguna memerintahkan komputer untuk melakukan proses menggunakan bahasa tersebut. Contohnya, bahasa pemrograman C/C++, Java, Phyton, Ruby, SOL, Perl, PHP dan masih banyak lagi.

• Compiler merupakan penerjemah yang mengubah program yang ditulis oleh programmer menjadi bahasa mesin yang dimengerti oleh komputer. Proses menerjemahkan program dikenal dengan istilah compiling.
• Compiler juga berfungsi sebagai aplikasi program editor tempat programmer menuliskan, mengelola, memeriksa, dan mengoreksi kode-kode program yang ditulis.
• Aplikasi compiler dikenal dengan nama perangkat lunak pemrograman (programming software).
• Pemrograman visual (visual programming) atau pemrograman blok (block programming) merupakan cara pemrograman yang lebih mudah dipelajari dan dilakukan dengan cara melakukan drag and drop bagian-bagian program dalam bentuk blok kode saja tanpa harus menuliskan kode-kode program sebagaimana pada pemrograman konvensional.
• Telah tersedia banyak perangkat lunak yang dapat digunakan sebagai aplikasi pemrograman visual, di antaranya Scratch, Ardublok, mBlok, dan MiniBloq yang tersedia dalam versi online dan versi desktop.

• Scratch merupakan salah satu aplikasi pemrograman visual terbaik yang awalnya dikembangkan oleh MIT (Massachusetts Institute of Technology). Saat ini aplikasi tersebut dikembangkan bersama oleh Google dan tim dari MIT.

​

​

​

• Jika ingin menggunakan Scratch versi dekstop, kita dapat mendownload installer aplikasi tersebut di link: https://scratch mit.edu/download.
• Ada dua pilihan installer yang digunakan, yaitu untuk Windows dan Mac OS.
• Pilihlah installer yang sesuai dengan sistem operasi di komputermu, kemudian klik tombol Download. Kotak dialog untuk memilih direktori penyimpanan akan ditampilkan. Pilih direktori penyimpanan dan ikuti langkah langkah yang diminta. Tunggu sampai proses download selesai.

Langkah-langkah untuk dengan menginstal aplikasi Scratch di komputer adalah sebagai berikut.

1. Jalankan File Explorer yang terdapat pada komputermu.

3. Klik file installer tersebut sehingga proses instalasi akan dijalankan.

2. Bukalah direktori tempat installer yang telah di-download ditempatkan.

4. Tunggu sampai proses instalasi selesai. Setelah proses instalasi selesai, Scratch secara otomatis akan dijalankan.

​

• Jendela Scratch dibagi menjadi beberapa bagian yang disebut dengan pane.
• Bagian atas jendela Scratch terdapat menu bar yang mempunyai tombol untuk memilih bahasa, serta terdapat menu File, Edit, dan Tutorial.
• Bagian bawah terdapat tab bar yang terdiri atas tab Code, Costumes, dan Sounds, tombol Go dan Stop, serta tiga tombol pengaturan jendela.
• Bagian utama jendela dibagi menjadi beberapa pane, yaitu paling kiri disebut palet blok (block palette). Bagian tengah disebut script area, dan bagian paling kanan terdapat stage. Di bawah stage terdapat sprite pane dan stage pane.
• Tampilan jendela Scratch dan bagian-bagiannya secara lebih jelas dapat dilihat pada slide berikutnya.

​

• Pemrograman blok adalah proses membuat program yang dilakukan dengan menggunakan blok-blok kode yang disusun menjadi rangkaian proses yang akan dijalankan oleh komputer.
• Berbeda dengan pemrograman konvensional yang dilakukan dengan menuliskan kode-kode program, pemrograman blok dilakukan dengan memilih blok kode dan menempatkannya dengan susunan blok yang sesuai.
• Di lingkungan kerja Scratch, pembuatan program dilakukan dengan cara memilih blok kode di block palette, kemudian men-drag and drop blok tersebut ke bagian script area.

• Ketika bekerja membuat program, baik program yang berupa game, cerita, ataupun penghitungan, sering kali program perlu untuk membaca nilai, menggunakan nilai dalam penghitungan, dan menampilkan hasil penghitungan kepada pengguna.
• Nilai-nilai perlu disimpan dalam suatu objek yang disebut variabel. Variabel digunakan untuk menyimpan suatu nilai dan besar nilai tersebut dapat berubah-ubah.
• Dalam program, nilai variabel tidak harus berupa angka, tetapi dapat berupa teks/istilah atau berupa Yes/True dan No/False, sehingga variabel mempunyai tipe data untuk menentukan nilai yang dapat disimpan oleh variabel tersebut.

Terdapat tiga tipe data untuk variabel-variabel pada pemrograman visual Scratch:

1. Pada tab Code, klik blok Variables sehingga blok perintah yang ada di blok Variables akan ditampilkan.
2. Klik tombol Make a Variable. Kotak dialog New Variable akan ditampilkan.
3. Beri nama untuk variabel tersebut. Selanjutnya, pilih apakah variabel ingin digunakan pada semua sprite (For all sprites) atau untuk satu sprite tertentu (For this sprite only).
4. Klik tombol OK. Variabel baru akan ditambahkan ke blok perintah di blok Variables.

Contoh: variabel untuk menyimpan nilai di game diberi nama ’Nilai’, sedangkan variabel untuk menyimpan status game diberi nama ’StatusGame’.

Langkah-langkah pembuatan dan pemberian nama variabel adalah sebagai berikut.

• Pada program Scratch, akan dibuat program untuk menghitung jarak kedua titik yang terdapat di koordinat kartesius.
• Pengguna akan menginput koordinat titik pertama dan kedua, sedangkan program akan menghitung jarak pada kedua titik dan menampilkan hasil penghitungan kepada pengguna.

Langkah-langkah untuk membuat program sesuai konsep tersebut:

1. Jalankan Scratch dan buatlah proyek baru.
2. Tambahkan variabel X1, Y1, X2, Y2, JarakX, JarakY, dan Jarak yang akan ditampilkan di stage pada blok Variables.
3. Susun letak variabel-variabel tersebut.
4. Pada blok Events, tambahkan blok perintah ’When click’ ke blok Code untuk mengatur cara menjalankan program.
5. Agar variabel JarakX dan JarakY tidak ditampilkan di stage, tambahkan dua perintah hide variable pada blok Variables untuk menyembunyikan variabel JarakX dan JarakY. Variabel juga dapat disembunyikan dengan cara menghilangkan tanda cek pada kotak cek yang ada di variabel yang bersangkutan.

6. Untuk meminta input dari pengguna, tambahkan perintah ’ask – and wait’ pada blok Sensing.
7. Untuk menyimpan input dari pengguna ke variabel X1 yang disediakan, tambahkan blok perintah set –1 to dan tambahkan blok perintah ’answer’ ke blok perintah tersebut.
8. Dengan cara yang sama, gunakan blok perintah yang sama untuk meminta dan menangkap nilai input untuk variabel Y1, X2, dan Y2.
9. Pada blok Variables dan Operator, tambahkan blok perintah untuk menghitung nilai dari variabel JarakX, JarakY, dan Jarak. Untuk menghitung akar, gunakan blok perintah fungsi ’sqrt’ yang terdapat di blok Operator.
10. Untuk menampilkan hasil penghitungan kepada pengguna, tambahkan perintah ’say – for – second’ dan perintah ’say’ dari blok Looks.
11. Jalankan program dan berikan input.
12. Simpan program yang telah dibuat.

• Sebelum membuat game, perlu diatur skenario game dan aturan-aturan yang berlaku.
• Pembuatan game dilakukan dengan beberapa tahapan, yaitu menyiapkan latar belakang stage atau biasa disebut backdrop, mengatur tampilan sprite, dan menambahkan blok kode.

Langkah-langkah membuat backdrop adalah sebagai berikut.

1. Tambahkan tiga backdrop ke stage pane. Oleh karena backdrop yang digunakan sama, yaitu Underwater 1, maka tambahkan backdrop tersebut sebanyak tiga kali.
2. Klik stage pane sehingga tab Backdrops muncul di tab bar. Kemudian, klik tab Backdrops tersebut untuk menampilkan paint editor.

​

Langkah-langkah membuat backdrop adalah sebagai berikut.

3. Backdrop Underwater 1 akan digunakan untuk menampilkan pesan jika pemain kalah. Oleh karena itu, tambahkan tulisan "GAME OVER!". Hal itu dapat dilakukan dengan cara mengeklik tombol teks di paint editor, kemudian tambahkan teks yang diinginkan.
4. Atur ukuran dan warna teks sesuai yang diinginkan.

5. Pilih backdrop Underwater 3, kemudian tambahkan teks "Congratulation YOU WIN!". Kemudian, atur jenis huruf, ukuran, dan warna teks sesuai dengan yang diinginkan.

​

Langkah-langkah membuat backdrop adalah sebagai berikut.

Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.

1. Klik tombol Choose a Sprite sehingga jendela untuk memilih sprite akan ditampilkan.
2. Pilih sprite yang ingin digunakan. Sprite yang dipilih akan ditambahkan ke sprite pane.
3. Lakukan cara di atas sampai semua sprite yang dibutuhkan sudah ditambahkan ke sprite pane. Semua sprite yang ditambahkan akan ditampilkan di stage.

​

Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.

4. Hapus sprite yang tidak dibutuhkan atau yang ditambahkan secara otomatis oleh Scratch.
5. Klik sprite pane sampai tab Costumes ditampilkan, kemudian klik tab Costumes Pada tab Costumes, kita dapat melakukan berbagai pengaturan tampilan dari sprite yang dipilih.

Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.

6. Sebagai contoh, kita dapat memilih jenis sprite Fish yang akan digunakan, mengatur warna, dan berbagai pengaturan yang lain.
7. Atur ukuran dari sprite Fish sehingga tampak proporsional dengan luas stage yang ada.
8. Buang sprite Fish lain yang tidak digunakan.
9. Oleh karena kita menggerakkan Fish ke arah kiri dan kanan, kita juga membutuhkan sprite Fish yang menghadap ke kiri. Jadi, klik kanan ikon sprite pada tab Costumes dan klik perintah Duplicate Sprite Fish akan diduplikasi menjadi dua.

​

Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.

10. Pilihlah sprite Fish hasil duplikasi, kemudian klik tombol Flip Horizontal sehingga sprite Fish tersebut akan diubah menjadi ke kiri.

​

Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.

11.  Aturlah semua sprite yang ada, terutama ukuran sprite sehingga tampak proporsional satu dengan yang lain.
12. Setelah itu, atur blok-blok kode sehingga sprite berperilaku sesuai yang diinginkan.

​

• Blok kode Sprite Fish

1. Aktifkan tab Code, kemudian pilihlah sprite Fish pada sprite pane.
2. Pada bagian blok Events, pilih blok when [tombol Go] clicked dan tambahkan ke script area.
3. Pada bagian blok Control, pilih blok forever dan tambahkan ke script area.

• Blok kode Sprite Fish

4.  Selanjutnya, kita akan menambahkan blok kode untuk mengatur gerakan sprite Fish jika tombol arah ke atas diklik. Oleh karena itu, dari blok Control, tambahkan blok if- then ke script area.
5. Kemudian dari blok Sensing, tambahkan blok Key [space] pressed ke script area.
6. Gantilah tombol [space] menjadi [up arrow]. Tampilan blok kode akan tampak seperti pada gambar disamping.

• Blok kode Sprite Fish

7. Jika tombol arah ke atas ditekan, kita ingin agar sprite Fish bergerak ke atas sebesar 10 satuan koordinat. Oleh karena itu, dari blok Motion, tambahkan blok change y by 10.

​

8. Selanjutnya, dengan cara yang sama, tambahkan blok kode untuk tombol [down arrow].

• Blok kode Sprite Fish

9. Untuk menambahkan tombol ke kiri dan kanan kita dapat melakukan cara yang sama dengan langkah (7) dan (8). Perbedaannya adalah koordinat sumbu yang berubah adalah sumbu. Kita juga perlu mengganti sprite Fish yang digunakan, yaitu pada saat tombol kanan yang ditekan maka kita menggunakan sprite Fish yang menghadap ke kanan, dan berlaku sebaliknya. Oleh karena itu, selain blok if - then, key [space] pressed, dan change x by [10] digunakan, kita juga perlu menambahkan blok switch costume to dari blok Looks. Blok kode yang ditambahkan seperti gambar di samping.

​

• Menambahkan Variabel

Dalam game yang dibangun, kita akan menggunakan kriteria kalah dan menang dengan menghitung nilai poin (Point) dan kesehatan (Health) dari sprite Fish, Oleh karena itu, kita perlu menambahkan variabel untuk menyimpan kedua nilai tersebut. Penambahan variabel dapat dilakukan dengan langkah-langkah sebagai berikut.

​

1. Pada bagian blok Variables, klik tombol Make a Variable, Kotak dialog New Variable akan ditampilkan.
2. Beri nama variabel dengan nama Point dan pilih For all sprites. Pilihan ini akan membuat variabel dapat digunakan di semua sprite.
3. Klik tombol OK.

​

• Menambahkan Variabel

4. Dengan cara yang sama, tambahkan variabel kedua, yaitu variabel Health Kedua variabel akan tampak di blok Variables seperti pada gambar di bawah ini. Selain itu, variabel juga akan ditampilkan di stage dengan nilai 0.

• Blok kode Sprite Apple dan Strawberry

Dalam game ini, sprite Apple dan Strawberry adalah makanan yang akan dikejar oleh sprite Fish. Jika mereka saling bersentuhan, poin dari pemain akan bertambah. Sprite Apple akan menambah poin 15, sedangkan sprite Strawberry akan menambah poin 10. Jika poin telah mencapai 100 atau lebih, pemain dinyatakan menang. Kedua sprite akan muncul dan bergerak secara acak. Penambahan blok kode untuk mengatur perilaku kedua sprite adalah sebagai berikut.

​

1. Pilihlah sprite Apple di sprite pane.
2. Pada bagian blok Events, tambahkan blok when [tombol Go] clicked ke script area.
3. Pada bagian blok Looks, tambahkan blok switch backdrop to [Underwater 1]. Ganti menjadi [Underwater 2]. Blok ini digunakan untuk mengganti backdrop menjadi [Underwater 2], yaitu backdrop yang digunakan untuk bermain.

• Blok kode Sprite Apple dan Strawberry

4. Pada bagian blok Motion, tambahkan blok go to [random position].
5. Pada bagian blok Variables, tambahkan blok set [Health] to 0. Ganti variabel Health menjadi Point Blok kode di script area akan tampak seperti pada gambar disamping.
6. Setelah mengatur kondisi awal, kita akan mengatur gerakan dari sprite Apple.
7. Pada bagian blok Control, tambahkan blok Forever.
8. Pada bagian blok Motion, tambahkan blok glide [1] secs to [random position]. Blok ini bertujuan untuk mengatur sprite Apple agar bergerak terus ke posisi acak.

​

​

• Blok kode Sprite Apple dan Strawberry

9. Pada bagian blok Control, tambahkan blok if - then.
10. Pada bagian blok Sensing, tambahkan blok touching [mouse- pointer]? di parameter blok if - then. Ganti [mouse-pointer] menjadi [Fish], seperti pada gambar disamping.
11. Di dalam blok if touching [Fish]? then, pada bagian blok Sound, tambahkan blok play sound [Chomp] until done.
12. Pada bagian blok Motion, tambahkan blok go to [random position].

​

• Blok kode Sprite Apple dan Strawberry

13. Pada bagian blok Variables, tambahkan blok change [Health] by 0. Ganti menjadi change [Point] by 15. Blok kode di script area akan tampak seperti gambar di samping.

​

​

• Blok kode Sprite Apple dan Strawberry

14. Untuk mengatur apa yang terjadi jika Point telah mencapai 100 atau lebih, kita akan menambahkan blok program if-then pada blok Control. Selanjutnya, pada blok Operators, tambahkan blok lebih besar (>) dari dan tempatkan sebagai kondisi di blok if – then, seperti pada gambar di samping.
15. Pada bagian blok Variables, tambahkan blok Point ke dalam blok Operator lebih besar dan ganti 50 menjadi 99.

• Blok kode Sprite Apple dan Strawberry

16. Pada bagian blok Looks, tambahkan blok switch backdropto [Underwater 3].
17. Pada bagian blok Control, tambahkan blok stop [all]. Blok kode akan tampak seperti pada gambar di samping.

​

• Blok kode Sprite Apple dan Strawberry

Sprite Strawberry memiliki gerakan yang sama dengan sprite Apple. Perbedaannya hanyalah pada nilai Point yang ditambahkan dan suara yang digunakan ketika bersentuhan dengan sprite Fish. Oleh karena itu, kita dapat menggunakan blok program yang sama dan melakukan sedikit perubahan. Hal ini dapat dilakukan dengan langkah-langkah sebagai berikut.

​

1. Pada sprite pane, pilih sprite Strawberry.
2. Pada tab Sounds, klik tombol Choose a Sound, dan pilih suara yang ingin digunakan ketika bersentuhan dengan sprite Fish. Pada contoh ini, dipilih Suction Cup.
3. Pada sprite pane, pilih sprite Apple.
4. Tampilkan blok kode untuk sprite Apple yang telah dibuat dengan cara mengeklik tab Code.

• Blok kode Sprite Apple dan Strawberry

5. Pilih semua blok program yang ada, kemudian drag ke thumbnail dari sprite Strawberry yang ada di sprite pane. Semua blok kode dari sprite Apple akan di-copy ke sprite Strawberry.

​

• Blok kode Sprite Apple dan Strawberry

6. Lakukan perubahan yang diperlukan sesuai dengan yang sudah dijelaskan, di antaranya nilai ketika bersentuhan dengan sprite Fish dan suara yang digunakan. Blok kode untuk sprite Strawberry akan tampak seperti gambar di samping.

• Blok kode Sprite Crab dan Jellyfish

Pada game yang akan dibuat, sprite Crab dan Jellyfish merupakan tokoh jahat. Jika keduanya bersentuhan dengan sprite Fish akan mengurangi nilai Health dari Fish. Jika nilai Health sudah mencapai nol atau kurang, pemain dinyatakan kalah.

Meskipun merupakan tokoh yang berlawanan dengan sprite Apple dan Strawberry, sprite Crab, dan Jellyfish mempunyai perilaku yang sama, yaitu bergerak secara acak. Perbedaannya adalah jika sprite Fish menyentuh sprite Crab, akan mengurangi nilai Health 15 dan sprite Jellyfish akan mengurangi nilai Health 10. Jika nilai Health sudah nol atau kurang dari nol, pemain akan dinyatakan kalah dengan cara menampilkan backdrop Underwater 1. Selain itu, suara yang digunakan ketika bersentuhan dengan sprite Fish juga akan dibedakan.

​

• Blok kode Sprite Crab dan Jellyfish

Kita dapat menambahkan blok program untuk Crab dan Jellyfish dengan cara meng-copy blok program dari sprite Apple atau Strawberry, kemudian melakukan perubahan yang diperlukan. Langkah-langkah untuk melakukannya adalah sebagai berikut.

​

1. Pada sprite pane, pilih sprite Crab.
2. Pada tab Sounds, klik tombol Choose a Sound, dan pilih suara yang ingin digunakan ketika bersentuhan dengan sprite Fish. Pada contoh ini dipilih Boing.
3. Tampilkan blok kode untuk sprite Apple yang sudah dibuat.
4. Pilih semua blok kode yang ada, kemudian drag ke thumbnail dari sprite Crab yang ada di Sprite panes. Semua blok kode dari sprite Apple akan di-copy ke sprite Crab.

• Blok kode Sprite Crab dan Jellyfish

Lakukan perubahan yang diperlukan, yaitu pengurangan nilai Health ketika bersentuhan dengan sprite Fish, suara yang digunakan ketika bersentuhan dengan sprite Fish, dan backdrop yang digunakan jika nilai sudah 0 atau kurang.

Untuk mengganti blok variabel Point yang ada di dalam blok operator, kita harus mengeluarkan blok Point tersebut terlebih dahulu, kemudian ganti dengan blok Health.

​

• Blok kode Sprite Crab dan Jellyfish

Kita perlu menambahkan blok kode untuk sprite Jellyfish. Hal tersebut dapat dilakukan dengan cara yang sama dengan pengaturan sprite Crab, yaitu dengan meng-copy blok kode dari sprite Crab, kemudian melakukan perubahan. Langkah-langkah untuk melakukannya adalah sebagai berikut.

1. Pada sprite pane, pilih sprite Jellyfish.
2. Pada tab Sounds, klik tombol Choose a Sound dan pilih suara yang ingin digunakan ketika bersentuhan dengan sprite Fish. Pada contoh ini, dipilih Scream2.
3. Tampilkan blok kode untuk sprite Crab yang sudah dibuat.
4. Pilih semua blok kode yang ada, kemudian drag ke thumbnail dari sprite Jellyfish yang ada di sprite pane. Semua blok kode dari sprite Crab akan di-copy ke sprite Jellyfish.

• Blok kode Sprite Crab dan Jellyfish

Lakukan perubahan yang diperlukan, yaitu pengurangan nilai Health ketika bersentuhan dengan sprite Fish. Blok kode untuk sprite Jellyfish akan tampak seperti pada gambar disamping.

• Blok kode Sprite Crab dan Jellyfish

Jika tidak ada kesalahan, program game akan bekerja sesuai dengan skenario yang sudah direncanakan. Untuk menjalankan program game yang dibuat, dapat dilakukan dengan mengeklik tombol Go.