• Tidak ada hasil yang ditemukan

RANCANG BANGUN WEB INTERAKTIF & DINAMIS PADA SPDC SURABAYA DENGAN TEKNOLOGI A-H5 BERBASIS CUSTOMER RELATIONSHIP MANAGEMENT (CRM).

N/A
N/A
Protected

Academic year: 2017

Membagikan "RANCANG BANGUN WEB INTERAKTIF & DINAMIS PADA SPDC SURABAYA DENGAN TEKNOLOGI A-H5 BERBASIS CUSTOMER RELATIONSHIP MANAGEMENT (CRM)."

Copied!
113
0
0

Teks penuh

(1)

BERBASIS

CUSTOMER RELATIONSHIP MANAGEMENT

(CRM)

SKRIPSI

Disusun oleh :

ANJ AS PURNOMO

NPM. 0834010139

J URUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”

J AWA TIMUR

(2)

PADA SPDC SURABAYA DENGAN TEKNOLOGI A-H5

BERBASIS

CUSTOMER RELATIONSHIP MANAGEMENT

(CRM)

SKRIPSI

Diajukan Untuk Memenuhi Sebagai Persyaratan Dalam Memperoleh Gelar Sarjana Komputer

Jurusan Teknik Informatika

Disusun oleh :

ANJ AS PURNOMO

NPM. 0834010139

J URUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”

J AWA TIMUR

(3)

RANCANG BANGUN WEB INTERAKTIF & DINAMIS

PADA SPDC SURABAYA DENGAN TEKNOLOGI A-H5

BERBASIS CUSTOMER RELATIONSHIP MANAGEMENT (CRM)

Disusun Oleh :

ANJ AS PURNOMO

NPM. 0834010139

Telah disetujui untuk mengikuti Ujian Negara Lisan Gelombang IV Tahun Akademik 2011/2012

Pembimbing Utama Pembimbing Pendamping

Gede Susrama MD, ST, M.Kom Sugiar to, S.Kom

NPT. 37006 060 210 1 NPT. 3 8702 11 0343 1

Mengetahui,

Ketua J ur usan Teknik Infor matika Fak ultas Tek nologi Industr i UPN ” Veter an” J awa Timur

(4)

PADA SPDC SURABAYA DENGAN TEKNOLOGI A-H5 BERBASIS CUSTOMER RELATIONSHIP MANAGEMENT (CRM)

Disusun Oleh :

ANJ AS PURNOMO

NPM. 0834010139

Telah diper tahankan di hadapan dan diter ima oleh Tim Penguji Skr ipsi Pr ogr am Studi Tek nik Infor matika Fakultas Tek nologi Industr i

Univer sitas Pembangunan Nasional ”Veter an” J awa Timur Pada Tanggal 17 Febr uar i 2012

Pembimbing : Tim Penguji :

1. 1.

I Gede Susrama MD, ST, M.T Dr . Ni Ketut Sar i, MT

NPT. 37006 060 210 1 NIP. 19650731 199203 2 001

2. 2.

Sugiar to, S.Kom Ir. Pur nomo Edy Sasongko, MP

NPT. 3 8702 11 0343 1 NIP. 19640714 198803 1 001

3.

Basuki Rachmat, S. Si, MT NPT. 3 6907 060 209 1 Mengetahui,

Dekan Fakultas Teknologi Industr i

Univer sitas Pembangunan Nasional ”Veter an” J awa Timur

(5)

PANITIA UJ IAN SKRIPSI / KOMPREHENSIF

J l. Raya Rungkut Madya G unung Anyar Telp. (031) 8706369 (Hunting). Fax. (031) 8706372 Sur abaya 60294

KETERANGAN REVISI Mahasiswa di bawah ini :

Nama : Anjas Purnomo NPM : 0834010139 Jurusan : Teknik Informatika

Telah mengerjakan revisi/ tidak ada revisi*) PRA RENCANA (DESIGN) / SKRIPSI / TUGAS AKHIR Ujian lisan gelombang IV, TA 2011/2012 dengan judul:

RANCANG BANGUN WEB INTERAKTIF & DINAMIS PADA SPDC SURABAYA DENGAN TEKNOLOGI A-H5 BERBASIS CUSTOMER RELATIONSHIP MANAGEMENT (CRM)

Surabaya, Februari 2012 Dosen Penguji yang memerintahkan revisi:

1) Dr. Ni Ketut Sari, MT

NIP. 19650731 199203 2 001 2) Ir. Purnomo Edy Sasongko, MP

NIP. 19640714 198803 1 001 3) Basuki Rachmat, S. Si, MT

NPT. 3 6907 060 209 1

Mengetahui,

Pembimbing Utama Pembimbing Pendamping

I Gede Susrama MD, ST, MT. Sugiarto, S.Kom NPT. 37006 060 210 1 NPT. 3 8702 110 343 1

{

}

{

}

(6)

DOSEN PEMBIMBING I : I GEDE SUSRAMA MAS D, ST. M.T.

DOSEN PEMBIMBING II : SUGIARTO, S.Kom.

PENYUSUN : ANJ AS PURNOMO

ABSTRAK

Pada sektor pendidikan, kehadiran teknologi informasi menjadi titik terpenting yang harus dikembangkan. Karena pada saat ini, kebutuhan informasi dan penggunaan komputer sangat canggih serta terus menerus berkembang sesuai dengan kemajuan teknologi informasi. Sur fsoft Indonesia Pr ofesional Development Centr e (SPDC) adalah Lembaga Profesional Development Centre (Pusat Pengembangan Profesional) yang bergerak pada bidang pendidikan Teknologi Informasi, Bahasa, Bisnis dan Manajemen. Dimana dunia pendidikan saat ini sangat penting bagi manusia untuk mencapai cita-citanya.

Di dalam permasalahan yang ada pada SPDC. Pihak lembaga ingin mempublikasikan SPDC kepada masyarakat luas tentang visi-misi, keunggulan dan program yang ditawarkan dalam lembaga SPDC. Penulis mengambil sebuah gambaran dari sebuah aplikasi website profil Lembaga. Dimana dalam aplikasi website tersebut, memberikan informasi tentang profil Lembaga. Sehingga sistem ini akan membantu mengembangkan informasi yang dipublikasi untuk masyarakat luas tentang Lembaga Pendidikan SPDC dan juga membantu memberikan kemudahan kepada user (pihak lembaga dan pengunjung) untuk dapat meng-akses situs lembaga dan mengetahui segala informasi yang ada pada SPDC.

Sehubungan dengan adanya tugas akhir ini penulis mencoba memberikan pandangan dan solusi dengan mencoba membuat website yang dinamis yang mana penulis membuat website tersebut dengan menggunakan teknologi A-H5 (Ajax – HTML5) pada web iteraktif dan dinamis. Dimana Ajax yang bersifat asynchronously, mengirim dan menerima data dari user ke server tanpa perlu me-load kembali seluruh halaman sehingga akan proses tampilan website-nya pun akan semakin cepat. Kemudian ditambah Customer Relationship Management (CRM) yang senantiasa memperkuat hubungan dengan pelanggan.

Website Lembaga pendidikan SPDC memberikan informasi mengenai profil SPDC, Latar belakang SPDC, visi-misi, program yang ditawarkan, biaya, fasilitas, struktur keoorganisasian, galery, dan pendaftran online. Sehingga dengan adanya website ini pengunjung dapat memperoleh informasi serta bisa melekukan pendaftaran apabila berminat masuk lembaga pendidikan SPDC ini.

(7)

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 “Rancang Bangun Web Inter aktif dan Dinamis pada SPDC Sur abaya dengan Tek nologi A-H5 Ber basis Customer Relationship Management (CRM)” tepat waktu.

Skripsi dengan beban 4 SKS ini disusun guna diajukan sebagai salah satu syarat untuk menyelesaikan program Strata Satu (S1) pada jurusan Teknik Informatika, Fakultas Teknologi Industri, UPN ”VETERAN” Jawa Timur.

Melalui Skripsi ini penyusun merasa mendapatkan kesempatan emas untuk memperdalam ilmu pengetahuan yang diperoleh selama di bangku perkuliahan, terutama berkenaan tentang penerapan teknologi perangkat bergerak. 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, 2 Februari 2012

(8)

Halaman

2.1.1Profil Lembaga Pendidikan SPDC... 7

2.1.2Visi dan Misi SPDC ... 8

2.1.3Struktur Organisasi SPDC Surabaya ... 10

2.2.A-H5 ... 11

2.3.Definisi Database ... 18

2.3.1Mengenal Database ... 19

2.4.Pengertian PHP ... 20

(9)

2.6. Definisi MYSQL ... 21

2.6.1Koneksi Database MySql dengan PHP ... 22

2.7 Customer Relationship Management ... 22

2.8 Interaksi Manusia dan Komputer ... 27

BAB III ANALISA DAN PERANCANGAN SISTEM ... 40

3.1 Analisa Sistem ... 40

4.1.1 Perangkat Keras (Hardware) yang digunakan ... 69

4.1.2 Perangkat Lunak (Software) yang digunakan ... 70

(10)

4.3 Implementasi Proses ... 71

4.4 Implementasi Database ... 73

4.5 Implementasi Desain Antarmuka ... 83

BAB V UJI COBA SISTEM ... 94

5.1. Skenario Uji Coba ... 94

5.2. Pelaksanaan Uji Coba ... 94

5.2.1 Uji Coba Menampilkan Jadwal Pelatihan ... 95

5.2.2 Uji Coba Mendaftar Pelatihan pada Form Pendaftaran ... 97

5.2.3 Uji Coba Admin ... 100

BAB VI PENUTUP ... 101

6.1. Kesimpulan ... 101

(11)

1.1 Latar Belaka ng

Dewasa ini dengan adanya perkembangan ilmu pengetahuan dan teknologi informasi yang semakin pesat dapat mendukung dunia pendidikan. Pada sektor pendidikan, kehadiran teknologi informasi menjadi titik terpenting yang harus dikembangkan. Karena pada saat ini, kebutuhan informasi dan penggunaan komputer sangat canggih serta terus menerus berkembang sesuai dengan kemajuan teknologi informasi. Berkembangnya teknologi dan kebutuhan akan informasi menyebabkan bertambah lengkapnya informasi yang harus dan yang dapat diolah, sehingga kebutuhan penggunaan beberapa aplikasi dan jaringan komputer di dunia pendidikan secara bersama-sama semakin diperlukan.

Memasuki era globalisasi, teknologi informasi yang menyongsong pasar bebas memegang peranan sangat penting sehingga memerlukan sumber daya manusia yang berkualitas. Untuk mencetak sumber daya manusia yang mampu memenuhi tuntutan tersebut, harus memenuhi pendidikan formal dimana didalamnya diberikan teori ilmu pengetahuan juga diperlukan pengalaman yang diperoleh secara langsung berupa Penelitian.

(12)

" Menjadi Lembaga Pendidikan disiplin, ber mutu, kr eatif dan inovatif dengan lulusan yang mampu ber saing global dan mandir i" di Surabaya. Dimana dunia pendidikan saat ini sangat penting bagi manusia untuk mencapai cita-citanya.

Didalam permasalahan yang ada pada SPDC, penulis mengambil sebuah gambaran dari sebuah aplikasi website profil Lembaga. Dimana dalam aplikasi website tersebut, memberikan informasi tentang profil SPDC.

Salah satu alternatif yang di lakukan untuk mengatasi hal itu adalah di gunakanya Aplikasi Teknologi Ajax yang bersifat asynchronously, 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.

(13)

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas maka dapat dirumuskan masalah, yaitu : 1) Bagaiamana merancang dan membuat sistem (web) yang interaktif dan dinamis sehingga dapat membantu manajemen (SPDC Surabaya) dan customer untuk selalu menjalin suatu relasi dengan baik.

2) Bagaimana menerapkan penggabungan teknologi A-H5 (Ajax – HTML5) pada web interaktif dan dinamis.

1.3 Batasan Masalah

Sehubungan dengan besar dan luasnya permasalahan yang terdapat pada website dinamis maka akan dibuat batasan permasalahan yang akan dibahas pada tugas akhir ini. Batasan-batasan atau ruang lingkup permasalahan yang akan ditangani yakni:

1) Membahas sistem relasi antara manajemen dan customer pada sistem informasi SPDC Surabaya, pendaftaran, penjadwalan dan informasi secara dinamis yang diberikan ke custemer.

2) Implementasi CRM pada sistem SMS gateway dan otomatisasi konfirmasi email.

3) Penggabungan teknologi Ajax dan teknologi HTML 5 pada pembuatan sistem.

1.4 Tujuan Penelitian

Tujuan Pembuatan Karya Ilmiah ini adalah :

(14)

1.5 Manfaat Penelitian

Manfaat pembuatan karya ilmiah ini adalah :

Tugas Akhir ini juga dapat menjadi salah satu referensi sumber ilmu bagi mahasiswa yang ingin menambah pengetahuannya dalam bidang pengembangan website khususnya bahasa pemrograman PHP serta teknologi AJAX.

Mempemudah pelanggan untuk mendapatkan informasi SPDC.

1.6 Sistematika Penulisan

Dalam penyusunan tugas akhir, sistematika pembahasan diatur dan disusun dalam enam bab, dan tiap-tiap bab terdiri dari sub-sub bab. Untuk memberikan gambaran yang lebih jelas, maka diuraikan secara singkat mengenai materi dari bab-bab dalam penulisan tugas akhir ini sebagai berikut:

BAB I PENDAHULUAN

Bab ini berisi latar belakang, perumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian, dan sistematika penulisan pembuatan tugas akhir ini.

BAB II TINJ AUAN PUSTAKA

(15)

BAB III ANALISA DAN PERANCANGAN SISTEM

Bab ini menjelaskan tentang tata cara metode perancangan sistem yang digunakan untuk mengolah sumber data yang dibutuhkan sistem antara lain: Entity Relationship Diagram (ERD).

BAB IV IMPLEMENTASI SISTEM

Pada bab ini menjelaskan implementasi dari program yang telah dibuat meliputi lingkungan implementasi, implementasi proses dn implementasi antarmuka.

BAB V UJ I COBA DAN EVALUASI

Pada bab ini menjelaskan tentang pelaksanaan uji coba dan evaluasi dari pelaksanaan uji coba dari program yang dibuat. Uji coba dapat dilakukan pada akhir dari tahap-tahap analisa sistem, desain sistem dan tahap penerapan sistem atau implementasi. Sasaran dari ujicoba program adalah untuk menemukan kesalahn-kesalahan dari program yang mungkin terjadi sehingga dapat diperbaiki.

BAB VI PENUTUP

(16)

DAFTAR PUSTAKA

(17)

TINJ AUAN PUSTAKA

Pada bab II ini akan dibahas beberapa teori dasar untuk menunjang penyelesaian skripsi ini, anatara lain:: Sejarah singkat Surfsoft Profesional Development Centre (SPDC), pengertian Relationship Marketing, Customer Relationship Management, Customer Relationship Management di perusahaan, Pengertian AJAX, Definisi HTML5, Pengertian PHP, Definisi MySql, CSS, Koneksi Database MySql dengan PHP.

2.1 Sejar ah Singkat SPDC

Dalam lingkup ini akan dijelaskan tentang profil SPDC, Visi dan Misi dan Struktur Keorganisasian Lembaga pendidikan SPDC.

2.1.1 Pr ofil Lembaga Pendidikan SPDC

Sur fsoft Indonesia Pr ofesional Development Centr e (SPDC) adalah Lembaga Profesional Development Centre (Pusat Pengembangan Profesional) yang bergerak pada bidang pendidikan Teknologi Informasi, Bahasa, Bisnis dan Manajemen. yang terletak di Surabaya, tepatnya di Pandugo 10A Surabaya. SPDC didirikan pada 25 Agustus 2010.

(18)

Banyaknya masyarakat produktif yang putus sekolah tidak dapat melanjutkan ke pendidikan yang lebih tinggi merupakan salah satu hal minimnya Sumber Daya Manusia yang berkualitas dan mempunyai kompetensi di berbagai bidang yang sebetulnya merupakan bidang-bidang yang dapat menciptakan lapangan-lapangan kerja dan dapat memberikan penghasilan.

Kedepannya, dengan perbaikan sistem-sistem yang ada, SPDC dapat semakin memperbaiki dan melengkapi kebutuhan masyarakat pada pemanfaatan teknologi informasi global yang semakin berkembang pesat.

2.1.2 Visi Dan Misi SPDC

VISI :

1) Mengembangkan teknologi informasi dalam rangka meningkatkan pendidikan dan kesejahteraan masyarakat.

2) Menjadi perusahaan IT yang berkualitas dan dikenal dalam skala nasional. 3) Menjadi Lembaga Pendidikan disiplin, bermutu, kreatif dan inovatif dengan

lulusan yang mampu bersaing global dan mandiri. MISI :

1) Mengembangkan produk industria IT yang kompetitif.

2) Mengedepankan profesionalisme dan teamwork dalam menghasilkan layanan yang berkualitas.

3) Memberikan layanan yang terbaik pada klien.

4) Mengembangkan kerjasama dan kemitraan usaha yang saling menguntungkan.

(19)

6) Meningkatkan benefit dan nilai tambah bagi klien dan stake holder.

7) Menyelenggarakan program pendidikan yang profesional dan kompetitif serta

link terhadap dunia kerja.

TUJUAN :

Visi dan misi yang dikembangkan bertujuan sebagai berikut:

1) Mendapatkan keuntungan dan kemitraan usaha yang sinergi dan berkelanjutan.

2) Menyediakan program pendidikan yang bermutu sesuai dengan kebutuhan dunia usaha dan industri.

3) Menyelenggarakan standar mutu pendidikan yang selaras antara disiplin keilmuan dengan tantangan perkembangan dunia usaha dan industri serta pengabdian pada masyarakat.

4) Mencetak lulusan yang bermutu, beretika dan bermoral untuk dapat menunjang dan mengembangkan dunia usaha serta industri dengan memiliki kompetensi inti antara lain:

a. Memiliki keterampilan yang dibutuhkan di dunia kerja. b. Memiliki etos kerja yang tinggi.

c. Mampu memanfaatkan teknologi informasi.

(20)

2.1.3 Str uktur Or ganisasi SPDC Surabaya

(21)

2.2 A-H5

Teknologi A-H5 merupakan penggabungan dari kedua teknik, yaitu AJAX dan HTML5. Penggabungan kedua teknik ini dilakukan untuk meningkatkan performa dari website SPDC (Surfsoft Professional Development Centre). Dimana performa AJAX terlihat pada tampilan url yang selalu tetap tidak berganti. HTML5 sendiri digunakan untuk mengisi tag-tag HTML agar high-end.

Untuk Asynchronouse JavaScript and XML (AJAX) diperkenalkan oleh Jesse James Garret dari Adaptive Path pada tahun 2005 melalui artikel yang berjudul ”AJAX: A New Approach to Web Application”. Pada artikelnya, Garret yakin bahwa aplikasi web dapat menutup jurang pemisah antara web dan aplikasi desktop (Sunyoto, 2007:159).

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. Fakta bahwa aplikasi web lebih disukai daripada aplikasi desktop untuk penyebaran informasi pada lokasi yang jauh tidak lepas dari manfaat yang diperoleh.

(22)

Gambar 2.2 Perbedaan model aplikasi web tanpa dan dengan Ajax Nampak pada Gambar 2.2 pada aplikasi web yang berbasis Ajax, terdapat bagian yang disebut lapisan Ajax (atau terkadang disebut mesin Ajax). Lapisan inilah yang mengatur komunikasi antara klien dan server. Menurut Kadir (2009) Butir penting yang perlu diperhatikan dalam lapisan Ajax:

1) Lapisan Ajax meminta layanan ke server atau tidak, tergantung pada jenis layanan dari antarmuka. Sebagai contoh, validasi terhadap objek formulir tidak perlu melakukan permintaan ke server, tetapi ditangani di sisi klien. Namun, pemeriksaan keabsahan password mau tidak mau harus dilayangkan ke server karena harus berhubungan dengan database.

2) Sekalipun penambahan lapisan Ajax berkesan memperlambat proses (karena komunikasi ke server tidak lagi dilakukan secara langsung), kenyataannya sebaliknya. Hal ini disebabkan permintaan yang diakukan oleh lapisan Ajax menghasilkan informasi yang jauh lebih sedikit dibandingkan kalau yang diminta adalah untuk keseluruhan halaman. 3) Lapisan Ajax bekerja dengan pendekatan asinkron. Asinkron berarti

(23)

sampai server melayaninya. Dengan demikian, saat informasi dari server belum didapat, layanan kepada pemakai tetap bisa dilakukan.

4) Komunikasi antara klien dan server tidak perlu mengubah keseluruhan antarmuka dalam halaman web. Hanya bagian tertentu yang terpengaruh. Hal seperti ini tidak bisa dilakukan pada aplikasi web yang tidak menggunakan Ajax.

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.3 berikut.

Gambar 2.3 Arsitektur Model Tradisional

(24)

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.4

Gambar 2.4 Arsitektur Model AJAX

Menurut Sunyoto (2005, 162) 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 server sehingga user dapat melanjutkan interaksi dengan sebuah halaman selama aktivitas dikerjakan di background (background process). Berarti, untuk beberapa interaksi, waktu tunggu user hampir tidak ada.

(25)

XML and

AJAX untuk notifikasi dengan halaman, tetapi tidak melakukan apa pun terhadap response dari server.

Selanjutnya Sunyoto juga memaparkan penjelasan mengenai teknologi di balik AJAX (2005, 163-164) yang digambarkan pada gambar 2.5.

Gambar 2.5 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.

(26)

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. JavaScript Object Notation (JSON) yaitu format pertukaran data komputer

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

(27)

Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

(28)

2.3 Definisi Database

Secara sederhana database (basis data) dapat diungkapkan sebagai suatu pengorganisasian data dengan bantuan komputer yang memungkinkan data dapat diakses dengan mudah dan cepat. Dalam hal ini, pengertian akses dapat mencakup pemerolehan data maupun pemanipulasian data, seperti menambah, mengedit, dan menghapus data.

Manajemen modern mengikutsertakan informasi sebagai sumber daya penting yang setara dengan sumber daya manusia, uang, mesin, dan material. Informasi adalah suatu bentuk penyajian data yang misalnya manajer. Bagi pihak manajemen, informasi merupakan bahan untuk pengambilan keputusan dan selalu dibutuhkan. Oleh karena itu data, proses, serta informasi merupakan satu kesatuan, dari data lalu diproses dan kemudian menjadi informasi, seperti gambar 2.6 dibawah ini:

Gambar 2.6 Data Dan Informasi

Dengan adanya komputer, data dapat disimpan dalam media pengingat yang disebut hard disk. Dengan media ini, kehadiran kertas yang

Informasi

Proses

(29)

digunakan untuk menyimpan data dapat dikurangi. Selain itu, data menjadi lebih cepat untuk diakses terutama kalau dikemas dalam bentuk database.

2.3.1 Mengenal Database

DBMS merupakan singkatan dari Database Management System.

DBMS merupakan perangkat lunak atau program komputer yang dirancang

secara khusus untuk memudahkan pengelolaan database. Salah satu macam DBMS yang populer dewasa ini berupa RDBMS (Relational Database

Management System), yang menggunakan model basis data relasional atau

dalam bentuk tabel-tabel yang saling berhubungan.

MySQL merupakan salah satu contoh dari bentuk produk RDBMS

yang sangat populer dilingkungan Linux, tetapi juga tersedia pada Windows. Banyak situs web yang menggunakan MySQL sebagai database server (server yang melayani permintaan akses terhadap database). Gambar 2.7 memperlihatkan mekanisme pengaksesan MySQL melalui Web browser.

(30)

2.4 Penger tian PHP

PHP merupakan bahasa interpreter yang hampir mirip dengan bahasa C dan perl yang memiliki kesederhanaan dalam perintah. PHP dapat digunakan bersamaan dengan WML sehingga pembangunan situs web site dapat dilakukan dengan cepat dan mudah. PHP dapat digunakan untuk memperbarui (meng-update) database, menciptakan database, dan mengerjakan perhitungan matematika. PHP dapat di ambil gratis melalui internet dengan alamat situs http://www.PHP.net. Menurut dokumen resmi PHP, PHP adalah singkatan dari Hypertext Preprocessor.

PHP merupakan bahasa scripting (berbentuk script) yang menyatu

dengan HTML dan dijalankan pada server side. Artinya semua sintaks yang penulis berikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser (client side) hanya hasilnya saja. Secara khusus, PHP dirancang untuk membangun sebuah web dinamis.

2.5 CSS

CSS (Cascading Style Sheets) digunakan dalam kode HTML (Hypertext Markup Language) untuk menciptakan suatu kumpulan Style yang terkadang dapat digunakan untuk memperluas kemampuan HTML (Hypertext Markup Language).

(31)

web. CSS (Cascading Style Sheet) sangat membantu para web designer

untuk memperindah halaman web template.

CSS (Cascading Style Sheet) sama fungsinya dengan cara format HTML (Hypertext Markup Language) biasa, namun CSS mempunyai lebih banyak elemen yang bisa kita atur. Contoh : Tag table punya elemen border, CSS (Cascading Style Sheet) juga punya format untuk border

namun lebih detail lagi seperti : border-top, border-right, border-bottom, border-left. artinya lebih kompleks karena memungkinkan kita membuat

sisi border yang berbeda.

2.6 Definisi MYSQL

Berikut ini akan dijelaskan mengenai beberapa definisi MYSQL untuk memperjelas pengertian tentang software ini :

1) MYSQL adalah sistem pengaturan relational database.

Suatu relational database, menyimpan data dalam bentuk tabel-tabel yang kemudian akan diletakkannya semua data dalam satu ruang penyimpanan yang besar.

2) MYSQL adalah Open Source Software (perangkat lunak).

Open Source artinya bahwa software tersebut memungkinkan

untuk digunakan dan dimodifikasi oleh siapa saja.

3) MYSQL menggunakan GPL (GNU General Public License)

(32)

MYSQL untuk aplikasi bisnis, maka orang tersebut dapat membeli

lisensi yang bersifat komersial. 2.6.1 Koneksi Database MySql dengan PHP

Berikut penulisan fungsi script untuk koneksi ke database MySQL : 1) mysql_connect()

Perintah ini digunakan untuk melakukan koneksi ke server database MySQL, fungsi ini memiliki format penulisan sebagai

berikut: mysql_connect (host, username, password) ; 2) mysql_select_db()

Perintah ini digunakan untuk memilih database yang ada di server MySQL, fungsi ini memiliki format penulisan sebagai berikut. mysql_selec

t_db (nama_ database, pengenal_koneksi) ;

3) mysql_quer y()

Perintah ini digunakan untuk melakukan query atau menjalankan permintaan terhadap sebuah tabel atau sejumlah tabel database, fungsi ini memiliki format penulisan sebagai berikut.

mysql_query

(permintaan, pengenal koneksi) ;

2.7 Customer Relationship Management

Customer Relationship Management atau disebut juga Manajemen

hubungan pelanggan.

(33)

organisasi. CRM melingkupi semua aspek yang berhubungan dengan calon pelanggan dan pelanggan saat ini, termasuk di dalamnya adalah pusat panggilan (call center), tenaga penjualan (sales force), pemasaran, dukungan teknis (technical support) dan layanan lapangan (field service).

Sementara Siahaan (2008) mengatakan CRM merupakan akronim atau singkatan yang paling populer di kalangan orang-orang sales dan marketing. Kalau dibahasa Indonesia berarti manajemen hubungan pelanggan. Telaah perkatanya adalah sebagai berikut: pelanggan atau customer, artinya adalah seseorang yang berulang kali atau teratur melakukan pembelian kepada seorang pedagang. Jadi pelanggan adalah orangnya. Hubungan atau relationship, adalah bentuk komunikasi dua arah antara pembeli dan penjual. Manajemen artinya pengelolaan. Jadi defenisi di atas kalau digabungkan kira-kira menjadi pengelolaan hubungan dua arah antara suatu perusahaan dengan orang yang menjadi pelanggan di perusahaan tersebut.

Customer Relationship Management (CRM) menjadi istilah yang pada

beberapa tahun terakhir ini semakin populer. Ditambah dengan perkembangan teknologi informasi yang semakin merambah berbagai aplikasi bisnis, CRM menjadi salah satu proses bisnis yang menarik untuk diperbincangkan. Customer Relationship Management meliputi semua aspek yang berkenaan dengan interaksi

(34)

Gambar 2.8. Aplikasi Utama CRM

Gambar 2.9. Pilar CRM

(35)

Pilar kedua dalam CRM adalah melihat prodek sebagi proses. Dalam konteks ini, perbedaan tradisional antara barang dan jasa tidak punya makna lagi. Produk yang disampaikan kepada pelanggan, dilihat sebagai satu kesatuan yang terlibat dalam proses tukar-menukar antara penjual dan pembeli. Melalui proses pertukaran itu, sebagian dari kompetensi penjual dialihkan untuk meningkatkan nilai tambah pelanggannya. Dengan demikian, diferensiasi sebagai dasar keunggulan bersaing, berubah menjadi diferensiasi proses, sehingga terbuka pula peluang tak terbatas untuk membangun hubungan kemitraan yang berlainan. Bahkan komoditipun dapat dibedakan di “diferensiasi” dengan mengubah proses hubungan antara penjual dan pembali menjadi hubungan kemitraan.

Pilar ketiga dalam CRM adalah berkaitan dengan tanggung jawab penjual. Tidak cukup bagi suatu dengan semata-mata memuaskan kebutuhan pelanggannya saja. Tidak juga cukup hanya karena pelanggan sudah puas. Perusahaan dapat membangun hubungan kemitraan yang belih kuat hanya apabila perusahaan mengambil alih tanggung jawab untuk mengembangkan hubungan kemitraan, dan menawarkan peningkatan nilai tambah kepada pelanggannya agar pelanggan tetap loyal.

Secara umum, beberapa aktifitas utama dari konsep CRM adalah sebagai berikut: a) Membangun Database Pelanggan Yang Kuat

(36)

Gambar 2.10. Interaksi Pelanggan b) Membuat Profil Dari Setiap Pelanggan

Langkah selanjutnya adalah membuat profil dari masing-masing pelanggan. Ini sebenarnya pengembangan lebih lanjut dari proses segmentasi konsumen yang sudah dilakukan perusahaan.

c) Analisis Profitabilitas Dari Tiap-Tiap Pelanggan

Dalam analisis profitabilitas, ada 2 hal yang dinilai dari masing-masing pelanggan. Pertama adalah penerimaan (revenue) yang dihasilkan dari masing-masing pelanggan, dan kedua adalah biaya (cost) yang harus dikeluarkan untuk melayani masing-masing pelanggan.

d) Interaksi Dengan Pelanggan Yang Lebih Baik dan Terencana

(37)

2.8 Inter aksi Manusia dan Komputer

Menurut Rizky (2006:4) Human Computer Interaction (HCI) atau Interaksi Manusia dan Komputer (IMK) adalah sebuah disiplin ilmu yang mempelajari desain, evaluasi, implementasi dari sistem komputer interaktif untuk dipakai oleh manusia, beserta studi tentang faktor-faktor utama dalam lingkungan interaksinya. Di dalam proses implementasinya IMK dipengaruhi berbagai macam faktor. Menurut Rizky (2006:5) faktor-faktor tersebut antara lain:

1) Organisasi

Yang dimaksud sebagai organisasi dalam lingkup ini adalah tempat kerja bagi para pengguna, yang nantinya akan membawa efek terhadap tugas serta tanggung jawab yang harus diemban oleh pengguna. Selain itu, kebijakan dari organisasi tersebut juga sangat mempengaruhi implementasi dari IMK.

2) Lingkungan

Lingkungan sekitar pengguna dapat menjadi sebuah faktor yang mempengaruhi dari subyektifitas penilaian sebuah desain. Sebuah aplikasi yang didesain dalam sebuah lingkungan yang bising atau ramai, akan sangat berbeda dengan sebuah aplikasi yang memang ditujukan untuk pengguna yang berada dalam lingkungan yang lebih tenang.

3) Kesehatan

(38)

yang dapat mengakibatkan kelelahan pada tangan saat bekerja dengan frekuensi yang sangat akut.

4) Pengguna

Faktor pengguna merupakan salah satu faktor yang sangat kompleks, karena selain dari tingkat pendidikan dan pemahaman masing-masing pengguna yang dipastikan berbeda, faktor ini juga dipicu oleh kenyamanan yang dipastikan subyektif dalam penilaiannya, juga faktor pengalaman dan trauma khusus bagi para pengguna yang sebelumnya telah memakai sebuah aplikasi dengan desain antar muka tertentu.

5) Kenyamanan

Faktor kenyamanan merupakan faktor dependan dari berbagai faktor lain, seperti faktor lingkungan dan faktor pengguna. Faktor ini sangat relatif ukurannya dibanding faktor yang lain.

6) Antar muka

Sebuah antar muka dalam konteks IMK bukanlah satu-satunya faktor utama tetapi menjadi faktor yang terpenting.

7) Kendala

(39)

8) Produktifitas

Desain antar muka dapat menjadi salah satu pemicu produktifitas, tetapi bukan menjadi satu-satunya faktor yang harus diperhitungkan. Karena dengan desain antar muka yang dianggap nyaman oleh pengguna, diharapkan pengguna tidak lagi dikacaukan dengan pemikiran terhadap desain antar muka aplikasi dan dapat lebih berkonsentrasi terhadap hal lain yang lebih dapat memacu produktifitasnya.

IMK terdiri dari komponen-komponen sebagai berikut: 1) Interaksi

Yang dimaksud interaksi dalam konteks IMK adalah komunikasi apapun yang terjadi antara manusia dan komputer. Jenis-jenis komunikasi antara lain: command entry, menus and navigation, forms and spreadsheets, question and

answer dialogue, natural language dialogue, WIMP dan direct manipulation.

(Rizky, 2006:8). 2) Manusia

(40)

3) Komputer

Dalam konteks IMK, komputer bisa diartikan sebagai perangkat keras ataupun perangkat lunak dari berbagai macam jenis yang nantinya akan berinteraksi dengan unsur manusia. Sehingga komputer akan dipandang sebagai sebuah alat yang akan berinteraksi terhadap manusia sebagai pengguna. (Rizky, 2006:20).

2.9 Wor ld Wide Web (WWW)

World wide web (www) lebih dikenal dengan web, merupakan salah satu

layanan yang dapat dipakai oleh pemakai computer yang terhubung ke internet. Web pada awalnya adalah ruang informasi dalam internet, dengan menggunakan teknologi hypertext, pemakai dituntun untuk menemukan informasi dengan menemukan informasi dengan menggunakan link yang disediakan dalam document web yang ditampilkan dalam browser web.

Saat ini internet identik dengan web, karena kepopuleran web sebagai standart interface pada layanan-layanan yang ada di internet, dari awalnya sebagai penyedia informasi, kini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi bisnis (commerce).

Saat ini web seakan lebih populer daripada email, walaupun secara statistik email masih merupakan aplikasi terbanyak yang digunakan oleh pengguna internet. Web lebih poluler bagi khalayak umum dan pemula, terutama untuk tujuan pencarian informasi dan melakukan komunikasi email yang menggunakan web sebagai interfacesnya.

(41)

informasi sampai dengan komunukasi. Informasi produk dari yang serius sampai dengan sampah, dari yang cuma-cuma sampai dengan yang komersial, semuanya ada.

Web memudahkan pengguna komputer untuk berinteraksi dengan pelaku internet lainnya dan menelusuri (informasi) di internet. Selain itu web telah diadopsi oleh perusahaan sebagai bagian dari strategi teknologi informasinya, karena beberapa alasan.

a) Akses informasi mudah b) Setup server lebih mudah c) Informasi mudah didistribusikan

d) Bebas platform; informasi dapat disajikan oleh browser web pada system operasi mana saja karena adanya standart berbagai tipe data dapat disajikan.

2.9.1 Lahir nya Web

Tahun 1989, Timothy Bernes-Lee seorang ahli computer dari inggris dan peneliti lain di European Particle Physics Lab (Consei European pour la Recherche Nucleaire, atau CERN) di Ganeva, Swiss, mengembangkan suatu cara untuk men-share data antar koleganya menggunakan suatu yang disebut hypertext. Pemakai di ERN dapat menampilkan dokumen pada layar komputer dengan menggunakan software browser tersebut.

Kode-kode khusus disisipkan kedalam dokumen elektronik ini memungkinkan pemakai untuk meloncat dari satu dokumen ke dokumen lainnya pada layer dengan hanya memilih sebuah hyperlink.

(42)

dapat melompat ke dokumen lain yang letaknya pada komputer remote. Seorang peneliti dapat juga mengirim sebuah file dari komputer remote ke system lokalnya. Atau log in ke dalam suatu sistem remote hanya dengan mengklik hyperlink, tidak perlu melalui mekanisme FTP atau Telnet. Jalan pintas CERN digunakan sebagai dasar dari yang disebut dengan World Wide Web dan berikut Server browser web-nya.

2.9.2 Browser Web

Browser web adalah software yang digunakan untuk menampilkan informasi dari server web. Software ini kini telah dikembangkan dengan menggunakan user interface grafis, sehingga pemakai dapat dengan mudah melakukan poin dan klik untuk pindah antar dokumen.

Lynx adalah browser web yang masih menggunakan mode text, yang akibatnya adalah tidak adanya gambar yang dapat ditampilkan. Lynx pada lingkungan DOS ( Disk Operating System ) dan *.nix (keluarga system operasi UNIX). Akan tetapi perkembangan dari browser mode text ini tidaklah secepat browser web dengan GUI (Grafic User Interface).

(43)

2.9.3 Ser ver Web

Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web, komputer ini akan melayani permintaan dokumen-dokumen web dari klient. Browser web seperti IE atau Opera berkomunikasi melalui jaringan (termasuk jaringan internet) dengan server web, menggunakan HTTP. Browser akan mengirim request kepada server untuk meminta dokumen tertentu atau layanan lain yang disediakan oleh server. Server memberikan dokumen atau layanan lainnya jika tersedia juga menggunakan protokol HTTP.

Cara kerja web server antara lain :

a) Cara kerja Web Server Web server merupakan mesin dimana tempat aplikasi atau software beroperasi dalam medistribusikan web page ke user, tentu saja sesuai dengan permintaan user.

(44)

dan di kirim kembali ke browser. Data yang dikirim dari server ke browser disebut sebagai HTTP response. Jika data yang diminta oleh browser tidak ditemukan oleh si Web server maka akan meninbulkan error yang sering dilihat di web page yaitu Error : 404 Page Not Found.

2.10 Shor t Message Ser vice (SMS)

Pesan SMS ditetapkan oleh ETSI (European Telecommunication Standards Institute) sebagai dokumen pada GSM 03.40 dan GSM 03.38 yang bisa berisi text sampai di atas 160 karakter (standar karakter umumnya 160) dimana masing-masing karakter dihitung dengan nilai 7 bit. (Oetomo, 2003:47) Subsistem (Elemen Pendukung) yang mutlak ada pada layanan SMS adalah:

a. Short Message Entity (SME), merupakan tempat penyimpanan dan pengiriman message yang akan dikirimkan ke MS tertentu.

b. Service Centre (SC), bertugas untuk menerima message dari SME dan melakukan forwarding ke alamat MS yang dituju.

c. Short Message Service – Gateway Mobile Switching Center ( SMS-GMSC ), melakukan penerimaan message dari SC dan memeriksa parameter yang ada. Selain itu GMSC juga mencari alamat MS yang dituju dangan bantuan HLR, dan mengirimkannya kembali ke MSC yang dimaksud.

d. Short Message Service – Interworking MSC ( SMS – IWMSC ), berperan dalam SMSMessage Origiating, yaitu menerima pesan dari MSC

(45)

SMSC, maka HLR dapat memberikan informasi status tujuan apakah aktif atau tidak.

f. Visitor Location Register ( VLR ) merupakan sebuah database tempat menyimpan informasi sementara berisi data pelanggan dari sebuah HLR yang sedang roaming pada HLR lain.

g. Mobile Switcing Center ( MSC ) merupakan sebuah sistem yang melakukan fungsi switching dan mengontrol panggilan telepon dalam sebuah jaringan komunikasi bergerak.

h. Base Station Sistem merupakan kesatuan sistem yang bertanggung jawab mengatur transmisi sinyal elektronik untuk membawa data dari MSC ke perangkat telepon bergerak. Base Station terdiri dari BSC (Base Station Controller) dan BTS (Base Tranceiver Station).

Alur pengiriman SMS pada standar teknologi GSM yang digunakan pada saat ini adalah sebagai berikut:

(46)

Keterangan Gambar 2.10 :

a. BTS - Base Transceiver Station b. BSC - Base Station Controller c. MSC - Mobile Switching center d. SMSC - Short Message Service Center

(47)

2.10.1 SMS Gateway

SMS Gateway adalah suatu platform yang menyediakan mekanisme untuk EUA menghantar dan menerima SMS dari peralatan mobile (HP, PDA phone, dll) melalui SMS Gateway’s shortcode (sbg contoh 9221). Di bawah ini disertakan sedikit ilustrasi mengenai penjelasan di atas.

SMS Gateway membolehkan UEA untuk berkomunikasi dengan Telco SMSC (telkomsel, indosat, dll) atau SMS platform untuk menghantar dan menerima pesan SMS dengan sangat mudah, Karena SMS Gateway akan melakukan semua proses dan koneksi dengan Telco. SMS Gateway juga menyediakan UEA dengan interface yang mudah dan standar.

UEA dapat berupa berbagai aplikasi yang memerlukan penggunaan SMS. Seperti berbagai aplikasi web yang telah banyak menggunakan SMS (free sms, pendaftaran, konfirmasi melalui SMS, aplikasi perkantoran, dsb), CMS, acara pengundian di televisi, dll.

UEA melakukan komunikasi dengan SMS Gateway melalui Internet menggunakan standard HTTP GET atau HTTPS (untuk komunikasi yang aman).

(48)

(microcharging mechanism), contoh Rp 0 (gratis); Rp 500,- ; Rp 1000,- ; Rp2000,- dst.

Suatu perusahaan SMS Gateway biasanya support untuk pesan yang berupa teks, unicode character, dan juga smart messaging (ringtone, picture message, logo operator,dll).

2.10.2 Keuntungan SMS Gateway

SMS Gateway merupakan pintu gerbang bagi penyebaran Informasi dengan menggunakan SMS. Dapat menyebarkan pesan ke ratusan nomor secara otomatis dan cepat yang langsung terhubung dengan database nomor-nomor ponsel saja tanpa harus mengetik ratusan nomor dan pesan di ponsel, karena semua nomor akan diambil secara otomatis dari database tersebut. Selain itu , dengan adanya SMS Gateway, maka dapat mengustomisasi pesan-pesan yang ingin dikirim. Dengan menggunakan program tambahan yang dapat dibuat sendiri, pengirim pesan dapat lebih fleksibel dalam mengirim berita karena biasanya pesan yang ingin dikirim berbeda-beda untuk masing-masing penerimanya.

2.10.3 Kebutuhan SMS Gateway

(49)

fasilitas tsb, tapi tidak dianjurkan untuk kebutuhan SMS gateway karena komunikasi dengan InfraRed tidak terlalu baik (jika tergeser gampang putus).

SMSD (SMS daemon) adalah modul program untuk menerima dan mengirim SMS yang bekerja dengan menggunakan SQL server untuk penampungan semua inbox dan outbox yang ada di seluler anda. Sampai dengan versi ini baru mensupport dengan 2 modul database yaitu MySQL & PostgreSQL.

2.10.4 Mekanisme SMS Gateway

1) Menerima SMS sesuai dengan keyword yang ditentukan.

2) Melakukan fungsi logik tertentu terhada data-data yang diterima dari SMS gateway.

(50)

3.1 Analisis Sistem

Perancangan Aplikasi Teknologi Ajax dan HTML5 pada website interaktif dan dinamis untuk SPDC Surabaya pada penelitian ini dirancang untuk menyediakan sarana media promosi dan informasi tentang segala pembelajaran maupun pelatihan yang ada pada SPDC Surabaya. Informasi yang disajikan dalam web ini tidak hanya berkisar mengenai pelatihan, tetapi juga meliputi

artikel-artikel mengenai kegiatan SPDC Surabaya.

Dengan metode CRM (Costumer Relationship Management) pada pengelolaan data SPDC berbasis web ini merupakan sistem yang mempermudah dalam pencarian informasi pembelajaran, pelatihan, kursus yang bergerak pada bidang pendidikan Teknologi Informasi, Bahasa, Bisnis dan Manajemen

Dengan menggunakan mobile (handphone, ipod dan lainnya), konfirmasi pendaftaran aplikasi website ini bisa diakses menggunakan layanan sms (Short message service). Dengan begitu pelanggan atau pengguna dapat dengan mudah

mengetahui tentang konfirmasi pendaftaran yang telah dilakukan sebelumnya pada website tersebut.

3.2 Per ancangan Sistem

(51)

sub-bab ini akan dibagi menjadi 3 tahapan penting, yaitu: perancangan proses, perancangan database, dan perancangan antarmuka.

3.3 Per ancangan Pr oses

Sistem perancangan proses yang ada pada aplikasi ini 2 entitas luar yang terdapat dalam sistem ini, yaitu :

1) Admin

Entitas admin sebagai administrator memiliki hak akses penuh terhadap sistem. Input data yang dibutuhkan dalam sistem ini seperti artikel, pelatihan bisa diatur oleh admin.

2) Pelanggan ( Pendaftar pelatihan )

Dalam kasus ini entitas pelanggan hanya dapat melihat jadwal pelatihan, jenisa dan nama pelatihan, serta mendaftarkan diri pada pelatihan tersebut.

3.3.1 Use Case Diagram

(52)

1) Use Case Diagram Admin

Use case diagram admin menggambarkan proses-proses yang dilakukan oleh admin. Aktor administrator bertanggung jawab mengelola data-data yang berhubungan dengan manipulasi artikel, manipulasi pelatihan, manipulasi pengajar.

Gambar 3.1 Use Case Diagram Admin

a. Manipulasi artikel: aktivitas ini merupakan aktivitas admin yaitu menginputkan dan mengedit data artikel.

b. Manipulasi pelatihan : aktivitas ini merupakan aktivitas admin yaitu menginputkan dan mengedit data pelatihan.

c. Manipulasi pengajar: aktivitas ini merupakan aktivitas admin yaitu menginputkan dan mengedit data pengajar.

admin

manipulasi pelatihan manipulasi artikel

(53)

2) Use Case Diagram Pelanggan

Use case diagram pelanggan menggambarkan proses yang dilakukan oleh aktor pelanggan. Aktor pelanggan ada aktivitas, melihat website, daftar pelatihan spdc, dan menerima konfirmasi pendaftaran.

pelanggan

lihat website

daftar pelatihan spdc

verifikasi pendaftaran

Gambar 3.2 Use Case Diagram Pelanggan

a. Melihat website : aktivitas ini merupakan aktivitas pelanggan ketika ia pertama kali akan mendaftar.

b. Daftar pelatihan spdc : aktivitas ini merupakan aktivitas pelanggan dimana pelanggan memulai pendaftaran pelatihan.

(54)

3.3.2 Activity Diagram

Activity diagram menunjukan aliran proses yang terjadi pada sistem. Ada beberapa Activity diagram yang akan dijelaskan sebagai berikut :

1) Activity Diagram Manipulasi Artikel

admin system

[ya]

[batal] memilih menu data arti kel

mengisi form data artikel

simpan data simpan

memilih menu admin

Gambar 3.3 Activity Diagram manipulasi artikel

Activity diagram pada sebelumnya tadi menjelaskan tentang proses dari

(55)

a. Memilih menu admin : sebelum masuk ke dalam suatu proses dari data artikel dari admin website maka yang harus dilakukan adalah memilih menu admin pada menu utama admin.

b. Memilih menu data artikel : menu data artikel merupakan salah satu menu yang ada pada halaman admin dimana berisi artikel-artikel yang ada pada website SPDC (Surfsoft Professional Development Centre).

c. Mengisi form data artikel : pada tahap ini yang harus dilakukan admin dalam proses manipulasi adalah mengisi form data untuk penambahan artikel. Selain itu adapula ubah atau edit dimana admin dapat mengubah arikel yang telah diposting apabila artikel tersebut terdapat kesalahan dalam penginputan.

d. Simpan : setelah admin mengisi seluruh form yang ada pada form data artikel maka proses selanjutnya adalah menekan tombol simpan. Dimana pada tombol simpan ini proses penyimpanan artikel bekerja.

(56)

2) Activity Diagram Manipulasi Pelatihan

adm in system

[ya]

[batal ]

memili h menu data pel atihan

mengisi form data pelati han

simpan data simpan

memi lih menu admin

Gambar 3.4 Activity Diagram Manipulasi pelatihan

Activity diagram pada sebelumnya tadi menjelaskan tentang bagaimana

proses yang ada pada manipulasi data pelatihan. Activity diagram tersebut memiliki lima sub-aktivitas. Lima sub-aktivitas tersebut adalah :

(57)

b. Memilih menu data pelatihan : menu data pelatihan merupakan salah satu menu yang ada pada halaman admin dimana berisi pelatihan-pelatihan yang ada pada SPDC (Surfsoft Professional Development Centre)

c. Mengisi form data pelatihan : pada tahap ini yang harus dilakukan admin dalam proses manipulasi data pelatihan adalah mengisi form data untuk penambahan pelatihan yang akan diadakan oleh SPDC (Surfsoft Professional Development Centre). Selain itu adapula ubah atau edit dimana admin dapat mengubah isi dari data pelatihan yang telah disimpan apabila data pelatihan tersebut terdapat kekurangan-kekurangan dalam penginputan setiap datanya. Kekurangan tersebut dapat meliputi jadwal pelatihan, tentor dari pelatihan, deskripsi pelatihan, serta nama dari pelatihan tersebut.

d. Simpan : setelah admin mengisi seluruh form yang ada pada form data pelatihan maka proses selanjutnya adalah menekan tombol simpan. Dimana pada tombol simpan ini proses penyimpanan data pelatihan akan berkerja.

(58)

3) Activity Diagram Manipulasi Pengajar

admin system

[ya]

[batal] memilih menu admin

memilih menu data pengajar

mengisi form data pengajar

simpan data simpan

Gambar 3.5 Activity Diagram Manipulasi Pengajar

Activity diagram pada sebelumnya tadi menjelaskan tentang bagaimana

proses yang ada pada manipulasi data pengajar. Activity diagram tersebut memiliki lima sub-aktivitas. Lima sub-aktivitas tersebut adalah :

(59)

b. Memilih menu data pengajar : menu data pengajar merupakan salah satu menu yang ada pada halaman admin dimana berisi pengajar-pengajar yang ada pada SPDC (Surfsoft Professional Development Centre)

c. Mengisi form data pengajar : pada tahap ini yang harus dilakukan admin dalam proses manipulasi data pengajar adalah mengisi form data untuk penambahan pengajar yang ada pada SPDC (Surfsoft Professional Development Centre), dimana pengajar tersebut akan mengajar pada jadwal-jadwal yang tela ditetapkan pada manipulasi data pelatihan sebelumnya. Selain itu adapula ubah atau edit dimana admin dapat mengubah isi dari data pengajar yang telah disimpan apabila data pengajar tersebut terdapat kekurangan-kekurangan dalam penginputan setiap datanya. Kekurangan tersebut dapat meliputi nama pengajar, email, pendidikan, nomer telp, alamat serta foto dari pengajar tersebut.

d. Simpan : setelah admin mengisi seluruh form yang ada pada form data pengajar maka proses selanjutnya adalah menekan tombol simpan. Dimana pada tombol simpan ini proses penyimpanan data pengajar akan berkerja.

(60)

4) Activity Diagram Pendaftaran

pelanggan system

[ya]

[batal] melihat website

memilih menu pendaftaran

mengisi form pendaftaran

simpan data simpan

Ga mbar 3.6 Activity Diagram pendaftaran

Activity diagram pada sebelumnya tadi menjelaskan tentang proses

pendaftaran. Activity diagram tersebut memiliki lima aktivitas. Lima sub-aktivitas tersebut adalah :

a. Melihat website: sebelum pelanggan mendaftar maka yang harus dilakukan adalah melihat website terlebih dahulu.

(61)

c. Mengisi form pendaftaran : pada tahap ini yang harus dilakukan pelanggan dalam proses pendaftaran adalah mengisi form pendaftaran untuk diproses. d. Simpan : setelah mengisi form pendaftaran maka proses selanjutnya

adalah menekan tombol simpan.

e. Batal : batal bisa saja terjadi apabila pelanggan tidak melakukan pengisian form pendaftaran dan memilih menekan tombol batal dan keluar dari form pendaftaran.

5) Activity Diagram Konfirmasi Pendaftaran

pelanggan system

menerima email

membaca email

mengirim konfirmasi

(62)

Activity diagram pada sebelumnya tadi menjelaskan tentang proses

konfirmasi order. Activity diagram tersebut memiliki tiga sub-aktivitas. Tiga sub-aktivitas tersebut adalah :

a. Mengirim konfirmasi : sistem akan mengirim secara otomatis jika pelanggan sudah mengisi dan mengirim form pendaftaran.

b. Menerima email : setelah pelanggan melakukan pendaftaran maka akan menerima email konfirmasi.

Membaca email : pelanggan bisa mengetahui secara pasti pelatihan apa yang telah diikuti pada pendaftaran sebelumnya.

3.3.3 Sequence Diagr am

Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri atar dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait).

(63)

SequenceDiagram SPDC

Gambar 3.8. Sequence Diagram

Pada gambar sequnce diagram dijelaskan alur dari interaksi antar obyek dengan sistem yang terjadi. Pada gambar 3.8 dijelaskan dari kegiatan aktor atau pelanggan. Berikut ini penjelasan lengkap mengenai sequence diagram di atas:

1) Aktor atau Pelanggan membuka website SPDC (Surfsoft Professional Development Centre). Selain membuka website pelanggan juga dapat melihat pelatihan-pelatihan yang ada.

(64)

3) Pada tahap selanjutnya data formulir yang telah diisi oleh pelanggan dikirim ke system sebagai pengolah data utama.

Kemudian dengan otomatisasi email, system akan mengirimkan konfirmasi pendaftaran melalui pesan email kepada pelanggan yang telah mendaftarkan dirinya pada pelatihan tersebut.

3.4 Per ancangan Database

Sebuah system aplikasi yang bersifat dinamis harus memiliki sebuah database atau sekumpulan data yang dapat di-input, diedit, dan dihapus oleh administrator. Sebelum membuat database, maka dibuatlah perancangan database yang terstruktur dengan ERD (Entity Relationship Diagram).

3.4.1 Entity Relation Diagr am (ERD)

Entity Relationship Diagram (ERD) digunakan untuk menggambarkan relasi / hubungan antar tabel pada sistem database yang merupakan acuan untuk membuat sistem database dari suatu informasi.

Entity Relationship Diagram (ERD) berikut ini akan memberikan gambaran tentang hubungan setiap proses dalam aplikasi website interaktif fan dinamis yang dibuat.

ERD dapat dikategorikan menjadi beberapa macam yaitu : 1) One to one Relationship

Hubungan antara file pertama dengan file kedua satu banding satu. Artinya satu file hanya mempunyai satu keterkaitan dengan file yang lain.

2) One to Many Relationship

(65)

3) Many to Many Relationship

Hubungan antara file pertama dengan file kedua adalah banyak dibanding banyak. Artinya kedua file dapat melakukan banyak hubungan satu sama lain.

(66)

3.4.2 Per ancangan Tabel

Dari Entity Relation Diagram sebelumnya, maka dapat dibuat tabel-tabel yang akan menjadi acuan dari pembuatan sebuah database.

Berikut ini adalah detail masing-masing tabel pada subbab berikut ini: 1) Tabel Login

Tabel tblogin akan menyimpan username dan password administrator yang berhak masuk pada halaman administrator. Dimana dalam tabel tblogin ini nantinya menyimpan data admin yang bisa masuk atau login ke dalam admin. Selain itu tblogin juga menyimpan nama admin yang bersangkutan.

Tabel 3.1 tblogin

FieldName Data Type Size Keter angan

Id_adm Int 11 Auto_Increment

Usr_adm Varchar 20

Pass_adm Varchar 40

Nama_adm Varchar 40

Sta_adm Varchar 2

2) Tabel Alumni

Tabel tbalumni menyimpan data-data alumni mulai dari niwb (nomer induk wajib belajar), nama, tempat tanggal lahir, alamat, pelatihan yang diikuti, pekerjaan saat ini, serta foto dari alumni tersebut.

Tabel 3.2 tbalumni

FieldName Data Type Size Keter a ngan

niwb Int 11

namaalumni Varchar 50

tmptlahir Varchar 50

(67)

alamatalumni Text (Surfsoft Professional Development Centre). Dimana Table tbartikel ini berisi field: idartikel, nama, gambar, isi, serta keterangan artikel. Setiap artikel memiliki id yang berbeda-beda dengan mode auto_increment agar menandai setiap artikel yang dibuat admin.

Tabel 3.3 tbartikel

FieldName Data Type Size Keter angan

Idartikel Int 11 Auto_Increment

namaartikel Varchar 50

Gambarartikel text Isiartikel text

ketartikel Varchar 10

4) Tabel Bukutamu

(68)

Tabel 3.4 tbbukutamu

FieldName Data Type Size Keter angan

Id_bukutamu Int 11 Auto_Increment

Nama Varchar 30

email Varchar 40

pesan Text

Alamat_bktm Varchar 20

telpbktm Varchar 20

5) Tabel Daftar

Tabel tbdaftar ini merupakan form dari pendaftaran pelatihan yang ada pada SPDC (Surfsoft Professional Development Centre). Banyak data-data yang harus dilengkapi oleh pelanggan ketika mengisi table tbdaftar ini. Mulai dari nama lengkap, jenis kelamin, alamat, nomer handphone, kode pos, email, jenis program dan nama pelatihan yang diambil, tempat tinggal, tempat dan tanggal lahir, kewarganegaraan, pendidikan, hingga foto dari pendaftar.

Pada table tbdaftar ini memang banyak sekali field yang dibuat. Ini bertujuan agar pelanggan yang mendaftar memiliki data diri yang lengkap untuk menunjang kelancaran dari setiap pelatihan yang diikuti.

Tabel 3.5 tbdaftar

FieldName Data Type Size Keter angan

Iddaftar Int 11 Auto_Increment

namadaftar Varchar 50

statusdaftar Varchar 30

alamatdaftar Text

kotadaftar Varchar 15

(69)

Notlp Varchar 15

Nohpdaftar Varchar 15

Emaildaftar Varchar 40

Jk enum 10

Statusperkawinan Varchar 20

Pendidikan Varchar 15

Jenisprog Varchar 20

waktu Text

Hari Varchar 10

Idpel Int 11

Namabank Varchar 10

Norekbank Varchar 20

Fotodaftar Text

Status_daftar int 11

6) Tabel Galeri

Tabel tbgaleri berisi foto-foto setiap kegiatan yang dilakukan atau dilaksanakan SPDC (Surfsoft Professional Development Centre). Selain itu dalam tbgaleri berisi field: nama galeri, gambar galeri, keterangan galeri, serta id galeri sebagai primary key dari table tersebut.

(70)

Tabel 3.6 tbgaleri

FieldName Data Type Size Keter angan

Idgaleri Int 11 Auto_Increment

Namagaleri Varchar 25

gambargaleri Text ketgaleri Text

7) Tabel Daftar Kerjasama UPN

Pada table tbdaftarupn ini mungkin ada kemiripan dengan table pendaftaran sebelumnya. Namun yang membedakan dengan table pendaftaran sebelumnya adalah field pada table tbdaftarupn lebih sedikit dibanding dengan tbdaftar, kemudian tbdaftarupn memiliki npm yang telah dimiliki mahasiswa sebelumnya.

Tabel tbdaftarupn juga memiliki field semester yang tidak dimiliki oleh tabel tbdaftar sebelumnya.

Tabel 3.7 tbdaftarupn

FieldName Data Type Size Keter angan

Iddaftarupn Int 11 Auto_Increment

npm Int 15

Namadaftar Varchar 30

Smstrdftar Text 20

jenkeldaftar Enum 10

Telpdaftar Varchar 20

emaildaftar Varchar 50

Alamatdaftar Text

Idpel Int 11

Jamdaftar Varchar 20

(71)

Fotodaftar Text

Status_daftar int 11

8) Tabel Jadwal

Tabel Jadwal berisi jadwal-jadwal yang ada pada pelatihan dalam SPDC. Field jadwal yaitu: idjadwal yang membedakan tiap jadwal, idajar untuk mengetahui siapa saja yang mengajar pada jadwal tersebut, dan idpel untuk mengetahui pelatihan apa yang sedang berlangsung pada jadwal tersebut.

Tabel 3.8 tbjadwal

FieldName Data Type Size Keter angan

Idjadwal Int 11 Auto_Increment

Idajar Int 11

Idpel int 11

9) Tabel Jenis Pelatihan

Tabel pada jenis pelatihan tbjnspel hanya berisi 2 field yaitu idjnspel dan jnspel. Dua field tersebut digunakan untuk mengetahui dan mengubah jenis-jenis pelatihan apa yang baru dan yang lama, hingga memudahkan admin pada pelatihan.

Tabel 3.9 jnspel

FieldName Data Type Size Keter angan

Idjnspel Int 11 Auto_Increment

(72)

10)Tabel Pengajar

Pada tbpengajar ini berisi nama-nama pengajar yang akan mengajar pada pelatihan-pelatihan yang telah diadakan oleh SPDC. Adapun field yang dibuat yaitu: idajar sebagai primary key table pengajar, nama pengajar, alamat, telepon, email pengajar, pendidikan, dan foto pengajar.

Tabel 3.10 tbpengajar

FieldName Data Type Size Keter angan

Idajar Int 11 Auto_Increment

Namaajar Varchar 30

Alamatajar Varchar 15

Telpajar Varchar 50 ataupun telah diadakan oleh SPDC.

Field yang ada pada tbpelatihan yaitu: idpel sebagai primary key, idjnspel, namapel, tglpel, haripel, jampel, kuotapel, ketpel, dan materipel.

Tabel 3.11 tbpelatihan

FieldName Data Type Size Keter angan

Idpel Int 11 Auto_Increment

Idjnspel Varchar 30

Namapel Varchar 15

(73)

Haripel Varchar 10

Jampel Time

Kuotapel Int 50

Ketpel Text

materipel varchar 40

12)Tabel Messanger

Tabel yang satu ini menyimpan data yahoo messanger yang tertera pada website atau aplikasi ini. Field yang dibuat yaitu : idym sebagai primary key, namaym, ket, dan notelpk.

Tabel 3.12 ym

FieldName Data Type Size Keter angan

Idym Int 11 Auto_Increment

Namaym Varchar 50

Ket Varchar 50

notelpk Varchar 25

Adapun untuk mengkoneksikan dengan layanan SMS Gateway, maka digunakanlah database yang diberi nama; sms.

Berikut ini adalah detail masing-masing tabel pada subbab database sms berikut ini:

13) Tabel Inbox

(74)

Tabel 3.13. Inbox

Field Type Null

updatedlnDB Timestamp No

receivingDateTime Timestamp No

Text Text No

Sendernumber Varchar No

Coding Enum No

UDH Text No

SMSCNumber Varchar no

Class Int No

TextDecode Varchar No

ID Int No

RecipientID Text No

Processed enum no

14)Tabel Outbox

Tabel outbox akan menyimpan pesan yang akan dikirimkan ke pelanggan. Dengan kata lain pesan yang belum terkirim akan masuk ke dalam tabel outbox terlebih dahulu.

Tabel 3.14 Outbox

Field Type Null

updatedlnDB Timestamp No

(75)

SendingDateTime Timestamp No

Text Text Yes

DestinationNumber Varchar no

Coding Enum Yes

UDH Text Yes

Class Int Yes

TextDecoded Varchar No

ID Int No

Multipart enum Yes

RelativeValidity Int Yes

SenderID Text Yes

SendingTimeOut Timestamp Yes

DeliveryReport Enum Yes

CreatorID text No

15)Tabel Sent Item

(76)

Tabel 3.15 sentitems

Field Type Null

updatedlnDB Timestamp No

InsertIntoDB timestamp No

DeliveryDateTime timestamp No

Text Text No

DestinationNumber Varchar No

Coding Enum No

UDH Text No

SMSCNumber Varchar No

Class Int No

TextDecoded Varchar No

ID Int No

SenderID Text No

SequencePosition Int No

Status Enum No

statusError Int No

TPMR Int No

RelativeValidity Int No

(77)

3.5 Per ancangan Antar Muka

Perancangan Antar Muka (interface) yang dibuat pada aplikasi ini terstruktur dan telah ter-design dengan teratur sebagai berikut :

Untuk tampilan menu awal dapat dilihat pada gambar dibawah ini.

Gambar 3.10. Tampilan Awal

(78)

Gambar 3. 11. Tampilan login admin

Dalam admin ini administrator dapat mengelola semua data yang ada. Sehingga administrator dapat melakukan proses inputan, edit data serta hapus data. Selain itu dengan adanya admin ini administrator dapat melakukan update atau perubahan data. Berikut adalah perkiraan bentuk tampilan admin dalam sistem ini.

Gambar 3. 12. Tampilan menu admin Username:

Password:

Gambar

Gambar 2.11. Alur pengiriman SMS
Gambar 3.1  Use Case Diagram Admin
Gambar 3.2  Use Case Diagram Pelanggan
Gambar 3.3  Activity Diagram manipulasi artikel
+7

Referensi

Dokumen terkait

Pengolahan data penerimaan siswa baru sering mengalami beberapa hambatan diantaranya adalah kesulitan dalam proses penerimaan siswa baru, kesulitan dalam pencarian

Hasil dari Proyek Akhir ini adalah kamera pengawas menjadi alat yang digunakan untuk mendeteksi adanya gerakan pada ruangan.. Selama gerakan tidak melebihi jangkauan

Berdasarkan kondisi tanah seperti yang dijelaskan di atas, untuk mendapatkan tanggul yang stabil serta aman terhadap longsor dan juga gelombang air laut, maka pada Tugas Akhir ini

Berbicara kebutuhan akan informasi, seluruh manusia pasti membutuhkan banyak informasi, terkhusus untuk iIbu rumah tangga yang harus mempunyai pengetahuan dan

Penelitian ini bertujuan mensintesis PLA, membuat mikrokapsul dari polipaduan PLA- lilin lebah, menganalisis efisiensi enkapsulasi obat (ibuprofen) dari mikrokapsul yang

Informasi mengenai penggunaan Indigofera sp yang disubstitusikan kedalam pakan basal seperti rumput gajah masih sedikit maka perlu dilakukan penelitian tentang perbandingan

Area penyimpanan, persiapan, dan aplikasi harus mempunyai ventilasi yang baik , hal ini untuk mencegah pembentukan uap dengan konsentrasi tinggi yang melebihi batas limit

o Dalam Misa Melayu, diceritakan mengenai kisah perkahwinan Raja Muda Perak, Raja Iskandar dengan Raja Budak Rasul, puteri kepada Sultan Muzaffar Syah iaitu