PERANCANGAN DAN PEMBUATAN SOFTWARE MANAGEMENT MARKETING MENGGUNAKAN AJAX Dodik Indra Sukmana 1, Edi Satriyanto 2, S.Si, M.Si, Rengga Asmara,S.komp. 2 1 Mahasiswa, 2 Dosen Pembimbing Politeknik Elektronika Negeri Surabaya Institut Teknologi Sepuluh Nopember Kampus ITS Keputih Sukolilo Surabaya 60111, Indonesia Telp:+62-31-5947280 Fax:+62-31-5946114 Email: dodik@student.eepis-its.edu Abstrak Persaingan yang ada dan pertumbuhan teknologi yang cepat, senantiasa menuntut perusahaan untuk mengubah proses bisnis internal yang sedang berjalan. Hadirnya teknologi informasi yang perkembangannya berlangsung secara berkesinambungan pada dekade terakhir ini telah meningkatkan efektifitas dan efisiensi dari proses bisnis yang ada secara signifikan. Namun demikian,seiring dengan perkembangan kebutuhan perusahaan yang terus-menerus dan kompleks,bisnis pun dituntut untuk mengadakan integrasisistem antar perusahaan. Dalam Project akhir ini akan dikembangkan sebuah proyek Management Marketing secara online.dimana user dapat mengakses dan memengement suatu perusahaan secara online menggunakan AJAX (ASYNCRONOUSE JAVA SCRIPT &XML).AJAX dikombinasikan dengan MYSQL sebagai Data Base server dengan PHP sebagai skrip server-side programdiharapakan ming yang merupakan teknologi di bawahnya. Sehingga project akhir ini mampu membantu pengembangan perusahaan pada divisi marketing ke depannya. Kata Kunci : Management Marketing, AJAX, MYSQL, PHP I. Pendahuluan Latar Belakang Perkembangan teknologi yang semakin maju di semua bidang.persaingan yang ada dan pertumbuhan teknologi yang cepat, senantiasa menuntut perusahaan untuk mengubah proses bisnis internal yang sedang berjalan. Hadirnya teknologi informasi yang perkembangannya berlangsung secara berkesinambungan pada dekade terakhir ini telah meningkatkan efektifitas dan efisiensi dari proses bisnis yang ada secara signifikan. Namun demikian,seiring dengan perkembangan kebutuhan perusahaan yang terus-menerus dan kompleks,bisnis pun dituntut untuk mengadakan integrasisistem antar perusahaan. Pemrograman Web merupakan salah satu disiplin ilmu yang banyak diterapkan untuk menyelesaikan masalah diatas. Dalam Project akhir ini akan dikembangkan sebuah proyek Management Marketing Division secara online.dimana user dapat mengakses dan memengement suatu perusahaan secara online menggunakan AJAX (ASYNCRONOUSE JAVA SCRIPT &XML).AJAX dikombinasikan dengan MYSQL sebagai Data Base server dengan PHP sebagai skrip server-side programming yang merupakan teknologi di bawahnya. Sehingga project akhir ini diharapakan mampu membantu pengembangan perusahaan pada divisi marketing ke depannya. Secara garis besar, proses dalam proyek akhir ini adalah bagaimana user dapat berinteraksi secara langsung melalui web yaitu memenegement suatu perusahaan disisi marketing sehingga perusahaan dapat mengembangkan usahanya. 1 Permasalahan Berdasarkan uraian di atas, maka permasalahan yang timbul dalam pengerjaan proyek akhir ini antara lain adalah : 1. Bagaimana membangun sebuah database yang dapat digunakan seefisien mungkin 2. Membuat tampilan program yang user interface dan mudah dipahami serta digunakan 3. Bagaimana sistem kerja dari management marketing yang telah dibuat. 4. Bagaimana langkah-langkah dalam membuat aplikasi management marketing online. 5. menganalisa seorang sales berdasarkan penjualan produknya, sesuai tingkatan level dan grafik penjualan sales tersebut. Batasan Masalah Adapun batasan-batasan masalah yang dibuat agar dalam pengerjaan proyek akhir ini dapat berjalan dengan baik adalah sebagai berikut : 1. Tidak adanya pemberian chart pada masingmasing sales. 2. Tidak adanya pemberian level(grade) pada masing-masing sales 3. Pembuatan aplikasi menegement marketing menggunakan dan database menggunakan MySQL. 4. Pembuatan Group terdiri dari Master Manager dan Master Sales. II. Teori Penunjang. 2.1 Pengenalan AJAX
2.1.1 Pengenalan secara umum AJAX diperkenalkan oleh Jesse James Garret dari Adaptive Path pada tahun 2005. Ia mendeskripsikan bagaimana mengembangkan web yang berbeda dengan metode tradisional. ia memublikasikan sebuah artikel yang berjudul "AJAX : A NEW Approach to Web Applications." Pada artikelnya Garret yakin bahwa aplikasi web dapat menutup jurang pemisah antara web dan aplikasi desktop. Pengembangan web secara tradisional bekerja secara synchronously, antara aplikasi dan server, setiap kali melakukan link atau melakukan operasi "submit" pada form. Caranya, browser mengirim data ke server, server merespons dan seluruh halaman akan di refresh. Aplikasi web yang bekerja dengan AJAX bekerja secara asynchronously, yang berarti mengirim dan menerima data dari user ke server tanpa perlu me-load kembali seluruh halaman, melainkan hanya melakukan penggantian pada bagian web yang hendak diubah. Penggunaan AJAX mulai populer ketika digunakan oleh Google pada tahun 2005. AJAX bukanlah bahasa pemrograman baru, tetapi merupakan teknik baru penggunaan standart yang telah ada. Dengan AJAX kita dapat menjadi lebih baik, cepat dan menambah unsur user-friendly dan interaktif pada aplikasi web kita. AJAX berbasiskan pada JavaScript dan request HTTP. AJAX berbasiskan standart terbuka seperti : JavaScript XML HTML/XHTML CSS Dengan menggunakan JavaScript AJAX dapat mengirim dan menerima data antara web server dan web browser. Teknik yang dimiliki AJAX akan bergantian bertukar data dan mere-load ulang seluruh halaman. Dengan demikian, untuk mempelajari AJAX, harus dipahami pula konsep standart di atas. AJAX disupport sebagian besar browser populer sehingga aplikasi AJAX adalah aplikasi cross-platform dan cross-browser. Melalui AJAX, JavaScript dapat dikomunikasikan secara langsung dengan server menggunakan obyek JavaScript XMLHttpRequest. Obyek JavaScript ini dapat men-trade data sebuah web server tanpa harus me-load (refresh) halaman web. AJAX menggunakan asynchronously data transfer (pada HTTP request ) antara browser dan web server. yang memperbolehkan halaman web me-request bit yang kecil atau seluruh informasi dari server.teknik AJAX membuat aplikasi internet menjadi kecil. cepat dan lebih user-friendly. AJAX adalah aplikasi web yang lebih baik. Aplikasi web menambah keuntungan dibanding aplikasi desktop : Dapat menjangkau pengguna yang luas Mudah diinstal Mudah dikembangkan Mudah dipelihara Seperti yang kita ketahui, aplikasi internet tidak selalu dan user friendly seperti aplikasi dekstop. Dengan AJAX internet semakin kecil, cepat dan mudah digunakan. 2.1.2 Model Tradisional Yang dimaksud dengan model tradisional di sini adalah model yang sering digunakan tanpa AJAX. Pertama, browser membuat sebuah HTTP request dikirim ke server, misalnya / index.html. Gambar 2.1.2 Arsitektur model tradisional Pada model ini, server mengirimkan response berisi seluruh halaman termasuk header, logo, navigasi, footer, dll. Ketika mengklik next maka akan menampilkan halaman baru lagi (artinya, header, logo, footer, navigasi dikirim ulang) dan seterusnya akan mengirimkan data halaman baru lagi setiap diminta request dari user. Halaman seperti ini tidak masalah ketika data yang ditampilkan tidak memerlukan response yang cepat. Namun akan menjadi masalah jika user menginginkan respon yang cepat, misalnya ketika dipilih drop-down tertentu maka data yang ditampilkan berubah menurut nilai dari drop-down. 2.1.3 Model AJAX Perlu diingat, AJAX akan berkomunikasi dengan server tanpa harus me-refresh semua halaman. Konsep ini berbeda dengan aplikasi web sistem tradisional. Dalam model AJAX, aksi dari sisi klien dibagi menjadi dua bagaian, yaitu layer user interface dan layer AJAX. Gambar 2.1.3 Arsitektur model AJAX 2
Ketika user mengeklik sebuah link atau mengirimkan sebuah form maka input tersebut akan ditangani oleh layer AJAX dan diinteraksikan dengan server, kemudian meng-update user interface (UI). Jadi, dalam AJAX, interaksi UI secara logika terpisah dengan interaksi jaringan. Pendekatan yang digunakan AJAX adalah bagaimana mengirimkan jumlah data yang kecil dari dan ke server atas request dari user. Model aplikasi web tradisional di mana browser akan merespons sendiri atas inisialisasi request, memproses request dari web server. Dalam AJAX terdapat layer yang diberi nama "AJAX engine" untuk menangani komunikasi. "AJAX engine" adalah sebuah objek JavaScript atau function yang dipanggil ketika informasi diperlukan dari server. Proses yang dilakukan mesin AJAX (AJAX engine) adalah menerima respons dari server, melakukan parsing data dan melakukan sedikit perubahan untuk keperluan menampilkan informasi. Oleh karena itu proses mengirimkan sedikit informasi, jika dibanding dengan model aplikasi web tradisional maka user interface di update lebih cepat dan user mampu melakukan pekerjaannya dengan cepat. Beberapa point penting untuk menggambarkan AJAX : Layer AJAX tidak memerlukan komunikasi dengan server (contohnya untuk validasi form karena dapat ditangani sepenuhnya oleh clientside). Oleh karena request antara layer AJAX dan server berupa bagaian kecil dari informasi (tidak komplit satu halaman) maka sering digunakan untuk interaksi dengan database sehingga waktu render dan waktu pengiriman menjadi lebih pendek. 2.1.4 Teknologi Di Balik AJAX Teknologi AJAX di dalamnya meliputi komponen, yaitu : Gambar 2.1.4 Teknologi Di Balik AJAX XHTML (Extensible HyperText Markup Language) adalah bahasa markup seperti HTML, tetapi dengan gaya bahasa lebih baik. XHTML digunakan membuat halaman web dan dokumendokumen lain yang dapat ditampilkan dalam browser. XHTML merupakan standart internasional dengan spesifikasi yang ditetapkan oleh W3C (World Wide Web Consortium). Versi terakhir saat tulisan ini dibuat adalah HTML 2.0. CSS (Cascading Style Sheets) adalah sebuah mekanisme sederhana untuk memberikan style (seperti font, warna, jarak spasi, dll) kepada dokument web yang ditulis dalam HTML atau XML (termasuk beberapa variasi bahasa XML seperti XHTML dan SVG). Layer UI secara langsung tergantung pada respons server sehingga user dapat melanjutkan interaksi dengan sebuah halaman selama aktivitas dikerjakan di background (background proses). Berarti, untuk beberapa interaksi, waktu tunggu user hampir tidak ada. Komunikasi antar halaman dan server tidak selamanya memerlukan AJAX untuk notifikasi dengan halaman,tetapi tidak melakukan apapun terhadap response dari server. JavaScript adalah bahasa scripting kecil, ringan, berorientasi-objek dan lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai bahasa mandiri, melainkan dirancang untuk di tanamkan pada produk. DOM (Document Object Model) adalah sebuah API (Aplication Program Interface) untuk document secara terstruktur,dimungkinkan untuk mengubah isi dan presentasi visual. Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa pemrogram. XML (Extensible Markup Language) adalah bahasa markup untuk keperluan membuat dokumen markup keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antar sistem yang beraneka ragam. 3
XSLT (Extensible Stylesheet language transformation) adalah sebuah bahasa berbasis- XML untuk transformasi dokumen asli tidak berubah melainkan dokument XML, baru dibuat dengan basis isi dokumen yang sudah ada. XSLT biasanya digunakan untuk mengubah skema XML ke halaman web atau dokumen PDF. Objek XMLHttpRequest berkemampuan melakukan pertukaran data secara asinkron dengan web server. AJAX menggunakan objek XMLHttpRequest untuk melakukan pertukaran data dengan web server. JSON (JavaScript Object Natation) yaitu format pertukaran data komputer yang ringan dan mudah. Keuntungan JSON dibandingkan XML adalah pada proses penerjemahan data menggunakan JavaScript. JavaScript dapat menerjemahkan JSON menggunakan built-in procedure eval (). 3.1.1 Berikut gambar flowchart Registrasi Perancangan Sistem Diagram Konteks Sistem 3.1 Desain Sistem Gambar 3.1 Desain Sistem Alur proses dari sistem yang dibuat adalah sebagai beikut: 1. User melakukan browsing ke website 2. User harus melakukan pendaftaran dulu sebelum bisa menggunakan aplikasi pemasaran memilih jabatan sesuai yang telah ditetapkan oleh perusahaan.apakah jabatan manager atau sales, pada form register sudah di setting untuk manager hanya 1 dan untuk sales boleh bnyak. 3. User harus login dulu sesuai user name & password 4. Setelah login maka user dapat menggunakan program sesuai jabatannya. 5. Dan akhirnya akan dihasilkan report dari hasil penjualan sales dan untuk manager hanya melakukan proses analisa penjualan sales. Gambar 3.1.1 flowchart Registrasi user 4
3.1.2 Berikut gambar flowchart Login User Gambar 3.2.1 Database Market Gambar 3.2.2 Tabel Area_Pemasaran Gambar 3.2.3 Tabel Pegawai Gambar 3.1.2 flowchart Login User 3.2 Perancangan Sistem Dalam perancangan sistem, dibuat database dan halaman website yang akan digunakan. Gambar 3.2.4 Tabel Pelanggan 3.2.1 Perancangan DataBase Dalam perancangan database dengan menggunakan. MySQL, dibuat database Market yang terdiri dari tujuh tabel yaitu tabel area pemasaran, pegawai, pelanggan, produk, transaksi dan tabel user. Tabel market digunakan untuk menyimpan data saat user melakukan menginputkan aplikasi market. Gambar 3.2.5 Tabel Perusahaan 5
Gambar 3.2.6 Tabel Produk Gambar 3.2.11 Form Registrasi Perusahaan Gambar 3.2.7 Tabel Transaksi Gambar 3.2.8 Tabel User Konfigurasi database ini disimpan dalam koneksi.php III. Pengujian dan Analisa Uji Coba Program Gambar 3.2.12 Form Registrasi Pegawai Gambar 3.2.13 Form Login User Gambar Halaman Utama user biasa Maka setelah semua proses user registrasi selesai sesuai dengan jabatannya. User akan dapat menggunakan aplikasi pemasaran yang telah ada. Nantinya akan digunakan dalam proses transaksi. 6
Gambar tampilan Target Pemasaran Gambar tampilan user manager Gambar tampilan Transaksi IV. Kesimpulan Dari hasil analisa pada bab sebelumnya dapat diambil kesimpulan sebagai berikut : Semua proses dari website Ajax lebih cepat karena client dan server hanya mengirim dan menerima data Menghemat bandwidth yang digunakan Memudahkan seorang user untuk memenegement pemasarannya dalam proses transaksi Memberikan keuntungan pemasaran untuk user karena proses-proses tidak dilakukan secara manual (Pembukuan), melainkan dilakukan secara online. Gambar tampilan user sales V. Daftar Pustaka [1] www.oreilly.com/go/safarienabled [2] http://www.andipublisher.com [3] W3Schools Online Web Tutorials. http://www.w3schools.com/. [4] About Marketplace, Februari 2002. http://www.auction.indiarmart.com/aboutmarketpla ce.html, 7