1. Spesifikasi software dan hardware project 1.1. Pengendalian I/O melalui Paralel Port 1.1.1.

Parallel Printer Port Port yang satu ini, dipastikan selalu ada pada setiap komputer. Tercermin dari namanya, saat ini parallel port lebih banyak dimanfaatkan untuk urusan pencetakan data. Sebenarnya, port inipun bisa dimanfaatkan untuk hal lain, karena memiliki input/output (I/O) data. Tata-letak dari ke-dua puluh lima pin (D-type 25-female) parallel printer port, diperlihatkan dalam Gambar 2.

Gambar 2. Tata-letak pin parallel printer port.

Adapun tabel signal dan fungsi dari setiap pin pada parallel printer port, terlihat pada Gambar 2. Dari situ diketahui pin 2 s/d 9 (Data D0-D7) berfungsi sebagai output, yang selanjutnya dapat kita manfaatkan untuk mengontrol peralatan luar. Pin 10 s/d 13 dan pin 15 (Status S3-S7)

berfungsi sebagai input, yang dapat dijadikan untuk mendeteksi status peralatan luar.

Gambar 3. Signal dan fungsi parallel printer port.

1.1.2. Rangkaian input output Untuk keperluan uji-coba, kita bisa menghubungkan LED (Light Emitting Diode) lewat resistor 220 ohm, langsung dihubungkan ke pin output dari parallel port. Bisa juga hanya dengan mengukur tegangan 5 volt yang timbul, saat data port dalam keadaan high (TTL high). Tetapi perlu diperhatikan tegangan yang keluar dari parallel port 5 volt, sedangkan arusnya sangat kecil yaitu 4 mA pada logic 1 dan 0.4 mA pada logic nol. Nilai arus negative artinya sink ke dalam parallel port.

Gambar 4. Skema untuk pengujian sementara.

Besarnya resistor yang digunakan tidak boleh terlalu besar karena arus dari parallel port sangat kecil (sekitar 4 mA). Target untuk hardware sampai UAS adalah sebagai berikut : Kendali 8 pin output yang terdiri dari: Lampu AC 5 W dengan menggunakan relay sebagai saklar antara port parallel dengan sumber teganganAC 220 Volt Sebuah motor DC 5 Volt 6 buah LED

Deteksi input digunakan 4 saklar DIP.

1.2. Software Dalam project ini digunakan 2 macam software Hyper Text Markup Language (HTML) dan bahasa pemrograman Delphi dengan komponen tambahan CGIExpert. Pada saat komputer client mengirimkan data request ke komputer server maka komputer server mengeksekusi program berekstensi EXE pada direktori cgi-bin. Program ini membentuk file dalam bahasa HTML yang berisi data-data yang akan diinformasikan ke browser. File tersebut ditempatkan pada lokasi yang ditentukan oleh server. Dalam hal ini memakai digunakan server Apache dan file exe disimpan dalam direktori cgi-bin. Data tersebut akan dikirimkan kembali ke komputer client untuk diterjemahkan oleh web browser. Seperti ditampilkan pada bagan berikut ini:

Interne t
I/O Hardware Web Server

Request File HTML

Web Client

Database Server

Gambar 5. Alur request dari web browser pada server

Untuk mendukung aplikasi CGI pada Borland Delphi maka diperlukan komponen tambahan yang didapat dari paket program instalasi CGI-expert versi 6.50. Selanjutnya akan dibahas penggunaan masing masing software yang ada sebagai berikut: 1.2.1. Web Server Salah satu bagian terpenting dari seluruh system ini adalah server. Pada tugas ini digunakan server Apache, karena dapat berjalan under windows yang sesuai dengan penggunaan software Delphi sebagai bahasa pemrogramannya. File HTML akan disimpan di folder htdocs, supaya program tersebut dapat diakses oleh web

browser dari tempat lain. Sedangkan program CGI yang executable ditempatkan di folder cgi-bin. HTTP (Web) Server :

Dalam tugas ini kita memilih Web Server Apache dalam modul PHPTriad ver. 2.2.1. Apache adalah aplikasi Web Server yang tersedia secara gratis dan disebarkan dengan lisensi open source dan dapat beroperasi pada berbagai platform sistem operasi seperti Windows NT/9x, Netware, Linux, serta dengan beberapa keuntungan antara lain : mudah dikonfigurasi dan dapat digabung dengan modul lain seperti PHP. Web Server Apache digunakan untuk menjadikan PC sebagai komputer server. Apache menyediakan sarana setting direktori Htdocs sebagai tempat meletakkan program-program HTML yang dapat diakses oleh Web Browser. Sedangkan file-file executable (*.exe) diletakkan pada folder cgi-bin. 1.22.. PHP (PHP Hypertext Preprocessor) :

PHP adalah bahasa pemrograman (scripting) yang menyatu dengan HTML dan berada pada server. Artinya sintaks dan perintahperintah yang diberikan sepenuhnya dijalankan di server namun disertakan pada halaman web biasa. Tujuan dari bahasa pemrograman PHP adalah untuk membuat aplikasi-aplikasi yang dijalankan di atas teknologi web, dalam hal ini seluruh proses dijalankan seluruhnya pada server yang kemudian hasil proses tersebut dikirimkan dan ditampilkan pada web browser. Kelebihan PHP adalah mempermudah aplikasi web melakukan koneksi dengan database.

1.23.. MySQL Database Server MySOL merupakan sebuah server database yang banyak digunakan karena kehandalannya dan juga bersifat shareware. Bahasa yang digunakan dalam MySQL sama dengan bahasa yang dipakai oleh server database lainnya yaitu bahasa SQL. SQL (Structured Query Language) adalah bahasa standar yang digunkan untuk mengkases server database. Dalam konteks bahasa SQL, pada umumnya informasi tersimpan dalam tabel-tabel yang secara logik merupakn struktur 2 dimensi yang terdiri atas baris-baris data (row atau record) yang berada pada satu atau lebih kolom (column). Baris pada tabel sering disebut sebagai field. Keseluruhan tabel tersebut dihimpun dalam satu kesatuan yang disebut database. Keunggulan dari MySQL adalah : Speed : MySQL bekerja dengan cepat Easy to use : merupakan system database yang sederhana dengan performa tinggi dan sangat mudah di-setup dan sanagt mudah dalam pengaturan Cost : MySQL disediakan gratis Query language support : MySQL memahami SQL, bahasa yang umum digunkanan pada hamper semua system database modern. Capability : banyak client yang dapat membuka koneksi ke server pada saat yang bersamaan. Connectivity and security : MySQL memiliki kontrol akses sehingga siapa saja tidak diperbolehkan melihat data tidak bias melihat data. Portability : MySQL dapat berjalan di banyak varian dari UNIX dan sistem lainnya seperti Windows dan OS/2. Open distribution : source MySQL mudah didapat.

Perlengkapan yang tersedia dalam MySQL : Pada semua distribusi MySQL sudah terdapat beberapa perlengkapan antara lain : SQL Server, program utama (engine) dari MySQL yang Client Library, library yang disediakan untuk menyediakan akses dengan database. mempermudah pemrograman, terutama dalam bahasa C. Client Program, program interaktif klien yang digunakan untuk melakukan berbagai perintah pada database MySQL, antara lain : Program untuk melakukan queries secara langsung Program untuk mengatur akses dengan database pada database dan menampilkannya secara langsung. (export dan import database). 1.24.. HTML Program dalam bentuk HTML hanya sebagai halaman pertama saja yang diberi nama index.html. Listing program index.html:
<HTML> <HEAD> <TITLE>Web Based, Input/Output Control</TITLE> </HEAD> <BODY BGCOLOR=#9AC8AA> <TABLE border=0 cellPadding=0 cellSpacing=0 height=20 style="MARGIN-TOP: -2px" width=779> <TBODY><TR><TD height=16 width=138> <P align=center><IMG alt="ukplogo.gif" height=80 src="c:\apache\cgi-bin\ukplogo.gif" width=89></P></TD> <TD bgColor=#9AC8AA height=16 width=629><BIG><FONT face="Bookman Old Style">

<MARQUEE

behavior=alternate Comic Sans MS;

height=43 FONT-SIZE:

style="FONT-FAMILY:

20pt; FONT-STYLE: oblique" width=621 border="0"> WEB BASED, I/O CONTROL</MARQUEE> </FONT></BIG> </TD></TR></TBODY> </TABLE> <BR><BR> <FORM Username : <BR><INPUT TYPE=TEXT NAME=User> <BR>Masukkan Password : <BR><INPUT TYPE=PASSWORD NAME=Pass> <INPUT TYPE=SUBMIT NAME=Enter VALUE=Enter> </FORM> </BODY></HTML> METHOD=POST ACTION="http://localhost/data_masuk.php">

1.25.. Pemrograman dengan Borland Delphi Program bernama FormOuput.exe berfungsi untuk memasukkan input pengendalian yang didapat dari form HTML. Dari form HTML, akan didapatkan perintah led mana yang diinstruksikan untuk menyala. File FormOutput.exe ini yang akan mengeksekusi dan menyalakan led sesuai dengan data yang ada sebelumnya. Berikut ini adalah flowchart dari program FormOutput.exe :

START

Tampilkan Halaman HTML

Tombol View ditekan

Tidak Ya

Baca led yang akan diaktifkan

Data =0 Tidak

Ya

Kirim data 0h ke parallel port

Data =A Tidak

Ya

Kirim data 0FE ke parallel port

Data= B Tidak

Ya

Kirim data 0FDh ke parallel port

Data= C Tidak

Ya

Kirim data 0FBh ke parallel port

Data= D Tidak

Ya

Kirim data 0F7h ke parallel port

Data=E

Ya

Kirim data 0EFh ke parallel port

Tidak

Data=F

Ya

Kirim data 0DFh ke parallel port

Tidak

Data=G

Ya

Kirim data 0BFh ke parallel port

Tidak

Data=H

Ya

Kirim data07F ke parallel port

Tidak

FormInp ut Ditekan ? Ya

Tidak

END

Gambar 6. Flowchart program FormOutput.exe

1.26.. Komponen CGIExpert Software untuk komunikasi Internet via CGI (Common Gateway Interface).

10

Diperlukan sebuah software yang dapat menangani pembuatan program CGI pada software Delphi 5.0. Karena itu digunakan komponen-komponen CGI Expert 6.5 yang mendukung VCL (Visual Component Library) Delphi 5.0. Proses instalasi CGI Expert 6.5 dilakukan dengan cara mengklik pada CGIExpert_6.50.EXE. Maka komponen-komponen dan file help secara otomatis terinstal pada Delphi.

Gambar 7. Icon Setup CGI Expert 6.50

CGIExpert adalah solusi yang dapat kita gunakan untuk membangun aplikasi CGI. Komponen ini sangat kompatibel dengan software Delphi dan C++ Builder. Aplikasi CGI yang dihasilkan berupa aplikasi yang berjalan pada lingkungan Windows, sehingga web server yang kita gunakan juga berjalan pada lingkungan Windows, seperti Apache. Komponen yang ada adalah sebagai berikut : TGeneralHttpEngine TGeneralHttpEngine merupakan komponen utama yang secara bersama menggabungkan interface interface-interface shell-CGI, win-CGI, CGI-bin, ISAPI dan NSAPI. Komponen ini merupakan basis untuk semua komunikasi dengan www server, jadi sebuah aplikasi CGI yang kita buat harus mengandung komponen ini. THttpMaster

11

THttpMaster komponen ini menyediakan prpperties yang dapat digunakan untuk tampilan dokumen HTML dari aplikasi CGI yang dibuat. Kita dapat secara langsung mengeset am[pilan dokumen dengan merubah property, seperti text color dan background yang tersedia. Komponen ini akan secara otomatis menghasilkan tag HTML, HEAD, TITLE dan BODY ke dalam aplikasi CGI yang dibuat. Jadi kita dapat mengisikan TITLE atau isi dari BODY dokumen HTML. THttpFileFilter THttpFileFilter dignakan sebagai basis untuk membuat Dynamic HTML. Dengan komponen ini kita bisa membuat sebuah aplikasi CGI dengan menggunakan sebuah file dalam format HTML yang telah kita buat sebelimnya menggunakan editor HTML favorit. THttpMemoFilter Sama seperti komponen ThttpFileFilter, komponen ini juga merupakan basis untuk membuat Dynamic HTML, yang mungkin akan dikirimkan ke client dari aplikasi yang telah dibuat. Bila ThttpFileFilter menggunakan sebuah file, di dalam komponen ini disediakan properties text yang dapat diisi dengan menggunakan format penulisan dokumen HTML. THttpInput THttpSelect THttpDbSelect Komponen ini mempermudah dalam penambahan pengisian field. Komponen ini mempermudah dalam menyeleksi daftar field. Komponen ini mempermudah dalam membangun daftar data terpilih secara dinamis dari isi database. THttpDbGrid Komponen ini akan secara otomatis menghasilkan HTMLTable dari Tdataset (Table atau Tquery) yang diisikan ke dalam

12

THttpDbGrid properties dataset, tanpa mengharuskan untuk menuliskan kode HTML sedikit pun. Komponen ini juga menyediakan properti yang dapat digunakan untuk mempercantik tampilan table.

THttpCookie

Komponen ini menyediakan alat yang akan memudahkan untuk mengatur Cookies. Alat ini digunakan oleh aplikasi CGI untuk menyimpan informasi pada sistem client, sehingga bila sewaktuwaktu diperlukan, kita dapat membukanya kembali. TSmtpSendMail Komponen ini digunakan untuk mengirimkan smtp mail dari aplikasi kita. Kita juga dapat menyertakan file (attachments) ketika mengirimkan sebuah e-mail. THttpTeeChart Komponen ini digunakan untuk menghasilkan Live Graphical charts di dalam sebuah dokumen HTML. THttpUrlRequest Komponen ini digunakan untuk untuk mendapatkan atau membuka sebuah dokumen dari Web. Contoh Aplikasi Berikut adalah cara pembuatan sebuah aplikasi CGI dengan menggunakan Borland Delphi. 1. 2. 3. 4. Pertama-tama kita buat sebuah tabel bernama Mhs . Kita buat sebuah project baru dengan nama siswa, lalu Kita beri nama ketiga komponen tersebut sebagai Kita isi Dataset Properties HttpDBGrid komponen dengan Kemudian ditentukan nama field dengan Nama. tempatkan tiga komponen ke dalam form1 (Gambar 2). GeneralHttpEngine1, HttpDBGrid1, Query1. nama Query1.

13

5. 6. 7. 8.

Kita isi Sql Properties Query komponen dengan:

Select Nama from mhs where Nama like :Nama

Kita isi tipe data parameter Nama sebagai string, pada Kita ubah Archive Properties Query komponen menjadi Selanjutnya kita isi OnFirstExecRequest Events

parameter properties Query komponen. True. GeneralHttpEngine komponen dengan:

Query1.Databasename:=ExtractFileDir(ExeOrDllPath ); (Digunakan untuk mengeset path database dalam direktori yang sama dengan aplikasi kita).

9. Isi OnExecRequest Events GeneralHttpEngine komponen dengan:

putline (html><body>); putline (<form method=post action=http://127.0.0.1/cgi-bin/siswa.exe>); putline (<center>); putline (Nama <input type=textName=nama>); putline (<input type=submit Name=search value=search>); putline (</center></form></body></html>); if FormVar(search,)=search then begin input:=%+FormVar(nama,)+%; query1.params[0].value:=input; parameter nama pada sql} query1.open; httpdbgrid1.put; {Untuk menampilkan tabel} query1.close; end; {mengisi

Jangan lupa menentukan variabel input dengan tipe string. 10. Kita siap untuk mengkompilasi file. 11. Tempatkan file siswa.exe (hasil kompilasi) dan mhs.db (table) dalam direktori /cgi-bin pada web server yang kita gunakan. Kemudian kita coba jalankan apikasi yang telah dibuat dengan menggunakan web browser.

14

2. Perancangan Untuk menjalankan pengendalian Input Output melalui parallel port komputer berbasis web maka akan diperlukan spesifikasi tertentu baik itu berada di client ataupun pada server.

Client

Server

Request
Web Browser

CGI Expert PHP Engine + MySQL (Database) Apache Web Server Windows

Windows

Respons e

Gambar 8. Arsitektur Client dan Server

2..1

Hardware

Setelah UTS hardware untuk mata kuliah project dengan judul Web Based I/O Control mulai dirangkai. Rangkaian yang dibuat adalah rangkaian dengan tujuh buat output berupa led dan satu buah output yang menggunakan relay sebagai saklar lampu AC 5 watt. Selain rangkaian output dirangkai pula empat buah rangkaian input. 2.1.1 Rangkaian Output Rangkaian output yang digunakan adalah delapan buah output. Tujuh buah adalah output berupa led yang berfungsi sebagai simulasi saja. Sedangkan satu buah output lainnya adalah output lampu AC. Rangkaian lampu ac maksudnya adalah paralel port yang dikendalikan melalui web akan mengendalikan sebuah relay. Pin 9 dari parallel port digunakan untuk mengendalikan relay ini. Diawali dengan sebuah optocoupler yang berfungsi sebagai saklar bagi transistor. Selanjutnya digunakan sebuah transistor yang berfungsi sebagai saklar. Transisitor inilah yang berfungsi sebagai saklar bagi relay. Saat led pada opto coupler

15

menyala maka arus dari sumber tegangan dc 12 volt akan mengalir menuju ground melalui relay sehingga mengaktifkan atau dapat menarik relay. Dalam hal ini fungsi relay adalah sebagai saklar tegangan AC 220 volt, sehingga pada saat relay aktif maka lampu akan menyala dan mati pada kondisi sebaliknya.

Gambar 9. Rangkaian Relay

Komponen yang digunakan : Opto Coupler Transistor 2N222 Resistor 470 ohm Resistor 4700 ohm Sumber dc 12 volt Relay 12 volt Parallel port Ground Sumber dc 5 volt 1 buah 1 buah 1 buah 1 buah 1 buah 1 buah Pin 9 Pin 25 1 buah

Berikut ini adalah data sheet dari transistor 2N2222

Transistor Vcb max Vce max Veb max Ic max Hfe bias NPN 2N222 60 v 30 v 5v 800 mA 50mA

16

Rangkaian ouput led adalah Rangkaian yang menggunakan led, resistor dan sebuah sumber dc 5 volt. Logikanya saat logic satu pada paralel port maka tidak ada perbedaan tegangan antara paralel port dan sumber dc sehingga tidak ada arus mengalir. Sedangkan pada saat logic nol pada paralel port maka arus akan mengalir dari sumber dc ke paralel port melewati led sehingga led akan menyala. Rangkaian simulasi led ini hanya untuk menunjukan cara untuk mengaktifkan dan mematikan led melalui paralel port yang dikendalikan melalui jaringan web. Pada prinsipnya dengan menggunakan rangkaian output relay maka dapat dikendalikan semua peralatan yang menggunakan tegangan ac ataupun dc dengan menggunakan relay sehingga paralel port dapat digunakan untuk mengendalikan delapan buah rangkaian relay.

Gambar 10. Rangkaian Output Led

2.1.2 Rangkaian input Rangkaian input hanya akan menggunakan saklar biasa dengan teganan +5 V dc dan R untuk mengatur besarnya arus. Pada parallel port arus input

17

adalah sebesar 10 mA sehingga dengan VCC 5 volt akan didapatkan perhitungan R =V/I = 5 V / 10 mA , sehingga didapatkan R sebesar 500, dan digunakan resistor 470. Pada saat switch tertutup maka arus akan langsung mengalir ke ground, dan ada juga arus dari parallel port berupa Iil karena parallel port input berlogic low sehingga ada arus input low sebesar -400 uA, atau dengan kata lain arus dari Vcc dan arus dari parallel port akan menuju ground. Sedangkan pada saat switch terbuka maka arus akan mengalir ke parallel port (sink) sebesar 20 uA karena parallel port berlogic high.

Gambar 11. Rangkaian input parallel port

2..2

Program PHP dan CGI

Dalam project periode UAS, penulis menggunakan database untuk menyimpan beberapa data pada komputer server. Dan sebagai server database digunakan MySQL. Sebelum menjalankan semua program hal yang pertama kali harus kita lakukan adalah membentuk sebuah database dan table-tabel, dan untuk melakukannya kita hanya satu kali mengeksekusi file create_tbl.php yang terdapat pada folder htdocs. Berikut skrip create_tbl.php :
<? $sambung=mysql_connect("localhost"); if ($sambung)

18

echo ("koneksi berhasil"); else echo ("koneksi gagal"); $buat=mysql_create_db("login"); if ($buat) echo ("<BR><BR>Database login berhasil dibuat"); else echo ("<BR><BR>Database login gagal dibuat"); $perintah1="CREATE TABLE data_login (nomor int(10) AUTO_INCREMENT PRIMARY KEY, username char(100), password varchar(255), tanggal date, jam time)"; $buat_tabel=mysql_db_query("login",$perintah1); if ($buat_tabel) echo ("<BR><BR>Tabel data_login berhasil dibuat"); else echo ("<BR><BR>Tabel data_login gagal dibuat");

?> Setelah skrip tersebut dijalankan maka akan terbentuk database dengan nama login yang terdiri dari tabel data_login (nomer, user , password, tanggal, jam). nomo r Username Password tanggal jam

Tabel 1 . Tabel data_login pada database login

Pada project software periode UAS, penulis mengadakan penambahan berupa input bernama username dan password tiap-tiap user yang nantinya harus diisikan pada form index.html sebelum masuk pada pengontrolan Input Output. Username Hendrawan Johan Password elektro1 elektro2

19

Dhanny Adry

elektro3 elektro4

Tabel 2. Tabel username dan password

Terdapat file HTML yang merupakan halaman awal situs Web Based I/O Control dengan nama index.html.

Gambar 12. Tampilan index.html

Listing program index.html :

<HTML> <HEAD> <TITLE>Web Based, Input/Output Control</TITLE> </HEAD> <BODY BGCOLOR=#9AC8AA> <TABLE border=0 cellPadding=0 cellSpacing=0 height=20 style="MARGIN-TOP: -2px" width=779> <TBODY><TR><TD height=16 width=138> <P <TD align=center><IMG bgColor=#9AC8AA alt="ukplogo.gif" height=16 height=80 src="c:\apache\cgi-bin\ukplogo.gif" width=89></P></TD> width=629><BIG><FONT style="FONTface="Bookman Old Style"> <MARQUEE behavior=alternate height=43 FAMILY: Comic Sans MS; FONT-SIZE: 20pt; FONT-STYLE: oblique" width=621 border="0"> WEB BASED, I/O CONTROL</MARQUEE> </FONT></BIG>

20

</TD></TR></TBODY> </TABLE> <BR><BR> <FORM METHOD=POST ACTION="cgi-bin/welcome.exe"> Username : <BR><INPUT TYPE=TEXT NAME=User> <BR>Masukkan Password : <BR><INPUT TYPE=PASSWORD NAME=Pass> <INPUT TYPE=SUBMIT NAME=Enter VALUE=Enter> </FORM> </BODY></HTML>

Setelah username dan password diisi dengan benar dan kemudian tombol enter ditekan maka tampilan grafis akan merujuk pada file data_masuk.php. Berikut skrip data_masuk.php :
<HTML> <HEAD><TITLE>Web Based, Input/Output Control</TITLE> </HEAD> <BODY BGCOLOR=#9AC8AA> <TABLE border=0 cellPadding=0 cellSpacing=0 height=20 style="MARGIN-TOP: -2px" width=779> <TBODY><TR><TD height=16 width=138> <P <TD align=center><IMG bgColor=#9AC8AA alt="ukplogo.gif" height=16 height=80 src="c:\apache\cgi-bin\ukplogo.gif" width=89></P></TD> width=629><BIG><FONT style="FONTface="Bookman Old Style"> <MARQUEE behavior=alternate height=43 FAMILY: Comic Sans MS; FONT-SIZE: 20pt; FONT-STYLE: oblique" width=621 border="0"> WEB BASED, I/O CONTROL</MARQUEE> </FONT></BIG></TD></TR></TBODY> </TABLE> <BR><BR> <? mysql_connect("localhost"); mysql_select_db("login"); $jam=date("H:i:s"); $tanggal=date("Y-m-d");

21

$perintah="INSERT

INTO

data_login VALUES

(username,password,tanggal,jam) ('$User','$Pass','$tanggal','$jam')"; $hasil=mysql_query($perintah); if ($hasil) { echo ("<BR><BR>Input login berhasil dibuat"); echo bin/welcome.exe? User=$User&Pass=$Pass&Enter=$Enter>next..</a>"); } else { echo ("<BR><BR>Input login gagal dibuat"); echo } ?> </BODY></HTML> ("<br><a ("<br><a

href=http://localhost/cgi-

href=http://localhost/cgi-

bin/welcome.exe>back..</a>");

Apabila koneksi pada database gagal maka akan muncul tampilan seperti pada gambar 12. Penekanan link back mengembalikan tampilan grafis pada welcome.exe.

Gambar 13. Tampilan data_masuk.php

Jika input data user dan password pada database berhasil maka akan muncul tampilan seperti pada Gambar 13.

22

Gambar 14. Tampilan data_masuk.php

Ada 2 macam link yaitu next dan lihat tabel pengakses website. Dengan penekanan link lihat tabel pengakses website maka akan muncul tampilan seperti pada gambar 14.

Gambar 15. Tampilan cari.php

Dalam halaman cari.php muncul tabel pengakses website dan juga terdapat fasilitas searching/pencarian.

23

Dengan penekanan link next maka tampilan menunjuk pada halaman welcome.exe dimana terdapat 2 pilihan yaitu Control Input dan Control Output. Pada saat Control Input ditekan maka halaman akan beralih pada file FormInput.exe yang berada pada folder cgi-bin.

Gambar 16. Tampilan welcome.exe

Berikut adalah listing program FormInput.exe :

unit FormInputD; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, HUtils, HttpEng, GenEng; type TDataModule1 = class(TDataModule) GeneralHttpEngine1: TGeneralHttpEngine; HttpMemoFilter1: THttpMemoFilter; procedure TObject); procedure HttpMemoFilter1HttpEntry(EntryName: String; var Handled: Boolean); private { Private declarations } GeneralHttpEngine1ExecRequest(Sender:

24

public { Public declarations } end; var DataModule1: TDataModule1; implementation {$R *.DFM} const AlamatBase DataPort StatusPort = $378; = AlamatBase + 0; {port 378} = AlamatBase + 1; {port 379}

ControlPort = AlamatBase + 2; {port 37A} function BacaPort(PortAddress:Word) : Byte; var InValue : Byte; begin asm mov in and mov end; BacaPort :=InValue; end; procedure ByteToWrite:Byte); begin asm mov mov out end; end; DX, PortAddress AL, ByteToWrite DX, AL TulisPort(PortAddress:Word; DX, PortAddress AL, DX AL,10111000b//masking InValue,AL

25

procedure TDataModule1.GeneralHttpEngine1ExecRequest(Sender: TObject); var Method : String; I : Integer; begin GeneralHttpEngine1.AutoTrimFormVar:=True; Method:=AnsiUppercase(FormVar('Method','post')); //POST method !!! //Header PutLine('<HTML><META bin/FormInput.exe">'); PutLine('<HEAD><TITLE> Control BGCOLOR=#9AC8AA>'); Putline('<H2>Form Input Paralel Port</H2><HR>'); //Method form PutLine('<FORM METHOD="POST" ACTION= "' + ScriptName+ '">'); //"POST" method !!! PutLine('</FORM>'); HttpMemoFilter1.Put; //Send form input fields PutLine('<BR><BR>'); PutLine('<A HREF=http://localhost/cgibin/FormOutput.exe>Lihat Form Output'); //PutLine('<INPUT NAME="Submit" TYPE=submit SIZE=20 VALUE="View">'); PutLine('</FORM>'); PutLine('</BODY></HTML>'); //Log(GeneralHttpEngine1.ServerVariables.Text); end; procedure TDataModule1.HttpMemoFilter1HttpEntry(EntryName: String; var Handled: Boolean); var Input</TITLE></HEAD><BODY HTTP-EQUIV="REFRESH" CONTENT="5;url=http://localhost/cgi-

26

S : String; Nilai : Byte; begin Nilai := 0; EntryName:=AnsiUpperCase(EntryName); if EntryName='INPUT2' then begin Put(IntToStr(BacaPort(StatusPort))); {Convert BacaPort dari type Byte ke type String} end else begin Handled:=False; // Default=True; end; end; end.

Gambar 17. Tampilan FormInput.exe

27

Kolom value menunjukan status dari rangkaian input. Apabila client memilih link form output maka halaman merujuk pada file FormOutput.exe yang juga disimpan dalam folder cgi-bin. Berikut ini listing program FormOutput.exe :
unit FormOutputD; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, HUtils, HttpEng, GenEng; type TDataModule1 = class(TDataModule) GeneralHttpEngine1: TGeneralHttpEngine; HttpMemoFilter1: THttpMemoFilter; procedure GeneralHttpEngine1ExecRequest(Sender: TObject); procedure private { Private declarations } public { Public declarations } end; var DataModule1: TDataModule1; implementation {$R *.DFM} const AlamatBase DataPort StatusPort = $378; = AlamatBase + 0; = AlamatBase + 1; HttpMemoFilter1HttpEntry(EntryName: String; var Handled: Boolean);

ControlPort = AlamatBase + 2;

28

procedure ByteToWrite:Byte); begin asm MOV MOV OUT end; end; procedure DX, PortAddress AL, ByteToWrite DX, AL

TulisPort(PortAddress:Word;

TDataModule1.GeneralHttpEngine1ExecRequest(Sender: TObject); var Method : String; I : Integer; begin GeneralHttpEngine1.AutoTrimFormVar:=True; Method:=AnsiUppercase(FormVar('Method','post'));//POST method !!! //Header PutLine('<HTML><HEAD><TITLE>Form OutPut</TITLE></HEAD><BODY BGCOLOR=#9AC8AA>'); Putline('<H2>Form Output Paralel Port</H2><HR>'); //Change method form PutLine('<FORM //Input form PutLine('<INPUT TYPE="HIDDEN" NAME="METHOD" VALUE="'+FormVar('Method','')+'">'); HttpMemoFilter1.Put; //Send form input fields PutLine('<INPUT NAME="Submit" TYPE=submit SIZE=20 VALUE="View/Reset">'); PutLine('<BR><BR>'); PutLine('<A HREF=http://localhost/cgibin/FormInput.exe>Lihat Form Input'); METHOD="POST" ACTION= "' + ScriptName+ '">'); //"POST" method

29

PutLine('</FORM>'); PutLine('</BODY></HTML>'); // end; procedure TDataModule1.HttpMemoFilter1HttpEntry(EntryName: String; var Handled: Boolean); var S : String; I : Integer; Nilai : Byte; begin Nilai:=0; EntryName:=AnsiUpperCase(EntryName); if EntryName='INPUT1' then begin S:=FormVar('INPUT1',''); if S='' then begin Nilai:=0; Put('no value'); end; if S='A' then Nilai := Nilai or $01; if S='B' then Nilai := Nilai or $02; if S='C' then Nilai := Nilai or $04; if S='D' then Nilai := Nilai or $08; if S='E' then Nilai := Nilai or $10; if S='F' then Nilai := Nilai or $20; if S='G' then Nilai := Nilai or $40; if S='H' then Nilai := Nilai or $80; TulisPort(DataPort, Nilai); Put(S); end else begin Handled:=False; // Default=True; end; end; Log(GeneralHttpEngine1.ServerVariables.Text);

30

end.

Pada bagian awal program dijelaskan prosedur tentang addressing parallel port dan metode untuk mengeluarkan data ke parallel port. Setelah itu dilakukan pengecekan data yang akan dikeluarkan. Setelah memasuki program utama maka akan langsung dijalankan led yang akan menyala seperti yang diinginkan user.

Gambar 18. Tampilan FormOutput.exe

3. Tabel Perencanaan dan Realisasi Kerja Project No. Materi 1. Revisi Laporan UTS 2. Inventarisasi hardware 3. 4. 5. Inventarisasi data software Penyelesaian hardware Penyelesaian software Evaluasi sementara Target 27/10/2002 28/10/2002 29/10/2002-12/11/2002 29/10/2002-19/11/2002 12/11/2002 Realisasi 19/11/2002 29/10/2002 03/12/2002 03/12/2002 19/11/2002

31

6. 7. 8.

Tes

alat

dan

sinkronisasi 19/11/2002 26/11/2002 3/12/2002

03/12/2002 03/12/2002 10/12/2002

hardware dan software Demo Penyusunan materi presentasi Evaluasi akhir Latihan presentasi

No. 1. 2. 3. 4. 5. 6. 7.

Materi Revisi Laporan UTS Inventarisasi hardware Inventarisasi data software Penyelesaian hardware Penyelesaian software Evaluasi sementara Tes alat dan sinkronisasi hardware dan software Demo Penyusunan materi presentasi Evaluasi akhir Latihan presentasi

22/10

29/10

05/11

12/11

19/11

26/11

03/12

10/12

18/12

Keterangan

**** **** **** **** ****

**** ***# ***# **** ****

****

****

***#

**** ****

**** ****

**** ****

**** ****

***# ***#

***#

8. 9.

***# ****

***#

10. 11.

***# ***#

Keterangan: **** : tahap pengerjaan ***# : tahap penyelesaian

4.

Kesimpulan

32

1. Penggunaan database dalam project web based i/o control memungkinkan user untuk menyimpan data-data yang penting. Salah satu contohnya adalah penggunaan database sebagai penyimpan data-data yang mengakses web based i/o control. 2. Dengan hardware yang ada yang dipadukan dengan software maka dapat mengendalikan system input output menggunakan jaringan web.

33