## Abstract
In order to create an interactive and responsive user interface,  it  isn’t  enough  only  rely  on  script  languange  like PHP  and  HTML.  Prototype  and  Script.Aculo.us  offer simplicity in creating interactive and responsive web page by providing  features  like  component  and  visual  effect  that  can be imply easily. Prototype and Script.aculo.us are the libraries which  is  developed  in  Javascript.  Prototype  helps  web developer which use AJAX by providing functions to simplify a  set  of  languange  extension  for  the  Javascript,  browser environment,  and  AJAX  itself,  whereas  Script.Aculo.us provide a rich set of functionality that can be used directly in creating  polished  interactive  user  interfaces.  Script.Aculo.us build on Prototype’s framework.
In  this  final  assignment,  a  web  based  information system  is  developed  by  using  Prototype  and  Script.Aculo.us that  implemented  in  a  supplier  enterprise,  CV.  Surya Mandiri.  Then a  test  of  the  system  conducted  by  using  user- testing method.
The  test  result  conclude  that  Prototype  and Script.aculo.us  can  transform  the  way  of  approaching  the web  user  interface  in  developing  an  information  system,  by making  features  such  as  in  desktop  application  with  only  a few lines of code
Key  Word:  AJAX,  Information  System,  Javascript,  Web Programming
Abstrak
Dalam  rangka  menciptakan  antarmuka  yang interaktif dan responsif, tidaklah cukup hanya mengandalkan  bahasa  skrip  seperti  PHP  dan  HTML. Prototype  dan  Script.aculo.us  menawarkan  kemudahan dalam  menciptakan  halaman web yang  interaktif  dan responsif dengan menyediakan fitur-fitur seperti component dan  efek  visual  yang  dapat  dengan  mudah diterapkan.  Prototype  dan  Script.Aculo.us  merupakan library yang  dikembangkan  dalam  bahasa  Javascript. Prototype membantu pengembangan web yang menggunakan  AJAX,  dengan  menyediakan  fungsi-fungsi yang  menyederhanakan  serangkaian  perintah  dalam Javascript, lingkungan browser , maupun AJAX itu sendiri. Sedangkan  Script.Aculo.us  menyediakan  fungsi-fungsi yang  dapat  langsung  diterapkan  oleh  pengembang  dalam menciptakan  antarmuka  interaktif  yang memukau. Script.Aculo.us dibangun dari framework Prototype. Pada  tugas  akhir  ini  dilakukan  perancangan sistem  informasi  berbasis web yang  menggunakan Prototype  dan  Script.Aculo.us  yang  diimplementasikan pada perusahaan supplier , CV. Surya Mandiri. Kemudian
dilakukan pengujian terhadap sistem dengan menggunakan metode user-testing .
Dari  hasil  pengujian  didapati  bahwa  Prototype dan  Script.Aculo.us  dapat  mengubah  cara  pendekatan terhadap  antarmuka web dalam  perancangan  suatu  sistem informasi dengan menciptakan fitur-fitur layaknya aplikasi desktop ,  sehingga  sistem  informasi  menjadi  lebih  responsif serta pengolahan informasinya menjadi lebih cepat.
Kata  kunci:  AJAX,  Javascript,  Pemrograman Web , Sistem Informasi.

## I.     PENDAHULUAN
Tuntutan pasar untuk membuat sistem informasi berbasis web yang  dapat  digunakan  dengan  mudah sehingga mampu menyajikan informasi yang dibutuhkan dengan  cepat,  mendorong  orang  untuk  membuat  sistem informasi  berbasis web yang  memiliki  antarmuka  yang lebih interaktif dan responsif dengan meniru kemampuan yang  ada  pada  aplikasi desktop .  Namun,  membangun sistem  informasi  berbasis web yang  lebih  interaktif  dan responsif pada masa sekarang ini tidaklah cukup dengan hanya  mengandalkan  bahasa  skrip  seperti  PHP  dan HTML.
Salah  satu  persoalan  yang  menjadi  kendalanya yakni  dalam  pembuatan  efek  visual  serta component . Membangun  sistem  informasi  yang  kaya  akan  efek visual dan component menggunakan bahasa skrip seperti PHP  dan  HTML  sangat  sulit  dan  memakan  waktu  yang lama.  Apalagi  bila  menginginkan  hasil  yang  mendetail dan  kompleks.  Dalam  pembuatannyapun,  pengembang juga perlu memperhatikan ¬persoalan cross-browser . Prototype  dan  Script.aculo.us  menawarkan kemudahan dalam membuat dan menerapkan efek visual dan component kedalam  suatu  aplikasi web .  Prototype dan Script.aculo.us merupakan library yang dikembangkan dalam bahasa JavaScript yang membantu programmer dalam  merancang  suatu  aplikasi web yang dinamis.  Prototype  membantu  pengembangan web yang menggunakan  Javascript,  dengan  cara  menyediakan fungsi-fungsi yang menyederhanakan serangkaian perintah  dalam  AJAX,  lingkungan browser ,  maupun Javascript  itu  sendiri.  Sedangkan  Script.Aculo.us menyediakan fungsi-fungsi yang dapat langsung diterapkan  oleh  pengembang  dalam  menciptakan antarmuka  interaktif  yang  memukau.  Script.Aculo.us
F. Rompis (1) , Ir. H.F. Wowor, M.Kom. (2) , V. Tulenan, S.Kom., M.Ti (3) , A. M. Rumagit, ST., MT. (4)
(1)Mahasiswa (2)Pembimbing 1 (3)Pembimbing 2 (4)Pembimbing 3
brian.rompis@gmail.com (1) hans.wowor@unsrat.ac.id (2) virginia.tulenan@gmail.com
(3) arthurrumagit@rocketmail.com (4)
Jurusan Teknik Elektro-FT, UNSRAT, Manado-95115

## Perancangan dan Implementasi Sistem

## Informasi Berbasis Web Menggunakan Prototype dan Script.Aculo.us
dibangun  dari framework Prototype.  Ketika  digunakan bersama, Prototype dan Script.Aculo.us dapat mengubah cara  pendekatan  terhadap  antarmuka web dalam perancangan suatu sistem informasi dengan menciptakan efek  visual  serta component layaknya  aplikasi desktop hanya dengan sedikit kode. Selain itu, pengembang tidak perlu  dibebani  dengan  persoalan cross-browser dalam menggunakan Prototype dan Script.aculo.us.
Dengan berbagai fitur yang disajikan ini, sistem informasi  menjadi  lebih  mudah  untuk  digunakan, sehingga mempercepat proses kerja perusahaan.
Dengan  alasan  inilah  penulis  mengangkat  judul “Perancangan  dan  Implementasi  Sistem  Informasi Berbasis Web menggunakan
Prototype
dan Script.aculo.us Studi Kasus: CV Surya Mandiri”.

## II.     LANDASAN TEORI

## A. Perancangan Sistem
Perancangan sistem Informasi merupakan suatu kegiatan  yang  terfokus  pada  penyusunan  spesifikasi perangkat  lunak  yang  menjadi  solusi  untuk  mengatasi suatu  masalah  pada  proses  bisnis.  Jika  analisa  sistem lebih menekankan pada identifikasi masalah pada proses bisnis,  maka  perancangan  sistem  lebih  mengarah  ke aspek teknis atau implementasi sistem tersebut. (Bentley, 2007, 446)

## B. Prototype
Prototype  menyediakan  sekumpulan  ekstensi untuk  JavaScript,  lingkungan browser ,  dan  untuk  objek XMLHttpRequest.  Script.aculo.usdibangun  dari  fondasi Prototype  untuk  membuat  fitur-fitur web .  Prototype merupakan library JavaScript yang mampu mengembangkan  bahasa  pemrograman framework -nya. JavaScript  menyediakan  mekanisme  yang  disebut pewarisan  berbasis  prototipe.  Dari  sinilah  istilah library Prototype. (Crane, 2007, 7)
Fitur-fitur dan kemudahan yang disediakan oleh Prototype yaitu: (Crane, 2007, 8)

## Fitur pada bahasa Javascript
JavaScript  merupakan  bahasa  pemrograman  untuk kebutuhan  umum.  Pengembang  biasanya  menggunakan Prototype  dalam  browser,  namun  beberapa  bagian  di dalamnya, seperti objek, array, string, dan angka didisain untuk meningkatkan memperkaya bahasa JavaScript.

## Fitur pada Browser Web
Banyak  kode  Javascript  diperuntukan  di  dalam browser web .  Ketika  merancang  suatu web ,  berbagai  bagian  dari web  browser diarahkan  pada interpreter JavaScript,  dan Prototype  menawarkan  dukungan  terhadap  perancangan web dalam berbagai cara.
Document  Object  Model (DOM)  merupakan  standar yang  digunakan  untuk  mengakses  dokumen  HTML. Dengan  menggunakan  DOM  melalui  JavaScript,  isi dokumen dapat dimanipulasi. getElementById() merupakan  contoh  metode  dalam  objek document yang dapat  digunakan  untuk  memperoleh  elemen  dalam dokumen berdasarkan suatu ID.
Prototype  menyediakan  beberapa  modul  yang  bekerja bersama  elemen  DOM.  Hal  ini  mempermudah  dalam mengakses  elemen  DOM,  dan  tentu  saja  dalam memanipulasinya.

## C.   Script.aculo.us
Script.aculo.us  adalah  suatu library yang menggunakan  Prototype  untuk  menyajikan  sekumpulan kemampuan  tingkat  tinggi  yang  dapat  langsung diterapkan  oleh  pengembang  dalam  menciptakan antarmuka  interaktif  yang  memukau.  Pada  dasarnya, Prototype mempermudah banyak pengembangan dengan Ajax.  Ketika  digunakan  bersama  Script.aculo.us, keduanya  dapat  mengubah  cara  pendekatan  antarmuka web , dengan  menciptakan fitur seperti animasi dan drag and  drop hanya  dengan  sedikit  kode.  Layaknya Prototype,  Script.aculo.us  mencakup  beberapa  bagian. (Crane, 2007, 334)

## Efek Visual
Script.aculo.us  membuat  umpan  balik  visual  menjadi mudah  untuk  dibuat. Library ini  dikenal  bukan  hanya dari kualitas dan jumlah efek  yang dapat  dilakukannya, tetapi  juga  dari  desain  kode  program  yang  berkualitas tinggi,  sehingga  membuat  banyak  efek  sekaligus  dapat dilakukan  dengan  mudah,  menjalankan  kode  tidak  tetap sebelum, selama, dan sesudah efek, dan mensinkronisasikan  efek  yang  satu  dengan  yang  lain. Disain  yang  hebat  dapat  dilakukan  berkat  adanya  fitur bahasa yang disediakan oleh Prototype.

## Drag and Drop
Drag  and  drop merupakan  interaksi  yang  biasa digunakan dalam aplikasi desktop , dan dalam kebanyakan  kasus  merupakan  cara  yang  sangat  sesuai untuk  berinteraksi  dengan  komputer.  DOM  tidak mendukung  secara  langsung event  drag  and  drop ,  dan mengimplementasikan drag  and  drop dalam  JavaScript berarti hanya bergantung pada event klik pada mouse dan perpindahan mouse .
Script.aculo.us  mengimplementasikan  fitur  lengkap sistem drag and drop yang dapat diterapkan pada hampir semua  tipe  elemen  DOM  yang  hanya  dengan  sedikit kode.  Tampilan  dan  fleksibilitas  interaksi  dapat  diatur menggunakan library efek, dan event hanlder menyediakan baris perintah untuk tiap tahap dalam event drag and drop .

## Components
Fitur  yang  dibahas  sejauh  ini  adalah framework yang digunakan untuk meningkatkan/mengembangkan perancangan  aplikasi.  Script.aculo.us  juga  menyediakan sejumlah komponen antarmuka, dalam library Component. Pada tahap perancangan, library Component
menyediakan dua komponen: AutoCompleter,  yang  dapat  menyertakan  elemen drop- down pada text  field apa  saja,  yang  dapat  membuat elemen  pada  Form  HTML  memiliki  fitur  menyerupai Google  Suggest;  in-placeEditor  yang  memungkinkan elemen  DOM  berubah  menjadi text  input  field dan kembali lagi seperti semula.

## D. Pengujian Sistem
Pengujian  bertujuan  untuk  menunjukan  bahwa suatu  program  mengerjakan  apa  yang  ingin  dikerjakan dan  menemukan  kerusakan/kecacatan  sebelum  program tersebut digunakan. (Sommerville, 2011, 206)
Biasanya,  perangkat  lunak  komersial  harus melalui 3 tahap pengujian: (Sommerville, 2011, 210)
Development  testing ,  dimana  sistem  diuji  selama proses  pengembangan  untuk  menemukan  bug  dan cacat.  Perancang  sistem  dan  programmer  biasanya yang terlibat dalam proses pengujian ini.
Release  testing ,  dimana  tim  penguji  terpisah  yang melaksanan  pengujian  terhadap  sistem  yang  sudah selesai sebelum diberikan kepada pengguna. Tujuan dari release testing adalah mengecek apakan sistem telah memenuhi persyaratan dari stakeholder. User  testing ,  dimana  pengguna  sistem  menguji sistem pada lingkungan mereka.

## III.     METODOLOGI PENELITIAN

## A. Tempat dan Waktu Penelitian
Dalam  pelaksanaan  tugas  akhir  ini  penulis mengambil  tempat  penelitian  pada  CV.  Surya  Mandiri, dan  rumah  penulis,  sedangkan  waktu  pelaksanaan penelitian yaitu pada bulan Juni - Agustus 2012.

## B. Bahan dan Peralatan
Perlengkapan  komputer  beserta  pendukung  yang digunakan  yaituKomputer Client dengan  spesifikasi Sistem  Operasi:  Windows  7,  Processor  Intel  Core  i5  - 2310M  2.4Ghz,  Memory  RAM  4GB  DDR3,  Harddisk 500Gb  HDD.  Untuk  Komputer Server memiliki spesifikasi Sistem Operasi Windows XP, Processor Intel Core 2 Duo T5300 1.73 Ghz, Memory RAM 3GB DDR2 dan Harddisk 320Gb HDD.
Adapun  Aplikasi  -  aplikasi  yang  di  pakai  penulis dalam  penyelesaian  Tugas  Akhir  adalahXAMP  versi 1.7.0,  Notepad++  versi  5.14  dan  Mozilla  Firefox  versi 16.0

## C. Prosedur Penelitian
Prosedur  yang  dilakukan  dalam  pembuatan analisa  keamanan  Mail  Server  Zimbra  pada  sistem operasi Ubuntu adalah sebagai berikut:
Melakukan  studi  literatur  dan  mencari  materi-materi yang berhubungan dengan perancangan sistem, pemrograman web yang  dinamis, database MySQL, Prototype dan Script.aculo.us. Menganalisa proses bisnis perusahaan supplier . Perusahaan  yang  dijadikan  studi  kasus  yaitu  CV.  Surya Mandiri.
Mengidentifikasi kebutuhan sistem.
Mempersiapkan  perangkat  lunak,  perangkat  keras,  dan semua resource yang  dibutuhkan  untuk  membangun sistem yangakan dijadikan sebagai studi kasus. Melakukan  instalasi  semua  perangkat  lunak  dan perangkat keras yang dibutuhkan.
Perancangan  sistem  informasi  menggunakan  metode waterfall .
Implementasi  sistem  menggunakan  bahasa  PHP  dan Javascript dan menerapkan Prototype dan Script.aculo.us yang diintegrasikan dengan database MySQL.
Melakukan pengujian sistem menggunakan metode user- testing .

## D. Perancangan Sistem
Sebagai  studi  kasus,  akan  ditinjau  sistem informasi  CV.  Surya  Mandiri  sebagai  perusahaan  yang bergerak  di  bidang supplier .  Perusahaan  ini  bertugas menyediakan  barang-barang  kebutuhan  dari  perusahaan pertambangan.

## Gambaran Umum Sistem yang Berjalan
Pegawai administrasi menerima pesanan/ purchase order dari  rekanan(dalam  hal  ini  perusahaan  pertambangan). Purchase  order tersebut  dicetak  dan  selanjutnya  akan diserahkan kepada petugas gudang. Petugas gudang akan membeli  barang-barang  yang  ada  dalam  list purchase order .  Barang  yang  dibeli  disimpan  di  gudang.  Apabila semua barang dalam purchase order telah tersedia, maka barang  kemudian  akan  dikirim  ke  rekanan  bersama dengan tagihan/ invoice . Setelah barang diterima, rekanan kemudian  akan  membayar  biaya  pelunasan  berdasarkan tagihan yang diterima.

## Evaluasi Sistem yang Berjalan
Sistem  yang  ada  pada  CV.  Surya  Mandiri  terdapat beberapa kelemahan yaitu:
Belum adanya pembukuan data pesanan/ purchase order , sehingga sangat menyulitkan dalam melakukan pengolahan data pesanan.
Proses pembuatan tagihan/ invoice menggunakan Microsoft Office Excel, dimana pengaturan tabel dan tata letak  data  dilakukan  secara  manual,  sehingga  sangat merepotkan serta memakan waktu lama.
Kesulitan  dalam  pelaporan  keuangan,  karena  tidak  ada pembukuan  terhadap  data  transaksi  penjualan  dan pembelian,  sehingga  data  transaksi  (dalam  bentuk  hard copy)untuk bulan tertentu harus dicari satu persatu.

## Diagram Konteks
Secara  umum,  gambaran  alur  kerja  Perusahaan Supplier ditunjukan oleh diagram konteks pada gambar 1.

## Data Flow Diagram Level 0
Sistem  menerima  masukan  id_user  dan  password. Id_user  dan  password  tersebut  dicocokan  dengan  yang ada  di  database.  Bila  terdaftar,  sistem  akan  mengambil data ‘status’ dari database.
Apabila  status  adalah  ‘Pegawai  Administrasi’,  maka akan  diperhadapkan  dengan  menu  Pengolahan  Data Barang.
Apabila  status  adalah  ‘Petugas  Gudang’,  maka  akan diperhadapkan dengan menu Pengolahan Data Pesanan. Apabila  status  adalah  ‘Manager’,  maka  akan diperhadapkan dengan menu Manager.

## DFD Level 1 Proses Pengolahan Data Pesanan (gambar 3)
DFD  Level  1  dari  proses  Pengolahan  Data  Pesanan ditunjukan oleh gambar 3.
Rekanan Perusahaan Supplier
Sumber pesanan barang, tagihan biaya pembelian barang biaya pelunasan Gambar 1. Diagram Konteks Pegawai Administrasi 2 Pengelolaan Data Pesanan 1 Login 3 Pengelolaan Data Barang 4 Proses Manager Petugas Gudang Manager menu pengolahan data pesanan menu pengolahan data barang menu Manager Id _user, password status: Manager status: Petugas gudang status: Pegawai administrasi Tabel User Id _user, password status Id _user, password Id _user, password Gambar 2. DFD Level 0 2.1 Purchase Order 2.2 Barang Keluar 2.4 Pelunasan barang Purchase order Pegawai administrasi penjualan stok Purchase order Purchase order stok item tanggal lunas tanggal lunas stok item, Purchase order Purchase order 2.3 Penetapan Harga Jual Purchase order tagihan harga jual stok item total harga jual nomor PO nomor PO
Gambar 3. DFD Level 1 Proses Pengolahan Data Pesanan
Apabila status user adalah ‘Pegawai Administrasi’, maka sistem  akan  menampilkan  menu  dengan  pilihan  menu yakni: Purchase  order ,  Barang  Keluar,  dan  Pelunasan Barang.

## DFD Level 1 Proses Pengolahan Data Barang
DFD  Level  1  dari  proses  Pengolahan  Data  Barang ditunjukan oleh gambar 4.
Apabila  status user adalah  ‘Petugas  Gudang’,  maka sistem  akan  menampilkan  menu  dengan  pilihan  menu yakni: Barang Masuk dan Biaya Operasional.

## DFD Level 1 Proses Manager
DFD  Level  1  dari  proses  Manager  ditunjukan  oleh gambar 5.
3.1 Input Pembelian Barang Petugas Gudang stok Biaya operasional data pembelian 3.2 Input Biaya Operasional data biaya operasional data pembelian data biaya operasional Gambar 4. DFD Level 1 Proses Pengolahan Data Barang 4.1 Pengolahan
Data User Manager
4.2 Laporan Keuangan Tabel User daftar data user tanggal daftar data user total biaya operasional laporan keuangan Tabel purchase order Tabel penjualan Tabel biaya operasional total penjualan, total piutang total pembelian data user baru data user baru
Gambar 5. DFD Level 1 Proses Manager
2.1.1 Tambah Purchase Order Pegawai administrasi Tabel PurchaseOrder 2.1.2 Edit Purchase Order Data purchase order Data purchase order Tabel item purchase order Data Purchase order Item purchase order Data purchase order Data purchase order Purchase order Item purchase order Gambar 6. DFD Level 2 Proses Purchase Order
Apabila status user adalah ‘Manager’, maka sistem akan menampilkan  menu  dengan  pilihan  menu  yakni: Pengelolaan Data User dan Laporan Keuangan.
DFD Level 2 Proses Purchase Order (gambar 6)
Pada  proses  ini,  sistem  akan  menampilkan  data  pesanan atau purchase order yang ada di database. Terdapat juga tombol  untuk  menambah purchase  order ,  serta  pilihan untuk meng-edit atau menghapus purchase order . Apabila user menekan tombol ‘Tambah purchase order ’ maka akan menuju ke proses Tambah Purchase order . Apabila  user  menekan  tombol  ‘Edit’  pada purchase order maka akan menuju ke proses Edit Purchase order .
Entity Relationship Diagram (ERD) Entity  Relationship  Diagram dari  sistem  informasi perusahaan supplier ditunjukan oleh gambar 7.
Gambar 7. Entity Relationship Diagram

## IV.    IMPLEMENTASI DAN PENGUJIAN
A. Implementasi Basis Data Pembuatan basis data supplier
CREATE DATABASE `supplier`;

## Pembuatan tabel user
CREATE TABLE `user` ( `id_user` varchar(30) NOT NULL, `nama` varchar(30) NOT NULL, `password` varchar(30), `level` varchar(50) NOT NULL, PRIMARY KEY (`id_user`) );

## Pembuatan tabel Purchase Oder
CREATE TABLE `purchaseorder` ( `nomor_PO` varchar(20) NOT NULL, `rekanan` varchar(100) NOT NULL, `tanggal_masuk` date NOT NULL, `tan ggal_butuh` date NOT NULL, `status` varchar(10), PRIMARY KEY (`nomor_PO`) );

## Pembuatan tabel list item purchase order
CREATE TABLE `itempo` ( `nomor_PO` varchar(20) NOT NULL, `kode_item` varchar(50) NOT NULL, `nama_item` varchar(50) NOT NULL, `jumlah` int(11) NOT NULL, `harga_jual` int(11), PRIMARY KEY (`kode_item`) );
Gambar 8. Tampilan Form Login
Pembuatan tabel stok CREATE TABLE `stok` ( `kode_item` varchar(20) NOT NULL, `nama_item` varchar(50) NOT NULL, `harga_satuan` varchar(50) NOT NULL,
`jumlah` int(11) NOT NULL,
`tanggal_masuk` date NOT NULL, `sumber` varchar(100), PRIMARY KEY (`kode_item`) );

## Pembuatan tabel penjualan
CREATE TABLE `penjualan` ( `nomor_PO` varchar(20) NOT NULL, `rekanan` varchar(100) NOT NULL, `tanggal_kirim` date NOT NULL, `total` int(11) NOT NULL, `tanggal_lunas` date NOT NULL, PRIMARY KEY (`nomor_PO`) );

## Pembuatan tabel biaya operasional
CREATE TABLE `biaya_operasional` ( `nomor` varchar(20) NOT NULL, `jenis` varchar(75) NOT NULL, `nominal` int(11) NOT NULL, `deskripsi` text, `tanggal` date NOT NULL, `username` varchar(30) NOT NULL, PRIMARY KEY (`nomor`) );

## B. Implementasi Antarmuka
Implementasi  antarmuka  dilakukan  dengan  setiap halaman  program  yang  dibuat  dan  pengkodeanya dalam  bentuk  file  program.  Berikut  ini  adalah implementasi antarmuka Sistem Informasi Perusahaan Supplier : tampilan Form Login (gambar 8),  tampilan  Menu  Pengolahan  Data  Pesanan (gambar 9), tampilan Purchase Order (gambar 10), tampilan  Tambah Purchase  Order (gambar  11), form  Edit Purchase  Order (gambar  12),  halaman Barang Keluar (gambar 13), form Penetapan Harga Jual (gambar 14), form Cetak Tagihan (gambar 15), halaman  Pelunasan  Barang  (gambar  16),  halaman Laporan  Keuangan  (gambar  17),  form  Cetak Laporan  Keuangan  (gambar  18),  tampilan  Menu Pengolahan  Barang  (gambar  19),  form  Barang Masuk  (gambar  20),  form  Biaya  Operasional (gambar  21)  dan  halaman  Pengeloaan  Data User (gambar 22).
Gambar 9. Tampilan Menu Pengolahan Data Pesanan ( Home) Gambar 10. Tampilan Purchase Order Gambar 11. Tampilan Tambah Purchase Order
Gambar 12. Form Edit Purchase Order
Gambar 13. Halaman Barang Keluar
Gambar 14. Form Penetapan Harga Jual
Gambar 15. Form Cetak Tagihan
Gambar 16. Halaman Pelunasan Barang
Gambar 17. Halaman Laporan Keuangan Gambar 18. Form Cetak Laporan Keuangan
Gambar 19. Tampilan Menu Pengolahan Barang

## C. Implementasi Prototype dan Script.aculo.us
Penerapan fitur-fitur dari Prototype dan Script.aculo.us  pada  Sistem  Informasi  perusahaan supplier dijabarkan sebagai berikut:
Drag and Drop Sistem drag and drop dalam Script.aculo.us mendukung objek Draggable yang  dapat  digerakan  dalam  suatu halaman  web,  dan  objek Droppable yang  dapat  dapat menerima  objek draggable. Mengirim  permintaan kepada server sebelumnya  hanya  bisa  dilakukan  dengan cara  mengklik hyperlink atau submitform .  Hal  ini  kini dapat  dilakukan  dengan  melalui  fitur drag  and drop dimana Script.aculo.us menyediakan fungsi untuk
Gambar 20. Form Barang Masuk Gambar 21. Form Biaya Operasional Gambar 22. Halaman Pengelolaan Data User
mengakses server dalam event tertentu selama mekanisme drag  and  drop berlangsung.  Dengan  adanya fitur  d rag  and  drop pada  suatu  halaman  web,  membuat halaman web tersebut menjadi lebih interaktif.
Pada penerapannya dalam sistem informasi ini, fitur drag and  drop digunakan  untuk  memindahkan  data  item  dari Stok kedalam purchase order , serta menghapus data user dengan  cara  men- drop baris  data  yang  ingin  dihapus kedalam kotak keranjang sampah.
Berikut  adalah  gambar  penerapan  fitur drag  and  drop pada sistem informasi perusahaaan supplier . (gambar 23)
Gambar 23. Implementasi Drag and Drop
Gambar 24. Implementasi Effect.Appear

## Effect.Appear
Efek Appear digunakan  untuk  membuat  elemen  tampil secara perlahan-lahan melalui perubahan tingkat transparansi  objek.  Efek Appear biasanya  digunakan untuk mendapatkan perhatian user terhadap elemen yang diinginkan.
Dalam sistem informasi ini, efek Appear digunakan pada saat menambah data barang dan data user . Berikut  adalah  gambar  penerapan  efek Appear pada sistem informasi perusahaaan supplier (gambar 24).

## inPlaceEditor
Objek InPlaceEditor memungkinkan  elemen  yang biasanya  terlihat  sebagai  suatu  nilai  yang read-only berubah menjadi komponen read-write untuk pengeditan dan  kemudian  kembali  ke  format read-only .  Selain  itu InPlaceEditor juga memiliki kemampuan untuk melakukan  operasi  pada  sisi server saat  data  tersebut diinput. Mekanismen ini membuat halaman web menjadi lebih  rapih  namun  semua  elemen  tetap  dapat  diedit dengan mudah, tanpa perlu memaksa user untuk menuju ke  halaman  edit  terpisah.  Dengan  adanya  objek InPlaceEditor,  pemrosesan  data  dalam  suatu  sistem informasi menjadi lebih cepat.
Pada  penerapannya  dalam  sistem  informasi  ini,  objek InPlaceEditor  digunakan  untuk  mengedit  data purchase order , nilai harga jual, serta data user .
Gambar 25. Implementasi inPlaceEditor
Gambar 26. Implemtasi Effect.Highlight
Berikut  ini  digambarkan  penerapan  objek InPlaceEditor dalam  sistem  informasi  perusahaan supplier (gambar 25).

## Effect.Highlight
Efek Highlight digunakan  untuk  membuat background elemen  berubah  warna  dalam  selang  waktu  tertentu kemudian  kembali  ke  warnanya  semula.  Sama  halnya dengan  efek Appear, efek Highlight digunakan  untuk mendapatkan  perhatian user terhadap  elemen  yang diinginkan.
Dalam  sistem  informasi  ini,  efek Highlight digunakan pada  saat  menambah  data  barang,  data user, dan pelunasan barang.
Berikut  adalah  gambar  penerapan  efek Highlight pada sistem informasi perusahaaan supplier (gambar 26).

## D. Pengujian
Tahapan  pengujian  yang  dilakukan  terhadap Sistem  Informasi  perusahaan supplier menggunakan metode user testing .
TABEL I. RENCANA PENGUJIAN Item Uji Detail Pengujian Jenis Pengujian Login Verifikasi Login User testing Pengolahan Data Purchase Order Tambah, Edit, Hapus, Lihat Detail Purchase Order User testing Barang masuk Input Barang User testing Barang keluar Pemenuhan Item PO, Penetapan harga jual. User testing Biaya Operasional Input biaya operasional User testing Pelunasan Barang Pelunasan barang User testing Pengolahan Data User Tambah, Edit, Hapus User User testing

## TABEL II. TABEL PENGUJIAN
LOGIN Kasus dan Hasil Uji (Data Normal) Aksi Input id user dan password Yang Diharapkan Id user dan password dimasukan dengan benar sehingga dapat masuk kedalam menu utama. Pengamatan Ketika tombol ‘Login’ diklik, id user dan password yang dimasukan diterima dan masuk ke menu utama. Kesimpulan Diterima Kasus dan Hasil Uji (Data Salah) Aksi Input id user dan password yang salah Yang Diharapkan Muncul pesan kesalahan dan tidak dapat mengakses menu utama. Pengamatan Ketika tombol ‘Login’ diklik, maka muncul pesan kesalahan. Kesimpulan Diterima
Pengujian  dengan  metode user  testing terdiri dari  dua  tahap,  yaitu  Pengujian  Alpha  dan  Pengujian Beta. Detail pengujian terhadap sistem ditunjukan dalam tabel I.

## E. Pengujian Alpha
Dari  tabel  II  pengujian  login  diketahui  bahwa apabila  input  id  user  dan  password  benar,  maka  sistem akan menampilkan menu utama, namun bila input id user dan password salah, maka akan muncul pesan kesalahan dan  tidak  dapat  mengakses  menu  utama.  Hasil pengamatan ini sesuai dengan yang diharapkan.

## F. Pengujian Beta
Pengujian  beta  merupakan  pengujian  yang dilakukan  secara  objektif  untuk  memastikan  apakah sistem  yang  telah  dibuat  diterima  atau  atau  tidak  oleh pihak  instansi.  Dari  hasi  pengujian  beta  diambil kesimpulan  terhadap    penilaian  penerapan  sistem  yang baru.
Adapun  metode  penelitian  yang  digunakan adalah metode kuantitatif, dimana calon user (responden) diberikan kuesioner dengan ketentuan skala untuk setiap pertanyaan sebagai berikut :
1. Apakah  Sistem  Informasi  Perusahaan Supplier ini mudah dipelajari?
a. Sangat Setuju
b. Setuju
c. Biasa-biasa saja
d. Kurang Setuju
e. Tidak Setuju
2. Apakah  Sistem  Informasi  Perusahaan Supplier ini mudah untuk digunakan?
a. Sangat Setuju
b. Setuju
TABEL III. HASIL PENGUJIAN BETA PERTANYAAN NO. 1 Pertanyaan Apakah Sistem Informasi Perusahaan Supplier ini mudah dipelajari? Kategori Jawaban a b c d e Frekuensi Jawaban 1 3 Jumlah Sampel 4 4 4 4 4 Presentasi 25% 75% 0% 0% 0% TABEL IV. HASIL PENGUJIAN BETA PERTANYAAN NO. 2 Pertanyaan Apakah Sistem Informasi Perusahaan Supplier ini mudah untuk digunakan? Kategori Jawaban a b c d e Frekuensi Jawaban 2 2 Jumlah Sampel 4 4 4 4 4 Presentasi 50% 50% 0% 0% 0% TABEL V. HASIL PENGUJIAN BETA PERTANYAAN NO. 3 Pertanyaan Apakah Sistem Informasi Perusahaan Supplier ini membantu proses kerja CV. Surya Mandiri? Kategori Jawaban a b c d e Frekuensi Jawaban 4 Jumlah Sampel 4 4 4 4 4 Presentasi 100% 0% 0% 0% 0%
c. Biasa-biasa saja
d. Kurang Setuju
e. Tidak Setuju
3. Apakah  Sistem  Informasi  Perusahaan Supplier ini membantu proses kerja CV. Surya Mandiri?
a. Sangat Setuju
b. Setuju
c. Biasa-biasa saja
d. Kurang Setuju
e. Tidak Setuju
4. Apakah  Sistem  Informasi  Perusahaan Supplier sudah dapat memberikan informasi yang diinginkan?
a. Sangat Setuju
b. Setuju
c. Biasa-biasa saja
d. Kurang Setuju
e. Tidak Setuju
5. Apakah  waktu  pengolahan  informasi  dari  Sistem Informasi Perusahaan Supplier ini cepat?
a. Sangat Setuju
b. Setuju
c. Biasa-biasa saja
d. Kurang Setuju
e. Tidak Setuju
Adapun  hasil  pengujian  beta  adalah  sebagai berikut:
Berdasarkan  hasil  pada  tabel  III  didapati bahwa  sebanyak  25%  responden  menyatakan  sangat setuju  bahwa  Sistem  Informasi  Perusahaan Supplier ini mudah  dipelajari,  sedangkan  75%  responden  lainnya menyatakan setuju.
Berdasarkan  hasil  pada  tabel  IV  didapati bahwa  sebanyak  50%  responden  menyatakan  sangat setuju  bahwa  Sistem  Informasi  Perusahaan Supplier ini mudah  untuk  digunakan,  sedangkan  50%  responden lainnya menyatakan setuju.
Berdasarkan hasil pada tabel V didapati bahwa sebanyak 100%  atau  seluruh  responden  menyatakan  sangat  setuju bahwa  Sistem  Informasi  Perusahaan Supplier ini membantu proses kerja dari CV. Surya Mandiri.
TABEL VI. HASIL PENGUJIAN BETA PERTANYAAN NO. 4
Pertanyaan Apakah Sistem Informasi Perusahaan Supplier sudah dapat memberikan informasi yang diinginkan? Kategori Jawaban a b c d e Frekuensi Jawaban 3 1 Jumlah Sampel 4 4 4 4 4 Presentasi 75% 25% 0% 0% 0%
Berdasarkan  hasil  pada  tabel  VI  didapati bahwa  sebanyak  75%  responden  menyatakan  sangat setuju  bahwa  Sistem  Informasi  Perusahaan Supplier ini sudah  dapat  memberikan  informasi  yang  diinginkan, sedangkan 25% responden lainnya menyatakan setuju.
Berdasarkan  hasil  pada  tabel  VII  didapati bahwa  sebanyak  25%  responden  menyatakan  sangat setuju  bahwa  waktu  pengolahan  informasi  dari  Sistem Informasi Perusahaan Supplier ini cepat, 50% responden menyatakan  setuju,  sedangkan 25% lainnya  menyatakan biasa-biasa saja.
V.     KESIMPULAN Dengan penerapan Prototype dan
Script.aculo.us  pada  sistem  informasi  perusahaan supplier ,  waktu  pengolahan  informasi  menjadi  lebih cepat.
Ketika  digunakan  bersama,  Prototype  dan Script.Aculo.us dapat mengubah carapendekatan terhadap antarmuka web dalam perancangan suatu sistem informasi  dengan  menciptakan  fitur-fitur  layaknya aplikasi desktop hanya dengan sedikit kode.
Apabila  data  yang  diinput  kedalam  sistem benar,  sistem  akan  menampilkan  output  seperti  yang diharapkan.  Dan  apabila  data  yang  diinput  salah,  sistem akan menampilkan pesan kesalahan.
Sistem informasi perusahaan supplier ini mudah untuk dipelajari dan digunakan.
TABEL VII. HASIL PENGUJIAN BETA PERTANYAAN NO. 5 Pertanyaan Apakah waktu pengolahan informasi dari Sistem Informasi Perusahaan Supplier ini cepat? Kategori Jawaban a b c d e Frekuensi Jawaban 1 2 1 Jumlah Sampel 4 4 4 4 4 Presentasi 25% 50% 25% 0% 0%

## DAFTAR PUSTAKA
[1] L. Babin, “ Beginning Ajax with PHP” , Apress, Berkeley,2007.
[2] J. Bacon, “ Practical PHP and MySQL: Building Eight Dynamic Web Applications ”, Prentice Hall, Boston, 2007.
[3] D. Crane, E. Pascarello,“ AJAX In Action” , Manning Publication, Greenwitch, 2006.
[4] D. Crane, B. Bilbeault, T. Locke, “ Prototype & Scriptaculous In Action ”, Manning Publication, Greenwitch, 2007.
[5] C.  Darie,  B.  Bogdan,  F.  Chresches-Tosa,  “ AJAX  and  PHP: Building  Responsive  Web  Applications”, PACKT  Publishing, Birmingham, 2006.
[6] S.  Dopp,  (20  Agustus  2012),  “ Intro  to  XHTML:  A  Tutorial  for the Beginner ”, tersedia di: http://www.sarahdopp.com
[7] J. Ducket, “ Beginning Web Programming with HTML, XHTML, and CSS”, Wiley Publishing Inc, Indianapolis, 2008.
[ 8 ] A. Falani, “ Perancangan Basis Data ”, Fakultas Ilmu Komputer Universitas Narotama, Surabaya, 2010.
[9] L.  Hakim,  “ Membongkar  Trik  Rahasia  Para  Master  PHP”, Lokomedia, Yogyakarta, 2008.
[10]  C.  Heilman,  “ Beginning  JavaScript  with  DOM  Scripting  and Ajax From Novice to Professional”, Apress, Berkeley, 2006.
[11]  H.  M.  Jogianto, “Analisa  &  Desain  Sistem  Informasi: Pendekatan  terstruktur  teori  dan  praktek  aplikasi  bisnis”, Penerbit ANDI, Yogyakarta, 2001.
[12] A.  Kadir,  “ Mastering  Ajax  dan  PHP” ,Penerbit  ANDI, Yogyakarta,2009.
[13] K.  Pearlson,  C.  Saunders,  “ Managing  and  Using  Information System: A Strategic Approach, 4 th Edition ”, John Wiley & Sons Inc, Hoboken, 2010.
[14] C.  Porteneuve,  “ Prototype  and  script.aculo.us”, The  Pragmatic Bookshelf,Dallas, 2007.
[15]  K. Rainer, C. Cegielski, “ Introduction to Information System 3 rd
Edition ”, John Wiley & Sons Inc, Hoboken, 2011.
[16]  B. Sidik, “ Javascript ”, Informatika, Bandung, 2011.
[17]  I.  Sommerville,  “ Software  Engineering  9 th Edition ”,  Addison Wesley, Boston, 2011.
[18]  R.  Stair,  G.  Reynolds,  “ Principles  of  Information  Systems ”, Course Technology, Boston, 2010.
[19]  ______,  “ MySQL  5.5  Reference  Manual ”,  Oracle  USA  Inc, Redwood City, 2013.