45
BAB III PERANCANGAN DAN PEMBUATAN ALAT 3.1. Block Diagram Perancangan dari Konfigurasi System
Gambar.3.1. Block Diagram System Dari Blok diagram dapat disimpulkan bahwa ada 2 buah rumah yang terhubung dalam satu jaringan yang terkoneksi ke Server (Webserver dan Database), lalu dihubung kan ke Wifi akses point, sehingga webserver dapat diakses dari smartphone mau pun latptop via wifi. Ada beberapa bagian utama dalam perancangan system ini yaitu:
46
1. Perancangan dan Pembuatan System Device 2. Perancangan dan Pembuatan System Server 3. Perancangan dan Pembuatan System Database Sebagaimana 3 system ini terlebih dahulu dirancang satu – persatu agar mempermudah dalam pembuatan alat dan system. Sebelum menguraikan semua nya terlebih dahulu sebaiknya mempersiapkan bahan yang dibutuhkan baik dari sisi hardware maupun software, yaitu: a. Bahan yang diperlukan pada sisi hardware Bahan yang perlu dipersiapkan pada sisi hardware yang mana merupakan sisi perangkat keras yang berupa komponen, tool yang digunkan dan perangkat lainnya, berikut adalah tabel bahan pada siss Hardware Tabel 3.1. Tabel Komponen Hardware NO 1 2 3 4 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Sisi Hardware Arduino UnoR3 + kabel data Module Ethernet Arduino Shield Kabel LAN (RJ45) 1 Meter Led Hijau Resitor 10 kohm – ¼ watt Tansistor BC547 Dioda 1N4148 PCB Polos Ferit Clorit Plastik transparan Fan 12 Volt Switch Magnetic LM35DZ Sensor Suhu Relay 5 pin, 5 volt Pin header 20 pin Relay AC 12 Volt Soket Relay LDR 10k Wifi router Terminal soket 3 pin Kabel Lampu AC 20 Watt Pitting Lampu Saklar Bel Router Akses Point
Quatity 2 2 2 6 6 6 6 2 1 2 2 2 2 4 5 2 2 2 1 4 3 meter 2 2 2 1
47
b. Bahan yang diperlukan pada sisi Software Pada bagian sisi software yang mana merupakan perangkat lunak yang perlu dipersiapkan dan diinstal yaitu sebagai berikut: Tabel 3.2. Bahan- bahan Sisi Software NO 1 2 3 4 5
Sisi Software Arduino IDE software WampServer 2.5 Notepad++ Wireshark Mysql Work Bench
3.2. Perancangan dan Pembuatan System Device Pada perancangan system device ini terdapat 2 bagian utama yaitu: 1. Perancangan dan Pembuatan System Device Bagian Hardware 2. Perancangan dan Pembuatan System Device Bagian Software Dari point diatas, maka akan dapat dirancang system device dari sisi hardware dan sisi softwarenya. 3.2.1. Perancangan dan Pembuatan System Device Bagian Hardware Pada perancangan dan pembuatan system device bagian hardware ada beberapa bagian yaitu : a. Rangkaian Sensor Suhu dan sensor LDR b. Rangkaian Sensor Pintu c. Rangkaian driver d. Rangkaian Buzzer Alarm Dari uraian diatas dapat dirancang simulasi dan pembuatan Wiring Diagram alat menggunakan Proteus :
48
Gambar.3.2. Block Diagram System Dari gambar simulasi diatas, sebelum melakukan pembuatan akan lebih efesien membuat simulasi seperti ini agar dapat membuat gambaran dalam pembuatan layout pcbnya, dengan menggunakan proteus, maka semua uji coba terhadap hardware dapat dilakukan dan dapat melakukan pengujian terhadap program kontroler nya , sehingga bisa merancang rangkaian yang akan dibuat tanpa harus menghabiskan banyak komponen hanya untuk uji coba. Setelah didapat hasil yang baik terhadap simulasi pada rangkaian maka untuk selanjutnya barulah masuk pada tahap desain pcb menggunakan software termasuk populer dalam kalangan profesional yaitu Cadsoft Eagle, pada pembuatan alat ini penulis menggunakan Eagle versi 7.0.0 , be rikut tampilan awal eagle :
49
Gambar.3.3. Block Diagram System Gambar diatas yaitu tampilan awal program eagle, yang merupakan window Control panel. Untuk langkah awal pembuatan, bisa dimulai dengan membuat sebuah project baru dengan cara sebagai berikut:
Pilih file – new – Project
Gambar.3.4. New Project
Maka akan muncul folder “New Project”, pada folder “Projects” seperti gambar dibawah:
Gambar.3.5. New Project
50
Buat nama project lalu click kanan nama project yang baru dibuat dengan memilih New – Schematic, berikut gambarnya:
Gambar.3.6. New Schematic
Lalu muncul window untuk pembuatan skematik alat yang dibuat sesuai dengan yang telah disimulasikan, berikut gambar window skematik pada eagle:
Gambar.3.7. Tampilan window desain skematik
51
Untuk bagian desain board nya dapat meng-click icon menu atas dengan nama “Generate/Switch to board”. Berikut gambar desain board pcb pada eagle:
Gambar.3.8. Tampilan window desain Papan Pcb Setelah pengenalan terhadap eagle untuk desain sirkuit dan layout papan pcb maka dirancanglah skematik alat sebagai berikut :
Gambar.3.9. Desain skematik smart home system
52
Sesuai dengan rangkaian simulasi yang telah dibuat, pada rangkaian ini juga terdiri dari bagian yaitu :
Arduino sebagai main control.
LM35 sebagai sensor suhu yang terhubung ke Pin A0 arduino, dengan nama line “S1”.
LDR sebagai sensor pengukur intensitas cahaya yang terhubung ke pin A1 arduino, dengan nama line “S2”.
Buzzer sebagai alarm, terhubung ke arduino pada pin D3 arduino dengan nama line “buzzer”.
Rangkaian driver yang terdiri dari resistor, transistor, dioda dan relay. Arduino sebagai triger untuk menggerak driver ini sehingga relay dapat bekerja dalam catuan power 12V dan dapat dikatakan relay sebagai saklar otomatis.
Setelah melakukan pembuatan desain skematik rangkaian pada eagle maka langkah selanjutnya yaitu membuat layout PCB dengan men-generate skematik ke dalam bentuk papan layout berikut gambar layout yang telah digenerate hasil eagle:
Gambar.3.10. Tampak atas dan bawah pada eagle
53
Gambar.3.11. Tampak bawah layout yang akan dicetak pada PCB
Gambar.3.12. Tata letak komponen
Hasil layout telah dibentuk dan telah siap untuk dicetak maka langkah selajutnya yaitu etching yaitu memindahkan layout hasil desain eagle pada komputer ke PCB polos. Untuk eching ini ada beberapa teknik dalam pengerjaannya, tetapi penulis hanya menggunakan teknik sablon, hal ini dikarenakan teknik ini merupakan cara termurah, bisa dijangkau, dan mendapatkan hasil yang lumayan
54
bagus, hanya saja teknik ini sangat tidak efisien pada jalur layout yang sangat tipis, dan sangat tidak efisien untuk produksi skala banyak.yang mana teknik sablon ke PCB dengan langkah sebagai berikut: a. Hasil cetakan / print disablon dengan menggunakan setrika. b. Setelah beberapa lama disetrika hasil layout tinta hitamnya akan pindah ke PCB. Dan melakukan koreksi terhadap jalur yang putus. c. Proses selanjutnya Etching PCB yaitu melarutkan tembaga yang tidak tertutup tinta toner dengan ferit cloride (FeCl3). d. Mencampurkan ferit cloride dengan air dan masukan pcb yang sudah disablon, aduk secara menyearah sampai tembaga yang tidak tertutup tinta menghilang (habis). e. Hasil Setelah Proses etching pcb dapat diihat seperti gambar dibawah ini:
Gambar.3.13. Hasil etching PCB
f. Langkah selanjutnya pengeboran PCB dengan mini drill dengan mata bor 0.8mm g. Setelah proses pengeboran maka komponen dapat dipasang dan disolder sesuai dengan gambar layout yang didesain dengan eagle.
55
3.2.2. Perancangan dan Pembuatan System Device Bagian Software Pada bagian software pada system device ini, langkah awal yang sangat umum sekali pada perancangan yaitu pembuatan flowchart yang mana sangat membantu dalam perumusan dan pembuatan software yang akan dibuat agar device dapat berjalan sesuai dengan rancangan. Berikut adalah flowchart yang merupakan main program dari s ubroutinesubroutine pada flowchart selanjutnya : Flowchart1
Gambar.3.14. Flowchart 1 main program Arduino
56
Pada flowchart 1 ini, dapat dilihat adanya banyak subroutine yang saling berelasi dengan yang lainnya. 3.3. Perancangan dan Pembuatan System Server System server merupakan system terpusat yang akan menghandle semua aksi baik terhadap Device maupun pada user yang merupak an inteface user terhadap perangkat smart home system. Ada beberapa tahap dalam membangun server smart home system yaitu sebagai berikut :
Perancangan dan pembuatan webserver.
Perancangan dan pembuatan desain website.
Perancangan dan pembuatan koneksi website dengan database.
Perancangan dan pembuatan komunikasi data antara device dengan website.
3.3.1. Perancangan dan pembuatan Webserver Web server merupakan Suatu Program Komputer yang mempunyai tanggung jawab / tugas menerima permintaan HTTP dari komputer klien, yang dikenal dengan nama web browser, dan melayani mereka dengan menyediakan respon HTTP berupa konten data, biasanya berupa halaman web yang terdiri dari dokumen HTML, dan objek yang terkait seperti gambar, dll. Web server adalah software yang menjadi tulang belakang dari world wide web (www). Web server menunggu permintaan dari client yang menggunakan browser seperti Netscape Navigator, Internet Explorer, Modzilla, dan program browser lainnya. Jika ada permintaan dari browser, maka web server akan memproses permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan kembali ke browser. Data ini mempunyai format yang standar, disebut dengan format SGML (Standar General Markup Language). Data yang berupa format ini kemudian akan ditampilkan oleh browser sesuai dengan kemampuan browser tersebut. Contohnya, bila data yang dikirim berupa gambar, browser yang hanya mampu menampilkan teks (misalnya lynx) tidak akan mampu
57
menampilkan gambar tersebut, dan jika ada akan menampilkan alternatifnya saja. Web Server Digunakan untuk melayani permintaan browser client yang meminta akses ke suatu halaman web yang berada di sisi server. Web server yang umum digunakan adalah Apache. Dalam tahap pembuatan web server maka diperlukan aplikasi APACHE, apache sangat banyak sekali ragamnya dan penggunaannya, maka penulis mengambil langkah sederhana dengan memilih software dengan
nama
WAMPServer. Aplikasi ini sangat compatible dengan windows dan mempunyai fitur yang lengkap dalam membangun webserver, yang mana selain terdapat apache, juga terdapat PHP dan MySQL. Sehingga tidak perlu lagi menginstal software Php dan MySQL secara satu persatu. Berikut gambar aplikasi wamp setelah melakukan instalasi :
Gambar.3.15. Tampilan window localhost WampServer
58
Dan berikut ini adalah php info pada wamp:
Gambar.3.16. Tampilan window info php Dan berikut adalah MySQL info pada wamp:
Gambar.3.17. Tampilan window info MySQL
59
Dan berikut adalah window phpMyAdmin pada wamp :
Gambar.3.18. Tampilan window phpMyAdmin PhpMyAdmin merupakan tool interface dalam menghandle database pada MySQL, sehingga mempermudah user dalam perancangan. Tapi sebelum melakukan perancangan terhadap data sebaiknya terlebih dahulu membut GUI dari web yang dibuat, yang artinya membuat perancangan desain form sebuah web yang dibuat. 3.3.2. Perancangan dan pembuatan Website Pada desain website yang perlu dilakukan pertama kali yaitu pembuatan blok diagram dari sebuah web tersebut agar mempermudah dalam pembuatan halaman website.
60
Berikut ini adalah Blok diagram umum dari rancangan web yang akan dibuat: Diagram alur 1:
Gambar.3.19. Diagram Alur 1 website smart home
61
Diagram alur 2:
Gambar.3.20. Diagram alur 2 website smart home dari diagram alur 1 dan diagram alur 2, dapat dibuat dijabarkan sebagai yaitu: a. Form Login Proses Autentifikasi user username & password b. Form Signup isi data Proses checking user already exist proses create user goto Login c. Login Succes Halaman Utama default Halaman Dashboard d. Menu ada beberapa menu pada web smart home system yaitu :
62
Menu Dash Board Halaman utama
Menu Report Halaman Report
Menu Devices List Halaman Devices List : yang merupakan master devices berdasarkan user
Menu Logout menu yang berfungsi jika ingin keluar dari web smart home system.
e. Halaman Dash Board berisi:
User profile
Control Device sebagai saklar online untuk lampu ruangan , lampu taman dan AC
Monitoring Suhu sebagai dispaly suhu ruangan
Monitoring LDR sebagai display kecerahan cahaya luar rumah (mendung atau cerah), dan sebagai otomatis lampu taman,
Monitoring dan Alarm Security yaitu: Monitoring berfungsi untuk menitoring status suhu, pintu dan akses masuk rumah Alarm berfungsi sebagai Alert (Pemberitahuan) saat status suhu diatas Normal yang artinya ada kebakaran,dan saat status pintu yang dilock dibobol oleh penyusup.
f.
Halaman Report berisi :
Report data monitoring
Report data control
Report data alarm
Report data harian, bulanan dan tahunan terhadap system
g. Halaman Devices List berisi:
Penambahan perangkat baru pada rumah user yang sedang login.
Pengeditan detail perangkat.
Penghapusan data perangkat tidak dipakai lagi pada rumah user yang sedang login.
Pengontrolan hak akses user .
63
a. Desain Form Login Pada form login, umumnya terdapat pengisian username dan password. Berikut hasil desain form login, menggunakan bootstrap 3.2 :
Gambar.3.21. Desain form login Pada form ini ada beberapa proses yang dilakukan yaitu :
Pengecekan field telah terisi atau belum jika salah satu belum terisi maka akan ada alert seperti gambar berikut:
Gambar.3.22. Pesan Alert field kosong
Proses autentifikasi username dan password yang diinput, jika tidak terdaftar maka akan muncul alert sebagai berikut :
64
Gambar.3.23. Pesan alert gagal login
Check box show password berfungsi agar bisa melihat password yang sedang diketik seperti gambar: Uncheck Show password
Gambar.3.24. Checkbox show password normal
Setelah checklist Show password
Gambar.3.25. Checkbox show password
Sign in untuk masuk ke halaman utama smart home system jika username dan password sesuai dengan database.
b. Desain Form Signup Form sign up berfungsi agar user baru dapat didaftarkan kedalam database, berikut desain tampilan form signup:
65
Gambar.3.26. Desain form signup Pada form ini ada beberapa proses yang dilakukan yaitu :
Pengecekan field yang belum terisi, jika ada yang belum terisi maka akan ada alert sebagai berikut:
Gambar.3.27. Alert pengecekan field yang kosong
66
Pengecekan validasi email, seperti gambar berikut :
Gambar.3.28. Alert pengecekan email
Pengecekan validasi password harus terisi minimal 8 karakter, seperti gambar berikut:
Gambar.3.29. Alert pengecekan valid password
67
Pengecekan validasi confirm password , jika confirm password tidak sama dengan password yang diinputkan pertama maka akan muncul alert sebagai berikut :
Gambar.3.30. Alert pengecekan valid confirm password
Pengecekan validasi kontak :
Gambar.3.31. Alert pengecekan kontak
68
Pengecekan username already exist :
Gambar.3.32. Alert pengecekan username sudah ada
Jika kasus ini terjadi maka, user harus mengubah nama username dengan username yang lain, lalu tekan next, sehingga akan menamp ilkan halaman login.
c. Desain Form / Halaman Dash Board Form dashboard merupakan halaman utama dari web smart home system, yang mana terdiri dari beberapa blok yang telah dijabarkan sebelum, sehingga dari perancangan tersebut dibuatlah desain dari halaman dash board sebagai berikut :
Gambar.3.33. Tampilan Dash Board Saat Ada Kebakaran
69
Gambar.3.34. Tampilan Dash Board Saat Keadaan Normal
Pada halaman dashboard ini terdapat beberapa blok yang mempunyai fungsi sebagai monitor dan control, berikut fungsi – fungsi dari tiap blok : 1. Block User Profile merupakan blok yang menampilkan informasi tentang user yang sedang login, berikut tampilan halaman Block User Profile :
Gambar.3.35. Tampilan Block User Profile
2. Block Switches Control merupakan blok yang digunakan untuk melakukan control “ON”/”OFF” terhadap perangkat AC = Fan/Air Conditioner,L2 = Lampu Ruangan, L1 = Lampu Taman, berikut tampilan halaman Block Switches Control :
70
Gambar.3.36. Tampilan Block Switch Control
3. Block Mode Control merupakan pemiliha mode terhadap switches control yang mana jika mode auto merupakan control automatis dari system terhadap data-data informasi yang diolah sedangkan manual merupakan control manual yang dincotrol penuh oleh user, berikut tampilan halamannya :
Gambar.3.37. Tampilan Block Mode Control
71
4. Block Intesitas cahaya merupakan tampilan monitoring cuaca luar dari rumah yang berdasarkan kecerahan cahaya :
Gambar.3.38. Tampilan Block Intensitas Cahaya
5. Block status pintu merupakan block yang akan menampilkan kondisi pintu rumah pada web, baik itu pintu pada kondisi “BUKA” atau “TUTUP”.
Gambar.3.39. Tampilan Status Pintu
6. Block status Away or At Home merupakan block yang berguna sebagai pendeteksi penyusup yang masuk, yang mana jika status “Away” maka pintu akan dimonitoring sehingga jika ada yang membuka pintu, pada status “Away” maka akan muncul pesan penyusup dan alarm akan berbunyi, tapi jika status “Home” maka Pintu akan dinonaktifkan monitoringnya.
72
Berikut tampilan dari block status Away or At Home :
Gambar.3.40. Status Pesan saat “At Home” dan pintu dibuka “OPEN”
Gambar.3.41. Status Pesan saat “Away” dan pintu dibuka “OPEN”
7. Block Status Connection Devices merupakan monitor keamanan pada rumah terhadap penyusup dan terhadap bencana kebakaran dan sejenisnya, terdapat 2 status yaitu Secure dan Emergency.
Gambar.3.42. Tampilan Status Connection Devices
8. Block Alarm merupakan block yang menginformasikan keadaan darurat, dengan 4 status yaitu : a. Normaly : apabila keadaan rumah aman terkendali,
73
Gambar.3.43. Tampilan Alarm b. Kebakaran : apabila suhu ruangan melebihi 35° yang berstatus “very hot”.
Gambar.3.44. Tampilan Alarm saat Kebakaran c. Penyusup : apabila pintu dalam keadaan dibuka tanpa menekan tombol At Home pada web, sehingga dianggap ada penyusup yang tidak memiliki akses masuk.
Gambar.3.45. Tampilan Alarm saat ada Penyusup 9. Block Temperature Rumah merupakan block yang menampilkan kondisi suhu pada rumah, dan memiliki beberapa status:
74
Gambar.3.46. Tampilan Block Temperature sesuai kondisi suhu 10. Block Schedule counter AC
Gambar.3.47. Tampilan Block Schedule Counter AC
11. Block Schedule counter AC
Gambar.3.48. Tampilan Block Schedule Counter Lampu Ruangan
3.4. Perancangan System Database Pada perancangan System database dilakukan perancangan system yang dapat terintergrasi dengan perangkat yaitu antara arduino, webserver dan database.
75
Berikut data diagram database smart home system :
Gambar.3.49. Data Diagram Database System Pada
pembuatan
database
MySQL,
dapat
menggunakan
Tool
untuk
mempermudah pengerjaan yaitu menggunakan MySQL WorkBench, berikut tampilan awalnya :
76
Gambar.3.50. Tampilan Awal MySQL WorkBench Untuk membuat database sesuai dengan System yang akan dibuat yaitu dengan cara berikut :
Settingan connection sebagai berikut :
Gambar.3.51. Setting Connection
Test koneksi dengan cara click “Test Connection”
untuk men- test
koneksi dengan mysql, jika koneksi sukses, tekan “OK”.
Membuat database baru dengan mengclick kanan connection yang telah dibuat tadi seperti gambar berikut :
77
Gambar.3.52. Create New Database
Maka akan muncul window “Create Schema” dan Isi field sebagai berikut :
Gambar.3.53. Enter Database name
Lalu tekan “Apply”.
Maka akan muncul window seperti ini:
Gambar.3.54. Window buat database baru
78
Lalu tekan “Apply” .
Setelah membuat database baru maka buat table dengan cara click kanan menu tree “New_database - Tables”,lalu pilih “Create Table”, berikut gambarnya :
Gambar.3.55. Membuat Tabel baru Untuk membuat system database smarthome system maka tabel-tabel yang perlu dipersiapkan sebagai berikut : a. Tabel “user_login”
Gambar.3.56. Tabel user_login
79
b. Tabel “detail_user”
Gambar.3.57. Tabel detail_user c. Table “master_devices”
Gambar.3.58. Tabel master_devices d. Table “master_act_update”
Gambar.3.59. Table master_act_update e. Table “auto_manual_mode”
Gambar.3.60. Table auto_manual_mode f.
Table “master_scheduling”
Gambar.3.61. Table master_scheduling
80
g. Table “temp_connect”
Gambar.3.62. Table temp_connect
