## WHITE BOX TESTING PADA SISTEM PEMESANAN DESAIN SABLON BERBASIS WEB
Abdi Pandu Kusuma 1 , Bayu Setiawan 2
1,2 Teknik Informatika, Fakultas Teknologi Informasi, Universitas Islam Balitar Blitar Jl.Mojopahit 4A Blitar Telepon. 085855851884 E-mail: pans.uib1blitar@gmail.com , usebayu@gmail.com

## ABSTRACT
Ordering a screen printing design is built as a supporting tool to anticipate cheating buyers in ordering goods that  are  normally  done  through  the  marketplace.  By  using  this  system  the  user  must  enter  the  order  number obtained  after  the  customer  makes  an  order  in  the  marketplace  for  verification  if  they  want  to  make  a  design order. Admin can manage user access to order designs and manage the design queue properly. White box testing method is done to find out how the system works structurally, besides to find out things that might happen when the system is run. In the white box test on the user login page and the design ordering page, the system works well as evidenced from the testing phase as in Cyclomatic Complexity and Matrix produces a value of 2 for the user login page and 1 for the design message page.
Keyword : White Box, Screen Printing, Ordering

## 1. PENDAHULUAN
Pada  penelitian  ini  dilakukan  pada  perusahaan percetakan  yang  biasa  mengerjakan  aneka  cetakan mulai dari cetakan manual dan juga cetakan digital.
Sistem  yang  dijalankan  dalam  perusahaan percetakan  ini  umumnya  dilakukan  saat  pelanggan melakukan  pemesanan  sablon  plastik  melalui marketplace,  Shopee  atau  Tokopedia,  pelanggan harus menyiapkan konsep desainnya terlebih dahulu, dan  dikirim  menggunakan  aplikasi WhatsApp ke kontak  toko,  selanjutnya  toko  akan  membuatkan desain  sablonnya  dan  dikirimkan  kembali  ke pelanggan.  Jika  toko  mendapat  banyak  permintaan desain, maka terjadi penumpukan chat pada aplikasi dan  sering  terlupa  antrian  desain  yang  harus dikerjakan  dahulu.  Selain  itu,  juga  ada  beberapa konsep  desain  yang  belum  di  kerjakan.  Apabila  hal ini terus menerus terjadi dapat berpengaruh terhadap penilaian pelanggan mengenai toko tersebut.
Permasalahan  yang  lain  dalam  perusahaan percetakan ini masih belum bisa memastikan bahwa pelanggan  yang  pesan  desain  itu  sudah  melakukan pesanan  ke  marketplace.  Hal  ini  menyebabkan timbulnya    kecurangan  pelanggan.  Contohnya pesan  desain  terlebih  dahulu,  setelah  desain  selesai tidak  jadi  melakukan  pesanan  produk  yang bersangkutan.  Hal  ini  dapat  merugikan  toko dikarenakan  membuang  waktu  yang  percuma  untuk pembuatan  desain  pelanggan  yang  batal  melakukan pesanan.
Saat  sebuah  sistem  di  jalankan  ada  banyak kemungkinan  yang  bisa  terjadi,  entah  itu  berjalan dengan  lancar,  ataupun  terdapat  suatu  masalah  atau kendala, oleh karena itu saat pembuatan sistem perlu dilakukan  pengujian  secara  keseluruhan  baik  dari sisi  fungsional  ( black  box )    maupun  structural ( white  box )  untuk  mengetahui  sistem  tersebut
berjalan  sesuai  fungsinya  (Abdul,  2012),  selain  itu dapat mengetahui hal-hal yang mungkin akan terjadi saat  sistem  tersebut  di  jalankan  dan  untuk mengetahui cara kerja sistem tersebut.

## 2. METODE
a. Flowchart Sistem
Sistem  dalam  penelitian  ini  terdapat  beberapa halaman  yang  setiap  halamannya  mempunyai  isi atau  fungsi  yang  berbeda  seperti  halaman  home, halaman  pesan  desain,  dan  halaman  login.  Halaman login  hanya  digunakan  untuk  admin.  Perancangan sistem pemesanan desain sablon berbasis website ini dapat ditampilkan seperti gambar 1.

## Gambar 1. Flowchart Sistem
b. DFD ( Data Flow Diagram ) 1) DFD Level 0.
Pada  gambar  2  ditampilkan  proses-proses dan    aliran  data  pada  sistem  secara keseluruhan.

## Gambar 2. DFD Level 0
Gambar  1  menunjukan  bahwa  semua  aliran  data yang  ada  menuju  pada  satu  proses,  yaitu  proses Sistem  Pemesanan  Desain  Sablon  Ada  dua  entitas yang  terlibat  di  sistem  ini  yaitu  entitas  Admin  dan entitas  User.  Masing-masing  entitas  memiliki  data masukkan dan data keluaran pada sistem.
2) DFD Level 1.
Pada  gambar  3  ditunjukkan  alur  yang  lebih spesifik  tentang  sistem,  dimana  termasuk hasil pemecahan dari DFD level 0.

## Gambar 3. DFD Level 1
Pada gambar 3 memiliki tiga proses yaitu proses konsep  desain,  proses  antrian  desain,  dan  proses hasil  desain  dimana  setiap  proses  memiliki  aliran data input maupun output dari atau ke data store . 3) ERD ( Entity Relationship Diagram ).
Pada  gambar  4  ditunjukan  struktur  data  dan hubungan  antar  data  pada  sistem  pemesanan  desain sablon.
Gambar 4. Entity Relationship Diagram pada sistem
3. PEMBAHASAN
3.1 Tampilan Sistem
Pada gambar 5 ditunjukkan tampilan halaman pemesanan desain sablon.

## Gambar 5. Halaman Pesan Desain
Dalam  sistem  pemesanan  desain  sablon  ini terdapat halaman pesan desain dimana halaman yang akan tampil ketika user telah berhasil login halaman ini digunakan dalam melakukan pesanan desain.

## 3.2 Pengujian Whitebox
Pada  pengujian  whitebox  terdapat  2  halaman yang  dilakukan  pengujian,  yaitu  halaman  login  user dan halaman pesan desain.
a. Pengujian pada halaman login user.
Dalam  pengujian  di  halaman login  user terdapat beberapa tahapan berikut :
1) Pemetaan Source Code halaman login user Pada  tahap  yang  ini  dipetakan  bagian–bagian dari  source  code  actloginuser.php  ke  dalam  tabel  1 berikut.

## Tabel 1. Struktur Actloginuser.php
Path  Source Code 1 <?php 2 include "database.php"; $akun = $_POST['akun']; $nopesan = $_POST['nopesan']; $marketplace= $_POST['marketplace']; 3 $login = mysqli_query($connect, "SELECT *
FROM user WHERE nopesan='$nopesan' AND marketplace = '$marketplace' "); $row=mysqli_fetch_array($login);
4
if ($row['nopesan'] == $nopesan AND $row['marketplace'] ==
$marketplace ) { session_start(); $_SESSION['akun'] =
$row['akun']; $_SESSION['nopesan'] = $row['nopesan'];
$_SESSION['marketplace'] =
$row['marketplace'];
5 header('location:pesan.php');
}
6 else { echo "<center><br><br><br><br><br><br>
<b>Nama Akun atau No Pesanan Anda Salah / Belum
Terverifikasi</b><br>";  echo "<br>";
7 echo "<input type=button value='Ulangi Login'
onclick=location.href='login user . php'></center>";  }
8 ?>
2) Membuat  flowgraph  dari  pemetaan  source code.
Pada  gambar  6  ditunjukkan  tampilan  flowgraph dari struktur actionloginuser.php.
Pada  gambar  6  terdapat  1  percabangan  pada nomor 4, yaitu nomor 5 yang artinya verifikasi pada nama  akun,  no,  pesanan  itu  valid  dan  proses  sistem selesai. Sedangkan pada nomor 6 yang berarti sistem gagal  memverifikasi  nama  akun,  nomor  pesanan user,  sistem  akan  menampilkan  pesan  gagal  login, berlanjut  pada  proses  nomor  7  yaitu  meminta  user untuk login kembali, dan sistem kembali berulang ke awal.

## 3) Cyclomatic Complexity.
Pada  gambar  6  terdapat  beberapa  nodes,  edges, dan predicated nodes untuk  menghitung Cyclomatic Complexity berikut.
a) V(G) = E    – N + 2 (1) V(G) = 8 – 8 + 2 =    2 b) V(G) = P + 1 (2) V(G) = 1 + 1 =    2
Keterangan : E = jumlah edges pada flowgraph N = jumlah nodes pada flowgraph P = jumlah predicates nodes pada flowgraph
4) Independent Path.
Dari  hasil  penghitungan Cyclomatic  Complexity terpadat 2 path berikut.
Path 1 : 1 – 2 – 3 – 4 – 5 – 8 Path 2 : 1 – 2 – 3 – 4 – 6 – 7 – 1 – 2 – 3 – 4 – 5 – 8

## 5) Graph Matriks.
Berdasarkan  2  path  yang  telah  ditentukan  di dalam  Independent  Path  dapat  di  uji  dengan  graph matrix pada tabel 2 berikut.

## Tabel 2. Graph Matriks
1  2  3  4  5  6  7  8  n(E)-1 1 1 1 – 1 = 0 2 1 1 – 1 = 0 3 1 1 – 1 = 0 4 1  1 2 – 1 = 1 5 1  1 – 1 = 0 6 1 1 – 1 = 0 7  1 1 – 1 = 0 8 0 – 0 = 0 Jumlah +1 1 + 1 = 2

## 6) Skenario Uji.
Pada  tahap  ini  dilakukan  ujicoba  pada  halaman login  user  dengan  memasukkan  akun,  no.  pesanan dan  marketplace  sesuai  dengan  skenario  uji  yang telah  di  tetapkan  pada  bab  sebelumnya  sebagai berikut :
a) Langkah  pertama  dengan  memasukkan  nama akun“nurmala”,  no  pesanan“95596886”,  dan marketplace  “tokopedia”  maka  muncul  suatu pesan Login Gagal dan diminta untuk login ulang. Seperti ditampilkan pada gambar 7 berikut.

## Gambar 7. Login gagal
b) Langkah  kedua  dengan  memasukkan  nama  akun “adelasuryapertiwi”,no pesanan “17100623
004DDG3”,  dan  marketplace  “Shopee”    maka tampil halaman pesan desain, itu diartikan sebagai login sukses. Seperti pada gambar 8 berikut.

## Gambar 8. Login Berhasil
Dari  Skenario  Uji  di  atas  dapat  disimpulkan bahwa  saat  melakukan  beberapa  tes  dengan memasukkan  nama  akun  “nurmala”,  no  pesanan “95596886”,  dan  marketplace  “tokopedia”  maka muncul suatu pesan Login Gagal dan diminta untuk login  ulang.  Sedangkan  bila  memasukkan  nama akun “adelasuryapertiwi”, no pesanan “17100623004DDG3”,  dan  marketplace  “Shopee”, maka  proses  kemunculan  pesan  Login  Gagal  akan dilewati  dan  masuk  ke  halaman  pesan  desain.  Dari penjelasan  ini  dapat  digambarkan  ke  dalam  tabel berikut.

## Tabel 4. Hasil Skenario Uji
No. Nama Akun No Pesanan Mark etpla ce Hasil 1 nurmala 955968 86 Toko pedia Gagal – Muncul Pesan Gagal 2 adelasury apertiwi 171006 23004D Shop ee Berhasil – Masuk Halaman DG3 Pesam Desain b. Pengujian pada Halaman Desain Pesan
Pada pengujian di halaman pesan desain terdapat beberapa tahapan berikut.
1) Pemetaan Source Code halaman pesan desain. Pada tahap yang pertama peneliti memetakan bagian –bagian  dari  source  code  actpesan.php  ke  dalam tabel berikut.

## Tabel 4. Struktur Actloginuser.php
2) Membuat  Flow  graph  dari  pemetaan  source code.
Pada  gambar  9  dipetakan  bagian  –  bagian  dari source  code actpesan .php  ke  dalam  tabel.  Peneliti membuat  gambaran  alur  sistem  atau  flow  graph berikut.

## Gambar 9 Flow Graph actpesan.php
Gambar  9  tidak  ada  percabangan  pada  proses yang ada dihalaman pesan desain.
Path Source Code 1 <?php 2 $produk = $_POST['produk']; $ukuran = $_POST['ukuran']; $warnaproduk = $_POST['warnaproduk']; $nama = $_POST['nama']; $tagline = $_POST['tagline']; $cp = $_POST['cp']; $alamat = $_POST['alamat']; $tambahan = $_POST['tambahan']; $sablon = $_POST['sablon']; $nowa = $_POST['nowa']; include "database.php"; 3 $kirim = mysqli_query($connect, "INSERT  INTO  konsep  VALUES(NULL, '$produk', '$ukuran', '$warnaproduk', '$nama', '$tagline', '$cp', '$alamat', '$tambahan', '$sablon', '$nowa')") or die(mysqli_error()); 4 echo  "Data  Berhasil  Di  Kirim  <meta http-equiv=refresh
content=3;url=hasildesain.php>";
5 ?>

## 3) Cyclomatic Complexity.
Pada  gambar  9  terdapat  beberapa  nodes,  edges, dan predicated nodes untuk  menghitung Cyclomatic Complexity berikut.
a) V(G) = E    – N + 2 (1) V(G) = 4 – 5 + 2 =    1 b) V(G) = P + 1 (2)
V(G) = 0 + 1
=    1
Keterangan : E = jumlah edges pada flowgraph N = jumlah nodes pada flowgraph P = jumlah predicates nodes pada flowgraph
4) Independent Path..
Dari  hasil  penghitungan Cyclomatic  Complexity terpadat 1 path berikut. Path 1 : 1 – 2 – 3 – 4 – 5

## 5) Graph Matriks.
Berdasarkan  2  path  yang  telah  ditentukan  di dalam  Independent  Path  dapat  di  uji  dengan  graph matrix pada tabel 2 berikut.

## Tabel 5. Graph Matriks

## 6) Skenario Uji
Pada  pengujian  halaman  desain  pesan  dapat diketahui  bahwa  halaman  tersebut  tidak  ada percabangan yang berarti tidak ada perulangan pada aplikasi tersebut.
Pada  tahap  Cyclomatic  Complexity  dan  Matrix graph,  menghasilkan  nilai  yang  sama  yaitu  1.maka pengujian  pada  halaman  pesan  desain  berjalan dengan baik.

## 4. KESIMPULAN
Pada  pengujian  white  box  pada  halaman  login user  dan  halaman  pemesanan  desain  terdapat beberapa  tahapan  seperti  Pemetaan  Source  Code, Membuat  Flow  graph,  Penghitungan  Cyclomatic Complexity, Menentukan Independent Path, Pembuatan  Graph  Matrix  dan  Melakukan  Skenario Uji pada halaman login user.
Dalam  tahap  pengujian  di  halaman  login  user, dan pesan desain menggunakan Cyclomatic Complexity dan Matrix graph, dihasilkan  nilai  yang sama  yaitu  2  untuk  halaman  login  user  dan  1  untuk halaman  pesan  desain.  Maka  dapat  disimpulkan bahwa  pengujian  white  box  berjalan  dengan  baik karena  pada  setiap  tahap  pengujian  menghasilkan nilai yang sama

## PUSTAKA
Dian  N.  2015.  Pengertian  Desain  Secara  Umum  & Khusus (Online). (http:// pengertiandesain umumdankhusus.  blogspot.co.id,  diakses  18 Agustus 2018).
Mulyanto Agus. 2009. Sistem Informasi Konsep dan Aplikasi, Yogyakarta : Pustaka Pelajar.
Prakoso,  Syaifullah.  A.  2014.  Aplikasi  Penanganan Transaksi  Order  Pada  PT.  Allib  Indonesia. STIKOM  Institutional  Repositories (Online). (http://sir.stikom.edu/id/eprint/1285,  diakses  14 September 2018).
Rouf  Abdul.  2012.  Pengujian  perangkat  lunak dengan  menggunakan  metode  White  box  dan black box. Jurnal Online STMIK HIMSYA
Santoso  O.  A.  2016.  Pengertian  Website  dan Contohnya (Online). (https://oliviaagnez.
wordpress.com/2016/02/18/pengertian-website- dan-contohnya, diakses 10 September 2018).
1  2  3  4  5  6  7  8 n(E)-1 1 1 1 – 1 = 0
2 1
1 – 1 = 0
3 1
1 – 1 = 0
4
1 1 – 1 = 0
Jumlah +1 0 + 1 = 1