Wednesday, 30 December 2015

CCTV adalah Mata Digital

Perangkat yang satu ini (CCTV) nggak hanya berada di  kantor-kantor atau pertokoan, tetapi sudah merambah ke perumahan-perumahan baik elite maupun sederhana. Tujuannya tentu untuk keamanan, tapi bisa juga untuk selfie hehehe. Harga yang semakin murah dan kualitas yang semakin bagus menjadikan perangkat ini tergeletak dimana-mana (di toko CCTV-nya, maksud saya).

Ok yang saya mau bahas disini adalah pengalaman saya ketika disuruh memasang kamera CCTV langsung ke TV biasa nggak melalui perangkat DVR. Karena emang masih amatiran , ide yang terlintas pertama adalah menghubungkan kamera ke port Antenna pada TV.

Ujung kiri BNC, ujung kanan konektor Antenna, apa yang terjadi?  

Langsung saja kabel RG59 -nya saya sulap dengan ujung kiri konektor BNC dan satu-nya konektor antenna (Jak TV di bon pembelian-nya, ntah lah namanya masih samar-samar di pikiran saya :v ). Colok kamera lalu colok ke TV dan kamera-nya pun jadi antenna, dan sayapun asyik nonton beberapa channel TV, AZzzzzzz. OK cara ini ternyata salah, ternyata cuma perlu alat berikut :

BNC to RCA converter

Yup, BNC to RCA converter, alat ini banyak dijual di toko listrik atau toko elektronik. Jadi kita bikin kabel CCTV seperti biasa, ujung kiri dan kanan menggunakan konektor BNC. Lalu dengan converter tersebut dihubungkan ke Video yang ada pada deretan port RCA (umumnya berwarna lingkaran kuning). Dan hasilnya seperti berikut :

Everything is ready!

Udah ada penampakan.

OK itu aja pengalaman yang bisa saya bagikan hahaha, semoga bermanfaat.

- krofz

Wednesday, 13 May 2015

Dasar-dasar Basis Data MySQL (1)


Kali ini kita akan membuat suatu database sederhana. Sebelum melanjutkan saya ingin menyampaikan bahwa tulisan ini dibuat dengan menggunakan MySQL 5.5 , sebagian besar queri yang digunakan bersifat umum dan dapat digunakan pada sistem database lainnya.

Saat pertama kali menginstal DBMS seperti MySQL, masalah yang sering muncul adalah tampilannya yang masih command line. Meskipun ada banyak program GUI yang membantu proses pembuatan database pada MySQL, tidak ada salahnya jika kita melakukan melalui command line-nya MySQL. Selain lebih cepat dapat membantu dalam penguasaan bahasa SQL. Pertama-tama jalankan MySQL Command Line selanjutnya kode berikut :

.
CREATE DATABASE LatihanMSBD;
.
Membuat database dengan nama LatihanMSBD. Catatan : penggunaan titik koma ( ; ) pada akhir kalimat, untuk mengakhiri statement. Kita juga dapat menjalankan beberapa baris statement queri SQL pada satu perintah, contoh :

.
CREATE DATABASE LatihanMSBD;
CREATE DATABASE DBTiket;
CREATE TABLE NamaTable( … );
.
Selanjutnya, pembuatan table sederhana. Sebelumnya pilih salah satu database yang akan digunakan dengan perintah command line berikut :

.
USE Nama_Database_yang_akan_digunakan;
.
Jangan lupa untuk menuliskan titik koma ( ; ) walaupun tahap ini bisa ditulis tanpa titik koma, tapi bisa jadi kebiasaan yang baik kalau kita sering menuliskannya ;D . Jika sukses (muncul pesan database changed) ketikkan kode berikut :

.
CREATE TABLE Member(
   KodeMember INT,
   Nama VARCHAR(50)
);
.
Membuat table dengan nama Member yang berisi 2 kolom : KodeMember bertipe integer, dan Nama bertipe Varchar dengan size 50. Table diatas tanpa Primary Key atau Foreign Key.

.
CREATE TABLE JenisMember(
   KdJenisMember VARCHAR(20) NOT NULL PRIMARY KEY,
   Nama VARCHAR(50),
   Diskon DOUBLE(10,2)
);
.
Table diatas berisi tiga field / column dengan kdJenisMember sebagai Primary Key. Untuk primary key jika kita tidak menambahkan opsi Not Null secara otomatis sistem akan menambahkan perintah Not Null karena primary key tidak boleh NULL. Untuk melihat table apa saja yang sudah kita buat dapat menggunakan perintah command line berikut :

.
Show Nama_Tables;
.
Maka akan tampil seluruh table pada database yang sedang aktif pada command line. Table sudah tercipta, saat nya melakukan perubahaan pada kolom, perhatikan queri berikut :

.
ALTER TABLE Member ADD  Alamat2 VARCHAR(50); 

ALTER TABLE Member
   ADD  Alamat3 VARCHAR(50) NOT NULL, 
   ADD Alamat4 VARCHAR(50); 

ALTER TABLE Member
   ADD (Alamat VARCHAR(50) NOT NULL,  NoTelp VARCHAR(15)); 
.
Menambahkan kolom pada table Member dengan menggunakan Add (huruf besar atau kecil tidak masalah). Pembuatan 2 field/kolom dapat dipersingkat dengan tanda kurung buka dan kurung tutup.

.
ALTER TABLE Member ADD TanggalLahir DATE AFTER Nama;
.
Menambahkan kolom TanggalLahir setelah kolom Nama pada table Member. Selanjutnya :

.
ALTER TABLE Member ADD (KdJenisMember VARCHAR(20),
   FOREIGN KEY(KdJenisMember) REFERENCES JenisMember(KdJenisMember));
.
Menambahkan kolom KdJenisMember sekaligus menambahkannya sebagai Foreign Key.

.
ALTER TABLE Member MODIFY COLUMN KdJenisMember VARCHAR(25) AFTER KodeMember;
.
Mengubah kolom kdJenisMember, tipe data berubah menjadi Varchar dengan ukuran 25 (jika ukuran lama berbeda, maka akan berubah menjadi ukuran baru) dan posisi kolom berada setelah KodeMember.

.
Describe Nama_Table;
.
Perintah command line diatas untuk mengetahui field/kolom apa saja yang terdapat pada suatu table beserta informasi masing-masing kolom.

.
ALTER TABLE Member DROP NoTelp2; 
ALTER TABLE Member DROP NoTelp3, DROP NoTelp4;
.
Menghapus kolom pada table Member dengan menggunakan Drop. Masih banyak queri-queri lainnya yang akan menyusul. Akhir kata, Happy Coding! :D

- krofz

Tuesday, 21 April 2015

Memperoleh Hari sesuai Tanggal


Kali ini kita akan meminta user memasukkan tanggal, bulan, dan tahun, lalu secara otomatis program akan menampilkan hari sesuai tanggal tersebut. Yang kita perlukan adalah library <ctime> dengan menggunakan tipe data bentukan tm . Untuk itu perhatikan kode berikut :

.

#include <ctime>
#include <iostream>

using std::cout;
using std::cin;

int main()
{
    std::tm waktu = {};
    
    cout<<"Masukkan Tahun = ";
    cin>>waktu.tm_year;
    waktu.tm_year-=1900;     //perlu dikurangi karena tahun dimulai dari 1900

    cout<<"Masukkan Bulan = "; 
    cin>>waktu.tm_mon;
    waktu.tm_mon -= 1;       //indeks bulan dimulai dari 0

    cout<<"Masukkan Tanggal = "; 
    cin>>waktu.tm_mday;
    
    //mengatur nilai
    mktime( &waktu);

    cout<<"Hari pada tgl. "<<waktu.tm_mday<<"-"<<waktu.tm_mon<<"-"<< (1900+waktu.tm_year) <<" adalah "<<waktu.tm_wday;

    return 0;    
}

.

Fungsi mktime akan menyesuaikan data yang ada pada nilai-nilai variabel waktu menjadi format data yang sesuai pada sistem waktu di komputer. Misal ketika user memasukkan nilai tahun=2014 dan bulan bernilai 15, maka hasil yang diperoleh adalah tahun=2015 dan bulan=3. Karena nilai bulan telah melebihi setahun dan secara otomatis variabel tm_year bertambah satu. Yang perlu diperhatikan sebelum memproses nilai-nilai tersebut adalah bulan harus dikurang 1 karena indeks nya dimulai dari nol. Selain itu nilai tahun harus dikurang 1900, karena perhitungannya dimulai dari 1900.

Dari kodingan diatas, saat dijalankan ternyata hasil yang diperoleh berupa angka (variabel tm_wday) dimulai dari 0-6 , 0=Minggu, 1=Senin, dst. Untuk itu kita perlu membuat array konstan yang menampung nama-nama hari dalam satu minggu, perhatikan kode berikut :

  
.        
     const char * hari[] = { "Minggu", "Senin", "Selasa", "Rabu",
                             "Kamis", "Jumat", "Sabtu"};

     const char * bulan[] = { "Januari", "Februari", "Maret", "April", "Mei",
                              "Juni", "Juli", "Agustus", "September",
                              "Oktober", "November","Desember"};
     ...

     cout << "Hari pada tgl. " << waktu.tm_mday << " " << bulan[waktu.tm_mon] << " " << (1900+waktu.tm_year) << " adalah " << hari[waktu.tm_wday];
.

Selain hari, bulan dan tahun terdapat juga anggota variabel waktu lainnya seperti tm_hour, tm_min, dan tm_sec pada struktur tm. Proses perhitungan juga akan disesuaikan. Contoh saat memasukkan nilai 65 pada menit maka saat fungsi mktime dipanggil, nilai jam akan bertambah 1 jam dan menit akan dikurang 60 menit. Tentunya struktur data ini dapat membantu kita untuk pemrosesan yang berhubungan dengan waktu. Akhir kata, Happy Coding! :D

- krofz

Saturday, 4 April 2015

SDL2 : Dimulai dari Sebuah Titik (Piksel) #5


Tulisan ini merupakan lanjutan dari:

Sebuah titik saja tidak cukup, mari kita membuatnya dari garis karena hasil yang diperoleh akan lebih baik. Yang diperlukan adalah koordinat lama, kita namakan X2 dan Y2. Perhatikan kode berikut :
   
   ...
      int X2=0,Y2=0;
      for(int X1=0; X1 < Layar_Lebar; X1++){

         //Memperoleh derajat untuk Y , dimana 1 gelombang = 360 derajat
         int derajat = X1*((iPulse*360.0f)/Layar_Lebar);

         //setiap nilai X bernilai sekian derajat tergantung banyak iPulse
         int Y1 = (Layar_Tinggi/2) +
                  cos(derajat*PI/180.0)*iTinggi;

         // Jika salah satu dari dua titik berada pada dimensi layar,
         // maka selanjutnya membuat garis.
         if( ((X1 > 0 && X1 < Layar_Lebar) && (Y1 > 0 && Y1 < Layar_Tinggi)) ||
             ((X2 > 0 && X2 < Layar_Lebar) && (Y2 > 0 && Y2 < Layar_Tinggi)))
         {
            //proses drawing
            SDL_RenderDrawLine( gRenderer, X1, Y1, X2, Y2);

         }

         //Menyimpan titik terakhir pada (X2,Y2)
         X2 = X1;
         Y2 = Y1;
      }
   ...

Proses penggambaran terjadi jika X1 atau X2 lebih besar dari 0 (nol) begitu pula untuk Y1 atau Y2 > 0. Yang perlu diperhatikan adalah variabel X2 dan Y2. Karena kita melakukan inisialisasi dengan nilai 0 (nol), maka (X2,Y2) = (0,0) dan X1,Y1 berada di posisi tertentu. Sehingga hasilnya tidak sesuai yang diharapkan. Untuk memperbaikinya dapat mengisi nilai awal sama seperti X1 dan Y1 pada X2 dan Y2.

Fungsi SDL_RenderDrawLine( gRenderer, X1, Y1, X2, Y2), sangat mudah digunakan, parameter yang perlu diisi pun cukup jelas. Sampai disini SDL2 sudah menyediakan banyak fungsi basic untuk proses penggambaran primitif yang lebih baik dan pemanfaatan akselerasi Hardware yang lebih powerful. So, Happy Coding! .

- krofz

Thursday, 12 March 2015

SDL2 : Dimulai dari Sebuah Titik (Piksel) #4


Tulisan ini merupakan lanjutan dari:

Seperti yang kita bahas sebelumnya, kini saatnya menambahkan tinggi dan banyaknya gelombang. Tambahkan variabel iPulse dan iTinggi seperti dibawah ini :
   
   ...
    //Variabel untuk menampung event masukkan
    SDL_Event e;
    int iPulse = 5 , iTinggi = 80;

    //Loop utama kita
    while( !keluar )
    {
   ...

Selanjutnya tambahkan sedikit perintah untuk mengatur nilai variabel tersebut dengan memeriksa tombol pada keyboard, seperti kode berikut :
   
   ...
      //menangani jenis masukkan
      switch ( e.type)
      {
         case SDL_QUIT : keluar = true; break;
         case SDL_KEYDOWN:{
            switch( e.key.keysym.sym){
               case SDLK_UP: if( iPulse < 15) pulse++; break;
               case SDLK_DOWN: if( iPulse > 5) pulse--; break;
               case SDLK_w: if( iTinggi < 300) iTinggi+=10; break;
               case SDLK_s: if( iTinggi > 60) iTinggi-=10; break;
               case SDLK_ESCAPE: keluar = true; break;
               default:;
            }
         }
         default:;
      }
   ...

Selanjutnya kita masuk ke perulangan X sebelumnya, dengan perubahan seperti berikut :
   
   ...
      for(int X=0;X < Layar_Lebar;X++){
      
         // Memperoleh derajat untuk Y , 
         // dimana 1 gelombang = 360 derajat
         int derajat = X*((iPulse*360.0f)/Layar_Lebar);

         // setiap nilai X bernilai sekian derajat,
         // tergantung banyaknya iPulse
         int Y = (Layar_Tinggi/2) +
                 cos(derajat*PI/180.0)*iTinggi;

         //optimasi
         if( (X > 0 && X < Layar_Lebar) &&
             (Y > 0 && Y < Layar_Tinggi))
         {
             //proses penggambaran
             SDL_RenderDrawPoint(gRenderer, X, Y);
         }
      }
   ...

Untuk proses optimasi kita hanya menampilkan titik tersebut jika koordinat (X,Y) berada pada dimensi layar (perhatikan kondisi if). Hasil yang akan diperoleh :


Gambar 1. Gunakan tombol W,S, dan anak panah Atas dan Bawah.

Kelemahan menggambar dengan titik adalah hasil yang diperoleh dapat terlihat putus-putus (perhatikan gambar diatas). Contoh, untuk (X1,Y1) = (5,30), dilanjutkan dengan (X2,Y2) = (6,35), jarak yang diperoleh oleh Y1 dan Y2 cukup jauh sehingga terlihat putus. Untuk itu kita perlu perbaikan proses penggambaran. Pada artikel selanjutnya kita akan menggunakan garis. So, Happy Coding! .

- krofz

Monday, 2 March 2015

SDL2 : Dimulai dari Sebuah Titik (Piksel) #3


Tulisan ini merupakan lanjutan dari:

Pada artikel pertama, kita sudah melihat prototipe, atau bentuk umum penulisan fungsi untuk membuat titik , yaitu cukup mengisi koordinat (X,Y) pada fungsi SDL_RenderDrawPoint(gRenderer, x, y). Lalu untuk menciptakan bentuk seperti bergelombangan, kita dapat menggunakan rumus Y = Cos(X) atau Y = Sin(X). Namun sebelumnya perhatikan Kode berikut :
   
   ...
   //Membersihkan layar
   SDL_SetRenderDrawColor( gRenderer, 0x55, 0x55, 0x55, 0xFF );
   SDL_RenderClear( gRenderer );
   
   //mengatur warna menjadi putih
   SDL_SetRenderDrawColor( gRenderer, 0xFF, 0xFF, 0xFF, 0xFF );
   for(int X=100; X<400; X++){
      SDL_RenderDrawPoint(gRenderer, X, 50);
   }

   for(int X=100,Y=X; X<300; X++,Y=X){
      SDL_RenderDrawPoint(gRenderer, X, Y);
   }
   ...

Tambahkan pada loop utama tepatnya setelah proses penanganan event. Hasil yang akan diperoleh adalah 2 buah garis, garis pertama mendatar, dan yang kedua berbentuk garis miring, seperti gambar berikut :


Gambar 1. Dua buah garis.


Dapat dilihat bahwa deretan titik tersebut dapat membentuk sebuah garis atau bentuk lainnya. Tapi seharusnya kita menggunakan fungsi untuk menggambar sebuah garis dibanding menggambar titik demi titik (akan dijelaskan nanti). Okay, kita lanjut ke fungsi Y = Cos(X), algoritmanya sederhana setiap nilai Y didapat dari perhitungan Cos(X). Dimana X ini kita analogikan menggunakan satuan derajat, contoh X=0° / 0 derajat maka akan menghasilkan nilai 1 (Y=1), lalu X=30° bernilai (1/2) akar 3, dst . Untuk menggunakan fungsi Cos kita dapat menggunakan library cmath. Tambahkan code diawal sehingga tampak seperti berikut :

//Start Code
#include <sdl.h>
#include <stdio.h>
#include <cmath>

#define PI 3.14159265
...

Lalu pada main loop, tambah atau ubah kode sebelumnya menjadi berikut :

...
   //Membersihkan layar
   SDL_SetRenderDrawColor( gRenderer, 0x55, 0x55, 0x55, 0xFF );
   SDL_RenderClear( gRenderer );
   
   //mengatur warna menjadi putih
   SDL_SetRenderDrawColor( gRenderer, 0xFF, 0xFF, 0xFF, 0xFF );
   for(int X=0;X < Layar_Lebar;X++){
       int Y = cos(X*PI/180.0)*80;
       SDL_RenderDrawPoint(gRenderer, X, (Layar_Tinggi/2)+Y);
   }
...

Saat dijalankan akan terbentuk gelombang seperti gambar berikut :


Gambar 2. Grafik Cos(X).

Dapat dilihat posisi Y untuk X = 1 / 1 derajat dimulai dari setengah dari tinggi layar ditambah 80 px. Karena perhitungan nilai dari cos(1 derajat) adalah 0.9998 dengan mengalikan dengan tinggi yang diinginkan yaitu 80px atau lebih. Dapat dilihat bahwa pada fungsi cos() tidak hanya memasukkan parameter nilai X mentah-mentah, tetapi perlu dikalikan dengan PI (3,14) lalu dibagi 180 derajat. Ini karena fungsi tersebut meminta memasukkan nilai Radian bukan Derajat / Degree. Nilai 1 radian = 57,296 derajat (dengan 3 angka dibelakang koma, aslinya mah banyak :v ). Perhatikan gambar berikut :


Gambar 3. Grafik Cos(X), titik Y dimulai dari 240 (setengah tinggi layar). 

Jadi Cos(3,14 Radian) = (-1) atau bernilai 180 derajat (lebih lanjut tentang radian). Selanjutnya agar dapat menghasilkan gelombang yang lebih banyak dalam satu layar, maka kita perlu persiapkan variabel untuk mengubah banyaknya gelombang. Sebut saja variabel pulse (int pulse = 5) :v . Tidak hanya itu kita juga akan mengatur tinggi titik tersebut pada artikel selanjutnya. So, Happy Coding!


- krofz

Thursday, 26 February 2015

SDL2 : Dimulai dari Sebuah Titik (Piksel) #2




Tulisan ini merupakan lanjutan dari:
SDL2 : Dimulai dari Sebuah Titik (Piksel)

Pada SDL2 mari kita berkenalan dengan tipe data baru seperti SDL_Renderer dan SDL_Window untuk keperluan utama program kita, sebelumnya pada SDL1 cukup menggunakan SDL_Surface untuk membuat jendela utama. Selebihnya hanya perubahan disana-sini yang perlu penyesuaian saja .

Mari kita mulai dengan membuat file baru (File -> New -> Empty File, simpan dengan nama Main.cpp atau nama yang diinginkan) untuk project kita. Selanjutnya tuliskan kode int main seperti biasa, dan inisialisasi SDL serta beberapa variabel penting, seperti berikut :

  
//start code
#include <SDL.h>
#include <stdio.h>

//dimensi layar
const int Layar_Lebar = 640;
const int Layar_Tinggi = 480;

//fungsi untuk memulai fungsi-fungsi SDL
bool inisialisasi();

//prosedur untuk membersihkan variabel-variabel dan SDL
void bersih();

SDL_Window * gWindow = NULL;
SDL_Renderer * gRenderer = NULL;

int main(int argc, char * argv[])
{
   ...

Saat fungsi main dijalankan selanjutnya mempersiapkan inisialisasi variabel global agar dapat digunakan melalui fungsi inisialisasi. Berikut isi dari fungsi inisialisasi :
  
...

bool inisialisasi()
{
    //inisialisasi SDL
    if( SDL_Init( SDL_INIT_VIDEO ) < 0 )
    {
        printf( "Terjadi Kesalahan! Inisialisasi Gagal! SDL Error: %s\n", SDL_GetError() );
 return false;
    }

    gWindow = SDL_CreateWindow("(Judul Program)",SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED,Layar_Lebar,Layar_Tinggi,SDL_WINDOW_SHOWN);
    if( gWindow == NULL){
        printf( "Gagal membuat jendela! SDL Error: %s\n", SDL_GetError() );
        return false;
    }

    gRenderer = SDL_CreateRenderer( gWindow,-1,SDL_RENDERER_ACCELERATED);
    if( gRenderer == NULL){
        printf( "Gagal membuat Renderer! SDL Error: %s\n", SDL_GetError());
        return false;
    }

    //mengatur warna
    SDL_SetRenderDrawColor( gRenderer, 0x00, 0x00, 0xFF, 0xFF );

    //semua berjalan normal
    return true;
}
...

SDL_Init() berfungsi untuk inisialisasi library SDL agar dapat digunakan. Lalu fungsi SDL_CreateWindow akan membuat jendela aplikasi dengan dimensi 640x480, perhatikan parameter pada SDL_CreateWindow(). Selanjutnya dengan SDL_CreateRenderer kita telah membuat wadah untuk proses drawing. Dan yang terakhir adalah prosedur untuk membersihkan variabel-variabel yang ada dalam memori, dan juga mematikan fungsi-fungsi SDL yang sudah tidak terpakai, melalui prosedur void bersih() :
  
...
void bersih()
{
    //bersihkan variabel dari memory
    SDL_DestroyRenderer( gRenderer );
    SDL_DestroyWindow( gWindow );
    gWindow = NULL;
    gRenderer = NULL;

    //Menutup SDL
    SDL_Quit();
}
...

Inisialisasi dan prosedur pembersihan telah siap, selanjutnya kita langsung masuk ke dalam looping utama program kita.
  
...
int main(int argc, char * argv[])
{
    if( inisialisasi() == false){
        printf(" Program gagal berjalan! ");
        bersih();
        return 1;
    }
    //variabel sebagai Penanda perulangan
    bool keluar = false;

    //Variabel untuk menampung event masukkan
    SDL_Event e;

    //Loop utama kita berjalan selama keluar = false
    while( keluar == false)
    {
        //selama masih ada event dalam antrian
        while( SDL_PollEvent( &e ) != 0 )
        {
            //menangani jenis masukkan
            switch ( e.type)
            {
                //Jika user menekan tombol escape (ESC) atau tombol silang,
                //maka program akan ditutup
                case SDL_QUIT : keluar = true; break;
                case SDL_KEYDOWN:{
                    switch( e.key.keysym.sym){
                        case SDLK_ESCAPE: keluar = true; break;
                        default:;
                    }
                }
                default:;
            }
        }
        //mengatur warna abu-abu
        SDL_SetRenderDrawColor( gRenderer, 0x55, 0x55, 0x55, 0xFF );

        //Membersihkan layar dengan menutup keselurahan layar dengan warna abu-abu
        SDL_RenderClear( gRenderer );

        //Memperbaharui objek pada layar
        SDL_RenderPresent( gRenderer );

        //Waktu istirahat program setiap framenya selama 100 milisecond atau 0,1 detik
        SDL_Delay(100);
    }

    bersih();
    return 0;
}
...

Dapat dilihat bahwa SDL2 tidak jauh berbeda penulisannya jika anda sudah terbiasa dengan SDL1. Lakukan proses Build and Run (shortkey : F9), jika muncul pesan yang mengatakan bahwa SDL2.dll tidak ditemukan, maka buka kembali library arsip yang sebelumnya kita sudah , selanjutnya buka folder lib pada arsip, maka akan terdapat 2 folder , yaitu x64 untuk sistem 64bit dan x86 untuk sistem 32bit.

Lalu ekstrak SDL2.dll kedalam folder project atau satu folder dengan file program (.exe) atau cara kedua yaitu meletakkan file tersebut di dalam folder Windows -> System32. Dengan cara kedua, jika ada program yang memerlukan file tersebut, tetapi tidak ada dalam folder program tersebut, ia akan mencarinya didalam folder sistem (Windows\System32) sehingga dengan cara kedua, file library dapat bersifat universal.

Selamat! Jika program anda berjalan normal dan memunculkan jendela aplikasi dengan background berwarna abu-abu! . Pada artikel selanjutnya akan kita tampilkan titik putih seperti screenshot sebelumnya. So, Happy Coding!

- krofz

Saturday, 14 February 2015

SDL2 : Dimulai dari Sebuah Titik (Piksel)

" Well, program yang rumit 
selalu dimulai dari yang sederhana 
( yah iyalah... )"

Kali ini kita akan membuat sebuah titik dengan fungsi yang telah disediakan oleh library SDL 2, fungsi yang mudah , cepat dan aman   hehehe. Dan akan kita kembangkan pada artikel selanjutnya. Hasil yang ingin kita peroleh adalah seperti gambar berikut :


Gambar 1. Susunan piksel putih yang teratur menghasilkan grafik yang indah.

Sebelum melanjutkan , sistem yang saya gunakan (hanya perlu menyesuaikan dengan sistem yang anda gunakan)  :
OS : Windows XP (32 bit)
IDE : Code::Blocks 13.12
Library : SDL 2

~ Setting Library
Sebelumnya , saya akan review singkat jika anda belum pernah men-setting library SDL untuk project baru. Pertama download file library SDL 2 (klik link ini) , lalu download file pada bagian Development Libraries, sesuaikan dengan sistem dan IDE. Dalam contoh ini kita download file SDL2-devel-2.0.3-mingw.tar.gz (MinGW 32/64-bit) sekitar 7.8MB untuk sistem Windows (32bit atau 64bit) dan compiler MinGW. Selesai mendowload, lalu ekstrak file tersebut , anda akan mendapati beberapa folder seperti i686-w64-mingw32 , include , lib , dst. Selanjutnya buatlah folder SDL2 pada drive D atau pada lokasi yang dikhususkan untuk library-library atau suka-suka anda di My Document juga boleh :P , pada contoh ini saya meletakkan pada lokasi " C:\Program Files\CodeBlocks\SDL2\ ". 

Copy folder include kedalam folder SDL2 tersebut. Dilanjutkan dengan meng-copy folder "Lib" yang terdapat  pada i686-w64-mingw32 (untuk sistem 32-bit) atau pada x86_64-w64-mingw32 (jika sistem anda 64-bit dan ingin membangun aplikasi 64-bit), dalam contoh ini pada kita gunakan lib pada folder i686. Sehingga tampak seperti gambar berikut :


Gambar 2. Pengaturan folder library.

~ Project baru
Buat project baru pada Code::Blocks dengan jenis Empty Project tidak usah menggunakan Template SDL yang telah disediakan. Isi nama project dengan SDL2_Membuat_Garis, atau dengan nama dan lokasi yang diinginkan, selanjutnya lakukan centang pada Debug dan Release, dan finish.

Pada toolbar project, klik kanan project kita, lalu pilih Build Options, atau melalui menu Project -> Build Options. Pada parent Debug atau Release akan muncul nama project kita, klik dan pilih Tab -> Linker Settings, tambahkan link pada bagian Other linker options , yaitu : " -lmingw32 -lSDL2main -lSDL2 "(satu baris dan tanpa tanda kutip), ini penting untuk dapat terhubung ke library SDL.

Lalu pada tab Search directories, yang tidak kalah pentingnya adalah menambahkan lokasi library SDL yang telah kita ekstrak sebelumnya, sub-tab yang kita tambahkan melalui pada tab ini adalah Compiler dan Linker. Pada tab Compiler -> pilih Add dan masukkan lokasi folder include , contoh " C:\Program Files\CodeBlocks\SDL2\include ". Sedangkan pada Linker masukan lokasi folder lib , contoh " C:\Program Files\CodeBlocks\SDL2\lib " . Sehingga hasilnya kurang lebih akan tampak seperti gambar berikut (lokasi library SDL2 sesuai settingan anda) :


Gambar 3. Pengaturan library pada project
~ The Code
Semua sudah siap, kita tinggal menulis baris demi baris demi code-code yang indah untuk aplikasi kita . Fungsi utama yang digunakan untuk menghasilkan tampilan yang kita inginkan adalah :
   
   ...
   SDL_RenderDrawPoint(gRenderer, x, y);
   ...

Fungsi tersebut akan membuat sebuah titik sesuai koordinat yang diinginkan. Dan untuk warna yang dihasilkan akan menyesuaikan sesuai settingan aplikasi pada fungsi :
  
   ...
   SDL_SetRenderDrawColor(gRenderer,Red,Green,Blue,Alpha);
   ...

So, untuk lebih jelasnya akan saya lanjutkan pada tulisan selanjutnya hehehe. Happy Coding!

- krofz



 

back to top

back to top