1

TUGAS PROJECT KULIAH

INTERAKSI MANUSIA DAN KOMPUTER
WEBSITE PENJUALAN ONLINE

OLEH:
Leonardo Davinsi Nainggolan
Dewi Puspita Sari
Andika Prabowo
Ryan Dwi Nanda
M. Nur Saputra

131421017
131421080
131421082
131421083
131421085

S1 EKSTENSI ILMU KOMPUTER

FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI
UNIVERSITAS SUMATERA UTARA
2014

DAFTAR ISI

BAB 1 PENDAHULUAN

1.1

Latar Belakang

1.2

Rumusan Masalah...

1.3

Tujuan....................

BAB 2 LANDASAN TEORI 3

2.1

Adobe Dreamwevaer CS3

2.1.1

Layar Tampilan pada Dreamweaver CS3...

2.1.2

Installasi Dreamweaver CS3

2.2

XAMPP...................

12

2.2.1

Bagian Penting dari XAMPP 13

2.2.2

Detail paket pada XAMPP 15

2.2.3

Proses Installasi XAMPP.. 16

2.3

Web Browser............

2.3.1

Mozilla Firefox.. 20

2.3.2

Google Chrome......... 22

20

BAB 3 HASIL INTERFACE WEB..

26

3.1

Perencanaan Topologi Jaringan

26

3.2

Penjelasan Website 27

3.2.1

Halaman beranda......

27

3.2.2

Halaman daftar.........

28

3.3.3

Halaman login..........

28

3.3.4

Halaman profil user... 29

3.3.5

Halaman produk.......

3.3.6

Halamn detail produk 30

3.3.7

Halaman keranjang...

30

3.3.8

Halaman pesanan......

31

29

3.3.9

Halaman pembayaran 32

3.3.10 Halaman konfirmasi.. 32

3.3.11 Halaman edit.............

33

3.3.12 Halaman faq.............

34

3.4

Faktor-faktor Interksi Manusia dan Komputer

34

BAB 4 PENUTUP................

37

4.1

Kesimpulan...............

37

4.2

Saran........................

37

BAB 1
PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi di bidang komputer dan transaksi elektronik saat ini, dalam
perangkat keras maupun perangkat lunak dalam perkembangan yang sangat pesan dan
merambah berbagai sisi kehidupan manusia. Sejalan dengan hal tersebut, dalam
berbagai bidang membutuhkan pengerjaan dengan transaksi eletronik, untuk
kecepatan, efesiensi dan efektifitas pekerjaan
Perkembangan teknologi saat ini mengubah gaya hidup masyarakat, termasuk
dalam hal perdagangan atau bisnis yang berbasis teknologi informasi atau online atau
yang lebih populer disebut e-commerce.
Banyak perusahaan mulai mengembangkan bisnisnya secara online sebagai
alternatif perdagangan,yaitu dengan tampilan website yang menarik dan dengan
berbagai kemudahan yang diberikan, yang efisien dan efektif.

Beberapa aspek yang dibutuhkan dalam kepuasaan pengguna dalam

melakukan transaksi dalam bisnis dalam usahanya adalah memberikan kenyamanan
dan utilitas program, termasuk dalam bentuk program berbasis desktop. Dan media
yang paling dekat dengan konsumen adalah website, karena dapat diakses dari mana
media elektronik yang luas.
Karena itu kami berinisiatif untuk membuat website yang dikhususkan untuk
interface dengan konsumen dari usaha penjualan online. Penjualan tersebut akan
dikembangkan dengan sinkron data database website dengan database desktop yang
dieksekusi

dari

program

desktop.

Website

tersebut

dikembangkan

dengan

pemrograman website PHP.

1.2 Rumusan Masalah

Adapun rumusan masalah tentang project yang kami kerjakan adalah sebagai berikut:
1. Membuat website e-commerce yang interaktif, dinamis dan menarik, tetapi
menunjukkan kesan yang lebih cepat.
2. Menyediakan layanan pendukung untuk kemudahan transaksi konsumen.
3. Sinkron database dengan perangkat lunak berbasis desktop.

1.3 Tujuan
Tujuan dari pembuatan project website penjualan ini adalah :
1.
2.
3.
4.

Menciptakan efisiensi ruang dan waktu dalam suatu perusahaan

Web sebagai interface customer yang lebih dinamis
Lebih mendekatan hubungan dengan konsumen, dan
Pengolahan data yang lebih rapi dan cepat

BAB 2
LANDASAN TEORI

2.1 Adobe Dreamwevaer CS3

Dreamweaver merupakan salah satu software dari kelompok Adobe yang banyak
digunakan untuk mendisain situs web. Adapun Adobe Dreamweaver sendiri adalah
sebuah HTML editor profesional yang berfungsi mendesain secara visual dan
mengelola situs web maupun halaman web.
Dreamweaver merupakan tool terbaik untuk membuat situs menarik bahkan
mungkin menakjubkan. Memang tidak semudah membalikkan telapak tangan, tapi
tidak

sulit

untuk

berlatih

dan

kemudian

mengoperasikan

Dreamweaver.

Dreamweaver CS3 merupakan memiliki performa yang lebih baik dan memiliki
tampilan yang memudahkan kita membuat halaman web, baik saat sedang bekerja
dalam jendela desain maupun dalam jendela kode rumus.

Untuk memulai

penggunaan Dreamweaver CS3, kliklah tombol :

Start > All Programs > Adobe Design Premium CS3 > Adobe
Dreamweaver CS3

Saat pertama kali kita menjalankan Dreamweaver CS3 , welcome Screen akan
tampil apabila tidak mendapati Welcome Screen, kita dapat menampilkannya
dengan klik menu Edit > Preferences. Pilihlah Kategory General, lalu aktifkan
kotak dan periksa Show Welcome Screen. Welcome Screen memberi kemudahan
dalam mengakses Tutorial Dreaweaver, memilih yang sudah terbuka, membuat
halaman baru, membuat halaman dari contoh dan Dreamweaver serta masih banyak
lagi.

2.1.1
1.

Layar Tampilan pada Dreamweaver CS3

Jalankan Dreamweaver dan anda akan diarahkan pada START PAGE ,

beserta bagian yang telah diberi label

Gambar 2.1 Layar awal Dreamweaver

2. Halaman kerja Dreamweaver CS3 akan terbuka. Lihatlah bagian berlabel dari
diagram di bagian atas halaman

Gambar 2.2 Halaman awal dreamweaver

3.

INSERT

BAR

di

bagian atas

layar

memiliki

semua

alat

umum

Dreamweaver dalam berbagai tool bar. Hal ini dapat ditampilkan sebagai menu atau
tab.

Gambar 2.3 tab dreamweaver

2.1.2

Installasi Dreamweaver CS3

1. Klik 2 kali pada installer Dreamweaver CS3, tunggu sampai muncul gambar

Gambar 2.4 Setup Dreamweaver

2. Lalu akan muncul tampilan awal installasi Dreamweaver CS3, klik next
untuk melanjutkan installasi ke tahap berikutnya

Gambar 2.5 License dreamweaver

3. Kemudian pilih partisi C untuk installasi

Gambar 2.6 Pilih partisi

4. Klik tombol browse

Gambar 2.7 Browse

Gambar 2.8 Pilih folder

5. Pilih destinsi folder yang digunakan untuk installasi Dreamweaver CS3, lalu
klik tombol accept.
6. Klik next untuk melanjutkan installasi ke tahap berikutnya

Gambar 2.9 Next step

7. Klik install

Gambar 2.10 Klik instal

8. Proses install sedang berlangsung

Gambar 2.11 Proses instalasi

9. Proses installasi selesai, klik tombol finish

10

Gambar 2.12 Klik Finish

10. Setelah selesai proses installasi, selanjutnya jalankan program Dreamweaver CS3

Gambar 2.13 Buka Program Dreamweaver

11. Pada saat menjalankan program Dreamweaver CS3, akan muncul kotak dialog,

11

cek list semua, lalu klik tombol accept.

Gambar 2.14 Buka jenis skrip

12. Muncul loading menuju tampilan awal Dreamweaver CS3

Gambar 2.15 Loading Dreamweaver

13. Proses installasi sudah selesai, ini adalah interface awal dreamweaver CS3.

Gambar 2.16 Tampilan kerja dreamweaver

2.2 XAMPP

12

XAMPP adalah perangkat lunak bebas, yang mendukung banyak system oprasi,
merupakan kompilasi dari beberapa program.XAMPP merupakan tool yang
menyediakan paket perangkat lunak ke dalam satu buah paket.Dengan menginstall
XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web server
Apache, PHP dan MySQL secara manual. XAMPP akan menginstalasi dan
mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi.
XAMPP merupakan salah satu paket installasi Apache, PHP dan MySQL instant
yang dapat kita gunakan untuk membantu proses installasi ketiga produk
tersebut.Selain paket installasi instant XAMPP versi 1.6.4 juga memberikan fasiltias
pilihan pengunaan PHP4 atau PHP5.Untuk berpindah versi PHP yang ingin digunakan
juga sangat mudah dilakukan dengan mengunakan bantuan PHP-Switch yang telah
disertakan oleh XAMPP, dan yang terpenting XAMPP bersifat free atau gratis untuk
digunakan.
Dukungan

terhadap

pemrograman

berbasis

obyek

(object

oriented

programming/OOP) ditambahkan pada Perl 5, yang pertama kali dirilis pada tanggal
31 Juli 1993.Proyek pengembangan Perl 6 dimulai pada tahun 2000, dan masih
berlangsung hingga kini tanpa tanggal yang jelas kapan mau dirilis. Ini dikatakan
sendiri oleh Larry Wall dalam satu pidatonya yang dikenal dengan seri The State of
the Onion. Dua di antara karakteristik utama Perl adalah penanganan teks dan
berbagai jalan pintas untuk menyelesaiakn persoalan-persoalan umum.Perl sangat
populer digunakan dalam program-program CGI (Common Gateway Interface) dan
berbagai protokol Internet lainnya.Seperti diketahui, TCP/IP sebagai basis bagi semua
protokol Internet yang dikenal sekarang ini menggunakan format teks dalam
komunikasi data.Seperti juga bahasa populer lainnya, Perl menerima banyak
kritikan.Meski banyak di antaranya hanya berupa mitos, atau berlebih-lebihan, tapi
terdapat juga sejumlah kritikan yang valid. Salah satunya adalah, sintaksnya susah
dibaca, karena banyak menggunakan simbol-simbol yang bukan huruf dan angka.

2.2.1 Bagian Penting dari XAMPP

13

Mengenal bagian XAMPP yang biasa digunakan pada umumnya:htdoc adalah folder
te mpat meletakkan berkas-berkas yang akan dijalankan, seperti berkasPHP, HTML
dan skrip lain. phpMyAdmin merupakan bagian untuk mengelola basis data MySQL
yang ada dikomputer. Kontrol Panel yang berfungsi untuk mengelola layanan service
XAMPP. Seperti menghentikan stop layanan, ataupun memulai start.kepanjangan dari
XAMPP yaiut Apache, PHP, MySQL dan perl.
XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam
satu buah paket.Dengan menginstall XAMPP maka tidak perlu lagi melakukan
instalasi dan konfigurasi web server Apache, PHP dan MySQL secara manual.
XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatis untuk anda
atau auto konfigurasi. Versi XAMPP yang ada saat ini adalah Versi 1.4.14 atau yang
terbarunya anda bisa download pada http://www.apachefriends.org/en/xamppwindow.html.
Software XAMPP versi ini terdiri atas:
a. Apache versi 2.0.54
b. MySQL versi 4.1.12
c. PHP versi 5.0.4
d. phpMyAdmin versi 2.6.2-p11 dan lain-lain
web server tersebut mari kita mengenalnya lebih dekat satu per satu .
1. Mengenai APACHE
Apache sudah berkembang sejak versi pertamanya.Sampai saat ditulisnya artikel ini
versi terakhirnya yang ada yaitu Apache ver 2.0.54.Apache bersifat open source,
artinya setiap orang boleh menggunakannya, mengambil dan bahkan mengubah kode
programnya.
Tugas utama apache adalah menghasilkan halaman web yang benar kepada
peminta, berdasarkan kode PHP yang dituliskan oleh pembuat halaman web.Jika
diperlukan juga berdasarkan kode PHP yang dituliskan, maka dapat saja suatu
database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung
halaman web yang dihasilkan.

14

2. Mengenai PHP
Bahasa pemrograman PHP merupakan bahasa pemrograman untuk mebuat web yang
bersifat server-side scripting. PHP memungkinkan kita untuk membuat halaman web
yang bersifat dinamis.PHP dapat dijalankan pada berbagai macam Operating System
(OS), misalnya Windows, Linux dan Mac OS.Selain Apache, PHP juga mendukung
beberapa web server lain, misalnya Microsoft IIS, Caudium, PWS dan lain-lain.
Seperti pernah disinggung sebelumnya bahwa PHP dapat memanfaatkan
database untuk menghasilkan halaman web yang dinamis.Sistem manajemen database
yang sering digunakan bersama PHP adalah MySQL.Namun PHP juga mendukung
system manajemen Database Oracle, Microsoft Acces, Interbase, d-Base, PostgreSQL
dan sebagainya.
\Hingga kini PHP sudah berkembang hingga versi ke 5. PHP 5 mendukung penuh
Object Oriented Programing(OOP), integrasi XML, mendukung semua ekstensi
terbaru MySQL, pengembangan web services dengan SOAP dan REST, serta ratusan
peningkatan kemampuan lainnya dibandingkan versi sebelumnya. Sama dengan web
server lainnya PHP juga bersifat open source sehingga setiap orang dapat
menggunakannya dengan gratis.
3. Mengenai MySQL
Perkembangannya disebut SQL yang merupakan kepanjangan dari Structured Query
Language.SQL merupakan bahasa terstruktur yang khusus digunakan untuk mengolah
database.SQL pertama kali didefinisikan oleh American National Standards Institute
(ANSI) pada tahun 1986.MySQL adalah sebuah sistem manajemen database yang
bersifat open source.MySQL adalah pasangan serasi dari PHP.MySQL dibuat dan
dikembangkan oleh MySQL AB yang berada di Swedia.
MySQL dapat digunakan untuk membuat dan mengola database beserta
isinya.Kita dapat memanfaatkan MySQL untuk menambahkan, mengubah dan
menghapus data yang berada dalam database.MySQL merupakan sisitem manajemen
database yang bersifat at relational. Artinya data-data yang dikelola dalam database
akan diletakkan pada beberapa tabel yang terpisah sehingga manipulasi data akan
menjadi jauh lebih cepat.

15

MySQL dapat digunakan untuk mengelola database mulai dari yang kecil
sampai dengan yang sangat besar.MySQL juga dapat menjalankan perintah-perintah
Structured Query Language (SQL) untuk mengelola database-database yang ada di
dalamnya.Hingga kini, MySQL sudah berkembang hingga versi 5. MySQL 5 sudah
mendukung trigger untuk memudahkan pengelolaan tabel dalam database.
4. Mengenai PHPMyAdmin
Pengelolaan database dengan MYSQL harus dilakukan dengan mengetikkan barisbaris perintah yang sesuai (command line) untuk setiap maksud tertentu.Jika anda
ingin membuat database, ketikkan baris perintah yang sesuai untuk membuat
database.Jika kita ingin menghapus tabel, ketikkan baris perintah yang sesuai untuk
menghapus tabel.Hal tersebut tentu cukup menyulitkan karena kita harus hafal dan
mengetikkan perintahnya satu persatu.
Banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola data base
dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin kita dapat
membuat tabel, mengisi data dan lain-lain dengan mudah tanpa harus hafal
perintahnya. Untuk mengaktifkan phpMyAdmin langkah-langkahnya adalah : yang
pertama setelah XAMP kita terinstall, kita harus mengaktifkan web server Apache dan
MySQL dari control panel XAMPP. Yang kedua, jalankan browser kesayangan Anda
(IE,

Mozilla

Firefox

atau

Opera)

lalu

ketikkan

alamat

web

berikut

http://localhost/phpmyadmin/ pada address bar lalu tekan Enter. Langkah ketiga

apabila telah nampak interface (tampilan antar muka) phpMyAdmin anda bisa
memulainya dengan mengetikkan nama database, nama tabel dan seterusnya.

2.2.2 Detail paket pada XAMPP

Berikut detail paket installasi yang disertakan pada XAMPP 1.6.4 yang digunakan
pada artikel ini:
1.
2.
3.
4.
5.
6.
7.

Apache 2.2.6
MySQL 5.0.45
PHP 5.2.4 + PHP 4.4.7 + PEAR
PHP-Switch win32 1.0
XAMPP Control Version 2.5 from www.nat32.com
XAMPP Security 1.0
SQLite 2.8.15

16

8. OpenSSL 0.9.8e
9. phpMyAdmin 2.11.1
10. ADOdb 4.95
11. Mercury Mail Transport System v4.01b
12. FileZilla FTP Server 0.9.23
13. Webalizer 2.01-10
14. Zend Optimizer 3.3.0
15. eAccelerator 0.9.5.2 for PHP 5.2.4

2.2.3 Proses Installasi XAMPP

XAMPP

menyediakan

beberapa

paket

yang

bisa

diperoleh

darihttp://www.apachefriends.org, pada artikel ini saya mengunakan Basic Package.

Berikut langkah-langkah proses installasi XAMPP:
1. Jika belum memiliki file installasi, download file installasi tersebut dari web
berikut http://www.apachefriends.org atau http://sourceforge.net/projects/xampp/
2. Setelah selesai mendownload file installasi, jalankan file tersebut dengan klik 2
kali (doubleclick) file tersebut.

Gambar 2.17 Proses instalasi XAMPP

3. Pertama saat file installasi dijalankan kita diminta untuk memilih bahasa yang
ingin digunakan saat proses installasi, setelah selesai memilih bahasa yang akan
digunakan tekan tombol Next.
4. Selanjutnya akan muncul welcome screen yang berisi informasi tentang versi
yang akan kita install, disini kita diminta untuk menutup terlebih dahulu programprogram yang sedang aktif selama proses installasi, jika sudah tekan tombol Next.

17

Gambar 2.18 wizard instalasi XAMPP

5.

Berikutnya kita diberikan kesempatan untuk memilih lokasi program akan

diinstall, secara default XAMPP akan di install pada folder C:\xampp.

Gambar 2.19 Pilih direktori instalasi

6. Selanjutnya akan ditampilan pilihan-pilihan fasiltias yang ada, disini terdapat
pilihan untuk mengaktifkan Apache, MySQL dan Filezilla sebaga sebuat service,
jika anda mengunakan sistem operasi windows NT/2000/XP/Vista kita dapat
mengunakan ketiga fasilitas tersebut sebagai sebuah service, namun jika
mengunakan windows 9x fasiltias ini tidak dapat digunakan karena windows 9x
tidak mendukung fasilitas tersebut.

Gambar 2.20 Pilih pemasanang opsional

7. Berikutnya XAMPP akan melakukan installasi program pada komputer anda.

18

Gambar 2.21 Proses instalasi

8. Setelah selesai melakukan installasi pada komputer anda akan muncul sebuah
pesan yang memberitahukan proses berhasil dilakukan seperti gambar 6 dibawah
ini.

Gambar 2.22 Instalasi XAMPP selesai

9. Selanjutnya XAMPP akan langsung mencoba menjalankan hasil installasi dan
melakukan konfiguasi tambahan yang diperlukan, jika anda mengunakan
windows XP SP2/Vista kemungkinan akan muncul form security report seperti
gambar 7 yang meminta konfirmasi apakah program benar akan dijalankan?
Karena memang benar kita menjalankan program tersebut maka pilih tombol
UNBLOCK pada form konfirmasi yang muncul tersebut.

Gambar 2.23 Menjalankan apache

10.

Berikutnya akan muncul pesan jika konfigurasi installasi servcei selesai

dilakukan.

Gambar 2.24 Informasi Konfigurasi Service selesai dilakukan

11. Dan selanjutnya akan ditanyakan apakah kita ingin menbuka XAMPP Control
Panel setelah selesai installasi ini.

19

Gambar 2.25 Konfirmasi menjalankan XAMPP Control Panel

12. Jika pada pilihan sebelumnya kita memilih untuk menjalankan XAMPP
Control panel maka secara automatis XAMPP control panel akan ditampilkan,
form control panel XAMPP seperti gambar 10 dibawah ini, dari control panel ini
kita dapat mematikan atau menjalankan service yang telah terinstall.

Gambar 2.26 Control panel XAMPP

Konfirmasi menjalankan XAMPP Control Panel
Sampai disini proses installasi Apache, PHP dan MySQL di komputer kita telah
selesai dan siap untuk digunakan. Untuk mencoba hasil installasi bukalah browser
yang ada di komputer anda kemudian pada address bar ketikan http://localhost
atau http://127.0.0.1 kemudian tekan enter untuk membrowse dan mencoba
apakah webserver telah bisa digunakan. Jika sukses maka akan muncul tampilan
awal welcome screen XAMPP seperti gambar 11 dibawah ini.

Gambar 2.27 Welcome screen XAMPP

2.3 Web Browser

2.3.1

Mozilla Firefox

20

Pada tanggal 21 Maret 1998, coder dari Netscape memulai sebuah proyek open source
yang mereka namakan Mozilla. Nama ini adalah nama kode pertama untuk browser
Netscape Navigator yang telah populer di tahun 1990-an. Pada tanggal 23 September
2002, pengembangnya merilis browser dengan nama Phoenix 0,1 yang menjadi cikal
bakal Firefox.
Pada tanggal 15 Juli 2003, Mozilla Foundation dilahirkan. organisasi ini adalah
organisasi non-profit yang mempunyai pedoman untuk melayani pengguna internet
bukan didasari oleh komoditasnya namun kepada layanannya. yayasan Mozilla untuk
merancang sebuah masa depan bagi merk Mozilla dan identitas visualnya. Karena
luasnya cakupan proyek yang dilakukan Mozilla sehingga menimbulkan kebingungan
tentang penggunaan nama/merk Mozilla yang dideskripsikan oleh para pengguna
sebagai aplikasi web browser, paket aplikasi, platform dan keseluruhan koleksi dari
proyek aplikasi tanpa batasan yang jelas.
Untuk itu pada tahun 2003 dimulai dari Mozilla Suite version 2.0, yaitu sebuah
paket aplikasi yang terdiri dari 4 aplikasi desktop, masing-masing telah diberi nama
dan logo. Pertama kali proyek Mozilla meluncurkan nama browser bukanlah Mozilla
Firefox, tapi Phoenix. Berhubung kata Phoenix sudah terambil untuk nama perusahaan
produsen BIOS Phoenix Technologies akhirnya diubah menjadi Mozilla Firebird. Pada
tanggal 09 November 2004 Mozilla firebird berganti nama menjadi Mozilla Firefox.
Fitur:
Fitur yang ditawarkan Firefox meliputi penggunaan tab, pengecekan ejaan, pencarian,
markah buku (bookmark), mengembalikan session, pengunduhan, dan private
browsing. Firefox menerapkan beberapa standar web, termasuk HTML4 (juga
sebagian HTML5), XML, XHTML, CSS, JavaScript, dan DOM.
Di antara fitur populer Firefox adalah pemblokir pop-up yang sudah terpasang di
dalamnya, dan sebuah mekanisme pengembangan (extension) untuk menambah
fungsionalitas tambahan.
a)

kelebihan Mozilla Firefox

1. Kelebihan

Firefox

Dibandingkan

IE

Merupakan

browser

dengan

perkembangan paling pesat dan jumlah pengguna yang terus meningkat

2. Ukuran download yang jauh lebih kecil

21

3.
4.
5.
6.
7.
8.
9.

Banyak tersedia addons untuk kelengkapan fungsi dari firefox

Ada komunitas pengembangnya di seluruh dunia (Betatester)
Kemungkinan konfigurasi yang sangat banyak, jauh dibandingkan IE
Perkambangan yang sangat pesat
Keamanan browser lebih terjamin dari browser lain
Meningkatkan popularitas di mata para pengguna internet sangat baik
Konfigurasi browser yang lebih lengkap dibandingkan dengan Internet

Explorer
10. Ukuran aplikasi yang relative kecil
11. Penampilan halaman yang lebih ringkas, luas dan area toolbar lebih ringkas
b) Kekurangan Mozilla Firefox
1. Startup time (waktu menjalankan program pertama kali) sangat lambat dan
berat
2. Tidak berfungsi optimal bila tidak ditambahi addons
3. Para krackers sekarang mulai membidik browser ini, karena jumlah
penggunanya yang besar. Program update berarti mendownload versi baru dari
Firefox, berbeda dengan IE yang hanya mengupgrade modulnya saja .
4. Banyak addons tidak berfungsi apabila Firefox telah diupdate. (berlaku untuk
perubahan yang besar, misalnya dari versi 2 ke versi 3.
5. Membutuhkan waktu yang lama saat pertama kali menjalankannya.Adanya
kebutuhan terhadap add on agar dapat berfungsi optimal, melihat keganasan
para cracker setelah mengetahui tingkat popularitasnya yang tinggi.
6. Waktu proses halaman situs tertentu lebih lambat, diperkirakan karena masalah
kompatibilitas atau kesesuaian antara pengkodean halaman situs dengan
Browser Mozilla Firefox. Mozilla Firefox tidak terintegrasi dengan Outlook
dan Outlook Express, beberapa fasilitas e-mail tidak berjalan dengan baik

2.3.2

Google Chrome

Google Inc. merupakan sebuah perusahaan publik Amerika Serikat, berperan dalam
pencarian Internet dan iklan online. Perusahaan ini berbasis di Mountain View,
California. Filosofi Google meliputi slogan seperti Dont be evil, dan Kerja
harusnya menantang dan tantangan itu harusnya menyenangkan, menggambarkan
budaya perusahaan yang santai. Google didirikan oleh Larry Page dan Sergey Brin
ketika mereka masih mahasiswa di Universitas Stanford dan perusahaan ini
merupakan perusahaan saham pribadi pada 4 September 1998

22

Larry Page Lawrence Edward Larry Page adalah salah satu pendiri dari
mesin pencari internet Google dan saat ini adalah presiden produk pada Google Inc.
Page adalah seorang lulusan dari East Lansing High School. Sergey Brin Sergey
Mikhailovich Brin adalah seorang pengusaha Amerika . Lahir di Rusia, Brin
mempelajari ilmu komputer dan matematika sebelum mendirikan Google
Keunggulan:
Sudah tentu Google Chrome mempunyai perbedaan dengan browser lainnya. Dan
perbedaan perbedaan itu adalah :
1 . Ringan
Pertama kali dibuka, chrome nyaris tidak terasa bebannya di resource CPU. Browser
ini adalah browser yang paling ringan yang pernah saya pakai. Sudah coba buka tab
sampai 20an, masih bagus.
2. Space Lega
Ini yang paling terasa beda. Menu Bar dan Bookmark Bar lenyap (juga statusbar yang
auto hide), ada ruang ekstra untuk melihat page yang sedang kita buka. Jadi lebih
terasa nyamannya browsing dengan Chrome
3 . Intuitif
Pertama kali dibuka, Chrome akan mengkonfirmasi apakah kita mau mengimport
data-data dari browser lain seperti Firefox, IE, dll. Address Bar dibuat mirip dengan
Firefox 3, punya Caption dan URL search, jadi cukup mengetikan URL atau Title dari
sebuah page, kita akan diberi list URL yang relevan, hanya saja awal awal proses
penampilannya terasa lebih lambat dibanding Firefox 3, tapi setelah dibiarkan
beberapa menit, sudah sama cepatnya dengan Firefox 3. Di Chrome, Address Bar juga
berfungsi sebagai Search Box, dalam artian jika kita mengetik sebuah keyword (bukan
URL), maka akan langsung berpindah ke halaman search (defaultnya adalah Google
Search). Juga, setiap page yang kita buka akan masuk ke halaman Most Viewed
(halaman yang muncul saat membuka tab baru). Cukup intuitif.

23

4. Pencarian Teks (Updated)

Pencarian teks di Chrome cukup nyaman, saat kita mengetikan keyword, maka
Chrome langsung mencari semua teks yang relevan, dan menandainya dengan warna
kuning transparan. Di beberapa bagian scrollbar Chrome juga akan ditandai dengan
warna kuning yang berarti teks yang relevan ada di posisi scrollbar tersebut. Find Prev
/ Next keyword juga mudah karena ada tombol Up / Down disebelah kolom keyword.
Kita tetap bisa menggunakan shortcut F3 untuk find prev / next.
5. Satu Kotak Untuk Semua
Di Google Chrome, Anda dapat membuka apapun di web dengan satu kotak. Panel
alamat, yang terdapat di bagian atas jendela Chrome biasa, meringkas kerepotan berInternet karena berfungsi ganda sebagai kotak penelusuran. Anda juga dapat
menggunakan panel alamat untuk menandai situs Web dan mengetahui keamanan situs
Web.
6. Halaman Tab Baru
Bila Anda membuka tab baru, Google Chrome telah mengisinya dengan informasi
bermanfaat. Dengan sekali klik, Anda dapat membuka sumber informasi Web yang
paling sering digunakan. Untuk membuka halaman Tab Baru, klik ikon + di sebelah
tab terakhir.
7. Kontrol Kerusakan
Setiap tab yang digunakan dijalankan secara terpisah di browser, sehingga jika salah
satu aplikasi rusak, maka aplikasi lainnya tidak akan terpengaruh
8. Mode Penyamaran
Bila ingin menjelajah dalam mode siluman, misalnya untuk merencanakan kejutan
seperti hadiah maupun ulang tahun, Google Chrome menawarkan mode jelajah
penyamaran. Halaman Web yang dibuka dan file yang di-download sewaktu Anda
menggunakan penyamaran tidak akan disimpan dalam riwayat penelusuran dan
download. Semua cookie baru terhapus setelah jendela penyamaran ditutup. Anda

24

dapat menjelajah seperti biasa dan dalam mode penyamaran pada saat yang sama
menggunakan jendela terpisah.
9. Penelusuran Aman
Google Chrome akan menampilkan peringatan jika alamat Web yang tercantum pada
sertifikat tidak sesuai dengan alamat situs Web yang akan diakses oleh Chrome.
Bila Anda terhubung ke situs Web aman, server yang meng-host situs Web tersebut
akan memberikan sertifikat kepada Chrome dan browser lainnya untuk memverifikasi
identitas. Sertifikat ini berisi informasi seperti alamat situs Web yang dikonfirmasi
oleh pihak ketiga yang dipercaya komputer. Dengan mencocokkan alamat dalam
sertifikat dengan alamat situs Web, dapat dipastikan Anda berkomunikasi secara aman
dengan situs Web yang dituju, dan bukan pihak ketiga (misalnya, hacker di jaringan).
Kemungkinan alasan ditampilkannya tanda mencakup:
Komunikasi server dihentikan oleh seseorang di Web yang memberikan sertifikat
untuk situs Web lain. Hal ini akan menyebabkan ketidakcocokan.
Server mungkin dikonfigurasi agar mengembalikan sertifikat yang sama untuk
beberapa situs Web, termasuk situs yang akan Anda kunjungi, meskipun sertifikat
tersebut tidak valid bagi semua situs Web tersebut. Misalnya, sertifikat mungkin
menginformasikan bahwa alamat Web seharusnya adalah http://www.xyz.com, namun
kami tidak dapat memverifikasi bahwa situs Web ini sama dengan xyz.com.
Jika Anda benar-benar yakin bahwa kedua situs Web tersebut sama, Anda dapat
membuka situs Web dengan mengklik tombol Tetap lanjutkan. Secara umum,
sebaiknya

lakukan

tindakan

pencegahan,

lalu

klik

tombol Kembali

demi

keamanan yang akan membawa Anda kembali ke halaman Web yang dikunjungi.
Kelemahan atau kekurangan Browser Chrome :
1.

Privasi

Google menyimpan 2% interpretation pencarian pengguna, lengkap dengan alamat

IP-a. walaupun dalam beberapa waktu tertentu interpretation ini akan dianonimkan.
Ini artinya google bisa saja tahu siapa mencari apa dan dimana.

25

2.

Lisensi

Google sempat mencantumkan pada Terms of Service mereka, bahwa semua muatan
dari pengguna yang hak ciptanya dimiliki oleh pengguna akan diserahkan haknya pada
Google. Tapi indicate ini telah dicabut oleh pihak Google.
3.

Celah Keamanan

Beberapa pakar confidence menemukan adanya lubang kecil/bugs pada chrome.

Sehingga ketika membuka suatu halaman website akan membuat browser ini menjadi
crash. Lalu Chrome juga memiliki underline Download Otomatis yang dikhawatirkan
akan disalah gunakan oleh Hacker
4.

Extensions

Pada Chrome tidak terdapat extension/plugin/addons yang dapat ditambahkan. Tidak

seperti Firefox yang memiliki banyak aplikasi2 tambahan yang dapat membuat dan
meningkatkan kinerja browser.
5.

Bahasa

Pada chrome ketika kita memilih untuk menggunakan dalam bahasa Indonesia maka
akan terdapat beberapa kejanggalan dalam bahasanya.

BAB 3
HASIL INTERFACE WEB

3.1 Perencanaan Topologi Jaringan

Website ini direncanakan memperhatikan proses kinerja yang efektif dan efisien.
Terutama efisiensi dari proses pada website dan waktu pekerjaan backoffice dalam

26

bekerja, maka diperlukan syncron antara basis data desktop dan website. Proses
sinkron dilakukan dengan menggunakan program syncron dari aplikasi desktop
tersebut.

Gambar 3.1 Topologi jaringan website penjualan

Gambar 3.2 Syncron database dari program desktop

3.2 Penjelasan Website

3.2.1 Halaman beranda
Merupakan tampilan awal dari website. Diutamakan dengan pengenalan barangbarang yang ditawarkan, melalui animasi-animasi slide show bergerak dan pembedaan
berita produk berdasarkan terlaris, barang baru dan barang yang paling sering dilihat

27

Pemilihan warna dan tampilan diupayakan terstruktur, dan melalui penempatan yang
gampang untuk dilihat pengguna website.

Gambar 3.3 Halaman beranda

3.2.2 Halaman daftar

Merupakan tampilan halaman pendaftaran untuk konsumen pengguna website. Disini
website diupayakan memberikan kenyaman konsumen, agar kesan yang sampai
kapada pengguna website tidak sulit menggunakan dan banyak data diisi, maka hanya
memerlukan kolom yang diperlukan saja.

Gambar 3.4 Halaman daftar

28

3.3.3 Halaman login

Merupakan tampilan halaman masuk bagi user yang sudah terdaftar. Tombol halaman
ini diupayakan ditempatkan disudut yang gambang untuk dilihat. Penggunaan warna
dipilih dengan menyelaraskan dengan tema dari website.

Gambar 3.5 Halaman login

3.3.4 Halaman profil user
Merupakan tampilan halaman dari profil user. Berfungsi untuk menampilkan data-data
pesanan barang maupun histori dari transaksi yang telah dilakukan.

Gambar 3.6 Halaman profil user

3.3.5 Halaman produk

29

Merupakan tampilan halaman berbagai produk yang dijualkan. Pengurutan dapat

dilakukan berdasarkan terlaris, terbaru dan paling banyak dicari. Penggunaan
pagination halaman diupayakan memberikan kesan cepat, maka diperlukan teknik ajax
untuk merealisasikan proses data interface di depan yang terlihat lebih cepat. Animasi
dan style yang dipilih dipergunakan untuk memanjakan mata dari pengguna agar
pengguna tidak gampang bosan dalam menggunakan website tersebut.

Gambar 3.7 Halaman produk

3.3.6 Halamn detail produk
Merupakan tampilan halaman memperlihatkan detail produk. Detail produk
dipergunakan beberapa gambar kecil, menengah untuk screen utama dan besar untuk
halaman zoom. Zoom diperlukan untuk memberikan konsumen gambar yang jelas
kepada pengguna website

Gambar 3.7 Halaman detail produk tanpa zoom gambar

30

Gambar 3.8 Halaman detail produk dengan zoom gambar

3.3.7 Halaman keranjang

Merupakan tampilan halaman keranjang yang berisikan produk yang akan dibeli.
Dibuat di table agar memudahkan pengguna memantau detail dari barang yang dibeli.

Gambar 3.9 Halaman keranjang

3.3.8 Halaman pesanan

Merupakan tampilan halaman pesanan, berisikan detail pesanan. Penggunaan ikon
dibedakan agar dapat mudah dimengerti oleh pengguna seperti pemilihan tombol hijau

31

dan biru. Hijau untuk ke halaman pembayaran, sedangkan biru untuk ke halaman info
detail pesanan.

Gambar 3.9 Halaman pesanan

Gambar 3.10 Halaman detail pesanan

3.3.9 Halaman pembayaran

Merupakan tampilan halaman pembayaran, berisikan alamat dan jumlah pembayaran
yang harus dibayarkan.

32

3.11 Halaman pembayaran alamat

3.3.10 Halaman konfirmasi

Merupakan tampilan halaman konfirmasi pembayaran, melakukan konfirmasi bahwa
telah dilakukan pembayaran

Gambar 3.12 Halaman konfirmasi pembayaran

33

Gambar 3.13 Halaman pembayaran konfirmasi

3.3.11 Halaman edit

Merupakan tampilan halaman edit, melakukan edit elamat , data, email pengguna.

Gambar 3.14 Halaman edit alamat

34

Gambar 3.15 Halaman edit data kontak

Gambar 3.16 Halaman edit email

3.17 Halaman edit kata sandi

35

3.3.12 Halaman faq

Merupakan tampilan halaman faq, berisikan pertanyaan umum disertai jawaban

3.18 Halaman faq

3.4 Faktor-faktor Interksi Manusia dan Komputer

1. REKAYASA PERANGKAT LUNAK
Instruksi-instruksi yang bila dieksekusi akan memberikan fungsi dan kerja
yang diinginkan
2. LINGUISTIK
a. Bahasa yang digunakan sederhana dan mudah dimengerti.
b. Kejelasan bahasa yang digunakan pada menu.
c. Konsistensi bahasa yang dipergunakan
3. PSIKOLOGI:
a. Pengaturan tata letak menu kategori yang rapi, Sub menu kategori memberikan
pilihan menu berdasarkan merek.
b. Kolom pencarian yang terletak pada bagian atas web , memudahkan pengguna
mencari produk yang diinginkan.
c. Konsisten pada fungsi yang diberikan sehingga user memahami fungsi tersebut
dengan baik.

36

4. Sosiologi:
Costumer service sebagai sarana berinteraksi.
5. Multimedia:
Tampilan website yang lebih menarik dan lebih mudah dimengerti dengan
perpaduan text, gambar.
6. MATEMATIKA:
a. Kemudahan penggunaan website dalam pengoperasiannya.
b. Perhitungan yang diterapkan pada jumlah item dan total harga.
7. ERGONOMIK:
a. Karakter pada website dapat dilihat dengan jelas (font, warna tulisan) sehingga
memberikan kesan yang baik pada mata.
b. Halaman website memiliki ruang kosong yang cukup sehingga pengguna
merasa nyaman.
c. Scroll down pada website tidak terlalu panjang sehingga membuat pengguna
tidak cepat jenuh.
8. BISNIS:
a. Membuat website yang lebih mudah digunakan.
b. Alat elektronik sebagai produk kebutuhan pengguna.

BAB 4
PENUTUP

4.1 Kesimpulan
a. Interaksi Manusia dan Komputer sangat diperlukan dalam pengembangan
aplikasi, agar diharapkan setiap pengembang aplikasi perangkat lunak dapat
berkembang dan memperhatikan berbagai aspek-aspek.
b. Website yang interaktif dan indah dilihat sangat penting dalam membantu
interaksi yang lebih sering antara website dan pengguna.

37

c. Efektifitas dan efisiensi proses termasuk merupakan aspek yang diperlukan

dalam menggunakan website (aspek psikologi dan ekonomi).

4.2 Saran
Berdasarkan kesimpulan di atas, maka penulis mencoba memberikan saran. Adapun
saran penulis yang dapat dikemukakan adalah sebagai berikut:
a. Mahasiswa diharapkan dapat membuat aplikasi yang interaktif dengan
pengguna (manusia) dengan memperhatikan berbagai aspek-aspek yang telah
dipelajari di mata kuliah Interaksi Manusia dan Komputer.
b. Website agar dikembangkan lebih sempurna lagi,

terlebih

dengan

menggunakan proses dengan server lebih diminimalkan.

c. Website diharapkan agar dapat diimplementasikan dengan baik terhadap
program back office yang memiliki basis data yang berbeda dengan website
yang dipakai.