Web Based Motor Control -...

Laporan Akhir UAS Project (09 Desember 2002)

Web Based Motor Control

Disusun oleh :

Wira Sanjaya ( 23400050 ) Anthony Muliadi ( 23400069 )

Ari Gunawan ( 23400121 ) Stefanus Feno ( 23400165 )

Jurusan Teknik Elektro

Fakultas Teknologi Industri Universitas Kristen Petra

Surabaya 2002

1

A. Gambaran Umum Sistem 1. Web Enable Pengontrolan motor H - Bridge, menggunakan hubungan interkoneksi client - server melalui Web Browser. Untuk mengakses file HTML dan PHP kami menggunakan Internet Explorer 5.0 dan Server Apache, yang kemudian mengexecute file EXE untuk menjalankan motor H - Bridge yang terhubung pada parallel port (LPT1). 2. Output Port Untuk parallel port yang digunakan adalah LPT1 dengan address 378h. Untuk menggerakkan motor, data dioutputkan ke parallel port dengan nilai tertentu yang diinginkan dalam bentuk desimal. 3. Command Perintah yang digunakan untuk mengexecute file EXE melalui Web, kami menggunakan PHP 4.1.1 dan perintah untuk mengeluarkan data ke parallel port pada file EXE dibuat dengan bahasa pemograman Turbo C. Perintah - perintah tersebut akan dijelaskan secara terinci pada bagian Software.

4. Rangkaian

Pada proses awal, kami melakukan pengujian terhadap program dengan menghubungkan parallel port ke Hardware LED pada masing - masing pinnya (D0 - D7), yang kemudian untuk tahap selanjutnya direalisasikan dengan rangkaian motor H - Bridge yang akan dijelaskan pada bagian Hardware.

5. Operating System Server Apache yang digunakan dalam aplikasi ini adalah dalam Windows Operating System khususnya Windows 98.

B. Pengujian

Berikut ini akan ditampilkan tahap-tahap pengujian oleh Bapak Resmana selaku pembimbing mata kuliah project ini pada tanggal 13 Desember 2002.

Alamat yang dipakai pada saat pengujian adalah http://localhost/web-motor-control/, dengan tampilan pertama yang bisa dilihat adalah tampilan pada index.htm. Namun sebelumnya karena kami memakai data base MySQL maka perlu dilakukan perintah untuk create database terlebih

2

dahulu. Kami memakai perintah dbgerakan.php untuk menciptakan database gerakan dan dbtamu.php untuk menciptakan data base butku tamu.

Tampilan pada saat create data base buku tamu

Tampilan pada saat create data base gerakan

Selanjutnya dalam index.htm ini user dapat memilih beberapa fasilitas misalnya melihat report untuk melihat hasil kerja dan laporan setiap minggu, melihat notulens untuk mengetahui agenda

3

pertemuan setiap minggunya, mengisi buku tamu, melihat profile team atau yang paling utama adalah masuk ke control area, untuk mencoba project yang kami kerjakan.

Tampilan index.htm Pengujian langsung pada Control Area, tampilan yang ada adalah sebagai berikut:

Tampilan logout.htm

4

Sebelum memasuki control area yang sesungguhnya, user diharapkan mengisi password terlebih dahulu, password yang diminta adalah telematikaoke. Sesudah password dimasukkan dan benar maka tampilan yang ada adlah sebagai berikut :

Tampilan arah.htm Dalam page ini, ada 4 gerakan yang bisa ditekan melalui tombol control : maju; mundur; kanan; kiri. Pada saat tombol control ditekan maka secara otomatis, data pengaksesan berupa tanggal dan waktu pengaksesan secara otomatis akan masuk ke dalam data base MySQL. Database ini kami bagi menjadi 4 bagian: db kanan untuk gerakan kanan, db kiri untuk gerakan kiri, db maju untuk gerakan maju serta db mundur untuk gerakan mundur. Di page ini juga ada 2 option: yang pertama “Kategori Pencarian”, fasilitas ini dapat dipakai untuk mencari gerakan yang ada berdasarkan tanggal. Selain itu kami juga memberikan fasilitas untuk melihat database gerkan yaitu melalui “Lihat Data Base Gerakan”.

1. Kategori Pencarian Untuk melakukan pencarian, cukup masukkan arah yang dikehendaki dan masukkan tanggal maka akan ada keterangan yang menunjukkan waktu pengaksesan berdasarkan tanggal yang diminta.

5

Cara melakukan Pencarian

Pada saat tidak ada gerakan yang diminta maka secara otomatis page akan menunjukkan hasil sebagai berikut:

Hasil Pencarian ketika tidak ada gerakan yang dimaksud

6

Jika gerakan yang dimaksud ada maka sebagai contoh tampilan yang ada adalah sebagai berikut:

Hasil Pencarian

2. Melihat Database Gerakan Untuk melihat database gerakan, cara yang dilakukan hampir sama dengan cara yang

digunakan pada fasilitas pencarian. User Cuma diminta untuk memilih option gerakan yang diinginkan.

Cara melihat Data Base gerakan

7

Pada saat tidak ada gerakan yang diminta maka secara otomatis page akan menunjukkan hasil sebagai berikut:

Tampilan Data Base pada saat tidak ada gerakan yang dimaksud

Tampilan Database kiri pada saat ada gerakan Ketika pengujian untuk control area selesai maka pengujian selanjutnya dilakukan pada buku tamu. Tampilan buku tamu yang ada adalah sebagai berikut

8

Tampilan bukutamu.php Jika input data berhasil maka akan keluar tampilan seperti berikut :

Tampilan buku tamu pada saat input berhasil

9

Tampilan untuk melihat buku tamu

10

C. Jadwal dan target yang sudah dicapai

Kegiatan Ags September Oktober Nopember Desember

4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 Study literatur dan cari data x x x x x T T x x x x x T T Hardware mobil dan H-Bridge x x x x x T T x T T Web I ( control, belum menggunakan database) x x x T T T T Web II ( menyelesaikan dengan dataflat / versi 1 ) T T x x x T T Web III ( menyelesaikan dengan database MySql / versi 2)

T T x x x x T T

Program executable I ( mencoba dengan LED) x T T T T Program executable II ( untuk kiri,kanan,maju,mundur )

T T x x T T

Melakukan pengujian project secara lengkap T T x T T Melakukan demo dihadapan Pak Resmana T T x T T Persiapan Presentasi UTS x T T T T Laporan UTS x T T T T Persiapan Presentasi UAS T T x T T Laporan UAS T T x T T

11

D. Detail Sistem 1. Hardware Rangkaian H-Bridge Karakteristik transistor yang digunakan BD 140 Ic maks 405 mA - 2 A hfe 25 - 50 Vsaturasi pada transistor = 0.2 Volt V motor = 3 Volt Vcc = 5 Volt I motor = 200 mA (tanpa beban) Vcc = 5 Volt maka diperoleh harga Rk. Ic = (hfe x Ib)+ Iceo (Iceo dapat diabaikan) maka diperoleh harga Ib, R1 dan R2.

Rangkaian H-Bridge didisain aktif pada kondisi Low (transistor bersifat saturasi), sehingga jika input pada switching berharga 1 maka motor tidak akan jalan. Bila terjadi input yang kembar pada switching, maka output yang terhubung pada switching akan selalu berharga 1 (motor tidak akan jalan, transistor bersifat cut off)

Rangkaian H-Bridge untuk 1 arah putaran

12

Rangkaian H-bridge secara lengkap 2. Software Menggunakan Internet Explorer 5.0 Server Apache Menggunakan PHP 4.1.1 Menggunakan database MySQL 3.23.47 File Exe dibuat menggunakan Turbo C++ Sesudah UTS ini, kami lebih memfokuskan diri pada software web yang ada karena sebetulnya hardware motor H-Bridge sendiri sudah jadi pada saat UTS hanya pada waktu itu putaran yang dihasilkan motor sangatlah kecil sehingga ketika diletakkan ditanah, motor tidak bisa berjalan. Setelah kami coba analisa lagi ternyata kerusakannya ada pada dinamo yang digunakan. Sesudah lami ganti dinamo yang rusak itu maka motor dapat berjalan.

Jika pada saat UTS kami sudah membuat beberapa tampilan web seperti tampilan pada

halaman control.htm yang kami gunakan untuk memberikan command maka untuk periode sesudah UTS ini kami mencoba menambahkan beberapa aplikasi.

1. Pembuatan Web dengan Data Flat

a. Buku Tamu

Aplikasi pertama yang kami tampilkan adalah menambahkan buku tamu serta counter yang dapat diisi oleh pengunjung website. Tampilan untuk buku tamu ii dapat diliat dalam entrydata.php. Skrip yang kami gunakan adalah

Skrip entrydata.php

<html> <head> <title>entrydata</title> </head> <body bgcolor="#0099FF"> <p align="center"><font face="OCR A Extended"><b><font size="7" color="#FFFFFF">E<font

13

color="#000000">NTRY DAT</font>A </font></b></font></p> <p align="center"> <?php $nama_berkas = "penghitung.dat"; if (file_exists($nama_berkas)) { $berkas = fopen($nama_berkas, "r"); $pencacah = (integer) trim(fgets($berkas, 255)); $pencacah++; fclose($berkas); } else $pencacah = 1;

// Simpan penghitung $berkas = fopen($nama_berkas, "w"); fputs($berkas, $pencacah); fclose($berkas);

// Tulis ke halaman web print("<b>You Are The-$pencacah th Visitor of This Website</b><BR>\n"); ?> </p> <form action=simpan.php method=get> <div align="center"> <p><font face="Geneva, Arial, Helvetica, san-serif"><b><font color="#FFFF00">PLEASE ENTER YOUR DATA BEFORE YOU GO FURTHER</font></b></font></p> <p><font color="#FFFF00"><b><font face="Geneva, Arial, Helvetica, san-serif">(LEFT NOTHING EMPTY!)</font></b></font></p> <p><font face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#FFFFFF" size="5">N</font><font color="#000000" size="4">ame</font></b></font><font color="#FFFF00"> : </font> <input type=text name=nama> </p> </div> <p align="center"> <font color="#FFFF00" size="4"><b><font color="#FFFFFF" size="5">S</font><font color="#000000">ex : <br> <input type=radio value="Man" checked name=sex> Man <input type=radio value="Woman" name=sex> Woman</font></b></font> <p align="center"> <font size="5" face="Geneva, Arial, Helvetica, san-serif"><b><font color="#FFFFFF">E-<font color="#000000">Mai</font>l</font></b> </font>: <input type=text name=email> <p align="center"> <font size="5" color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" color="#000033">C</font><font face="Verdana, Arial, Helvetica, sans-serif" size="4">ommen</font><font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#000000">t</font></b></font><font size="4" color="#FFFFFF"><b> </b></font><font size="4" color="#000000"><b>:</b></font><font color="#000000"><b> </b> </font> <textarea rows=4 cols=40 name=comment></textarea> <p align="center"> <input type=submit value="SAVE"> </form> </body> </html>

14

Tampilan dari entrydata.php

Simpan.php Form dari entry data diproses disimpan.php, kemudian simpan.php akan diberikan 3 pilihan pada user. User dapat menuju halaman kontrol, melihat data buku tamu atau memilih untuk kembali ke tampilan pertama (index.htm).

Skrip simpan.php

<html> <head> <title>area of save</title> </head> <body bgcolor="#0099FF"></body> <p> </p> <div align="center"> <p> <?php if(empty($nama)or empty($email)or empty($comment)) { print("<b>Do Not Left The Form Empty!!!</b><br>\n"); exit; } ?> </p> <p><b><font size="7" face="OCR A Extended" color="#FFFFFF">E<font size="6" color="#663399">ntr</font><font size="6"><font size="7">Y</font></font> D<font size="6" color="#6600CC">at</font><font size="6"><font size="7">A</font></font> S<font size="6" color="#6600CC">uccede</font>D!</font></b></p> <p> <?php // Save $hold = fopen("entrydata.dat", "a"); fputs($hold, $nama . "\n"); fputs($hold, $sex . "\n"); fputs($hold, $email . "\n"); fputs($hold, $comment . "\n"); fputs($hold, "*-*\n"); fclose($hold); print("<b>Oke $nama, Your Datas Are Already Saved</b><br>\n"); print("<b>Now You Can Go Further</b> <br>\n"); ?> </p> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="4"><b><font face="Courier New, Courier, mono"><a href="datatable.php">See <font color="#660099">The</font> Data!</a></font></b></font></p> <p><font face="OCR A Extended"><font size="4"><b><font size="5"><a href="control.htm">G</a></font><a href="control.htm">o

15

<font color="#660066">To The Control</font> Are<font size="5">A!</font></a></b></font></font></p> <p><font size="4"><b><font size="5" face="OCR A Extended"><a href="index.htm">LOGOUT</a></font></b></font></p> </div> </body> </html>

tampilan dari simpan.php

Sesudah user memasukkan data kedalam guestbook, setiap user dapat melihat data tamu yang disajikan dalam bentuk tabel. skrip yang digunakan dalam hal ini adalah datatable.php

Skrip datatable.php <html> <title>datatable</title> <body bgcolor="#0066FF"> <p align="center"><font size="6" face="OCR A Extended"><b><font size="+7" color="#FFFFFF"><font size="+3"> <font size="+5">D</font>AT</font>A </font></b></font></p> <p align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="7" color="#660066">V</font><font face="Verdana, Arial, Helvetica, sans-serif" size="5">ISITORS <font color="#FFFFFF">ON</font> THIS SIT<font size="7" color="#660066">E</font></font></b></p> <hr> <p align="center"> <? echo "<center>"; echo "<table width = 100% border = 1>"; echo "<tr>"; echo "<td bgcolor=#0CCCFF width=5%>" . No . "</td>"; echo "<td bgcolor=#0CCCFF width=15%>" . Name . "</td>"; echo "<td bgcolor=#0CCCFF width=10%>" . Sex . "</td>"; echo "<td bgcolor=#0CCCFF width=30%>" . Email . "</td>"; echo "<td bgcolor=#0CCCFF width=40%>" . Comment . "</td>"; echo "</tr>"; echo "</table>";

$no_data = 1; $hold = fopen("entrydata.dat", "r"); while ( ! feof($hold) ) { $nama = fgets($hold, 255); if ($nama == FALSE) break; $sex = trim(fgets($hold, 255)); $email = trim(fgets($hold, 255)); $ket = ""; while ( ! feof($hold) ) {

16

$tmp = trim(fgets($hold, 255)); if ($tmp == "*-*") break;

$ket .= ($tmp."<BR>"); //"<BR>\n"); } echo "<center>"; echo "<table width = 100% border = 1>"; echo "<tr>"; echo "<td bgcolor=#ffffff width=5%>" . $no_data . "</td>"; echo "<td bgcolor=#ffffff width=15%>" . $nama . "</td>"; echo "<td bgcolor=#ffffff width=10%>" . $sex . "</td>"; echo "<td bgcolor=#ffffff width=30%>" . $email . "</td>"; echo "<td bgcolor=#ffffff width=40%>" . $ket . "</td>"; echo "</tr>"; echo "</table>"; echo "</center>";

$no_data++; } ?> </p> <hr> <p align="center"><font size="5"><b><font face="OCR A Extended"><a href="control.htm"><font color="#660066">Control areA</font></a></font></b></font></p> <p align="center"><font color="#00FF00"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#0066FF"><a href="index.htm"><font color="#330033">LOGOUT</font></a></font></b></font></p> </body> </html>

b. Tampilan Menu Awal

Sesudah kami selesai membuat skrip untuk buku tamu, kami menambahkan tampilan berupa semacam menu yang memungkinkan adanya pengaksesan ke beberapa bagian web. Skrip ini kami beri nama index.php melaui halaman web ini, pengunjung bisa melakukan akses ke beberapa bagian diantaranya masuk ke link buku tamu atau masuk ke link report, notulens untuk melihat proses yang telah kami lalui setiap minggunya atau sekedar masuk ke About Project yang berisi penjelasan mengenai mata kuliah proect sendiri dan About Team untuk melihat anggota tim yang ada.

Skrip menu.htm

<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

17

<script language="JavaScript">  </script> </head>

<body bgcolor="#FFFFFF" text="#000000" background="champaigne1024.jpg"> <div align="center"> <p><font face="OCR A Extended" size="6" color="#0033FF"><b><font color="#FFFFFF">WELCOME TO OUR WEBSITE!</font></b></font></p> <hr> <p> </p> </div> <table width="773" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="148" valign="top" rowspan="2"> <p align="center"> </p> <p align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="103" height="24"> <param name=movie value="button1.swf"> <param name=quality value=high> <param name="BGCOLOR" value="#0066FF"> <embed src="button1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="103" height="24" bgcolor="#0066FF" base=""> </embed> </object></p> <p align="center"> </p> <p align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="103" height="24"> <param name=movie value="button2.swf"> <param name=quality value=high> <param name="BGCOLOR" value="#0066FF"> <embed src="button2.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="103" height="24" bgcolor="#0066FF"> </embed> </object></p> <p> </p> <p align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="103" height="24"> <param name="BASE" value="."> <param name=movie value="button3.swf"> <param name=quality value=high> <param name="BGCOLOR" value="#0066FF"> <embed src="button3.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="103" height="24" bgcolor="#0066FF" base="."> </embed> </object></p> </td> <td width="478" valign="top" rowspan="2"> <div align="center"> <p><b><font face="OCR A Extended" size="4">This is the website where you can find the whole information about Web Based H-Bridge Motor Control</font></b></p> <p><img src="Maclaren%20F1%20logo.jpg" width="296" height="152"></p>

18

<p><font face="OCR A Extended" size="3" color="#FFFFFF">October 2002</font></p> </div> </td> <td width="147" valign="top" height="274"> <div align="center"> <p> </p> <p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="103" height="24"> <param name="BASE" value="."> <param name=movie value="button4.swf"> <param name=quality value=high> <param name="BGCOLOR" value="#0066FF"> <embed src="button4.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="103" height="24" bgcolor="#0066FF" base="."> </embed> </object></p> <p> </p> <p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="103" height="24"> <param name="BASE" value="."> <param name=movie value="button5.swf"> <param name=quality value=high> <param name="BGCOLOR" value="#0066FF"> <embed src="button5.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="103" height="24" bgcolor="#0066FF" base="."> </embed> </object></p> <p> </p> <p><b><font color="#FFFFFF"><a href="http://petra.aci.id">Go To Our Project Site!</a></font></b></p> <p> </p> </div> </td> </tr> <tr> <td height="1"></td> </tr> </table> </body> </html>

c. Command History Penambahan fasilitas “Command History” memungkinkan pengunjung website mengetahui command-comand apa saja yang sudah pernah diakses disertai dengan data tambahan berupa tanggal dan jam pengaksesan. Command History ini terbagi menjadi 4 bagian sesuai dengan

19

gerakan yang ada yaitu history tabel Maju untuk gerakan Maju, history tabel Mundur untuk gerakan mundur, history tabel kanan untuk gerakan Kanan & history tabel Kiri untuk gerakan kiri. Pengaksesan Command History ini dapat dilakukan melalui halaman control.htm disana sudah dierikan link untuk menuju ke masing-masing command.

Tampilan control.htm Sebagai contoh akan kami ditampilkan skrip dari gerakan maju. Dalam hal ini ada 2 skrip yang pertama skrip maju.php yang digunakan untuk mengexecute maju.exe dan skrip tabelmaju.php yang dipakai untuk menampilkan command history maju dalam bentuk tabel. 1. Command maju

maju.php <? exec("...\cgi-bin\maju.exe"); $majutime=date("D,d F Y g :i:s A"); $hold = fopen("maju.dat", "a"); fputs($hold, $majutime . "\n"); fclose($hold); header("Location: control.htm"); ?> tablemaju.php <html> <title>tablemaju</title> <body bgcolor="#0066FF"> <p align="center"><font size="6" face="OCR A Extended"><b><font size="+7" color="#FFFFFF"><font size="+3"> <font size="+5">Command History</font></font></font></b></font></p> <p align="center"><font size="6" face="OCR A Extended"><b><font size="+7" color="#FFFFFF">Forward</font></b></font></p> <hr> <p align="center"> <? echo "<center>"; echo "<table width = 60% border = 1>"; echo "<tr>"; echo "<td bgcolor=#0CCCFF width=15%>" . No . "</td>"; echo "<td bgcolor=#0CCCFF width=45%>" . Time . "</td>"; echo "</tr>"; echo "</table>";

$no_data = 1; $hold = fopen("maju.dat", "r");

20

while ( ! feof($hold) ) { $majutime = trim(fgets($hold, 255)); if ($majutime == FALSE) break; echo "<center>"; echo "<table width =60% border = 1>"; echo "<tr>"; echo "<td bgcolor=#ffffff width=15%>" . $no_data . "</td>"; echo "<td bgcolor=#ffffff width=45%>" .$majutime. "</td>"; echo "</tr>"; echo "</table>"; echo "</center>"; $no_data++; } ?> </p> <hr> <p align="center"><font size="5"><b><font face="OCR A Extended"><a href="control.htm"><font color="#660066">Control areA</font></a></font></b></font></p> <p align="center"><font color="#00FF00"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#0066FF"><a href="index.htm"><font color="#330033">LOGOUT</font></a></font></b></font></p> </body> </html>

Tampilan tabelmaju.php

2. Command kanan

kanan.php <? exec("...\cgi-bin\kanan.exe"); $kanantime=date("D,d F Y g :i:s A"); $hold = fopen("kanan.dat", "a"); fputs($hold, $kanantime . "\n"); fclose($hold); header("Location: control.htm"); ?> tablekanan.php <html> <title>tablekanan</title> <body bgcolor="#0066FF"> <p align="center"><font size="6" face="OCR A Extended"><b><font size="+7" color="#FFFFFF"><font size="+3"> <font size="+5"> Command History</font></font></font></b></font></p>

21

<p align="center"><b><font face="OCR A Extended" size="+5" color="#FFFFFF">Right</font></b></p> <p align="center"><b></b></p> <hr> <p align="center"> <? echo "<center>"; echo "<table width = 60% border = 1>"; echo "<tr>"; echo "<td bgcolor=#0CCCFF width=15%>" . No . "</td>"; echo "<td bgcolor=#0CCCFF width=45%>" . Time . "</td>"; echo "</tr>"; echo "</table>";

$no_data = 1; $hold = fopen("kanan.dat", "r"); while ( ! feof($hold) ) { $kanantime = trim(fgets($hold, 255)); if ($kanantime == FALSE) break; echo "<center>"; echo "<table width =60% border = 1>"; echo "<tr>"; echo "<td bgcolor=#ffffff width=15%>" . $no_data . "</td>"; echo "<td bgcolor=#ffffff width=45%>" .$kanantime. "</td>"; echo "</tr>"; echo "</table>"; echo "</center>"; $no_data++; } ?> </p> <hr> <p align="center"><font size="5"><b><font face="OCR A Extended"><a href="control.htm"><font color="#660066">Control areA</font></a></font></b></font></p> <p align="center"><font color="#00FF00"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#0066FF"><a href="index.htm"><font color="#330033">LOGOUT</font></a></font></b></font></p> </body> </html>

tampilan tabelkanan.php

3. Command mundur

mundur.php <? exec("...\cgi-bin\mundur.exe");

22

$mundurtime=date("D,d F Y g :i:s A"); $hold = fopen("mundur.dat", "a"); fputs($hold, $mundurtime . "\n"); fclose($hold); header("Location: control.htm"); ?>

tablemundur.php <html> <title>tablemundur</title> <body bgcolor="#0066FF"> <p align="center"><font size="6" face="OCR A Extended"><b><font size="+7" color="#FFFFFF"><font size="+3"> <font size="+5">Command History</font></font></font></b></font></p> <p align="center"><font size="6" face="OCR A Extended"><b><font size="+7" color="#FFFFFF">Back</font></b></font></p> <p align="center"><font size="6" face="OCR A Extended"><b><font size="+7" color="#FFFFFF"><font size="+3"> </font></font></b></font></p> <hr> <p align="center"> <? echo "<center>"; echo "<table width = 60% border = 1>"; echo "<tr>"; echo "<td bgcolor=#0CCCFF width=15%>" . No . "</td>"; echo "<td bgcolor=#0CCCFF width=45%>" . Time . "</td>"; echo "</tr>"; echo "</table>";

$no_data = 1; $hold = fopen("mundur.dat", "r"); while ( ! feof($hold) ) { $mundurtime = trim(fgets($hold, 255)); if ($mundurtime == FALSE) break; echo "<center>"; echo "<table width =60% border = 1>"; echo "<tr>"; echo "<td bgcolor=#ffffff width=15%>" . $no_data . "</td>"; echo "<td bgcolor=#ffffff width=45%>" .$mundurtime. "</td>"; echo "</tr>"; echo "</table>"; echo "</center>"; $no_data++; } ?> </p> <hr> <p align="center"><font size="5"><b><font face="OCR A Extended"><a href="control.htm"><font color="#660066">Control areA</font></a></font></b></font></p> <p align="center"><font color="#00FF00"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#0066FF"><a href="index.htm"><font color="#330033">LOGOUT</font></a></font></b></font></p> </body> </html>

23

Tampilan tabelmundur.php

4. Command Kiri

kiri.php <? exec("...\cgi-bin\kiri.exe"); $kiritime=date("D,d F Y g :i:s A"); $hold = fopen("kiri.dat", "a"); fputs($hold, $kiritime . "\n"); fclose($hold); header("Location: control.htm"); ?>

tablekiri.php <html> <title>tablekiri</title> <body bgcolor="#0066FF"> <p align="center"><font size="6" face="OCR A Extended"><b><font size="+7" color="#FFFFFF"><font size="+3"> <font size="+5">Command History</font></font></font></b></font></p> <p align="center"><font size="6" face="OCR A Extended"><b><font size="+7" color="#FFFFFF">Left</font></b></font></p> <p align="center"><b></b></p> <hr> <p align="center"> <? echo "<center>"; echo "<table width = 60% border = 1>"; echo "<tr>"; echo "<td bgcolor=#0CCCFF width=15%>" . No . "</td>"; echo "<td bgcolor=#0CCCFF width=45%>" . Time . "</td>"; echo "</tr>"; echo "</table>";

$no_data = 1; $hold = fopen("kiri.dat", "r"); while ( ! feof($hold) ) { $kiritime = trim(fgets($hold, 255)); if ($kiritime == FALSE) break; echo "<center>"; echo "<table width =60% border = 1>"; echo "<tr>"; echo "<td bgcolor=#ffffff width=15%>" . $no_data . "</td>"; echo "<td bgcolor=#ffffff width=45%>" .$kiritime. "</td>"; echo "</tr>";

24

echo "</table>"; echo "</center>"; $no_data++; } ?> </p> <hr> <p align="center"><font size="5"><b><font face="OCR A Extended"><a href="control.htm"><font color="#660066">Control areA</font></a></font></b></font></p> <p align="center"><font color="#00FF00"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#0066FF"><a href="index.htm"><font color="#330033">LOGOUT</font></a></font></b></font></p> </body> </html>

Tampilan tabelkiri.php

2. Pembuatan Web dengan Data Base MySQL

Dalam hal ini, kami mencoba mengadakan beberapa modifikasi dalam pengolahan data diantaranya buku tamu dan command history yang sebelumnya memakai data flat, kami ubah menjadi buku tamu dan command history yang menggunakan database MySQL.

Dalam pembuatan database My SQL bukutamu ini kami menggunakan program My SQL 3.23.47 yang kami jalankan pada localhost sebagai root@localhost.

a. Bukutamu dengan MySQL

Dalam hal ini kami membuat 3 skrip PHP. Yang pertama adalah skrip yang kami gunakan untuk koneksi ke My SQL dan juga create database.Skrip pertama ini kami beri nama "dbtamu.php". Username dan password yang kami buat sama yaitu ari karena itu dalam skrip ini kami isi juga dengan "ari". Jika memakai komputer lain maka password dan username juga harus disesuaikan dengan password dan user name dari database MySQL komputer yang bersangkutan.

Skrip dbtamu.php <? mysql_connect("localhost","ari","ari"); mysql_create_db("bukutamu"); $per="create table tamu( nama char(255), email char(255), komentar char(255))"; mysql_db_query("bukutamu",$per);

25

if ($per) { echo "database buku tamu created!"; } else { echo "X ERROR X"; } ?> <html> <body> <a href="bukutamu.php"> <br><br>mengisi buku tamu >> </a> </html> </body>

tampilan dbtamu.php

Ada 3 proses yang dilakukan dalam skrip dbtamu.php ini, yang pertama skrip akan menciptakan koneksi ke MySQL terlebih dahulu sesudah itu jika dalam database MySQL belum ada database yang akan dibuat ( dalam hal ini data base "bukutamu" ) maka database akan dibuat terlebih dahulu. Proses yang terakhir adalah menciptakan tabel-tabel yang ada dalam database bukutamu seperti nama, e-mail, komentar.

Skrip yang kedua adalah skrip input.php, skrip ini kami gunakan untuk memasukkan data kedalam database MySQL. Skrip ini berisi mengenai Nama, E-mail serta Comment.

Skrip bukutamu.php <HTML> <HEAD> <TITLE> Form </TITLE> </FORM> </BODY> <form method="post" action="input1.php"> <div align="center"> <p> nama : <input name="nama" type="text" size="20" maxlength="20"> </p> <p> email : <input name="email" type="text" size="20" maxlength="20"> </p> <p> komentar :

26

<textarea rows="4" cols="30" name="komentar"> </textarea> </p> <input type="submit" name="Submit" value=" i s i "> </p> <p> </p> </div> </form> </HTML>

Tampilan bukutamu.php

Sesudah mengisi buku tamu maka akan ada tampilan yang memberikan indikasi apakah pengisian berhasil atau tidak. Skrip yang dipakai untuk validasi hal ini adalah input.php Skrip input.php <? mysql_connect("localhost","ari","ari"); mysql_select_db("bukutamu"); $isi="insert into tamu(nama,email,komentar) values ('$nama','$email','$komentar')"; $hasil=mysql_query($isi); if ($hasil) { echo("<br>input berhasil"); } else { echo("<br>input gagal"); } ?> <html> <body> <div align="center"><a href="bukutamu.php"><<< isi lagi</a></div> <div align="center"><p><a href="http://localhost/phpmyadmin/"><<< melihat buku tamu</a></p> <div align="center"><p><a href="index.php"><<< logout</a></p> </div> </html> </body>

27

Tampilan input.php

b. Command History dengan database MySQL Untuk pembuatan databasenya kami menggunakan skrip php sama dengan pembuatan data base untuk bukutamu (dbtamu.php). skrip yang kami gunakan dalam hal ini adalah dbgerakan.php

Skrip dbgerakan.php

<? mysql_connect("localhost","ari","ari"); mysql_create_db("data"); $ma="create table maju (tahun char(10), bulan char(25), tanggal char(25), waktu char(50))"; $mu="create table mundur (tahun char(10), bulan char(25), tanggal char(25), waktu char(50))"; $ka="create table kanan (tahun char(10), bulan char(25), tanggal char(25), waktu char(50))"; $ki="create table kiri (tahun char(10), bulan char(25), tanggal char(25), waktu char(50))"; $suc=mysql_db_query("data",$ma); $suc=mysql_db_query("data",$mu); $suc=mysql_db_query("data",$ka); $suc=mysql_db_query("data",$ki); if ($ma) { echo "database maju created!"; } else {

28

echo "X ERROR X"; } if ($mu) { echo "<br>database mundur created!";} else { echo "X ERROR X"; } if ($ka) { echo "<br>database kanan created!"; } else { echo "X ERROR X"; } if ($ki) { echo "<br>database kiri created!"; } else { echo "X ERROR X"; } ?> <html> <body> <a href="arah.html"> <br><br> masukkan arah >> </a> </html> </body>

Tampilan dbgerakan.php

Skrip yang kedua adalah skrip arah.htm, skrip ini kami gunakan untuk memasukkan data kedalam database MySQL. Skrip ini berisi mengenai tombol-tombol untuk kontroller kanan,kiri,maju & mundur. Jadi bisa dijelaskan misalnya tombol kanan ditekan maka motor akan bergerak kekanan dan secara otomatis pula waktu pengaksesan yang meliputi tanggal-bulan-tahun dan jam pengaksesan akan tersimpan pula dalam database kanan MySQL. Hal yang sama juga akan terjadi pula pada penekanan tombol kiri, maju ataupun mundur.

29

Skrip arah.htm yang kami pakai <html> <head> <title>Control Area</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <style type="text/css">  </style> <table width="195" height="2" align="center"> <tr> <td height="2" width="62"> <div align="left"></div> </td> <td height="2" width="60"> <div align="left"> <form name="form1" method="post" action="maju.php"> <div align="center"> <input type="submit" name="Submit" value="/\"> </div> </form> </div> </td>

30

<td height="2" width="57"> <div align="left"></div> </td> </tr> <tr> <td height="2" width="62"> <div align="left"> <p> </p><form name="form3" method="post" action="kiri.php"> <div align="center"> <input type="submit" name="Submit3" value="<"> </div> </form> </div> </td> <td height="2" width="60"> <div align="left"></div> </td> <td height="2" width="57"> <div align="left"> <p> </p><form name="form2" method="post" action="kanan.php"> <div align="center"> <input type="submit" name="Submit2" value=">"> </div> </form> </div> </td> </tr> <tr> <td height="2" width="62"> <div align="left"></div> </td> <td height="2" width="60"> <div align="left"> <p> </p><form name="form4" method="post" action="mundur.php"> <div align="center"> <input type="submit" name="Submit4" value="V"> </div> </form> </div> </td> <td height="2" width="57"> <div align="left"></div> </td> </tr> </table> <form name="form6" method="post" action="search.php"> <table align="center"> <p align="center"> </p> <p align="center">Kategori Pencarian :</p> <div align="center"> <p> <tr> <td>arah : <select name="pilih"> <option value="">+ + choose one + + </option> <option value="kiri">kiri</option> <option value="kanan">kanan</option> <option value="maju">maju</option> <option value="mundur">mundur</option> </select> </td> <td> tanggal : <input type="text" name="cari_tgl" size="7"> <input type="submit" value=" c a r i ">

31

</div> </table> <table align="center" width="250"> <p align="center"> </p> <p align="center">Lihat Data Base Gerakan :</p> <div align="center"> <p> <tr> <td>arah : <select name="pilih"> <option value="">+ + choose one + + </option> <option value="kiri">kiri</option> <option value="kanan">kanan</option> <option value="maju">maju</option> <option value="mundur">mundur</option> </select> </td> <td> <input type="submit" value="L i h a t"> </div> </table> <div align="center"></div> </form> <p align="center"> </p> <p align="center"> </p> <div align="center"><br> <br> <br> <br> </div> <p align="center"> </p> </body> </html> Dalam hal ini ada 1 file include yaitu opendb.php Skrip opendb.php <? $conn=mysql_connect("localhost","ari","ari"); if($conn) { echo(" "); } else { echo(" x--!--x "); } mysql_select_db("data",$conn); $qry=mysql_query($strSQL,$conn); ?>

32

Tampilan Arah.html

Dalam halaman ini juga ada fasilitas untuk melihat database gerakan. Karena database yang kami gunakan adalah database MySql maka ada beberapa perubahan juga pada skrip-skrip yang kami gunakan untuk mengexecute file-file exe. Skrip ini berbeda dengan skrip yang sama yang kami gunakan dalam pembuatan dengan data flat.

kanan.php <? $tanggal=date("d"); $bulan=date("F"); $tahun=date("Y"); $waktu=date("H:i:s"); mysql_connect("localhost","ari","ari"); mysql_select_db("data"); $isi="insert into kanan(tanggal,bulan,tahun,waktu) values ('$tanggal','$bulan','$tahun','$waktu')"; $hasil=mysql_query($isi); ?> kiri.php <? $tanggal=date("d"); $bulan=date("F"); $tahun=date("Y"); $waktu=date("H:i:s"); mysql_connect("localhost","ari","ari"); mysql_select_db("data"); $isi="insert into kiri(tanggal,bulan,tahun,waktu) values ('$tanggal','$bulan','$tahun','$waktu')"; $hasil=mysql_query($isi); ?> maju.php <? $tanggal=date("d"); $bulan=date("F"); $tahun=date("Y"); $waktu=date("H:i:s"); mysql_connect("localhost","ari","ari"); mysql_select_db("data"); $isi="insert into maju(tanggal,bulan,tahun,waktu) values ('$tanggal','$bulan','$tahun','$waktu')"; $hasil=mysql_query($isi);

33

?> mundur.php <? $tanggal=date("d"); $bulan=date("F"); $tahun=date("Y"); $waktu=date("H:i:s"); mysql_connect("localhost","ari","ari"); mysql_select_db("data"); $isi="insert into mundur(tanggal,bulan,tahun,waktu) values ('$tanggal','$bulan','$tahun','$waktu')"; $hasil=mysql_query($isi); ?> Fasilitas Search Fasilitas search ini, bisa mencari gerakan yang diakses berdasarkan tanggal yang diinputkan, misal dimasukkan tanggal 29 maka akan ada report kira-kira apakah ada gerakan yang diakses pada tanggal tersebut. Skrip yang kami pakai kami beri nama search.php, adapun list skripnya adalah berikut : Search.php <?php if ($pilih=="kanan") { $strSQL="select*from kanan where tanggal like'%".$cari_tgl."%'"; include "opendb.php"; $jml=mySQL_num_rows($qry); if($jml<=0) { echo("tidak ada gerakan ke kanan pada tanggal $cari_tgl"); } else { echo ("ada $jml gerakan ke kanan pada tanggal $cari_tgl");

echo("<TABLE BORDER=0 align=center>"); echo("<TR>"); echo("<TH BGCOLOR=#abc29d>Waktu </TH>");

echo("</TR>");

for($x=0;$x<$jml;$x++) { $row=mySQL_fetch_row($qry); echo("<BR>"); echo("<TR><TD bgcolor=#abcdef>"); echo $row[2];echo(" "); echo $row[1];echo(" "); echo $row[0];echo(" "); echo(" waktu pengaksesan :"); echo $row[3];echo(" "); echo("</tr>"); } } echo("</td>"); }

if ($pilih=="kiri") { $strSQL="select*from kiri where tanggal like'%".$cari_tgl."%'"; include "opendb.php"; $jml=mySQL_num_rows($qry);

34

if($jml<=0) { echo("tidak ada gerakan ke kiri pada tanggal $cari_tgl"); } else { echo ("ada $jml gerakan ke kiri pada tanggal $cari_tgl");


echo("</TR>");


if ($pilih=="maju") { $strSQL="select*from maju where tanggal like'%".$cari_tgl."%'"; include "opendb.php"; $jml=mySQL_num_rows($qry); if($jml<=0) { echo("tidak ada gerakan maju pada tanggal $cari_tgl"); } else { echo ("ada $jml gerakan maju pada tanggal $cari_tgl");


echo("</TR>");


35

if ($pilih=="mundur") { $strSQL="select*from mundur where tanggal like'%".$cari_tgl."%'"; include "opendb.php"; $jml=mySQL_num_rows($qry); if($jml<=0) { echo("tidak ada gerakan mundur pada tanggal $cari_tgl"); } else { echo ("ada $jml gerakan mundur pada tanggal $cari_tgl");


echo("</TR>");

for($x=0;$x<$jml;$x++) { $row=mySQL_fetch_row($qry); echo("<BR>"); echo("<TR><TD bgcolor=#abcdef>"); echo $row[2];echo(" "); echo $row[1];echo(" "); echo $row[0];echo(" "); echo(" waktu pengaksesan :"); echo $row[3];echo(" "); echo("</tr>"); } } echo("</td>"); } ?>

Tampilan halaman pencarian

36

Tampilan hasil pencarian Fasilitas Melihat Isi Data Base Fasilitas ini, digunakan untuk melihat data base gerakan yang ada berdasarkan arah yang diinputkan, misal dimasukkan arah kanan maka akan ada report informasi gerakan kana beserta waktu pengaksesan yang dilakukan. Skrip yang dipakai kami beri nama searchdatabase.php, adapun list skripnya adalah berikut : Skrip searchdatabase.php <?php if ($pilih=="kanan") { $strSQL="select*from kanan where tanggal like'%".$cari_tgl."%'"; include "opendb.php"; $jml=mySQL_num_rows($qry); if($jml<=0) { echo("tidak ada gerakan ke kanan pada Data Base"); } else { echo ("ada $jml gerakan ke kanan pada Data Base"); echo("<TABLE BORDER=0 align=center>"); echo("<TR>"); echo("<TH BGCOLOR=#abc29d>Waktu </TH>"); echo("</TR>"); for($x=0;$x<$jml;$x++) { $row=mySQL_fetch_row($qry); echo("<BR>"); echo("<TR><TD bgcolor=#abcdef>"); echo $row[2];echo(" "); echo $row[1];echo(" ");

37

echo $row[0];echo(" "); echo(" waktu pengaksesan :"); echo $row[3];echo(" "); echo("</tr>"); } } echo("</td>"); } if ($pilih=="kiri") { $strSQL="select*from kiri where tanggal like'%".$cari_tgl."%'"; include "opendb.php"; $jml=mySQL_num_rows($qry); if($jml<=0) { echo("tidak ada gerakan ke kiri pada Data Base"); } else { echo ("ada $jml gerakan ke kiri pada Data Base"); echo("<TABLE BORDER=0 align=center>"); echo("<TR>"); echo("<TH BGCOLOR=#abc29d>Waktu </TH>"); echo("</TR>"); for($x=0;$x<$jml;$x++) { $row=mySQL_fetch_row($qry); echo("<BR>"); echo("<TR><TD bgcolor=#abcdef>"); echo $row[2];echo(" "); echo $row[1];echo(" "); echo $row[0];echo(" "); echo(" waktu pengaksesan :"); echo $row[3];echo(" "); echo("</tr>"); } } echo("</td>"); } if ($pilih=="maju") { $strSQL="select*from maju where tanggal like'%".$cari_tgl."%'"; include "opendb.php"; $jml=mySQL_num_rows($qry); if($jml<=0) { echo("tidak ada gerakan maju pada Data Base"); } else { echo ("ada $jml gerakan maju pada Data Base"); echo("<TABLE BORDER=0 align=center>"); echo("<TR>"); echo("<TH BGCOLOR=#abc29d>Waktu </TH>"); echo("</TR>"); for($x=0;$x<$jml;$x++) { $row=mySQL_fetch_row($qry);

38

echo("<BR>"); echo("<TR><TD bgcolor=#abcdef>"); echo $row[2];echo(" "); echo $row[1];echo(" "); echo $row[0];echo(" "); echo(" waktu pengaksesan :"); echo $row[3];echo(" "); echo("</tr>"); } } echo("</td>"); } if ($pilih=="mundur") { $strSQL="select*from mundur where tanggal like'%".$cari_tgl."%'"; include "opendb.php"; $jml=mySQL_num_rows($qry); if($jml<=0) { echo("tidak ada gerakan mundur pada Data Base"); } else { echo ("ada $jml gerakan mundur pada Data Base"); echo("<TABLE BORDER=0 align=center>"); echo("<TR>"); echo("<TH BGCOLOR=#abc29d>Waktu </TH>"); echo("</TR>"); for($x=0;$x<$jml;$x++) { $row=mySQL_fetch_row($qry); echo("<BR>"); echo("<TR><TD bgcolor=#abcdef>"); echo $row[2];echo(" "); echo $row[1];echo(" "); echo $row[0];echo(" "); echo(" waktu pengaksesan :"); echo $row[3];echo(" "); echo("</tr>"); } } echo("</td>"); } ?>

39

Untuk fasilitas melihat database, tampilannya adalah sebagai berikut :

Tampilan arah.htm

Seperti bisa dilihat digambar, terdapat 2 fasilitas yaitu Kategori Pencarian yang merupakan fasilitas searching dan Lihat Data Base Gerakan untuk melihat data base secara utuh. K|ami berikan contoh untuk gerakan kanan

Tampilan data base kanan

40

3. Modifikasi File Exe Ada beberapa perubahan pada file exe yang kami lakukan sebelum kami melakukan demo tanggal 13 Desember 2002. Skrip kanan.exe #include<stdio.h> #include<dos.h> void main() { outport(0x378,251); delay(50000); delay(50000); delay(50000); outport(0x378,255); delay(5000); } Skrip kiri.exe #include<dos.h> void main() { outport(0x378,254); delay(50000); delay(50000); delay(50000); outport(0x378,255); delay(5000); } Skrip maju.exe #include<dos.h> void main() { outport(0x378,250); delay(50000); delay(50000); delay(50000); outport(0x378,255); delay(5000); } Skrip mundur.exe #include<dos.h> void main() { outport(0x378,245); delay(50000); delay(50000); delay(50000); outport(0x378,255); delay(5000); }

41

E. Diagram Blok Software CLIENT SERVER SIDE SIDE

CL I EN T

HTML APACHE WEB SERVER

Kanan.PHP

Kiri.PHP

Maju.PHP

Mundur.PHP Mundur.exe

Maju.exe

Kiri.exe

Kanan.exe Table kanan

Table Kiri

Table Maju

Table Mundur

Web Based Motor Control -...

Documents

Transcript of Web Based Motor Control -...