PEMBUATAN SITUS WEB E-COMMERCE UNTUK JUAL-BELI ALAT

BERAT PADA PT. MULTI REKAYASA MANDIRI

PRAKTEK KERJA LAPANGAN

Disusun oleh :

MUHARDANIF TRI WAHYUDI 1434010001

YOGIE PUTRA PRATAMA 1434010126

EGGA OKTA MAHENDRA ERFANTO 1434010039

PROGAM STUDI TEKNIK INFORMATIKA

FAKULTAS ILMU KOMPUTER
UNIVERSITAS PEMBANGUNAN NASIONAL VETERAN
JAWA TIMUR
2017
 LEMBAR PENGESAHAN
PRAKTEK KERJA LAPANGAN

Judul : Pembuatan Situs Web E-ommerce untuk Jual-Beli Alat Berat

pada PT. Multi Rekayasa Mandiri

Oleh : 1. Muhardanif Tri Wahyudi NPM. 1434010001

2. Yogie Putra Pratama NPM. 1434010026
3. Egga Okta Mahendra Erfanto NPM. 1434010039

Menyetujui:

Dosen Pembimbing: Pembimbing Lapangan:

Mohammad Idhom, S.P., S.Kom., M.T. NPT. Sutikno, ST, MMT

383031002851 NIP.

Mengetahui:

Dekan Koordinator Program Studi

Fakultas Ilmu Komputer, Teknik Informatika,

Dr. Ir. Ni Ketut Sari, MT Budi Nugroho, S.Kom, M.Kom

NIP. 19650731 199203 2001 NPT. 380090502051

ii
 KATA PENGANTAR

Alhamdulillah segala puji syukur penulis ucapkan kepada Allah SWT yang

telah memberikan taufiq dan hidayah-Nya, rahmat dan magfirah-Nya sehingga

penulis dapat menyelesaikan laporan Praktek Kerja Lapangan ini, Shalawat serta

salam semoga tetap tercurahkan kepada tauladan kita Rasulullah Muhammad SAW.

Dengan selesainya penulisan laporan Praktek Kerja Lapangan ini penulis

ingin mengucapkan terima kasih kepada pihak pihak yang telah membantu,

karena tanpa bantuan, saran, kritik serta dukungan mereka mungkin penulis tidak

dapat menyelesaikan laporan ini.

Pada kesempatan ini penulis ingin mengucapkan terima kasih yang sebesar-

besarnya kepada:

1. Allah SWT, karena berkat rahmat dan berkah-Nya kami dapat menyusun

dan menyelesaikan laporan Praktek Kerja Lapangan ini hingga selesai.

2. Bapak Mohammad Idhom, S.P., S.Kom., M.T. selaku Dosen Pembimbing

PKL yang telah meluangkan banyak waktu, tenaga dan pikiran serta dengan

sabar membimbing penulis dari awal hingga laporan PKL ini dapat

terselesaikan.

3. PT. Multi Rekayasa Mandiri yang telah memperbolehkan kami melakukan

Praktek Kerja Lapangan.

4. Rekan-rekan jurusan Teknik Informatika angkatan 2014 yang telah

membantu dalam penyelesaian Praktek Kerja Lapangan ini beserta

laporannya.

iii
 Akhir kata, kami berharap semoga laporan ini dapat berguna bagi para

pembaca, memberikan pemikiran baru yang berguna bagi para pembaca,

memberikan pemikiran baru yang berguna yang dapat disumbangkan bagi para

pengembang ilmu sains dan teknologi dan memberikan manfaat bagi pihak yang

membutuhkannya.

Surabaya, Juni 2017

Penulis

iv
 DAFTAR ISI

LEMBAR PENGESAHAN .................................................................................... ii

KATA PENGANTAR ........................................................................................... iii

ABSTRAK .............................................................................................................. x

BAB I PENDAHULUAN ....................................................................................... 1

1.1 Latar Belakang ......................................................................................... 1

1.2 Perumusan Masalah .................................................................................. 2

1.3 Batasan Masalah ....................................................................................... 2

1.4 Tujuan ....................................................................................................... 3

1.5 Manfaat ..................................................................................................... 3

BAB II TINJAUAN PUSTAKA............................................................................. 5

2.1 Profil Singkat Perusahaan ........................................................................ 5

2.2 Content Management System (CMS) )Joomla! ....................................... 5

2.3 Google Chrome ........................................................................................ 6

2.4 My Live Chat ............................................................................................ 6

2.5 Google Maps ............................................................................................ 6

2.6 Social Media ............................................................................................. 7

2.7 Xampp Control Panel ............................................................................... 8

2.8 phpMyAdmin ........................................................................................... 8

2.9 Use Case Diagram .................................................................................... 9

v
 2.9.1 Use Case .......................................................................................... 10

2.9.2 Actor ..................................................................................................... 11

2.9.3 Relasi .................................................................................................... 12

2.10 Data Flow Diagram ............................................................................. 13

2.10.1 Proses .................................................................................................. 13

2.10.2 Aliran data........................................................................................... 13

2.10.3 Agen Eksternal .................................................................................... 14

2.11 Activity Diagram .................................................................................... 14

2.11.1 Activity ............................................................................................... 14

2.11.2 Start dan End State.............................................................................. 15

2.11.3 Obyek dan Aliran Obyek .................................................................... 16

2.11.4 Transisi................................................................................................ 16

2.11.5 Sinkronisasi......................................................................................... 16

2.12 State Transition Diagram (STD) ............................................................... 16

BAB III METODE PRAKTEK KERJA LAPANGAN ....................................... 18

1.1 Teknik Pengolahan Data ........................................................................ 18

1.1.1 Jenis Data ........................................................................................ 18

1.1.2 Sumber Data .................................................................................... 18

1.2 Pelaksanaan ............................................................................................ 18

1.2.1 Metode Observasi............................................................................ 18

1.3 Rancangan Penelitian ............................................................................. 19

vi
BAB IV HASIL DAN PEMBAHASAN ............................................................. 45

4.1 Gambaran Aplikasi ................................................................................. 45

4.1.1 Halaman Sub Menu Home ....................................................................... 45

4.1.2 Halaman Sub Menu Profile................................................................... 46

4.1.3 Halaman Sub Menu Visi dan Misi ........................................................ 47

4.1.4 Halaman Sub Menu Galeri ................................................................... 48

4.1.5 Halaman Sub Menu Hubungi Kami...................................................... 49

4.1.6 Menu Preview List Produk ................................................................... 50

4.1.7 Menu Detail Produk .............................................................................. 51

4.1.8 Menu Call for Price............................................................................... 52

4.1.9 Fitur Live Chat ...................................................................................... 53

4.1.10 Admin Fitur Live chat ........................................................................ 54

4.1.11 Fitur Link Media Sosial ...................................................................... 54

BAB V KESIMPULAN DAN SARAN ................................................................ 55

5.1 Kesimpulan ............................................................................................. 55

5.2 Saran ....................................................................................................... 56

DAFTAR PUSTAKA ........................................................................................... 57

vii
 DAFTAR GAMBAR

Gambar 2. 1 Perbedaan pemodelan bisnis dan pemodelan sistem ........................ 10

Gambar 2. 2 Simbol use case ................................................................................ 11

Gambar 2. 3 Simbol actor ..................................................................................... 11

Gambar 2. 4 Simbol proses ................................................................................... 13

Gambar 2. 5 Simbol aliran data ............................................................................ 13

Gambar 2. 6 Simbol agen eksternal ...................................................................... 14

Gambar 2. 7 Simbol activity ................................................................................. 15

Gambar 2. 8 Simbol start state dan end state ........................................................ 15

Gambar 3. 1 Use case diagram admin ................................................................... 19

Gambar 3. 2 Use case diagram konsumen ............................................................ 20

Gambar 3. 3 Activity diagram memasukkan data produk..................................... 21

Gambar 3. 4 Activity diagram memperbarui data produk .................................... 22

Gambar 3. 5 Activity diagram menghapus produk ............................................... 23

Gambar 3. 6 Activity diagram melihat data produk .............................................. 24

Gambar 3. 7 Activity diagram memesan produk .................................................. 25

Gambar 3. 8 Data Flow Diagram level 0 .............................................................. 26

Gambar 3. 9 Data Flow Diagram level 1 .............................................................. 27

Gambar 3. 10 State transition diagram keseluruhan menu ................................... 28

Gambar 3. 11 State transition diagram menu beranda .......................................... 29

Gambar 3. 12 State transition diagram menu profil .............................................. 30

Gambar 3. 13 State transition diagram menu visi misi ......................................... 31

viii
Gambar 3. 14 State transition diagram menu galeri .............................................. 32

Gambar 3. 15 State transition diagram halaman product detail ............................ 33

Gambar 3. 16 State transition diagram menu hubungi kami ................................. 34

Gambar 4. 1 Tampilan sub menu Beranda ............................................................ 45

Gambar 4. 2 Tampilan sub menu Profile .............................................................. 46

Gambar 4. 3 Tampilan sub menu visi dan misi ..................................................... 47

Gambar 4. 4 Tampilan sub menu galeri ................................................................ 48

Gambar 4. 5 Tampilan sub menu hubungi kami ................................................... 49

Gambar 4. 6 Tampilan menu preview list produk................................................. 50

Gambar 4. 7 Tampilan menu detail pada sub menu galeri .................................... 51

Gambar 4. 8 Tampilan menu call for price pada menu detail produk................... 52

Gambar 4. 9 Tampilan fitur live chat .................................................................... 53

Gambar 4. 10 Administrator live chat ................................................................... 54

Gambar 4. 11 Tampilan link media sosial ............................................................ 54

ix
Pembuatan Situs Web E-commerce untuk Jual Beli Alat Berat pada PT.
Multi Rekayasa Mandiri
Disusun oleh : 1. Muhardanif Tri Wahyudi NPM. 1434010001
2. Yogie Putra Pratama NPM. 1434010026
3. Egga Okta Mahendra Erfanto NPM. 1434010039
Dosen Pembimbing : Mohammad Idhom, S.P., S.Kom., M.T.

ABSTRAK

Saat ini, perkembangan teknologi informasi berkembang dengan cepat.

Dengan semakin berkembangnya teknologi informasi, memberikan kemudahan

bagi semua orang dalam mengakses berbagai informasi, melakukan kegiatan

bidang bisnis dan transaksi di internet. Situs web e-commerce merupakan media

informasi yang menawarkan berbagai kemudahan dalam menyajikan informasi

dalam bidang bisnis. Salah satu perusahaan yang memanfaatkan situs web e-

commerce adalah PT. Multi Rekayasa Mandiri. Pembuatan website ini berguna

sebagai sarana dalam memberikan informasi dan pemasaran produk.

Proses pembuatan situs web ini dilakukan dengan menggunakan Content

Manajement System dari vendor Joomla!. Selanjutnya dilakukan penambahan fitur

seperti live chatting, peta lokasi perusahaan, dan link yang dapat terhubung dengan

media sosial. Adapun database yang digunakan dalam pembuatan website ini

adalah Mysql serta koneksi lokal Xampp Control Panel.

Pembuatan situs web ini dilakukan bertahap dan lengkap sehingga seluruh

kebutuhan dapat terpenuhi. Dengan dibuatnya situs web ini, diharapkan dapat

mempermudah dalam melakukan kegiatan memasarkan produk, menampilkan

informasi secara lengkap dan akurat, dan memudahkan dalam proses bisnis lainnya.

Keywords : Situs web, E-commerce, Content Management System Joomla!, Mysql.

x
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Pada zaman yang serba modern ini perkembangan teknologi informasi

begitu cepat. Salah satu dari perkembangan tersebut adalah internet. Internet

memberikan banyak pengaruh bagi berbagai aspek kehidupan. Baik kehidupan

secara individu atau sosial maupun yang terkait dengan dunia usaha atau bisnis

suatu perusahaan. Pengunaan internet dapat dimanfaatkan dalam sarana

komunikasi, sarana informasi, dan berbagai kegiatan dunia usaha. Dengan adanya

kemajuan teknologi, dapat mengubah semua hal yang masih dilakukan secara

manual menjadi lebih mudah dalam pengerjaannya serta efisien. (Rejeki & Susanti,

2011)

Tidak hanya itu, dengan adanya internet pengguna dapat mengakses situs

web untuk mencari segala informasi yang dibutuhkan. Untuk menarik pembacanya,

sebuah situs web memiliki berbagai konten menarik serta mudah untuk

dioperasikan. Adapun cara untuk membuat situs web agar lebih terlihat sedernaha

namun menarik yaitu dengan menggunakan CMS (Content Management System).

CMS adalah perangkat lunak yang memungkinkan seseorang untuk mengubah atau

menambahkan isi maupun konten dari suatu situs web.

Salah satu perusahaan yang menggunakan website sebagai sarana untuk

bisnis adalah PT. Multi Rekayasa Mandiri. PT. Multi Rekayasa mandiri adalah

salah satu perusahaan yang bergerak pada bidang penjualan alat-alat berat. Untuk

1
menarik perhatian konsumen, PT. Multi Rekayasa Mandiri memiliki sebuah

website e-commerce yang berguna untuk bertransaksi dan menampilkan berbagai

informasi. Informasi tersebut mengenai spesifikasi produk yang dijual, profil

perusahaan, visi dan misi, serta kontak yang dapat dihubungi. Namun tampilan pada

website ini kurang menarik dan tidak terdapat banyak fitur fitur yang menarik

seperti live chat , terhubung dengan media sosial, maupun peta letak lokasi

perusahaan.

Dengan melihat beberapa hal diatas maka penulis mencoba untuk

memberikan solusi yang lebih efektif dengan melakukan desain ulang website pada

PT. Multi Rekayasa Mandiri untuk menampilkan berbagai informasi produk dan

profil perusahaan dengan menambahkan berbagai fitur seperti peta lokasi

perusahaan, terhubung dengan media sosial dan live chat. Hal ini sangat efektif,

karena pelanggan dapat mencari berbagai infomasi mengenai produk serta melihat

letak lokasi perusahaan dengan tampilan yang menarik.

1.2 Perumusan Masalah

Dari latar belakang yang sudah dijelaskan, maka adapun beberapa rumusan

masalah diantaranya adalah :

a. Bagaimana cara untuk membuat website pada PT. Multi Rekayasa Mandiri?

b. Apa kelebihan yang dapat diunggulkan dalam website terbaru pada PT.

Multi Rekayasa Mandiri?

1.3 Batasan Masalah

Agar laporan ini tidak menyimpang dan mengembang dari pembahasan

yang semula direncanakan, maka ditetapkan batasan-batasan sebagai berikut:

2
 a. Website yang dibuat adalah website e-commerce yang dapat menampilkan

produk, profil perusahaan, letak lokasi perusahaan, terdapat fitur live chat,

serta terdapat waktu dan dapat terhubung dengan media sosial;

b. Proses pembuatan website ini menggunakan Content Management System

dari vendor Joomla, dengan browser google chrome;

c. Proses pengubahan source code menggunakan perangkat lunak Notepad

++;

d. koneksi yang digunakan selama proses pembuatan yaitu koneksi local atau

localhost dari perangkat lunak XAMPP, serta Database yang digunakan

adalah phpMyAdmin (My SQL).

1.4 Tujuan

a. Pembuatan website dilakukan untuk membantu dalam menampilkan

informasi perusahaan, promosi dan penjualan produk;

b. Menyusun website agar tampilan menjadi lebih menarik serta

menambahkan fitur live chat dan peta lokasi perusahaan.

1.5 Manfaat

Bagi penulis

Penulis dapat melakukan penelitian dan mengembangkan

pengetahuannya dalam mengolah informasi yang didapat menjadi sebuah

karya. Penulis dapat memenuhi salah satu syarat kelulusan strata satu (S1)

pada program studi Teknik Informatika Fakultas Ilmu Komputer UPN

Veteran Jawa Timur.

3
 Bagi pembaca

Sebagai bahan acuan untuk melakukan penelitian yang mendalam

tentang pembuatan atau desain ulang sebuah website. Selain itu pembaca

dapat melakukan evaluasi terhadap laporan-laporan sebelumnya yang telah

dibuat sehingga dapat melakukan revisi dan koreksi terhadap laporan yang

akan datang.

Bagi institusi / perusahaan

Menjalin kerja sama dan saling mengenal antara Intansi kerja dan

pendidikan, sehingga bisa dijadikan referensi untuk menyiapkan tenaga

kerja yang lebih maju dan kompeten di bidangnya. Meningkatkan mutu

kualitas layanan kepada konsumen dan meningkatkan jumlah penjualan

produk perusahaan tersebut. Selain itu juga sebagai upaya ikut membantu

menyiapkan tenaga terampil bagi mahasiswa yang akan terjun ke dunia

kerja.

4
 BAB II

TINJAUAN PUSTAKA

2.1 Profil Singkat Perusahaan

PT. Multi Rekayasa Mandiri adalah perusahaan yang bergerak di bidang

penjualan alat- alat berat. alat berat yang dijual contohnya yaitu Sentrifugal,

Pemurni Vacum, Fermentor, Heating Mixer, Pemungut santan, Ekstraktor Pemilah

Cair, dan lain sebagainya. Perusahaan ini beralamat di jalan Medayu Selatan blok

T-31, Rungkut, kota Surabaya.

2.2 Content Management System (CMS) )Joomla!

Joomla! Adalah sistem pengolah isi (konten) (Meissa, 2009). Joomla

Bersiat bebas dan terbuka (free, open source) yang ditulis dengan menggunakan

PHP dan basisdata MySQL untuk keperluan di internet maupun intranet. Fitur-fitur

Joomla! diantaranya adalah sistem caching untuk peningkatan performansi, RSS,

blogs, poling, dll. Secara garis besar Joomla! terdiri dari 3 elemen dasar, yaitu

server web (web server), skrip PHP dan basisdata MySQL. Server web diasumsikan

terhubung dengan Internet/Intranet yang berfungsi sebagai penyedia layanan situs.

Skrip PHP terdiri dari kode program dalam bahasa PHP dan basisdata merupakan

tempat penyimpanan konten. Joomla menggunakan Apache sebagai server web dan

MySQL untuk basisdatanya. Prinsip dasar kerja joomla adalah pengguna meminta

akses halaman joomla dengan mengeksekusi URL pada web browser yamg

terhubung dengan server. Permintaan akses dikenal dengan nama Query String,

yaitu terdapat URL dan mengandung parameter konten (category, ID article, dan

sebagainya) (Tohirudin, 2011).

5
2.3 Google Chrome

Google Chrome adalah sebuah aplikasi peramban yang digunakan untuk

menjelajah dunia maya seperti halnya Firefox, Opera ataupun Microsoft Edge.

Google Chrome dibuat dan dirancang oleh Google, yaitu perusahaan internet

terbesar di dunia yang juga empunya Android. Proyek open source yang digunakan

oleh Google disebut Chromium yang dirancang untuk bekerja dengan kecepatan di

atas rata-rata namun tetap ringan dijalankan di perangkat desktop dan mobile.

Google Chrome juga dirancang agar berjalan secepat mungkin dimulai dari desktop,

memuat laman web dalam sekejap, dan menjalankan aplikasi web yang rumit

dengan sangat cepat. Google Chrome pertama kali di rilis oleh Google pada tanggal

2 September 2008, yang saat itu hanya untuk Microsoft Windows karena masih

dalam status beta. Lalu pada 11 Desember pada tahun yang sama Google Chrome

di luncurkan untuk semua sistem operasi karena telah mencapai versi stabil.

(Winarso, 2016)

2.4 My Live Chat

My Live Chat adalah salah satu module atau plugins website yang bersifat

open source atau gratis. Module ini dapat digunakan pada website agar dapat

memunculkan fitur live chatting secara online. My Live Chat dapat digunakan pada

website dan dapat diakses serta diinstal di dalam sistem operasi android maupun

iOS (apple). (Adam, n.d.)

2.5 Google Maps

Google Maps adalah layanan jasa peta gratis dan online yang dikembangkan

oleh Google. Layanan ini memberikan citra satelit, peta jalan, panorama 360,

6
kondisi lalu lintas, dan perencanaan rute untuk bepergian dengan berjalan kaki,

mobil, sepeda (versi beta), atau angkutan umum. (Baradja, 2016)

Google Maps dibuat dengan menggunakan kombinasi dari gambar peta,

database, serta objek-objek interaktif yang dibuat dengan bahasa pemrograman

HTML, Javascript, dan AJAX, serta beberapa bahasa pemrograman lainnya.

Gambar-gambar peta yang muncul pada layar merupakan hasil komunikasi dari

pengguna dengan database pada web server google untuk menampilkan gabungan

dari potongan-potongan gambar yang diminta. Seluruh citra yang ada

diintegrasikan ke dalam suatu database pada google server, yang nantinya akan

dipanggil sesuai kebutuhan permintaan. Bagian-bagian gambar peta yang

merupakan gabungan dari gambar-gambar yang berukuran 256 x 256 pixel. Tiap-

tiap 256 x 256 tile mewakili gambar tertentu dalam longitude, latitude, dan zoom

level tertentu. (Albertrahmat, 2015)

2.6 Social Media

Social media atau media sosial adalah sebuah media online yang dibuat agar

seluruh penggunanya dapat saling bepartisipasi, berkomunikasi, berbagi, serta

berinteraksi secara langsung melalui sebuah jaringan. Menurut Dalley (2009 :3)

media sosial adalah konten online yang dibuat menggunakan teknologi penerbitan

yang sangat mudah untuk diakses dan terstruktur. Paling penting dari teknologi ini

adalah terjadinya pergerseran cara untuk mengetahui seseorang, membaca berbagai

berita, serta mencari informasi dan konten.

Social media adalah sebuah media untuk bersosialisasi satu sama lain dan

dilakukan secara online yang memungkinkan manusia untuk saling berinteraksi

7
tanpa dibatasi ruang dan waktu. Social media dapat dikelompokkan menjadi

beberapa bagian besar yaitu Social Networks, Discuss, Share, Publish, Social game,

MMO, Virtual worlds, Livecast, Livestream, dan Micro blog . (Rustian, 2012)

2.7 Xampp Control Panel

XAMPP Control Panel adalah tipe server lokal yang terletak pada setiap

komputer. Selain itu xampp merupakan perangkat lunak yang bersifat bebas yang

mendukung banyak sistem operasi, serta kompilasi dari beberapa program.

Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas

program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang

ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan

singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl.

Program ini tersedia dalam GNU General Public License dan bebas, merupakan

web server yang mudah digunakan yang dapat melayani tampilan halaman web

yang dinamis. Untuk mendapatkanya dapat men-download langsung dari web

resminya. (Winarno & Zaki, 2014)

2.8 phpMyAdmin

phpMyAdmin adalah sebuah aplikasi/perangkat lunak bebas (open source)

yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani

administrasi database MySQL melalui jaringan lokal maupun internet.

phpMyAdmin mendukung berbagai operasi MySQL, diantaranya mengelola basis

data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users),

perijinan (permissions), dan lain-lain (Hakim, 2013).

8
 Selain itu, pengertian phpMyAdmin adalah sebuah perangkat lunak untuk

mengelola database MySQl dengan antarmuka grafis (GUI). Penggunaan

antarmuka grafis lebih memudahkan daripada antarmuka pengelolaan asli MySQL

yang berbasis teks. Jadi yang pada MySQL semuanya dilakukan dengan teks, pada

phpMyAdmin dibuat dalam model grafis (Purnowo, 2014). Perbedaan Phpmyadmin

dengan MySQl yaitu phpmyadmin merupakan alat untuk memudahkan dalam

mengoperasikan database MySQL sedangkan MySQL adalah database tempat

penyimpanan data. Phpmyadmin sendiri hanya digunakan sebagai alat untuk

mengolah/mengatur data pada MySQL (Admin, 2016).

2.9 Use Case Diagram

Use Case Diagram menyajikan interaksi antara use case dan aktor. Dimana

aktor dapat berupa orang, peralatan atau sistem lain yang beinteraksi dengan sistem

yang dibangun. Use case menggambarkan fungsionalitas sistem atau persyaratan-

persyaratan yang harus dipenuhi sistem dari pandangan pemakai. Jika Business Use

Case Diagram tidak memperhatikan apakah proses dilakukan secara otomasi

terkomputerisasi, maka Use Case Diagram berfokus hanya pada proses otomatisasi

saja. (Kurnia, Destiani, & Supriatna, 2012)

Use case diagram meliputi: use case, actor dan relations. Jika sudah

memahami pemodelan bisnis, ada kemiripan antara pemodelan bisnis dan

pemodelan use case. Perbedaanya adalah jika pada pemodelan bisnis memfokuskan

pada organisasi, sedangkan pemodelan sistem berfokus pada sistem yang sedang

dibangun. Perbedaan antara pemodelan bisnis dan pemodelan sistem :

9
Item Pemodelan Bisnis (Business Pemodelan Sistem (Use

Use Case) Case)

Use Case Menjelaskan apa yang bisnis Menjelaskan apa yang

kerjakan sistem lakukan di bisnis

Aktor Eksternal terhadap organisasi Eksternal terhadap sistem

(mungkin internal terhadap

sistem)

Pekerja Internal terhadap organisasi Tidak digunakan

Bisnis

Gambar 2. 1 Perbedaan pemodelan bisnis dan pemodelan sistem

2.9.1 Use Case

Use case adalah independen terhadap implementasinya dan

pandangan tingkat tinggi apa yang pemakai harapkan dari sistem. Dengan

penjelasan sebagai berikut :

1. Use case adalah independen terhadap implementasinya. Selama

membuat use case, asumsikan bahwa anda sedang membangun

sebuah sistem manual. Use case anada harus mampu dibangun

dalam Java, Visual Basic, C++, atau kertas. Use case berkonsentrasi

pada apa yang system harus kerjakan, bukan bagaimana sistem

mengerjakannya.

2. Use case adalah pandangan tingkat tinggi apa yang pemakai

harapkan dari sistem. Use case yang sudah dikelompokkan

10
 memudahkan pelanggan memahaminya, pada level yang sangat

tinggi dari sustu sistem.

3. Use case difokuskan pada apa yang pengguna dapatkan dari sistem.

Masing-masing use case mempresentasikan transaksi lengkap antara

pemakai dan sistem yang menghasilkan manfaat terhadap pemakai.

aUse case diberikan nama dalam termoniologi pemakai, bukan

terminologi teknikal, dan harus bermakna terhadap pelanggan. Nama

sebuah use case adalah kata kerja atau frase kata kerja dengan format <kata

kerja><kata benda>, dan menjelaskan apa yang pelanggan perhatikan

sebagai hasil akhir.Simbol use case pada star UML:

Gambar 2. 2 Simbol use case

2.9.2 Actor

Actor adalah seseorang atau apa saja yang berhubungan dengan

sistem yang sedang dibangun. Use Case menggambarkan semua yang ada

dalam ruang lingkup sistem. Actor merupakan semua yang ada di luar ruang

lingkup sistem. Dalam UML, actor dimodelkan dengan menggunakan ikon

Gambar 2. 3 Simbol actor

11
Ada 3 tipe actor, yaitu :

1. Pengguna sistem

Actor secara fisik atau seotang pengguna. Ini adalah gambaran actor

secara umum, dan selalu ada pada setiap sistem. Untuk sistem sirkulasi

perpustakaan, actor-nya adalah orang-orang yang secara langsung

menggunakan sistem. Ketika menamakan actor, gunakan nama peranan dan

jangan gunakan nama posisi. Posisi dapat berubah, tetapi peranan dapat

digantikan oleh siapa saja dan relatif tetap.

2. Sistem lain yang berhubungan dengan sistem yang dibangun

Yaitu actor yang masih berhubungan dengan actor pada sistem yang

dibangun.

3. Waktu

Waktu dapat menjadi suatu actor ketika melalui sejumlah waktu

tertentu memicu beberapa kejadian dalam sistem. Misalnya, bagian promosi

memberikan kesempatan pada pelanggan untuk memenangkan tiket gratis.

Setiap hari pada pukul 03.00 dini hari, sistem secara otomatis menyeleksi

secara acak pelanggan-pelanggan untuk mendapatkan tiket gratis tersebut.

Sebab waktu adalah di luar kendali kita, maka ia dapat menjadi actor.

2.9.3 Relasi

Relasi digunakan untuk menunjukkan relasi antara use case dan

actor. Ada tiga tipe relasi antara use case : relasi include, relasi extend, dan

12
 relasi generalisasi. Sedangkan relasi antara actor hanya digunakan satu

relasi yaitu generalisasi.

2.10 Data Flow Diagram

Data Flow Diagram (DFD) merupakan suatu cara atau metode untuk

membuat rancangan sebuah sistem yang mana berorientasi pada alur data yang

bergerak pada sebuah sistem nantinya. Dalam pembuatan Sistem Informasi, Data

Flow Diagram sering digunakan oleh para analis untuk untuk membuat sebuah

sistem yang baik.

2.10.1 Proses

Proses sistem informasi merespon kejadian dan kondisi bisnis dan

mentransformasi data menjadi informasi yang berguna. Dalam analisis

sistem, model digunakan untuk menampilkan dan menyajikan sistem.

Proses adalah kerja yang dilakukan pada atau sebagai respons terhadap

aliran data masuk atau kondisi.

Gambar 2. 4 Simbol proses

2.10.2 Aliran data

Aliran data adalah komunikasi antara proses dan lingkungan sistem

yang menunjukkan input data ke proses atau output data dari proses.

Gambar 2. 5 Simbol aliran data

13
 2.10.3 Agen Eksternal

Agen eksternal yang termasuk dalam lingkungan sistem membentuk

batasan sistem dan mendefinisikan tempat di mana sistem berhadapan

dengan lingkungannya. Hal ini bisa berupa orang, unit organisasi, sistem

lain atau organisasi lain, yang berada di luar lingkup proyek tetapi

berinteraksi dengan sistem yang sedang dikembangkan atau dipelajari.

Agen eksternal sebaiknya dinamai dengan kata benda tunggal yang

deskriptif seperti supplier, financial system atau pengguna.

Gambar 2. 6 Simbol agen eksternal

2.11 Activity Diagram

Activity diagram adalah cara lainnya untuk memodelkan aliran kejadian.

Menggunakan teks adalah bermanfaat, tetapi akan kesulitan membaca dan

memahami jika logika aliran kejadian sudah komplek. Activity diagram

menunjukkan informasi yang sama sebagaimana dalam aliran kejadian dengan teks.

Kita menggunakan Activity diagram dalam pemodelan bisnis untuk

menggambarkan aliran kerja (workflow) yang ada dalam proses bisnis.

2.11.1 Activity

Kita dapat menambahkan langkah-langkah detil ke dalam activity

dengan menggunakan aksi-aksi. Aksi-aksi adalah langkah-langkah lebih

kecil dalam activity. Mereka mungkin salah satu dari empat hal berikut ini :

14
 1. Saat sedang memasuki activity. Aksi Entri (entry action) terjadi

segera saat activity ini dimulai dan ditandai dengan kata entry.

2. Ketika sedang meninggalkan activity. Aksi exit (exit action) terjadi

pada saat meninggalkan activity dan ditandai dengan kata exit.

3. Ketika sedang berada dalam sebuah activity. Aksi ini terjadi saat di

dalam activity dan selau terjadi hingga meninggalkan activity. Aksi

ini ditandai dengan kata do

4. Kejadian spesifik (specific event). Aksi ini terjadi jika dan hanya jika

kejadian spesifik terjadi. Aksi ini ditandai dengan kata event.

Aksi-aksi tersebut opsional, tapi dapat memberikan informasi rinci

yang akan membantu untuk melengkapi rancangan sistem di kegiatan

berikutnya.

Gambar 2. 7 Simbol activity

2.11.2 Start dan End State

Start dan End state sebagaimana yang kita ketahui adalah untuk

memulai dan mengakhiri flow. Setiap activity diagram harus mempunyai

start state dan diakhiri dengan end state. End state adalah opsional dan bisa

lebih dari satu dalam satu Activity diagram.

Gambar 2. 8 Simbol start state dan end state

15
 2.11.3 Obyek dan Aliran Obyek

Obyek adalah entitas yang digunakan dalam aliran. Obyek mungkin

digunakan atau dirubah oleh activity dalam aliran. Pada Activity diagram,

kita dapat menampilkan obyek dan kondisinya, sehingga kita dapat

memahami di mana dan bagaimana kondisi obyek tersebut berubah.

Obyek dihubungkan ke activity menggunakan aliran obyek (object

flow). Aliran obyek digambarkan dengan garis panah putus-putus. Jika garis

panah mempunyai arah dari activity ke obyek berarti ia memperbarui nilai

obyek tersebut, dan jika arah panah dari obyek ke activity berarti ia sedang

menggunakan obyek.

2.11.4 Transisi

Transisi menunjukkan bagaimana aliran kontrol bergerak dari satu

activity ke activity lainnya. Transisi digambarkan menggunakan anak panah

dengan nama transisi menunjukkan nama kejadiannya. Kejadian (event)

memicu terjadinya transisi, kondisi (guard condition) mengontrol ada atau

tidak ada transisi yang terjadi, sebuah kondisi harus benar agar transisi dapat

terjadi.

2.11.5 Sinkronisasi

Sinkronisasi adalah suatu cara untuk menunjukkan bahwa dua atau

lebih cabang dari aliran terjadi secara paralel.

2.12 State Transition Diagram (STD)

Menurut Harel and Moore (2011), State Transition Diagram digunakan

untuk membuat pemodelan berorientasi objek. Hal yang mendasarinya adalah

16
untuk mendefinisikan suatu sistem yang memiliki sejumlah states. Suatu sistem

menerima kejadian dari interaksi yang ada di luar, dan masing-masing kejadian

tersebut menyebabkan perpindahan dari satu state ke state lainnya. State Transition

Diagram juga memiliki arah yang mengelilingi dalam pemodelan berorientasi

objek. Hal tersebut menjelaskan suatu tingkah laku sistem. Ini berarti

mengharuskan analis untuk mendefinisikan semua state yang mungkin terjadi dan

ada pada suatu sistem. Baik pada sistem yang kecil, maupun sistem yang besar. Hal

ini juga dapat terjadi dengan peningkatan jumlah state yang ada di dalam analisis

suatu sistem. Metode objek oriented juga mendefinisikan state transition diagram

yang terpisah pada masing-masing class nya.

Menurut Leoni (2011), State Transition Diagram adalah diagram yang

merepresentasikan serangkaian states dan aktivitas yang berkaitan di dalam

hubungan suatu sistem. State Transition Diagram digunakan untuk

mengembangkan analis dalam merangkai suatu sistem secara real-time dan

berorientasi objek

17
 BAB III

METODE PRAKTEK KERJA LAPANGAN

1.1 Teknik Pengolahan Data

1.1.1 Jenis Data

Data yang akan dipergunakan dalam penelitian ini adalah data yang

dikumpulkan dari instansi yang terkait dalam hal ini adalah instansi PT

Multi Rekayasa Mandiri yang beralamat di jalan Medayu Selatan blok T-

31, Rungkut, kota Surabaya.

1.1.2 Sumber Data

Sumber data yang dipergunakan dalam hal ini adalah data yang

dikumpulkan dari instansi yang terkait yaitu PT Multi Rekayasa Mandiri.

Perusahaan ini beralamat di jalan Medayu Selatan blok T-31, Rungkut, kota

Surabaya.

1.2 Pelaksanaan

1.2.1 Metode Observasi

Dalam penelitian ini, penulis mengamati dan menganalisa apa yang

dibutuhkkan oleh perusahaan tersebut dengan cara menganalisa kekurangan

dalam kebutuhan situs web perusahaan tersebut. Diketahui bahwa

kekurangan situs web pada PT. Multi Rekayasa Mandiri yaitu kurangnya

fitur untuk menampilkan informasi seperti peta, tampilan produk dan

tampilan situs web yang kurang menarik, fitur chatting dan konetivitas pada

media sosial.

18
1.3 Rancangan Penelitian

1.3.1 Perancangan Sistem

Berikut ini adalah rancangan sistem yang akan dipakai untuk

membangun situs web. Adapaun diagram Use Case diagram, Activity

Diagram, Data flow diagram, dan State Transition Diagram diagram dapat

dilihat pada gambar dibawah ini.

Gambar 3. 1 Use case diagram admin

Pada use case diagram actor admin, actor admin memiliki use case

yaitu memasukkan data produk, memperbarui data produk dan menghapus

data produk, namun semua use case tersebut harus dilakukan dengan

melewati use case login.

19
 Gambar 3. 2 Use case diagram konsumen

Pada use case diagram actor konsumen, actor konsumen memiliki

use case yaitu melihat data produk dan memesan produk.

20
 admin sistem login sistem memasukan data produk

membuka halaman login menampilkan halaman login

mengisi username dan password memverifikasi username dan password

salah
benar

menampilkan halaman dengan user admin

membuka halaman data produk menampilkan halaman data produk

memasukkan data produk menyimpan data produk

Gambar 3. 3 Activity diagram memasukkan data produk

Pada activity diagram tersebut, dilakukan oleh actor admin dengan

melakukan aktifitas login terlebih dahulu lalu admin dapat menambahkan

atau memasukkan data produk.

21
 admin sistem login sistem memperbarui data produk

membuka halaman login menampilkan halaman login

mengisi username dan password memverifikasi username dan password

salah
benar
menampilkan halaman dengan user admin

membuka halaman data produk menampilkan halaman data produk

memperbarui data produk menyimpan data produk

Gambar 3. 4 Activity diagram memperbarui data produk

Pada activity diagram tersebut, dilakukan oleh actor admin dengan

melakukan aktifitas login terlebih dahulu lalu admin dapat memperbarui

data produk.

22
 admin sistem login sistem menghapus data produk

membuka halaman login menampilkan halaman login

mengisi username dan password memverifikasi username dan password

salah
benar

menampilkan halaman admin

membuka halaman data produk menampilkan halaman data produk

menghapus data produk memperbarui data produk

Gambar 3. 5 Activity diagram menghapus produk

Pada activity diagram tersebut, dilakukan oleh actor admin dengan

melakukan aktifitas login terlebih dahulu lalu admin dapat menghapus data

produk.

23
 user sistem melihat data produk

membuka halaman utama menampilkan halaman utama

membuka halaman produk sortir produk

tidak
iya

menampilkan halaman produk

Gambar 3. 6 Activity diagram melihat data produk

Pada activity diagram tersebut, dilakukan oleh actor user atau

konsumen dengan melakukan aktifitas melihat data produk.

24
 user sistem memesan produk

membuka halaman utama menampilkan halaman utama

membuka halaman produk menampilkan halaman produk

memilih produk menampilkan produk yang dipilih

menanyakan detil produk melalui email atau chat mengirim pesan detil produk

Gambar 3. 7 Activity diagram memesan produk

Pada activity diagram tersebut, dilakukan oleh actor user atau

konsumen dengan melakukan aktifitas memesan produk.

25
admin
[menampilkan informasi produk]

[memasukkan data produk] [melihat data produk]

[menghapus data produk] 1

sistem PT Multi [memesan produk]
[memperbarui data produk] Rekayasa Mandiri

[menampilkan daftar produk dan

informasi perusahaan] user

[laporan pembayaran]

Gambar 3. 8 Data Flow Diagram level 0

Pada data flow diagram level 0, terdapat admin dan user atau

konsumen yang keduanya dapat mengakses sistem PT. Multi Rekayasa

Mandiri. Pada aktor atau admin, dapat melakukan aktifitas memasukkan

data produk, menghapus data produk, dan memperbarui data produk.

Keluaran dari sistem menuju aktor admin adalah menampilkan

informasi produk. Pada aktor user, dapat melakukan aktifitas yaitu

melihat data produk dan memesan produk. Keluaran yang dihasilkan

sistem untuk aktor user adalah menampilkan daftar produk dan

informasi perusahaan, serta laporan pembayaran.

26
 simpan data user data user
1 user

simpan data produk data produk

2 produk

login

1.1 1.2
memperbarui data produk
input sistem tampil data
memasukkan data produk

menampilkan produk

menampilkan website dengan user admin

admin melihat produk
menampilkan produk

user

Gambar 3. 9 Data Flow Diagram level 1

Pada data flow diagram level 1, terdapat admin dan user atau

konsumen. Selain itu juga terdapat 2 database user dan produk serta 2

proses yaitu input sistem dan tampil data. Admin dapat mengakses input

sistem dengan melakukan login, memperbarui data produk, dan

memasukkan data produk. User dapat mengakses tampil data dengan

melihat produk. Hubungan antara proses input sistem dengan database

user dan produk adalah simpan data user, serta simpan data produk.

Keluaran dari database menuju proses tampil data adalah data user dan

data produk. Keluaran proses tampil data menuju ke admin adalah

menampilkan web dengan user admin dan menampilkan produk.

Keluaran proses tampil data menuju user adalah menampilkan produk

27
 Browser
Ketik URL Proses Kesalahan URL
www.multirekayasamandiri.com Tidak Ditemukan

Beranda

User Klik Profile User Klik Kembali

Profil
Tampil Profile Perusahaan Tampil Halaman Beranda

User klik Visi Misi User Klik Kembali

Visi Misi
Tampil Visi Misi Perusahaan Tampil Halaman Beranda

User Klik Galeri User Klik Kembali

Galeri
Tampil Galeri Produk Tampil Halaman Beranda

User Klik Hubungi Kami User Klik Kembali

Hubungi Kami
Tampil Contact Perusahaan Tampil Halaman Beranda

Gambar 3. 10 State transition diagram keseluruhan menu

Gambar diatas menunjukkan bagaimana state transition diagram pada

keseluruhan menu berjalan . Setelah kita mengetik dan membuka URL

www.multirekayasamandiri.com pada browser maka langsung akan ditampilkan

halaman awal pada web tersebut. Pada tampilan awal kita akan disuguhkan

beberapa menu yang tersedia pada web PT. Multi Rekayasa Mandiri , antara lain :

Beranda, Profil, Visi Misi, Galeri, Hubungi Kami.

28
 Browser
Ketik URL Proses Kesalahan URL
www.multirekayasamandiri.com Tidak Ditemukan

Beranda
Home

User Klik Pintasan Produk User Klik Kembali

Pintasan
Profile
Produk
Tampil Pintasan Produk Tampil Halaman Beranda

User Klik Contoh Produk User Klik Kembali

Contoh
Visi Misi
Produk
Tampil Contoh Produk Tampil Halaman Beranda

User Klik Sosial Media User Klik Kembali

Sosial
Galeri
Media
Tampil Halaman Sosial Media Tampil Halaman Beranda

Gambar 3. 11 State transition diagram menu beranda

Gambar diatas menunjukkan bagaimana state transition diagram pada

menu beranda berjalan. Pada menu Beranda kita dapat melihat kilasan beberapa

produk yang disediakan oleh PT. Multi Rekayasa Mandiri tanpa harus membuka

menu produk terlebih dahulu dengan cara mengklik ikon pintasan produk yang

terletak pada sebelah kanan web. Selain pintasan produk pada menu Beranda kita

juga dapat melihat contoh produk dari beberapa produk yang telah disediakan dan

dengan cara mengklik read more jika ingin melihat produk detilnya. Selain itu pada

menu Beranda juga disediakan share to social media, terdapat beberapa pilihan

media sosial yang telah disediakan , antara lain : facebook, twitter, google plus,

linkedin.

29
 Browser
Ketik URL Proses Kesalahan URL
www.multirekayasamandiri.com Tidak Ditemukan

Beranda
Home

User Klik Pintasan Produk User Klik Kembali

Pintasan
Profile
Produk
Tampil Pintasan Produk Tampil Halaman Profil

User Klik Sosial Media User Klik Kembali

Sosial
Galeri
Media
Tampil Halaman Sosial Media Tampil Halaman Profil

Gambar 3. 12 State transition diagram menu profil

Gambar diatas menunjukkan bagaimana state transition diagram pada

menu profil berjalan. Pada menu Profil kita dapat melihat kilasan beberapa produk

yang disediakan oleh PT. Multi Rekayasa Mandiri tanpa harus membuka menu

produk terlebih dahulu dengan cara mengklik ikon pintasan produk yang terletak

pada sebelah kanan web. Selain itu pada menu Profil juga disediakan share to social

media, terdapat beberapa pilihan media sosial yang telah disediakan , antara lain :

facebook, twitter, google plus, linkedin.

30
 Browser
Ketik URL Proses Kesalahan URL
www.multirekayasamandiri.com Tidak Ditemukan

Beranda
Home

User Klik Pintasan Produk User Klik Kembali

Pintasan
Profile
Produk
Tampil Pintasan Produk Tampil Halaman Visi Misi

User Klik Sosial Media User Klik Kembali

Sosial
Galeri
Media
Tampil Halaman Sosial Media Tampil Halaman Visi Misi

Gambar 3. 13 State transition diagram menu visi misi

Gambar diatas menunjukkan bagaimana state transition diagram pada

menu visi misi berjalan. Pada menu Visi Misi kita dapat melihat kilasan beberapa

produk yang disediakan oleh PT. Multi Rekayasa Mandiri tanpa harus membuka

menu produk terlebih dahulu dengan cara mengklik ikon pintasan produk yang

terletak pada sebelah kanan web. Selain itu pada menu Visi Misi juga disediakan

share to social media, terdapat beberapa pilihan media sosial yang telah disediakan

, antara lain : facebook, twitter, google plus, linkedin.

31
 Browser
Ketik URL Proses Kesalahan URL
www.multirekayasamandiri.com Tidak Ditemukan

Beranda
Home

User Klik Pintasan Produk User Klik Kembali

Pintasan
Profile
Produk
Tampil Pintasan Produk Tampil Halaman Produk

User Klik Sort by User Klik Kembali

Visi
SortMisi
By
Tampil pilihan Short by Tampil Halaman Produk

User Klik Result Page User Klik Kembali

Result
Galeri
Page
Tampil jumlah produk Tampil Halaman Produk

User Klik Call for price User Klik Kembali

Call
VisiforMisi
price
Tampil short message Tampil Halaman Produk

User Klik Product detil User Klik Kembali

Product
GaleriDetil
Tampil halaman Produk detil Tampil Halaman Produk

Gambar 3. 14 State transition diagram menu galeri

Gambar diatas menunjukkan bagaimana state transition diagram pada

menu galeri berjalan. Pada menu Galeri kita dapat melihat kilasan beberapa produk

yang disediakan oleh PT. Multi Rekayasa Mandiri dengan cara mengklik ikon

pintasan produk yang terletak pada sebelah kanan web. Selain itu juga disediakan

sort by yang berfungsi untuk mengurutkan berdasarkan beberapa pilihan urutan.

Terdapat juga result page yang berfungsi untuk menata halaman yang tersedia akan

dijadikan berapa produk yang dapat ditampilkan dalam tiap page. Selain itu pada

menu ini juga terdapat call for price , jika di klik maka user dapat bertanya-tanya

langsung melalui email yang telah terhubung dengan email PT. Multi Rekayasa

Mandiri. Selain itu juga terdapat product detail , jika di klik maka akan tampil ke

halaman detil produk pada produk yang telah terpilih.

32
 Browser
Ketik URL Proses Kesalahan URL
www.multirekayasamandiri.com Tidak Ditemukan

Beranda
Home

User Klik Pintasan Produk User Klik Kembali

Pintasan
Profile
Produk
Tampil Pintasan Produk Tampil Halaman Produk Detil

User Klik icon cetak User Klik Kembali

Visi
Cetak
Misi
Tampil halaman cetak Tampil Halaman Produk Detil

User Klik Call for price User Klik Kembali

Call
VisiforMisi
price
Tampil short message Tampil Halaman Produk Detil

Gambar 3. 15 State transition diagram halaman product detail

Gambar diatas menunjukkan bagaimana state transition diagram pada

menu product detail berjalan. Pada ini dapat melihat kilasan beberapa produk yang

disediakan oleh PT. Multi Rekayasa Mandiri tanpa harus membuka menu produk

terlebih dahulu dengan cara mengklik ikon pintasan produk yang terletak pada

sebelah kanan web. Pada menu Product Detail telah disediakan cetak data dengan

cara meng-klik ikon cetak (printer) pada bagian kanan web maka akan langsung

terhubung dengan halaman cetak data. Selain itu pada menu ini juga terdapat call

for price , jika di klik maka user dapat bertanya-tanya langsung melalui email yang

telah terhubung dengan email PT. Multi Rekayasa Mandiri.

33
 Browser
Ketik URL Proses Kesalahan URL
www.multirekayasamandiri.com Tidak Ditemukan

Beranda
Home

User Klik Pintasan Produk User Klik Kembali

Pintasan
Profile
Produk
Tampil Pintasan Produk Tampil Halaman Hubungi Kami

User Klik maps User Klik Kembali

Visi
MapsMisi
Tampil halaman location Tampil Halaman Hubungi Kami

User Klik Sosial Media User Klik Kembali

Call
VisiforMisi
price
Tampil Halaman Sosial Media Tampil Halaman Hubungi Kami

Gambar 3. 16 State transition diagram menu hubungi kami

Gambar diatas menunjukkan bagaimana state transition diagram pada

menu hubungi kami berjalan. Pada menu hubungi kami telah disediakan maps yang

telah terhubung dengan google maps jika maps di klik, ini bertujuan untuk

memudahan user dalam mencari alamat PT. Multi Rekayasa Mandiri.

34
Gambar 3. 17 Prototype Menu Home

35
Gambar 3. 18 Prototype menu galeri

36
Gambar 3. 19 Prototype menu hubungi kami

37
Gambar 3. 20 Prototype menu profile

38
Gambar 3. 21 Prototype menu visi dan misi

39
Gambar 3. 22 Prototype menu list produk

40
Gambar 3. 23 Prototype fitur call for price

41
Gambar 3. 24 Prototype fitur detil produk

42
Gambar 3. 25 Prototype fitur chating

43
Gambar 3. 26 Prototype fitur admininstrator chat pada Mylivechat

Gambar 3. 27 Prototype link media sosial

44
 BAB IV

HASIL DAN PEMBAHASAN

4.1 Gambaran Aplikasi

4.1.1 Halaman Sub Menu Home

Pada sub menu home, terdapat header yang berisikan logo, nomor telepon,

tanggal dan nama, sub menu dan menu preview list produk. Selain itu juga pada

konten terdapat nama perusahaan PT. Multi Rekayasa Mandiri, Slider gambar

produk, review beberapa produk, posisi akses, tombol next atau previous, link media

sosial serta footer dan fitur live chat.

Gambar 4. 1 Tampilan sub menu Beranda

45
 4.1.2 Halaman Sub Menu Profile

Pada sub menu Profile, terdapat header yang berisikan logo, nomor telepon,

tanggal dan nama, sub menu dan menu preview list produk. Selain itu juga pada

konten terdapat ikon user, tanggal, nama perusahaan, alamat perusahaan, nomor

telepon yang dapat dihubungi, email, tombol next atau previous, link media sosial

dan footer.

Gambar 4. 2 Tampilan sub menu Profile

46
 4.1.3 Halaman Sub Menu Visi dan Misi

Pada sub menu Visi dan Misi, terdapat header yang berisikan logo, nomor

telepon, tanggal dan nama, sub menu dan menu preview list produk. Selain itu juga

pada konten terdapat ikon user, tanggal, visi dan misi perusahaan, tombol next atau

previous, link media sosial dan footer.

Gambar 4. 3 Tampilan sub menu visi dan misi

47
 4.1.4 Halaman Sub Menu Galeri

Pada sub menu Galeri, terdapat header yang berisikan logo, nomor telepon,

tanggal dan nama, sub menu dan menu preview list produk. Selain itu juga pada

konten terdapat alat untuk mensotir (sort by), hasil (results), display produk dengan

penjelasan singkat, menu detail produk, dan footer.

Gambar 4. 4 Tampilan sub menu galeri

48
 4.1.5 Halaman Sub Menu Hubungi Kami

Pada sub menu Hubungi Kami, terdapat header yang berisikan logo, nomor

telepon, tanggal dan nama, sub menu dan menu preview list produk. Selain itu juga

pada konten terdapat ikon user, tanggal, email,nomor telepon, alamat, kode pos,

peta letak perusahaan, tombol next atau previous, link media sosial dan footer.

Gambar 4. 5 Tampilan sub menu hubungi kami

49
 4.1.6 Menu Preview List Produk

Pada menu Preview List Produk, terdapat nama produk dan gambar produk,

selain itu juga terdapat fitur live chat.

Gambar 4. 6 Tampilan menu preview list produk

50
 4.1.7 Menu Detail Produk

Pada sub menu Galeri terdapat menu Detail Produk yang memiliki konten

yaitu tombol next atau previous produk, nama produk, fungsi atau kegunaan

produk, gambar produk, menu call for price, review produk dan footer.

Gambar 4. 7 Tampilan menu detail pada sub menu galeri

51
 4.1.8 Menu Call for Price

Pada menu Cal for Price di dalam menu detail produk, memiliki konten

nama produk, penjelasan produk, gambar produk, kolom bar nama perusahaan dan

email perusahaan, kolom tulis yang digunakan untuk menuliskan pertanyaan, dan

tombol kirim pertanyaan.

Gambar 4. 8 Tampilan menu call for price pada menu detail produk

52
 4.1.9 Fitur Live Chat

Pada fitur Live chat, menggunakan vendor dari My Live chat. Pada fitur ini

terdapat gambar dan nama admin, ikon like atau dislike, direct message, dan voice

note. Selain itu juga terdapat baris chatting yang berguna untuk preview

percakapan, baris tulis untuk memasukkan pesan tulisan atau gambar dan emote

icon, serta tombol send untuk mengirim percakapan.

Gambar 4. 9 Tampilan fitur live chat

53
 4.1.10 Admin Fitur Live chat

Pada fitur my live chat, juga terdapat admin. Admin ini harus dibuka melalui

ikon live chat pada website. Di dalam halaman admin, terdapat banyak sekali

konten yang dapat diakses melalui administrator seperti percakapan, detail

percakapan, console, status, tools dan sebagainya.

Gambar 4. 10 Administrator live chat

4.1.11 Fitur Link Media Sosial

Pada fitur link media sosial terdapat beberapa ikon yang dapat terkoneksi

dengan media sosial tersebut seperti facebook, twiter, google+, linkedin.

Gambar 4. 11 Tampilan link media sosial

54
 BAB V

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dari pembahasan diatas, maka dapat disimpulkan :

1. proses pembuatan situs web pada PT. Multi Rekayasa Mandiri adalah

dengan menggunakan conten management system dari vendor joomla!.

Setelah content management system telah di install, selanjutnya adalah

melakukan pemilihan desain template. Install dan aktifkan modul yang

dibutuhkan dan selanjutnya adalah melakukan pengisian modul ke

dalam website. Proses editing source code menggunakan software

Notepad++, dan koneksi lokal dari software Xampp Control Panel.

Adapun database yang digunakan adalah My SQL yang terdapat pada

module bawaan Xampp Control Panel. Dengan melakukan pembuatan

website ini diharapkan pembaca dapat lebih mudah untuk membuat dan

mengoperasikan website dengan tampilan yang nyaman dan menarik.

2. Jika dibandingkan dengan website yang sebelumnya, website ini

memiliki kelebihan untuk menampilkan semua produk beserta

spesifikasi yang dijual di PT. Multi Rekayasa Mandiri. Selain itu juga

terdapat fitur-fitur yang menarik dan dapat diakses langung oleh para

pembaca. Fitur fitur yang telah ditambahkan adalah live chatting, peta

lokasi berupa maps, call for price yaitu fitur pesan yang langsung

terhubung dengan email admin, dapat terhubung dengan media sosial,

55
 terdapat fitur tanggal dan waktu secara real time, dan tampilan website

dengan konten-konten menarik serta dinamis.

5.2 Saran

Sebaiknya penulis yang selanjutnya dapat menambahkan berbagai fitur dan

mengembangkan website PT. Multi Rekayasa Mandiri menjadi lebih menarik.

56
 DAFTAR PUSTAKA

1. Tohirudin, M. (2011). Pintar Membuat Web Dengan Joomla.

Depok:KANAYApres,Grup Puspa Swara,Anggota IKAPI Wisma Hijau

2. Winarto,E., & Zaki,A. (2014). Online shop dengan Joomla 3. Jakarta: PT

Elex Media Komputindo

3. Ichtiara, C. (2008). Implementasi Aplikasi Sistem Informasi Geografis.

Fakultas Teknik Universitas Indonesia.

4. Huda, M. (2014). Pengenalan dan cara kerja Google Maps.

http://www.mkhuda.com

5. Albertrahmat, (2015, september 17) Mengenal google maps. Diambil

kembali dari http://lsi.si.fti.unand.ac.id/mengenal-google-maps/

6. Winarso, B. (2016, mei 23) Apa itu google chrome dan sepenggal

sejarahnya. Diambil kembali dari https://dailysocial.id/post/apa-itu-google-

chrome

7. Purnomo, E. (2014, agustus 11). Mengenal mysql dan phpmyadmin.

Diambil kembali dari http://www.nulis-ilmu.com/2014/11/mengenal-

mysql-dan-phpmyadmin.html

8. Hakim, Z. (2013, agustus 5). Apa itu phpmyadmin?. Diambil kembali dari

http://www.zainalhakim.web.id/apa-itu-phpmyadmin.html

9. Admin (2016, september 19). Pengertian phpMyAdmin dan fungsi-

fungsinya. Diambil kembali dari

http://www.datapendidikan.com/pengertian-phpmyadmin-dan-fungsi-

fungsinya/

57
10. Rustian, R. S. (2012, Maret 1). Diambil kembali dari UNPAS:

http://www.unpas.ac.id/apa-itu-sosial-media/

58