PENERAPAN TEKNOLOGI AJAX PADA SITUS E-COMMERCE ”BINKAR BATIK”.

(1)

TUGAS AKHIR

Disusun Oleh :

BINKAR ADISUKMANA PUTRA

0735010046

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”

JAWA TIMUR

(2)

LEMBAR PENGESAHAN

PENERAPAN TEKNOLOGI AJAX PADA SITUS E-COMMERCE ”BINKAR BATIK”

Disusun Oleh :

BINKAR ADISUKMANA PUTERA

0735010046

Telah Disetujui Mengikuti Ujian Negara Lisan Gelombang I Tahun Akademik 2012 - 2013

Mengetahui

Ketua Program Studi Sistem Informasi Fakultas Teknologi Industri

Universitas Pembangunan Nasional “Veteran” Jawa Timur

Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 379 030 401 971

Pembimbing Utama

Pembimbing Pendamping

(3)

BATIK”

Disusun Oleh :

BINKAR ADISUKMANA PUTERA 0735010046

Telah dipertahankan dihadapan dan diterima oleh Tim Penguji Tugas Akhir Program Studi Sistem Informasi Fakultas Teknologi Industri

Universitas Pembangunan Nasional “Veteran” Jawa Timur pada tanggal 5 Oktober 2012

Mengetahui

Dekan Fakultas Teknologi Industri

Universitas Pembangunan Nasional ”Veteran” Jawa Timur

Ir. Sutiyono, MT NIP. 19600713 198703 1001 Pembimbing :

1. Pembimbing Utama

2. Pembimbing Pendamping

Doddy Ridwandono, S.Kom NPT. 378 050 702 181

Tim Penguji : 1.

2.

Mohamad Irwan Afandi, ST, MSc NPT. 37607 070 2201

3.

(4)

YAYASAN KESEJAHTERAAN PENDIDIKAN DAN PERUMAHAN

UNIVERSITAS PEMBANGUNAN NASIONAL ”VETERAN” JAWA TIMUR

FAKULTAS TEKNOLOGI INDUSTRI

PANITIA UJIAN SKRIPSI / KOMPREHENSIF

KETERANGAN REVISI

Kami yang bertanda tangan dibawah ini menyatakan bahwa mahasiswa berikut : Nama : BINKAR ADISUKMANA PUTERA

NPM : 0735010046

Progam Studi : SISTEM INFORMASI

Telah mengerjakan revisi / tidak ada revisi *) pra rencana (design) / skripsi ujian lisan gelombang I, Tahun Ajaran 2012 / 2013 dengan judul :

PENERAPAN TEKNOLOGI AJAX PADA SITUS E-COMMERCE ”BINKAR BATIK”

Surabaya, 8 Oktober 2012 Dosen Penguji yang memeriksa revisi :

1.Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 379 030 401 971

2.Mohamad Irwan Afandi, ST, MSc NPT. 37607 070 2201

3. Prof. Dr. Ir. Akhmad Fauzi, MMT NIP. 19651109 199103 1002

Mengetahui

( )

Pembimbing Utama

Pembimbing Pendamping

(5)

i

Pembimbing II : Doddy Ridwandono S.Kom

ABSTRAK

Saat ini banyak jenis batik yang tumbuh dan berkembang. Hasil produksi batik tersebut pun semakin beraneka ragam dengan banyaknya pertumbuhan batik tulis. Area pemasaran hasil produksi batik tersebut saat ini hanya terbatas di wilayah sekitarnya. Kondisi tersebut akan berakibat hasil produksi batik tidak akan dapat dikenal secara nasional maupun internasional. Hal ini akan turut mempengaruhi jumlah pendapatan para pengusaha batik. Permasalahan ini juga dialami oleh para pengrajin batik. Dalam penelitian ini dibuat sebuah Aplikasi dengan Teknologi Ajax yang mengirim dan menerima data dari user ke server tanpa perlu me-load kembali seluruh halaman Aksi dari sisi klien dibagi menjadi dua bagian, yaitu layer user interface dan layer AJAX. Hasil uji coba membuktikan bahwa Aplikasi Teknologi AJAX pada E-Commerce On-Line mampu memberikan pelayanan berupa informasi pada pelanggan maupun mengatasi proses transaksi melalui media online berupa web yang menggunakan AJAX agar dapat membantu promosi secara luas.

(6)

ii

KATA PENGANTAR

Syukur Alhamdulillaahi rabbil ‘alamin terucap ke hadirat Allah SWT atas segala limpahan Kekuatan-Nya sehingga dengan segala keterbatasan waktu, tenaga, pikiran dan keberuntungan yang dimiliki penyusun, akhirnya penyusun dapat menyelesaikan Skripsi yang berjudul “Penerapan Teknologi AJAX Pada

E-Commerce Binkar Batik”” tepat pada waktunya. Skripsi dengan beban 4 SKS ini disusun guna diajukan sebagai salah satu syarat untuk menyelesaikan program Strata Satu (S1) pada program studi Sistem Informasi, Fakultas Teknologi Industri, UPN ”VETERAN” Jawa Timur.

Melalui Skripsi ini penulis merasa mendapatkan kesempatan emas untuk memperdalam ilmu pengetahuan yang diperoleh selama dibangku perkuliahan, terutama berkenaan tentang penerapan teknologi perangkat lunak. Namun, penyusun menyadari bahwa Skripsi ini masih jauh dari sempurna. Oleh karena itu penyusun sangat mengharapkan saran dan kritik dari para pembaca untuk pengembangan aplikasi lebih lanjut.

Surabaya, September 2012

(7)

iii

Puji syukur kami panjatkan kehadirat Allah SWT atas limpahan rahmat, karunia serta hidayah-Nya, sehingga penulis dapat menyelesaikan Tugas Akhir (TA) di Jurusan Sistem Informasi Fakultas Teknik Industri Universitas Pembangunan Nasional “Veteran” Jawa Timur serta menyelesaikan pembuatan laporan TA dengan baik dan lancar.

Penyusun menyadari bahwasanya dalam menyelesaikan Skripsi ini telah mendapat banyak bantuan dan dukungan dari berbagai pihak, untuk itu pada kesempatan yang berharga ini, penyusun mengucapan terima kasih kepada:

1. Ibu, Bapak, Kakakku tercinta di rumah yang senantiasa memberikan dukungan dan mendoakan penyusun agar Skripsi ini segera terselesaikan. 2. Bapak Ir. Sutiyono, MT, selaku Dekan Fakultas Teknologi Industri.

3. Bapak Nur Cahyo Wibowo S.Kom M.Kom, selaku Dosen Pembimbing I yang telah giat meluangkan banyak waktu untuk memberikan arahan, ilmu dan dorongan serta motivasi kepada penyusun untuk menyelesaikan Skripsi ini. 4. Bapak Doddy Ridwandono S.Kom, selaku Dosen Pembimbing II yang dengan

sabar telah meluangkan banyak waktu, pikiran dan tenaga di antara kesibukan beban-beban kegiatan akademik untuk memberikan bimbingan dan kesempatan penyusun untuk berkreasi dalam proses pembuatan Skripsi ini. 5. Teman-teman Himakos Gunung Anyar yang telah banyak membantu demi

kelancaran tugas akhir ini.

(8)

iv

7. Penulis menyadari sepenuhnya bahwa sebagai manusia biasa tentunya tidak akan luput dari kekurangan dan keterbatasan. Maka dengan segenap kerendahan hati, penulis mengharapkan saran dan kritik yang dapat menyempurnakan penulisan ini sehingga dapat bermanfaat dan berguna untuk pengembangan ilmu pengetahuan.

Surabaya, September 2012

(9)

v

ABSTRAK ... i

KATA PENGANTAR ... ii

UCAPAN TERIMA KASIH ... iii

DAFTAR ISI ... iv

DAFTAR GAMBAR ... vii

DAFTAR TABEL ... x

BAB 1 PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Perumusan Masalah ... 2

1.3 Batasan Masalah ... 2

1.4 Tujuan ... 3

1.5 Manfaat ... 3

1.6 Metodologi Penelitian ... 3

1.7 Sistematika Pembahasan ... 5

BAB II TINJAUAN PUSTAKA ... 7

2.1 Batik dan Prospeknya... 7

2.1.1 Jenis dan Model Batik ... 9

2.1.2 Prospek Bisnis dan Omzet ... 11

(10)

vi

2.2 Website dan Cara Kerjanya... 14

2.3 E-Commerce ... 15

2.4 HTML ... 16

2.5 PHP ... 18

2.6 MySQL ... 20

2.7 AJAX ... 21

BAB III ANALISIS DAN PERANCANGAN SISTEM ... 31

3.1 Identifikasi Masalah ... 31

3.2 Perancangan Sistem ... 32

3.3 Data Flow Diagram (DFD) ... 32

3.4 Conceptual Data Model ... 42

3.5 Physical Data Model ... 43

3.6 Struktur Tabel ... 45

BAB IV HASIL DAN PEMBAHASAN ... 51

4.1 Implementasi Sistem ... 51

4.2 Tujuan Implementasi Sistem ... 51

4.3 Implementasi Antar Muka ... 51

4.3.1 Antar Muka Home ... 52

4.3.2 Antar Muka Halaman Pemesanan ... 52

4.3.3 Antar Muka Halaman Pendaftaran ... 53

(11)

vii

4.3.7 Antar Muka Halaman Pengisian Data Pengiriman ... 56

4.3.8 Antar Muka Halaman Berhasil Pengisian Data Pengiriman ... 57

4.3.9 Antar Muka Halaman LogOut ... 57

4.3.10 Antar Muka Halaman Login Admin ... 58

4.3.11 Antar Muka Halaman Home ... 58

4.3.12 Antar Muka Halaman Daftar Produk ... 59

4.3.13 Antar Muka Halaman Tambah Produk ... 59

4.3.14 Antar Muka Form Untuk Merubah Produk ... 60

4.3.15 Antar Muka Konfirmasi Hapus Produk ... 61

4.3.16 Antar Muka Halaman Jenis Batik ... 61

4.3.17 Antar Muka Ubah Jenis Batik ... 62

4.3.18 Antar Muka Hapus Jenis Batik ... 62

4.3.19 Antar Muka Halaman Daftar Produk ... 63

BAB V PENUTUP ... 64

6.1 Kesimpulan ... 64

6.2 Saran ... 65

(12)

viii

DAFTAR GAMBAR

Gambar 2.1 Batik Tulis………..……… 10

Gambar 2.2 Batik Cap……… 10

Gambar 2.3 Batik Lukis……….……… 11

Gambar 2.4 Arsitektur Model Tradisional………. ………... 22

Gambar 2.5 Arsitektur Model AJAX………....……… 23

Gambar 2.6 Teknologi di balik AJAX……….………. 24

Gambar 2.7 Contoh Form………..……… 26

Gambar 3.1 Context Diagram Aplikasi UKM Batik Tulis Jawa Timur……… 34

Gambar 3.2 DFD Level 1 Mengolah Data Produk……….... 36

Gambar 3.3 DFD Level 1 Mengolah Jenis Produk………..….…… 36

Gambar 3.4 DFD Level 1 Pendataan Pesanan…………...……..………. 36

Gambar 3.5 DFD Level 1 Pendataan Kota……….…….………….. 37

Gambar 3.6 DFD Level 1 Pendataan Propinsi……….……….. 37

Gambar 3.7 DFD Level 1 Proses Pendataan Pelanggan………….……… 38

(13)

ix

Gambar 3.10 DFD Level 2 Proses Mengolah Data Propinsi……… 41

Gambar 3.11 DFD Level 2 Proses Mengolah Data Kota……….. 41

Gambar 3.12 Conceptual Data Model E-Commerce……….……… 43

Gambar 3.13 Physical Data Model E-commerce……….……….. 45

Gambar 4.1 Antar Muka Halaman Pertama………. 52

Gambar 4.2 Antar Muka Halaman Pertama….………. 53

Gambar 4.3 Antar Muka Halaman Pendaftaran…..……….. 53

Gambar 4.4 Antar Muka Halaman Login………... 54

Gambar 4.5 Antar Muka Halaman Pelanggan…..……….. 55

Gambar 4.6 Antar Muka Halaman Pelanggan………..……….. 55

Gambar 4.7 Antar Muka Halaman Total Harga……….. 56

Gambar 4.8 Antar Muka Data Pengiriman………...………... 56

Gambar 4.9 Antar Muka Halaman Berhasil Pengisian Data Pengiriman...……. 57

Gambar 4.10 Antar Muka Halaman LogOut………...… 57

Gambar 4.11 Antar Muka Halaman Setelah LogOut……….. 58

(14)

x

Gambar 4.13 Antar Muka Halaman Login……… 59

Gambar 4.14 Antar Muka Halaman Daftar Produk………. 59

Gambar 4.15 Antar Muka Halaman Tambah Produk……….. 60

Gambar 4.16 Antar Muka Form Untuk Produk………... 60

Gambar 4.17 Antar Muka Halaman Hapus Produk…….………..…….. 61

Gambar 4.18 Antar Muka Halaman Jenis Batik………...……… 61

Gambar 4.19 Antar Muka Halaman Pertama………...………. 62

Gambar 4.20 Antar Muka Hapus Jenis Batik……… 62

(15)

xi

Tabel 3.1 Tabel Jenis Batik……… 46

Tabel 3.2 Tabel Produk………. 46

Tabel 3.3 Tabel Pesanan……….………... 47

Tabel 3.4 Tabel Admin………...………... 48

Tabel 3.5 Tabel Kota……….………. 49

Tabel 3.6 Tabel Propinsi………..……….. 49

(16)

1 BAB I

PENDAHULUAN

1.1 Latar Belakang

Indonesia sebagai negara kepulauan dengan berbagai macam suku bangsa memiliki beragam kebudayaan. Ragamnya kebudayaan ini dapat dijadikan sebagai identitas bangsa yang unik. Salah satu kebudayaan yang dapat dijadikan identitas bangsa adalah batik. Batik merupakan hasil karya seni yang sangat indah dimana membutuhkan tingkat ketelitian dan kreativitas yang tinggi dari pembatiknya.

Saat ini banyak batik yang tumbuh dan berkembang. Hasil produksi batik tersebut pun semakin beraneka ragam dengan banyaknya pertumbuhan batik tulis. Area pemasaran hasil produksi batik tersebut saat ini hanya terbatas di wilayah sekitarnya. Kondisi tersebut akan berakibat hasil produksi batik tidak akan dapat dikenal secara nasional maupun internasional. Hal ini akan turut mempengaruhi jumlah pendapatan para pengusaha batik. Permasalahan ini juga dialami oleh para pengusaha batik.

(17)

Salah satu alternatif yang di lakukan untuk membuat aplikasi web adalah di gunakanya Aplikasi Teknologi Ajax yang bersifat asynchronously, yang mempunyai beberapa kelebihan diantaranya mengirim dan menerima data dari

user ke server tanpa perlu me-load kembali seluruh halaman melainkan hanya pada bagian yang diperlukan, aksi dari sisi klien dibagi menjadi dua bagian, yaitu layer user interface dan layer AJAX. Ketika user mengklik sebuah link

atau mengirimkan sebuah form maka input tersebut akan ditangani oleh layer

AJAX dan diinteraksikan dengan server.

1.2 Perumusan Masalah

Berdasarkan latar belakang yang telah dijelaskan, maka dapat dirumuskan permasalahan dalam tugas akhir ini, yaitu Bagaimana membangun aplikasi e-commerce dengan menggunakan metode AJAX dan menghasilkan website batik untuk pemasaran dan penjualan pada toko “BINKAR BATIK” selain itu agar masyarakat lebih mengenal beragai macam batik di Indonesia.

1.3 Batasan Masalah

a. Aplikasi yang dirancang ini merupakan aplikasi yang digunakan sebagai media promosi dan menangani pemesanan barang.

b. Aplikasi yang dirancang ini menggunakan bahasa pemrograman PHP. c. Aplikasi yang dirancang ini menggunakan database MySQL.

(18)

3

1.4 Tujuan

Tujuan dari pembuatan media promosi ini adalah membuat sebuah website

untuk menampung informasi seluruh hasil produksi Binkar batik sehingga dapat mengenalkan produk melalui media online yang memberikan pelayanan berupa informasi pada pelanggan atau konsumen melalui email maupun mengatasi proses transaksi melalui media online berupa web yang menggunakan AJAX agar dapat membantu promosi secara luas.

1.5 Manfaat

Manfaat yang dapat diperoleh dari pembuatan web yaitu :

a) Ikut serta dalam mengenalkan produk batik tulis pada pengusaha UKM. b) Efisiensi waktu dibandingkan dengan mencatat transaksi dengan cara manual

atau menggunakan aplikasi standart.

c) Membantu memberikan kemudahan kepada konsumen maupun admin di dalam pengelolaan produk untuk proses promosi maupun informasi karena melalui media online

d) Media promosi yang lebih murah dan efisien daripada menggunakan media promosi secara manual.

1.6 Metodologi Penelitian

(19)

a. Studi Literatur

Mencari referensi dan bahan - bahan pustaka tentang teori-teori dan beberapa informasi yang berhubungan atau memiliki manfaat dalam pemecahan masalah berdasarkan permasalahan yang akan dikerjakan dalam tugas akhir ini.

b. Pengumpulan Data – Data Studi Kasus.

Mencari contoh-contoh kasus serupa yang berhubungan dengan permasalahan yang dikerjakan dalam Tugas Akhir ini.

c. Analisis dan Perancangan :

Membuat analisa berdasarkan data-data yang sudah dimiliki, melakukan analisa kebutuhan sistem. Membuat konsep perancangan aplikasi dimulai dengan perancangan basis data dan desain antar muka aplikasi.

d. Implementasi Program :

Mengimplementasikan teknik dan metode yang akan digunakan. Detail mengenai implementasi program dilakukan sesuai dengan hasil analisa dan perancangan aplikasi.

e. Pengujian Aplikasi

1) Melakukan pengujian pada aplikasi yang telah dibuat. Menguji ketepatan data dan efektifitas sistem yang diterapkan pada aplikasi.

2) Evaluasi dan Penarikan kesimpulan.

3) Evaluasi dilakukan untuk mengetahui kinerja aplikasi apakah sudah sesuai dengan rencana, dan selanjutnya dilakukan penarikan kesimpulan dari hasil evaluasi tersebut.

(20)

5

1.7 Sistematika Pembahasan

BAB I PENDAHULUAN

Berisi tentang pendahuluan dimana dilakukannya pra-tugas akhir dan latar belakang yang menjelaskan tentang informasi dari instansi yang bersangkutan dimana berkaitan dengan permasalahan yang sedang dihadapi serta solusi pemecahannya, rumusan masalah, batasan masalah, tujuan, manfaat bagi pengguna serta sistematika penulisan yang digunakan dalam laporan Tugas Akhir ini.

BAB II TINJAUAN PUSTAKA

Berisi landasan – landasan teori dan hal - hal yang bersifat informatif yang akan digunakan sebagai data pendukung dalam penyelesaian permasalahan.

BAB III ANALISIS DAN PERANCANGAN SISTEM

Berisi tentang analisa masalah dari model penelitian untuk memperlihatkan keterkaitan antar variabel yang diteliti dan beberapa penjelasan dari analisa permasalahan yang di teliti.

BAB IV HASIL DAN PEMBAHASAN

(21)

BAB V PENUTUP

(22)

7

BAB II

TINJAUAN PUSTAKA

2.1 Batik dan Prospeknya

Batik adalah salah satu cara pembuatan bahan pakaian. Selain itu batik

bisa mengacu pada dua hal. Yang pertama adalah teknik pewarnaan kain dengan menggunakan malam untuk mencegah pewarnaan sebagian dari kain. Dalam literatur internasional, teknik ini dikenal sebagai wax-resist dyeing. Pengertian kedua adalah kain atau busana yang dibuat dengan teknik tersebut, termasuk penggunaan motif-motif tertentu yang memiliki kekhasan. Batik Indonesia, sebagai keseluruhan teknik, teknologi, serta pengembangan motif dan budaya yang terkait, oleh UNESCO telah ditetapkan sebagai Warisan Kemanusiaan untuk Budaya Lisan dan Nonbendawi (Masterpieces of the Oral and Intangible Heritage of Humanity) sejak 2 Oktober, 2009

Seni pewarnaan kain dengan teknik perintang pewarnaan menggunakan malam adalah salah satu bentuk seni kuno. Penemuan di Mesir menunjukkan bahwa teknik ini telah dikenal semenjak abad ke-4 SM, dengan diketemukannya kain pembungkus mumi yang juga dilapisi malam untuk membentuk pola. Di Asia, teknik serupa batik juga diterapkan di Tiongkok semasa dinasti Tang (618-907) serta di India dan Jepang semasa periode Nara (645-794).

(23)

atau awal abad XIX. Batik yang dihasilkan ialah semuanya batik tulis sampai awal abad XX dan batik cap baru dikenal setelah Perang Dunia I atau sekitar tahun 1920-an.

Walaupun kata "batik" berasal dari bahasa Jawa, kehadiran batik di Jawa sendiri tidaklah tercatat. G.P. Rouffaer berpendapat bahwa tehnik batik ini kemungkinan diperkenalkan dari India atau Srilangka pada abad VI atau VII. Di sisi lain, J.L.A. Brandes (arkeolog Belanda) dan F.A. Sutjipto (arkeolog Indonesia) percaya bahwa tradisi batik adalah asli dari daerah seperti Toraja, Flores, Halmahera, dan Papua. Perlu dicatat bahwa wilayah tersebut bukanlah area yang dipengaruhi oleh Hinduisme tetapi diketahui memiliki tradisi kuna membuat batik.

G.P. Rouffaer juga melaporkan bahwa pola gringsing sudah dikenal sejak abad XII di Kediri, Jawa Timur. Dia menyimpulkan bahwa pola seperti ini hanya bisa dibentuk dengan menggunakan alat canting, sehingga ia berpendapat bahwa canting ditemukan di Jawa pada masa sekitar itu. Detil ukiran kain yang menyerupai pola batik dikenakan oleh Prajnaparamita, arca dewi kebijaksanaan buddhis dari Jawa Timur abad XIII. Detil pakaian menampilkan pola sulur tumbuhan dan kembang-kembang rumit yang mirip dengan pola batik tradisional Jawa yang dapat ditemukan kini. Hal ini menunjukkan bahwa membuat pola batik yang rumit yang hanya dapat dibuat dengan canting telah dikenal di Jawa sejak abad ke-13 atau bahkan lebih awal.

(24)

9

kain serasah dengan pola 40 jenis bunga pada setiap lembarnya. Karena tidak mampu memenuhi perintah itu, dia membuat sendiri kain-kain itu. Namun sayangnya kapalnya karam dalam perjalanan pulang dan hanya mampu membawa empat lembar sehingga membuat sang Sultan kecewa. Oleh beberapa penafsir serasah itu ditafsirkan sebagai batik.

Dalam literatur Eropa, teknik batik ini pertama kali diceritakan dalam buku History of Java (London, 1817) tulisan Sir Thomas Stamford Raffles. Ia pernah menjadi Gubernur Inggris di Jawa semasa Napoleon menduduki Belanda. Pada 1873 seorang saudagar Belanda Van Rijekevorsel memberikan selembar batik yang diperolehnya saat berkunjung ke Indonesia ke Museum Etnik di Rotterdam dan pada awal abad XIX itulah batik mulai mencapai masa keemasannya. Sewaktu dipamerkan di Exposition Universelle di Paris pada tahun 1900, batik Indonesia memukau publik dan seniman.

Semenjak industrialisasi dan globalisasi, yang memperkenalkan teknik otomatisasi, batik jenis baru muncul, dikenal sebagai batik cap dan batik cetak, sementara batik tradisional yang diproduksi dengan teknik tulisan tangan menggunakan canting dan malam disebut batik tulis. Hugh Clifford merekam industri di Pekan tahun 1895 bagi menghasilkan batik, kain pelangi, dan kain telepok.

2.1.1 Jenis dan Model Batik

(25)

berbagai pengaruh luar, seperti para pedagang asing dan juga pada akhirnya, para penjajah. Warna-warna cerah seperti merah dipopulerkan oleh Tionghoa, yang juga memopulerkan corak phoenix. Bangsa penjajah Eropa juga mengambil minat kepada batik, dan hasilnya adalah corak bebungaan yang sebelumnya tidak dikenal (seperti bunga tulip) dan juga benda-benda yang dibawa oleh penjajah (gedung atau kereta kuda), termasuk juga warna-warna kesukaan mereka seperti warna biru. Batik tradisonal tetap mempertahankan coraknya, dan masih dipakai dalam upacara-upacara adat, karena biasanya masing-masing corak memiliki perlambangan masing-masing.

1. Menurut teknik

Gambar 2.1 Batik tulis

§ Batik tulis adalah kain yang dihias dengan teksture dan corak batik

menggunakan tangan. Pembuatan batik jenis ini memakan waktu kurang lebih 2-3 bulan.

(26)

11

§ Batik Cap adalah kain yang dihias dengan teksture dan corak batik yang dibentuk dengan cap ( biasanya terbuat dari tembaga). Proses pembuatan batik jenis ini membutuhkan waktu kurang lebih 2-3 hari.

Gambar 2.3 Batik Lukis

§ Batik lukis adalah proses pembuatan batik dengan cara langsung melukis pada kain putih.

2. Menurut Asal Pembuatan

(27)

2.1.2 Prospek Bisnis dan Omzet

Alasan Memilih Bisnis Batik

• UNESCO telah menetapkan batik Indonesia sebagai warisan budaya dunia.

• Aneka kreasi motif dan model batik saat ini semakin dinamis dan terus mengikuti perkembangan fashion.

• Adanya himbauan pemerintah bagi para pegawai negeri untuk mengenakan pakaian batik pada hari tertentu dan kemudian diiukti oleh perusahaan swasta untuk mnegenakan pakaian batik bagi para karyawannya telah ikut mendorong meningkatnya para peminat batik.

• Pakaian batik saat ini tidak hanya diminati oleh orang tua, tapi juga oleh para remaja.

Perkembangan busana batik membuat batik kemudian tidak hanya cocok untuk dikenakan untuk acara resmi tapi juga bisa untuk acara santai.

Potensi Penghasilan Bisnis Batik

• Harga grosir blus, hem dll Rp.20.000-Rp32.000

• Harga jual Rp.40.000-Rp.60.000 Estimasi Penghasilan Perbulan

• Asumsi jumlah penjualan perhari ialah 15 potong

• Harga jual rata-rata per potong Rp.45.000

• 15 potong pakaian batik x Rp.45.000 x 30 hari = Rp.20.250.000 Pengeluaran

• Harga grosir rata-rata per potong pakaian batik = Rp. 26.000

(28)

13

• Biaya operasional = Rp.500.000

• Biaya lain-lain = Rp.500.000

• Total pengeluaran = Rp.12.700.000

• Laba bersih = Rp.20.250.000 – Rp.12.700.000 = Rp.7.550.000 (http://batikyudhistira.com/content/8-peluang-usaha)

2.1.3 Tren Batik

Sebagai salah satu warisan budaya Indonesia, saat ini batik sudah mulai banyak yang melestarikannya. Sebelum tulisan ini, saya pernah membahas bagaimana rumitnya dalam membuat sebuah batik. Saat dunia komunikasi berkembang, berdampak juga pada sebuah kreatifitas, salah satunya pada motif batik. Dahulu Batik dikenal dengan model yang sangat tradisional, dimana mencirikan masing-masing daerah. Namun, dengan semakin berkembangnya zaman, ada pihak yang memanfaatkan perkembangan ini.

Batik itu berbicara mengenai cara pembuatannya dan motif. Biasanya batik dibuat dalam bentuk tulis dan cetak. Dalam membuat batik, saat ini sudah bisa menggunakan sebuah aplikasi dikomputer. Ini disebut sebagai batik digital, adanya perangkat lunak yang mempermudah dalam pembuatan batik. Batik ini dikenal dengan “Batik Fraktal”, motif dasar batik ini berasal dari terjemahan rumus matematika. Perangkat lunak tersebut dikenal sebagai Jbatik, perangkat lunak ini dapat menerjemahkan rumus matematika menjadi motif batik yang cantik, di desain kemudian di print ke kain, dan mulai pada proses pembatikan.

(29)

internasional. Klub sepakbola ini tentu yang sudah punya nama besar seperti Manchester United (MU), Barcelona (Barca), Chelsea, Inter Milan, Manchester City dan lain-lain. (http://ekonomi.kompasiana.com/wirausaha/2012/04/04/trend-batik-bola-cocok-bagi-penggila-bola/)

2.2 Website dan Cara Kerjanya

Web merupakan salah satu layanan yang tersedia dan sekarang digunakan secara meluas di seluruh dunia adalah layanan world wide web atau sering hanya disebut dengan web saja. Web bisa dikatakan sebagai koleksi dokumen atau arsip yang terdapat pada internet yang saling terhubung dan memungkinkan pengguna untuk melihat, mencari atau mengambil informasi yang tersedia.

Website merupakan sebuah halaman statis yang hanya menampilkan

informasi kepada pengguna. Pengguna dapat melihat dan mengambil informasi yang disediakan pada website. Berbeda dengan website, web application

merupakan rangkaian halaman yang bersifat dinamis yang memungkinkan pengguna melakukan suatu aksi pada sebuah web application. Website lebih merupakan layanan berbasis informasi sedangkan web application merupakan layanan berbasis task (aksi).

Web telah menjadi standar teknologi dan antarmuka beberapa aplikasi dalam jaringan komputer. Hal ini disebabkan karena kemudahan aplikasi berbasis

web digunakan, cukup dengan tunjuk dan klik (point and click) saja, maka pengguna komputer dapat menggunakan aplikasi web. (shidiq, 2011:2)

Untuk mengembangkan sebuah halaman web baik sebagai website atau

(30)

15

komponen penyusun ini akan bekerja sama untuk memberikan layanan web

dengan teknologi internet.

HyperText Markup Language (HTML) dan Cascading Style Sheet (CSS)

merupakan komponen-komponen yang terkait dengan penyajian informasi dalam sebuah halaman web browser.

Browser web pada dasarnya adalah suatu interpreter untuk menampilkan dokumen dalam format khusus, yang akan menerjemahkan script berupa tag-tag

HTML, sehingga teks yang diberi tag akan ditampilkan sesuai dengan format yang telah didefinisikan sesuai dengan definisi tag-nya.

JavaScript adalah progam dalam bentuk script, yang akan dijalankan oleh

interpreter yang telah ditanamkan ke dalam browser web, sehingga browser web

dapat mengeksekusi progam JavaScript. Progam JavaScript yang disisipkan ke dalam dokumen HTML dengan ditandai dengan tag yang diawali dengan

<script...> dan diakhiri dengan </script>. (Shidiq, 2011:4-5)

Web Browser merupakan aplikasi yang digunakan untuk mengakses

halaman web. Contoh web browser misalnya Internet Explorer dan Netscape Navigator. Internet Explorer dikembangkan oleh Microsoft yang merupakan perusahaan perangkat lunak terbesar di dunia pada saat ini. Sedangakan Netscape Navigator dikembangkan oleh Netscape.

2.2 E-Commerce

Electronic Commerce (e-Commerce) menggambarkan cakupan yang luas

(31)

Interchange (EDI), atau bisa juga melalui World Wide Web. E-Commerce ini juga meliputi transaksi di dalam dan di antara sektor bisnis yang khusus (private) dan umum (public), serta sistem yang melibatkan komunitas dalam negeri maupun internasional. Hal ini memang diakui karena dengan adanya e-Commerce ini, biaya operasional bisa dikurangi agar bisa bersaing dan berjuang dengan semakin banyaknya permintaan yang mengharuskan pelayanan yang cepat dan akurat. Kondisi tersebut merupakan gejala perkembangan informasi sosial yang bertambah pesat. Sebagai pernyataan sederhana, e-Commerce tidak hanya menjadi mekanisme yang tepat dan membutuhkan biaya yang murah untuk diterapkan, tetapi juga akan menjadi sebuah sistem sosial yang dapat diterima dan dapat diharapkan untuk digunakan.

Berbisnis secara online pada prinsipnya sama dengan bisnis konvesional

yaitu harus aktif dalam menawarkan dagangan. Penjual tidak hanya duduk diam setelah website yang digunakan untuk memberikan informasi sudah berada di dunia internet atau World Wide Web, melainkan harus dapat membuat website

efektif untuk menyebarkan informasi perusahaan. Berkaitan dengan sarana teknis penyebaran informasi melalui media internet. (Suryana&Sarwono, 2007:2005).

2.3 HTML

Hypertext Markup Language (HTML) adalah suatu bahasa yang

digunakan untuk menulis halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu (platform independent). HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standart

Generalized Markup Language (SGML). Dokumen HTML adalah suatu dokumen

(32)

17

(tag) tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. (Shidiq,2011:15) Cara menyisipkan JavaScript di dalam dokumen HTML ini disebut juga dengan

embadded JavaScript Programming karena progam JavaScript dituliskan di

antara teks dan tag-tag dokumen HTML.

Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML dikategorikan menjadi dua yaitu elemen <HEAD> yang berfungsi memberikan informasi tentang dokumen tersebut dan elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list (daftar), tabel dan lain-lain. Sedangkan tag dinyatakan dengan tanda lebih kecil “<” (tag awal) dan tanda lebih besar “>” (tag akhir). Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”).

Progam JavaScript disisipkan ke dalam dokumen HTML dengan disisipkan di antara tag <script> dan tag </script>, yang ditambahkan ke dalam dokumen HTML yang akan memiliki progam JavaScript di dalamnya. Secara umum progam JavaScript dituliskan dalam dokumen HTML dengan cara berikut

<script type=”text/JavaScript”>

... </script>

Pada tag script pembuka, maka tag script harus memiliki atribut

(33)

script yang ada dalam tag tersebut adalah JavaScript dalam format text. (Shidiq,2011:11-12).

HTML dengan eXtensible Markup Language (XML) sama-sama merupakan bahasa penandaan (markup language). Penandaan ini dilakukan dengan memberi tag yang biasanya di dokumen HTML berfungsi untuk mengatur penampilan dokumen pada browser. Sedangkan pada XML, penandaannya juga digunakan tag, hanya saja fungsinya yang berbeda yaitu untuk menetapkan sifat suatu informasi. Jadi, HTML digunakan untuk mengatur tampilan informasi, sedangkan XML untuk menciptakan, berbagai, dan memproses informasi.

2.4 PHP

(Kadir,2009:246) Professional Home Page (PHP) adalah skrip yang dijalankan di server. Jadi, berbeda dengan JavaScript yang di jalankan pada sisi klien. Keuntungan penggunaan PHP, kode yang menyusun progam tidak perlu dibagikan ke pemakai, yang berarti bahwa kerahasiaan kode dapat dilindungi

Hal menarik yang di dukung oleh PHP tetapi tidak mungkin dilakukan oleh JavaScript adalah kenyataan bahwa PHP bisa digunakan untuk mengakses berbagai macam database seperti Acces, Oracle, MySQL, dan lain-lain.

Seperti halnya JavaScript, kode PHP dapat disisipkan pada kode HTML. Selain itu PHP juga bisa digunakan untuk menghasilkan kode-jode HTML. Yang membedakan PHP dengan bahasa pemrograman lain adalah adanya tag penentu, yaitu diawali dengan “<?” atau “<?php” dan diakhiri dengan “?>”.

(34)

19

diedarkan dan dapat diperoleh secara gratis. PHP dapat dijalankan di berbagai web server misalnya IIS, Apache, PWS, dan lain-lain.

Beberapa kelebihan dari PHP adalah sebagai berikut: 1.PHP mudah dibuat dan kecepatan akses tinggi

2.PHP dapat berjalan dalam web server yang berbeda dan dalam sistem operasi yang berbeda pula. PHP dapat berjalan di sistem operasi UNIX, Windows dan Macintosh.

3.PHP diterbitkan secara gratis

4.PHP juga dapat berjalan pada web server Microsoft Personal Web Server, Apache, IIS, Xitami dan sebagainya.

5.PHP adalah termasuk bahasa yang embedded (bisa ditempel atau diletakkan dalam tag HTML).

6.PHP termasuk server-side programming. Sistem database yang didukung oleh PHP adalah:

1.Oracle 2.Sybase 3.mSQL 4.MySQL 5.Solid

(35)

2.5 MySQL

MySQL termasuk jenis Relational Database Management System

(RDBMS). Sehingga istilah seperti tabel, baris dan kolom tetap digunakan dalam MySQL. Pada MySQL sebuah database mengandung beberapa tabel, satu tabel terdiri dari sejumlah baris dan kolom.

Dalam konteks bahasa SQL, pada umumnya informasi tersimpan dalam tabel-tabel yang secara logik merupakan struktur dua dimensi yang terdiri atas baris-baris data (row atau record) yang berada dalam satu atau lebih kolom (column). Baris pada tabel sering disebut sebagai instance dari data sedangkan kolom sering disebut sebagai attributes atau field.

Data yang terdapat dalam tabel berupa field yang berisi nilai dari data tersebut. Nilai data dalam field ini memiliki tipe sendiri-sendiri. Untuk mengelola

database MySQL ada beberapa cara yaitu melalui prompt DOS (tool command line) dan dapat juga dengan menggunakan program utility seperti PHPMyAdmin, MySQLGUI, MySQL Manager Java Based, MySQL Administrator for Windows.

Tool command line MySQL merupakan suatu shell SQL client sederhana, utiliti ini memungkinkan penggunaan secara interaktif dan non-interaktif. Untuk menggunakan tool ini, caranya buka DOS prompt, kemudian aktifkan mysql.exe di direktori tempat install MySQL.

SQL adalah suatu bahasa permintaan yang telah distandarkan untuk semua program pengakses database seperti oracle, postgreSQL, SQL server, dan lain-lain. Ada beberapa fungsi yang digunakan dalam pembuatan aplikasi antara PHP

(36)

21

Disini fungsi MySQL inilah yang digunakan sebagai penghubung antar SQL

sehingga query tersebut dapat dijalankan pada admin dan dapat dilihat hasilnya oleh user.

Di dalam MySQL tersedia query untuk membuat fungsi search, jumlah,

update, ataupun edit data dari database, namun pada script PHP dapat langsung ditulis melalui script Mysql_query dengan code select, insert, delete, update, dan sintax-sintax lainnya. Dengan kata lain MySQL adalah sebuah sistem manajemen

database. Database adalah merupakan sekumpulan data yang terstruktur untuk menambah, mengakses, dan memproses data yang tersimpan dalam database

komputer, dibutuhkan sebuah sistem database manajemen seperti MySQL. Sejak komputer menjadi alat yang sangat bagus untuk menangani sejumlah besar data, sebagai utility yang stand-alone atau sebagai bagian dari suatu aplikasi. Dalam membuat database ini terdapat dua pilihan yang dapat kita lakukan yaitu cara yang pertama dari shell dan cara kedua dapat kita lakukan dari MySQL. (Suryana & Sarwono,2007:67)

2.6 AJAX

AJAX kependekan dari Asynchronouse JavaScript and XML adalah istilah dalam tehnik pemograman di lingkungan web, terutama dalam browser web. AJAX adalah nama yang diperkenalkan oleh Jesse James Garret dari Adaptive Path pada bulan febuari tahun 2005 (Shidiq,2011:477).

(37)

a) Dapat melakukan request kepada server tanpa harus me-reload semua halaman web, request ke dan response dari server dapat dilakukan secara

background.

b) Dapat melakukan parsing dan bekerja dengan data menggunakan format XML.

AJAX bukanlah bahasa pemrograman baru, tetapi merupakan teknik baru penggunaan standar yang telah ada. Dengan AJAX, aplikasi web yang dibuat akan dapat menjadi lebih baik, cepat dan menambah unsur user-friendly serta interaktif. AJAX berbasiskan pada JavaScript dan request HTTP.

Pengembangan website model tradisional bekerja secara synchronously

antara aplikasi dengan server. Cara bekerjanya adalah web browser akan mengirim data ke web server, selanjutnya web server akan memberi respon dan seluruh halaman akan di-refresh. Pada model ini, web server akan memberikan respon berisi seluruh halaman website terhadap request dari web browser. Proses ini akan berlangsung terus sesuai dengan aktivitas dari user. Cara kerja seperti ini akan menjadi masalah saat user menginginkan respon yang cepat dari website. Arsitektur website model tradisional digambarkan pada Gambar 2.4 berikut.

Gambar 2.4 Arsitektur Model Tradisional

(38)

23

kembali seluruh halaman melainkan hanya pada bagian yang diperlukan. Pada model AJAX, aksi dari sisi klien dibagi menjadi dua bagian, yaitu layer user interface dan layer AJAX. Ketika user mengklik sebuah link atau mengirimkan sebuah form maka input tersebut akan ditangani oleh layer AJAX dan diinteraksikan dengan server. Kegiatan ini kemudian dilanjutkan dengan

meng-update user interface. Jadi, dalam AJAX, interaksi user interface secara logika terpisah dengan interaksi jaringan.

Gambar 2.5 Arsitektur Model AJAX

Ada beberapa poin penting untuk menggambarkan AJAX sebagai berikut:

1. Layer AJAX tidak memerlukan komunikasi dengan server

(contohnya untuk validasi form karena dapat ditangani sepenuhnya oleh client-side).

2. Oleh karena request antara layer AJAX dan server berupa bagian kecil dari informasi (tidak komplit satu halaman) maka sering digunakan untuk interaksi dengan database sehingga waktu render

dan waktu pengiriman menjadi pendek.

3. Layer User Interface (UI) secara langsung tergantung pada respons

(39)

XML and XSLT

XML HttpRequest JavaScript

XHTML and CSS XHTML DOM

AJAX Web Application Model

process). Berarti, untuk beberapa interaksi, waktu tunggu user

hampir tidak ada.

4. Komunikasi antar halaman dan server tidak selama memerlukan AJAX untuk mengubah perubahan UI. Contoh, beberapa aplikasi menggunakan AJAX untuk notifikasi dengan halaman, tetapi tidak melakukan apa pun terhadap response dari server.

Selanjutnya penjelasan mengenai teknologi di balik AJAX yang digambarkan pada Gambar 2.6

Gambar 2.6 Teknologi di balik AJAX

1.Extensible HyperText Markup Language (XHTML) adalah bahasa

markup seperti HTML, tetapi dengan gaya bahasa lebih baik. XHTML digunakan untuk membuat halaman web dan dokumen-dokumen lain yang dapat ditampilkan dalam browser.

(40)

25

(termasuk beberapa variasi bahasa XML seperti XHTML dan SVG).

3.JavaScript adalah bahasa scripting kecil, ringan, berorientasi objek dan lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai bahasa mandiri, melainkan dirancang untuk ditanamkan pada produk.

4.Document Object Model (DOM) adalah sebuah Application

Program Interface (API) untuk dokumen HTML dan XML.

DOM menyediakan representasi dokumen secara terstruktur, dimungkinkan untuk mengubah isi dan presentasi visual.

5.Extensible Markup Language (XML) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antar sistem yang beraneka ragam. 6.Extensible Stylesheet Language Transformation (XSLT) adalah

sebuah bahasa berbasis XML untuk transformasi dokumen XML. XSLT biasanya digunakan untuk mengubah skema XML ke halaman web atau dokumen PDF.

7.Objek XMLHttpRequest berkemampuan melakukan pertukaran data secara asinkron dengan web server. AJAX menggunakan obyek XMLHttpRequest untuk melakukan pertukaran data dengan web server.

(41)

dibandingkan dengan XML adalah pada proses penerjemahan data menggunakan JavaScript. JavaScript dapat menerjemahkan JSON menggunakan built-in procedure eval().

Berikut ini adalah contoh Script Ajax, PHP dan database SQL dalam

pembuatan form no induk

Gambar 2.7 Contoh Form Langkah-langkah sebagai berikut :

a. Buat script ajavascript Ajax seperti yang pada contoh di bawah kemudian

simpan dengan nama prmajax.js :

function CariData(strdom,pid,urut) {

document.getElementById(strdom).innerHTML="Loading ...";

var xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) {

alert ("Your browser does not support AJAX!"); return;

}

var date=new Date();

var timestamp=date.getTime(); var url="cari.php";

var noinduk = document.getElementById(pid).value; var param="pid="+noinduk+"&urut="+urut;

(42)

27

}

xmlhttp.open("POST",url,true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.setRequestHeader("Content-length", param.length);

xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(param);

}

function GetXmlHttpObject() { var xmlhttp=null;

b. membuat form pencarian seperti pada contoh di bawah :

<title>Untitled Document</title> <script type="text/javascript" src="prmajax.js"></script>

</head>

(43)

<h1>Multiple Search & Posting</h1>

No Induk : <input type="text" name="pid[0]" id="pid[0]" value="" />

</span>

</span>

</form> </div> </body> </html>

c. Membuat script pencarian data yang akan di load dengan ajax, yaitu : script cari.php

<?php

include('config.php');

(44)

29

$query = mysql_query("SELECT * FROM siswa WHERE noinduk='".$_POST['pid']."'");

if(mysql_num_rows($query)>0):

$data = mysql_fetch_array($query); name="nama['.$urut.']" value="'.$nama.'" /></td></tr>'. '<tr><td>Alamat</td><td><textarea

name="alamat['.$urut.']">'.$alamat.'</textarea></td></t r>'.

'</table>'; else:

echo '<span class="eror">Data pengunjung dengan No Induk '.$_POST['pid'].' tidak ditemukan</span>'; endif;

else:

echo '<span class="eror">Eror : No induk pengunjung kosong</span>';

endif ?>

d. Membuat database dan juga script koneksinya config.php

<?php

$conn = mysql_connect('localhost','root','binkar'); if($conn){

$sel=mysql_select_db('tutu',$conn); }

e. Buat script proses.php untuk memproses semua data yang akan di posting

(45)

Alamat => '.$alamat[$key].'<br />'; }

} } ?>

Untuk databasenya, dengan perintah seperti berikut : CREATE TABLE ` pengunjung ` (

`noinduk` varchar(10) NOT NULL, `nama` varchar(100) default NULL, `alamat` varchar(200) default NULL,

`tanggallahir` varchar(20) default NULL, `tempatlahir` varchar(50) default NULL, `kelas` varchar(10) default NULL,

`nis` varchar(10) default NULL, PRIMARY KEY (`noinduk`)

(46)

31

BAB III

ANALISIS DAN PERANCANGAN SISTEM

3.1. Identifikasi Masalah

Penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasi permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya. Atau gambarang mudahnya adalah, analisis sistem adalah penelitian atas sistem yang telah ada dengan tujuan untuk merancang sistem yang baru atau diperbarui.

Perancangan Aplikasi Teknologi Ajax pada E-Commerce on-line untuk promosi Batik Tulis Jawa Timurpada penelitian ini dirancang untuk menyediakan sarana media promosi dan informasi tentang hasil produksi Batik Tulis di Jawa Timur

(47)

Disamping dapat meningkatkan kebutuhan produksi, area pemasaran yang semakin luas juga dapat memberikan peningkatan profit yang signifikan kepada para pengusaha Batik Tulis. Melalui peningkatan profit tersebut, diharapkan juga dapat meningkatkan taraf hidup para pengerajin UKM Batik Tulis Jawa Timur serta menambah pemasukan APBD.

3.2. Perancangan Sistem

Setelah menganalisa permasalahan yang telah dijelaskan diatas maka tahapan selanjutnya adalah melakukan perancangan sistem, dimana pada tahap perancangan sistem ini meliputi pembuatan Data Flow Diagram (DFD), dan

Entity Relationship Diagram (ERD).

3.3. Data Flow Diagram (DFD)

Data Flow Diagram (DFD) merupakan alat perancangan sistem yang

berorientasi pada alur data dengan konsep dekomposisi. Penggunaan DFD adalah untuk menggambarkan analisa maupun rancangan sistem yang mudah dikomunikasikan oleh profesional sistem kepada pemakai maupun pembuat program. Selain itu DFD merupakan suatu model data atau proses yang dibuat untuk menggambarkan darimana asal data dan kemana tujuan data yang keluar dari sistem, dimana suatu data disimpan, proses apa yang menghasilkan data tersebut, interaksi antara data yang tersimpan dan proses yang dikenakan pada data tersebut. Untuk membuat DFD digunakan aplikasi ProcessAnalyst dari paket

(48)

33

DFD merupakan metode atau alat yang digunakan dalam metodologi pengembangan sistem terstruktur ( Structure Analysis Design ). DFD digunakan untuk menggambarkan suatu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimana data tersebut mengalir dan disimpan.

Beberapa simbol yang digunakan dalam pendesainan DFD yaitu :

a. Eksternal Entity ( kesatuan Luar ) atau Boundary ( batas sistem ) batas sistem yang memisahkan suatu sistem dengan lingkungan luarnya. Sistem akan menerima input dan menghasilkan output kepada lingkungan luarnya.

b. Data Flow ( Arus Data )

Arus data mengalir diantara proses ( process ), simpanan data (data story), dan kesatuan luar (entity).

c. Process ( Proses )

Suatu proses merupakan kegiatan atau kerja yang dilakukan oleh orang, mesin atau komputer dari hasil suatu arus data yang masuk ke dalam proses untuk dihasilkan arus data yang keluar dari proses.

d. Data Story ( Penyimpanan Data )

Simpanan data merupakan simpanan dari data yang dapat menyimpan files

atau data-data yang didapat.

a. Diagram Konteks

(49)

secara keseluruhan, dengan begini maka entitas apa saja yang terkait dengan sistem dapat di ketahui tidak hanya itu dalam konteks diagram ini kita juga dapat mengetahui dari mana saja asal data yang masuk kedalam sistem

Context Diagram merupakan gambaran umum sistem dari aplikasi yang akan dibuat. Gambaran umum ini menjelaskan hubungan antara entitas luar sistem dengan sistem serta aliran informasi antara sistem dengan entitas luar. Gambar 3.1 berikut merupakan Context Diagram dari aplikasi UKM Batik Tulis Jawa Timur.

(50)

35

Pada Data Flow Diagram ( Gambar 3.1 ) menggambarkan bahwa pada DFD level konteks terdapat berbagai macam aliran- aliran Data dari beberapa entitas yang terlibat, entitas -entitas tersebut adalah :

a. Admin : Mengontrol sebagian besar dari sistem diantaranya yang paling penting adalah, memasukkan produk, jenis produk, kota, propinsi, dan data pemesanan..

b. Pelanggan : Melihat produk, memilih produk dan melihat keranjang belanja.

b. Data Flow Diagram Level 1

Data Flow Diagram adalah media yang digunakan untuk menggambarkan

aliran data yang mengalir pada suatu sistem informasi. berikut Gambar DFD nya :

1) Proses Mengelola Data Produk Informasi Data Produk

Data Produk

Dara Produk

Dara Produk Admin

1 tbl_produk Data Produk

Gambar 3.2 DFD Level 1 Mengolah Data Produk Penjelasan Gambar 3.2

Admin menginputkan data produk, setelah di inputkan system akan memproses apakah semua data sudah di inputkan atau masih ada yang kurang, jika data ang di inputkan sudah benar maka system akan memasukkan data ke dalam database.

(51)

Informasi Jenis Produk

Data Jenis Produk

Data Jenis Produk Data Jenis Produk Data Jenis

Produk 2 tbl_jenis_batik Admin

Gambar 3.3 DFD Level 1 Mengolah Jenis Produk Penjelasan Gambar 3.3

Admin menginputkan data produk, setelah di inputkan system akan memproses apakah semua data sudah di inputkan atau masih ada yang kurang, jika data yang di inputkan sudah benar maka system akan memasukkan data kedalam database.

3) Data Pesanan

Informasi Pesanan

Data Pesanan Data pesanan Data Pesanan

Data Pesanan

3 tbl_pesanan Admin

Gambar 3.4 DFD Level 1 Pendataan Pesanan

Penjelasan Gambar 3.4

Admin melihat pesanan pelanggan, selanjutnya admin akan merubah data sesuai dengan produk yang dipesan, data sudah dikirim atau dibatalkan.

(52)

37

Data Kota

Data Kota Informasi Kota

Data Kota

Data Kota 4 tbl_kota

Admin

Gambar 3.5 DFD Level 1 Pendataan Kota Penjelasan Gambar 3.5

Admin menginputkan nama kota, setelah itu system akan mengecek apakah nama kota tersebut sudah ada dalam database atau belum, jikan belum system akan memasukkan data tersebut kedalam database.

5) Kelola Propinsi

Inform asi Propi nsi

Data Propi nsi Data Propi nsi

Data Propi nsi

Data Propi nsi 5 tbl _propi nsi Adm i n

Gambar 3.6 DFD Level 1 Pendataan Propinsi

Admin menginputkan nama propinsi, selanjutnya system akan mengecek apakah nama propinsi tersebut sudah ada atau belum, jika belum ada system akan memasukkan data tersebut kedalam database.

(53)

Data keranj ang Bel anj a

Data Keranj ang Bel anj a Informasi Keranj ang Bel anj a

Keranj ang Bel anj a

Informasi Data Pesanan Data Pesanan

Data Pesanan Data Pesanan

Pengunj ung

Pendaftaran

6 tbl _pel anggan

Pel anggan

Gambar 3.7 DFD Level 1 Proses Pendataan Pelanggan

Pengunjung yang belum mendaftar tidak bisa memesan produk, jika pengujung sebelumnya sudah mendaftar maka pengunjung sudah bisa langsung login ke halaman user.

Untuk masuk ke halaman user, pengunjung harus login dengan memasukkan usename dan password, setelah itu system akan mengecek apakah usename dan password sudah terdaftar atau belum, jika sudah terdaftar maka pengunjung bisa masuk ke halaman user, selanjutnya user bisa mimilih dan memesan produk yang tersedia.

c. Data Flow Diagram Level 2 1) Proses Mengelola Data Produk

(54)

39

Inforasi Produk _{Data Produk}

Data Produk T ambah Produk

Informasi Produk

Data Produk

Admin Lihat

Data Produk _{Data Produk}Hapus 1 tbl_produk

Ubah Data Produk

T ambah Data Produk

Gambar 3.8 DFD Level 2 Proses Mengolah Data Produk Penjelasan Gambar 3.8

Admin menginputkan data produk ke dalam form yang sudah di sediakan, selanjutnya sistem akan mengecek apakah data yang dimasukkan sudah benar atau belum, jika benar data produk akan dimasukkan ke dalam database. Selanjutnya admin bisa mengubah data produk atau menghapusnya.

2) Proses mengelola jenis produk

Data Produk Informasi Produk

Tambah Jenis Produk _{Data Produk}

Data Produk Inforasi Produk

Ubah Produk Data Produk

Data Produk

Jenis Produk Hapus 2 tbl_jenis_produk

Jenis Produk

Ubah Jenis Produk Tambah Jenis Produk

(55)

Admin menginputkan data jenis produk ke dalam form yang sudah di sediakan, selanjutnya system akan memasukkan data jenis produk ke dalam database. Selanjutnya admin bisa mengubah data jenis produk atau menghapusnya.

3) Proses Mengelola Data propinsi

Data Propi nsi Data Propi nsi Inform asi data Propi nsi

Hapus Data Propi nsi

Inform asi data Propi nsi _{Data Propi nsi}

Data Propi nsi Ubah Data Propi nsi

Inform asi Data Propi nsi Data Propi nsi

Data Propi nsi T am bah Data Propi nsi

Inform asi data Propi nsi

Data Propi nsi

Adm i n Li hat

Data Propi nsi Hapus 3 tbl _propi nsi Data Propi nsi

Ubah Data Propi nsi T am bah Dara Propi nsi

Gambar 3.10 DFD Level 2 Proses Mengolah Data Produk Penjelasan Gambar 3.10

Admin menginputkan data propinsi ke dalam form yang sudah ada, selanjutnya sistem akan menimpan data propinsi ke dalam database. Selanjutnya admin bisa mengubah data propinsi atau menghapusnya. 4) Proses Mengelola Data kota

Data Kota Informasi data Kota

T ambah Data Kota

Data Kota Data Kota

Informasi Data Kota

Ubah Data Kota

Data Kota Data Kota Informasi data Kota

Hapus Data Kota

Informasi data Kota _{Data Kota} Data Kota Admi n Li hat

Data Kota Hapus 4 tbl _kota Data Kota

Ubah Data Kota T ambah Dara Kota

(56)

41

Admin menginputkan data kota ke dalam form yang sudah ada, selanjutnya sistem akan menimpan data kota ke dalam database. Selanjutnya admin bisa mengubah data kota atau menghapusnya.

3.4 Conceptual Data Model

Conceptual Data Model atau yang sering di sebut dengan CDM

merupakan suatu tahap awal perancangan / pembuatan table – table apa saja yang akan di buat berdasarkan kebutuhan-kebutuhan data yang di digunakan dalam menjalankan suatu proses di dalam aplikasi, perancangan sistem

database ini juga di gunakan untuk mendukung kinerja dari aplikasi yang dibuat.

Model data konseptual adalah rancangan dalam bentuk diagram sebelum pembuatan database secara detail. Model data konseptual ini dibuat tanpa harus mempertimbangkan data DBMS apa yang nanti dipakai. Model data konseptual atau dengan kata lain Conceptual Data Model (CDM).

(57)

Pada aplikasi sistem ini mempresentasikan rancangan basis data konseptual di server. Pada konsep rancangan ini dibuat dengan menggunakan

Power Designer 15 Setelah memahami konsep berjalannya sistem, dapat

ditentukan gambar konseptual diagram yang terlibat dalam proses. Di bawah ini adalah gambar Conceptual Data Model nya:

Mempunyai _banyak_produk tbl _j eni s_bati k

kd_j eni s_bati k j eni s_bati k

I

VA20 _{tbl _pel anggan}

i d_pel anggan

tbl _detai l _pesanan no_pesanan

Gambar 3.12 Conceptual Data Model E-Commerce

3.4. Physical Data Model

Perancangan database secara fisik merupakan tahapan untuk mengimplementasikan hasil perancangan database secara logis menjadi tersimpan secara fisik pada media penyimpanan eksternal sesuai dengan

DBMS yang digunakan. Dapat disimpulkan bahwa proses perancangan fisik merupakan transformasi dari perancangan logis terhadap DBMS yang digunakan sehingga dapat disimpan secara fisik pada media penyimpanan.

(58)

43

yang diberikan manajemen. Dalam siklus hidup proyek itu biasanya berasal dari model data logis, meskipun mungkin reverse-engineered dari implementasi database yang diberikan. Sebuah physical data model lengkap akan mencakup semua artefak database yang diperlukan untuk membuat hubungan antara tabel atau mencapai tujuan kinerja, seperti indeks, definisi kendala, menghubungkan tabel, tabel dipartisi atau cluster. Physical data model biasanya dapat digunakan untuk menghitung perkiraan penyimpanan dan mungkin termasuk rincian alokasi penyimpanan khusus untuk sistem database tertentu. Model data fisik dibuat dengan cara merubah model data konseptual yang telah dijelaskan diatas. Model data ini menghasilkan tabel - tabel yang nantinya akan dipakai dalam implementasi sistem yang dibuat. Dibawah ini adalah gambar dari Physical Data Model dari data fisik yang telah dibuat :

(59)

3.5. Struktur Tabel

1) Tabel Jenis Batik

Nama Tabel : Tbl_Jenis_Batik

Isi Tabel : Berisi field untuk data - data Jenis Batik.

Primary Key : KD_Jenis_Batik Tabel 3.1 Tabel Jenis Batik

No Kolom Tipe Data Panjang Primary Key Foreign Key 1 KD_Jenis_Batik Int -

2 Jenis_Batik Varchar 20

2) Tabel Produk

Nama Tabel : Tbl_Produk.

Isi Tabel : Berisi field untuk data – data Produk.

Primary Key : KD_Produk.

Tabel 3.2 Tabel Produk

No Kolom Tipe Data Panjang Primary Key Foreign Key

1 KD_Produk Char 6

2 KD_jenis_Batik Varchar 20 3 Nama_pakaian Varchar 30 4 Pajang_Gemis Int - 5 Panjang_lengan Int - 6 Warna_Baju Varchar 20 7 Bahan_batik Varchar 20 8 Perlengkapan Varchar 30

9 Gambar Varchar 100

10 Deskripsi Text -

(60)

45

3) Tabel Pesanan

Nama Tabel : Tbl_Pesanan.

Isi Tabel : Berisi field untuk data pesanan pelanggan.

Primary Key : Id_Pesanan.

Foreing Key : Id_Pelanggan.

Foreing Key : Kd_Produk.

Foreing Key : Kd_ukuran.

Tabel 3.3 Tabel Pesanan

1 Id_Pesanan Int -

2 Id_Pelanggan Char 6 3 Kd_produk Char 6

4 Kd_ukuran Cahr 6

6 Nama_pekaian Varchar 30

7 Harga Int -

8 Qty Int -

4) Tabel Kota

Nama Tabel : Tbl_Kota.

Isi Tabel : Berisi field untuk data-data kota.

Primary Key : Kd_Kota.

Tabel 3.4 Tabel Kota

1 Kd_Kota Int -

2 Kd_propinsi Int -

(61)

5) Tabel Admin

Nama Tabel : Tbl_Admin.

Isi Tabel : Berisi field untuk admin.

Primary Key : Id_Admin.

Tabel 3.5 Tabel Admin

1 Id_Admin Char 5

2 Nama_lengkap Varchar 50 3 Username Varchar 20

4 Email Varchar 50

5 Password Varchar 70

6 Level_Admin Enum 2

7 Status_Admin Tinyint 1

6) Tabel Propinsi

Nama Tabel : Tbl_Propinsi.

Isi Tabel : Berisi field untuk data-data propinsi.

Primary Key : Kd_Propinsi.

Tabel 3.6 Tabel Propinsi

No Kolom Tipe Data Panjang Primary Key Foreign Key 1 Kd_Propinsi Int -

(62)

47

7) Tabel Pelanggan

Nama Tabel : Tbl_Pelanggan.

Isi Tabel : Berisi field untuk data-data pelanggan.

Primary Key : Id_Pelanggan.

Tabel 3.7 Tabel Pelanggan

No Kolom Tipe Data Panjang Primary Key Foreign Key 1 Id_Pelanggan Char 5

2 Nama_lengkap Varchar 30

3 Username Varchar 30 4 Password Varchar 32

5 Email Varchar 30

6 Alamat Text -

7 Id_Propinsi Int -

(63)

52 4.1 Implementasi Sistem

Desain sistem menentukan bagaimana suatu sistem akan menyelesaikan apa yang mesti diselesaikan, tahap ini menyangkut mengkonfigurasikan dari komponen-komponen perangkat lunak dan perangkat keras dari suatu sistem, sehingga setelah instalasi dari sistem akan benar-benar memuaskan rancang bangun yang telah ditetapkan pada akhir tahap analisis sistem.

4.2 Tujuan Implementasi Sistem

Tahap implmentasi sistem adalah tahapan lanjutan setelah analisa sistem, tahap perancangan sistem ini memiliki 2 tujuan utama yaitu :

a. Untuk memenuhi kebutuhan kepada pemakai sistem

b. Untuk memberikan gambaran yang jelas dan rancang bangun yang lengkap kepada pemrogram komputer dan ahli-ahli teknik yang terlibat ( lebih condong pada desain sistem yang terinci )

Maka berdasarkan pengertian di atas penulis dapat menarik kesimpulan bahwa tujuan dari perancangan Aplikasi E-Commerce adalah untuk membuat suatu perancangan sistem yang tidak rumit dan mudah untuk di operasikan oleh pengguna.

4.3 Implementasi Antar Muka

(64)

53

karena dalam merancang antarmuka harus memenuhi tiga persyaratan: sebuah antarmuka harus sederhana, sebuah antarmuka harus lengkap, dan sebuah antarmuka harus memilki kinerja yang cepat.

4.3.1 Antar Muka Home

Berikut ini merupakan gambaran home dari Aplikasi E-commerce. Di mana halaman home digunakan untuk tampilan pertama dari apliasi E-Commerce.

Gambar 4.1 Antar Muka Halaman Pertama.

4.3.2 Antar Muka Halaman Pemesanan

(65)

4.3.3 Antar Muka Halaman Pendaftaran

(66)

55

Gambar 4.3 Antar Muka Halaman Pendaftaran.

4.3.4 Antar Muka Halaman Login User

Pada halaman ini user diharuskan untuk login terlebih dahulu, jika sudah login user akan dibawa kehalaman pelanggan untuk memilih produk yang tersedia.

Gambar 4.4 Antar Muka Halaman Login.

4.3.5 Antar Muka Halaman Pelanggan

(67)

Gambar 4.5 Antar Muka Halaman Pelanggan.

Gambar 4.6 Antar Muka Halaman Pelanggan

4.3.6 Antar Muka Halaman Total Harga

(68)

57

Gambar 4.7 Antar Muka Halaman Total Harga.

4.3.7 Antar Muka Halaman Pengisian Data Pengiriman

Halaman pengisian data pengiriman adalah halaman dimana kita dapat mengisi data diri kita dimana produk akan dikirimkan sehingga produk dapat sampai pada tujuan yang kita iniginkan.

(69)

4.3.8 Antar Muka Halaman Berhasil Pengisian Data Pengiriman

Halaman ini adalah halaman selanjutnya ketika kita berhasil memasukkan data di halaman data pengiriman. Di halaman ini diberikan informasi bagaimana cara pembayaran transfer melalui rekening Bank dan contact.

Gambar 4.9 Antar Muka Halaman Berhasil Pengisian Data Pengirman

4.3.9 Antar Muka Halaman LogOut

Halaman ini menjelaskan bagaimana cara me-logout dari halaman pelanggan. Klik Logo logout pada pilihan seperti di Gambar 5.0.

Gambar 4.10 Antar Muka Halaman LogOut

(70)

59

Gambar 4.11 Antar Muka Halaman Setelah LogOut

4.3.10 Antar Muka Halaman Login Admin

Halaman login admin merupakan halaman utama untuk masuk ke halaman administrator untuk merubah, menambah dan juga menghapus produk.

Gambar 4.12 Antar Muka Halaman Login Admin.

4.3.11 Antar Muka Halaman Home

(71)

Gambar 4.13 Antar Muka Halaman Home .

4.3.12 Antar Muka Halaman Daftar Produk

Halaman daftar produk merupakan halaman pertama untuk menambah, mengubah dan menghapus produk yang sudah ada.

Gambar 4.14 Antar Muka Halaman Daftar Produk.

4.3.13 Antar Muka Halaman Tambah Produk

(72)

61

Gambar 4.15 Antar Muka Halaman Tambah Produk.

4.3.14 Antar Muka Form Untuk Merubah Produk

Halaman ubah produk merupakan halaman dimana admin bisa malakukan perubahan produk yang sudah ada.

(73)

4.3.15 Antar Muka Konfirmasi Hapus Produk

Halaman hapus produk merupakan halaman dimana admin bisa menghapus produk yang sudah ada.

Gambar 4.17 Antar Muka Halaman Hapus Produk.

4.3.16 Antar Muka Halaman Jenis Batik

(74)

63

Gambar 4.18 Antar Muka Halaman Jenis Batik.

4.3.17 Antar Muka Ubah Jenis Batik

Halaman tambah produk merupakan halaman dimana admin bisa mengubah jenis batik yang sudah ada.

(75)

Halaman hapus jenis batik merupakan halaman dimana admin menghapus jenis batik, jika sudah tidak diperlukan lagi.

Gambar 4.20 Antar Muka Hapus Jenis Batik.

4.3.19 Antar Muka Halaman Daftar Propinsi

Halaman daftar propinsi merupakan halaman dimana admin bisa melihat propinsi apa saya yang sudah, selain itu admin bisa menambahkan propinsi baru pada form yang sudah tersedia.