24
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli. Copyright and reuse: This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP 

 

 

 

 

 

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Page 2: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

25

BAB III

RANCANGAN SISTEM

3.1 Rancangan Rak

Pada Gambar 3.1 merupakan diagram blok keseluruhan rancangan alat, dimana

rak sepatu pintar terhubung dengan sebuah access point yang mengakses database

melalui web server dan menampilkan hasil pada sebuah web interface.

Gambar 3.1 Diagram blok rancangan keseluruhan

3.1.1 Spesifikasi Rak

Spesifikasi rak sepatu pintar adalah sebagai berikut.

a. Mendeteksi eksistensi masing-masing pasang sepatu menggunakan

Light-Dependent Resistor (LDR) pada tiap rak.

b. Mengukur kondisi suhu dan kelembaban masing-masing rak.

c. Membuang kelembaban pada sepatu yang telah digunakan dengan

menggunakan sebuah fan pada masing–masing rak.

d. Wi-Fi sebagai media komunkasi.

e. Pengiriman data menggunakan HTTP request dengan metode POST

melalui protokol TCP.

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 3: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

26

f. Antarmuka web sederhana yang berhubungan langsung dengan

pengguna sebagai sumber informasi kondisi rak.

g. Fan aktif selama 15 menit sejak peletakan dan tidak akan aktif selama

tidak ada sepatu.

h. Counter pemakaian sepatu dengan membandingkan kondisi LDR.

3.1.2 Deskripsi Rancangan Rak

Rak terbagi menjadi 4 bagian, dimana masing-masing rak dapat

menampung sepasang sepatu dan memiliki sebuah sensor DHT11, LDR,

limit switch dan exhaust fan seperti terlihar di dalam Gambar 3.2. Rak

merupakan rak tertutup dengan pintu tembus pandang untuk LDR menerima

cahaya.

Gambar 3.2 Rancangan penempatan sensor

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 4: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

27

3.2 Perancangan Hardware Rak

Pada Gambar 3.3 merupakan diagram blok rancangan hardware yang terdapat

pada rak sepatu pintar.

Gambar 3.3 Diagram blok hardware

Komponen-komponen yang digunakan untuk membangun sebuah rak sepatu

pintar adalah sebagai berikut.

a. Mikrokontroler Arduino Uno

b. Modul Wi-Fi ESP8266-01

c. Modul Real Time Clock (RTC) DS3231

d. Sensor suhu dan kelembaban DHT11

e. Fan 8CM 12 Volt

f. Limit switch

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 5: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

28

g. Rangkaian Photoresistor dengan menggunakan komponen sebagai

berikut.

LDR 5mm

Resistor 10K Ohm

h. Rangkaian transistor sebagai switch untuk memberikan input untuk fan

12 Volt dengan komponen sebagai berikut.

Transitor 2N2222 NPN

Resistor 1K Ohm

i. Rangkaian regulator tegangan 3.3 Volt dengan komponen sebagai

berikut.

Regulator LM317

Resistor 390 Ohm & 220 Ohm

Kapasitor 220uF & 10uF

j. 12 Volt 2A AC Adapter untuk power supply.

Pada Gambar 3.8, dapat dilihat skematik keseluruhan dari rak sepatu pintar

yang menggunakan Wi-Fi untuk berkomunikasi. Modul RTC DS3232 digunakan

sebagai patokan waktu yang lebih akurat untuk melakukan pengiriman data dan

proses pengurangan kelembaban. Modul RTC terhubung dengan mikrokontroler

pada port analog yang bertugas sebagai SDA dan SCL serta menggunakan supply

tegangan 5 Volt yang berasal dari keluaran mikrokontroler. Untuk melakukan

komunikasi, ESP8266 digunakan untuk memenuhi spesifikasi yang diperlukan

untuk mengirimkan data menuju database pada web server menggunakan

komunikasi WiFi. ESP8266 langsung terhubung menuju mikrokontroler melalui

pin 0 dan 1 digital yang berperan sebagai RX dan TX pada mikrokontroler. Pin RX

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 6: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

29

pada ESP8266 terhubung dengan TX pada mikrokontroler dan sebaliknya, TX pada

ESP8266 terhubung dengan RX pada mikrokontroler. Rangkaian regulator yang

menggunakan regulator LM317 terhubung langsung seperti yang ditunjukan pada

Gambar 3.4 sebagai sumber daya sebesar 3.3 Volt dengan ESP8266 selama

pengoperasiannya. Penggunaan rangkaian regulator 3.3 Volt digunakan juga untuk

menghindari kerusakan akibat penggunaan tegangan yang melebihi spesifikasi

yang diperlukan.

Gambar 3.4 Diagram skematik ESP8266 menggunakan regulator LM317

Pada Gambar 3.5, mikrokontroller Arduino Uno bertugas menerima input

dari DHT11 yang terhubung secara langsung melalui pin digital Arduino. 4 buah

DHT11 dihubungkan menggunakan pull-up resistor yang terintegrasi pada digital

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 7: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

30

pin Arduino. DHT11 menggunakan komunikasi serial Single-Wire Two-Way yang

cara kerjanya dapat dilihat pada Bab II mengenai DHT11. DHT11 menggunakan

tegangan 5 Volt yang dikeluarkan oleh regulator mikrokontroler.

Gambar 3.5 Diagram skematik DHT11 dengan mikrokontroler

Untuk mengoperasikan fan 12 Volt tersebut, arus yang dan tegangan yang

berasal dari digital pin pada mikrokontroler pada Arduino Uno sangat kecil dan

tidak mampu untuk menyalakan sebuah fan. Transistor NPN 2N2222 digunakan

sebagai switch untuk mengaktifkan masing-masing fan dengan menggunakan

output mikrokontroler seperti telihat pada Gambar 3.6. Output yang terhubung

dengan base transistor yang masing-masing dilengkapi dengan resistor sebersar 1K

Ohm untuk membatasi arus yang masuk menuju base transistor. Tegangan sebesar

12 Volt untuk dapat menyalakan fan digunakan langsung dari adapter 12 Volt yang

juga digunakan untuk menghidupkan mikrokontroler dan perangkat lainnya.

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 8: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

31

Gambar 3.6 Diagram skematik rangkaian transistor sebagai switch untuk

mengaktifkan fan

Pada Gambar 3.7, LDR dan limit switch masing-masing dihubungkan pada

mikrokontroler Arduino UNO dengan menggunakan analog pin dan digital pin

yang tersedia. LDR menggunakan tegangan sebesar 5 Volt yang berasal dari

regulator mikrokontroler resistor pada LDR sebesar 10K Ohm dihubungkan

langsung menuju GND pin untuk mendapatkan nilai yang di ingikan. Limit switch

yang digunakan menggunakan pull-up resistor onboard pada mikrokontroler untuk

mendapatkan bacaan yang tepat. Limit switch digunakan guna mendapatkan nilai

kelembaban referensi sebagai pembanding untuk mengurangi kelembaban.

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 9: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

32

Gambar 3.7 Diagram skematik LDR dan limit switch

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 10: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

33

Gambar 3.8 Diagram skematik keseluruhan rak sepatu pintar

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 11: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

34

3.3 Protokol Komunikasi

Protokol TCP/IP digunakan untuk berkomunikasi antar perangkat dengan web

server. ESP8266 berkerja dalam station mode, dimana perangkat akan terhubung

sebagai client dengan access point yang tersedia. Koneksi TCP yang dibangun

berupa single connection.

AT Command digunakan untuk membuka koneksi TCP dan mengirimkan

HTTP request. “AT+CIPSTART=[type],[address],[port]” merupakan format

command yang digunakan untuk membuat single TCP connection. ESP8266

memberikan response “OK” menandakan koneksi TCP telah dibuat. Pada Tabel

3.1, merupakan struktur command “AT+CIPSTART” untuk membuat koneksi

TCP.

Tabel 3.1 Struktur command AT+CIPSTART

Item Keterangan

type TCP/UDP Jenis protokol yang

digunakan

address [0-255].[0-255].[0-255].[0-255] IP address/domain dari

tujuan

port 1-65535 Port yang digunakan

Untuk melakukan pengiriman data setelah koneksi dibuat,

“AT+CIPSEND=[length]” merupakan format command yang digunakan untuk

mengirimkan data. Pada Tabel 3.2, merupakan struktur command

“AT+CIPSTART” untuk mengirimkan data. Setelah command dijalankan, maka

simbol “>” akan muncul dan modul ESP8266 menunggu hingga jumlah karakter

yang diketikan sesuai dengan panjang data yang telah dimasukan. Setelah

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 12: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

35

jumlahnya terpenuhi, modul membererikan respon berupa "SEND OK" yang

menandakan pesan terkirim , HTTP response code didapatkan dan koneksi TCP

terputus.

Tabel 3.2 Struktur command AT+CIPSEND

Item Keterangan

length Max. 2048 byte Panjang data yang

dikirimkan

Pada Gambar 3.9 merupakan keseluruhan proses pengiriman data

menggunakan protokol TCP menggunakan AT Command.

Gambar 3.9 Proses TCP menggunakan AT Command

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 13: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

36

3.4 Perancangan Software Rak

Program untuk rak sepatu pintar dibuat dengan menggunakan bahasa C dengan

komunikasi serial menggunakan baud rate sebesar 9600. Untuk menjalankan

DHT11 digunakan library DHTLib yang bisa didapatkan di web Arduino

Playground (http://playground.arduino.cc/Main/DHTLib) dan library RTC

DS3232.

Pada Gambar 3.13, merupakan flowchart program utama yang dimulai dengan

inisialisasi modul ESP8266 yang ditunjukan pada Gambar 3.10. Inisialisasi dimulai

dengan melakukan reset modul yang kemudian mengirimkan command berupa

“AT” mengetes ESP8266. Jika respon berupa “OK” didapatkan, fungsi

connectWiFi() berjalan untuk melakukan join kepada sebuah access point yang

telah disebutkan berupa Service set identifier (SSID) dan password pada program.

Setelah terhubung, maka ESP8266 akan secara otomatis mendapatkan IP Address.

Gambar 3.10 Flowchart inisialisasi ESP8266

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 14: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

37

Selanjutnya program utama akan selalu berjalan dan melakukan pembacaan

terhadap limit switch. Apabila limit switch dalam keadaan LOW atau pintu terbuka,

maka program akan membaca nilai kelembaban yang menjadi referensi yang

menjadi batas pengurangan kelembaban tersebut. Setelah sepatu dimasukan dan

LDR membaca tidak ada cahaya yang masuk akibat tertutup oleh sepatu, program

akan memberikan nilai 1 pada variabel presence masing-masing rak, menyalakan

fan dan mengaktifkan alarm RTC yang lainnya sebagai time-out timer untuk

mematikan fan.

Fitur penghitungan sepatu akan berjalan saat LDR mendapati bahwa sepatu

telah diambil dengan membaca nilai cahaya. Apabila ditemukan bahwa sepatu telah

tidak terdapat di dalam rak dan diketahui sebelumnya sepatu terdapat dalam rak,

maka nilai counter akan bertambah.

Saat waktu alarm yang ditentukan telah dicapai, maka proses alarm akan

berjalan seperti yang ditunjukan pada Gambar 3.11. Proses akan membaca seluruh

nilai suhu dan kelembaban masing-masing rak pada waktu tersebut dan melakukan

pengiriman dengan memanggil fungsi sendData() yang dapat dilihat pada Gambar

3.12 disertai reset nilai counter yang akan digunakan kembali setelah pengiriman

selesai dilakukan. Setelah proses update selesai, program akan mengecek kondisi

setiap rak yang terdapat sepatu. Apabila nilai kelembaban yang dibaca lebih kecil

atau sama dengan kelembaban referensi saat sepatu diletakan, maka fan akan

berhenti berkerja dan sepatu dapat digunakan kembali. Program keseluruhan dapat

dibaca selengkapnya pada LAMPIRAN 1.

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 15: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

38

Gambar 3.11 Flowchart alarm

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 16: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

39

Gambar 3.12 Flowchart sendData()

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 17: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

40

Gambar 3.13 Flowchart utama rak sepatu pintar

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 18: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

41

3.5 Perancangan Database

Database yang digunakan adalah MySQL yang disimpan pada web server.

Gambar 3.14 merupakan Entitiy Relationship Diagaram (ERD) dari database,

dengan sruktur pada setiap tabel sebagai berikut:

1. Tabel device

Tabel device (Tabel 3.3) berisi device_name dan device_password yang

digunakan sebagai pembanding sebelum insert data pada database

dilakukan bahwa data yang dikirimkan berasal dari device yang

terdaftar. Atribut device_name memiliki isi yang unik dan merupakan

primary key pada tabel tersebut. Setiap device_pasasword tersimpan

sebagai hash dengan menggunakan SHA2-256.

Tabel 3.3 Struktur tabel device

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 19: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

42

2. Tabel log

Tabel log (Tabel 3.4) memiliki atribut log_id yang melakukan auto

increment setiap melakukan insert data dan merupakan primary key

pada tabel ini. Atribut device_name merupakan foreign key yang

menunjuk atribut device_name pada tabel device. Atribut

log_timestamp mencatat secara otomatis current time saat melakukan

insert data. Atribut humidity_n, temp_n, dan presence_n berisi data

kelembaban, suhu serta keberadaan yang dikirimkan oleh

mikrokontroler.

Tabel 3.4 Struktur tabel log

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 20: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

43

3. Tabel Counter

Tabel counter (Tabel 3.5) memiliki atribut timestamp yang

memberikan waktu update terakhir untuk setiap device. Atribut rackn

merupakan jumlah penggunaan sepatu yang berupa angka. Masing-

masing row mewakili sebuah device dengan memiliki foreign key pada

atribut device_name.

Tabel 3.5 Struktur tabel counter

Berdasarkan ERD pada Gambar 3.14, tabel device dapat memiliki lebih

dari 1 atau lebih child pada setiap device pada tabel log, dan setiap device pada

table device hanya memiliki 1 buah child pada tabel counter.

Gambar 3.14 ERD database

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 21: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

44

3.6 Perancangan Web Server

Pada Gambar 3.15, merupakan diagram blok web server dimana file

“update.php” mengirimkan insert dan update pada database dan “index.php”

mengambil data dari database.

Gambar 3.15 Diagram blok web server

Pada web server, file “update.php” digunakan untuk menerima dan melakukan

insert data pada database. HTTP request menggunakan metode POST digunakan

untuk mengirimkan data yang dikirimkan oleh device. Device mengirimkan berupa

query string yang berisi data sensor mikrokontroler untuk melakukan insert data

pada database.

Query string yang digunakan pada POST request sama seperti GET request

yang menggunakan pasangan antara name dan value.

Dengan pasangan string yang dikirimkan berupa name dan value, $_POST

yang merupakan sebuah global variable digunakan untuk menerima dan

name1=value1&name2=value2?name3=value3

$var1 = $_POST['name1'];

$var2 = $_POST['name2'];

$var3 = $_POST['name3'];

$var4 = $_POST['name4'];

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 22: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

45

menampung data yang dikirimkan melalui POST request oleh mikrokontroler

kedalam sebuah array.

Berikut contoh HTTP request header message yang harus diperhatikan pada

POST request yang dikirimkan oleh mikrokontroler. Content-type yang digunakan

adalah “application/x-www-form-urlencoded” untuk mengirimkan data berupa web

form sebagai format encoding name value yang digunakan. Host dibutuhkan pada

HTTP/1.1.

POST [File_path] HTTP/1.1

HOST: [Host_address]

accept: application/json

accept-encoding: gzip, deflate

accept-language: en-US,en;q=0.8

content-type: application/x-www-form-urlencoded

user-agent: Mozilla/5.0 (Windows NT 10.0; WOW64) App

leWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704

.103 Safari/537.36

content-length: 228

name=value&name=value

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 23: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

46

3.7 Perancangan Web Interface

Gambar 3.16 Mock up antarmuka halaman web utama

Pada Gambar 3.16, merupakan mock up dari desain web interface sederhana

menggunakan php sebagai bahasa pemogramannya. Halaman web terbagi menjadi

4 buah bagian, yaitu header, navigation, main, dan footer. Pada bagian main

terdapat tabel yang masing-masing cell mewakili rak yang dimiliki oleh device yang

ditandai dengan <Shoe_n>.

Pada bagian header pada halaman web berisi <Title> yang merupakan judul

dari halaman web dari nama alat dan dapat digunakan sebagai navigasi menuju

halaman utama yang menampilakan device pertama. Bagian navigation memiliki

beberapa <Link> yang digunakan untuk melakukan perpindah halaman web untuk

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016

Page 24: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1322/4/BAB III.pdf25 BAB III RANCANGAN SISTEM. 3.1 Rancangan Rak . Pada Gambar 3.1 merupakan diagram blok keseluruhan

47

dapat melihat kondisi pada device lainnya. Footer pada halaman web berisi

<Credit> yang merupakan informasi pembuat dan kontak dari pembuat.

Gambar 3.17 Mock up antarmuka halaman web log

Gambar 3.17 merupakan mock up halaman web yang menampilkan log dari

hasil report perangkat yang diambil dari database dan ditampilkan secara

descending menurut timestamp log tersebut.

Setiap halaman antarmuka memiliki fitur yang dapat melakukan refresh

halaman web secara otomatis setiap 60 detik berlalu atau 1 menit sehingga aktivitas

untuk melakukan refresh secara manual dapat dikurangi.

Perancangan rak..., Richard Willy Putra, FTI UMN, 2016