LAPORAN WORKSHOP SISTEM ANTARMUKA

Novanna Rahma Zani – 1103181047

PRAKTIKUM 4
Judul : Lab4 – Simple Serial Communication
Tanggal : 31 Maret 2020

TUJUAN
Mahasiswa dapat menggunakan SerialPort class untuk mengirim dan menerima data antar
aplikasi.

PENDAHULUAN
Data-data hasil pembacaan oleh perangkat seperti mikrokontroler terkadang diinginkan
untuk dikirimkan ke komputer untuk diolah lebih lanjut atau untuk keperluan visualisasi. Data-
data tersebut dapat dikirimkan menggunakan kabel melalui port serial yang terdapat di
mikrokontroler dan komputer. Pada bahasan komunikasi data, mikrokontroler dapat dianggap
sebagai pengirim, komputer sebagai penerima, dan kabel sebagai saluran.
Pada praktikum ini, kita akan mencoba membuat aplikasi yang melakukan pertukaran
data menggunakan port serial pada komputer. Sebagai tahap permulaan, kita tidak menggunakan
dua perangkat (komputer dan mikrokontroler). Alih-alih membangun dua aplikasi pada dua
perangkat yang berlainan, kita akan menggunakan dua aplikasi yang berjalan pada satu komputer
saja. Masing-masing aplikasi tetap mengakses port serial dari komputer, tetapi kabel untuk
menghubungkan dua aplikasi tersebut adalah kabel virtual. Software com0com membantu kita
untuk membuatkan dua port serial yang berpasangan sehingga dua aplikasi bisa saling bertukar
data, seperti ditunjukkan oleh Gambar 1.

Gambar 1. Ilustrasi kabel serial virtual untuk menghubungkan 2 aplikasi yang berjalan pada satu komputer.
Sebelum port serial dapat digunakan, aplikasi akan memilih menggunakan port serial
yang mana, kemudian melakukan inisialisasi seperti kecepatan yang digunakan, jenis parity yang
digunakan, jumlah data bit yang dipakai, dan jumlah stop bit yang digunakan. Setelah itu,
barulah port serial dibuka dan siap digunakan untuk mengirim atau menerima data.
PERALATAN
- PC yang telah terinstall Visual Studio 2012, com0com, dan YAT
 Novanna Rahma Zani - 1103181047

HASIL PRAKTIKUM
4a. Tugas Modul Lab 4
Penjelasan Program :
⮚ Melakukan Prosedur Modul
1. Menginstal Virtual Series Port Driver lalu menambahkan virtual port.
Pada project ini digunakan pairing PORT 8 dan PORT 9 seperti pada Gambar 4.1.

Gambar 4.1. Pairing Port pada Virtual Serial Port Driver

2. Memastikan bahwa PORT sudah terdeteksi di Device Manager.

Gambar 4.2. Tampilan PORT pada Device Manager

3. Melakukan uji coba komunikasi serial dengan YAT.

Gambar 4.4. Tampilan hasil komunikasi PORT yang telah di-Pairing

 Novanna Rahma Zani - 1103181047

4. Setelah komunikasi serial berhasil, bisa dilanjutkan dengan membuat Windows Application
pada Visual Studio 2012.
Komponen yang digunakan adalah :
- Serial Port
- Label text “Serial Port” ; “Data” ; dan “Monitor”
- Text Box Multi Line
- List Box
- Button “Connect” ; “Close” ; “R” dan “Send”

Gambar 4.5. Tampilan akhir desain

5. Lalu menambahkan program pada setiap komponen sebagai berikut :

a. Button “Connect”
private void button1_Click(object sender, EventArgs e)
{
serialPort1.PortName = comboBox1.Text;
serialPort1.Open();
Form1.ActiveForm.Text = serialPort1.PortName + " is connected";
}

b. Button “Close”
private void button2_Click(object sender, EventArgs e)
{
serialPort1.Close();
Form1.ActiveForm.Text = "Serial Communication";
}

c. Button “Send”
private void button3_Click(object sender, EventArgs e)
{
serialPort1.Write(TextBox1.Text);
}
 Novanna Rahma Zani - 1103181047

d. Serial Port 1 🡺Properties 🡺 Event (Double klik)

private void serialPort1_DataReceived(object sender,
System.IO.Ports.SerialDataReceivedEventArgs e)
{
Tampilkan(serialPort1.ReadExisting());
}

private delegate void TampilkanDelegate(object item);

private void Tampilkan(object item)
{
if (InvokeRequired)
// This is a worker thread so delegate the task.
listBox2.Invoke(new TampilkanDelegate(Tampilkan), item);
else
// This is the UI thread so perform the task.
listBox2.Items.Add(item);
}

e. Form1_Load
private void Form1_Load(object sender, EventArgs e)
{
String[] portList = System.IO.Ports.SerialPort.GetPortNames();
foreach (String portName in portList)
comboBox1.Items.Add(portName);
}

f. Button “R” atau “Refresh” (Program Tambahan)

private void button4_Click(object sender, EventArgs e)
{
comboBox1.Items.Clear();
string[] myPort;
myPort = System.IO.Ports.SerialPort.GetPortNames();
comboBox1.Items.AddRange(myPort);
}

5. Menjalankan program dan melakukan komunikasi dengan YAT (COM8)

Gambar 4.6. Hasil Program berdasarkan prosedur modul

 Novanna Rahma Zani - 1103181047

⮚ Mengubah program untuk menyelesaikan tugas

6. Menambahkan kode program untuk menghindari adanya error bila tombol Connect atau
tombol Close tertekan dua kali berturut-turut.
Jawab :
- Pada Button “Connect”
private void button1_Click(object sender, EventArgs e)
{
serialPort1.PortName = comboBox1.Text;
serialPort1.Open();
Form1.ActiveForm.Text = serialPort1.PortName + " is connected";
button1.Enabled = false;
}
- Pada Button “Close”
private void button2_Click(object sender, EventArgs e)
{
serialPort1.Close();
Form1.ActiveForm.Text = "Serial Communication";
button2.Enabled = false;
button1.Enabled = true;
}
Penjelasan :
Ketika tombol “Connect” ditekan, perintah yang dijalankan adalah mengaktifkan serial Port yang
dideteksi dan ada di Combo Box 1 lalu Judul Form menjadi Nama Port + is connected. Lalu
dengan penambahan button1.Enabled = false; maka setelah tombol ditekan dan port serial
terkoneksi maka tombol ini tidak dapat lagi ditekan sehingga User tidak dapat klik tombol ini
lebih dari satu kali yang menyebabkan program menjadi error. Dapat dilihat pada Gambar 4.7.a

Pada tombol “Close” , perintah yang dijalankan ketika tombol itu ditekan adalah menutup port
serial dan Judul Form menjadi Serial Communication. Dengan penambahan
button2.Enabled = false; button1.Enabled = true; maka program juga akan menjalankan
perintah berupa kondisi button “Close” yang terkunci dan button “Connect” yang kembali bisa
ditekan untuk menyambungkan PORT kembali seperti pada Gambar 4.7.b

(a) (b)
Gambar 4.7. Hasil Tombol Connect dan Close yang terkunci setelah di-Klik
 Novanna Rahma Zani - 1103181047

7. Menambahkan kode program untuk menghindari adanya error bila tombol Send di klik
sebelum mengaktifkan tombol Connect.
Jawab :
- Pada Button “Send”
private void button3_Click(object sender, EventArgs e)
{
if (serialPort1.IsOpen == true)
serialPort1.Write(TextBox1.Text);
else
MessageBox.Show("Koneksikan PORT!");

Penjelasan :
Jika program sebelumnya perintah tombol “Send” langsung serialPort1.Write(TextBox1.Text);
Untuk membuat tombol send baru diproses ketika Port sudah terkoneksi maka ditambahkan
program diatas. Tombol “Send” dikondisikan, ketika serial port 1 sudah terbuka dan kondisinya
sudah terkoneksi maka text box 1 dapat dikirimkan, jika belum maka akan tampil message box
“Koneksikan PORT!” seperti pada Gambar 4.8.

Gambar 4.8. Hasil Tombol Send yang di-Klik sebelum Serial Port dikoneksikan.
 Novanna Rahma Zani - 1103181047

Tampilan Program

Tampilan awal program

Tampilan ketika tombol send di-klik sebelum mengkoneksikan serial port

Tampilan setelah User mengatur Serial Port lalu klik tombol “Connect”
 Novanna Rahma Zani - 1103181047

Tampilan User setelah melakukan komunikasi dengan Terminal 1 YAT

Tampilan setelah User klik tombol “Close”

Tampilan ketika User telah klik tombol “Close”

tetapi masih mencoba mengirim text dengan klik tombol “Send”
 Novanna Rahma Zani - 1103181047

Program Lengkap
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace GUI_Lab4
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private void Form1_Load(object sender, EventArgs e)

{
String[] portList = System.IO.Ports.SerialPort.GetPortNames();
foreach (String portName in portList)
comboBox1.Items.Add(portName);
}
private void button1_Click(object sender, EventArgs e)
{
serialPort1.PortName = comboBox1.Text;
serialPort1.Open();
Form1.ActiveForm.Text = serialPort1.PortName + " is connected";
button1.Enabled = false;
}
private void button2_Click(object sender, EventArgs e)
{
serialPort1.Close();
Form1.ActiveForm.Text = "Serial Communication";
button2.Enabled = false;
button1.Enabled = true;
}
private void button3_Click(object sender, EventArgs e)
{
if (serialPort1.IsOpen == true)
serialPort1.Write(TextBox1.Text);
else
MessageBox.Show("Koneksikan PORT!");

}
private void serialPort1_DataReceived(object sender,
System.IO.Ports.SerialDataReceivedEventArgs e)
{
Tampilkan(serialPort1.ReadExisting());
}

private delegate void TampilkanDelegate(object item);

private void Tampilkan(object item)
{
if (InvokeRequired)
// This is a worker thread so delegate the task.
listBox2.Invoke(new TampilkanDelegate(Tampilkan), item);
 Novanna Rahma Zani - 1103181047
else
// This is the UI thread so perform the task.
listBox2.Items.Add(item);
}

private void button4_Click(object sender, EventArgs e)

{
comboBox1.Items.Clear();
string[] myPort;
myPort = System.IO.Ports.SerialPort.GetPortNames();
comboBox1.Items.AddRange(myPort);
}
}
}

Analisa dan Kesimpulan

- Dengan menambahkan komponen Serial Port kita bisa melakukan komunikasi serial
dengan perangkat lain. Project ini disimulasikan menggunakan 1 PC dan tanpa ada koneksi
ke device/perangkat lain sehingga membutuhkan bantuan aplikasi Virtual Series Port
Driver dan YAT untuk dapat melihat hasil komunikasinya.

- Dalam penggunaan User Interface, kerap kali User melakukan kesalahan sehingga
menyebabkan program error atau tidak mau berjalan. Untuk mengatasi permasalahan itu,
terutama penekanan tombol connect maupun close yang bisa dilakukan berulang” kali
sehingga program error maka saya menambahkan perintah buttonX.Enabled = False; untuk
mengunci button setelah di Klik.

- Untuk proteksi pengiriman Text ke Port lain yang dilakukan sebelum mengkoneksikan
PORT, ditambahkan program yang baru menjalankan dan mau mengirim teks ketika serial
portnya terbuka (Serial port Open) dan menampilkan Message box sehingga User paham
jika ia belum mengkoneksikan Serial Portnya.