BAB III

PERANCANGAN SISTEM
3.1. Langkah-langkah Perancangan
Langkah-langkah dalam perancangan ini meliputi persiapan rangkaian
elektronika LED matriks dan instalasi perangkat keras maupun lunak yaitu :
1. Desain serta pemasangan komponen LED matriks dan IC MAX7219.
2. Instalasi Raspberry Pi beserta aplikasi pendukung lainnya sehingga perangkat
ini dapat berfungsi sebagai sebuah web server.
3. Perancangan antarmuka website
3.2. Perancangan Perangkat Keras
Penampil informasi yang dirancang terdiri dari 8x64 LED matriks, dengan
driver ic MAX7219 8 buah, dimana setiap 8x8 LED matriks akan menggunakan
satu buah driver IC MAX7219. Mikrokontroler Arduino Uno dihubungkan ke
sebuah perangkat komputer Raspberry Pi yang berfungsi sebagai server.
Pengendali utama dari sistem ini adalah sebuah papan mikrokontroler
Arduino Uno berbasis ATMega 328 dengan menggunakan bahasa pemrograman
C++. Cara kerja dari sistem ini adalah, client melakukan pengendalian melalui
web browser yang berfungsi sebagai antarmuka untuk memberi input informasi
yang akan ditampilkan pada LED matriks display. Pemrograman website ini
menggunakan bahasa pemrograman PHP.
PHP merupakan bahasa pemrograman yang berjalan pada server side,
dimana semua eksekusi program akan berjalan di server. Bahasa pemrograman
PHP ini sendiri digunakan untuk melakukan komunikasi serial antara server dan
mikrokontroler. Data informasi yang akan ditampilkan pada LED matriks
disimpan pada database MySql di server. Mikrokontroler akan menunggu
hubungan serial dari server sebelum menampilkan karakter pada LED matriks
display. Ketika komunikasi serial sudah terjadi antara server dan mikrokontroler,
server akan mengirimkan urutan data kepada mikrokontroler dan data yang
diterima akan langsung ditampilkan paada LED matriks display.

22

23

Sistem akan menggunakan sebuah catu daya dengan tegangan keluaran

5 VDC. Diagram blok hubungan antara komponen dalam sistem dapat dilihat pada
Gambar 3.1

Gambar 3.1 Diagram blok sistem

Client dan server pada perancangan ini terhubung melalui jaringan LAN
atau internet. Diagram blok hubungan antara client dan server dapat dilihat pada
Gambar 3.2.

24

Client

Client
Server
Client

Client

Gambar 3.2 Hubungan antara client dan server

Rancangan fisik dari LED matriks display dapat dilihat pada Gambar 3.3.

Gambar 3.3 Rancangan LED matriks display.

Rancangan perangkat keras di atas adalah bentuk fisik dari sistem yang akan
dirancang. Dalam hal ini, LED matriks, server dan perangkat mikrokontroler
akan dikemas ke dalam sebuah bentuk yang kompak dan ringkas sehingga mudah
untuk instalasinya.

25

3.2.1. Perancangan LED Matriks

Pada perancangan ini digunakan delapan buah LED matriks berukuran 8x8.
Pada setiap masing-masing LED matriks 8x8 akan di-drive oleh sebuah IC
MAX7219. Total jumlah LED yang digunakan untuk menyusun 8x8 LED matriks
sebanyak 8 buah adalah 512 LED. Pada perancangan ini menggunakan LED
berwarna merah dengan ukuran 5mm.

Gambar 3.4 LED 5mm

Dengan menggunakan LED berukuran 5 mm maka akan dihasilkan sebuah
LED matriks 8x8 berukuran kurang lebih 6 cm. Rangkaian dan hasil perancangan
LED matriks 8x8 dapat dilihat pada Gambar 3.5.

Gambar 3.5 Susunan LED berbentuk matriks 8x8

26

3.2.2. Rangkaian IC MAX7219

Untuk pengendalian LED matriks 8x8 akan digunakan IC MAX7219
sebagai driver. Rangkaian IC MAX7219 dapat dilihat pada Gambar 3.6.

Gambar 3.6 Gambar rangkaian LED matriks dan IC MAX7219

Pengaturan arus pada IC MAX7219 ditentukan oleh R1. Dimana nilai
tahanannya dapat ditentukan dengan menggunakan Tabel 3.1
Tabel 3.1 Tabel nilai tahanan R1 berdasarkan datasheet MAX7219
V LED (V)
I seg(mA)
40
30
20
10

1,5

2,5

3,5

12.2 K
17.8 K
29.8 K
66.7 K

11.8 K
17.1 K
28.0 K
63.7 K

11,0 K
15.8 K
25.9 K
59.3 K

10.6 K
15.0 K
24.5 K
55.4 K

9.69 K
14.0 K
22.6 K
51.2 K

Karena pada perancangan ini yang digunakan adalah LED berwana merah,
dimana tegangan untuk LED berwarna merah diketahui adalah 2.2 V dengan arus
20 mA.

27

Dengan mengetahui nilai-nilai tersebut, maka dapat ditentukan nilai R1

adalah diantara 25 K -28 K. Untuk mempermudah perancangan maka akan
digunakan nilai resistor yang tersedia di pasaran yakni 27 K. Hasil perancangan
rangkaian IC MAX7219 dapat dilihat pada Gambar 3.7 .

Gambar 3.7 Hasil perancangan rangkaian IC MAX7219

3.2.3. Instalasi Raspberry Pi

Perancangan pengendalian LED matriks ini akan menggunakan sebuah
personal komputer Raspberry Pi. Beberapa perangkat pendukung yang diperlukan
untuk keperluan instalasi ini adalah :
1. Kartu memori untuk penyimpanan data.
2. Kabel RCA atau HDMI untuk menghubungkan perangkat Raspberry Pi ke
monitor atau layar TV.
3. USB Keyobard.
4. Mouse PC.
5. Catu daya dengan keluaran 5V DC.
Untuk keperluan instalasi sistem operasi ini diperlukan sebuah kartu memori
dengan minimimal kapasitas penyimpanan 4GB. Pada perancangan ini penulis
menggunakan sebuah kartu memori micro SDHC (Secure Digital High Capacity)
berukuran 16GB yang dapat dilihat pada Gambar 3.8.

28

Gambar 3.8 Kartu memori mirco SDHC

Sebelum dapat digunakan, kartu memori ini harus diformat terlebih dahulu
dengan format FAT32 dengan aplikasi SDFormatter. Tampilan aplikasi dalam
menjalankan operasi formatting kartu memori dapat dilihat pada Gambar 3.9.

Gambar 3.9 Tampilan proses format karu memori

Langkah selanjutnya adalah file image sistem operasi dipindahkan atau
dikopi ke dalam kartu memori kemudian dipasang pada slot memori pada
perangkat komputer Raspberry Pi. Persiapan berikutnya adalah menghubungkan
Raspberry Pi dengan monitor dengan menggunakan kabel HDMI, serta
pemasangan USB keyboard, mouse dan catu daya.

29

Gambar 3.10 Raspberry Pi beserta perangkat pendukung instalasi

Setelah semua perangkat pendukung sudah terpasang maka Raspberry Pi
siap untuk dinyalakan. Tampilan booting awal instalasi Raspberry Pi dapat dilihat
pada Gambar 3.11.

Gambar 3.11 Tampilan pilihan halaman Instalasi Sistem Operasi Raspberry Pi

Tampilan start up dan halaman command line interface pada Raspberry Pi dapat
dilihat pada Gambar 3.12.

30

Gambar 3.12 Start up Raspberry Pi

Selain menggunakan Command Line Interface, Raspberry Pi juga menyediakan
sebuah desktop interface yang dapat dilihat pada Gambar 3.13.

Gambar 3.13 Tampilan Desktop Raspberry Pi

3.2.4. Instalasi Aplikasi Web Server dan Arduino IDE

31

Aplikasi-aplikasi ini di perlukan agar Raspberry Pi dapat berfungsi sebagai

web server dan mikrokontroler Arduino Uno dapat berjalan dengan baik. Berikut
ini adalah daftar aplikasi tersebut :.
1.
2.
3.
4.
5.

Aplikasi Arduino IDE

Apache Server
PHP 5
Database Mysql
Aplikasi serial monitor Minicom
Instalasi

aplikasi-aplikasi

pendukung

tersebut

dilakukan

dengan

menjalankan perintah-perintah tertentu pada TX Terminal atau Command Line

Interface pada Raspbery PI. Perintah untuk menjalankan instalasi Arduino IDE
adalah :
$sudo apt-get install arduino
Perintah ini akan menjalankan instalasi Arduino IDE secara online. Semua
paket instalasi akan diunduh dan diinstal secara otomatis pada perangkat
Raspberry Pi. Paket instalasi Apache dan PHP diperlukan agar Raspberry Pi
dapat digunakan sebagai web server, sehingga dapat menjalankan skrip PHP.
Mysql diperlukan sebagai database website yang akan penulis rancang.
Instalasi paket-paket tesebut di atas menggunakan perintah sebagai berikut :
$sudo apt-get install apache2 apache2-doc apache2-utils
$sudo apt-get install libapache2-mod-php5 php5 php-pear php5-xchace
$sudo apt-get install php5-mysql
$sudo apt-get install phpmyadmin
Minicom diperlukan sebagai serial terminal yang akan menghubungkan
antara PHP dan papan Arduino Uno. Perintah instalasi Minicom adalah sebagai
berikut :
$sudo apt-get install minicom

32

3.3. Perancangan Perangkat Lunak

Pemrograman perangkat lunak meliputi desain algoritma sistem, penulisan
dan pengisian program pada mikrokontroler. Diagram alir perancangan perangkat
lunak pada mikrokontroler dapat dilihat pada Gambar 3.14.

33

Mulai

Mulai
Serial

Baca Data Serial

Tidak

Stop

Ada Data ?

Ya
Proses Data
Serial

Tampilakan
Tulisan

Gambar 3.14 Diagram Alir Pembacaan

Pada sistem di atas, pembacaan serial diperoleh dari hubungan komunikasi
serial antara server dan mikrokontroler, data-data yang akan ditampilkan akan
dikirim oleh server dan dikirim kepada mikrokontroler, data yang diterima dari
server akan ditampilkan pada penampil LED matriks oleh mikrokontroler.
Pemrograman dasar mikrokontroler untuk pembentukan atau menampilkan
tulisan pada LED matriks yaitu dengan mendeklarasikan variabel yang mewakili
karakter ASCII kedalam bentuk matriks, dimana setiap variabel mewakili satu
karakter ASCII, seperti pada potongan kode pemrograman di bawah ini :

34

4,8, B1111110, B0010001, B0010001, B1111110, B0000000

Maksud dari kode di atas adalah, teks akan dibentuk berupa matriks 4x8,
sesuai urutan yang telah dideklarasikan, sehingga akan membentuk sebuah
karakter sebagai berikut.
Tabel 3.2 Matriks yang dihasilkan oleh pemrograman.

Dari tabel di atas

yang telah di deklarasikan
karakter

A.

lainnya

digunakan

Proses
cara

0
1
1
1
1
1
1
1

1
0
0
0
0
1
0
0

1
0
0
0
0
1
0
0

0
1
1
1
1
1
1
1

0
0
0
0
0
0
0
0

dapat diamati bahwa kode

adalah untuk membentuk
pembentukan

karakter

yang sama, sehingga akan

terbentuk sebuah susunan array yang terdiri dari karakter-karakter ASCII dalam
sebuah bentuk matriks.
Proses selanjutnya untuk menampilkan tulisan pada LED matriks adalah,
mikrokontroler akan membaca data serial, dan memanggil masing-masing matriks
yang mewakili karakter yang terbaca dari data serial, untuk selanjutnya di
tampilkan pada LED matriks.
3.4. Perancangan Website
Dalam melakukan perancangan aplikasi, terdapat tahapan-tahapan yang
dilakukan dalam proses perancangan yaitu:
1. Perancangan Basis Data
Tahapan perancangan basis data terdiri dari perancangan Entity Relationship
Diagram (ERD), spesifikasi tabel basis data dan diagram hubungan antar
tabel.

2. Perancangan Diagram Arus Data

Tahapan perancangan Diagram Arus Data terdiri dari perancangan diagram
konteks, diagram overview dan diagram rinci.
3. Perancangan Antarmuka Website

35

Tahapan perancangan antarmuka aplikasi yaitu perancangan antarmuka untuk

pengunjung dan administrator
3.4.1. Perancangan Basis Data
Spesifikasi basis data aplikasi website manajeman LED matriks dapat dilihat
pada uraian berikut ini :
1. Spesifikasi tabel admin
Nama file

: admin

Keterangan

: tabel basis data admin

Tabel 3.3 Tabel basis data admin

Field

Jenis

Koson

Keterangan

Id
Usernam

Int(11)
Varchar (18)

g
Tidak
Tidak

Auto increment, Primary key

Username admin

e
Password

Varchar(18)

Tidak

Password admin

2. Spesifikasi tabel pesan

Nama file
: pesan
Keterangan
: tabel basis data pesan
Tabel 3.4 Tabel basis data pesan
Field
Id
Pesan
Aktif

Jenis
Int(11)
Text
Enum(1,2)

Kosong
Tidak
Tidak
Tidak

Keterangan
Auto increment, Primary key
Teks pesan
Status pesan aktif, defatult 2 (tidak aktif)

3. Spesifikasi tabel jadwal

Nama file
: jadwal
Keterangan
: tabel basis data jadwal pesan
Tabel 3.4 Tabel basis data jadwal
Field
Id
Pesan
Aktif
Job

Jenis
Int(11)
Int(11)
Enum(1,2)
Varchar(50)

Kosong
Tidak
Tidak
Tidak
Tidak

Keterangan
Auto increment, Primary key
Id pesan
Status pesan aktif, default 2 (tidak aktif)
Kode perintah cronjob

3.4.2. Perancangan Diagram Arus Data

36

Diagram arus data merupakan gambaran umum mengenai prosedur aplikasi

yang akan dirancang, Diagram arus data ini merupakan model dari aplikasi
website manajemen sistem penampil informasi ini. Untuk menggambarkan
aplikasi proses yang lebih kecil. Pada diagram ini akan ditampilkan kegiatan
aplikasi lengkap dengan komponen-komponen yang menunjukkan secara tegas
file yang dipakai, unsur sumber atau tujuan data, serta arus data dari suatu proses
ke proses lainnya.

Gambar 3.15 ERD aplikasi website manajemen pesan LED matriks

3.4.3.1.

Diagram Konteks Website

Diagram konteks adalah diagram yang memberikan gambaran seluruh

proses terhadap seluruh masukan dan keluaran (input / output) aplikasi yang
dimaksudkan

untuk

menggambarkan

aplikasi

yang

sedang

berjalan,

mengidentifikasikan awal dan akhir data yang masuk dan keluar aplikasi. Diagram
konteks website yang di rancang dapat dilihat pada Gambar 3.16

37

Gambar 3.16 Diagram konteks website manajemen pesan LED matriks

3.4.3.2.

Diagram Overview Website

Diagram overview adalah diagram yang menggambarkan proses dari

diagram arus data. Diagram overview memberikan pandangan secara menyeluruh
mengenai Aplikasi website manajemen pesan LED matriks, yang menunjukkan
tentang proses yang ada, arus data, dan entitas-entitas yang terkait. Diagram
overview tersebut diperlihatkan pada Gambar 3.17.

Gambar 3.17 Diagram overview website manajeman pesan LED matriks

3.4.3.3.

Diagram Rinci Website

Diagram rinci menguraikan lebih lanjut mengenai urutan proses dari

diagram overview, yang memperlihatkan arus data masuk dan arus data keluar.
Berdasarkan diagram overview di atas, maka terdapat 2 model diagram rinci
sebagai berikut.
1. Proses 1.0 kelola pesan, proses ini terbagi menjadi 3 proses rinci.

38

a. Proses 1.1
Nama Proses

: tambah pesan

Masukkan

: data pesan

Keluaran

: Informasi pesan

Ringkasan proses

: merupakan proses yang dilakukan oleh admin untuk

menambah pesan dan data pesan kemudian disimpan pada tabel pesan.
b. Proses 1.2
Nama proses

: hapus pesan

Masukkan

: data pesan

Keluaran

: informasi pesan telah dihapus

Ringkasan proses

: merupakan proses yang dilakukan oleh admin untuk

menghapus pesan yang telah tersimpan pada tabel pesan

c. Proses 1.3
Nama proses

: tampilkan pesan

Masukkan

: data pesan

Keluaran

: data pesan yang akan di kirim pada serial terminal

Ringkasan proses

: merupakan proses yang dapat dilakukan oleh admin

untuk menampilkan pesan yang telah tersimpan ke LED matriks.

Gambar 3.18 Diagram rinci proses manajemen pesan

2. Proses 2.0 kelola jadwal
a. Proses 2.1
Nama proses

: tambah jadwal

39

Masukkan

: data pesan

Keluaran

: pesan yang telah terjadwal

Ringkasan proses

: merupakan proses yang dilakukan oleh admin untuk

menambah jadwal pesan yang akan tampil berdasarkan waktu.

b. Proses 2.2
Nama proses
Masukkan
Keluaran
Ringkasan proses

: hapus jadwal
: data pesan
: data pesan telah dihapus
: adalah proses yang diklakukan oleh admin untuk

menghapus jadwal pesan yang telah tersimpan pada tabel jadwal

c. Proses 2.3
Nama proses
: update pesan
Masukkan
: data pesan
Keluaran
: jawal pesan sudah di atur
Ringkasan proses : adalah proses yang dilakukan oleh admin untuk
mengaktifkan pesan yang telah ada pada tabel jadwal.

Gambar 3.19 Diagram rinci proses manajemen jadwal

3.4.3. Perancangan Antarmuka Website

Antarmuka yang dirancang pada aplikasi website pengelola sistem penampil
informasi ini merupakan antarmuka untuk administrator. Berikut ini adalah
diagram arsitektur fitur detail aplikasi.

40

Gambar 3.20 Arsitektur fitur detil website manajemen pesan LED matriks