pengenalan pemograman cgi ver2

Pengenalan Pemrograman CGI Menggunakan C/C++ Reza Darmakusuma

PENGENALAN PEMOGRAMAN CGIMENGGUNAKAN C/C++

Oleh

Reza Darmakusuma

Email: [email protected]

TEKNOLOGI MEDIA DIGITAL DAN GAME SEKOLAH TEKNIK ELEKTRO DAN INFORMATIKA

INSTITUT TEKNOLOGI BANDUNG 2010


PENDAHULUAN

Tutorial berikut merupakan suplemen untuk pemrograman

Common Gateway Interface (CGI). Penjelasan yang diberikan pada suplemen ini adalah implementasi dasar

dari pemrograman C/C++ yang digunakan untuk melakukan

implementasi perangkat lunak di bagian server. Oleh

sebab itu, pengetahuan pemrograman C/C++ menjadi

dasar yang penting sebelum melakukan implementasi

ini.

Pengetahuan lain, yaitu HTML, juga diperlukan pada

pemrograman CGI. Penggunaan web browser dan aplikasi pendukung lain, membutuhkan pengetahuan-pengetahuan

dasar tersebut. Beberapa aplikasi dan aplikasi

pendukung yang digunakan pada tutorial ini adalah

sebagai berikut:

a. Visual C++ sebagai IDE

b. Mozila Firefox sebagai web browserc. XAMPP 1.7.3 sebagai web serverd. Microsoft Office Frontpage sebagai aplikasi web

page editor


HELLO WORLD Bagian 1

Bagian ini merupakan aplikasi awal yang menjelaskan

cara men-display-kan Hello World dengan menggunakan C/C++ pada aplikasi CGI. Berikut adalah langkah-

langkah yang diperlukan untuk melakukan hal tersebut.

1. Buat aplikasi CGI melalui Visual C++ IDE dengan

source code seperti berikut:

2. Compile file

3. Copy aplikasi ke ...\xampp\cgi-bin\...

4. Buka web browser dengan alamat http://localhost/cgi-bin/.

Berikut adalah tampilan dari implementasi pemrograman

yang dilakukan dengan menggunakan langkah-langkah di

atas.


HELLO WORLD Bagian 2

Aplikasi berikut merupakan pengembangan dari aplikasi

sebelumnya. Seperti yang dapat dilihat, bahwa pada

aplikasi sebelumnya memiliki konten dengan tipe

text/plain. Pada aplikasi berikut akan dilakukan modifikasi dengan format HTTP. Berikut adalah sourcecode dari aplikasi yang diimplementasikan.

Source code aplikasi 1

Source code aplikasi 2

Hasil Aplikasi 1 Hasil Aplikasi 2


Menerima Masukan Web Browser

Pada aplikasi ini akan dilakukanoperasi penjumlahan

dua buah variabel. Website didesain dengan

menggunakan Microsoft Office Frontpage. Sedangkan

website yang merespon aktivitas dari website awal

dibuat menggunakan C++. Berikut ini adalah gambaran

dan langkah-langkah dalam melakukan implementasi ini.

1. Mendesain Website

Berikut adalah langkah-langkah dalam mendesain web.

Gambar Designs View

Gambar Codes View


2. Membuat Website yang merespon

Untuk membuat web yang merespon, di bawah ini adalah

source code yang dipergunakan.

3. Compile aplikasi

4. Tes aplikasi

Dari langkah-langkah yang dilakukan, berikut adalah

gambar yang memperlihatkan hasil implementasi.

Setelah tombol

Jumlahkan! dipencet


Mengontrol Actuator Melalui Web

Pada bagian ini, dilakukan implementasi sebuah

aplikasi sistem pengontrolan menggunakan web. Diagram

sistem yang digunakan pada aplikasi ini adalah

sebagai berikut:

Pada sistem, user (client) dapat mengakses aplikasi

pada server menggunakan web browser. Aplikasi pada

server tersebut, dapat digunakan untuk mengontrol

kondisi lampu (aktuator) sehingga lampu dapat dalam

kondisi ON atau OFF. Kondisi lampu dikontrol oleh

server (PC) menggunakan komunikasi serial (RS232).

Aplikasi untuk mengontrol lampu yang digunakan

merupakan simulator virtual. Spesifikasi dari

simulator ini adalah sebagai berikut:

1. Address : COM40

2. Baudrate : 9600 bps

3. Data bit : 8

4. Stop bit : 1

5. Parity : None

6. Handshaking : None

Pembuatan code website yang dapat menjalankankan

aplikasi untuk mengontrol lampu digunakan Microsoft

Office FrontPage. Source code dan desain website yang

digunakan adalah sebagai berikut:

Client Server AktuatorRS232


Dari desain dan source code di atas, hasil

pemanggilan rancangan website dari web browser dapat

dilihat seperti gambar berikut ini.

Diperhatikan bahwa hingga pada bagian ini, web server

ada pada di komputer yang sama dengan client. Maka

pemanggilan website pada web browser adalah dengan

mengetikkan

file:///.../xampp/cgi-bin/.htm

Perlu untuk disadari bahwa aplikasi yang sekarang

digunakan adalah aplikasi antara file yang berformat

htm dan aplikasi yang berformat cgi.


Sedangkan untuk CGI, aplikasi yang diimplementasikan

menggunakan source code berikut ini:

Aplikasi CGI di atas digunakan untuk mengirim

perintah kepada aktuator sehingga dapat mengontrol

keadaan lampu. Server akan mengirimkan karakter a

untuk mengubah lampu pada kondisi ON melalui

komunikasi RS232. Sedangkan untuk mengubah kondisi

lampu pada kondisi OFF, server mengirimkan sebuah

karakter s melalui komunikasi RS232. Sedangkan

simulator lampu yang digunakan memiliki visual

sebagai berikut:


Pada simulator diatas, button merah mensimulasikan

lampu. Pada keadaan ini lampu dalam kondisi OFF.

Sedangkan pada kondisi ON, lampu kan berubah warna

menjadi merah menyala. Gambar berikut, menggambarkan

aplikasi ketika dijalankan.

Hasil aplikasi lampu dalam kondisi ON

Hasil aplikasi lampu dalam kondisi OFF


Menghubungkan Client-Server dan Aplikasi Pengontrol Lampu

Pada bagian ini, akan dibahas implementasi sistem

secara keseluruhan. Menggunakan dua buah komputer

untuk menghubungkan client dan server, serta

menggunakan simulator lampu dan simulator RS232 untuk

mensimulasikan komunikasi serial dengan protocol

RS232. Berikut adalah langkah-langkah yang diperlukan

untuk dapat menggunakan komputer client sebagai

pengontrol aktuator yang terpasang pada komputer

server menggunakan web browser (simulasi pada LAN).

1. Hubungkan komputer client dan komputer server

pada jaringan LAN. Pastikan kedua buah komputer

terpasang pada jaringan.

2. Set IP address dari komputer client dan

komputer server. Berikut adalah alamat IP yang

digunakan pada aplikasi ini.

IP pada komputer server : 192.168.1.2

IP pada komputer client : 192.168.1.10


3. Ubah aplikasi website di atas (format HTML yang

dibuat menggunakan Microsoft Office FrontPage)

menjadi aplikasi website yang bertipe cgi.

Berikut adalah source code yang digunakan.

4. Ubah alamat localhost pada source code

sebelumnya, menjadi alamat server yang

digunakan. Lingkaran merah di atas

memperlihatkan perubahan yang dilakukan.

5. Pindah aplikasi cgi ke dalam folder

...\xampp\cgi-bin\...

6. Jalankan apache web server, dalam hal ini

adalah XAMPP.

7. Set a pair dari simulator COM pada komputer

server dengan alamat COM4 dan COM40.

8. Jalankan aplikasi simulator lampu pada komputer

server.

9. Buka web browser pada komputer client

10.Pada address, tulis:

http://192.168.1.2/cgi-bin/.cgi

11.Jalankan pengontrol ON dan OFF dari aplikasi

12.Enjoy it!!!!!!!!!!!!! -

pengenalan pemograman cgi ver2

Documents