NAMA : AKHMAD RAMADHAN

NIM : 310117023199
MATA KULIAH : INTERAKSI MANUSIA DAN KOMPUTER (HCI)
KELAS : 76
TUGAS :
 MEMBUAT LEMBARAN KERJA TAMPILAN
 MEMBUAT JARINGAN SEMANTIK

 Membuat Lembarn Kerja Tampilan Mesin makanan dan minuman Aplikasi

1. LKT (Lembar Kerja Tampilan)

a. Lembar kerja tampilan halaman Utama / Produk

No. 1
Navigasi :
Sliding Gambar Pilih Menu “Produk
makanan” masuk ke hal
utama
Pilih Menu
“Pesan” masuk ke hal
pesan
Pilih Menu “Daftar”
masuk ke hal
Produk Pesan Daftar Masuk Profil pendaftaran
Pilih Menu “Masuk”
akan menuju ke hal
List produk Keranjang masuk
Belanja Pilih Menu “Profil” akan
meuju hal Profil
Pilih “Beli” akan masuk
Beli
ke keranjang
belanja

Keterangan
Font: cambria, 12 pt, hitam Background: putih
Sliding: gambar – gambar dari beberapa produk Makanan

Gambar 1. LKT Halaman Utama

 Halaman utama merupakan halaman awal atau halaman pertama
yang akan ditampilkan saat pertama kali mengakses website Makanan.
Halaman utama digunakan sebagia halaman produk karena langsung
menampilkan produk – produk terbaru dari Makanan. Pada halaman
ini terdapat 5 menu, yaitu menu produk menampilkan produk – produk,
menu pesan digunakan untuk para member atau pelanggan yang ingin
memesan produk yang diinginkan, menu daftar digunakan untuk
mendaftar menjadi member dari website Makanan sehingga bisa
melakukan jual secara online, menu masuk digunakan untuk masuk
atau sign in sebagai member tapi hanya bisa dilakukan setelah mendaftar
sebagai member, dan menu profil berisi profil Makanan yaitu visi misi,
bidang usaha secara umum dan lokasi serta contact person.
b. Lembar kerja tampilan halaman Pendaftaran

No. 2 c.
d. Navigasi :
Produk Pesan Daftar Masuk Profil
e. Pilih Menu “Produk ” masuk
f. Keranjang belanja
ke hal utama
Daftar Member Pilih Menu “Pesan”
g.
Nama Lengkap :
masuk ke hal pesan
Alamat :
No Telp
h. : Pilih Menu “Daftar” masuk
Scan ktpi. : browse ke hal
pendaftaran
| j. Pilih Menu “Masuk” akan
|
| k. menuju ke hal masuk
| Pilih Menu “Profil” akan
dst meuju hal Profil
daftar Pilih “browse” akan muncul
kotak dialog untuk
mengambil file foto
Pilih “Daftar” akan masuk
hal Member
Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 2. LKT Halaman Pendaftaran

 Halaman daftar mewajibkan pelanggan yang ingin menjadi member
mengisi identitas dari pelanggan tsb baik data diri untuk
menumbuhkan rasa kepercayaan satu sama lain, maupun data bank
yang akan digunakan untuk melakukan pembayaran atau transaksi
melalui e-banking. Scan ktp diisi dengan melakukan upload foto ktp
asli. Keranjang belanja digunakan untuk melihat barang apa saja
yang dibeli dengan mengklik beli pada tombol yang ada di produk.
Jika pilih menu daftar maka menu tersebut akan membesar sehingga
mudah diketahui halaman yang sedang diakses.
c. Lembar kerja tampilan halaman Login Member

No. 3
d. Navigasi :
Produk Pesan Daftar Masuk Profil
e. Mengisi form sesuai
dengan username dan
f.
Username : Keranjang password lalu pilih
g. “Masuk”
Belanja
h.
Password: lalu akan menuju ke hal
i. Member. Jika usernamel
masuk atau password salaha
j. maka akan tetap berada
k. di hal Login
jika Anda belum menjasi member silakkan daftar Member.
l.
terlebih dahulu Pilih “Masuk” akan
m masuk hal Member
daftar . Pilih “Daftar” akan masuk
ke hal Daftar

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 3. LKT Halaman Login Member

Halaman Masuk digunakan sebagai halaman login member, untuk

bisa masuk maka harus mengisi form email dan password yang
dimasukkan atau diisi saat mengisi form pendaftaran.
 d. Lembar kerja tampilan halaman Data Diri

No. 4
Navigasi :
Data Diri
Logout Jika pilih “simpan”
Nama : Alamat : No Telp:
maka data diri yang
|
diubah akan
Ubah Data
|
Jika pilih “batal” akan
| dst membatalkan data yang
ubah menjadi data awal
Transaksi Jika pilih “logout” maka
akan masuk ke halaman
utama dari website
Pesanan
simpan batal

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 4. LKT Halaman Data Diri

e. Lembar kerja tampilan halaman Transaksi

No. 5
Navigasi :
Transaksi
Logout Jika pilih “bayar” maka
akan masuk ke hal
login bank
Ubah Data Jika pilih “batal” akan
membatalkan data
transaksi
Jika pilih mobile atau
Transaksi
transfer maka akan
tetap berada di
halaman transaksi dan
Pesanan
transfer mobile e-banking batal tombol e- banking
tidak berfungsi

Keterangan
Font: cambria, 12 pt, hitam Background: putih
Halaman ini berisi tampilan transaksi yang sudah dilakukan
oleh member. Walaupun sudah masuk ke halaman transaksi, \

Gambar 5. LKT Halaman Transaksi

 Pada halaman ini member masih bisa berbelanja kembali atau
bisa juga menghapus produk makanan yang sudah masuk ke
keranjang belanja. Pembayaran dilakukan dengan memilih button
bayar yang sudah disesuaikan dengan data bank yang sudah
diisikan saat mendaftar. Jika maka editing kanjang belanja yang
ada akan tetap dan tidak berubah. Halaman ini akan muncul jika
menu transaksi yang ada di sebelah kiri dimana tampilan
berbeda dengan tampilan awal dimana menu terletak di
dibawah sliding gambar. Hal ini dilakukan agar bisa
membedakan halaman member dengan halaman sebelum masuk
sebagai member.
f. Lembar kerja tampilan halaman Pesanan

No. 6
Navigasi :
Pesanan
Logout Jika pilih “bayar” maka
Motif: browse
akan masuk ke hal login
Warna : browse
bank
Data Diri Jika status “tolak” maka
status button bayar tidak bisa
terima
digunakan atau tidak ada
Transaksi

Pesanan
bayar

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 6. LKT Halaman Pesanan

 Halaman Pesanan digunakan untuk transaksi order dimana bisa
menginput pesanan dengan mengupload foto atau gambar motif
dan warna dengan file berformat image.

g. Lembar kerja tampilan halaman Login e-banking

No. 7
Navigasi :
1. Jika user, password
User : sesuai dengan saat
Password pertama registrasi
:
e-banking dan validation
Validation : sesuai apa yang
ditampilkan, lalu pilih
Indonesia English “Enter” maka akan masuk
ke hal utama e-banking

Enter

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 7 LKT Halaman Login e-banking

Halaman Login untuk masuk ke halaman transfer uang melalui e-

banking. Sebelum bisa mengakses e-banking harus mendaftar dan
registrasi terlebih dahulu. Tampilan halaman ini berbeda setiap
bank. E-banking yang digunakan sebagai contoh lkt adalah e-
banking pada bank BRI melalui alamat bri.co.id. pada halaman ini
juga bisa melakukan pilihan bahasa yaitu bahasa Indonesia dan
bahasa Inggris, sehingga bagi nasabah bank yang biasa
menggunakan bahasa Inggris merasa mudah dalam melakukan
pengaksesan e-banking begitu juga bagi nasabah yang biasa
menggunakan bahasa Indonesia.
 h. Lembar kerja tampilan halaman Transfer

No. 8
Navigasi :
Menu Jika pilih Menu “Mutasi
Rekening” maka akan
Saldo Mutasi masuk ke hal Transfer
Data Transfer Dana No Rekening:
Rekening Jika pilih “Hapus” maka
Untuk membayar semua form akan kosong
Nama Tagihan : Jika pilih “Batal”
akan kembali ke hal
utama e- banking
Klik disini untuk menyimpan no Jika pilih “kirim” artinya
telpon/selular ke daftar anda bank mengirimkan uang
tranfser

Hapus Batal Kirim

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 8. LKT Halaman Transfer

Halaman Transfer dana berisi form yang harus diisi pemilik akun e-
banking untuk mentransfer uang ke rekening Batik Nafa. Setelah
selesai mengisi diharuskan pilih button kirim untuk mengirim uang
tsb, jika pilih hapus maka data yang sudah diinputkan ke form
akan hilang. Jika pilih batal maka akan masuk ke halaman awal
saat pertama kali sudah login e-banking. Setelah terkirim maka
status transfer akan menjadi berhasil seperti tampak pada LKT di
bawah ini.
 i. Lembar kerja tampilan halaman Konfirmasi Transfer

No. 9
Navigasi :
Menu
1. Jika transaksi berhasil
P. Tagihan Status terakhir maka
status pada status
Pembelian berhasil
transfer adalah “berhasil”
T. Terjadwal

D. Pembayaran

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 9 LKT Halaman Konfirmasi Transfer

j. Lembar kerja tampilan halaman Login Admin

No. 10
Navigasi :
Mengisi form sesuai dengan
data Admin lalu pilih
“Masuk” lalu akan menuju
ke hal Admin. Jika username
Username : atau
password salaha maka akan
tetap berada di hal Login
Password :
Admin.
Masuk Untuk bisa masuk ke hal
harus
mengetahui letak filenya
karena hal ini bersifat
rahasia
hanya diketahui oleh pihak
Batik Nafa

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 10. LKT Halaman Login Admin

 Halaman ini digunakan untuk login admin dimana halaman ini
tidak bisa diakses sembarang orang karena tidak ada link untuk
bisa menemukan halaman ini. Halaman ini hanya diakses dengan
mengetikkan nama file login admin. Hal ini dimaksudkan agar
tidak ada yang mengakses kecuali pihak Makanan.

k. Lembar kerja tampilan halaman Admin

No. 11
Navigasi :
Member Data Produk logout Jika pilih “Logout” akan
masuk ke hal utama
Produk Ket Jika plih edit maka akan
Edit ||hapus masuk ke hal edit yang
Pesanan juga masuk ke hal input
data, tetapi pada edit
terdapat form yang sudh
Transaksi diisi data
Input Data Jika pilih “Hapus”
Pengiriman maka tetap berada di hal
ini tapi data akan langsung
terhapus
Cek Bayar

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 11. LKT Halaman Admin

Halaman ini berisi tabel - tabel produk, transaksi, pesanan,

member, didalamnya terdapat pilihan edit, hapus , dan input
data. Edit digunakan untuk mengedit atau mengubah data
produk terutama karena beberapa data tidak bisa diedit seperti
data member yang hanya bisa diubah oleh member tsb.
 l. Lembar kerja tampilan halaman Input Data Produk
No. 12
Navigasi :
Input Data Produk Nama Produk:
Member logout Jika pilih
. “Simpan” mak data
Produk . tersebut kan tersimpan
baik karena data baru
. tetapi juga data yang baru
Pesanan
dst diinputkan
Jika pilih “Batal” maka
Transaksi semua form akan kosong
Tampilan pada halaman
input sama dengan
Pengiriman halaman edit tetapi form
sudah diisi data yang akan
Cek Bayar diubah
Simpan Batal

Keterangan
Font: cambria, 12 pt pt, hitam Background: putih

Gambar 12. LKT Halaman Input Data Produk

Pada halaman ini, edit dan tambah sebenarnya punya konsep
yang sama tetapi pada halaman edit form sudah terisi sedangkan
menu tambah form masih kosong dan proses penyimpanannya
juga berbeda, dimana menu tambah akan menuju ke simpan
tetapi edit akan masuk ke edit. Jika logout maka akan menuju
halaman utama atau halaman produk. Jika pilih batal maka akan
mereset form – form yang sudah diisi atau form – form tersebut
akan kosong.
 m. Lembar kerja tampilan halaman Input Data Pesanan
No. 13
Navigasi :
Member Konfirmasi Pesanan Jika pilih “Terima” maka data
Ket status
Produk Terima || Tolak pesanan pada data
pesanan adalah terima
Pesanan Jika pilih “Tolak” maka status
pada data pesanan adalah
“tolak”
Transaksi

Pengiriman

Cek Bayar

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 13. LKT Halaman Input Data Pesanan

Halaman ini khusus untuk melakukan konfirmasi pesanan dari

Rumah makan kepada member atau pelanggan. Konfirmasi
dilakukan dengan memilih terima yang berarti transaksi akan
dilanjutkan atau tolak yang berarti pesanan tidak terjadi hanya
berhenti sampai disitu saja. Setelah itu Makanan akan
mengkonfirmasi pembayarannya jika konfirmasi diterima.
Konfirmasi kesanggupan dapat dilihat oleh member dengan
login member terlebih dahulu lalu masuk ke menu pesanan. Jika
pesanan diterima oleh Makanan maka akan mengarah ke
pembayaran.
 n. Lembar kerja tampilan halaman Profil
No. 14 o.
Navigasi :
Produk Pesan Daftar Masuk Profil
Jika pilih
“Simpan” mak data
Profil Batik Nafa Keranjang tersebut kan tersimpan
baik karena data baru
Belanja tetapi juga data yang
baru
diinputkan
Jika pilih “Batal” maka
semua form akan kosong

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 14. LKT Halaman Profil

Halaman Profil hanya berisi profil perusahaan di mana terdapat
gambaran umum, bidang usaha, lokasi secara fisik baik toko –
toko Makanan, visi, dan misi yan ingin dicapai rumah makan
online ke depan. Halaman ini bertujuan untuk menumbuhkan rasa
percaya satu sama lain karena alamat rumah makan bisa
ditelusuri. Selain itu, bisa mengetahui informasi mengenai rumah
makan secara detail termasuk contact person yang bisa
dihubungi yaitu nomor telp, pin BB, FB, twitter, dll.
 o. Lembar kerja tampilan halaman Keranjang Belanja

No. 15
Produk Pesan Daftar Masuk Profil Navigasi :
Jika pilih “bayar” maka
Keranjang belanja akan masuk ke login
member
Jika pilih “batal” akan
membatalkan data
transaksi dan
mengkosongka n
semua keranjang
belanja

Batal Bayar

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 15. LKT Halaman Keranjang Belanja

p. Lembar kerja tampilan Mobile Banking berbasis Android

No. 16
Navigasi :
1. Jika klik “Login”
maka akan masuk ke
Mobile Banking
tampilan login ke bank

LOGIN

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 16. LKT Mobile Banking berbasis Android

 q. Lembar kerja tampilan Login Mobile Banking
No. 17
Navigasi :
berbasisAndroid
Jika pilih “Ok” maka
LOGIN akan masuk ke
tampilan awal mobile
banking
Jika pilih “cancel” akan
Password
kembali ke tampilan
awal untuk login

Cancel Ok

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 17. LKT Login Mobile Banking

r. Lembar kerja tampilan Menu Mobile Banking

No. 18
Navigasi :
logout
Jika pilih “logout” maka
favoritku akan kembali ke login
Jika pilih “fund
Account information transfer”
akan masuk ke
Fund transfer halaman transfer

purchase

payment

admin

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 18. LKT Menu Mobile Banking

 s. Lembar kerja tampilan Transfer Mobile Banking
No. 19
Navigasi :
Pilih daftar bank :
1.Jika pilih “send” akan
mengirim uang ke
rekening penerima
Nama bank penerima :

No Rekening :

Send

Keterangan
Font: cambria, 12 pt, hitam Background: putih

Gambar 19. LKT Transfer Mobile Banking

t. Lembar kerja tampilan Transfer SMS Banking

No. 20
Navigasi :
Transfer antar rekening BRI
1.Ketikkan tulisan
dengan format tebal
(bold) pada handphone
Ketik TRANSFER [spasi] BRI [Nomor Rekening Tujuan] [spasi] sebagai sms banking
[Nominal] [spasi] [PIN SMS BRI]

kirim ke 3300

Keterangan
Font: cambria, 12 pt, hitam Background:
Gambar 5.41putih
LKT Transfer SMS Banking

Gambar 20. LKT Transfer SMS Banking

  MEMBUAT JARINGAN SEMANTIK

1. Buatlah jaringan semantik dengan kata awal NAMA sendiri dan NIM
2. Buatlah sebuah skrip atau cerita mengenai kejadian pada saat Ujian semester
di STMIK BANJARBARU Jurusan TI/SI

JAWABAN