Advance

USAID-SMART Lab Program

1 Modul Mobile Programming

PENGANTAR

Alhamdulillah, segala puji dan syukur kepada Allah SWT atas segala rahmat, taufik

dan hidayah hingga penulis dapat menyelesaikan modul basic untuk pelatihan arduino di smart

lab. Modul ini berisi tiga bab pembahasan yaitu Komponen Elektro, Pengenalan Arduino dan

Sensor serta Aplikasinya.

Dengan modul basic ini, penulis mengucapkan terima kasih kepada seluruh pihak

terkait seperti teman teman di dunia maya yang telah memberikan share ilmunya pada pada

dunia maya. Selain itu penulis juga memberikan pengahrgaan yang sebesar-besarnya kepada

para penulis panduan arduino yang tidak bisa disebutkan satu persatu. Mudah-mudahan dengan

modul ini bisa menjadi ladang amal buat teman teman di dunia maya yang telah memberikan

ilmunya untuk saya.

saya menyadari bahwa dalam penyusunan Modul ini masih terdapat kelemahan yang

perlu diperkuat dan kekurangan yang perlu dilengkapi. Dengan rendah hati penulis

mengharapkan masukan, untuk memperkuat dan melengkapi kekurangan tersebut.

Jakarta, September 2015.



DAFTAR ISI

Halaman

1. Pengantar Modul .................................................................................... 1

2. Daftar Isi ................................................................................................. 2

3. BAB I COMPUTER NETWORK (Jaringan Komputer) .................. 3

A. Target Belajar ............................................................... 3

B. Teori ............................................................................. 3

Jaringan Komputer Dasar .............................................. 3

(Computer Network Media) Media Jaringan Komputer 4

Hardware Programming Computer Network ................ 7

C. Project .......................................................................... 8

D. Chalengge ..................................................................... 10

4. BAB II HTML (HYPERTEXT MARKUP LANGUAGE)................. 11

A. Target Belajar ............................................................... 11

B. Teori ............................................................................. 11

www ............................................................................. 11

Pengenalan HTML ....................................................... 11

C. Project .......................................................................... 15

D. Chalengge ..................................................................... 26

5. BAB III ARDUINO WEB SERVER .................................................. 27

A. Target Belajar ............................................................... 27

B. Teori ............................................................................. 27

Ethernet Shield ............................................................. 27

Wifi Shield esp8266 ..................................................... 28

C. Project .......................................................................... 28

D. Chalengge ..................................................................... 38

6. DAFTAR PUSTAKA ............................................................................ 39



BAB I

COMPUTER NETWORK (Jaringan Komputer)

A. Target Belajar

Target dari modul satu pada tahap basic adalah diharapkan peserta training dapat

memahami sebagai berikut:

1. Computer Network Fundamental (Jaringan Komputer Dasar)

2. Computer Network Media / Connection (Media Jaringan Komputer)

3. Hardware Programming Computer Network (Pemrograman Hardware Jaringan

Komputer)

B. Teori

B.1 Jaringan Komputer Dasar

Jaringan komputer merupakan kumpulan beberapa komputer atau gadget lainnya

yang dapat saling berkomunikasi satu sama lain serta dapat berbagi data antara

pengguna. Untuk membangun sebuah jaringan komputer memerlukan perangkat lain

pada komputer seperti Perangkat Jaringan Komputer, Media Transmisi.

Dalam jaringan komputer, ada yang disebut dengan terminologi jaringan yang

merupakan jenis jaringan komputer seperti Internet, Local Area Network, Wide Are

Network, Metropolitan Area Network, Virtual Private Network, Extranet dan Intranet,

Multiple dan Converged Network.

Internet

Internet merupakan terminologi jaringan komputer yang tergabung dengan berbagai

ISP (Internet Service Provider) yang biasanya menghubungkan koneksi sampai

berbagai negara.

Gambar 1. Internet

LAN (Local Area Network)

Local Area Network merupakan terminologi jaringan komputer yang bekerja di area

geografis terbatas, yang dapat digunakan untuk multiakses high-bandwith media,

dengan administrasi lokal dan koneksi secara langsung. Perangkat yang digunakan

terminologi ini biasanya router,switch,hub,repeater. Kategori lan biasannya digunakan

untuk Client Server Network dan Peer to Peer Network.

WAN (Wide Area Network)

Wide Area Network merupakan terrminologi jaringan komputer yang bekerja di area

geografis luas, dapat diakses melalui Serial Interface dengan kecepatan rendah, koneksi

secara full time dan part time. Perangkat yang digunakan dalam terminologi adalah

Router, Server, Modem.



MAN (Metropolitan Area Network)

Metropolitan Area Network merupakan terminologi jaringan komputer yang bekerja

di area yang sangat luas, biasanya MAN dilakukan untuk konenksi antar gedung atau

bila diperkantoran koneksi dari kantor cabang dengan pusat.

Gambar 2. MAN

VPN (Virtual Private Network)

VPN merupakan terminologi jaringan yang memanfaatkan terminologi jaringan

internet atau jaringan yang lainnya untuk keperluan pribadi, sehingga dapat mengakses

data pribadi dari mana saja. VPN biasanya diaplikasikan untuk memonitoring

memepermudah pekerjaan sesorang dalam memonitoring.

Gambar 3. VPN

Intranet dan Extranet

Intranet merupakan terminologi jaringan LAN yang terkoneksi dapat terkoneksi

dengan jaringan LAN lainnya. Begitupun Extranet hampir sama dengan

Gambar 4. Intranet dan Extranet

B.2 Computer Network Media

Secara garis besar network media terbagi dua yaitu guided media dan unguided

media. Guided media terdapat 4 tipe media yaitu Open Wire, Twisted Pair, Coaxial Cable,

Optical Fiber. Sementara secara garis besar menggunakan perambatan radio frekuensi

seperti Ground wave, Ionospheric Propagation,Line of Sight (LOS) Propagation.



Guided Media

Guided media merupakan media jaringan komputer dengn media yang dapat dilihat

secara kasat mata seperti Open Wire, Twisted Pair, Coaxial Cable, Optical Fiber.

Open Wire (Kabel Terbuka)

Open wire merupakan media transmisi dengan kabel terbuka biasanya

digunakan untuk distribusi listrik, serta tidak punya perlindungan terhadap gangguan

noise, pada komunikasi data, Hanya dapat digunakan untuk komunikasi data bila

jaraknya kurang dari 20 ft.(6,1 m). Tetapi pada saat ini sudah mulai dikembangkan

teknologi ini untuk komunikasi data menggunakan open wire.

Twisted Pair

Merupakan kabel yang memiliki Memiliki crosstalk terendah Memiliki

kecepatan samapai 100 Mbps bahkan bisa lebih, Memiliki 8 s/d 15 lilitan per kaki

linier, Pamjang maksimum 100 meter, Kabel yang ditetapkan dalam spesifikasi

Fiber Distributed Data Interface (FDDI), spesifikasi yang mendifinisikan

bagaimana tembaga dan serat bekerja sama dalam lingkungan yang sama.

Perlindungan Kabel Twisted

UTP (Unshielded Twisted Pair), hanya lilitan antar kabel untuk menhindari

crosstalk, tidak ada perlindungan interferensi atau induksi sinyal dari luar kabel.

STP (Shielded Twisted Pair), selain dililitkan, juga punya proteksi terhadap

induksi atau interferensi sinyal dari luar kabel berupa lapisan kertas alumunium

foil, sebelum jaket pembungkus luar.

Kabel UTP (Khususnya CAT5 / CAT5e)

Konektor yang bisa digunakan untuk UTP Cable CAT5 adalah RJ-45. Untuk

penggunaan koneksi komputer, dikenal 2 buah tipe penyambungan kabel UTP ini,

yaitu straight cable dan crossover cable. Fungsi masing-masing jenis koneksi ini

berbeda, straight cable digunakan untuk menghubungkan client ke hub/router,

sedangkan crossover cable digunakan untuk menghubungkan client ke client atau

dalam kasus tertentu digunakan untuk menghubungkan hub ke hub.

STRAIGHT CABLE

Menghubungkan ujung satu dengan ujung lain dengan satu warna, dalam artian

ujung nomor satu merupakan ujung nomor dua di ujung lain. Sebenarnya urutan

warna dari masing-masing kabel tidak menjadi masalah, namun ada standard

secara internasional yang digunakan untuk straight cable ini, yaitu:



Karakteristik Straight Cable :

● Menghubungkan PC-Hub/switch

● Half duplex

● Panjang maksimal kabel 100 m

● Ethernet 10/100/1000Base-T

CROSSOVER CABLE

Karakteristik Crossover Cable :

● PC-Switch, Switch-Switch, PC-PC

● Full duplex

● Panjang maksimal kabel 100 m

● Ethernet 10/100/1000Base-T

Koneksi roll-over

Koneksi roll-over digunakan untuk

management peralatan jaringan

memakai komputer yang ada. Koneksi

ini biasa digunakan untuk koneksi

antara komputer dengan console port

pada router atau switch. Koneksi roll-

over seperti

diperlihatkan pada Gambar

Coaxial Cable / Kabel Coaxial

Ada dua jenis cable coaxial Digunakan untuk transmisi analog Impedansi 75

Ohm Contoh : kabel antena TV external, Digunakan untuk transmisi digital

Impedansi 50 Ohm Contoh : kabel jaringan computer.

Fiber Optic

Fiber optic adalah medium Fotonik, menghantarkan signal fotonik atau

cahaya

Gambar 5. Fiber Optik

Unguided Media



Unguided media merupakan media transmisi tanpa kabel dengan menggunakan

frekuensi radio. Unguided media terdiri dari Ground wave, Ionospheric

propagation, Line of Sight (LoS) Propagation.

Ground wave

Ground wave merupakan perambatan gelombang radio mengikuti kontur / curve

permukaan bumi biasanya beroperasi sampai frequensi 2 MHz.

Gambar 5. Ground Wave

Ionospheric propagation

Ionospheric propagation merupakan perambatan dinyal yang Dapat dipantulkan

oleh lapisan ionosphere dan bisa Beroperasi pada frequensi 30 – 85 Mhz.

Gambar 6. Ionospheric propagation

Line of Sight (LoS) Propagation

LOS merupakan perambatan sinyal Dibatasi oleh curve permukaan bumi dengan

jarak rambat sekitar 100 Km horizontan to horizontal, Los jua sering Disebut juga

sebagai gelombang luar angkasa

Gambar 7. LOS

B.3 Hardware Programming Computer Network

Membangun jaringan komputer, tidak semudah membalik telapak tangan.

Diperlukan pemahaman tentang komponen jaringan baik dari sisi perangkat lunak

(software) maupun dari sisi perangkat keras (hardware).Perangkat lunak (software)

jaringan komputer meliputi: Sistem operasi client, sistem operasi server (NOS=Network

Operating System), Program Aplikasi untuk server dan client, Internet Sharing, Sofware

antivirus dan lain-lain.Sedangkan perangkat keras (hardware) jaringan meliputi:

Komputer Server, Client/Workstation, Kartu Jaringan (NIC=Network Interface Card),

Kabel, Konector, HUB, Repeater, Bridge dan Router.

Kedua komponen diatas harus ada, karena salah satu tidak ada maka jaringan

komputer tidak dapat berfungsi dengan baik, atau bahkan tidak dapat berfungsi sama

sekali.

http://sis.xp3.biz/



Komponen Perangkat Lunak (Software)

Perangkat lunak (Software) yang digunakan dalam jaringan komputer baik untuk

server maupun client, antara lain:

1. Sistem Operasi

Sistem operasi adalah perangkat lunak yang membuat komputer dapat

beroperasi. Sistem operasi merupakan perangkat lunak yang pertama kali

harus dipasang agar komputer dapat digunakan/dioperasikan.

Dalam jaringan komputer, sistem operasi untuk client berbeda dengan yang

digunakan untuk server.

Untuk komputer client, OS yang digunakan : Windows Xp Prof, Win 2000

Proffesional, Win ‘98/Me, Linux.

Sedangkan untuk server, Network Operating System yang digunakan antara

lain: Windows NT Server, Windows 2000 Server, Windows 2003 Server,

Unix, Novell Netware dan Linux.

2. Program Aplikasi

Program aplikasi biasanya digunakan oleh komputer client untuk produktivitas

kerja. Yang termasuk dalam program aplikasi antara lain : Microsoft Office,

Open Office, Corel Draw, SPSS, Adobe Photoshop, adan lain-lain.

3. Aplikasi Jaringan

Aplikasi jaringan merupakan perangkat lunak yang khusus digunakan untuk

jaringan komputer, misal:

1. ISA Server, SQUID à Software untuk proxy server

2. MS SQL Server, MySQL, Oracle à Database Server

3. Qmail, Postfix, Ms Exchange à Mail Server

4. IIS, Apache à Web Server

5. Superscan, tcpdump, ethereal, windup, ping, route à utility untuk jaringan

komputer.

6. dan lain-lain.

4. Program Utility

Program utility merupakan perangkat lunak yang yang digunakan untuk tujuan

spesifik, baik untuk komputer standalone maupun untuk komputer

jaringan.Yang termasuk dalam kategori ini al: Winzip, winrar, winamp,

antivirus, partition magic, dan lain-lain.

5. Bahasa Pemrograman

Bahasa pemrograman adalah perangkat lunak yang memungkinkan pengguna

dapat membuat program/perangkat lunak sendiri. Macamnya antara lain:

Pascal, C/C++, Visual Basic, VB.NET, C#, J#, C++.NET, Delphi, Java, PHP,

ASP, JSP, Python, Ruby dan lain-lain

http://sis.xp3.biz/

http://sis.xp3.biz/



C. Project

1. Membuat Kabel Straight dan Cross

Kabel Straight Kabel Cross

Gambar 8. Straigh dan Cross

Langkah-langkah

Siapkan kabel UTP sesuai yang diinginkan misalnya 2 meter

Ukur sekitar 1 cm dari ujung kabel dan potonglah bagian luar dari kabel

perlahan secara memutar. Dalam proses ini berhati-hatilah karena

kesalahan sedikit saja dapat membuat kabel kabel tipis 8 warna yang ada

dibagian dalam kabel dapat putus, yang berarti kita harus mengulang lagi

untuk memotong bagian luarnya

Setelah bagian luarnya kita potong, susunlah kabel-kabel warna warni

tersebut dengan urutan yang di atas

Setelah menyusunnya dengan rapi dan memastikan kalau ujung dari

semua kabel rata (untuk memudahkan ketika memasukkannya kedalam

konektor RJ-45, potonglah jika semua ujung belum rata), ambil konektor

RJ-45-nya kemudian masukkan semua ujung kabel yang telah di susun

dengan hati - hati kedalam lubang yang terdapat pada konektor RJ-45

tersebut. Pastikan semua kabel rata pada tiap ujung lempengan yang ada

di dalam port. Karena satu saja dari kaki-kaki kabel tidak menyentuh pada

lempengan tersebut maka kabel tidak akan berfungsi.

Kemudian, masukkanlah konektor RJ-45 yang telah disatukan dengan

kabel tersebut pada Crimping Tool dan tekan dengan penekanan yang

cukup kuat, dan tahan beberapa detik untuk memastikan kaki pengunci

pada konektor telah mengunci kabel dengan baik sehingga tidak goyang

atau lepas. Lakukan hal yang sama pada ujung satu lagi.

Jika telah selesai, sekarang kita akan menggunakan network cable tester

untuk menguji apakah kabel kita telah berfungsi dengan baik. Masukkan

kedua ujung konektor pada masing - masing port untuk RJ-45 pada tester,



kemudian hidupkan testernya, perhatikan kedua bagian lampu indikator

(yang biasanya masing-masing berjumlah 8 lampu plus 1 lampu indikator

untuk grounding). Jika kabel dalam status yang bagus, lampu-lampu

tersebut akan hidup berurutan sesuai dengan urutan nomornya (kecuali

jika sedang menguji kabel cross dimana urutannya berbeda)

2. Membuat Jaringan Peer to Peer dan Client Server

Gambar 9. Client Server dan Peer to Peer

D. Chalengge

1. Buatlah jaringan cliennt Server

2. Buatlah shering file dengan temanmu menggunakan jaringan peer to peer

.



BAB II

HTML (HYPERTEXT MARKUP LANGUAGE)

A. Target Belajar

1. Memahami tentang konsep WWW

2. Memahami tentang struktur dokumen HTML

3. Memahami tentang dasar-dasar HTML

4. Memahami tentang pengaturan teks, daftar item, gambar, tabel, form, meta.

5. dapat mengaplikasikan HTML untuk programming arduino

B. Teori

www(world Wide Web)

Internet merupakan terminologi jaringan komputer yang tergabung dengan berbagai

ISP (Internet Service Provider) yang biasanya menghubungkan koneksi sampai

berbagai negara. World Wide Web (WWW) merupakan bagian dari internet yang

paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada tiga

mekanisme berikut:

Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer

networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.

Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform

Resource Locator) yang di gunakan sebagai standard alamat internet.

HTML digunakan untuk membuat document yang bisa di akses melalui web.

Pengenalan HTML

Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk

menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:

Mengontrol tampilan dari web page dan contentnya.

Mempublikasikan document secara online sehingga bisa di akses dari seluruh

dunia.

Membuat online form yang bisa di gunakan untuk menangani pendaftaran,

transaksi secara online.

Menambahkan object-object seperti image, audi, video dan juga java applet

dalam document HTML.

Browser dan Editor

Browser

Browser merupakan software yang di install di mesin client yang berfungsi untuk

menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di

gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang

lainya.

Editor

Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor

yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.

BASIC TAG HTML

Struktur HTML Document

Document HTML bisa di bagi mejadi tiga bagian utama:



HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML

<HTML> </HTML>

HEAD

Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam

bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada

titlenya browser.

Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi

tertentu mengenai document HTML, anda bisa menentukan author name, keywords,

dan lainyan pada tag META.

BODY

Document body di gunakan untuk menampilkan text, image link dan semua yang akan

di tampilkan pada web page.

Basic HTML Element

Block Level Element

Block level element yang sering di gunakan : Heading (H1 sampai H6)

Paragraf (P) List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun

yang tidak berurutan (unordered list).

Ada dua macam list yang bisa anda tambahkan ke document HTML:

1. Unordered List (Bullet) :

2. Ordered List (Numbering)

Contoh.

Tag Attribute Value Description

<UL> TYPE QUARE

DISC

CIRCLE

Bullet Kotak

Bullet Titik

Bullet Lingkaran

<OL> TYPE I i

A a

Upper Roman

Lower Roman

percase Lowercase

<OL> START n Begin Number

Definition List

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan

definition term serta <DD> tag menentukan definition itu sendiri.

Horizontal Rules(HR)

Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document

HTML.

Attribute Description

Position menetukan posisi dari HR, dengan value : canter |

right | left.

Width Untuk menentukan panjang HR default 100%

Size Untuk menentukan tebal dari HR dalam pixel

Noshad Efek bayangan.



Pemformatan Page Break

Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini

fungsinya mirip dengan carriage return.

Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document

HTML seperti color, size, style dan lainya.

Contoh:


color Untuk menentukan warna font, anda bisa menggunakan

nama font atau hexadecimal

(#000000 - #ffffff)

size Untuk menentukan ukuran dari font 1 – 7

face Untuk menentukan jenis font biasanya dalam satu list

ada beberapa font dan akan di baca mulai dari yang

paling kiri.

Color

Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti

body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red,

green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal

number.

Hexadecimal Color

#FF0000

#00FF00

#0000FF

#000000

#FFFFFF

Red

Green

Blue

Black

White

Alignment

Align attribute digunakan untuk menentukan perataan object dalam document HTML

baik berupa text, object, image, paragraph, division dan lain-lain.

Value Description

Left

Right

Center

Justify

Rata kanan

Rata kiri

Rata Tengah

Rata kanan kiri

Format text

Physical Formatting

Tag Description

<B> ... </B> Bold text

<I> ... </I> Italic text

<U> ... </U> Underline Text

<BIG> ... </BIG> Untuk ukuran yang lebih

besar dari normal

<SMALL> ... </SMALL> Untuk ukuran yang lebih

kecil dari norm

<STRIKE> ... </STRIKE> Untuk memberi garis di

Tengah text

<SUP> ... </SUP> Superscript text



<SUB> ... </SUB> Subscript text

<CENTER> ... </CENTER> Center document

Logical Formatting

Tag Description

<EM> ... </EM> Text miring / <I>

<STRONG> ... </STRONG> Text tebal / <B>

<DEL> ... </DEL> Mencoret text / <STRIKE>

<INS> ... </INS> Underline text / <U>

Preformatted text

Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.

Hyperlink

Link Address

Absolute Address - merupakan full internet address (URL) yang meliputi protocol,

network location dan path dan nama file.

Contoh: http ://www.yahoo.com/index.html

Relatif Address - URL yang tidak menyebutkan protocol dan network locationya

(hanya path dan nama filenya).

Anchor

Anchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF property

digunakan untuk menentukan tujuan dari hyperlink tersebut.

<A HREF=”URL”> Hypertext </A> <A HREF=”protocol:host.domain:port/path/filename”> Hypertext </A> Table

Membuat table

Tag <TABLE> digunaka untuk membuat table dalam document HTML , bagian pokok

dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>. Berikutnya

kalo anda ingin membuat beberapa baris cell dalam table gunakan tag <TR>.

Menambahkan Heading cell

Untuk menambahkan heading pada table tambahkan tag <TH> pada table yang sudah

di buat.

Pemformatan table

Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align dan

Valign (vertical Alignment)

Attribute Value

Align Center | justify | left | right

Valign BASELINE | TOP | BOTTOM | MIDDLE

Merge cell

Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge

baris.

Image

Format Image

Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan :

1. GIF (Graphical Interchange Format) (.GIF)

2. JPEG (Joint Photographic Expert Image) (.JPG)

3. PNG (Portable Network Graphics)

<IMG SRC=”URL”>

Attribute Value Description

Align Center | justify | left |

right | > Top, bottom,

Baseline | top | bottom

| middle

>Top, bottom, middle digunakan

untuk menentukan posisi image

terhadap text

> Left, right, center untuk menentukan

posisi image di document

FORM

Kegunaan Form

Berikut ini beberapa contoh kegunaan Form dalam web:

1. memperoleh data-data user baik nama, alamat dan data lainnya

2. memperoleh informasi pembelian secara online

3. memperoleh feedback dari user mengenai website anda.

Form Element

Tag <FORM> digunakan untuk membuat form dalam document HTML.


ACCEPT Mendefinisikan MIME yang di izinkan oleh server yang

memuat script untuk memproses form.

Syntax: ACCEPT=”Internet Media Type”

METHOD Menentukan bagaimana data akan di kirim ke server. GET

– data akan di kirim dengan menggunakan query string

pada URL. POST – data akan di kirim ke server sebagai

block data ke script.

Syntax: METHOD=”POST|GET”

ACTION Menentukan lokasi dari script yang akan memproses data

dari form

Syntax: ACTION=”URL”

C. Project

1. Penggunaan syntak HTML, bagian-bagian HTML, penggunaan komentar dan tag

<BR> untuk ganti baris.

<HTML>

<HEAD>

<TITLE>Latihan HTML</TITLE>

</HEAD>



<BODY>

Selamat Belajar HTML<BR>

Semoga Sukses !

</BODY>

</HTML>



2. Menggunakan tag <P> untuk membuat paragraph; tag judul <H1> s/d <H6> untuk

pembesaran huruf.

<HTML>

<HEAD>

<TITLE>Contoh Pengaturan Judul</TITLE>

</HEAD>

<BODY>

<H1 ALIGN = “CENTER”> Pesona Tanaman

Hias </H1><P>

Keindahan tanaman hias<BR>

membawa suatu pesona tersendiri<BR>

Warna-warni bunga

</BODY>

</HTML>

3. Membuat garis horizontal <HR>

<HTML>

<HEAD>

<TITLE>Atribut NOSHADE pada Tag HR</TITLE>

</HEAD>

<BODY>

<H1>KEBUN PESONA</H1>

<HR SIZE = "10" NOSHADE>

Jl. Malang Km 14<BR>

Malang <BR>

Indonesia<BR>

</BODY>

</HTML>

4. Menggunakan tag <DIV> untuk mengelompokkan sejumlah baris teks yang

memiliki karakteristik yang sama.

<HTML>

<HEAD>

<TITLE>Tag DIV</TITLE>

</HEAD>

<BODY>

<DIV ALIGN = "RIGHT">

<H1><U>SMART LAB</U></H1>

<H2>Jl. Raya PANCORAN</H2>

<H2>JAkarta</H2>

</DIV>

<HR>

</BODY>

</HTML>

5. Penggunaan <PRE> untuk menampilkan teks apa adanya.

<HTML> <HEAD> <TITLE>Praformat </TITLE> </HEAD> <BODY> <H2>Daftar Harga Keladi:</H2>



<PRE> Red Flash.........35.000 Red Fire..........60.000 Fannie Munson.....60.000 </PRE> Harga sewaktu-waktu bisa berubah. </BODY> </HTML>

6. Pengaturan Font : Face (untuk jenis Font), Size (untuk ukuran Font), Color (untuk

warna)

<HTML>

<HEAD>

<TITLE>Jenis Font</TITLE>

</HEAD>

<BODY>

Normal: 012345ABCD<BR>

<FONT COLOR="blue" FACE = "Arial">Arial:

012345ABCD</FONT>

<BR>

<FONT COLOR="green" FACE = "Courier" SIZE="5">

Courier: 012345ABCD</FONT>

<BR>

</BODY>

</HTML>

7. Pengaturan warna background : BGCOLOR

<HTML>

<HEAD>

<TITLE>Warna - Bagian 2</TITLE>

</HEAD>

<BODY BGCOLOR = "black" TEXT = "gray">

Normal<BR>

<FONT COLOR = "blue">Warna Biru</FONT><BR>

<FONT COLOR = "green">Warna Hijau</FONT><BR>

<FONT COLOR = "red">Warna Merah</FONT><BR>

<FONT COLOR = "yellow">Warna kuning</FONT><BR>

</BODY>

</HTML>

8. MENAMPILKAN DAFTAR ITEM (LIST)

Penggunaan tag <UL> untuk daftar list yang tidak diberi nomor; tag <LI> untuk

daftar item yang diberi bulatan.

<HTML>

<HEAD>

<TITLE>Contoh Pemakaian Tag UL dan LI</TITLE>

</HEAD>

<BODY>

<H2>Daftar Sekolah Model :</H2>

<UL>

<LI>SMA N 54 Jakarta <BR>

<LI>SMA N 1 Jakarta <BR>



<LI>SMA N 10 Malang <BR>

<LI>SMA N 2 Batu <BR>

</UL>

</BODY>

</HTML>

9. Penggunaan tag <OL> untuk menampilkan daftar item dengan nomor urut.

<HTML>

<HEAD>

<TITLE>Tag OL dengan TYPE</TITLE>

</HEAD>

<BODY>

<B>Dengan huruf kapital:</B>

<OL TYPE = "A">

<LI>Yogya<BR>

<LI>Solo<BR>

</OL>

<HR>

<B>Dengan angka romawi:</B>

<OL TYPE = "i">

<LI>Yogya<BR>

<LI>Magelang<BR>

</OL>

</BODY>

</HTML>

10. Penggunaan tag <DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan

tampilan menjorok ke kanan.

<HTML>

<HEAD>

<TITLE>Daftar Definisi</TITLE>

</HEAD>

<BODY>

<B>Kamus Teknologi Informasi:</B>

<DL>

<DT>HTML</DT>

<DD>Bahasa yang digunakan untuk menyusun Web</DD>

<DT>HTTP</DT>

<DD>Protokol yang dipakai untuk mentransfer

HTML</DD>

</DL>

</BODY>

</HTML>

11. MENAMPILKAN GAMBAR

Penggunaan <BODY BACKGROUND> untuk menampilkan background dan

<IMG SRC> untuk menampilkan gambar.

<HTML>

<HEAD>

<TITLE>Menampilkan Gambar</TITLE>

</HEAD>

<BODY BACKGROUND = "../citra/gunung.jpg">



Gambar Komputer terbaru

<IMG SRC = "komputer.gif" ALIGN = "MIDDLE">

</BODY>

</HTML>

Jika letak file gambar dalam folder yang sama dengan file html, bisa

langsung dituliskan nama filenya, tapi bila berbeda perhatikan cara diatas (bila

file html diatas disimpan dalam folder /html, maka gunung.jpg akan terletak

dalam folder /html/citra/)

12. Pengaturan ukuran gambar dengan atribut HEIGHT dan WEIGHT, serta

penggunaan atribut BORDER untuk memberi bingkai gambar.

<HTML>

<HEAD>

<TITLE>Ukuran Gambar</TITLE>

</HEAD>

<BODY>

<IMG SRC = "../citra/komputer.jpg"

HEIGHT = "150" WIDTH = "150" BORDER="2">

<BR>

<IMG SRC = "../citra/komputer.jpg"

HEIGHT = "50" WIDTH = "50" BORDER="3">

</BODY>

</HTML>

13. PENGGUNAAN TABEL

Tag-tag yang digunakan :

<TABLE> untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai.

<CAPTION> menentukan judul tabel

<TR> membuat baris dalam tabel

<TH> membuat judul kolom

<TD> membuat sebuah sel data

<HTML>

<HEAD>

<TITLE>Tabel dengan Garis</TITLE>

</HEAD>

<BODY>

<TABLE BORDER = "1">

<CAPTION>Daftar Harga Keladi</CAPTION>

<TR><TH>Nama</TH><TH>Harga</TH></TR>

<TR><TD>Red Flash</TD><TD>35.000</TD></TR>

<TR><TD>Red Fire</TD><TD>60.000</TD></TR>

<TR><TD>Fannie Munson</TD><TD>60.000</TD></TR>

</TABLE>

</BODY>

</HTML>

14. Penggabungan sel dengan tag <ROWSPAN> dan <COLSPAN> a. Atribut

ROWSPAN ditempatkan pada tag <TD>

<HTML>

<HEAD>

<TITLE>Penggunaan ROWSPAN</TITLE>



</HEAD>

<BODY>


<CAPTION>Daftar Wilayah dan Kota</CAPTION>

<TR>

<TD ROWSPAN = "3">Jawa Tengah</TD>

<TD>Semarang</TD>

</TR>

<TR><TD>Kudus</TD></TR>

<TR><TD>Solo</TD></TR>

</TABLE>

</BODY>

</HTML>

15. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>

<HTML>

<HEAD>

<TITLE>Penggunaan COLSPAN</TITLE>

</HEAD>

<BODY>


<CAPTION>Daftar Target</CAPTION>

<TR>

<TH COLSPAN = "2">Area: Jawa Tengah</TH>

</TR>

<TR><TD>Semarang</TD><TD>15.000</TD></TR>

<TR><TD>Kudus</TD><TD>11.000</TD></TR>

</TABLE>

</BODY>

</HTML>

16. Pengaturan jarak dalam tabel :

ELLSPACING mengatur jarak bagian sel thd tepi dalam bingkai tabel.

CELLPADDING mengatur jarak teks terhadap tepi kiri.

<HTML>

<HEAD>

<TITLE>Tombol dengan Tabel</TITLE>

</HEAD>

<BODY>

<TABLE BORDER = "5" CELLSPACING = "5"

CELLPADDING = "5" BGCOLOR = "green">

<TR><TD>

<FONT COLOR = "red"><B>e-mail</B></FONT>

</TD></TR>

</TABLE>

</BODY>

</HTML>

17. PEMBUATAN LINK

Penggunaan tag <A HREF>

<HTML>

<HEAD>



<TITLE>Halaman Utama</TITLE>

</HEAD>

<BODY>

<H1>Halaman Utama</H1>

Silakan klik pada link-link berikut:<BR>

<A HREF = "halx.htm">Halaman X</A><BR>

<A HREF = "http://www.google.com">Homepage

saya</A><BR>

<A HREF = "computer.jpg"><IMG SRC =

“computer.jpg> Membuat

link dengan gambar </A><BR>

</BODY>

</HTML>

Buatlah file halx.htm, sehingga ketika diklik pada Halaman X akan menuju file

yang dimaksud.

18. Menggunakan bookmark pada suatu halaman web yang panjang.

<HTML>

<HEAD>

<TITLE>Bookmark</TITLE>

</HEAD>

<BODY>

<CENTER>

<H1>BUKU</H1>

<B>Daftar Isi:</B><BR>

<A HREF = "#bab1">Bab 1</A><BR>

<A HREF = "#bab2">Bab 2</A><BR>

<HR>

<A NAME = "#bab1">

<H2>BAB 1</H2>

...<BR>

...<BR>

<HR>

<A NAME = "#bab2">

<H2>BAB 2</H2>

...<BR>

...<BR>

<HR>

</CENTER>

</BODY>

</HTML>

19. PENGGUNAAN FORM

Input data dengan input

<HTML>

<HEAD>

<TITLE>Contoh Penggunaan Formulir</TITLE>

</HEAD>

<BODY>

<FORM ACTION = "info.htm" METHOD = "POST">



Nama :

<INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20"

MAXLENGTH = "20">

<BR>

Hobby :

<INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "25"

MAXLENGTH = "40">

<BR>

<INPUT TYPE = "SUBMIT" VALUE = "Kirim">

<INPUT TYPE = "RESET" VALUE = "Kosongkan">

</FORM>

</BODY>

</HTML>

File info.htm yang dituju oleh web diatas.

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

Info

</BODY>

</HTML>

20. Penggunaan tipe checkbox

<HTML>

<HEAD>


</HEAD>

<BODY>

<FORM>

Buah yang Anda sukai:<BR>

<INPUT TYPE = "CHECKBOX" NAME = "anggur"

CHECKED>Anggur<BR>

<INPUT TYPE = "CHECKBOX" NAME = "jeruk">Jeruk<BR>

<INPUT TYPE = "CHECKBOX" NAME = "melon">Melon<BR>

</FORM>

</BODY>

</HTML>

21. Penggunaan tombol radio dan komentar

<HTML>

<HEAD>


</HEAD>

<BODY>

<FORM>

Jenis Kelamin:<BR>

<INPUT TYPE = "RADIO"

NAME = "sex" CHECKED>Pria<BR>

<INPUT TYPE = "RADIO"



NAME = "sex">Wanita<BR>

<BR>

Komentar Anda:<BR>

<TEXTAREA NAME = "komentar"

ROWS = "5" COLS = "40" WRAP>

</TEXTAREA>

<BR>

</FORM>

</BODY>

</HTML>

22. Pemilihan dengan select

<HTML>

<HEAD>

<TITLE>Contoh SELECT - Model Drop Down</TITLE>

</HEAD>

<BODY>

<FORM>

Olahraga yang paling Anda sukai:<BR>

<SELECT NAME = "olahraga">

<OPTION VALUE = "Sepakbola" SELECTED>Sepak Bola

<OPTION VALUE = "Bulutangkis">Bulutangkis

<OPTION VALUE = "Tenismeja">Tenis Meja

<OPTION VALUE = "Basket">Basket

<OPTION VALUE = "Lain-lain">Lain-lain

</SELECT>

<BR>

</FORM>

</BODY>

</HTML>

Sekarang, ubahlah baris select diatas dengan : <SELECT NAME=”olahraga”

SIZE=”3”>, perhatikan perbedaannya dengan yang diatas.

23. PENGGUNAAN TAG META

Ditempatkan dalam bagian header, dan biasanya diletakkan setelah </TITLE>.

Digunakan untuk menyimpan sejumlah informasi.

Contoh :

1. Jika anda membuat dokumen HTML melalui FrontPage akan muncul tag meta

sebagai berikut :

<META NAME=”Generator” CONTENT=”Microsoft FrontPage”>

2. Agar halaman web yang dibuat disertakan ketika mesin pencari web (mbah

Google) melakukan pencarian, gunakan atribut keywords, semakin banyak

keywords yang dimasukkan, akan semakin besar halaman web disebutkan dalam

hasil pencarian. <META NAME=”keywords” CONTENTS=”teknologi, komputer,

telekomunikasi”>

3. Mengarahkan ke halaman lain

<HTML>

<HEAD>

<TITLE>Pengalihan Halaman</TITLE>

<META HTTP-EQUIV = "REFRESH"

CONTENT = "5; URL = baru.htm">



</HEAD>

<BODY>

Halaman web kami sudah dipindah.

Anda akan dipindahkan ke halaman

tersebut dalam waktu 5 detik.

</BODY>

</HTML>

24. Mendeteksi Lokasi dengan HTML

HTML5 Geolocation API hanya bisa support untuk browser dengan versi:

1. Chrome: > 5.0

2. Internet Explorer: > 9.0

3. Firefox: > 3.5

4. Safari: > 5.0

5. Opera: > 16.0

Yuk langsung saja mari kita coba bagaimana mendeteksi lokasi kita.

<!DOCTYPE html> <html> <head> <title>Demo Cek Lokasi Geolocation HTML5</title> </head> <body> <center> <p>Cek lokasi anda! >> <button onclick="getLocation()">Cek</button></p> <p id="tampilkan"></p> </center> <script> var view = document.getElementById("tampilkan"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { view.innerHTML = "Yah browsernya ngga support Geolocation bro!"; } } function showPosition(position) { view.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: view.innerHTML = "Yah, mau deteksi lokasi tapi ga boleh :(" break; case error.POSITION_UNAVAILABLE: view.innerHTML = "Yah, Info lokasimu nggak bisa ditemukan nih"



break; case error.TIMEOUT: view.innerHTML = "Requestnya timeout bro" break; case error.UNKNOWN_ERROR: view.innerHTML = "An unknown error occurred." break; } } </script> </body> </html>

25. Mendeteksi Lokasi Dengan HTML tampilan Google Map

<!DOCTYPE html> <html> <head> <title>Demo Cek Lokasi Geolocation HTML5</title> </head> <body> <center> <p id="tampilkan"></p> <p>Cek lokasi anda! >> <button onclick="getLocation()">Cek</button></p> <div id="mapcanvas"></div> </center> <script src="http://maps.google.com/maps/api/js"></script> <script> var view = document.getElementById("tampilkan"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { view.innerHTML = "Yah browsernya ngga support Geolocation bro!"; } } function showPosition(position) { lat = position.coords.latitude; lon = position.coords.longitude; latlon = new google.maps.LatLng(lat, lon) mapcanvas = document.getElementById('mapcanvas') mapcanvas.style.height = '500px'; mapcanvas.style.width = '500px'; var myOptions = { center:latlon, zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP }



BAB III

ARDUINO WEB SERVER

A. Target Belajar

1. Mampu memahami cara kerja ethernet shield dan wifi shield

2. mampu membuat server menggunakan Arduino

3. mampu membuat mengaplikasikan ethernet shield dan Wifi Shield

4. mampu membuat dan mengaplikasikan HTML dan arduino.

5. Mampu membuat sistem monitoring online berbasis web

B. Teori

Ethernet Shield

Ethernet Shield menambah kemampuan arduino board agar terhubung ke

jaringan komputer. Ethernet shield berbasiskan cip ethernet Wiznet W5100. Ethernet

library digunakan dalam menulis program agar arduino board dapat terhubung ke

jaringan dengan menggunakan arduino ethernet shield.

Pada ethernet shield terdapat sebuah slot micro-SD, yang dapat digunakan

untuk menyimpan file yang dapat diakses melalui jaringan. Onboard micro-SD card

reader diakses dengan menggunakan SD library.

Arduino board berkominikasi dengan W5100 dan SD card mengunakan bus

SPI (Serial Peripheral Interface). Komunikasi ini diatur oleh library SPI.h dan

Ethernet.h. Bus SPI menggunakan pin digital 11, 12 dan 13 pada Arduino Uno. Pin

digital 10 digunakan untuk memilih W5100 dan pin digital 4 digunakan untuk memilih

SD card.

Pin-pin yang sudah disebutkan sebelumnya tidak dapat digunakan untuk

input/output umum ketika kita menggunakan ethernet shield. Karena W5100 dan SD

card berbagi bus SPI, hanya salah satu yang dapat aktif pada satu waktu. Jika kita

menggunakan kedua perangkat dalam program kita, hal ini akan diatasi oleh library

yang sesuai. Jika kita tidak menggunakan salah satu perangkat dalam program kita,

kiranya kita perlu secara eksplisit mendeselect-nya. Untuk melakukan hal ini pada SD

card, set pin 4 sebagai output dan menuliskan logika tinggi padanya, sedangkan untuk

W5100 yang digunakan adalah pin 10. DFRduino Ethernet shield adalah sebuah clone

dari arduino Ethernet shield yang dibuat oleh DFRobot.

Gambar 10. Ethernet Shield

Arduino Wifi Shield

Modul WiFi ini merupakan SoC (System on Chip) dengan stack protokol TCP/IP

yang telah terintegrasi, sehingga memungkinkan mikrokontroler untuk meng-akses

jaringan WiFi.

Modul ini juga sangat mudah untuk dihubungkan dengan perangkat Arduino, atau

dengan kata lain menjadi Arduino WiFi shield.



Modul ini juga mendukung APSD untuk aplikasi VoIP.

Fitur-fitur :

- Menggunakan jaringan 802.11 b/g/n.

- Wi-Fi Direct (P2P), soft-AP.

- Integrated TCP/IP protocol stack

- Integrated TR switch, balun, LNA, power amplifier and matching network.

- Integrated PLLs, regulators, DCXO and power management units

- +19.5 dBm output power in 802.11b mode.

- Power down leakage current of <10uA.

- Integrated low power 32-bit CPU could be used as application processor.

- SDIO 1.1 / 2.0, SPI, UART.

- STBC, 1×1 MIMO, 2×1 MIMO.

- A-MPDU & A-MSDU aggregation & 0.4ms guard interval.

- Wake up and transmit packets in < 2ms.

- Standby power consumption of < 1.0mW (DTIM3).

- Operation Level : 5V

- Power Supply : External 5V

Gambar 12. Wifi

C. PROJECT

Project yang akan kita buat adalah

1. Pengukur Suhu berbasis WEB Menggunakan Ethernet Shield

2. Pengukur Jarak Berbasis WEB dengan 3 Sensor Menggunakan Ethernet Shield

3. Mengontrol Relay dengan Wireless ESP8266

1. Pengukur Suhu Berbasis WEB

Dalam project ini, peralatan yang harus disiapkan adalah Arduino Uno, Sensor suhu

LM35, Kabel UTP dengan terpasang RJ45 diujung-ujungnya, Breadboard, Jumper.

Langkah-Langkah

1. Rangkailah arduino dan Ethernet shield dengan cara menggabungkannya,

setelah itu rangkailah seperti pada gambar 13.



Gambar 13. Rangkaian Sensor

2. Setelah dirangkai masukan coding berikut

#include <SPI.h>

#include <Ethernet.h>

float tempC = 0.0;

int senspin = 1;

// assign a MAC address for the ethernet controller.

// fill in your address here:

byte mac[] = {

0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};

// assign an IP address for the controller:

byte ip[] = {

192,168,3,50 };

byte gateway[] = {

192,168,3,3};

byte subnet[] = {

255, 255, 255, 0 };

// Initialize the Ethernet server library

// with the IP address and port you want to use

// (port 80 is default for HTTP):

EthernetServer server(80);

void setup()

{

// start the Ethernet connection and the server:

Ethernet.begin(mac, ip);

server.begin();

}

void loop()

{

// listen for incoming clients

EthernetClient client = server.available();

if (client) {

// an http request ends with a blank line



boolean currentLineIsBlank = true;

while (client.connected()) {

if (client.available()) {

char c = client.read();

// if you've gotten to the end of the line (received a newline

// character) and the line is blank, the http request has ended,

// so you can send a reply

if (c == '\n' && currentLineIsBlank) {

// send a standard http response header

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println();

tempC = analogRead(senspin) * .512; //convert the analog data

//I modified the code here to let it print the temperature

client.print("<center>");

client.print("<b>");

client.print("<font size=7>");

client.print("PENGUKUR SUHU BERBASIS WEB");

client.print("</font>");

client.print("</center>");

client.print("</b>");

client.println("<br />");


client.print("TIM ARDUINO SMART LAB");




client.print("Powered By ARDUINO");




client.print("Suhu ruangan = ");

client.print(tempC);

client.print(" C");


break;

}

if (c == '\n') {

// you're starting a new line

currentLineIsBlank = true;

}

else if (c != '\r') {

// you've gotten a character on the current line

currentLineIsBlank = false;

}



}

}

// give the web browser time to receive the data

delay(1);

// close the connection:

client.stop();

}

}

2. Pengukur Jarak Berbasis WEB dengan 3 Sensor Ultrasonik

Alat dan bahan yang harus disiapkan adalah Arduino Uno, Ethernet Shield, 3 sensor

ultrasonik, jumper, breadboard.

Langkah-Langkah

1. Langkah pertama gabung arduino uno dengan ethernet shield setlah itu rangkai

arduino dengan sensor ultrasonik seperti pada gambar 14,

Gambar 14. Rangkaian Tiga Sensor Ultrasonik

2. Lalu masikan coding ini kedalam arduino

#include <Wire.h>

#include <NewPing.h>

#include <Ethernet.h>

#include <SPI.h>

#define TRIGGER_PIN 2

#define ECHO_PIN 3

#define TRIGGER_PIN1 4

#define ECHO_PIN1 5

#define TRIGGER_PIN2 6

#define ECHO_PIN2 7

#define MAX_DISTANCE 10

byte mac[] = {

0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};

IPAddress ip(192,168,1,20);

IPAddress gateway(192,168,1,1);

IPAddress subnet(255, 255, 255, 0);



EthernetServer server(80);

NewPing sonar(TRIGGER_PIN,ECHO_PIN,MAX_DISTANCE);

NewPing sonar2(TRIGGER_PIN1,ECHO_PIN1,MAX_DISTANCE);

NewPing sonar3(TRIGGER_PIN2,ECHO_PIN2,MAX_DISTANCE);

void setup(){

Serial.begin(9600);

while(!Serial){

;

}

Ethernet.begin(mac, ip);

server.begin();

Serial.print("server connect");

Serial.println(Ethernet.localIP());

}

void loop() {

EthernetClient client = server.available();

if (client){

Serial.println("new client");

boolean currentLineIsBlank=true;

while (client.connected()){

if (client.available()){

char c=client.read();

Serial.write(c);

if (c=='\n' && currentLineIsBlank){

client.println("HTTP/1.1 200 OK");

client.println("Content-Type:text/html");

client.println("Connection:Close");

client.println();

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.println("<head>");

client.println("<title>PENGUKUR JARAK BERBASIS WEB DENGAN 3 SENSOR </title>");


client.print("<center>SMART LAB </center>");

client.print("</font");


client.print("<center>WORKSHOP ARDUINO</center>");



client.println("</head>");

// cek sensor

int cm=sonar.ping_cm();

int cm2=sonar2.ping_cm();

int cm3=sonar3.ping_cm();



Serial.print("Read sensor: ");

switch(cm)

{

case 0:

Serial.println("SENSOR 1 OK");

break;

case -1:

Serial.println("Checksum error");

break;

case -2:

Serial.println("Time out error");

break;

default:

Serial.println("Unknown error");

break;

}


switch(cm2)

{

case 0:


break;

case -1:


break;

case -2:


break;

default:


break;

}


switch(cm3)

{

case 0:


break;

case -1:


break;

case -2:


break;

default:


break;

}

client.println("<center>");




client.print("SENSOR 1 JARAKNYA = ");

client.println(cm);

client.println("cm");

client.println("</center>");






client.println(cm2);








client.println(cm3);





client.println("</html>");

break;

}

if (c == '\n'){

currentLineIsBlank = true;

}

else if(c !='\r'){

currentLineIsBlank=false;

}

}

}

delay(1);

client.stop();

Serial.println("Client disconnected");

}

}

3. Mengontrol Relay Dengan Wireles ESP ESP8266

Pada Project ini kita mengontrol Relay dengan Arduino melalui Webserver, atau

bisa juga disebut Menyalakan lampu melalui Internet, alat dan bahan yang

dibutuhkan adalah sebagai beriku



1x Arduino Compatible

1x ESP8266 Wifi Module

1x Relay Modul 4 Channel

Kabel jumper secukupnya

Breadboard (Projectboard)

Koneksi Internet (WiFi)

Aplikasi Android yang bernama ESPduino,

Langkah-Langkah

1. Rangkailah arduino dan wifi esp8266 seperti pada gambar 15

Gambar 15. Konfigurasi Board

Keterangan: Pin VCC pada Arduino dihubungkan ke Pin VCC dan CH_PD Modul ESP8266

Pin GND pada Arduino dihubungkan ke GND dan GPIO0 pada ESP8266

Pin TXD pada Arduino dihubungkan ke UTXD pada Modul ESP8266

Pin RXD pada Arduino dihubungkan ke URXD pada Modul ESP8266

2. Setelah itu extract file ESPTOOL+FIRMWARE, sehingga seperti gambar berikut 16.

Gambar 16. Extrak

3. Setelah itu klik 2x esp8266_flasher sehingga akan muncul jendela seperti pada

gambar 17. Setelah klik bin untuk memilih firmwarnya. Dan klik download isi

sesuai dengan port com arduino yang sesuai dengan komputer anda.



Gambar 17. Connecting

4. Setelah berhasil flashingnya, cabut kabel dari GPIO0 yang terhubung pada

GND Arduino . 5. Lalu kita buka serial monitor Arduino IDE dan Set Both NL & CR dengan

Baudrate 9600, Lalu coba mengecek dengan mengirimkan

perintah AT , AT+RST dan AT+GMR Pastikan Serial monitor ente

menampilkan hasil yang sama seperti gambar 18

Gambar 18. Flashing

6. Langkah selanjutnya menggabungkan arduino,wifi esp8266 dan relay

7. Susunlah rangkaian seperti gambar berikut ini

Gambar 19 Konfigurasi Arduino

Keterangan Konfigurasi Kabel Arduino ke ESP8266 :

Pin 3.3V pada Arduino dihubungkan ke VCC di ESP8266

Pin 3.3V pada Arduino dihubungkan ke CH_PD di ESP8266

Pin GND pada Arduino dihubungkan ke GND di ESP8266

Pin 10 pada Arduino dihubungkan ke UTXD di ESP8266

Pin 11 pada Arduino dihubungkan ke URXD di ESP8266

8. Setelah rangkaian diatas selesai, maka susunlah konfigurasi seperti gamabr 20

http://1.bp.blogspot.com/-qhdK6NDKBzo/ViY93nxUaoI/AAAAAAAAB0E/MuQAPTTkXO0/s1600/5.png

http://1.bp.blogspot.com/-DJKAa_AWjsw/VYluCZcGzaI/AAAAAAAABUs/FNelNA_2VnA/s1600/Arduino-ESP8266.PNG



Gambar 20. Relay dan koneksi arduino

Keterangan Konfigurasi Kabel Arduino ke Relay Modul :

Pin 5V pada Arduino dihubungkan ke VCC Relay modul

Pin GND pada Arduino dihubungkan ke GNDRelay modul

Pin 2 pada Arduino dihubungkan ke IN1 Relay modul




9. Setelah itu sambungkan Arduino pada Laptop/PC dengan menggunakan kabel

serial, Lalu masukan Sketch dibawah ini, dan terakhir klik upload.

#include <SoftwareSerial.h>

#define DEBUG true

SoftwareSerial esp8266(10,11); //RX TX

void setup()

{

Serial.begin(9600);

esp8266.begin(9600);

pinMode(2,OUTPUT); // Pin 2 sebagai output

digitalWrite(2,HIGH);







kirimPerintah("AT+RST\r\n",2000,DEBUG); //reset modul

kirimPerintah("AT+CWMODE=1\r\n",1000,DEBUG); //Set sebagai akses point

// Ubah SSID "Andy182 Network" dan Password "waipigratis" sesuai Wifi anda

kirimPerintah("AT+CWJAP=\"smartlab",\"waipigratis\"\r\n",3000,DEBUG);

delay(10000);

kirimPerintah("AT+CIFSR\r\n",1000,DEBUG); //Mendapatkan IP adress

kirimPerintah("AT+CIPMUX=1\r\n",1000,DEBUG); //Set untuk beberapa koneksi

kirimPerintah("AT+CIPSERVER=1,80\r\n",1000,DEBUG); //Server aktif di port 80

Serial.println("Server sudah siap!");

}

void loop()

{

if(esp8266.available()) // cek jika esp mengirim pesan

{

if(esp8266.find("+IPD,"))

{

delay(1000);

int connectionId = esp8266.read()-48;

esp8266.find("pin=");

int nomorPin = (esp8266.read()-48)*10;

nomorPin += (esp8266.read()-48);

digitalWrite(nomorPin, !digitalRead(nomorPin));

String closeCommand = "AT+CIPCLOSE=";

closeCommand+=connectionId;

closeCommand+="\r\n";

kirimPerintah(closeCommand,1000,DEBUG); //tutup koneksi

}

}

http://3.bp.blogspot.com/-ZV1ZdpVpSzM/VYlxAQJgWoI/AAAAAAAABVA/3ShNtoqzKmU/s1600/Arduino-Relay.png



}

String kirimPerintah(String perintah, const int timeout, boolean debug)

{

String response = "";

esp8266.print(perintah);

long int time = millis();

while( (time+timeout) > millis()) {

while(esp8266.available()) {

char c = esp8266.read();

response+=c;

}

}

if(debug) {

Serial.print(response);

}

return response;

}

Sketch Pada baris berikut ini, ubah dan sesuaikan dengan SSID dan Password

Wifi anda kirimPerintah("AT+CWJAP=\"Andy182 Network\",\"waipigratis\"\r\n",3000,DEBUG);

10. Setelah berhasil upload sketch, buka serial monitor untuk Menampilkan IP

Adress

Gambar 21 Sketch berhasil upload

KETERANGAN :

Apabila menggunakan Aplikasi Android, ente hanya memasukkan IP

Address saja pada textbox yang tersedia dan dapat langsung

mengontrol Relaynya. Lain halnya bila tanpa aplikasi Android.

Berikut ini adalah perintah untuk mengaktifkan/menonaktifkan Relay

tanpa Aplikasi Android:

http://192.168.0.103/?pin=2 (Untuk ON/OFF Relay 1)



http://192.168.0.103/?pin=5 (Untuk ON/OFF Relay 4) 192.168.0.103 (Ubah sesuai dengan IP Adress yang anda dapat dari Serial

Monitor)

/?pin= (Biarkanlah saja seperti itu, atau bisa juga anda ubah pada sketch)

2/3/4/5 (Ubah sesuai dengan port Arduino yang terhubung pada Input Relay)

D. Chalengge

Buatlah project akhir anda dengan sistem monitoring berbasis web.

http://2.bp.blogspot.com/-YTkc6JKN3Qs/ViZFO-cko7I/AAAAAAAAB0U/74B1eAOaq7A/s1600/6.png



PUSTAKA

Evan, W.Brian. “ Arduino Programming Notebook”. 2007.

Simon MONK. “ 30 Arduino Project for the Evil Genius”.

Jhon-David Adam, Josh Adam, Harrald Mole.” Arduino Robotic”. 2009.

Ardiansyah.Deden. “Modul Praktikum Sistem Interface dan Mikrocontroller 1 dan 2”. 2014.

Ardiansyah.Deden. “Modul Praktikum Robotika”.2014.

Ardiansyah.Deden. “Modul Praktikum Sistem Mikroprocessor”.2014.

http:\\ www.arduino.cc

http:\\ www.arduino.cc/en/Booklet/HomePage

http:\\ www.geraicerdas.com

http:\\ www.garagelab.com

http:\\ www.boardduino.wed.id

http://www.arduino.cc/

http://www.arduino.cc/en/Booklet/HomePage

http://www.geraicerdas.com/

http://www.garagelab.com/

http://www.boardduino.wed.id/

Advance

Documents

Transcript of Advance