M-Commerce MySQL CSS LANDASAN TEORI

commit to user 4

BAB II LANDASAN TEORI

2.1 E -commerce Menurut Laudon Laudon 1998, E-Commerce adalah suatu proses membeli dan menjual produk-produk secara elektronik oleh konsumen dan dari perusahaan ke perusahaan dengan computer sebagai perantara transaksi bisnis. Tujuan suatu perusahaan menggunakan sistim E-Commerce adalah dengan menggunakan E-Commerce maka perusahaan dapat lebih meningkatkan keuntungannya. Manfaat dalam menggunakan E-Commerce dalam suatu perusahaan sebagai sistem transaksi adalah: a. Dapat meningkatkan ma rket exposure pangsa pasar. b. Melebarkan jangkauan global reach. c. Meningkatkan customer loyalty. d. Meningkatkan supply management.

2.2 M-Commerce

M-Commerce merupakan proses transaksi yang dilakukan dengan menggunakan perangkat mobile . M-Commerce merupakan subset dari e- Commerce , yang didefinisikan sebagai proses transaksi yang dilakukan secara elektronik,baik melalui internet, sma rt ca rd maupun perangkat mobile . Pada umumnya, perangkat end user yang digunakan pada proses m- Commerce adalah sebagai berikut: Ha ndphone Smart Phone PDA Ta blet Setiap perangkat memiliki karakteristik yang berbeda-beda sehingga dapat mempengaruhi tingkat penggunaannya aplikasisistem m-commerce . commit to user 5

2.3 Batik

Batik merupakan kain bergambar yg pembuatannya secara khusus dengan menuliskan atau menerakan malam pada kain tersebut, kemudian pengolahannya diproses dengan cara tertentu. http:kamusbahasaindonesia.orgbatik

2.3.1 Sejarah Pemasaran Batik

Pada mulanya membatik hanya dikerjakan oleh putri-putri keluarga keraton di Jawa. Kegiatan membatik ini pada mulanya dikatakan sebagai kegiatan spiritual yang membutuhkan konsentrasi, kesabaran, dan pembersihan pikiran melalui doa-doa. Dengan demikian, hanya perempuan yang berstatus tinggi yang seharusnya membuat batik itu. Sampai akhir abad ke-19, produksi batik dan penggunaannya telah diberlakukan di kalangan kerajaan sebagai pakaian resmi. Masyarakat terdekat yang pertama kali memproduksi batik adalah masyarakat Kauman yang bekerja sebagai abdi dalem pamethakan keraton, istri mereka pada umumnya melakukan kegiatan membatik sebagai pekerjaan sambilan di rumah. Hasil dari kerajinan itu ditampung oleh beberapa orang yang dianggap dapat menjualkannya. Ternyata kerajinan batik itu justru mengalami kemajuan yang pesat sehingga muncullah pengusaha batik. Pada tahun 1900 , pedagang batik di Kauman yang terkenal dan kaya adalah Kyai H. Abubakar dan Nyai H. Saleh. Dari pendapatannya sebagai pedagang kaya itu, mereka dapat menyekolahkan anaknya hingga ke Mekkah. Mulai pada tahun 1910, di Yogyakarta bermunculan pengusaha- pengusaha batik, misalnya seperti “Batik Handel” seperti tersebut di atas. Hingga akhirnya produk batik pun menyebar ke seluruh Indonesia. commit to user 6

2.4 Framework CodeIgniter

CodeIgniter merupakan sebuah framework yang digunakan untuk membuat sebuah aplikasi berbasis web yang disusun menggunakan bahasa PHP. Didalamnya terdapat bermacam-macam libra ry dan helper yang mempermudah dalam pengembangan aplikasi. Riyanto, 2011

2.4.1 Konsep MVC

Dalam konteks Codeigniter dan aplikasi web, penerapan konsep MVC mengakibatkan kode program dapat dibagi menjadi tiga kategori, yaitu : a. Model. Kode program berupa OOP class yang digunakan untuk memanipulasi database. b. View. Berupa template htmlxhtml atau php untuk menampilkan data pada browser. c. Controller. Kode program berupa OOP class yang digunakan untuk mengontrol aliran aplikasi sebagai pengontrol Model dan View.

2.4.2 Library CodeIgniter yang digunakan

Library CodeIgniter berisi kumpulan class dengan berbagai method yang biasa dipakai oleh programmer PHP. Untuk pemanggilan library, format perintahnya : this-load-library‘ , contoh : this-load-library‘cart’; Dan ketika akan digunakan, format perintahnya : this- - contoh: this-cart-total Dalam pembuatan aplikasi m-commer ce ini, library yang digunakan : - Autoload : Digunakan untuk me-load secara otomatis class-class dalam CodeIgniter, bisa library, helper ataupun model. - Config : library config diinisialisasi secara otomatis oleh sistem. Digunakan untuk menerima informasi mengenai konfigurasi sistem. - Database : library database sangat handal, dilengkapi dengan berbagai method untuk manipulasi database. - File Uploading : library ini untuk melakukan upload file dengan fitur validasi commit to user 7 - Pagination : digunakan untuk membuat pagination dari hasil query. Dapat diatur beberapa record yang ingin ditampilkan dalam satu halaman. - Session : digunakan untuk memaintain state seorang user. Library ini tidak menggunakan session milik PHP, tetapi menghasilkan data untuk session sendiri. - User Agent : digunakan untuk mengidentifikasi browser, mobile device atau robot misalnya milik serach engine yang berkunjung ke situs Anda. - Form Validation : sebuah class yang berguna untuk memvalidasi input form. - Cart : library yang mengenai transaksi komersial e-commerce , namun hanya bagian keranjang belanja, tidak sampai proses checkout shipping, pembayaran, dan sebagainya.

2.4.3 Helper yang digunakan

Tidak seperti libraries, helper bukanlah kode program OOP, tetapi kode prosedural. Tiap helper berisi satu atau beberapa fungsi, tiap fungsi fokus untuk mengerjakan tugas tertentu. Fungsi-fungsi tersebut tidak saling tergantung. Untuk pemanggilan library, format perintahnya : this-load-helper‘ , contoh : this-load-helper‘ ’; Dan ketika akan digunakan langsung memanggil fungsinya, contoh: Echo form_hiddennama, john’; - input type=”hidden” name=”nama” value=”john” Helper yang digunakan : - FusionCharts : helper untuk membuat grafik - Form : helper yang digunakan untuk membuat form html. - URL : helper yang menangani URL. Contohnya fungsi base_url untuk mendapat nilai base URL dan anchor untuk membuat link. commit to user 8

2.5 UML

Unified Modeling Language UML adalah spesifikasi OMG yang paling digunakan, dan cara dunia memodelkan, tidak hanya aplikasi struktur, perilaku, dan arsitektur, tapi juga proses bisnis dan struktur data. http:uml.org

2.5.1 Use Case Diagram

Use ca se diagram merupakan pemodelan untuk kelakuan beha vior sistem informasi yang akan dibuat. Use case mendeskripsikan sebuah interaksi antara satu atau lebih aktor dengan sistem informasi yang akan dibuat. Ada dua hal utama pada use ca se yaitu pendefinisian apa yang disebut aktor dan use case. 1. Aktor merupakan orang, proses, atau sistem lain yang berinteraksi dengan sistem informasi yang akan dibuat di luar sistem informasi yang akan dibuat itu sendiri, jadi walaupun simbol dari aktor adalah gambar orang, tapi aktor belum tentu merupakan orang. 2. Use ca se merupakan fungsionalitas yang disediakan sistem sebagai unit- unit yang saling bertukar pesan antarunit atau aktor. Berikut adalah simbol-simbol yang ada pada diagram use case : Tabel 2.1 Simbol Use Case Simbol Nama Keterangan Nama Aktor Aktor Aktor Orang, proses atau sistem lain yang berinteraksi dengan sistem informasi yang akan dibuat di luar sistem informasi yang akan dibuat itu sendiri, jadi walaupun simbol dari aktor adalah gambar orang, tapi aktor belum tentu merupakan orang; biasanya dinyatakan menggunakan kata benda di awal frase nama aktor. Use Case Fungsional yang disediakan sistem sebagai unit-unit yang saling Nama use case commit to user 9 bertukar pesan antarunit atau aktor; biasanya dinyatakan dengan menggunakan kata kerja di awal frases nama use ca se. Asosiasi a ssocia tion Komunikasi antara aktor dan use ca se atau use case memiliki interaksi dengan aktor. extend Ekstensi extend Relasi use ca se tambahan ke sebuah use case dimana use case yang ditambahkan dapat berdiri sendiri walau tanpa use case tambahan itu; mirip dengan prinsip inheritance pada pemrograman berorientasi objek; biasanya use ca se tambahan memiliki nama depan yang sama denga use ca se yang ditambahkan. Generalisasi genera liza tion Hubungan generalisasi dn spesifikasi umum -khusus antara dua buah use case dimana fungsi yang satu adalah fungsi yang lebih umum dari lainnya. include Include Relasi use ca se tambahan ke sebuah use case dimana use case yang ditambahkan memerlukan use ca se ini untuk menjalankan fungsinya atau sebagai syarat dijalankan use ca se ini.

2.5.2 Activity Diagram

Diagram aktivitas atau a ctivity dia gra m menggambarkan workflow atau aktivitas dari sebuah sistem atau proses bisnis. Yang perlu diperhatikan disini bahwa diagram aktivitas menggambarkan aktivitas commit to user 10 sistem bukan apa yang dilakukan actor, jadi aktivitas yang dapat dilakukan sistem. Diagram aktivitas juga banyak digunakan untuk mendefinisikan hal-hal berikut: 1. Rancangan proses bisnis dimana setiap urutan aktivitas yang digambarkan merupakan proses bisnis sistem yang didefinisikan. 2. Urutan atau pengelompokkan tampilan dari sistemuser interface dimana setiap aktivitas dianggap memiliki sebuah rancangan antarmuka tampilan 3. Rancangan pengujian dimana setiap aktivitas dianggap memerlukan sebuah pengujian yang perlu didefinisikan kasus ujinya. Berikut simbol-simbol yang ada pada diagram aktivitas : Tabel 2.2 Simbol Activity Diagram Simbol Nama Keterangan Status Awal Status awal aktivitas sistem, sebuah diagram aktivitas memiliki sebuah status awal Aktivitas Aktivitas yang dilakukan system, aktivitas biasanya diawali dengan kata kerja Percabangan decision Asosiasi percabangan dimana jika ada pilihan aktivitas lebih dari satu Penggabungan join Asosiasi penggabungan dimana lebih dari satu aktivitas digabungkan menjadi satu Status akhir Status ahir aktivitas sistem, sebuah diagram aktivitas memiliki sebuah status akhir Aktivitas commit to user 11

2.5.3 Class Diagram

Cla ss dia gra m atau diagram kelas merupakan suatu diagram yang menggambarkan struktur sistem dari segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sistem. Kelas meiliki apa yang disebut atribut dan metode atau operasi. 1. Atribut merupakan variable-variabel yang dimiliki oleh suatu kelas. 2. Operasi atau metode adalah fungsi-fungsi yang dimiliki oleh suatu kelas. Tabel 2.3 Simbol Class Diagram Simbol Nama Keterangan Kelas Merupakan kelas pada struktur sistem yang terdiri dari atribut dan method. Antarmuka interfa ce Sama dengan konsep interfa ce dalam pemrograman berorientasi objek Asosiasi a ssocia tion Relasi antar kelas dengan makna umum, asosiasi biasanya juga disertai dengan multiplicity. Asosiasi berarah directed a ssocia tion Relasi antar kelas dengan makna kelas yang satu digunakan oleh kelas yang lain, asosiasi biasanya juga disertai dengan multiplicity. Generalisasi genera liza tion Relasi antar kelas dengan makna generalisasi-spesialisasi umum-khusus Kebergantungan Dependency Relasi antar kelas dengan makna kebergantungan antar kelas Agregasi Relasi antar kelas dengan commit to user 12 aggregation makna semua-bagian whole- part

2.5.4 Sequence Diagram

Diagram sekuen menggambarkan kelakuan objek pada use ca se dengan mendeskripsikan waktu hidup objek dan messa ge yang dikirimkan dan diterima antar objek. Oleh karena itu untuk menggambarkan diagram sekuen maka harus diketahui objek-objek yang terlibat dalam sebuah use ca se beserta metode-metode yang dimiliki kelas yang diinstansiasi menjadi objek itu. Banyaknya diagram sekuen yang harus digambar adalah sebanyak pendefinisian use case yang memiliki proses sendiri atau yang penting semua use case yang telah didefinisikan interaksi jalannya pesan sudah dicakup pada diagram sekuen sehingga semakin banyak use case yang didefinisikan maka diagram sekuen yang harus dibuat juga semakin banyak. Berikut adalah simbol-simbol yang ada pada diagram sekuen : Tabel 2.4 Simbol Sequence Diagram Simbol Nama Keterangan Nama Aktor Aktor Aktor Orang, proses atau sistem lain yang berinteraksi dengan sistem informasi yang akan dibuat di luar sistem informasi yang akan dibuat itu sendiri, jadi walaupun simbol dari aktor adalah gambar orang, tapi aktor belum tentu merupakan orang; biasanya dinyatakan menggunakan kata benda di awal frase nama aktor Garis hidup lifeline Menyatakan kehidupan suatu objek commit to user 13 Objek Menyatakan objek yang berinteraksi pesan Waktu aktif Menyatakan objek dalam keadaan aktif dan berinteraksi pesan create Pesan tipe create Menyatakan suatu objek membuat objek lain, arah panah mengarah pada objek yang dibuat 1: nama method Pesan tipe ca ll Menyatakan suatu objek memanggil operasimetode yang ada pada objek yang dibuat 1: masukkan Pesan tipe send Menyatakan bahwa suatu objek mengirimkan data masukkaninformasi ke objek lainnya, arah panah mengarah ke objek yang dikirim 1: keluaran Pesan tipe return Menyatakan bahwa suatu objek yang telah menjalankan suatu operasi yang menghasilkan suatu kembalian ke objek tertentu, arah panah mengarah pada objek yang menerima kembalian X Pesan tipe destroy Menyatakan akhir hidup suatu objek nama objek : nama kelas commit to user 14

2.6 MySQL

MySQL database merupakan data ba se open source dengan performa yang tinggi, realibilitas yang tinggi dan mudah dalam penggunaan. Itu juga merupakan database pilihan untuk generasi baru dari aplikasi yang dibangun pada LAMP Linux, Apache, MySQL, PHP Perl Python. sumber : http:mysql.com Pada dasarnya, bahasa query SQL secara garis besar dabat dibagi menjadi tiga bagian : a DDL Da ta Definition La ngua ge DDL adalah bahasa-bahasa SQL yang digunakan untuk membuat, memanipulasi atau menghapus schema yang ada di dalam data base . b DML Da ta Ma nipula tion La ngua ge DML adalah bahasa-bahasa SQL yang digunakan untuk memanipulasi data di dalam data base . c DCL Da ta Control La ngua ge DCL adalah bahsa-bahasa SQL yang digunakan untuk mengatur user MySQL.

2.7 CSS

CSS merupakan singkatan dari Cascading Style Sheet. Kegunaannya adalah untuk mengatur tampilan dokumen HTML, contohnya seperti pengaturan jarak antar baris, teks, warna dan format border bahakan penampilan file gambar. CSS dikembangkan oleh W3C, organisasi yang mengembangkan teknologi internet. Tujuannya tak lain untuk mempermudah proses penataan web. Perlu diinga, CSS hanyalah berupa kumpulan script yang tujuannya bukan untuk mengantikan HTML, melainkan pelengkap agar dokumen HTML bisa tampil lebih cantik dan dinamis. Untuk penggunaan CSS pada mobile device, ada beberapa konfigurasi tambahan agar halaman bisa menyesuaikan lebar device. Hal-hal yang ditambahkan yaitu sebagai berikut : commit to user 15 a. Viewport meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes 1 Width Kebanyakan browser di ponsel akan menampilkan gambaran seluruh halaman jika tidak disertakan perintah lebar di bidang konten. Tapi agar lebih baik dan lebih dekat sampai melihat halaman web Anda, Anda perlu mengatur viewport dengan lebar perangkat. Karena saat ini perangkat mobile memiliki lebar yang berbeda-beda. Cukup: lebar = perangkat-lebar. 2 Initial-scale Secara umum, nilai initial-scale bernilai 1. Ini adalah zoom in zoom outskala. Pada 1, ukuran font akan menjadi yang paling pas untuk pengguna. Namun jika 2, akan terlihat halaman diperbesar terlalu dekat. 3 Maximun-scale Pengaturan ini membatasi seberapa jauh sebuah halaman dapat diperbesar masuk saya telah menemukan bahwa membiarkan zoom pengguna dalam minimal 2 kali yang baik kalau-kalau ada sesuatu seperti formulir isian dan mereka salah eja kata dan ingin menempatkan kursor dalam tempat tertentu mengetik ulang. 4 User-scalable Awalnya nilai untuk user-scalable 0 dan 1 tetapi saat ini lebih efektif menggunakan yes or no. Juga beberapa website merekomendasikan memisahkan pilihan dengan semi-colon;, tetapi untuk kompatibilitas dengan perangkat yang paling Anda harus menggunakan koma. b. Stylesheet link me dia =Sc reen href =style s.c ss type =te xt c ss re l =style she e t commit to user 16 Diikuti dengan link me dia= hand held , o nly sc re e n and max-width: 480p x, o nly sc re e n a nd ma x-d evic e -width: 480p x href= mo bile .c ss type = text c ss re l= style she e t Diikuti juga dengan - - [if IEMobile] link re l =style she e t type =te xt c ss hre f =mo bile .c ss me dia =sc re e n [endif]- - Baris pertama di atas adalah untuk memuat stylesheet default untuk browser desktop. Sayangnya tanpa melompat melalui banyak rintangan, browser mobile juga akan memuat stylesheet ini seperti yang ditunjukkan pada baris 1 di atas. Jadi kedua stylesheet diload pada mobile tetapi stylesheet untuk browser desktop ditimpa dengan beberapa pengaturan di styles.css sehingga lebar, mengapung dan menu terlihat semua diformat dengan benar untuk perangkat mobile. 1 Handheld Digunakan untuk meload stylesheet pada handphone lawas. 2 only screen and max-device-width: 480px max-device-width digunakan untuk membatasi nilai lebar perangkat maksimal untuk stylesheet yang digunakan.

2.8 XHTML-MP