BAB I

PENDAHULUAN

1.1 Latar Belakang

Di era global ini perkembangan teknologi telah mengalami perkembangan
yang cepat dan canggih dengan ilmu pengetahuan modern serta teknologi tinggi.
Keadaan ini telah mempengaruhi beberapa perusahaan untuk mengikuti
perkembangan jaman dengan cara menyediakan layanan untuk para pengguna
maupun para pencari berita tentang perusahaan dengan media teknologi yang
diaplikasikan dalam bentuk tampilan web dalam mengembangkan bidang usaha.
Media promosi yang baik untuk pengenalan perusahaan kepada konsumen atau
kepada kalangan umum merupakan salah satu pemberian kemudahan dalam
mengakses informasi perusahaan. Melihat besarnya potensi yang dihasilkan oleh
tampilan suatu perusahaan lewat web ini maka membuat pemilik perusahaan akan
semakin meningkatkan variasi serta inovasi untuk mengalihkan perhatian masyarakat
pada tampilan informasi yang telah mereka buat. Tampilan informasi lewat web
tersebut adalah interface yang merupakan unit pemrograman yang berisi deklarasi
method dan konstanta yang diperlukan.
User interface mempunyai peranan penting dalam membantu kita untuk
mengerti apa yang terjadi di antara pengguna dan sistem, menterjemahkan tujuan dan
apa yang menjadi keinginan user serta apa yang menjadi kerjaan oleh sistem dari
salah satu bagian pada perangkat lunak. Desain User interface difokuskan pada
pendesainan interaksi yang terjadi antara pengguna (user) dan sistem komputer,
mencakup metode input-output dan konversi data dan informasi antara form-form
yang dapat dibaca manusia dan yang dapat dibaca komputer. Desain ini seringkali
merupakan prototyping itu sendiri dimana prototipe metode-metode didesain dan
dimodifikasi dengan pengaruh timbal balik (feedback) dari pengguna. Kebutuhan
input/output pengguna harus didukung oleh sistem informasi yang akan dibangun,
termasuk sumber informasi, format, content, volume dan frekuensi setiap tipe input
dan output. Desain user interface menghasilkan spesifikasi detail untuk produk
informasi seperti layar display, form, dokumen dan laporan.
Interface harus dapat memberi kesan pertama yang baik pada pengguna karena
interface menjadi penghubung antara sistem dan pengguna serta menjadi hal pertama
yang dilihat oleh pengguna. Tampilan pada interface tersebut diperjelas dengan
adanya gambar ataupun icon-icon lainnya. Sehingga dengan adanya kemudahan
pengguna mengakses info yang disajikan lewat web, kinerja pengguna dalam
mencapai tujuannya dapat meningkat karena adanya pengarahan dari interface yang
harus dirancang memenuhi prinsip kegunaan dan tidak mengurangi nilai ergonomis.

1.2 Tujuan
Tujuan dari pratikum yang berjudul Interface ini adalah agar mahasiswa
dapat merancang interface pemakai, sistem dan sistem berbasis web.
 BAB II
TINJAUAN PUSTAKA

Data dari sebuah organisasi tidak akan menjadi informasi sebelum

dikomunikasikan dalam bentuk yang bermanfaat bagi personil organisasi yang
memerlukannya. Komunikasi ini berlangsung dalam apa yang disebut antar muka
manusia atau manajemen. Pengertian antar muka manajemen atau manusia adalah
titik kontak dimana sistem komputer memberikan sistem informasi kepada manajer
atau dimana manajer memberikan data kepada sistem komputer. Ada beberapa contoh
tentang sistem pengolahan data yang tidak berhasil dikembangkan menjadi sistem
informasi disebabkan tidak dikembangkannnya antar muka manajemen atau manusia
sehingga manajer mesin dan manajer tidak dapat saling berkomunikasi secara efektif
(Scott, 2004).

Interface merupakan salah satu bagian yang terpenting dari sistem. Interface
sendiri adalah sistem yang dirancang untuk mengolah input dan output dari data.
Seperti contohnya interface dibuat untuk pembentukan output laporan yang dapat
dipreview, diprint, export atau import (excel, word, barcode, text, dan lain-lain).
Semua ini dikenalkan untuk memudahkan anda dalam hal analisa dan strategi, karena
pada prinsipnya bisnis itu tidak baku dan monoton. Semua input ataupun output
tersebut dirancang sedemikian rupa sehingga menghasilkan hasil yang sederhana dan
jelas, sehingga dapat dimanfaatkan langsung ataupun diolah kembali oleh pengguna.
(Ananta, 2002).

An interface is a point of interaction between two systems or work groups. In

the manufacturing environment, the interaction and coordination between a number of
work groups communicate plans and control production activity. This interaction can
come in the forms of schedule, human interaction, computer systems, or any other
medium of communication. A physical interface is the interconnection between two
items of hardware (Handfield, 2002).
Sebuah antarmuka adalah titik interaksi antara dua sistem atau kelompok kerja.
Dalam lingkungan manufaktur, interaksi dan koordinasi antara sejumlah kelompok
kerja berkomunikasi rencana dan aktivitas pengendalian produksi. Interaksi ini bisa
datang dalam bentuk jadwal, interaksi manusia, sistem komputer, atau media
komunikasi lainnya. Antarmuka fisik adalah interkoneksi antara dua item dari
perangkat keras (Handfield, 2002).

Penggunaan database komputer dapat mempunyai efek terhadap komunikasi

lateral. Bila memungkinkan bagi sebuah unit interface mengadakan jangkauan kepada
database untuk mempelajari faktor-faktor yang diterbitkan oleh sub unit lain yang
mempengaruhi prestasinya, maka kebutuhan hubungan lateral dapat dikurangi atau
efisiensi lateral bisa meningkat. User interface memungkinkan manajer untuk
memasukkan instruksi dan informasi ke dalam sistem pakar dan menerima informasi
dari sistem pakar. Instruksi tersebut menentukan parameter yang mengarahkan sistem
pakar melalui proses penalaran. Informasi itu berbentuk nilai yang diberikan pada
variabel tertentu. Manajer dapat menggunakan empat metode input : menu, perintah
(command), bahasa alamiah (natural language), dan customized interfaces. Walau
cara kerja di dalam sistem pakar mungkin rumit, user interfacenya sangat
memudahkan pemakai. Manajer yang terbiasa berinteraksi dengan komputer tidak
akan menemui kesulitan menggunakan sistem pakar (Teguh, 2002).

The user interface is the part of the operating system that allows you to
communicate with it so you can load programs, access files, and accomplish other
tasks. Three main types of user interface :
1. Command Driven
2. Menu Driven
3. Graphical User Interface
The trend in user interface for operating system and other software is moving away
from the entry of brief end user commands, or even the selection of choice from
menus of options. Instead most software provides an easy to use graphical user
interface (GUI) that uses icons, bar, buttons, boxes, and other images. GUIs realy on
pointing devices like the electronic mouse or touchpad to make selections that help
you get things done (OBrien, 2003).
Antarmuka pengguna adalah bagian dari sistem operasi yang memungkinkan
Anda untuk berkomunikasi dengannya sehingga Anda dapat memuat program, file
akses, dan menyelesaikan tugas lainnya. Tiga utama jenis user interface :
1. Command Driven
 2. Menu Driven
3. Graphical User Interface

Kecenderungan dalam antarmuka pengguna untuk sistem operasi dan perangkat lunak
lainnya bergerak menjauh dari masuknya perintah singkat pengguna akhir, atau
bahkan pemilihan pilihan dari menu pilihan. Sebaliknya sebagian besar perangkat
lunak memberikan kemudahan untuk menggunakan antarmuka pengguna grafis (GUI)
yang menggunakan ikon, bar, tombol, kotak, dan gambar lainnya. GUI benar-benar
pada perangkat penunjuk seperti mouse elektronik atau touchpad dapat membuat
pilihan yang membantu Anda mendapatkan sesuatu (O'Brien, 2003).

The most popular interface format today is the graphical user interface, which
features a windows look. Some system employ custom interface tailored to the
problem being solved. For example, the screen might display a drawing of a
mechanical assembly. Expert system are designed to recommend solutions. These
solutions are supplemented by explanation. There are two types of explanation :
1. Explanation of question. The manager may desire explanations while the expert
system performs its reasoning. Perhaps the expert systems will prompt the
manager to enter some information. The manager asks why the information is
needed, and the expert system provides an explanation.
2. Explanation of the problem solution. After the expert system provides of problem
solution, the manager can ask for an explanation of how it was reached. The
expert system will display each of the reasoning steps leading to the solution (Mc
Leod, 2001).

Format antarmuka yang paling populer saat ini adalah antarmuka pengguna
grafis, yang dilengkapi dengan jendela tampilan. Beberapa sistem menggunakan
antarmuka kustom disesuaikan dengan masalah yang dipecahkan. Sebagai contoh,
layar akan menampilkan gambar dari sebuah perakitan mekanis. Sistem pakar
dirancang untuk merekomendasikan solusi. Solusi ini dilengkapi dengan penjelasan.
Ada dua jenis penjelasan (Mc Leod, 2001):
1. Penjelasan dari pertanyaan. Manajer mungkin penjelasan keinginan sedangkan
sistem pakar melakukan penalaran nya. Mungkin sistem pakar akan meminta
 manajer untuk memasukkan beberapa informasi. Manajer bertanya mengapa
informasi yang diperlukan, dan sistem pakar memberikan penjelasan.
2. Penjelasan dari solusi masalah. Setelah sistem pakar memberikan solusi masalah,
manajer dapat meminta penjelasan tentang bagaimana hal itu tercapai. Sistem
pakar akan menampilkan setiap langkah penalaran menuju ke larutan.

Prinsipprinsip dalam merancang user interface adalah sebagai berikut

(Harjoko, 2008) :
User familiarity / mudah dikenali : gunakan istilah, konsep dan kebiasaan user
bukan komputer (misal: sistem perkantoran gunakan istilah letters, documents,
folders bukan directories, file, identifiers, jenis document open office).
Consistency / selalu begitu : konsisten dalam operasi dan istilah di seluruh
sistem sehingga tidak membingungkan. Layout menu di open office mirip dengan
layout menu di MS office.
Minimal surprise / tidak membuat kaget user : Operasi bisa diduga prosesnya
berdasarkan perintah yang disediakan.
Recoverability / pemulihan : recoverability ada dua macam: confirmation of
destructive action (konfirmasi terhadap aksi yang merusak) dan ketersediaan
fasilitas pembatalan (undo)
User guidance / bantuan : sistem manual online, menu help, caption pada icon
khusus tersedia
User diversity / keberagaman : fasilitas interaksi untuk tipe user yang berbeda
disediakan. Misalnya ukuran huruf bisa diperbesar.
 Ada 5 tipe utama interaksi untuk user interaction (Harjoko, 2008):
1. Direct manipulation pengoperasian secara langsung : interaksi langsung dengan
objek pada layar. Misalnya delete file dengan memasukkannya ke trash. Contoh :
Video games.
2. Menu selection pilihan berbentuk menu : memilih perintah dari daftar yang
disediakan. Misalnya saat click kanan dan memilih aksi yang dikehendaki.
3. Form fill-in pengisian form : mengisi area-area pada form. Contoh: Stock
control.
4. Command language perintah tertulis : menuliskan perintah yang sudah
ditentukan pada program. Contoh: operating system.
5. Natural language perintah dengan bahasa alami: Gunakan bahasa alami untuk
mendapatkan hasil. Contoh: search engine di Internet.
 BAB III

PRINT OUT

3.1. Opening Web

3.1.2 Home
3.3 Company Profile
3.4 Product
3.5 Marketing

3.5.1 Perencanaan Strategi

3.5.2 Pengendalian Manajemen

3.5.3 Pengendalian Operasional

3.5.4 Pengolahan Transaksi

3.6 Contact Us
 BAB IV
PEMBAHASAN

Pada pembuatan website perusahaan kami PT SWEET TEA, terdapat

beberapa halaman website yang terdiri dari opening web, home, company profile,
product, marketing (perencanaan strategi, pengendalian manajemen, pengendalian
operasional, pengolahan transaksi), dan contact us. Pembuatan website PT SWEET
TEA adalah dengan mengunakan software adobe dreamweaver. Saat membuka
software, pilih file, new, blank template, html template, kemudian di pilih 3 column
elastic, header, and footer. Di pilih elastic, agar bisa dilakukan pengeditan terhadap isi
website. Langkah dalam membuat website PT SWEET TEA ini adalah terlebih
dahulu membuat isi pada masing-masing bagian halaman web. Pada halaman opening
web, dimasukkan background pada bagian atas merupakan gambar kebun teh dimana
perusahaan kami mendapatkan bahan baku untuk kegiatan produksi. Cara
memasukkan background gambar adalah dengan cara mengklik pada garis bagian luar
yang ingin diberi backround, kemudian klik edit CSS, dan klik dua kali pada bagian
background yang terletak di sebelah kanan. Kemudian tinggal dipilih ingin
mengunakan background colour atau image. Dalam hal ini, digunakan background
image, kemudian browse image yang akan digunakan sebagai background (image
harus disimpan dalam satu folder yang sama dengan penyimpan website ini agar
gambar nya muncul pada halaman website dan tidak pecah) dan klik ok. Kemudian
pada halaman ini ditambahkan 1 baris dan 5 kolom. Caranya adalah pilih insert, table,
kemudian masukkan jumlah bari yang ingin ditambahkan (rows:1) dan kolom yang
ingin ditambahkan (column:5), kemudian pilih ok. Setelah tabel muncul pada halaman
website, kemudian isi setiap kolom yang ada pada table tersebut, dimana isi kolomnya
adalah home, company profile, product, marketing, dan contact us. Selanjutnya,
adalah memasukkan gambar welcome, caranya adalah pilih insert, image, kemudian
pilih image yang akan dimasukkan pada halaman ini, setelahnya pilih ok. Selanjutnya,
pilih save as html dengan nama file opening web untuk menyimpan file.

Langkah kedua, membuat isi halaman home di mana dengan cara mengedit
dari halaman opening yang telah selesai dibuat. Untuk kata-kata welcome
dihilangkan dengan cara pada gambar tersebut, di klik kanan kemudian di cut.
Kemudian tulisan PT SWEET TEA yang ada di bagian tengah header dipindakan ke
bagian kiri header. Kemudian dimasukkan gambar rumah yang menyatakan home,
tulisan PT SWEET TEA yang berwarna hijau, kata-kata glitter welcome, kata-kata
SELAMAT BERKUNJUNG DI WEBSITE KAMI, gambar PT SWEET TEA: Best
Quality, dan yang terakhir adalah kata-kata Your Satisfaction Is Our First Priority.
Dimana penyusunan gambar yang dimasukkan dengan cara disusun dengan arah ke
bawah. Untuk yang kata-kata SELAMAT BERKUNJUNG DI WEBSITE KAMI
dan kata Your Satisfaction Is Our First Priority, cara memasukkannya adalah
dengan cara letakkan kursor pada bagian yang ingin dimasukkan tulisan tersebut,
kemudian klik split dan akan muncul bahasanya kemudian paste kan kode html yang
telah di copy sebelumnya dari tempat pembuatan kata-kata tersebut (Flash Glitter Text
Generator). Setelah di paste, klik pada bagian letak kursor sebelumnya maka teks
tesebut akan muncul pada halaman home. Setelah semuanya selesai, simpan dengan
cara save as dengan nama file home dalam bentuk html dan disimpan dalam folder
yang sama.

Langkah ketiga, membuat isi pada halaman company profile. Caranya adalah
dengan mengedit dari halaman isi home. Semua yang ada pada halaman home
dihapus (cut) kecuali pada bagian header nya tidak di hapus (cut). Kemudian
dimasukkan gambar yang bertuliskan company profile dengan cara yang sama untuk
memasukkan image. Selanjutnya diketik isinya mengenai profil PT SWEET TEA
yang meliputi pendirinya, tahun didirikannya, filosofi perusahaan, dan kantor pusat.
Setelah semuanya selesai, di save as dengan nama file company profile dalam bentuk
html pada folder yang sama.

Langkah keempat, membuat isi pada halaman product. Caranya adalah dengan
mengedit dari halaman isi company profile. Semua yang ada pada halaman company
profile dihapus (cut) kecuali pada bagian header nya tidak di hapus (cut). Kemudian
dimasukkan gambar glitter word, gambar kemasan product, dan gambar produk
dengan cara yang sama untuk memasukkan image. Selanjutnya diketik penjelasan
singkat mengenai produk the celup buah yang diproduksi oleh PT SWEET TEA.
Kemudian ditambahkan video the dengan cara pilih insert, media, flv (video yang
dimasukkan harus dalam bentuk flv dan disimpan pada folder yang sama). Setelah
semuanya selesai, di save as dengan nama file product dalam bentuk html pada folder
yang sama.

Langkah kelima, membuat isi pada halaman marketing. Caranya adalah

dengan mengedit dari halaman isi product. Semua yang ada pada halaman product
dihapus (cut) kecuali pada bagian header nya tidak di hapus (cut). Kemudian diketik
isinya yang meliputi perencanaan strategi, pengendalian manajemen, pengendalian
operasional, pengolahan transaksi.

Selanjutnya, membuat isi pada sub halaman marketing perencanaan strategi.

Dimasukkan gambar yang menyatakan marketing pada bagian bawah header dan pada
bagian bawah halaman. Cara memasukkan imagenya adalah sama. Kemudian
ditambahkan tabel yang terdiri dari 1 baris dan 4 kolom. Cara menambahkan tabel nya
adalah sama. Kemudian setiap kolom pada tabel di isi dengan perencanaan strategi,
pengendalian manajemen, pengendalian operasional, pengolahan transaksi. Kemudian
dibawah table di ketik penjelasan mengenaia perencanaan strategis yang meliputi dua
hal, yaitu permintaan pasar dan trend pasar. Setelah semua selesai, di save as dengan
nama link marketing dalam bentuk html pada folder yang sama.

Selanjutnya, membuat isi pada sub halaman marketing pengendalian

manajemen. Caranya adalah dengan melakukan edit pada halaman perencanaan
strategi untuk penjelasan yang mengenai perencanaan strategi dihapus semua
kemudian digantikan dengan penjelasan mengenai pengendalian manajemen yang
meliputi data pelanggan dan pesaing dan penetapan harga produk. Setelah semua
selesai, di save as dengan nama link marketing 2 dalam bentuk html pada folder yang
sama.

Selanjutnya, membuat isi pada sub halaman marketing pengendalian

operasional. Caranya adalah dengan melakukan edit pada halaman pengendalian
manajemen untuk penjelasan yang mengenai pengendalian manajemen dihapus
semua kemudian digantikan dengan penjelasan mengenai pengendalian operasional
yang meliputi status pengiriman barang dan pomosi produk. Setelah semua selesai, di
save as dengan nama link marketing 3 dalam bentuk html pada folder yang sama.
 Selanjutnya, membuat isi pada sub halaman marketing pengolahan
transaksi. Caranya adalah dengan melakukan edit pada halaman pengendalian
operasional untuk penjelasan yang mengenai pengendalian operasional dihapus
semua kemudian digantikan dengan penjelasan mengenai pengolahan transaksi yang
meliputi strategi pengiklanan dan strategi jual beli. Setelah semua selesai, di save as
dengan nama link marketing 4 dalam bentuk html pada folder yang sama.

Langkah kelima, membuat isi pada halaman contact us. Caranya adalah
dengan memasukkan gambar contact us dengan cara yang sama untuk memasukkan
image. Kemudian halamannya ditambahkan seperti kotak saran atau pun pesan dari
pengunjung website (dimana pengunjung dapat mengisi data pribadi secara singkat
dan pesan yang akan ditujukan kepada bagian tertentu di PT SWEET TEA).
Kemudian pada bagian bawah halaman dimasukkan glitter word dengan cara
melakukan paste kode html yang telah di copy sebelumnya dari glitter word. Setelah
semuanya selesai, di save as dengan nama file cu dalam bentuk html pada folder
yang sama.

Langkah selanjutnya, menghubungkan setiap halaman web dengan cara

membuat link pada setiap halaman. Cara membuat link adalah dengan memblok pada
bagian teks yang akan dilinkan, kemudian klik kanan, make link, pilih nama file dari
link an tersebut, pilih ok dan di save as dengan nama file yang sama. Pertama adalah
membuat link pada halaman opening web, yang dilinkan, antara lain home, company
profile, product, marketing, dan contact us. Link dilakukan satu persatu, setiap
membuat link langsung di simpan dengan nama yang sama. Pertama, membuat link ke
bagian home sehingga pada saat di klik home maka akan langsung dapat masuk ke
halaman home. Setelah dilinkan dengan halaman home, kemudian disimpan dengan
nama file yang sama opening web. Kemudian diteruskan dengan membuat link untuk
company profile, product, marketing, dan contact us. Setelah semuanya selesai
dilinkan, dilanjutkan dengan membuat link pada halaman home dengan cara
menghubungkan pada bagian home, company profile, product, marketing, dan contact
us. Caranya membuat link nya adalah sama, tetapi apabila telah dilinkan terlebih
dahulu maka dapat diubah link nya dengan cara memilih change link. Kemudian
dilanjutkan dengan membuat link pada halaman product dengan cara menghubungkan
pada bagian home, company profile, product, marketing, dan contact us. Dilanjutkan
dengan membuat link pada halaman marketing dengan menghubungkan pada bagian
home, company profile, product, marketing, dan contact us. Dimana bagian isi
marketing juga dilinkan pada bagian perencanaan strategi, pengendalian manajemen,
pengendalian operasional, pengolahan transaksi. Dimana setiap sub bagian marketing
juga akan di buat link yang dapat menghubungkan kepada setiap halaman yang ada
pada website PT SWEET TEA ini. Dan yang terakhir adalah membuat link pada
halaman contact us ke bagian home, company profile, product, marketing, dan contact
us. Tujuan membuat link ini adalah agar setiap halaman web dapat terhubung satu
dengan lainnya.
 BAB V
PENUTUP

5.1 Kesimpulan
Interface merupakan salah satu bagian yang terpenting dari sistem. Interface
sendiri adalah sistem yang dirancang untuk mengolah input dan output dari data.
Semua input ataupun output tersebut dirancang sedemikian rupa sehingga
menghasilkan hasil yang sederhana dan jelas, sehingga dapat dimanfaatkan langsung
ataupun diolah kembali oleh pengguna. Pada praktikum Interface ini, mahasiswa
membuat suatu tampilan interface yang berupa website suatu perusahaan. Dalam hal
ini, perusahaan kami adalah PT SWEET TEA yang memproduksi the celup buah
dalam kemasan kotak. Pembuatan website adalah dengan menggunakan software
adobe dreamweaver. Langkah pembuatan nya adalah meliputi pembuatan isi pada
masing-masing halaman web dan kemudian membuat link untuk menghubungkan isi
halaman web yang satu dengan isi halaman web lainnya. Pembuatan desain interface
sangat penting agar interface yang dibuat dapat memenuhi kebutuhan user
(pengguna).

5.2 Saran
Kami menyarankan dalam pembuatan interface, tidak hanya mementingkan
dari segi isi tetapi juga dari segi desain. Pendesainan interface dapat dibuat semenarik
mungkin agar dapat menarik perhatian user.