Pengamatan Suhu Ruangan Menggunakan Mikrokontroler Arduino Pro Mini 328 Berbasis Web

7/22/2019 Pengamatan Suhu Ruangan Menggunakan Mikrokontroler Arduino Pro Mini 328 Berbasis Web

1/42

LAPORAN PROJEK AKHIR

Pengamatan Suhu Ruangan Menggunakan Mikrokontroler

Arduino Pro Mini 328 Berbasis Web

Kelas : TEK 3B P1

Nama : Dea Siska Utami Aziz

NIM : J3D111037

PROGRAM KEAHLIAN TEKNIK KOMPUTER

DIREKTORAT PROGRAM DIPLOMA

INSTITUT PERTANIAN BOGOR

BOGOR

2014


2/42

i

Kata Pengantar

Puji syukur penyusun panjatkan ke hadirat Tuhan Yang Maha Esa, karenadengan pertolonganNya penyusun dapat menyelesaikan laporan ini. Dalam laporan

ini saya juga mengucapkan terimakasih kepada dosen yang telah membimbing saya

menulis laporan ini.nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

Dalam laporan ini saya membahas tentang Pengamatan Suhu Ruangan

Menggunakan Mikrokontroler Arduino Pro Mini 328 Berbasis Web. Laporan

ini akan menjelaskan hasil pengukuran yang telah dilakukan, akan tampiljan ke dalam

sebuah web dan dapat diakses dalam sebuah LAN.

Penyusun juga mengucapkan terima kasih kepada berbagai sumberyang telah

membantu tentang bagaimana menyelasaikanlaporan ini.Semoga laporan ini dapat

memberikan wawasan yang lebih luas kepada pembaca dan dapat memenuhi tugas

yang telah diberikan.

Penyusun

Dea Siska Utami Aziz

J3D111037


3/42

ii

Daftar Isi

Kata Pengantar ........................................................................................................................... i

Daftar Isi .................................................................................................................................... ii

Daftar Gambar .......................................................................................................................... iv

Daftar Tabel .............................................................................................................................. iv

BAB I PENDAHULUAN ............................................................................................................... 1

1.1. Latar Belakang ........................................................................................................... 1

1.2. Rumusan Masalah ..................................................................................................... 2

1.3. Tujuan ....................................................................................................................... 2

1.4. Batasan Masalah ....................................................................................................... 2

1.5. Manfaat ..................................................................................................................... 2

1.6. Sistematika Penulisan ............................................................................................... 3

BAB II TEORI PENUNJANG ......................................................................................................... 4

2.1. Mikrokontroler .......................................................................................................... 4

2.2. Arduino Pro ............................................................................................................... 5

2.3. Arduino Pro Mini 328 ................................................................................................ 6

2.4. USB TTL Adapter ....................................................................................................... 6

2.5. Website ..................................................................................................................... 7

2.6. Visual Basic 6.0 .......................................................................................................... 8

2.6.1. Membuat Sebuah Project ................................................................................. 9

2.6.2. Menu Bar ......................................................................................................... 10

2.6.3. Toolbar ............................................................................................................ 11

2.6.4. Toolbox............................................................................................................ 11

2.6.5. Form Objek ...................................................................................................... 12

2.6.6. Form Kode ....................................................................................................... 13

2.7. Adobe Dreamweaver .............................................................................................. 14

2.8. Xampp ..................................................................................................................... 15

2.9. phpMyAdmin .......................................................................................................... 15

2.10. Pengenalan HTML ............................................................................................... 16

2.10.1. Pendahuluan HTML ......................................................................................... 16


4/42

iii

2.10.2. Bagian-bagian HTML ....................................................................................... 16

2.11. Pengenalan PHP .................................................................................................. 18

2.11.1. Penggabungan Script PHP dan HTML............................................................. 18

BAB III TATA KERJA .................................................................................................................. 20

3.1. Perancangan USB TTL dan Arduino Mini Pro .......................................................... 20

3.2. Perancangan Visual Basic 6.0 .................................................................................. 20

3.2.1. Memulai Visual Basic 6.0 ................................................................................ 21

3.2.2. Perancangan Tampilan Visual Basic 6.0 .......................................................... 22

3.3. Perancangan Web ................................................................................................... 23

3.3.1. Memulai Dreamweaver CS3............................................................................ 23

3.3.2. Perancangan Halaman Awal ........................................................................... 24

3.3.3. Perancangan Halaman Informasi Suhu ........................................................... 24

BAB VI HASIL DAN PEMBAHASAN ........................................................................................... 25

4.1. Hasil Tampilan Web ................................................................................................ 25

4.1.1. Halaman Utama .............................................................................................. 25

4.1.2. Halaman Informasi Suhu ................................................................................. 25

4.2. Pembahasan Hubungan Arduino Mini Pro 328 dengan USB TTL Adapter .............. 26

4.3. Pembahasan Tamplian Web ................................................................................... 26

4.3.1. Halaman Utama .............................................................................................. 26

4.3.2. Halaman Informasi Suhu ................................................................................. 28

BAB V KESIMPULAN ................................................................................................................ 30

Daftar Pustaka ......................................................................................................................... 30

Lampiran ................................................................................................................................. 30

Visual Basic 6.0 Code: ......................................................................................................... 30

PHP temperature Code: ...................................................................................................... 32


5/42

iv

Daftar Gambar

Gambar 1 Arduino Pro Mini ...................................................................................................... 6

Gambar 2 USB TTL Adapter ....................................................................................................... 6

Gambar 3 Visual Basic 6.0 ......................................................................................................... 8

Gambar 4 Halaman Awal Visual Basic 6.0 ............................................................................... 10

Gambar 5 Form Visual Basic 6.0 ............................................................................................. 10

Gambar 6 Menu Bar Visual Basic 6.0 ...................................................................................... 11

Gambar 7 Toolbar Visual Basix 6.0 ......................................................................................... 11

Gambar 8 Toolbox Visual Studio 6.0 ....................................................................................... 12

Gambar 9 Form Objek Visual Basic 6.0 ................................................................................... 13

Gambar 10 Form Code Visual Basic ........................................................................................ 13

Gambar 11 Adobe Dreamweaver CS6 .................................................................................... 14

Gambar 12 XAMPP .................................................................................................................. 15

Gambar 13 Logika Keseluruhanan Pemantauan Suhu Berbasis Web .................................... 20

Gambar 14 Memulai Visual Basic 6.0...................................................................................... 21

Gambar 15 Kotak Dialog New Project ..................................................................................... 22

Gambar 16 Form Pengukuran Suhu ........................................................................................ 22

Gambar 17 Memulai Dreamweaver ....................................................................................... 23

Gambar 18 Kotak Dialog New File .......................................................................................... 23

Gambar 19 Halaman Utama Web ........................................................................................... 25

Gambar 20 Halaman Informasi Suhu ...................................................................................... 25

Daftar Tabel

Tabel 1 Perancangan Halaman Awal....................................................................................... 24

Tabel 2 Perancangan Halaman Informasi Suhu ...................................................................... 24

Tabel 3 Pembahasan Tampilan Web Halaman Utama............................................................ 27

Tabel 4 Pembahasan Tampilan Halaman Infrormasi Suhu ..................................................... 29


6/42

1

BAB I PENDAHULUAN

1.1. Latar BelakangKemajuan ilmu pengetahuan dan teknologi telah mendorong manusia

untuk berusaha mengatasi segala permasalahan yang timbul di sekitarnya serta

meringankan pekerjaan yang ada. Salah satunya teknologi komputer yang

tidak hanya berperan dalam satu bidang saja, melainkan disegala bidang

kehidupan manusia. Banyak hal yang mungkin saat ini untuk menyelesaikan

permasalahan manusia membutuhkan biaya, waktu, tenaga yang cukup besar

untuk penyelesaiannya. Dengan adanya kemajuan teknologi komputer,

permasalahan tersebut dapat ditekan seminimal mungkin. Keadaan tersebut

membuat banyak hal dapat dilakukan dengan lebih mudah dan efisien. Seiring

dengan hal tersebut kebutuhan akan informasi yang cepat dan akurat juga

semakin tinggi. Berbagai sistem informasi telah banyak berkembang antara

lain melalui saluran radio, televisi, telepon bahkan internet. Kebutuhan akan

informasi yang cepat dan akurat juga terjadi pada penelitian-penelitian ilmiah.

Informasi dapat berbentuk laporan, jurnal, berita dan dapat pula berbentuk

data pengukuran atau data pengamatan.

Pengukuran temperatur juga penting untuk manusia dalam dunia industri.

Itu dapat dilakukan tanpa harus berinteraksi langsung dengan sensor tersebut.

Pengamat cukup memonitor melului PC dengan tampilan web, itu dilakukan

melalui akses jaringan komputer dengan system Local Area Networks( LAN

).Local Area Networks( LAN ) adalah suatu jaringan komunikasi data yang

luas jangkauannya mmeliputi suatu area local tertentu. Misal jaringan

komunikasi data di suatu gedung .


7/42

2

1.2. Rumusan Masalah Bagaimana cara membuat alat untuk mengukur suhu ruangan

menggunakan mikrokontroler Arduino Pro Mini 328?

Bagaimana cara menampilkan hasil pengukuran suhu ruang di sebuahweb?

1.3. Tujuan Membuat sistem pemantauan dan pengukuran suhu menggunakan

Arduino Pro Mini 328.

Menampilkan hasil pengukuran suhu dengan tampilan data berupa webmenggunakan bahasa pemrograman php dengan hubungan antar komputer

menggunakan LAN. Untuk interfacing perangkat keras dengan perangkat

lunak mengunakan Visual Basic 6.0.

1.4. Batasan Masalah Mikrokontroler yang digunakan adalah Arduino Pro Mini 328. Interfacingperangkat keras dengan perangkat lunak menggunakan Visual

Basic 6.0.

Untuk tampilan web menggunakan bahasa pemrograman PHP denganMacromedia Adobe Dreamweaver dan XAMPP

Untuk hubungan antar komputer menggunakan LAN Tidak rinci membahas tentang perangkat keras.

1.5. Manfaat Dapat mengukur suhu di suatu ruangan. Dapat melakukan pengamatan suhu ruangan yang letaknya jauh sehingga

memberikan efisiensi.


8/42

3

1.6. Sistematika PenulisanSistematika laporan Projek Akhir adalah:

Bab I : Pendahuluan

Berisi tentang latar belakang pembuatan projek akhir, rumusan

masalah, tujuan, batasan masalah, manfaat dan sistematika penulisan.

Bab II : Dasar Teori

Membahas teori tentang mikrokontroler yang digunakan beserta

dengan sambungan ke PC. Membahas teori tentang bahasa

pemrograman Adobe Dreamweaver untuk tampilan web, Visual Basic

6.0 untuk interfacing mikrokontroler dengan PC.

Bab III : Tata Kerja / Metode Penelitian

Berisi tentang pembuatan program penampil. Bab ini juga

menerangkan tentang proses kerja program,perancangan program

aplikasi berbasis windows dengan menggunakan software Visual

Basic6.0, mulai dari pembuatan form sampai dengan proses aplikasi.

Dan pembuatan web dengan menggunakan Adobe Dreamweaver

sebagai tampilan.

Bab IV : Hasil dan Bahasan

Berisi tentang pengujian program aplikasi, realisasi, dan analisa dari

program aplikasi tersebut.

Bab V : Kesimpulan

Berisi tentang kesimpulan dari keseluruhan pembahasan laporan.


9/42

4

BAB II TEORI PENUNJANG

2.1. MikrokontrolerMikrokontroler adalah suatu chipberupa IC (Integrated Circuit) yang

dapat menerima sinyal input, mengolahnya dan memberikan sinyal output

sesuai dengan program yang diisikan ke dalamnya. Sinyal input

mikrokontroler berasal dari sensor yang merupakan informasi dari lingkungan

sedangkan sinyal output ditujukan kepada aktuator yang dapat memberikan

efek ke lingkungan. Jadi secara sederhana mikrokontroler dapat diibaratkan

sebagai otak dari suatu perangkat/produk yang mempu berinteraksi denganlingkungan sekitarnya.

Mikrokontroler pada dasarnya adalah komputer dalam satu chip, yang

di dalamnya terdapat mikroprosesor, memori, jalur Input/Output (I/O) dan

perangkat pelengkap lainnya. Kecepatan pengolahan data pada mikrokontroler

lebih rendah jika dibandingkan dengan PC. Pada PC kecepatan mikroprosesor

yang digunakan saat ini telah mencapai orde GHz, sedangkan kecepatan

operasi mikrokontroler pada umumnya berkisar antara 1 16 MHz. Begitujuga kapasitas RAM dan ROM pada PC yang bisa mencapai orde Gbyte,

dibandingkan dengan mikrokontroler yang hanya berkisar pada orde

byte/Kbyte.

Meskipun kecepatan pengolahan data dan kapasitas memori pada

mikrokontroler jauh lebih kecil jika dibandingkan dengan komputer personal,

namun kemampuan mikrokontroler sudah cukup untuk dapat digunakan pada

banyak aplikasi terutama karena ukurannya yang kompak. Mikrokontrolersering digunakan pada sistem yang tidak terlalu kompleks dan tidak

memerlukan kemampuan komputasi yang tinggi.


10/42

5

2.2. Arduino ProArduino didefinisikan sebagai sebuah platform elektronik yang open

source, berbasis pada software dan hardware yang fleksibel dan mudah

digunakan, yang ditujukan untuk seniman, desainer, hobbies dan setiap orang

yang tertarik dalam membuat objek atau lingkungan yang interaktif (Artanto,

2012:1)

.

Arduino sebagai sebuah platform komputasi fisik (Physical

Computing) yang open source pada board input ouput sederhana, yang

dimaksud dengan platformkomputasi fisik disini adalah sebuah sistem fisikhyang interaktif dengan penggunaan software dan hardware yang dapat

mendeteksi dan merespons situasi dan kondisi.

Menurut Artanto (2012:2), kelebihan arduino dari platform hardware

mikrokontroler lain adalah:

1. IDE Arduino merupakan multiplatform, yang dapat dijalankan di berbagaisistem operasi, seperti Windows, Macintosh dan Linux.

2. IDE Arduino dibuat berdasarkan pada IDE Processing, yang sederhanasehingga mudah digunakan.

3. Pemrograman arduino menggunakan kabel yang terhubung dengan portUSB, bukan port serial. Fitur ini berguna karena banyak komputer yang

sekarang ini tidak memiliki port serial.

4. Arduino adalah hardware dan software open source pembaca bisamendownload software dan gambar rangkaian arduino tanpa harus

membayar ke pembuat arduino.

5. Biaya hardware cukup murah, sehingga tidak terlalu menakutkan untukmembuat kesalahan.


11/42

6

6. Proyek arduino ini dikembangkan dalam lingkungan pendidikan sehinggabagi pemula akan lebih cepat dan mudah mempelajarinya.

7. Memiliki begitu banyak pengguna dan komunitas di internet dapatmembantu setiap kesulitan yang dihadapi.

2.3. Arduino Pro Mini 328

Gambar 1 Arduino Pro Mini

Arduino ini berisi semua yang diperlukan untuk mendukung

mikrokontroler, untuk mengaktifkan cukup menghubungkannya ke computer

dengan kabel USB dengan adaptor ACDC atau baterai. Elemen utama dari

kontroler Arduino ialah Input/Output atau I/O melalui pin-pin, port USB,

mikrokontroler yang di dalamnya ada sejumlah kecil RAM. Tentu saja

skalanya lebih kecil daripada sebuah komputer. Akibatnya dari segi power

supply/catu daya pun akan memerlukan perlakuan khusus.

2.4. USB TTL Adapter

Gambar 2 USB TTL Adapter


12/42

7

The PL-2303 beroperasi sebagai jembatan antara satu port USB dan

satu standar RS232 Serial port. Kedua on-chip buffer besar menampung aliran

data dari dua bus yang berbeda agar transfer data maksimum. Dengan ini,

jauh lebih tinggibaud rate dapat dicapai dibandingkan dengan UART.

Perangkat ini juga cocok dengan manajemen daya USB dan skema

jarak jauh. Daya yang dikonsumsi sedikit selama Suspend. Dengan

mengintegrasikan semua fungsi dalam paket SOIC-28, iniChip ini cocok

untuk kabel embedding. Pengguna hanya cukup menghubungkan kabel ke PC

atau port USB hub, dan kemudianmereka dapat terhubung ke perangkat RS-

232.

2.5. WebsiteWebsiteadalah kumpulan dari halaman-halaman situs, yang biasanya

terangkum dalam sebuah domainatau subdomain, yang tempatnya berada di

dalam World Wide Web (WWW) di Internet. Sebuah web page adalah

dokumen yang ditulis dalam format HTML (Hyper Text Markup Language),

yang hampir selalu bisa diakses melalui HTTP, yaitu protokol yang

menyampaikan informasi dari server websiteuntuk ditampilkan kepada para

pemakai melalui web browser. Semua publikasi dari website-websitetersebut

dapat membentuk sebuah jaringan.

Website adalah alamat URL yang berfungsi sebagai tempat

penyimpanan data informasi dengan berdasarkan topik tertentu. Yang

biasanya berisi tentang apa dan siapa dari perusahaan atau instansi atau

organisasi memiliki websitetersebut (Sutarman,2003).

Dalam suatu halaman website sangat memungkinkan hanya dengan

membuka satu dekstop berikut browser standart terpenuhi kebutuhan untuk

mengakses internet. Sistem internet yang menggunakan teknologi internet


13/42

8

dapat memberikan semua data dan informasi dengan perbedaan tipe data dari

berbagai lokasi yang disampaikan pada satu tampilan ( Hadi,2002).

Proses pembuatan websitepada umumnya dimulai dengan menyusun

halaman web. Berbagai jenis perangkat penyusun (authoring tools) dibuat

khusus untuk keperluan itu, fitur utama authoring toolhalaman webbiasanya

berupa menu yang memudahkan atau mengotomatis penulisan tag HTML

(Hypertext Markup Language) ( Andy,2002 ).

2.6. Visual Basic 6.0

Gambar 3 Visual Basic 6.0

Visual Basic adalah salah satu bahasa pemrograman komputer. Bahasa

pemrograman adalah perintah yang dimengerti oleh komputer untuk

melakukan tugas-tugas tertentu. Bahasa pemrograman Visual Basic, yang

dikembangkan oleh Microsoft sejak tahun 1991, merupakan pengembangan

dari pendahulunya yaitu bahasa pemrograman BASIC (Beginners All-purpose Symbolic Instruction Code) yang dikembangkan pada era 1950-an.

Visual Basic merupakan salah satu Development Toolyaitu alat bantu untuk

membuat berbagai macam program komputer, khususnya yang menggunakan

sistem operasi Windows. Visual Basic merupakan salah satu bahasa


14/42

9

pemrograman komputer yang mendukung object (Object Oriented

Programming= OOP).

Aplikasi adalah suatu unit perangkat lunak yang dibuat untuk

melayani kebutuhan akan beberapa aktivitas. Aplikasi akan menggunakan

sistem operasi (OS) komputer dan aplikasi lainnya yang mendukung Apl.

Istilah ini mulai perlahan masuk ke dalam istilah Teknologi Informasi

semenjak tahun 1993. Secara historis, aplikasi adalah software yang

dikembangkan oleh sebuah perusahaan.

Bahasa pemrograman Visual Basic 6.0 dapat digunakan untuk

menyusun dan membuat program aplikasi pada sistem operasi windows.

Program aplikasi dapat berupa program database, program grafis dan lain

sebagainya. Didalam Visual Basic 6.0 terdapat komponen - komponen yang

sangat membantu dalam pembuatan program. Dalam pembuatan program

aplikasi pada Visual Basic 6.0 dapat didukung oleh software seperti Microsoft

Access, Microsoft Exel, Seagate Crystal Report, dan lain sebagainya.

Untuk dapat menyusun dan membuat suatu program aplikasi dari VB

6.0, tentunya harus mengetahui fasilitas yang disediakan agar prosespenyusunan dan pembuatan program tersebut berjalan dengan baik.

2.6.1. Membuat Sebuah Project

Dalam pembuatan program aplikasi pada VB 6.0, langkah

pertama adalah dengan membuat sebuah project. Adapun caranya

dapat dilakukan dengan beberapa cara, diantaranya mengklik Start |

program | Microsoft Visual Basic 6.0 | Microsoft Visual Basic 6.0.

Selanjutnya akan terlihat tampilan seperti pada gambar di bawah.


15/42


16/42

11

klik menu yang dipilih dan selanjutnya mengklik submenu yang akan

digunakan.

Gambar 6 Menu Bar Visual Basic 6.0

2.6.3. ToolbarToolbar berfungsi sama dengan menu, hanya saja berbeda

tampilan. Pada toolbar cukup mengklik icon yang ingin digunakan

yang terdapat pada toolbar. Jumlah icon pada toolbar dapat diatur

dengan mengklik Menu View | toolbars. Selanjutnya ada pilihan

menambah toolbar, diantaranya Debug, Edit, Form editor, Standart,

dan Customize. Pada submenu Customize terdapat pilihan untuk

mengatur toolbar yang akan digunakan. Tampilan salah satu toolbar

terlihat seperti pada gambar di bawah.

Gambar 7 Toolbar Visual Basix 6.0

2.6.4. Toolbox

Toolbox merupakan tempat iconicon untuk objek yang akan

dimasukan dalam form pada pembuatan program aplikasi. Secara

default pada toolbox hanya terdapat objek - objek seperti gambar di

bawah ini.


17/42

12

Gambar 8 Toolbox Visual Studio 6.0

Secara garis besar fungsi dari masing-masing control tersebut

adalah sebagai berikut:

a. Pointer, merupakan suatu kontrol tapi icon ini digunakan ketikamemilih kontrol yang sudah berada pada form.

b. Label adalah kontrol yang digunakan untuk menampilkan text,yang tidak dapat diperbaharui.

c. Frame adalah kontrol yang digunakan untuk mengidentifikasikansebuah group pengontrolan.

d. TextBox adalah kontrol yang digunakan untuk menempatkan teksdalamformdan pemakai dapat mengubah tekstersebut.

2.6.5. Form Objek

Kontrol kontrol pada toolbox akan diletakkan disini sesuai

dengan rancangan program aplikasi. Untuk menampilkan form objek

ini, klik ganda pada icon / nama form pada jendela project explorer

atau dengan klik kanan pada icon / nama pilih view object. Contoh

tampilanformseperti gambar di bawah.


18/42

13

Gambar 9 Form Objek Visual Basic 6.0

2.6.6. Form KodeForm kode merupakan tempat untuk menulis kode kode atau

syntax program aplikasi Visual Basic yang didalamnya dapat

memanipulasi, mengatur dan memberikan perintah-perintah terhadap

objek-objek yang kita buat. Untuk menampilkan form kode ini, klik

form pada project explorer, klik kanan pilih View Code. Tampilan

formseperti gambar di bawah.

Gambar 10 Form Code Visual Basic


19/42

14

2.7. Adobe Dreamweaver

Gambar 11 Adobe Dreamweaver CS6

Adobe Dreamweaver CS3 adalah Generasi dari Macromedia

dreamwever merupakan sebuah editor HTML profesional untuk Mendesain

secara visual dan mengelola situs web dan halaman web. Konsep HTML

(HyperText Mark-up Language) akan memberikan anda kemudahan membuat

halaman webdan situs web. Tetapi dibalik semuanya itu, Dreamweaver anda

juga memberikan kemudahan mempelajari DHTML (DynamicHTML), yang

bisa membuat website lebih menarik dan lebih interaktif. Hanya tidak berhenti

disini, Dreamweaver juga mempunyai fasilitas FTP (File Transfer Protocol)

meng-uploaduntuk situs anda ke Internet ketika proses desain sudah selesai

dibuat.

Fasilitas Dreamweaver termasuk juga coding tools dan features:

HTML, CSS, JavaScript dan referensi, JavaScript Debugger, dan code

editorsyang bisa digunakan untuk mengubahJavaScript, XML, dan dokumen

text lainnya secara langsung dalam Dreamweaver. Teknologi Macromedia

tentang HTML mengimport dokumen HTML tanpa memformat ulang code

nya - dan anda bisa dengan mudah mengeset Dreamweaver untuk

membersihkan dan memformat ulang HTML kapan pun anda Inginkan.


20/42

15

2.8. Xampp

Gambar 12 XAMPP

XAMPP merupakan singkatan dari :

X : (baca : cross) yang berarti cross-platformatau dapat digunakan pada

sistem opersi yang berbeda

A : Apache

M : MySQL

P : PHP

P : Perl

Adalah sebuah web-server yang mudah digunakan, bersifat gratis dan

dapat disebarluaskan. XAMPP digunakan oleh para pengembang dan

programmer webuntuk menguji dan memvalidasi sebuah halaman webtanpa

harus terhubung dengan internet. XAMPP tersedia untuk Microsoft Windows,

Linux, Mac OS dan Sun Solaris

2.9. phpMyAdminWeb servermerupakanserverinternet yang mampu melayani koneksi

transfer data dalam protokol HTTP. Web server merupakan hal yang

terpenting dari server di internet dibandingkan server lainnya seperti e-mail

server, ftp server atau news server. Hal ini di sebabkan web server telah

dirancang untuk dapat melayani beragam jenis data, dari text sampai grafis 3

dimensi. Kemampuan ini telah menyebabkan berbagai institusi seperti

universitas maupun perusahaan dapat menerima kehadirannya dan juga

sekaligus menggunakannya sebagai sarana di internet.


21/42

16

Data Base (basis data) merupakan kumpulan data yang saling

berhubungan. Hubungan antar data dapat ditunjukan dengan adanya kolom

kunci dari tiap tabel yang ada. Dalam satu file atau table terdapat record-

record yang sejenis, sama besar, sama bentuk, yang merupakan satu

kumpulan entitasyang seragam. Satu record(umumnya digambarkan sebagai

baris data) terdiri darifieldyang saling berhubungan menunjukan bahwa field

tersebut dalam satu pengertian yang lengkap dan disimpan dalam satu record.

2.10. Pengenalan HTML2.10.1. Pendahuluan HTML

Hypertext Markup Languagemerupakan kepanjangan dari kata

HTML. Adalah script dimana bisa menampilkan informasi dan daya

kreasi lewat internet. HTML sendiri adalah suatu dokumen teks biasa

yang mudah dimengerti dibanding bahasa pemrograman lainnya, dan

karena bentuknya itu maka HTML dapat dibaca oleh berbagai

platform seperti : Windows, Linux, Macintosh. Kata Markup

Language pada HTML menunjukkan fasilitas yang berupa tanda

tertentu dalam skrip HTML dimana bisa mengatur judul, garis, tabel,

gambar, dan lain-lain dengan perintah yangtelah ditentukan pada

elemen HTML.

HTML sendiri dikeluarkan oleh W3C (World Wide Web

Consortium), setiap terjadi perkembangan level HTML, harus

dievaluasi ketat dan disetujui oleh W3C.

2.10.2. Bagian-bagian HTMLHTML terdiri dari beberapa bagian yang fungsinya sebagai

penanda suatu kelompok perintah tertentu, misalnya kelompok

perintah form yang ditandai dengan kode , judul dengan


22/42

17

dan sebagainya. Untuk lebih lanjut mengenai bagian -bagian

HTML perhatikan skema dibawah ini :

Judul Halaman

isi dari halaman web

Keterangan :

1. Dokumen HTML selalu diawali dengan tanda tagpembuka

dan diakhiri dengan tanda tagpenutup .

2. Pada elemen head , dapat di sisipkan kode-kode

untuk menuliskan keterangan tentang dokumen HTML. Atau dapat

juga di sisipkan scripts pemrograman web seperti Java Script,

VBScripts, atau CSS untuk menambah daya tarik pada situs yang di

buat agar lebih menarik dan dinamis.

3. Elemen body berisi tag untuk isi atau layout

tampilan situs, seperti , ,

.

Jadi jelas bahwa elemen adalah suatu bagian yang besar yang

terdiri dari kode-kode tag tersebut. Sedangkan tag hanyalah

merupakan bagian dari elemen. Tagadalah kode-kode yang digunakan

untuk men-settingdokumen HTML. Secara garis besar bentuk umum

tag adalah sebagai berikut :

TEKS

Namun ada juga tag yang tidak perlu ada penutup seperti
, ,

,dan lain-lain.


23/42

18

2.11. Pengenalan PHPPHP merupakan singkatan dari PHP Hypertext

Preprocessor,merupakan bahasa script server side yang disisipkan pada

HTML (Hypertext Markup Languange), dimana sebagian besar sintaks mirip

dengan bahasa C, Java dan Perl, ditambah beberapa fungsi PHP yang spesifik.

Dimana tujuan utama penggunaan bahasa ini adalah untuk memungkinkan

perancang web menulis halaman web dinamik dengan cepat.

PHP mudah dibuat dan cepat dijalankan. PHP dapat berjalan dalam

webserveryang berbeda dan dalam sistem operasi yang berbeda pula. PHP

dapat berjalan di sistem operasi UNIX, Windows 98, Windows NT, dan

Macintosh. Serta Php juga termasuk bahasa yang embedded (bisa diletakkan

di dalam tag HTML).

2.11.1. Penggabungan Script PHP dan HTML

Bahasa pemrograman PHP dapat digabungkan dengan HTML

dengan terlebih dahulu memberikan tanda tagbuka dilanjutkan tanda

tanya ( ). Ada dua tipe penggabungan antara PHP dan HTML

yaitu :

a.Embedded Script

Yakni penulisan tagPHP di sela-sela tagHTML. Dengan cara

ini, penulisan tag PHP digunakan untuk mengapit bagian-bagian

tertentu dalam dokumen yang memerlukanscriptPHP untuk proses di

dalam server. Embedded Script menempatkan sebagai bagian dari

scriptHTML.

Contoh penulisan Embedded Script dapat dilihat di bawah ini :


24/42

19

b. Non Embedded Script

Yakni cara penulisan tag PHP dibagian paling awal dan paling

akhir dokumen. Dengan cara ini, penulisan tag PHP digunakan untuk

mengawali dan mengakhiri keseluruhan bagian dalam sebuah

dokumen. Non Embedded Script menempatkan script HTML sebagai

bagian dari script PHP.

Contoh Penulisan Non Embedded Script dapat dilihat dibawah ini :


25/42

20

BAB III TATA KERJA

Web ini akan memberikan informasi perihal data suhu yang di dapatkan dari

mikrokontroler. Pada aplikasi kaliini memang topologi jaringan hanya peer to peer,

akan tetapi aplikasi ini

3.1. Perancangan USB TTL dan Arduino Mini ProTegangan komunikasi serial untuk mikrokontroler diantara 0V-3,3V akan

tetapi untuk tegangan komunikasi serial komputer sekitar -15 sampai 15V. Untuk

kedua piranti itu dapat berkomunikasi sehingga diperlukan sebuah converter agar

level tegangan nya setara dan sama-sama dapat berkomunikasi.

Mikrokontroler

PC

Gambar 13 Logika Keseluruhanan Pemantauan Suhu Berbasis Web

3.2. Perancangan Visual Basic 6.0Visual Basic mempunyai program dengan aplikasi grafichal user

interface (GUI) yang dapat menjadikan pemakai komputer dapat

berkomunikasi langsung dengan komputer tersebut menggunakan grafik atau

gambar. Dengan menggunakan komunikasi serial yang sudah dikemas pada

Ambil data suhu

Kirimkan data suhu

untuk diisika ke file

suhu.txt

Menampilkan data di

Web dengan

mengambil data suhu

di file suhu.txt

File suhu.txt

yang berisikan

data suhu

Melalui

program di

baca suhu

(VB)

Melalui

program di

index2.php


26/42

21

software Arduino menjadikan pengguna bisa berkomunikasi dengan Arduino

melalui GUI. Program tampilan yang dibuat menggunakan Visual Basic 6.0

akan lebih memudahkan untuk melihat hasil pengukuran yang di dapat dari

Arduino. Namun, program visual basic disini dibuat semu, karena tujuan

utama pada pemrograman web. Visual Basis hanya sebagai perantara dan

penampung hasil pengukuran dari mikrokontroler.

3.2.1. Memulai Visual Basic 6.0Aktifkan VB 6 melalui tombol Start > All Programs >

Microsoft Visual Studio 6.0 > Microsoft Visual Basic 6.0.

Gambar 14 Memulai Visual Basic 6.0

Tunggulah beberapa saat hingga muncul tampilan berikut :


27/42

22

Gambar 15 Kotak Dialog New Project

Beberapa objek yang digunakan :

Form 3 Label 1 Mcsomm

3.2.2. Perancangan Tampilan Visual Basic 6.0Perancangan form ini dimaksudkan untuk melihat informasi

pengukuran suhu secara realtime hasil dari program Arduino dan

sensor Dallas.

Gambar 16 Form Pengukuran Suhu


28/42

23

3.3. Perancangan Web3.3.1. Memulai Dreamweaver CS3

Aktifkan Dreamweaver melalui tombol Start > All Programs >

Adobe Dreamweaver CS3

Gambar 17 Memulai Dreamweaver

Setelah software terbuka pada Create New, pilih PHP

Gambar 18 Kotak Dialog New File


29/42

24

3.3.2. Perancangan Halaman AwalPada saat membuka web pertaman kali, akan ditampilkan form

login. Setiap pengguna diminta untuk memasukkan nama dan

password untuk bisa masuk ke halaman informasi suhu.

Header

Banner & Logo

Form Login

Nama

Sandi

Footer Tabel 1 Perancangan Halaman Awal

3.3.3. Perancangan Halaman Informasi SuhuHeader

Banner & Logo

Informasi Suhu

FooterTabel 2 Perancangan Halaman Informasi Suhu

Masuk

Temperature

oC


30/42

25

BAB VI HASIL DAN PEMBAHASAN

4.1. Hasil Tampilan Web4.1.1.

Halaman Utama

Gambar 19 Halaman Utama Web

4.1.2. Halaman Informasi Suhu

Gambar 20 Halaman Informasi Suhu


31/42

26

4.2. Pembahasan Hubungan Arduino Mini Pro 328 dengan USB TTLAdapter

Hubungan antar pin Arduino dengan USB

Arduino Pro Mini 328 USB TTLAdapter

GND GND

RXD TXD

TXD RXD

VCC VCC

4.3. Pembahasan Tamplian Web4.3.1. Halaman Utama

Header Selamat Datang

Selamat Datang

Banner & Logo

Form Login


32/42

27

Nama

Sandi

Footer

Sistem Pemantauan Suhu
Sistem Tertanam

Program Keahlian Teknik Komputer
Institut Pertanian Bogor
Copyright

2014

Tabel 3 Pembahasan Tampilan Web Halaman Utama

Uraian diatas menjelaskan bagaiaman kode php membuat halama

utama sebuah website. Di dalam halaman utama tersebut disertakankan form

login untuk memverifikasi pengguna yang mengakses. Hanya pengguna ygterdaftar dalam database yang dapat masuk ke dalam sistem tersebut. Jika

pengguna mengisi nama, sandi dan menekan tombol masuk, secara otomatis

sistem akan memverifikasi atau mencocokan data dengan database.


33/42

28

4.3.2. Halaman Informasi Suhu

Header Selamat Datang

Selamat Datang

Banner &

Logo

Informasi

Suhu

Temperature


34/42

29

// the filename is hardcoded to be able to read a textfile stored as asset

in App Inventorvar strFilename = "suhu.txt";

xmlhttp=new XMLHttpRequest();

xmlhttp.open("GET",strFilename,false);

xmlhttp.send();xmlDoc=xmlhttp.responseText;

document.write(xmlDoc);

C

Footer

Sistem

Pemantauan Suhu

Sistem Tertanam

Program Keahlian Teknik Komputer
Institut Pertanian Bogor

Copyright

2014

Tabel 4 Pembahasan Tampilan Halaman Infrormasi Suhu

Pada tabel diatas dijelaskan bagaimana web mengambil data dari

suhu.txt yang datanya selalu diperbaharui setiap satu detik. Data suhu.txt

berasal dari visual basic sebagai interfacing perangkat lunak dan perangkat

keras(arduino pro mini 328)


35/42

30

BAB V KESIMPULAN

Setelah dilakukan perancangan, pembuatan, serta pengujian dan analisa pada

Tugas Akhir ini, dapat diambil kesimpulan sebagai berikut:

1. Sistem dibangun secara embedded menggunakan mikrokontroler Arduino ProMini 328.

2. Sistem dapat memberikan informasi suhu ruangan secara efektif, yaitu melaluiweb yang dapat diakses dimana saja selama masih satu LAN.

3. Sistem dapat menampilkan suhu ruangan secara realtime denganmenampilkannya pada komputer atau PC.

Daftar Pustaka

www.arduino.cc

www.sensormonkey.eeng.nuim.ie

Lampiran

Sketch Program Pengamatan Suhu Ruangan Menggunakan Mikrokontroler

Arduino Pro Mini 328 Berbasis Web:

Visual Basic 6.0 Code:

Public Sub Form_Load()

nFileNum = FreeFile

Open "C:\ardconf.txt" For Input As nFileNum

Line Input #nFileNum, sNextLine

portno = sNextLine

Close nFileNum

With MSComm1
http://www.sensormonkey.eeng.nuim.ie/index.php/site/page?view=tutorialshttp://www.sensormonkey.eeng.nuim.ie/index.php/site/page?view=tutorials


36/42


37/42

32

Label2.Caption = TempBuffer(0)

Dim i As Integer

Buffer = "" 'Hapus buffer

For i = 1 To UBound(TempBuffer) - 1

Buffer = Buffer & TempBuffer(i)

Next i

End If

End If

Dim sFileText As String

Dim iFileNo As Integer

iFileNo = FreeFile

'Buka File Txt untuk menyimpan Suhu

Open "C:\xampp\htdocs\Suhu.txt" For Output As #iFileNo

Print #iFileNo, Label2.Caption

Close #iFileNo

End Sub

PHP temperature Code:


38/42

33


Toggle

Navigation


39/42

34

Selamat Datang


40/42

35

* Data Diperbaharui Setiap 1

Detik

Temperature

// the filename is hardcoded to be able to read a textfile

stored as asset in App Inventor

var strFilename = "suhu.txt";


41/42

36

xmlhttp=new XMLHttpRequest();

xmlhttp.open("GET",strFilename,false);

xmlhttp.send();

xmlDoc=xmlhttp.responseText;

document.write(xmlDoc);

C


Sistem Tertanam

Program Keahlian Teknik

Komputer

Institut Pertanian

Bogor

Copyright

2014


42/42

$(document).ready(function(e) {

$('.carousel').carousel();

});

Pengamatan Suhu Ruangan Menggunakan Mikrokontroler Arduino Pro Mini 328 Berbasis Web

Documents