1 BAB II LANDASAN TEORI 2.1 Pengertian Electronic Commerce (E-Commerce) Dalam bukunya yang berjudul E-Business H. Dadang Munandar, S.E, M.Si (2011:1) ...
Pengertian Electronic Commerce (E-Commerce) Dalam bukunya yang berjudul E-Business H. Dadang Munandar, S.E, M.Si
(2011:1) menjelaskan bahwa “E-Commerce lebih condong untuk menekankan pada proses membeli dan menjual ataupun bertukar produk, jasa atau informasi melalui komputer” (Munandar, 2011). Jenis E-Commerce Ada beberapa jenis e-commerce yang biasanya dilakukan banyak orang melalui media internet seperti di jelaskan di bawah ini. 1. E-Commerce Business To Business (B2B) Jenis e-commerce Business to Business atau B2B adalah bisnis yang dilakukan oleh orang atau pihak yang saling memiliki kepentingan bisnis di dalamnya dimana kedua belah pihak biasanya sudah saling mengenal dan saling mengetahui proses bisnis yang mereka lakukan satu sama lain. Biasanya jenis bisnis B2B dilakukan secara berkelanjutan atau saling berlangganan, transaksi ini dilakukan karena diantara kedua belah pihak saling menguntungkan dan adanya kepercayaan satu sama lain. Contoh dari bisnis B2B adalah dua perusahaan yang saling mengadakan transaksi jual beli atau supply barang yang dilakukan melalui transaksi online dari internet, begitu juga dengan payment yang biasanya mereka lakukan yaitu dengan menggunakan kredit card dari internet.
http://digilib.mercubuana.ac.id/
10
2. E-Commerce Business To Consumer (B2C) Jenis E-Commerce B2C adalah jenis bisnis yang dilakukan antara pelaku bisnis dengan konsumen, seperti antara produsen yang menjual dan menawarkan produknya ke konsumen umum secara online. Disini pihak produsen akan melakukan bisnis dengan menjual dan memasarkan produknya ke konsumen tanpa adanya feedback dari konsumen untuk melakukan bisnis kembali kepada pihak produsen, yang artinya produsen hanya menjual atau memasarkan produk ataupun jasanya dan pihak konsumen hanya sebagai pemakai atau pembeli. 3. E-Commerce C2C Jenis E-Commerce Consumen to Consumen dilakukan antara konsumen dengan konsumen, sebagai contoh pelanggan dari sebuah produsen akan menjual kembali kepada konsumsen lainnya. 4. E-Commerce Consumen to Business (C2B) Jenis E-Commerce Consumen to Businses dilakukan oleh konsumen kepada para produsen yang menjual produk ataupun jasanya, sebagai contoh konsumen akan memberitahukan detail produk atau jasa yang dia inginkan melalui media internet kepada para produsen, yang kemudian produsen yang mengetahui permitnaan tersebut akan menawarkan produk atau jasa yang diinginkan oleh konsument tersebut.
http://digilib.mercubuana.ac.id/
11
2.2
Metode Pengumpulan Data (Sutabri, 2012) Salah satu faktor penting dalam pembangunan/pengembangan
sistem informasi adalah memahami sistem yang ada dan permasalahannya. Selain mengetahui bagian-bagian mana saja yang akan dipelajarai, kita juga harus memilih teknik yang tepat untuk mengumpulan data. Berikut teknik yang digunakan penulis dalam pengumpulan data. 2.3
Studi Kepustakaan Studi kepustakaan adalah segala usaha yang dilakukan oleh peneliti untuk
menghimpunan informasi yang relevan dengan topik atau masalah yang akan atau sedang diteliti. Informasi tersebut diperoleh dari buku-buku ilmiah, laporan penelitian, karangan-karangan ilmiah, tesis dan disertasi, buku tahunan, ensiklopedia dan sumber-sumber tertulis baik tercetak maupun elektronik lain. 2.4
Studi Lapangan
1. Teknik Observasi Pengamatan langsung/observasi adalah teknik pengumpulan data dengan langsung melihat kegiatan yang dilakukan oleh user. Salah satu keuntungan dari pengamatan langsung ini adalah bahwa peneliti dapat mengenal lingkungan fisik seperti tata letak ruangan serta peralatan dan formulir yang digunakan serta sangat membantu untuk melihat proses bisnis beserta kendala-kendalanya. Penggunaan
teknik
observasi
memberikan
beberapa
keuntungan
dibandingkan dengan teknik pengumpulan data lain. Keuntungan dari teknik observasi ini adalah: 1. Data yang dikumpulkan cenderung memiliki keandalan yang tinggi. 2. Dengan teknik ini peneliti dapat melihat langsung apa yang sedang dikerjakan. Peneliti dapat mengidentifikasi kegiatan-kegiatan yang digambarkan dengan tidak tepat oleh teknik pengumpulan data yang lain.
http://digilib.mercubuana.ac.id/
12
3. Peneliti dapat mengukur tingkat suatu pekerjaan. Disamping mempunyai kelebihan, teknik ini juga memiliki beberapa kelemahan yaitu sebagai berikut: 1. Umumnya orang yang diamati merasa terganggu atau tidak nyaman sehingga melakukan pekerjaannya dengan tidak semestinya. 2. Observasi dapat menganggu pekerjaan yang sedang dilakukan. 3. Orang yang diamati cenderung melakukan pekerjaannya dengan lebih baik dari biasanya dan sering menutup-nutupi kekurangan yang ada.
2.5
Framework (Pratama, 2010) Framework adalah sekumpulan perintah atau fungsi dasar
yang dapat membantu dalam menyelesaikan proses-proses yang lebih kompleks, menangani berbagai masalah dalam pemrograman seperti koneksi database, pemanggilan variable dan lain-lain. Framework dibangun untuk mempermudah developer untuk membangun sebuah aplikasi sehingga dapat lebih fokus dan lebih cepat. Menurut Pressman (2005, p282), Framework adalah kerangka kode yang disempurnakan dengan classes dan spesifik atau dengan fungsi yang telah dirancang untuk mengatasi masalah yang dihadapi. Fungsi-fungsi standar yang tersedia dalam suatu framework adalah fungsi enkripsi, email, SEO, session, security, calendar, bahasa, manipulasi gambar, grafik, upload, validasi dsb. Macam-macam Framework: 1. Cake PHP 2. CodeIgniter 3. Zend 4. Yii 5. Laravel, dll
http://digilib.mercubuana.ac.id/
13
2.6
Arsitektur Model-View-Controller (Pratama, 2010) Arsitektur Model-View-Controller (MVC) muncul sejak
era 70-an atas pemikiran Prof. Trygve Reenskaug, seorang berkebangsaan Norwegia. Dasar arsitektur ini adalah memisahkan antara logika aplikasi dengan tampilan. Menggunakan pola ini diharapkan dapat meminimalisasi penulisan perintah, sehingga resiko terjadinya bug juga minimal, serta meningkatkan efisiensi pembangunan aplikasi. Pada awal penerapannya, konsep MVC digunakan untuk Smalltalk. Namun saat ini arsitektur MVC luas digunakan dalam dunia framework pemrograman baik untuk aplikasi desktop-based maupun web-based. Beberapa bahasa pemrograman web-based yang framework-nya menerapkan konsep MVC adalah ASP, ActionScript, Coldfusion, JavaScript, XML, Ruby. Contoh Framework PHP MVC adalah CakePHP, Symfony, dan Codeigniter. Model • Meringkas application state • Merespon state queries • Membuka fungsi-fungsi dari aplikasi
View • Me-render model • Meminta update dari model • Mengirimkan masukan dari user ke Controller
Controller • Menentukan jalannya aplikasi • Memetakan user action ke dalam user updates • Memilih view untuk direspon • Satu untuk setiap fungsi
Gambar 2. 2 Arsitektur MVC (A.S & M. Shalahuddin, 2011)
2.7
JQuery (Komputer & Andi, 2012) Jquery merupakan pustaka dari Javascript yang
dibangun untuk mempercepat dan memperingkas serta menyederhanakan manipulasi dokumen HTML, penanganan event dan animasi untuk mempercepat pengembangan web. Dengan Jquery, developer akan dimanjakan dengan suatu
http://digilib.mercubuana.ac.id/
14
pemrograman Javascript yang sangat sederhana jika dibandingkan dengan native Javascript. Jquery dirilis pertama kali oleh John Resig pada tahun 2006. Fitur utama dari Jquery diantaranya: 1. Mengubah Tampilan Halaman Website Jquery menawarkan solusi untuk mengatasi perintah CSS yang tidak didukung oleh semua browser sehingga kesenjangan yang terjadi antara browser dalam urusan CSS akan dapat teratasi dengan baik. 2. Merespon Interaksi User Website yang baik tidak cukup digambarkan dengan user interface dan tampilan yang menarik. Namun bagaimana pengunjung dapat berinteraksi dengan website itu sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani errorhandling. Jquery hadir dengan menambahkan penanganan eventhandling yang mudah diterapkan dalam website. 3. Mengambil Informasi dari Server tanpa harus me-refresh halaman Merupakan salah satu konsep dasar dari AJAX (Asynchronous Javascript and XML). Jquery dapat menyederhanakan kode-kode pada AJAX agar mudah digunakan dan meringankan beban bandwidth yang digunakan. 4. Dapat mengakses elemen dalam dokumen Jquery menawarkan cara yang mudah dalam mengakses bagian tertentu dari suatu halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML. Untuk dapat memulai mempelajari Jquery, kita dapat mendownloadnya secara gratis pada situs http://www.jquery.com. Contoh sederhana pemrograman Hello Word menggunakan Jquery bisa dilihat pada kode program berikut: <script type=”text/javascript”> $(document).ready(function(){ $(.”tombol1”).click(function(){ $(“p”).hide(1000); });
http://digilib.mercubuana.ac.id/
15
$(.”tombol2”).click(function(){ $(“p”).show(1000); }); }); Pada bagian tag tambahkan kode program berikut ini untuk menampilkan Jquery di dalam browser.
Hello Word
2.8
JSON (JavaScript Object Notation) JSON adalah format pertukaran data yang ringan, mudah dibaca dan ditulis
oleh manusia, serta mudah diterjemahkan dan dibuat oleh komputer. JSON merupakan format teks yang tidak bergantung pada bahasa pemrograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Pyhton dll. JSON terbuat dari dua struktur:
Kumpulan pasang nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary).
Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vector vector), daftar (list), atau urutan (sequence).
Struktur-struktur data ini disebut sebagai struktur data universal. JSON dipakai untuk dua hal yang pertama untuk format transfer data antar device/OS/bahasa pemograman yang berbeda dan sebagai media penyimpanan data seperti MongoDB.
http://digilib.mercubuana.ac.id/
16
Walaupun XML sudah sejak lama dipakai dalam format transfer data, namun beberapa tahun terkahir, JSON menggeser posisi XML. Kelebihan menggunakan JSON dibanding XML sebagai format pertukaran data adalah sebagai berikut: 1. Ukuran lebih kecil dibanding XML, efeknya transfer data lebih cepat dan lebih hemat resource, terutama bandwidth. 2. JSON adalah format data bawaan di JavaScript, artinya jika data dari server di kirim ke client, dan client menggunakan javascript, maka tidak perlu library tambahan untuk memprosesnya. 3. Dibandingkan XML, format JSON lebih sederhana. 4. Library JSON ada di setiap bahasa pemograman sehingga memudahkan programmer yang berbeda bahasa pemograman. Berikut contoh data JSON: Source Code {"list_event": [ {"eventID":"1", "judul":"Pengajian Akbar menyambut ramadhan", "tanggal":"2014-05-19", "jam":"20:00", "lokasi":"Masjid Kampus UGM" } ] } “list_event” adalah array JSON. Array terdiri dari beberapa objek. Dalam kasus ini, terdapat 1 objek event. Masing-masing objek event mempunyai 5 field. 2.9
Google Maps API Menurut Wardhana, Iriani dan Hendry pada tahun 2012, Google Maps Api
merupakan salah satu fitur keluaran Google yang diberikan pada setiap penggunanya secara gratis, sehingga setiap orang diberi kesempatan untuk
http://digilib.mercubuana.ac.id/
17
menggunakan dan mengembangkan teknologi tersebut secara bebas, juga memberikan pula fasilitas - fasilitas ke dunia dalam memanfaatkan Google Maps. Fasilitas fasilitas tersebut diistilahkan dengan nama Google Maps API. Beberapa daftar API yang tersedia yaitu -
Maps JavaScript API
Memasang Gmaps melalui Javascript. -
Maps API for flash
Memasang Gmaps melalui flash. -
Google Earth API
Memasang Google Earth ke dalam webpage. -
Static Maps API
Memasang Gmaps ke webpage atau mobile device. -
Webservices
Request informasi geografis via http dengan return format json/xml. -
Maps Data API Update informasi geografis melalui Google Data API Google Maps
API merupakan sebuah library javascript, dengan mempelajari HTML dan javascript, serta koneksi internet. Google Maps API dapat dibangun dan dirancang aplikasi peta digital yang handal dan powerful. Sampai saat ini Google Maps API sudah sampai versi 3.0, dengan perkembangan tiap versinya diharapkan selalu memiliki kinerja yang semakin meningkat dibandingkan dengan versi-versi terdahulunya. 2.10
HTML (Hypertext Markup Language) (Arief, 2011) HTML (Hypertext Markup Language) merupakan salah satu
format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Dokumen HTML dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan pada web browser. HTML merupakan file teks yang tersusun atas elemen-elemen yang disebut dengan tag.
http://digilib.mercubuana.ac.id/
18
Tag adalah kode yang digunakan untuk me-mark-up teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. Tag terdiri atas tag pembuka yaitu dan tag penutup yaitu . Setiap dokumen HTML yang akan di tampilkan pada web browser harus diakhiri dengan ekstensi (.html) atau (.htm). Berikut elemen-elemen dasar yang digunakan dalam membuat dokumen HTML. ….informasi dokumen….. ….informasi yang ditampilkan pada halaman web browser…. Setiap tag dapat memunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. 2.11
C# C# (dibaca: C sharp) merupakan sebuah bahasa pemrograman yang
berorientasi objek yang dikembangkan oleh Microsoft sebagai bagian dari inisiatif kerangka .NET Framework. Bahasa pemrograman ini dibuat berbasiskan bahasa C++ yang telah dipengaruhi oleh aspek-aspek ataupun fitur bahasa yang terdapat pada bahasa-bahasa pemrograman lainnya seperti Java, Delphi, Visual Basic, dan lain-lain) dengan beberapa penyederhanaan. Menurut standar ECMA-334 C# Language Specification, nama C# terdiri atas sebuah huruf Latin C (U+0043) yang diikuti oleh tanda pagar yang menandakan angka # (U+0023). Tanda pagar # yang digunakan memang bukan tanda kres dalam seni musik (U+266F), dan tanda pagar
http://digilib.mercubuana.ac.id/
19
# (U+0023) tersebut digunakan karena karakter kres dalam seni musik tidak terdapat di dalam keyboard standar.
Gambar 2. 3 Microsoft Visual C# .NET
2.11.1 Sejarah Pada akhir dekade 1990-an, Microsoft membuat program Microsoft Visual J++ sebagai sebuah langkah percobaan untuk menggunakan Java di dalam sistem operasi Windows untuk meningkatkan antarmuka dari Microsoft Component Object Model (COM). Akan tetapi, akibat masalah dengan pemegang hak cipta bahasa pemrograman Java, Sun Microsystems, Microsoft pun menghentikan pengembangan J++, dan beralih untuk membuat pengganti J++, kompilernya dan mesin virtualnya sendiri dengan menggunakan sebuah bahasa pemrograman yang bersifat general-purpose. Untuk menangani proyek ini, Microsoft merekrut Anders Helsberg, yang merupakan mantan karyawan Borland yang membuat bahasa Turbo Pascal, dan Borland Delphi, yang juga mendesain Windows Foundation Classes (WFC) yang digunakan di dalam J++. Sebagai hasil dari usaha tersebut, C# pun pertama kali diperkenalkan pada bulan Juli 2000 sebagai sebuah bahasa pemrograman modern berorientasi objek yang menjadi sebuah bahasa pemrograman utama di dalam pengembangan di dalam platform Microsoft .NET Framework.
http://digilib.mercubuana.ac.id/
20
Pengalaman Helsberg sebelumnya dalam pendesain bahasa pemrograman seperti Visual J++, Delphi, Turbo Pascal) dengan mudah dilihat dalam sintaksis bahasa C#, begitu pula halnya pada inti Common Language Runtime (CLR). Dari kutipan atas interview dan makalah-makalah teknisnya ia menyebutkan kelemahankelemahan yang terdapat pada bahasa pemrograman yang umum digunakan saat ini, misalnya C++, Java, Delphi, ataupun Smalltalk. Kelemahan-kelemahan yang dikemukakannya itu yang menjadi basis CLR sebagai bentukan baru yang menutupi kelemahan-kelemahan tersebut, dan pada akhirnya memengaruhi desain pada bahasa C# itu sendiri. Ada kritik yang menyatakan C# sebagai bahasa yang berbagi akar dari bahasa-bahasa pemrograman lain. [1] Fitur-fitur yang diambilnya dari bahasa C++ dan Java adalah desain berorientasi objek, seperti garbage collection, reflection, akar kelas (root class), dan juga penyederhanaan terhadap pewarisan jamak (multiple inheritance). Fitur-fitur tersebut di dalam C# kini telah diaplikasikan terhadap iterasi, properti, kejadian (event), metadata, dan konversi antara tipe-tipe sederhana dan juga objek. C# didisain untuk memenuhi kebutuhan akan sintaksis C++ yang lebih ringkas dan Rapid Application Development yang 'tanpa batas' (dibandingkan dengan RAD yang 'terbatas' seperti yang terdapat pada Delphi dan Visual Basic). Agar mampu mempromosikan penggunaan besar-besaran dari bahasa C#, Microsoft, dengan dukungan dari Intel Corporation dan Hewlett-Packard, mencoba mengajukan standardisasi terhadap bahasa C#. Akhirnya, pada bulan Desember 2001, standar pertama pun diterima oleh European Computer Manufacturers Association atau Ecma International (ECMA), dengan nomor standar ECMA-334. Pada Desember 2002, standar kedua pun diadopsi oleh ECMA, dan tiga bulan kemudian diterima oleh International Organization for Standardization (ISO), dengan nomor standar ISO/IEC 23270:2006.
http://digilib.mercubuana.ac.id/
21
2.11.2 Tujuan Desain Standar
European
Computer
Manufacturer
Association
(ECMA)
mendaftarkan beberapa tujuan desain dari bahasa pemrograman C#, sebagai berikut: 1. Bahasa pemrograman C# dibuat sebagai bahasa pemrograman yang bersifat bahasa pemrograman general-purpose (untuk tujuan jamak), berorientasi objek, modern, dan sederhana. 2. Bahasa pemrograman C# ditujukan untuk digunakan dalam mengembangkan komponen perangkat lunak yang mampu mengambil keuntungan dari lingkungan terdistribusi. 3. Portabilitas programmer sangatlah penting, khususnya bagi programmer yang telah lama menggunakan bahasa pemrograman C dan C++. 4. Dukungan untuk internasionalisasi (multi-language) juga sangat penting. 5. C# ditujukan agar cocok digunakan untuk menulis program aplikasi baik dalam sistem klien-server (hosted system) maupun sistem embedded (embedded system), mulai dari perangkat lunak yang sangat besar yang menggunakan sistem operasi yang canggih hingga kepada perangkat lunak yang sangat kecil yang memiliki fungsi-fungsi terdedikasi. 6. Meskipun aplikasi C# ditujukan agar bersifat 'ekonomis' dalam hal kebutuhan pemrosesan dan memori komputer, bahasa C# tidak ditujukan untuk bersaing secara langsung dengan kinerja dan ukuran perangkat lunak yang dibuat dengan menggunakan bahasa pemrograman C dan bahasa rakitan. Bahasa C# harus mencakup pengecekan jenis (type checking) yang kuat, pengecekan larik (array), pendeteksian terhadap percobaan terhadap penggunaan Variabel-variabel yang belum diinisialisasikan, portabilitas kode sumber, dan pengumpulan sampah (garbage collection) secara otomatis.
http://digilib.mercubuana.ac.id/
22
2.12
Basis Data
(Fathansyah, 2012) Basis data terdiri atas 2 kata, yaitu Basis dan Data. Basis dapat diartikan sebagai markas atau gudang, tempat bersarang/berkumpul. Sedangkan Data adalah representasi fakta dunia nyata yang mewakili suatu objek seperti manusia (pegawai, siswa, pembeli, pelanggan), barang, hewan, peristiwa, konsep, keadaan dan sebagainya. Dalam pengertian satu kesatuan istilah, basis data (Database) dapat didefinisikan dalam beberapa sudut pandang berikut: 1. Kumpulan data yang saling berhubungan yang disimpan secara bersama sedemikian rupa dan tanpa pengulangan (redundansi) yang tidak perlu, untuk memenuhi berbagai kebutuhan. 2. Kumpulan file/table/arsip yang saling berhubungan yang disimpan dalam media penyimpanan elektronis. 3. Himpunan kelompok data (arsip) yang saling berhubungan yang diorganisasi sedemikian rupa agar kelak dapat dimanfaatkan kembali dengan cepat dan mudah. 2.13
Sistem Basis Data (Fathansyah, 2012) Sistem adalah sebuah tatanan yang terdiri atas sejumlah
komponen fungsional yang saling berhubungan dan secara bersama-sama bertujuan untuk memenuhi suatu proses tertentu. Sistem Basis Data merupakan sistem yang terdiri atas kumpulan tabel data yang saling berhubungan dan sekumpulan program (yang biasa disebut DBMS/Data Base Management Sistem) yang memungkinkan beberapa pemakai dan/atau program lain untuk mengakses dan memanipulasi tabletabel data tersebut.
Basis Data memiliki 2 bahasa yang dipilah dalam dua
bentuk, yaitu: 1. Data Definition Language (DDL) Struktur basis data yang menggambarkan skema basis data secara keseluruhan dan didesain dengan bahasa khusus yang disebut Data
http://digilib.mercubuana.ac.id/
23
Definition Language (DDL). Dengan bahasa ini dapat membuat tabel baru, membuat indeks, mengubah tabel, menentukan struktur penyimpanan tabel, dan sebagainya. 2. Data Manipulation Language (DML) Merupakan bentuk bahasa basis data yang berguna untuk melakukan manipulasi dan pengambilan data pada suatu basis data. Manipulasi data dapat berupa: a. Penambahan data baru ke suatu basis data b. Penghapusan data dari suatu basis data c. Pengubahan data dari suatu basis data Pada level fisik, kita harus mendefinisikan algoritma yang memungkinkan pengaksesan yang efisien terhadap data. Pada level yang lebih tinggi, yang dipentingkan bukan hanya efisiensi akses, tetapi juga efesiensi interaksi manusia (pemakai) dengan system (kemudahan permintaan akses) Data Manipuation Language (DML) merupakan bahasa yang bertuuan memudahkan pemakaian untuk mengakses data sebagaimana direpresentasikan oleh model dara. Ada dua jenis DML, yaitu: a. Procedural, yang mensyaratkan agar pemakai menentukan, data apa yang diinginkan serta bagaimana cara mendapatkannya. b. Nonprocedural, yang membuat pemakai dapat menentukan data apa yang diinginkan tanpa menyebutkan bagaimana cara mendapatkannya. 2.14
Diagram Alir/Flowchart (Yasin,
2012)
Flowchart
merupakan
gambar
atau
bagan
yang
memperlihatkan urutan dan hubungan antar proses beserta instruksinya. Gambaran ini dinyatakan dengan simbol. Setiap simbol menggambarkan proses tertentu. Sedangkan hubungan antar proses digambarkan dengan garis penghubung.
http://digilib.mercubuana.ac.id/
24
“Algoritma merupakan suatu alur pemikiran seseorang yang harus dapat dituangkan secara tertulis. Salah satu caranya dengan menggunakan simbol-simbol atau gambar yang memang sudah standar pada dunia komputer. Gambar dan simbol itu disebut dengan flowchart. Dengan menggunakan flowchart (diagram alir) maka seorang programmer dapat memberikan idenya secara tertulis sehingga dapat dipahami oleh programmer lain” menurut (Antonius Rahmat C, 2010). Flowchart ini merupakan langkah awal pembuatan program. Dengan adanya flowchart, urutan proses kegiatan menjadi lebih jelas. Flowchart di susun dengan simbol-simbol. Simbol ini dipakai sebagai alat bantu menggambarkan proses di dalam program. Dalam pembuatan flowchart tidak ada rumus atau patokan yang bersifat mutlak. Karena flowchart merupakan gambaran hasil pemikiran dalam menganalisa suatu masalah dengan komputer. Sehingga flowchart yang dihasilkan dapat bervariasi antara satu pemrogram dengan pemrogram lainnya. Simbol-simbol yang dijadikan standar dalam menggambarkan sebuah flowchart adalah sebagai berikut:
http://digilib.mercubuana.ac.id/
25
Table 2. 1 Simbol Flowchart
Sumber: http://conceptdraw.com 2.15
Pengertian Unified Modelling Language (UML) (Yasin, 2012) Unified Modelling Language (UML) adalah sebuah “bahasa”
yang telah menjadi standar dalam industri untuk visualisasi, merancang dan mendokumentasikan sistem perangkat lunak. Dengan menggunakan UML kita dapat membuat model untuk semua jenis aplikasi perangkat lunak dimana aplikasi tersebut dapat berjalan pada perangkat keras, sistem operasi dan jaringan apapun, serta ditulis daam bahasa pemrograman apapun.
http://digilib.mercubuana.ac.id/
26
UML mendefinisikan notasi dan syntax/semantic. Notasi UML merupakan sekumpulan bentuk khusus untuk menggambarkan berbagai diagram perangkat lunak sedangkan UML syntax mendefinisikan bagaimana bentuk-bentuk tersebut dapat dikombinasikan. UML dimulai secara resmi pada bulan Oktober 1994, Booch, Rumbaugh dan Jacobson merupakan tiga tokoh yang metodeloginya paling banyak dipakai, mempelopori organisasi yang bertujuan untuk menyatukan metodelogi-metodelogi berorientasi objek. Organisasi tersebut dinamakan OMG (Object Modeling Group). Pada tahun 1995 OMG merealisasikan draf pertama dari UML versi 0.8 dan terus melakukan perkembangan hingga UML menjelma menjadi standar bahasa pemodelan untuk aplikasi berorientasi objek. Gambaran dari UML dapat dijabarkan sebagai berikut: 1. UML sebagai Bahasa Pemodelan Memiliki pembendaharaan kata dan cara untuk mempresentasikan secara fokus pada konseptual dan fisik dari suatu sistem. 2. UML sebagai bahasa untuk menggambarkan sistem UML
menggambarkan
model
yang
dapat
dimengerti
dan
dipresentasikan ke dalam model tekstual bahasa pemrograman. 3. UML sebagai bahasa untuk menspesifikasikan sistem UML menunjukkan semau spesifikasi keputusan analisis, desain dan implementasi yang penting yang harus dibuat pada saat pengembangan dan penyebaran dari sistem software intensif 4. UML sebagai bahasa membangun system Model UML dapat dikoneksikan secara langsung pada bahasa pemrograman visual. 5. UML sebagai bahasa untuk pendokumentasian system UML menunjukan dokumentasi dari arsitektur sistem dan detail dari semuanya. UML hanya memberikan bahasa untuk memperlihatkan permintaan dan untuk tes. Penggunaan UML bertujuan untuk memodelkan suatu sistem (bukan hanya perangkat lunak) yang menggunakan konsep berorientasi objek serta menciptakan suatu bahasa pemodelan yang dapat digunakan baik oleh manusia maupun mesin.
http://digilib.mercubuana.ac.id/
27
UML dapat mendefinisikan diagram-diagram sebagai berikut: 1. Use Case Diagram 2. Class Diagram 3. Statechart Diagram 4. Activity Diagram 5. Sequence Diagram 6. Collaboration Diagram 7. Componen Diagram 8. Deployment Diagram Diagram-diagram tersebut untuk selanjutnya akan digunakan penulis sebagai pemodelan aplikasi pada tugas akhir ini. Diagram yang akan penulis gunakan yakni Use Case Diagram, Activity Diagram dan Sequence Diagram. 2.16
Class Diagram (Yulianto, H, Sari, Astuti, & Witanti, 2010) Class Diagram merupakan
salah satu diagram utama dari Unified Modelling Language (UML) untuk menggambarkan kelas atau blueprint objek pada sebuah sistem. Pada kelas diagram juga digambarkan bagaimana inetraksi hubungan antar kelas dalam sebuah konstruksi piranti perangkat lunak seperti hubungan asosiasi, agregasi, komposisi dan inheritance. Kelas (Class) adalah sebuah spesifikasi yang jika diinisialisasi akan menghasilkan sebuah objek dan merupakan inti dari pengembangan dan desain berorientasi objek. Kelas menggambarkan keadaan (atribut/property) suatu sistem sekaligus menawarkan layanan untuk memanipulasi keadaan tersebut. Kelas memiliki tiga area pokok, yakni nama (stereotype), atribut dan metode atau operasi. Atribut dan metode dapat memiliki salah satu sifat berikut ini: 1. Private, tidak dapat dipanggul dari luar kelas yang bersangkutan. 2. Protected, hanya dapat dipanggil oleh kelas yang bersangkutan dan anakanak yang mewarisinya. 3. Public, dapat dipanggil oleh siapa saja.
http://digilib.mercubuana.ac.id/
28
Kelas dapat merupakan implementasi dari sebuah interface, yaitu class abstrak yang hanya memiliki metode. Interface tidak dapat langsung diinstansiasikan, tetapi harus diimplementasikan dahulu menjadi sebuah class.
Gambar 2. 4 Contoh Kelas
2.17
Use Case Diagram (Yasin, 2012) Use Case Diagram menggambarkan fungsionalitas yang
diharapkan dari sebuah sistem, yang ditekankan adalah “apa” yang diperbuat sistem dan bukan “bagaimana”. Sebuah use case merepresentasikan sebuah interaksi antara actor dengan sistem. Contohnya login ke sistem, membuat sebuah daftar belanja dan sebagainya. Dengan memanfaatkan pemodelan Use Case Diagram, kita dapat menyusun requirement sebuah sistem, mengkomunikasikan rancangan dengan client dan merancang test case untuk semua feature yang ada pada sistem. Komponen pembentuk use case diagram adalah: 1. Sebuah/seorang aktor adalah entitas manusia/mesin yang berinteraksi dengan syistem untuk melakukan pekerjaan-pekerjaaan tertentu. 2. Use Case adalah dialog antara actor dengan sistem yang akan menggambarkan fungsi yang diberikan oleh sistem. 3. Use Case Relationship adalah suatu hubungan, baik itu antara actor dan use case atau use case dan use case. 4. Association/Directed Association, yaitu hubungan statis antar elemen. Umumnya menggambarkan elemen yang memiliki atribut berupa elemen lain. 5. Generalization/Pewarisan, merupakan hubungan hirarki antar elemen. Elemen dapat diturunkan dari elemen lain dan mewarisi semua atribut dan metode elemen asalnya dan menambahkan fungsionalitas baru, sehingga disebut anak dari elemen yang diwarisinya.
http://digilib.mercubuana.ac.id/
29
Table 2. 2 Simbol Use Case Diagram
Sumber: http://raharja.ac.id 2.18
Activity Diagram (Yasin, 2012) Activity Diagram menggambarkan berbagai alir aktivitas
dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. Activity diagram tidak menggambarkan sifat internal dari sebuah sistem dan interaksi antara beberapa subsistem secara eksak, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas dari level atas secara umum. Activity diagram
http://digilib.mercubuana.ac.id/
30
berupa flowchart yang digunakan untuk memperlihatkan aliran kerja dari sistem. Notasi yang digunakan dalam activity diagram adalah sebagai berikut: 1. Activity Notasi yang menggambarkan pelaksanaan dari beberapa proses dalam aliran pekerjaan. 2. Transition Notasi yang digunakan untuk memperlihatkan jalan aliran control dari activity ke activity. 3. Decision Notasi yang menandakan kontrol cabang aliran berdasarkan decision point 4. Synchronization bars Aliran kerja notasi ini menandakan bahwa beberapa aktivitas dapat diselesaikan secara bersamaan (paralel).
dalam dan di sekitar sistem berupa message yang digambarkan terhadap waktu. Diagram sequence digunakan untuk menggambarkan arus pekerjaan, pesan yang disampaikan bagaimana elemen-elemen di dalamnya bekerja sama dari waktu ke waktu untuk mencapai suatu hasil. Sequence Diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu. Diawali dari apa
http://digilib.mercubuana.ac.id/
32
yang men-trigger aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan. Masing-masing urutan elemen diatur di dalam suatu urutan horizontal dengan pesan yang disampaikan dibelakang dan di depan diantara elemen-elemen.
Seorang elemen aktor yang digunakan untuk menghadirkan pemakai yang memulai alur peristiwa/kejadian.
Elemen-elemen yang ditiru, seperti boundary, control dan entity, digunakan untuk menggambarkan layar, pengontrol, dan materi database, secara berturut-turut.
Masing-masing elemen dihubungkan dengan garis-garis batang disebut lifeline vertikal, di mana jika unsur itu berpotensi mengambil bagian dalam interaksi itu.
Message digambarkan sebagai garis berpanah dari satu objek ke objek lainnya. Pada fase desain berikutnya, message akan dipetakan menjadi operasi/metode dari sebuah class.
Activation bar menunjukkan lamanya eksekusi sebuah proses, biasanya diawali dengan diterimanya sebuah message.
http://digilib.mercubuana.ac.id/
33
Contoh diagram sequence:
Gambar 2. 5 Contoh Diagram Sequence
Dalam sequence diagram terdapat 3 relasi, yaitu: 1. Create Relasi ini digunakan untuk melakukan inisialisasi suatu objek. 2. Synchronous Relasi ini digunakan untuk memanggil operasi atau method yang dimiliki oleh suatu objek. Synchronous mengharuskan kita menyelasikan 1 proses baru kemudian memanggil proses berikutnya. 3. Aysnchronous Relasi ini digunakan untuk memanggil operasi atau model yang dimiliki oleh suatu objek. Asynchronous memberikan kita fasilitas untuk menjalankan proses lain ketika proses sebelumnya belum selesai.
http://digilib.mercubuana.ac.id/
34
Berikut notasi yang digunakan dalam membuat diagram sequence: Table 2. 4 Simbol Sequence Diagram
Sumber: (Yasin, 2012) 2.20
Pengujian Perangkat Lunak (A.S & M. Shalahuddin, 2011) Pengujian adalah satu set aktivitas yang
direncanakan dan sistematis untuk menguji dan mengevaluasi kebenaran yang diinginkan. Aktifitas pengujian terdiri dari satu set atau sekumpulan langkah dimana dapat menempatkan desain kasus uji yang spesifik dan metode pengujian. Pengujian perangkat lunak diperlukan untuk meminimalisasi kesalahan dari segi teknis dan juga non-teknis. Dari segi teknis contoh sering perangkat lunak mengalami kesalahan (error) pada proses-proses tertentu pada saat perangkat lunak dijalankan. Pengujian perangkat lunak adalah sebuah elemen/topik yang memiliki cakupan luas dan sering dikaitkan dengan verifikasi dan validasi. Verifikasi mengacu pada sekumpulan aktivitas yang menjamin bahwa perangkat lunak
http://digilib.mercubuana.ac.id/
35
mengimplementasikan dengan benar dari sebuah fungsi yang spesifik. Sedangkan validasi mengacu pada sekumpulan aktifitas yang berbeda yang menjamin bahwa perangkat lunak yang dibangun dapat ditelusuri sesuai dengan kebutuhan client. Pengujian verifikasi dilakukan mulai dari lingkup yang kecil naik ke lingkup yang besar. Sedangkan pengujian untuk validasi memiliki beberapa pendekatan yaitu sebagai berikut: Pengujian Kotak Hitam (Black-Box Testing)
1.
Yaitu menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode program. Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi, masukan dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang dibutuhkan. Pengujian kotak hitam dilakukan dengan membuat kasus uji yang bersifat mencoba semua fungsi dengan memakai perangkat lunak tersebut. Apakah sudah sesuai dengan yang diinginkan atau belum. Kasus uji harus dibuat dengan kondisi kasus benar dan kasus salah. Pengujian Kotak Putih (White-Box Testing)
2.
Yaitu menguji perangkat lunak dari segi desain dan kode program apakah mampu menghasilkan fungsi-fungsi, masukan dan keluaran yang sesuai dengan spesifikasi kebutuhan. Pengujian ini dilakukan dengan memeriksa lojik dari kode program. Pembuatan kasus uji bisa mengikuti standar pengujian dari standar pemrograman yang seharusnya. 2.21
Pengertian Web (Arief, 2011) Web adalah salah satu aplikasi yang berisikan dokumen-
dokumen multimedia (teks, gambar, suara, animasi, video) di dalamnya yang menggunakan protokol HTTP (Hypertext Transfer Protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser. Browser adalah aplikasi yang mampu menjalankan doumen-dokumen web dengan cara diterjemahkan.
http://digilib.mercubuana.ac.id/
36
Ditinjau dari aspek content atau isi, web dapat dibagi menjadi 2 jenis, yaitu web statis dan web dinamis. Web statis adalah web yang isinya tidak dapat berubahubah secara mudah dan cepat. Ini dikarenakan teknologi yang digunakan untuk membuat dokumen web ini tidak memungkinkan dilakukan perubahan terhadap isi. pada web statis, interaksi pengguna hanya terbatas dapat melihat informasi yang ditampilkan, tetapi tidak dapat mengolah informasi yang dihasilkan. Teknologi yang digunakan untuk web statis diantaranya HTML dan CSS. Web dinamis adalah jenis web yang content/isinya dapat berubah-ubah setiap saat. Web yang dinamis memungkinkan pengguna untuk berinteraksi menggunakan form sehingga dapat mengolah informasi yang ditampilkan. Web dinamis bersifat interaktif, tidak kaku dan terlihat lebih indah. Untuk membuat web dinamis diperlukan beberapa komponen yaitu HTML, Javascript, CSS, PHP dan MySQL sebagai tempat penyimpanan data. 2.22
Web Browser (Arief, 2011) Web Browser merupakan program yang berfungsi untuk
menampilkan dokumen-dokumen web dalam format HTML. Bagaimana halaman web yang dibuat ditampilkan sangat bergantung pada web engine yang digunakan oleh masing-masing browser. Semua jenis web browser yang ada saat ini mengikuti standarisasi yang dibuat oleh World Wide Web Consortium (W3C) yang merupakan badan independen yang mengurus semua hal yang berkaitan dengan web di dunia. Berikut adalah contoh web browser yang cukup popular beserta web engine yang digunakan: 1. Web Engine WebKit: Safari, Google Chrome. 2. Web Engine Trident: Microsoft Internet Explorer, Maxthon. 3. Web Engine Gecko: Mozilla Firefox. 4. Web Engine Presto: Opera.
2.23
Web Editor
http://digilib.mercubuana.ac.id/
37
(Arief, 2011) Web Editor merupakan program aplikasi yang digunakan untuk mengetikkan perintah-perintah dokumen web baik client side scripting maupun server side scripting. Saat ini banyak tersedia web editpr mulai dari yang paling sederhana hingga yang lebih smart. Mulai dari web editor berbayar hingga gratis. Contoh web editor diantaranya: Notepad ++, Visual Studio, Adobe Dreamweaver, Sublime Text dan sebagainya. Dalam penulisan tugas akhir ini, penulis menggunakan web editor sublime text versi 2. Berikut akan dijelaskan secara singkat mengenai Visual Studio. 2.24
Visual Studio Visual Studio adalah satu set lengkap alat pengembangan untuk
membangun aplikasi ASP.NET Web, XML Web Services, aplikasi desktop, dan aplikasi mobile. Visual Basic, Visual C #, dan Visual C ++ semua menggunakan lingkungan pengembangan terintegrasi yang sama (IDE), yang memungkinkan alat berbagi dan memudahkan penciptaan solusi campuran bahasa. Selain itu, bahasa ini menggunakan fungsi dari Framework, yang menyediakan akses ke teknologi kunci yang menyederhanakan pengembangan aplikasi Web ASP dan XML Web Services, dibawah ini adalah beberapa dari fitur visual studio: 1. Umpan Balik Screenshot ini menunjukkan pilihan yang tersedia ketika menu Feedback diakses oleh mengklik balon chatting (ikon paling kiri):
Gambar 2. 6 Feedback pada Visual Studio
Ditunjukkan dengan balon chatting, ikon tanggapan menyediakan cara langsung mengirim umpan untuk Microsoft dari dalam VS2013. Ketika balon chatting diklik, daftar drop-down muncul, memungkinkan Anda untuk memilih dari
http://digilib.mercubuana.ac.id/
38
baik Kirim Smile (menunjukkan sebuah komentar positif) atau Kirim Kerutan (menunjukkan komentar negatif). Fungsional, tidak ada perbedaan di kotak dialog yang muncul, tetapi pilihan senyum atau cemberut memungkinkan Anda untuk memberikan konteks untuk komentar Anda sehingga tidak ada ambiguitas dalam pesan Anda. Setiap opsi memungkinkan Anda untuk memasukkan e-mail alamat sehingga Microsoft memiliki cara untuk menanggapi, dan pilihan cemberut memiliki kotak centang tambahan untuk menunjukkan apakah atau tidak komentar Anda gambarkan bug. Menu juga menyediakan kemampuan untuk melaporkan bug dan mengakses forum MSDN dalam Visual Studio. Kedua opsi memberikan cara cepat untuk menyelesaikan tugas ini sehingga Anda membuat laporan atau meminta bantuan dan mendapatkan coding dengan minimal kesalahan. 2. Pemberitahuan Antara Umpan balik ikon dan bidang Quick Launch adalah ikon bendera yang mewakili pemberitahuan:
Gambar 2. 7 Pemberitahuan pada Visual Studio
Dalam screenshot diatas, Anda dilihat bahwa satu update tertunda. Bendera pemberitahuan adalah dirancang untuk memberikan peringatan mencolok ketika update ke VS2013 dan paket diinstal tersedia. Pemberitahuan yang tercantum di sidebar adalah kode warna kuning dan merah, yang digunakan untuk menunjukkan menengah dan tinggi prioritas masing-masing. Contoh pemberitahuan yang bisa muncul termasuk pemberitahuan tentang update untuk Visual Studio, update ke ekstensi diinstal atau sampel, atau pemberitahuan mengingatkan bahwa masa percobaan berakhir. Pemberitahuan dapat diberhentikan secara massal, dan sekali mereka diberhentikan mereka tidak muncul kembali. 3. Akun pengguna Jika masuk ke VS2013 dengan akun Microsoft (melihat pengaturan Sinkronisasi
http://digilib.mercubuana.ac.id/
39
resep), daerah ini menampilkan avatar grafis bersama dengan nama tampilan akun yang digunakan. Screenshot berikut menunjukkan perbedaan dalam tampilan yang terjadi ketika log in:
Gambar 2. 8 Akun Pengguna Visual Studio
Hal ini juga menyediakan cara untuk masuk jika belum melakukannya, atau jika ingin mengubah aktif akun yang digunakan. Dalam screenshot sebelumnya, sisi kiri telah teks Masuk, dan ikon abu-abu menunjukkan bahwa pengguna belum login. Di sisi kanan, dapat dilihat perbedaan ketika pengguna telah login, sebagai username telah menggantikan Masuk dalam teks, dan ikon abu-abu telah berubah untuk mencerminkan pengguna avatar (yang dalam hal ini adalah ikon hijau dilapis dengan inisial putih nama pengguna). 4. Scroll bar thumbnail Scroll bar telah memperluas kegunaannya di VS2013. Sekarang Anda dapat menyesuaikannya untuk menunjukkan Anda posisi keseluruhan dalam file sumber, dan memberikan tip alat yang memungkinkan Anda memeriksa kode di tempat lain di file Anda saat ini tanpa mengubah lokasi Anda saat ini. Pilihan baru ini disebut modus peta, yang bertentangan dengan perilaku historis yang disebut modus bar (yang merupakan scrollbar tradisional penampilan dan perilaku). Semua aspek modus peta yang disesuaikan, termasuk apakah itu muncul sama sekali, lebarnya (sempit, menengah, atau lebar), dan kemampuan untuk menunjukkan ujung alat pratinjau. Screenshot berikut menunjukkan fitur-fitur ini dalam tindakan:
http://digilib.mercubuana.ac.id/
40
Gambar 2. 9 Contoh Scrol Bar thumbnail Visual Studio
Screenshot diatas menunjukkan scroll bar dikonfigurasi untuk berada dalam mode peta. Panah pertama (ditandai sebagai 1) menunjukkan bahwa apa yang sedang ditampilkan dalam editor terletak relatif terhadap file sumber secara keseluruhan. Panah kedua (ditandai sebagai 2) menunjuk ke tool tip pratinjau yang muncul ketika kursor mouse Anda melayang di atas scroll bar. 5. Peta Kode (hanya tersedia pada Visual Studio Ultimate) VS2013 Ultimate terus mengembangkan alat visualisasi kode yang Microsoft sebut dengan Kode Peta (Code Maps) untuk memberikan representasi dari proyek yang ada. Screenshot berikut menunjukkan Kode Maps dalam aksi:
http://digilib.mercubuana.ac.id/
41
Gambar 2. 10 Contoh Peta Kode Visual Studio
Kode Maps dapat dibuat dan digunakan di VS2013 Ultimate, tapi VS2013 Premium dan VS2013 Profesional hanya dapat mengkonsumsinya. Namun, pengguna Premium dan profesional dapat berinteraksi dengan peta dan menambahkan komentar / bendera seperti yang ditinjau. Kode Maps dapat diaktifkan dalam jendela editor via Ctrl + `, yang merupakan Ctrl ditambah kunci backquote (biasanya menemukan berbagi kunci dengan tilde). Hal ini juga dapat disebut dengan mengklik kanan di jendela editor pada metode tertentu atau kelas yang ingin Anda memetakan. Setelah dihasilkan, peta dapat dimanipulasi dalam beberapa cara, termasuk zooming dan kemampuan untuk memperluas untuk menunjukkan unsur terkait. Unsur-unsur individu mungkin double-diklik sehingga mereka dibesarkan dalam editor kode untuk analisis lebih dekat. Sebuah elemen mungkin juga diklik kanan ketika dalam Kode Peta untuk pilihan navigasi lanjut (Go to Definition, Tampilkan Jenis Base, dan sebagainya) atau untuk mengomentari. Ini sangat bermanfaat untuk basis kode besar atau kompleks di mana peta dapat membantu dalam pemahaman dengan memvisualisasikan hubungan dan menambahkan komentar eksternal ke kode sumber.
http://digilib.mercubuana.ac.id/
42
Kode Peta menunjukkan posisi Anda dari jendela editor aktif di peta dengan hijau panah ikon. Dalam screenshot contoh sebelumnya ini, editor adalah di kelas Kendaraan, yang adalah menunjuk pada Kode Peta dengan panah hijau.