Dari IgosCenter

Struktur Program

Tujuan

Praktikum ini mengenalkan proses pembangunan perangkat lunak memakai bahasa C, khususnya pada sistem operasi Linux dengan kit pengembangan Code:Blocks. Selain itu akan dikenalkan pula pustaka pemrograman grafik berbasis Wayang_SDL.

Teori

Pemrograman, adalah salah satu kegiatan rekayasa perangkat lunak. secara luas, rekayasa ini bertujuan membangun sistem perangkat lunak yang bisa dijalankan dengan komputer guna memecahkan masalah tertentu. Agar maksud ini dicapai, kegiatan ini harus dilakukan dengan metodologi yang bisa dipertanggungjawabkan secara logis. Tahap - tahap umum rekayasa perangkat lunak adalah:

• Definisi keperluan (requirement): yaitu menetapkan masalah apa yang ingin dipecahkan.
• Desain : merancang program dengan didasari ilmu pengetahuan atas domain masalah yang ingin dipecahkan, dan ilmu komputer. Tahap inilah yang sebenarnya memerlukan pemikiran mendalam, apalagi jika masalahyang dihadapi cukup kompleks.
• Implementasi: menulis dan membuat program. Bagi pemula, tahap ini cukup sulit. Namun bila sudah terampil, tahap ini hanyalah menerjemahkan hasil tahap desain ke dalam bahasa pemrograman.
• Uji coba: tahap untuk meyakinkan kebenaran program. Biasanya dengan memberikan beberapa masukan standar, dan melihat apakah luarannya sudah seperti seharusnya.

Pemrograman adalah bagian dari tahap implementasi, dengan produk akhir berupa file executable yang siap dijalankan komputer. Untuk bahasa C, tahap-tahapnya urut sebagai berikut :

1. Edit. Mula-mula, pemrogram menulis kode sumber dalam bahasa C yang akan disimpan sebagai file [c]. Untuk program yang besar, kode sumber dapat dipecah menjadi beberapa file kode [c] dan file header [h], sementara salah satu-nya menjadi file utama (main).
2. Compile. Setelah kode sumber ditulis, maka ada perangkat lunak khusus yang disebut kompiler untuk mengubahnya menjadi file object [o], yaitu file yang sudah berisi kode biner (bahasa mesin yang dimengerti komputer). Untuk proses kompilasi ini, diperlukan akses ke file header pustaka pemrograman.
3. Link. Adalah proses menyatukan file-file obyek dan pustaka menjadi satu file executable (program yang bisa dijalankan oleh sistem operasi). Proses link ini biasanya dijalankan otomatis setelah semua kompilasi selesai, dan disebut proses Make atau Build. Sementara itu dikenal juga proses Clean, yaitu menghapus seluruh file [o] agar bisa di-kompile ulang dari awal.
4. Debug / Run. Merupakan tahap akhir dimana program dijalankan untuk dicoba. Apabila program masih salah, maka pemrogram dapat memperbaiki dengan mengulang tahap edit.

Untuk mempermudah seluruh proses tersebut, tersedia perangkat lunak yang disebut IDE (Integrated Development Environment). Saat ini, ada IDE yang sudah mampu membantu pemrograman secara visual (langsung tampak hasil akhirnya, dan bisa mengubah parameter dari menu), namun umumnya untuk bahasa berorientasi obyek (C++, Java, C#, dll). Untuk praktikum ini, pemrograman masih sepenuhnya menulis kode sumber sendiri, dan baru tampak hasilnya setelah program dijalankan.

Materi

Membuat Proyek dan Manajeman File

Sebagai praktikum pertama, kita akan mulai membuat proyek dengan Code:Blocks. Untuk itu segera hidupkan komputer dengan sistem operasi Linux Ubuntu, lalu login. Setelah siap, jalankan Code Blocks dengan memilih menu Applications - Programming - Code::Blocks IDE. Buatlah proyek baru sebagai berikut:

* Pilih menu "File - New - Project". Pilih template SDL, lalu tekan tombol "Go".
* Muncul dialog "Welcome to the new SDL" Langsung klik "Next" saja.
* Isikan Project Title: apa saja, misalkan wayang-1-1. Isian lainnya biarkan saja sesuai default. Klik "Next"
* Pilih Compiler: GNU GCC Compiler. Biarkan pengaturan lain apa adanya. Langsung klik "Next".

Proyek anda akan siap dengan sebuah file contoh. Coba kompilasi program dengan :

• Pilih menu "Build - Buid". Proyek anda akan dikompilasi dan langsung di-link (tekan kunci Ctrl-F9)

• Jalankan program dengan menu "Build - Run" (tekan kunci Ctrl-F10).
• Untuk sekaligus, pilih menu "Buid - Build and Run" (tekan kunci F9).

Jika tahap-tahap diatas sukses, dan anda melihat aplikasi SDL berjalan, selamat.

Program Utama

Kini kita mulai melakukan pemrograman sesungguhnya sebagai berikut:

• Hapus saja seluruh teks di file main.c, ketikkan kode sumber berikut:

/*
 * Praktikum Pemrograman C
 * Oleh : ..... 
 * NIM  : .....
 */
 
#include <stdlib.h>
#include <stdio.h>
 
/* Variabel Global */
/* sesuaikan dengan data anda ! */
char* author_name = "Eko M. Budi";
int author_nim = 17486306;
 
/* Fungsi about
 * Jalan setelah dipanggil oleh main
 */
void about() {
    // Tampilkan Nama dan NIM
    printf("Oleh : %s\n", author_name);
    printf("NIM  : %d\n", author_nim);
}
 
 
/* Fungsi main
 * Pertama dijalankan 
 */
int main ()
{
    printf("Praktikum Pemrograman C\n");
    about();
    return 0;
}

• Perhatikan struktur program tersebut, pahami mana bagian: komentar, variabel global, fungsi utama, fungsi sub rutin.
• Jalankan program dengan tombol "Build and Run". Nampak bahwa program ini adalah aplikasi konsole yang hanya bisa bekerja pada mode teks.

Program Banyak File

Selanjutnya, kita akan belajar bahwa kode sumber bahasa C bisa dipecah menjadi beberapa file. Hal ini sangat membantu untuk program yang besar. Caranya adalah:

• Pertama, kita harus membuat file baru yang akan berisi KODE SUMBER. Namanya "latihan1.cpp" sebagai berikut :

* Pilih menu "File - New - File..." Pilih ikon "C/C++ source" klik "Go"
* Pilih C++, lalu klik "Next" PERHATIAN: ekstensi file harus cpp, karena ada beberapa fitur c++ yang akan digunakan SDL, walaupun sebagian besar program kita adalah bahasa C.
* Isi "Filename with full path" dengan nama file komplit. Untuk itu klik tombol "...", lalu pilih folder proyek anda dan ketik nama file "latihan1.cpp". Klik "All" untuk mencentang semua build target. Klik Finish

• Selanjutnya kita buat file "latihan1.h", yaitu file HEADER yang berisi definisi variabel maupun fungsi yang ada di file kode sumber (latihan1.cpp). Cara membuatnya adalah:

* Pilih menu "File - New - File..." Pilih ikon "C/C++ header" klik "Go"
* Isi "Filename with full path" dengan nama file komplit. Untuk itu klik tombol "...", lalu pilih folder proyek anda dan ketik nama file "latihan1.cpp". Header guard akan diisikan oleh Code::Blocks. Biarkan saja apa adanya. Klik "All" untuk mencentang semua build target. Klik Finish

• Sekarang kita mulai mengedit isi kode sumber "latihan1.cpp". Potong dan tempelkan bagian program berikut dari "main.c" sebelumnya.

/* Praktikum Pemrograman C
 * File: latihan1.cpp
 * Oleh : ..... 
 * NIM  : .....
 */
 
/* Variabel Global */
/* sesuaikan dengan data anda ! */
char* author_name = "Eko M. Budi";
int author_nim = 17486306;
 
/* Fungsi about
 */
void about() {
    // Tampilkan Nama dan NIM
    printf("Oleh : %s\n", author_name);
    printf("NIM  : %d\n", author_nim);
}

• Sebagai pasangan dari kode sumber tersebut, maka isi dari file "latihan1.h" adalah sebagai berikut:

/* Praktikum Pemrograman C
 * Header file Sub Modul Latihan 1
 * Oleh : ......
 * NIM  : ......
 */
 
// baris ini dibuatkan oleh code::blocks
// berguna untuk menjaga include ganda
#ifndef LATIHAN1_H_INCLUDED
#define LATIHAN1_H_INCLUDED
 
// Deklarasi variabel global
// Pakai kata kunci extern, tanpa inisialisasi
extern char author_name[];
extern int author_nim;
 
// Deklarasi fungsi yang ada di kode sumber latihan1.c
// Semua persis sama, dan langsung diakhiri titik koma
void about();
 
#endif // LATIHAN1_H_INCLUDED

• Kini isi file "main.cpp" menjadi lebih singkat, sebagai berikut:

/* Praktikum Pemrograman C
 * Oleh : ..... 
 * NIM  : .....
 */
 
// include header sediaan sistem, nama dikurung pakai <>
#include <stdlib.h>
#include <stdio.h>
 
// include header sendiri, nama dikurung pakai " "
#include "latihan1.h"
 
/* Fungsi main, 
 * bisa memanggil fungsi yang ada di file latihan1.c
 */
int main ()
{
    printf("Praktikum Pemrograman C\n");
    about();
    return 0;
}

Nah, kita baru saja belajar bagaimana membuat program bahasa C banyuak file. Silahkan Build and Run proyek tersebut. Perhatikan bahwa Code::Blocks akan meng-compile file latihan1.cpp dan main.cpp, kemudian me-link-nya untuk menghasilkan file executable. Hasil keluaran masih sama dengan program sebelumnya, namun kini fungsi-fungsi C kita lebih teroganisir dalam file-file.

Program GUI

Kini kita mulai pemrograman yang indah, memakai mode grafik. Namun untuk itu, kita memerlukan bantuan pustaka khusus yaitu:

1. Pustaka sediaan sistem, meliputi: SDL, SDL_image, SDL_mixer dan SDL_ttf. Pustaka-pustaka tersebut telah dipasang pada sistem operasi. Jika anda cukup penasaran, silahkan lihat bahwa file header-nya ada di /usr/include/SDL sementara file pustakanya ada di /usr/lib.
2. Pustaka yang akan kita gabung ke program dalam bentuk kode sumber yaitu SpriG dan SDL_wayang. Di sini terasa enaknya belajar dengan open source, yaitu kita bisa memakai kode sumber dengan bebas, tak ada rahasia yang disembunyikan. Jika ada yang kurang sesuai, kita boleh memodifikasinya dengan bebas. Namun ingat, secara moral hasil modifikasi itu seyogyanya segera di-release dengan lisensi open source juga. Jangan hanya jadi "leacher" ;p

Silahkan unduh dulu paket Wayang_SDL dari situs yang ditunjuk. Gunakan program "File Browser" untuk menyalin file bundel ke folder proyek anda, lalu ekstrak di situ. Dengan demikian anda akan punya tambahan folder-folder berikut:

1. sprig : berisi kode sumber pustaka sprig (c, h, dll).
2. wayang : berisi kode sumber pustaka SDL_wayang (c, h).
3. images : berbagai gambar untuk tampilan grafik (jpg, png).
4. fonts: file fonts untuk tampilan teks pada mode GUI (ttf).
5. sounds : file suara (wav, ogg).

Folder dan file lama anda (main.cpp, latihan1.cpp, latihan1.h) jangan dihilangkan !

Kode sumber tambahan ini perlu didaftarkan ke proyek. Untuk itu:

Setelah siap, kita akan membuat fungsi pada file "latihan1.cpp" sebagai berikut (tambahkan dibawah fungsi about).

// Include pustaka proyek sendiri
#include "sprig/sprig.h"
#include "wayang/wayang.h"
 
/* Subrutin lat1_2
 * Menampilkan layar GUI memakai SDL wayang
 * kelir : layar pertunjukan, hanya ada satu sehingga global
 */
void lat1_2() {
    // Ubah judul jendela
    kSetCaption("Praktikum 1.2");
 
    // gambar bentuk-bentuk pada latar belakang
    // dengan warna dan transparansi bisa diatur
    kSetColor(YELLOW);
    kFillArc(0, 210, 50, -60, 240);
    kSetOpaque(40);             // Semi transparan
    kFillCircle(0, 210, 100);   // gambar lingkaran
 
    kSetOpaque(150);             // Semi transparan
    kFillRectangle(-400, -260, 800, 120);  // gambar kotak
 
    kSetColor(WHITE);               
    kSetOpaque(50);                 // Semi transparan
    kSetThickness(10);
    kRectangle(-380, -240, 760, 80); // Gambar elipse
 
}

Nampak bahwa subrutin lat1_2() tersebut memanggil fungsi-fungsi dengan prefix "k" (kSetCaption, kSetColor, kRectangle, dll). Itu adalah fungsi sediaan SDL_ wayang untuk mengubah kelir, yaitu layar belakang grafik. Silahkan baca petunjuk tentang SDL_Wayang di Lampiran.

Langkah kedua, karena pada kode sumber sudah ditambahi fungsi baru, maka file "latihan1.h" juga harus disesuaikan sebagai berikut:

// Deklarasi fungsi yang ada di kode sumber latihan1.c
// Semua persis sama, dan langsung diakhiri titik koma
void about();
void lat1_2();    // tambah deklarasi fungsi lat1_2

Kembali ke file "main.cpp", kini kita harus menginisialisasi tampilan grafik dan memanggil fungsi lat1_2. Editlah menjadi sebagai berikut:

/* Subrutin main
 * Inisialisasi grafik dan memanggil modul
 */
int main ()
{
    // pembukaan layar teks
    printf("Praktikum Pemrograman C\n");
    about();
 
    // pembukaan layar grafik
    // ukuran 800x600 dengan gambar latar belakang
    kOpen(800, 600, "kelir_01.jpg);
 
    // Panggil Modul latihan 1.2
    lat1_2();
 
    // Setelah selesai, tunggu 10.000 mili detik
    dPause();
 
    // tutup layar grafik
    kClose() 
 
    return 0;
}

Silahkan dikompilasi dan dijalankan. Jika sukses akan muncul tampilan indah berikut.

Oh, anda tidak berhasil mengkompilenya ? Yang keluar malah pesan-pesan error seperti ini !?!

Jangan panik, anda tengah berhadapan dengan pesan kesalahan kompilasi. Ini hal yang sering terjadi, karena programmer juga manusia, bisa khilaf. Sementara kompiler itu komputer yang bodoh, cuma tahu ada salah tapi tak bisa membenarkan sendiri. Jadi pasang mode sabar, kita akan latihan membetulkan kesalahan. Silahkan lihat sedikit petunjuk di Lampiran 2. Kesalahan umum biasanya karena kita alpa menulis satu dua tanda baca, sehingga terjadi syntax error. Ikuti saja pesan kesalahan dan benarkan. Dalam hal ini, kalau anda tadi mengetikkan kode sumber dengan tepat sesuai petunjuk (yang salah), maka betulkan sebagai berikut:

Dua kesalahan terakhir berkaitan dengan akses ke fungsi sediaan pustaka. Dalam kasus ini, kode sumber "main.cpp" seharusnya meng-include header-header sebagai berikut :

// include header sediaan sistem, nama dikurung pakai <>
#include <stdlib.h>
#include <stdio.h>
#include <time.h>
 
// Include pustaka proyek sendiri, nama dikurung pakai " "
#include "sprig/sprig.h"
#include "wayang/wayang.h"
 
#include "latihan1.h"

Demikian pula file "latihan1.cpp" harus menginclude header-header yang sama. Ayo betulkan, jangan terlewat. Setelah kesalahan tersebut dibetulkan, coba kompilasi lagi. Oh ... ternyata masih error.

Hal ini karena kita salah memanggil fungsi dPause. Coba lihat deklarasi fungsi ini (di manual SDL_Wayang Lampiran 1, atau langsung di file wayang.h), yang ternyata adalah:

Jelaslah bahwa error tersebut karena kurang memberi argumen t (waktu tunggu). Jadi betulkan demikian:

Kini coba "build" lagi. Aduh, masih error ! Tetaplah tenang dan sabar ...

Kali ini, yang salah adalah linker tak bisa menemukan beberapa fungsi yang seharusnya disediakan pustaka. Untuk membetulkan hal ini, yang harus diubah adalah pengaturan proyek (bukan kode sumber). Coba pilih menu "Project - Build options".

* Pilih tab "Compiler settings" Pilih tab "Other options" Isikan `sdl-config --cflags` Perhatikan bahwa tanda petik disini memakai petik miring kiri, tombolnya bersatu dengan karakter tilde ~. Bukan petik biasa ' yang tombolnya bersatu dengan ".
* Pilih tab "Linker settings" Pada bagian "Other linker options" pastikan ada isinya : `sdl-config --libs` Pada bagian "Link libraries", klik tombol "Add" Satu persatu tambahkan pustaka SDL_image, SDL_mixer dan SDL_ttf
* Pengaturan pustaka juga perlu di "Copy all to" bagian release.

Setelah pengaturan itu, coba Build lagi. Mestinya akan sukses dan ketika dijalankan, akan muncul layar teks, dan layar grafik. Layar teks ini hanya muncul karena program dijalankan oleh IDE, tak akan muncul jika program langsung dijalankan oleh sistem operasi. Pada saat pengembangan, layar teks ini bisa kita manfaatkan untuk menampilkan log program. Dan untuk kali ini, nampak ada pesan error.

Itu akibat salah memberi nama file. Coba pakai file browser, perhatikan dimana posisi gambar kelir_01.jpg. Ternyata ada di folder images/wayang/kelir_01.jpg. Karena itu pada program main.cpp, pembukaan kelir harus dibenarkan menjadi:

kOpen(800, 600, "images/wayang/kelir_01.jpg");

Jika dibetulkan, mestinya tampilan indah yang dijanjikan akan muncul. Selamat, anda telah melewati error di tiga tahap yaitu : compile-time, link-time maupun run-time. Kalau sampai tahap ini kepala anda masih dingin, dan hati masih penuh semangat, anda adalah (calon) pemrogram yang tangguh ;D

Pemrograman Ukoro

Mohon melihat Lampiran 1 tentang SDL_Wayang. Pada latihan 1.2 sebelumnya, kita telah menampilkan layar grafik dengan abstraksi "Kelir" yanng disediakan SDL_Wayang. Kelir mampu menampilkan latar belakang citra (image), dan juga menggambar bentuk-bentuk dasar (garis, kotak, lingkaran, dll).

Selanjutnya kita akan belajar tentang "Ukoro" (kalimat / string), abstraksi sediaan SDL_wayang untuk menulis huruf. Untuk itu, tambahkan fungsi lat1_3() pada file "latihan1.cpp sebagai berikut:

// variabel global pemesanan Ukoro
hUkoro sans16;
hUkoro sans16a;
hUkoro jawa40;
 
/* Subrutin lat1_3
 * Memakai perintah Ukoro SDL_Wayang
 */ 
void lat1_3() {
    kSetCaption("Praktikum 1.3");
 
    // Menampilkan tulisan di kelir
    // harus memuat ukoro (teks) dulu, lalu panggil uPrint
    jawa40 = uCreate("fonts/truetype/jawa-latin.ttf", 40);
    uSetColor(jawa40, BLACK);
    uPrintC(jawa40, 0, -210, "Wayang Cyber");
 
    // Ukoro juga bisa tampil terus di atas kelir
    // Untuk itu harus dibuat obyek sendiri-sendiri
    // dan diletakkan pada tempat yang semestinya
    sans16= uCreate("fonts/truetype/freefont/FreeSans.ttf", 16);
    uSetColor(sans16, BLACK);
    uSetText(sans16, "Oleh : %s", author_name);
    uJumpTo(sans16, -380, -285);
    uSetMode(sans16, MODE_LEFT + MODE_SHOW);
 
    // tulisan kedua dengan huruf sama
    // Klone dari ukoro lain
    sans16a= uClone(sans16);
    uSetText(sans16a, "NIM  : %d", author_nim);
    uJumpTo(sans16a, 380, -285);
    uSetMode(sans16a, MODE_RIGHT + MODE_SHOW);
};

Apa yang kita buat di latihan1.cpp itu, deklarasikan di file latihan1.h sebagai berikut:

// Deklarasi variabel dan fungsi lat 1.3
extern hUkoro jawa40;
extern hUkoro sans16;
extern hUkoro sans16a;
 
void lat1_3();

Terakhir, panggil prosedur lat1_3 dari main.cpp.

// Deklarasi 
int main ()
{
    printf("Praktikum Pemrograman C\n");
    about();
 
    kOpen(800, 600, "kelir_01.jpg");
 
    // Praktikum Modul 1
    lat1_2();
    lat1_3();
 
    dPause(10000);
    kClose();
 
    return 0;
}

Penulisan latihan 1.3 selesai. Silakan "build and run".

Pemrograman Wayang

Sampailah kita pada aktor utama SDL_Wayang, yang bisa ditebak, bernama Wayang. Abstraksi ini mewakili citra yang bisa bergerak, maupun berubah di atas kelir. Mari coba contohnya dengan menambahkan prosedur lat1_4 pada file "latihan1.cpp".

/* Subrutin lat1_4
 * Memakai wayang 
 */
hWayang batu;
hWayang matahari;
hWayang awan;
 
void lat1_4() {
    // pesan variabel lokal
    kSetCaption("Praktikum 1.4");
 
    // Ganti gambar latar belakag
    kSetImage("images/alam/kelir_01.jpg");
 
    // Wayang
    batu = wCreate(1, "images/alam/bebatuan.png");
    awan = wCreate(1, "images/alam/awan.png");
    // Wayang dengan 2 gambar, agar bisa blink
    matahari = wCreate(2, "images/alam/matahari_01.png",
       "images/alam/matahari_02.png");
 
    // wayang batu loncat ke posisi tertentu,
    // lalu menggambar diri (tetap)
    wJumpTo(batu, -200, -200);
    wStamp(batu);
    wJumpTo(batu, -50, -230);
    wStamp(batu);
    wJumpTo(batu, -120, -235);
    wStamp(batu);
 
    // wayang, loncat ke posisi awal dan bergerak
    wJumpTo(matahari, -500, 250);
    wShow(matahari);
    wStepTo(matahari, -250, 250, 20);
 
    // wayang, bergerak meninggalkan jejak samar
    wJumpTo(awan, 350, 320);
    wShow(awan);
    wSetTrail(awan, 40);
    wSetTrailColor(awan, WHITE);
    wSetTrailOpaque(awan, 10);
    wStepTo(awan, -210, 230, 30);
 
    // wayang berubah bentuk 6 kali dengan periode 1000 ms
    wBlink(matahari, 6, 1000);
}

Selanjutnya, coba lakukan sendiri seperti sebelumnya:

• Deklarasikan variabel dan fungsi lat1_4 pada file latihan1.h
• Edit fungsi main di main.cpp untu memanggil lat1_4.

Mestinya anda akan bisa menikmati tampilan seperti ini.