Username: Password: - PERANCANGAN DAN PEMBUATAN PENGELOLAAN TOKO ON-LINE SURFSOFT BATIK DENGA

Gambar 3.22 For m Tampilan Login Admin

Setelah login nantinya admin akan masuk kedalam menu admin, dimana dalam admin ini nantinya edmin dapat mengelola menu-menu yang aa di website. Berikut adalah tampilan di menu admin.

HEADER MENU

CONTENT ADMIN

BAB IV

IMPLEMENTASI PROGRAM

Pada bab ini akan membahas tentang Implementasi program dari hasil analisa dan perancangan sistem yang ada pada bab III, serta bagaimana cara sistem tersebut dijalankan. Aplikasi ini merupakan salah suatu media massa tentang proses pemasangan produk, belanja produk dan mengelola pendapatan belanja yang dilakukan secara terkomputerisasi. Untuk lebih lanjut dapat dijelaskan pada sub bab berikut :

4.1. Alat Yang Digunakan

Pada implementasi program, alat-alat yang digunakan yaitu perangkat keras (hardware) dan perangkat lunak (software) yang dijabarkan sebagai berikut:

4.1.1 Per angkat Ker as

Perangkat keras (hardware) yang digunakan adalah :

a) Seperangkat komputer pentium IV GHz, harddisk 40 GB. b) Memory 512 DDR.

c) Mouse dan Keyboard. 4.1.2 Per angkat Lunak

Perangkat lunak (software) yang digunakan adalah : a) Windows XP Service Pack 2.

b) XAMPP-win32-1.6.1dan MySQL yakni SQLyog529. c) Power Designer 11 dan Power Designer 9.

d) Microsoft Visio 2003 untuk perancangan system.

e) Adobe Photoshop CS 9 portable, dan Ms. Picture Manager untuk mengolah gambar.

4.2Implementa si Data

Implementasi data dibuat untuk mengetahui database apa saja yang ada didalam sistem proses penyimpanan data pada program yang dibuat. Implementasi data tersebut dapat dilihat pada sub bab sebagai berikut :

4.2.1 Data Tabel Member

Pada data tabel member atribut yang terlibat adalah : user_name sebagai (primary key). Adapun contoh dari database Tabel member dapat dilihat pada Gambar 4.1

Gambar 4.1 Tabel data member

4.2.2 Data Tabel Admin

Pada data tabel admin atribut yang terlibat adalah : admin_name sebagai (primary key), admin_pass, nama_lengkap, name_bank, no_rekening.. Adapun contoh dari database tabel admin dapat dilihat pada Gambar 4.2

Gambar 4.2 Tabel admin 4.2.3 Data Tabel Iklan

Pada data tabel iklan atribut yang terlibat adalah : id_iklan sebagai (primary key), id_kategori, judul_iklan, deskripsi_iklan, harga_iklan, foto, tanggal_pasang, user_name, disk (diskon) dan stok. Adapun contoh database tabel iklan dapat dilihat pada Gambar 4.3

Gambar 4.3 Tabel Ik lan

4.2.4 Data Tabel Kategor i

Pada data tabel kategori atribut yang terlibat adalah : id_kategori sebagai (primary key), nama_kategori, jumlah_iklan, admin_name. Adapun contoh database pada tabel kategori yang dapat dilihat pada Gambar 4.4

4.2.5 Data Tabel Belanja

Pada data tabel belanja atribut yang terlibat adalah : id sebagai (primary key), kode, no_belanja, tgl, qty (quantity), judul_iklan, total, diskon, total1, user, status (status transfer). Adapun contoh database pada tabel belanja dapat dilihat pada Gambar 4.5

Gambar 4.5 Tabel Belanja

4.2.6 Data Tabel Konfir masi

Pada data tabel konfirmasi atribut yang terlibat adalah : id konfrim sebagai (primary key), no_belanja, nama, email, tgl, waktu, besar, bankmu, rek. Adapun contoh database pada tabel konfirmasi dapat dilihat pada Gambar 4.6

Gambar 4.6 Tabel Konfir masi

4.3. Per ancangan Antar muka

Antarmuka pemakai (user interface) merupakan bagian yang penting dalam suatu pemrograman apalagi berbasis web, karena berfungsi untuk menghubungkan antara suatu aplikasi dengan pemakainya (user). Perancangan

antarmuka pemakai (user interface) dibuat dengan tujuan untuk memudahkan pemakai (user) dalam melakukan interaksi dengan aplikasi yang dibuat.

4.3.1 Tampilan Antar muka Halaman Pengunjung (Halaman Utama) Gambar 4.7 adalah halaman bagi pengunjung atau halaman utama. Dimana pada halaman ini pengguna bisa mencari produk sesuai kata kunci atau dapat juga memilih kategori yang diinginkan.

Gambar 4.7 Tampilan Antarmuka Halaman Pengunjung (Hal Utama)

Untuk form menu tersedia beberapa menu pilihan (seperti home, registrasi, iklan baru, pasang produk, konfirmasi bayar, hubungikami). Untuk form kategori disini untuk memudahkan pengguna dalam pencari informasi.. Begitu juga untuk form search. Untuk form login, disini digunakan bagi anggota yang ingin masuk kehalaman akses mereka yaitu sesuai sesi user

4.3.2 Tampilan Halaman User Login

Gambar 4.8 Tampilan Halaman User Login

Pada gambar 4.8 tersedia form login. Pengguna yang dapat memasukkan login disini merupakan anggota dari pengunjung yang telah mendaftarkan diri di situs jual beli online produk batik. Disini anggota dibedakan menjadi dua status yakni : member dan vendor. Tiap anggota harus mengisi username dan password dengan benar. Setelah data yang dimasukkan valid, pengguna yakni user/anggota dinyatakan berhasil melakukan login. Selanjutnya user (anggota) dapat masuk ke halaman sesi user dan dapat melakukan hak akses sesuai status user. Jika user tersebut statusnya adalah member, maka akan user tersebut akan masuk ke halaman member sesuai username-nya (cookies). Begitupula dengan user dengan status vendor, ia akan masuk kehalaman sesi vendor. Pengunjung yang belum menjadi anggota tidak dapat melakukan login karena data yang dimasukkan akan diautentifikasikan ke database.

4.3.3 Tampilan Halaman Daftar Anggota

Gambar 4.9 Tampilan Halaman Daftar Anggota

Pada gambar 4.9 adalah desain halaman. Adapun pengguna diminta untuk mengisi data dengan lengkap dan memilih salah status yang telah disediakan oleh admin. Apakan pengguna ingin menjadi customer maka pengguna memilih status member, apakah pengguna tersebut ingin menjadi pemasang produk, maka pengguna tersebut memilih status vendor.

4.3.4 Tampilan Halaman User

Pada gambar 4.10 adalah desain halaman untuk anggota. Halaman ini sesuai sesi user. Jika pengguna adalah anggota vendor maka halaman yang muncul adalah halaman khusus hak akses sesi vendor. Jika pengguna adalah anggota member maka halaman yang muncul adalah halaman khusus hak akses sesi member.

4.3.5 Tampilan Halaman Produk

Gambar 4.11 Tampilan Halaman Pr oduk

Pada gambar 3.11 adalah desain halaman data produk yang telah terpasang dan dipasarkan. Banyak item yang dimuat disini. Adapun list data produk memiliki judul, nama pemasang (vendor), email vendor, telp vendor, gambar item, deskripsi produk, harga produk, stok produk, dan diskon item produk.

4.3.6 Tampilan Halaman Vendor Pasang Pr oduk

Gambar 4.12 Tampilan Halaman Vendor Pasang Produk

Pada gambar 4.12, merupakan halaman vendor pasang produk dimana vendor dapat memasangkan produknya untuk dipasarkan secara online.

4.3.7. Tampilan Halaman Login Admin

Gambar 4.13 Tampilan Halaman Login Admin

Pada gambar 4.13 merupakan login bagi admin. Data admin yang valid setelah memasukkan user admin dan password maka admin akan masuk ke halaman hak akses admin.

4.3.8. Tampilan Halaman Admin

Pada halaman admin adalah tempat mengelola semua yang berkaitan dengan website E-commerce ini sehingga admin dapat mengelola semua yang berkaitan dengan “Surfsoft Batik”

Gambar 4.14 Tampilan Halaman Admin

4.4. Implementasi Aplikasi Desain Antar muka

Pada sub bab Implementasi aplikasi desain antarmuka menjelaskan form apa saja yang terlibat dalam aplikasi tersebut yang menampilkan beberapa aplikasi form yaitu .

4.4.1. For m Tampilan Home

Pada form tampilan utama didesain sedemikian rupa sehingga menjadi tampilan utama yang menarik pengguna internet. Pada halaman utama terdapat kolom username dan password untuk anggota (member dan vendor), yang tentunya mempunyai akses lebih terhadap web ini. Sedangkan untuk pengguna non-member pada halaman utama disediakan kolom untuk melakukan proses pencarian produk. Tampilan tersebut dapat dilihat pada Gambar 4.15.

Ga mbar 4.15 For m Halaman Utama

Berikut adalah source code utama atau index dari website ini: <? inclu de("utility/koneksi.php"); if (isset($_GET['info'])) { $info = $_GET['info']; } ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http

://www.w3.org/TR/html4/loose.dtd"> <html>

<head>

.styl

e5 {color: #999999}

.style12 {color: #FFFFFF}

.style14 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;

font-size: medium; color: #000000; }

.style15 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;

font-size: medium; color: #FFFFFF; }

.style17 {color: #666666; font-size: small; font-family: "Times New Roman", Times, serif; }

.style18 {font-size: small; font-family: "Times New Roman", Times, serif

; }

.style19 { font-size: small; color: #999999;

font-family: "Times New Roman", Times, serif; }

.style20 {font-size: small} .style21 {font-size: 12px}

.style23 {color: #FFFFFF; font-size: 15px; }

.style25 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 16px; color: #FFFFFF; } --> </style> </head> <body background="images/1.gif"> <center>

<tr>

<th width="21%" valign="top" bgcolor="#FCFCFC" scope="row"> <table width="94%" height="193" border="0" align="center"> <tr><td height="30" bgcolor="#006600"><div align

="center"><strong><span class="style1 style15">:: M E N U :: </spa

n></strong></div></td> </tr> <tr>

<td height="20" bgcolor="#FFFFFF" scope="row" align

="center"><? include ("menu.php");?></td> </tr>

<tr>

<th bgcolor="#006600" scope="row" height="30"><div align

="center"><span class="style15 style2 style21"><span class

="style23">:: K A T E G O R I :: </span></span> </div></th> </tr> <tr> <th scope="row" align="left"><div align ="left"></div> <? include("category.php"); ?></th> </tr> <tr bgcolor="#666666"> <th bgcolor="#FCFCFC" scope="row"> </th> </tr> </table> <span class="style14"><br> </span></div></td> </tr> </table> </th>

<th colspan="2" scope="row"><div align="left"><font color

="#464646">Surfsoft Batik Adalah </font></div></th> </tr>

<th width="22%" scope="row" valign="top"><span class

width

="100" height="100" /></span></th>

<td width="78%" valign="top"><div align="justify"><span class

="style2"><span class="style18"> Sebag

ai salah satu wujud keseriusan kami dalam hal pelay

anan kustomer (member) dan vendor, surfsoftbatik.com membe

rikan kemudahan:<br>

<li>Untuk member : memudahkan pencarian produk yang &nbsp

;  dicari dan dapat belanja produk yang diing

inkan<br>

<li>U

ntuk vendor : memudahkan pasang produk, update &nbsp

;  produk, update profil. <br>

Silahkan login dan nikmati fitur online kami. </span></span></div></td> </tr> <tr bgcolor="#FFFFFF"> <th scope="row"> </th> <td> </td> </tr> <tr bgcolor="#A5FEF0">

<th colspan="2" scope="row"><div align="left"><span class

="style3">WhatWeDo</span></div></th> </tr>

<th scope="row" valign="top"><span class="style5"><img src="

images/Default App.jpg" width="100" height="100" /></s

pan></th>

<td valign="top"><div align="justify"><span class

="style5"><span class="style17">Apa yang kami lakukan untuk Anda yang ingin bergabung sebagai partner

dalamonline shopping dan advertising Surfs

oftbatik.com ? Banyak keuntungan yang didapatkan, tetapi sebel

umnya Anda perlu mengetahui apa visi dan misi

kami sehingga menjadikan surfsoftbatik.com sebagai onlin

e shopping portal dan advertising untuk Anda sebagai partner kami.

Silakan gunakan kesempatan

ini dan Pastikan Anda menjadi orang pertama yang menik

vendo r atau kustomer.<br> <a href="register.php">Klik Di sini< /a></span></span></div></td> </tr> <tr bgcolor="#FFFFFF"> <th scope="row"> </th> <td valign="top"> </td> </tr> <tr bgcolor="#A5FEF0">

<th colspan="2" scope="row"><div align="left"><span class

="style3">Visi & Misi Kami </span></div></th> </tr>

<th valign="top" scope="row"><span class="style5"><img src="images/WindowBlinds.JPG" width="100" height="100" /></s

pan></th>

<td valign="top"><P align="justify" class="style10 style2 style

20">Kami sangat menyesalkan biaya komunikasi dan internet di Indon

esia yang sangat tinggi. Padahal kemajuan suatu ba ngsa sangat terga

ntung dengan akses terhadap teknologi informasi. Namun itu tidak

menghalangi kami untuk mewujudkan visi dan misi kami,</P> <P align="justify" class="style17">VISI :</P> <div align="justify">

<LI>MENCIPTAKAN KOMUNITAS ONLINE SHOPPING e-commerce dan e-advertising dengan memberikan kemudahan bagi konsu

men untuk mendapatkan informasi dan membeli produk berku

alitas secara tepat dan hemat</LI> </UL>

</div>

<P align="justify" class="style2 style10 style

20">MISI :</P>

<LI class="style17">Mempertemukan toko dan calon kusto

mer dalam portal shopping website

kepad

a banyak toko yang menjual produk berkualitas (100% baru dan bukan

barang BM)

<LI class="style17">Meningkatkan penjualan toko dan memberikan solusi belanja hemat bagi kustomer</LI>

</UL> </div> <UL></UL></td> </tr>

</table> </td>

<? include ("login.php"); ?> </form> <span class="style12"><hr> </span> <tabl e width="100%" border="0" borde rcolorlight="#999999"> <tr>

<td bgcolor="#006600" scope="row" height="30"><div align ="center"><span class="style25">:: S E A R C H :: </span></div></td> </tr> <tr> <td scope="row"><div align="left"><span class

="style17">Silahkan masukkan kata kunci :</span> </div> <form action="search.php" method="get"> <input type="text" name="k" size="12"/>

</tr>

</table> </td> </tr>

<tr>

<th height="21" colspan="4" scope="row"><img src="

images/big_bottom.gif"></th> </tr>

<tr>

<th height="21" colspan="4" scope="row" align="center"><span class

4.4.2. For m Pendaftar an (Registr asi)

Form pendaftaran seperti pada Gambar 4.16 digunakan untuk pengguna yang ingin menjadi anggota. Anggota yang mendaftar dapat memilih status karena pada sistem aplikasi ini dibagi menjadi dua status yakni : user vendor dan user member. Seorang vendor tentunya mempunyai hak untuk memasang produknya dan untuk seorang member tentunya mempunyai hak untuk memesan produk. Semua kolom harus diisi guna mendapatkan kode aktifasi.

Beikut adalah source code form untuk registrasi: <FORM

action="proses_daftar.php" method=post> <table align="center">

<table>

<tr>

<td><SPAN class=style2>Nama</SPAN></td> <td><INPUT maxLength=50 size=30

name=nama></td> </tr>

<tr>

<td><SPAN class=style2>Alamat</SPAN></td>

<tr>

</tr> <tr>

<td><INPUT maxLength=100 size=30 name=telp></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td><SPAN class=style2>Username</SPAN></td> <td><INPUT maxLength=100 size=30 name=user></td> </tr>

<tr>

<td><SPAN class=style2>Password</SPAN></td>

</tr> <tr>

<td height="24"><SPAN class=style2>Password Lagi</SPAN></td>

</tr> <tr>

<td><span class=style2>Email</span></td>

<tr>

<td><span class=style2>Status</span></td> <td><select name="status">

<option value="-1">--Silahkan Pilih--</option> <option value="0">Vendor</option>

<option value="1">Member</option> </select></td>

</tr>

4.4.3. For m Aktifasi

Gambar 4.17 For m Aktifasi

Pada gambar diatas setelah pengunjung mendaftar maka akan tampil form aktivasi dimana pengunjung yang terdaftar tadi memasukkan kode aktivasi dengan cara memasukkan username dan kode aktivasi yang telah disediakan oleh sistem.

Gambar 4.18 For m Account Aktifasi

Berikut adalah source code dari aktifasi account : <?php include( "utility/koneksi.php"); session_start(); $user = $_SESSION['USER_NAME']; //echo "--$idc"; //exit;

$tanggal = date ("Y-M-D"); if(isset($_GET['idc'])) {

$idc = $_GET['idc'];

$result2 = mysql_query("select * from member where USER_NAME = '$idc'",$link);

//$num = mysql_num_rows($result2);

//$result2 = "select * from member where USER_NAME = '$idc'";

//echo $result2; //exit;

while($row = mysql_fetch_array($result2, MYSQL_BOTH)) { $idc = $row['USER_NAME'];

Dalam dokumen PERANCANGAN DAN PEMBUATAN PENGELOLAAN TOKO ON-LINE SURFSOFT BATIK DENGAN MENGGUNAKAN CUSTOMER RELATIONSHIP MANAGEMENT (CRM). (Halaman 73-142)