60
3.2.2 Analisis Kebutuhan
Analisis kebutuhan digunakan untuk mengidentifikasi terhadap kebutuhan sistem baru. Kebutuhan sistem meliputi analisis kebutuhan
pengguna, kebutuhan admin, dan analisis kebutuhan Aplikasi Pengajaran Bahasa Isyarat Berbasis Web. Sistem akan menampilkan pelajaran kepada
pengguna dengan memproses data yang telah tersimpan dalam basis data.
3.2.2.1 Kebutuhan Pengguna
Kebutuhan pengguna meliputi apa saja yang dibutuhkan oleh pengguna pada Aplikasi Pengajaran Bahasa Isyarat Berbasis Web ini berupa :
1 Tampilan materi-materi bahasa isyarat 2 Tampilan gambar dan video tiap materi bahasa isyarat
3 Tampilan agenda-agenda
3.2.2.2 Kebutuhan Administrator
Kebutuhan admin pada sistem ini meliputi apa yang dibutuhkan oleh admin berupa :
1 Mengolah data-data bahasa isyarat 2 Mengupdate, mengedit, dan menghapus gambar dan video bahasa
isyarat 3 Menambah, mengedit, dan menghapus kategori bahasa isyarat
4 Mengupdate, mengedit, dan menghapus data agenda 5 Menambah, mengedit, dan menghapus data admin
61
3.2.2.3 Use Case Diagram
TAMBAH DATA ISYARAT
EDIT DATA ISYARAT
HAPUS DATA ISYARAT
LIHAT DATA ISYARAT
ADMIN PENGGUNA
LOGIN
Kamus Bahasa Isyarat
LOGOUT CARI DATA
ISYARAT
Gambar 3.1 Diagram Use Case Kamus Bahasa Isyarat
TAMBAH KATEGORI
EDIT KATEGORI HAPUS
KATEGORI LIHAT KATEGORI
ADMIN PENGGUNA
LOGIN
Kategori Bahasa Isyarat
LOGOUT CARI KATEGORI
Gambar 3.2 Diagram Use Case Kategori Bahasa Isyarat
62
TAMBAH GAMBAR
EDIT GAMBAR
HAPUS GAMBAR LIHAT GAMBAR
ADMIN PENGGUNA
LOGIN
Gambar Bahasa Isyarat
LOGOUT
Gambar 3.3 Diagram Use Case Gambar Bahasa Isyarat
TAMBAH VIDEO
EDIT VIDEO
HAPUS VIDEO LIHAT VIDEO
ADMIN PENGGUNA
LOGIN
Video Bahasa Isyarat
LOGOUT
Gambar 3.4 Diagram Use Case Video Bahasa Isyarat
63
TAMBAH AGENDA
EDIT AGENDA
HAPUS AGENDA LIHAT AGENDA
ADMIN PENGGUNA
LOGIN
Agenda
LOGOUT
Gambar 3.5 Diagram Use Case Agenda
TAMBAH DATA ADMIN
EDIT DATA ADMIN
HAPUS DATA ADMIN
LIHAT DATA ADMIN
ADMIN LOGIN
Admin
LOGOUT CARI DATA
ADMIN
Gambar 3.6 Diagram Use Case Admin
64
3.2.3 Arsitektur Sistem
Sistem ini dibangun untuk memberikan informasi tentang materi-materi bahasa isyarat melalui media internet. Aplikasi pengajaran bahasa isyarat
berbasis web ini dikelola oleh admin. Data bahasa isyarat divisualisasikan dalam bentuk foto dan video, sehingga dapat memudahkan pengguna
untuk belajar dan memahami bahasa isyarat secara detail. Bentuk umum
arsitektur sistem dapat dilihat pada gambar 3.7
Gambar 3.7 Arsitektur Sistem
65
3.2.4 Spesifikasi Sistem
Spesifikasi kebutuhan dalam pembuatan Aplikasi Pengajaran Bahasa Isyarat Berbasis Web ini adalah sebagai berikut :
1. Pengguna, sistem bisa membantu untuk mendapatkan pelajaran bahasa isyarat berupa gambar, video dan keterangan, serta mendapatkan
informasi berupa agenda. 2. Admin, dapat mengambil materi secara manual tentang bahasa isyarat,
dapat melakukan proses login dan logout, serta dapat mengolah data bahasa isyarat, kategori, agenda, dan data admin.
Tampilan foto dan video digunakan di mana setiap materi bahasa isyarat dapat menampilkan pelajaran bahasa isyarat tersebut. Untuk
pengembangan sistem lebih lanjut, maka diperlukan perangkat lunak sebagai pendukungnya. Pemanfaatan gambar dan video untuk aplikasi
pengajaran bahasa isyarat berbasis web ini memerlukan perangkat lunak untuk pembuatan basis data dengan menggunakan Oracle dan untuk
pembuatan tampilan juga editor program dengan menggunakan bahasa pemrograman NetBeans.
3.2.5 Pemodelan Proses dengan Diagram Aliran Data
3.2.5.1 Diagram Konteks
ADMIN PENGGUNA
DATA BAHASA ISYARAT DAN AGENDA
DATA BAHASA ISYARAT DAN AGENDA
INFORMASI BAHASA ISYARAT
INFORMASI VALIDASI LOGIN, BAHASA
ISYARAT, DAN AGENDA APLIKASI PENGAJARAN
BAHASA ISYARAT BERBASIS WEB
Gambar 3.8 Diagram Konteks
66
3.2.5.2 Diagram Berjenjang
APLIKASI PENGAJARAN BAHASA ISYARAT BERBASIS
WEB
1 KAMUS BAHASA
ISYARAT 2
KATEGORI BAHASA ISYARAT
3 AGENDA
4 ADMIN
1.1 TAMBAH DATA
BAHASA ISYARAT 1.2
EDIT DATA BAHASA ISYARAT
1.3 HAPUS DATA
BAHASA ISYARAT 1.4
LIHAT DATA BAHASA ISYARAT
1.5 CARI DATA
BAHASA ISYARAT 2.1
TAMBAH KATEGORI BAHASA ISYARAT
2.2 EDIT KATEGORI
BAHASA ISYARAT 2.3
HAPUS KATEGORI BAHASA ISYARAT
2.4 LIHAT KATEGORI
BAHASA ISYARAT 2.5
CARI KATEGORI BAHASA ISYARAT
4.1 TAMBAH DATA
ADMIN 4.2
EDIT DATA ADMIN
4.3 HAPUS DATA
ADMIN 4.4
LIHAT DATA ADMIN
4.5 CARI DATA
ADMIN 3.1
TAMBAH DATA AGENDA
3.2 EDIT DATA
AGENDA 3.3
HAPUS DATA AGENDA
3.4 LIHAT DATA
AGENDA
Gambar 3.9 Diagram Berjenjang 1
67
1 KAMUS BAHASA
ISYARAT
1.1 GAMBAR BAHASA
ISYARAT 1.2
VIDEO BAHASA ISYARAT
1.11 TAMBAH DATA
GAMBAR BAHASA ISYARAT
1.12 EDITGANTI DATA
GAMBAR BAHASA ISYARAT
1.13 HAPUS DATA
GAMBAR BAHASA ISYARAT
1.14 LIHAT DATA
GAMBAR BAHASA ISYARAT
1.21 TAMBAH DATA
VIDEO BAHASA ISYARAT
1.22 EDITGANTI DATA
VIDEO BAHASA ISYARAT
1.23 HAPUS DATA
VIDEO BAHASA ISYARAT
1.24 LIHAT DATA
VIDEO BAHASA ISYARAT
Gambar 3.10 Diagram Berjenjang 2
3.2.6 Pemodelan Data
DFD Data Flow Diagram adalah model untuk menggambarkan asal dan tujuan penyimpanan data, proses yang akan menghasilkan data, dan
interaksi antar data yang tersimpan dalam proses tersebut Kadir, 1999. Proses perancangan aliran data menggunakan DFD yang terbagi menjadi
tiga level, yaitu DFD level 0, DFD level 1, dan DFD level 2.
3.2.6.1 Overview Diagram DFD Level 1
DFD level 1 merupakan representasi dari data pada DFD level 0 yang sudah dipartisi untuk memberikan penjelasan yang lebih detail. Pada
aplikasi pengajaran bahasa isyarat ini terdiri dari lima proses, yaitu proses kelola kamus bahasa isyarat, proses kelola kategori bahasa isyarat,
proses kelola gambar bahasa isyarat, proses video bahasa isyarat, dan proses kelola agenda dapat dilihat pada gambar 3.11
68
Admin
Pengguna Data kamus
Data kamus Data kamus
Data kamus Data kategori
Data kategori Data kategori
Data kategori
Data gambar Data gambar
Data gambar Data gambar
Data video Data video
Data video Data video
Data agenda Data agenda
Data agenda Data agenda
Data agenda Data agenda
Data agenda Data agenda
Data video Data video
Data video Data video
Data gambar Data gambar
Data gambar Data gambar
Data kategori Data kategori
Data kamus Data kamus
Data kamus Data kamus
Data kategori
Kamus
Kategori
Gambar
Video
Agenda
Data admin Data admin
Admin
Data admin Data admin
Data kategori 1
KAMUS BAHASA ISYARAT
2 KATEGORI BAHASA
ISYARAT
3 AGENDA
4 ADMIN
1.2 VIDEO
1.1 GAMBAR
F
F
Gambar 3.11 Overview Diagram DFD Level 1
69
3.2.6.2 DFD Level 2 Proses 1 Kamus Bahasa Isyarat
DFD level 2 proses 1 merupakan penjabaran yang lebih detail dari proses kelola kamus bahasa isyarat. Pada proses ini terdiri dari empat proses,
yaitu proses tambah data bahasa isyarat, proses ubah data bahasa isyarat, proses hapus data bahasa isyarat, dan proses lihat data bahasa isyarat.
Dalam proses ini terdapat satu database yaitu database kamus bahasa isyarat, yang bisa dilihat pada gambar 3.12
Admin
Pengguna Data Bahasa Isyarat
Konfirmasi tambah data bahasa isyarat
Konfirmasi tambah data bahasa isyarat
Data bahasa isyarat
Data bahasa isyarat Data bahasa isyarat
Konfirmasi edit data bahasa isyarat
Konfirmasi edit data bahasa isyarat
Konfirmasi hapus data bahasa isyarat
Konfirmasi hapus data bahasa isyarat
Data bahasa isyarat Data bahasa isyarat
Data bahasa isyarat
Data bahasa isyarat Data bahasa isyarat
Data bahasa isyarat Data bahasa isyarat
Informasi bahasa isyarat Data bahasa isyarat
Informasi bahasa isyarat Kamus Bahasa
Isyarat 1.1
TAMBAH DATA BAHASA ISYARAT
1.2 EDIT DATA
BAHASA ISYARAT
1.3 HAPUS DATA
BAHASA ISYARAT
1.4 LIHAT DATA
BAHASA ISYARAT
Gambar 3.12 DFD Level 2 Proses 2 Kamus Bahasa Isyarat
70
3.2.6.3 DFD Level 2 Proses 2 Kategori Bahasa Isyarat
DFD level 2 proses 2 merupakan penjabaran yang lebih detail dari proses kelola kategori bahasa isyarat. Pada proses ini terdiri dari empat proses,
yaitu proses tambah data kategori bahasa isyarat, proses ubah data kategori bahasa isyarat, proses hapus data kategori bahasa isyarat, dan
proses lihat data kategori bahasa isyarat. Dalam proses ini terdapat satu database yaitu database kategori bahasa isyarat, yang bisa dilihat pada
gambar 3.13
Admin
Pengguna Data Kategori Bahasa Isyarat
Konfirmasi tambah data kategori bahasa isyarat
Konfirmasi tambah data kategori bahasa isyarat
Data kategori bahasa isyarat
Data kategori bahasa isyarat Data kategori bahasa isyarat
Konfirmasi edit data kategori bahasa isyarat
Konfirmasi edit data kategori bahasa isyarat
Konfirmasi hapus data kategori bahasa isyarat
Konfirmasi hapus data kategori bahasa isyarat
Data kategori bahasa isyarat Data kategori bahasa isyarat
Data kategori bahasa isyarat
Data kategori bahasa isyarat Data kategori bahasa isyarat
Data kategori bahasa isyarat Data kategori bahasa isyarat
Informasi kategori bahasa isyarat Data kategori bahasa isyarat
Informasi kategori bahasa isyarat Kategori Bahasa
Isyarat 2.1
TAMBAH KATEGORI BAHASA ISYARAT
2.2 EDIT KATEGORI
BAHASA ISYARAT
2.3 HAPUS KATEGORI
BAHASA ISYARAT
2.4 LIHAT KATEGORI
BAHASA ISYARAT
Gambar 3.13 DFD Level 2 Proses 3 Kategori Bahasa Isyarat
71
3.2.6.4 DFD Level 2 Proses 1 Gambar
DFD level 2 proses 1 Gambar merupakan penjabaran yang lebih detail dari proses kelola gambar bahasa isyarat. Pada proses ini terdiri dari
empat proses, yaitu proses tambah data gambar bahasa isyarat, proses ubah data gambar bahasa isyarat, proses hapus data gambar bahasa
isyarat, dan proses lihat data gambar bahasa isyarat. Dalam proses ini terdapat satu database yaitu database gambar bahasa isyarat, yang bisa
dilihat pada gambar 3.14
Admin
Pengguna Data gambar
Konfirmasi tambah data gambar
Konfirmasi tambah data gambar
Data gambar
Data gambar Data gambar
Konfirmasi edit data gambar Konfirmasi edit data
gambar Konfirmasi hapus data
gambar Konfirmasi hapus data
gambar
Data gambar Data gambar
Data gambar
Data gambar Data gambar
Data gambar Data gambar
Informasi gambar Data gambar
Informasi gambar 1.11
TAMBAH DATA GAMBAR BAHASA
ISYARAT
1.12 EDITGANTI DATA
GAMBAR BAHASA ISYARAT
1.13 HAPUS DATA
GAMBAR BAHASA ISYARAT
1.14 LIHAT DATA
GAMBAR BAHASA ISYARAT
Gambar F
Gambar 3.14 DFD Level 2 Proses 1 Gambar Bahasa Isyarat
72
3.2.6.5 DFD Level 2 Proses 1 Video
DFD level 2 proses 1 Video merupakan penjabaran yang lebih detail dari proses kelola video bahasa isyarat. Pada proses ini terdiri dari empat
proses, yaitu proses tambah data video bahasa isyarat, proses ubah data video bahasa isyarat, proses hapus data video bahasa isyarat, dan proses
lihat data video bahasa isyarat. Dalam proses ini terdapat satu database yaitu database video bahasa isyarat, yang bisa dilihat pada gambar 3.15
Admin
Pengguna Data video
Konfirmasi tambah data video Konfirmasi tambah data video
Data video
Data video Data video
Konfirmasi edit data video Konfirmasi edit data
video Konfirmasi hapus data
video Konfirmasi hapus data
video
Data video Data video
Data video
Data video Data video
Data video Data video
Informasi video Data video
Informasi video 1.21
TAMBAH DATA VIDEO BAHASA
ISYARAT
1.22 EDITGANTI DATA
VIDEO BAHASA ISYARAT
1.23 HAPUS DATA
VIDEO BAHASA ISYARAT
1.24 LIHAT DATA
VIDEO BAHASA ISYARAT
Video F
Gambar 3.15 DFD Level 2 Proses 1 Video Bahasa Isyarat
73
3.2.6.6 DFD Level 2 Proses 3 Agenda
DFD level 2 proses 3 merupakan penjabaran yang lebih detail dari proses kelola agenda. Pada proses ini terdiri dari empat proses, yaitu proses
tambah data agenda, proses ubah data agenda, proses hapus data agenda, dan proses lihat data agenda. Dalam proses ini terdapat satu database
yaitu database agenda, yang bisa dilihat pada gambar 3.16
Admin
Pengguna Data agenda
Konfirmasi tambah data agenda
Konfirmasi tambah data agenda
Data agenda
Data agenda Data agenda
Konfirmasi edit data agenda Konfirmasi edit data
agenda Konfirmasi hapus data
agenda Konfirmasi hapus data
agenda
Data agenda Data agenda
Data agenda
Data agenda Data agenda
Data agenda Data agenda
Informasi agenda Data agenda
Informasi agenda Agenda
3.1 TAMBAH DATA
AGENDA
3.2 EDIT DATA
AGENDA
3.3 HAPUS DATA
AGENDA
3.4 LIHAT DATA
AGENDA
Gambar 3.16 DFD Level 2 Proses 3 Agenda
74
3.2.6.7 DFD Level 2 Proses 4 Admin
DFD level 2 proses 4 merupakan penjabaran yang lebih detail dari proses kelola admin. Pada proses ini terdiri dari empat proses, yaitu proses
tambah data admin, proses ubah data admin, proses hapus data admin, dan proses lihat data admin. Dalam proses ini terdapat satu database
yaitu database agenda, yang bisa dilihat pada gambar 3.17
Admin
Pengguna Data admin
Konfirmasi tambah data admin Konfirmasi tambah data admin
Data admin
Data admin Data admin
Konfirmasi edit data admin Konfirmasi edit data
admin Konfirmasi hapus data
admin Konfirmasi hapus data
admin
Data admin Data admin
Data admin
Data admin Data admin
Data admin Data admin
Informasi admin Data admin
Informasi admin Admin
4.1 TAMBAH DATA
ADMIN
4.2 EDIT DATA
ADMIN
4.4 LIHAT DATA
ADMIN 4.3
HAPUS DATA ADMIN
Gambar 3.17 DFD Level 2 Proses 4 Admin
75
3.3 Perancangan Sistem
3.3.1 Perancangan Basis Data
Perancangan basis data pada sistem ini meliputi pembuatan tabel-tabel basis data. Perancangan sistem ini menggunakan teknik ERD sebagai dasar
pembuatan tabel-tabel basis data.
3.3.1.1 Perancangan Konseptual Basis Data ERD
Dalam sistem yang dibuat terdapat tabel kamus bahasa isyarat, tabel kategori bahasa isyarat, tabel agenda, dan tabel admin. Perancangan
ERD dalam system ini dapat dilihat pada gambar 3.18
Kategori Bahasa Isyarat
punya Kamus Bahasa
Isyarat
Agenda Administrator
namakategori keterangankategori
idkamus nama
idagenda namaagenda
keteranganagenda idadmin
username password
idkategori
1 N
keterangan
Gambar 3.18 ERD
Adapun gambar, nama gambar, video, dan nama video tidak disimpan dalam database namun disimpan dalam pathlink di storage komputer
harddisk. PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
76
3.3.1.2 Perancangan Logikal Basis Data
Pemakaian istilah “model keterhubungan – entitas” dalam Bahasa Indonesia dapat digunakan sebagai padanan arti istilah asing : Entity
Relationship Model E-R Model. Akan tetapi, istilah model Entity Relationship telah demikian umum digunakan dalam berbagai
pembahasan tentang analisa perancangan basis data. Pada model Entity Relationship, data yang ada di dunia nyata diterjemahkan dengan
memanfaatkan sejumlah perangkat konseptual menjadi sebuah diagram data yang umum disebut sebagai diagram E-R. Sebelum membahas lebih
jauh tentang diagram E-R tersebut dapat digambarkan, maka yang lebih dulu harus diketahui adalah komponen pembentuk model E-R. Sesuai
namanya, ada dua komponen utama pembentuk model E-R, yaitu Entitas Entity dan Relasi Relation. Kedua komponen ini dideskripsikan lebih
jauh melalui sejumlah atribut. Yang bisa dilihat pada gambar di bawah ini :
Gambar 3.19 Perancangan Logikal Basis Data
77
Adapun gambar, nama gambar, video, dan nama video tidak disimpan dalam database namun disimpan dalam pathlink di storage komputer
harddisk.
3.3.1.3 Perancangan Fisikal Basis Data
1. Tabel Admin
Tabel admin merupakan tabel basis data yang digunakan untuk menyimpan data admin seperti username dan password admin yang
digunakan untuk keperluan login pada halaman utama sistem.
Tabel 3.3 Tabel Admin Field
Tipe Keterangan
Idadmin NUMBER
Id admin Username
VARCHAR230 Username
Password VARCHAR230
Password
2. Tabel Kategori Bahasa Isyarat Tabel kategori bahasa isyarat merupakan tabel basis data yang
digunakan untuk menyimpan data kategori bahasa isyarat yang bertujuan untuk mengelola kategori bahasa isyarat yang ada pada
halaman kategori bahasa isyarat. Tabel 3.4 Tabel Kategori Bahasa Isyarat
Field Tipe
Keterangan
Idkategori NUMBER
Id kategori namakategori
VARCHAR2100 Id nama kategori
Keterangan VARCHAR22000
Keterangan kategori PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
78
3. Tabel Kamus Bahasa Isyarat Tabel kamus bahasa isyarat merupakan tabel basis data yang
digunakan untuk menyimpan data bahasa isyarat yang bertujuan untuk mengelola data bahasa isyarat yang ada pada halaman kamus bahasa
isyarat. Tabel 3.5 Tabel Kamus Bahasa Isyarat
Field Tipe
Keterangan
Idkamus NUMBER
Id kamus Idkategori
NUMBER Id kategori
Nama VARCHAR2100
Nama bahasa isyarat Keterangan
VARCHAR22000 Keterangan
4. Tabel Agenda Tabel agenda merupakan tabel basis data yang digunakan untuk
menyimpan data agenda yang bertujuan untuk mengelola agenda yang ada pada halaman agenda.
Tabel 3.6 Tabel Agenda
Field Tipe
Keterangan
Idagenda NUMBER
Id agenda namaagenda
VARCHAR2100 Nama agenda
Keterangan VARCHAR22000
Deskripsi agenda PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
79
3.3.2 Perancangan Menu dan Antarmuka
Antarmuka atau yang lebih dikenal sebagai user interface adalah sebuah media yang menghubungkan manusia dengan komputer agar dapat
saling berinteraksi. Sebelum merancang antarmuka dari semua form pada website, maka untuk lebih memudahkan dalam perancangan akan
dijelaskan terlebih dahulu struktur menu dari sistem. Yang dapat dilihat pada gambar di bawah ini.
Gambar 3.20 Perancangan Menu dan Antarmuka Pengguna
Gambar 3.21 Perancangan Menu dan Antarmuka Administrator
80
3.3.2.1 Perancangan Halaman Beranda Pengguna
Halaman utama ini merupakan halaman yang pertama kali akan muncul ketika pengguna memasukkan alamat aplikasi pengajaran bahasa isyarat.
Halaman utama ini terdiri dari beberapa menu utama yaitu menu beranda, menu kamus bahasa isyarat, menu kategori bahasa isyarat, dan menu
agenda, dapat dilihat pada gambar 3.22
Gambar 3.22 Perancaangan Halaman Beranda Pengguna
3.3.2.2 Perancangan Halaman Kamus Bahasa Isyarat Pengguna
Halaman kamus bahasa isyarat merupakan halaman yang berisi daftar bahasa isyarat yang disertai dengan penjelasan, gambar, dan video, dapat
dilihat pada gambar 3.23 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
81 Gambar 3.23 Perancaangan Halaman Kamus Bahasa Isyarat Pengguna
3.3.2.3 Perancangan Halaman Kategori Bahasa Isyarat Pengguna
Halaman kategori bahasa isyarat merupakan halaman yang berisi daftar kategori bahasa isyarat yang disertai dengan penjelasan, dapat dilihat
pada gambar 3.24
Gambar 3.24 Perancaangan Halaman Kategori Bahasa Isyarat Pengguna
82
3.3.2.4 Perancangan Halaman Gambar dan Video Bahasa Isyarat Pengguna
Halaman ini merupakan halaman yang menampilkan gambar dan video pada tiap data bahasa isyarat, dapat dilihat pada gambar 3.25
Gambar 3.25 Perancaangan Halaman Gambar dan Video Bahasa Isyarat
3.3.2.5 Perancangan Halaman Agenda Pengguna
Halaman agenda merupakan halaman yang berisi daftar agenda yang disertai dengan penjelasan dan gambar atau video, dapat dilihat pada
gambar 3.26
Gambar 3.26 Perancaangan Halaman Agenda Pengguna
83
3.3.2.6 Perancangan Halaman Login Admin
Halaman login merupakan halaman yang digunakan oleh admin pengelola system ini. Halaman ini terdapat form username dan password,
yang akan diisi untuk bisa masuk ke dalam halaman menu administrator dan dapat mengelola beberapa menu pada aplikasi bahasa isyarat, dapat
dilihat pada gambar 3.27.
Gambar 3.27 Perancaangan Halaman Login Administrator
3.3.2.7 Perancangan Halaman Beranda Admin
Halaman utama ini merupakan halaman yang digunakan oleh admin ini terdiri dari beberapa menu utama yaitu menu beranda, menu kamus
bahasa isyarat, menu kategori bahasa isyarat, menu agenda, dan menu
admin dapat dilihat pada gambar 3.28
84 Gambar 3.28 Perancaangan Halaman Beranda Administrator
3.3.2.8 Perancangan Halaman Kelola Kamus Bahasa Isyarat
Halaman kelola kamus bahasa isyarat merupakan halaman yang digunakan oleh admin untuk dapat menambah, mengedit, dan
menghapus data bahasa isyarat yang ada pada aplikasi pengajaran bahasa isyarat, dapat dilihat pada gambar 3.29
Gambar 3.29 Perancaangan Halaman Kelola Kamus Bahasa Isyarat
85
3.3.2.9 Perancangan Halaman Menu Tambah Bahasa Isyarat
Halaman ini digunakan oleh admin untuk menambah data bahasa isyarat, dapat dilihat pada gambar 3.30
Gambar 3.30 Perancaangan Halaman Menu Tambah Data Bahasa Isyarat
3.3.2.10 Perancangan Halaman Menu Edit Bahasa Isyarat
Halaman ini digunakan oleh admin untuk mengedit mengubah data bahasa isyarat, dapat dilihat pada gambar 3.31
Gambar 3.31 Perancaangan Halaman Menu Edit Data Bahasa Isyarat
86
3.3.2.11 Perancangan Halaman Menu Detail Bahasa Isyarat
Halaman ini digunakan untuk mendeskripsikan data bahasa isyarat dan dapat dilihat oleh admin, dapat dilihat pada gambar 3.32
Gambar 3.32 Perancaangan Halaman Menu Detail Bahasa Isyarat
3.3.2.12 Perancangan Halaman Menu Kelola Kategori Bahasa Isyarat
Halaman kelola kategori bahasa isyarat merupakan halaman yang digunakan oleh admin untuk dapat menambah, mengedit, dan
menghapus data kategori bahasa isyarat yang ada pada aplikasi pengajaran bahasa isyarat, dapat dilihat pada gambar 3.31
Gambar 3.33 Perancaangan Halaman Menu Kelola Kategori Bahasa Isyarat
87
3.3.2.13 Perancangan Halaman Menu Tambah Kategori Isyarat
Halaman ini digunakan oleh admin untuk menambah data kategori bahasa isyarat, dapat dilihat pada gambar 3.34
Gambar 3.34 Perancaangan Halaman Menu Tambah Kategori Bahasa Isyarat
3.3.2.14 Perancangan Halaman Menu Edit Kategori Bahasa Isyarat
Halaman ini digunakan oleh admin untuk mengedit mengubah data kategori bahasa isyarat, dapat dilihat pada gambar 3.35
Gambar 3.35 Perancaangan Halaman Menu Edit Kategori Bahasa Isyarat
88
3.3.2.15 Perancangan Halaman Menu Detail Kategori Bahasa Isyarat
Halaman ini digunakan untuk mendeskripsikan data bahasa isyarat dan
dapat dilihat oleh admin, dapat dilihat pada gambar 3.36
Gambar 3.36 Perancaangan Halaman Menu Detail Kategori Bahasa Isyarat
3.3.2.16 Perancangan Halaman Menu Kelola Gambar Bahasa Isyarat
Halaman kelola gambar bahasa isyarat merupakan halaman yang digunakan oleh admin untuk dapat menambah dan menghapus data
gambar bahasa isyarat yang ada pada aplikasi pengajaran bahasa isyarat, dapat dilihat pada gambar 3.37
Gambar 3.37 Perancaangan Halaman Menu Kelola Gambar Bahasa Isyarat
89
3.3.2.17 Perancangan Halaman Menu Edit Gambar Bahasa Isyarat
Halaman ini digunakan oelh admin untuk mengedit mengubah data gambar bahasa isyarat, dapat dilihat pada gambar 3.38
Gambar 3.38 Perancaangan Halaman Menu Edit Gambar Bahasa Isyarat
3.3.2.18 Perancangan Halaman Menu Kelola Video Bahasa Isyarat
Halaman kelola video bahasa isyarat merupakan halaman yang digunakan oleh admin untuk dapat menambah dan menghapus data
video bahasa isyarat yang ada pada aplikasi pengajaran bahasa isyarat,
dapat dilihat pada gambar 3.39
Gambar 3.39 Perancaangan Halaman Menu Kelola Video Bahasa Isyarat
90
3.3.2.19 Perancangan Halaman Menu Edit Video Bahasa Isyarat
Halaman ini digunakan oleh admin untuk mengedit mengubah data video bahasa isyarat, dapat dilihat pada gambar 3.40
Gambar 3.40 Perancaangan Halaman Menu Edit Video Bahasa Isyarat
3.3.2.20 Perancangan Halaman Menu Kelola Agenda
Halaman kelola agenda merupakan halaman yang digunakan oleh admin untuk dapat menambah, mengedit, dan menghapus data agenda yang ada
pada aplikasi pengajaran bahasa isyarat, dapat dilihat pada gambar 3.41
Gambar 3.41 Perancaangan Halaman Menu Kelola Agenda
91
3.3.2.21 Perancangan Halaman Menu Tambah Agenda
Halaman ini digunakan oleh admin untuk menambah data agenda, dapat dilihat pada gambar 3.42
Gambar 3.42 Perancaangan Halaman Menu Tambah Agenda
3.3.2.22 Perancangan Halaman Menu Edit Agenda
Halaman ini digunakan oelh admin untuk mengedit mengubah data agenda, dapat dilihat pada gambar 3.43
Gambar 3.43 Perancaangan Halaman Menu Edit Agenda
92
3.3.2.23 Perancangan Halaman Menu Detail Agenda
Halaman ini digunakan untuk mendeskripsikan data bahasa isyarat dan dapat dilihat oleh admin, dapat dilihat pada gambar 3.44
Gambar 3.44 Perancaangan Halaman Menu Detail Agenda
3.3.2.24 Perancangan Halaman Menu Kelola Admin
Halaman kelola administrator merupakan halaman yang digunakan oleh admin untuk dapat menambah, mengedit, dan menghapus data admin
yang ada pada aplikasi pengajaran bahasa isyarat, dapat dilihat pada
gambar 3.45
Gambar 3.45 Perancaangan Halaman Menu Kelola Admin
93
3.3.2.25 Perancangan Halaman Menu Tambah Admin
Halaman ini digunakan oleh admin untuk menambah data admin, dapat dilihat pada gambar 3.46
Gambar 3.46 Perancaangan Halaman Menu Tambah Admin
3.3.2.26 Perancangan Halaman Menu Edit Admin
Halaman ini digunakan oleh admin untuk mengedit mengubah data admin, dapat dilihat pada gambar 3.47
Gambar 3.47 Perancaangan Halaman Menu Edit Admin
94
3.3.2.27 Perancangan Halaman Menu Detail Admin
Halaman ini digunakan untuk mendeskripsikan data admin dan dapat
dilihat oleh admin, dapat dilihat pada gambar 3.48
Gambar 3.48 Perancaangan Halaman Menu Detail Admin
95
BAB IV IMPLEMENTASI SISTEM
Pada tahap ini menjelaskan tentang spesifikasi perangkat keras dan lunak, implementasi basis data, dan implementasi sistem.
4.1 Spesifikasi Perangkat Keras dan Perangkat Lunak
Perangkat keras yang digunakan untuk membangun sistem adalah sebagai
berikut :
Processor : Intel Core i3
Hardisk : 500 GB
Memory : 2 GB
Perangkat keras yang digunakan untuk membangun sistem adalah sebagai berikut :
Sistem Operasi : Windows 8 64 bit
Bahasa Pemrograman : JSP DBMS
: Oracle 11g Release 2
4.2 Implementasi Basis Data
Pada tahap ini dilakukan pembangunan basis data menggunakan Oracle 11g untuk menunjang sistem yang akan dibangun. Basis data yang dibangun
sesuai dengan perancangan yang telah dibuat pada tahap sebelumnya. Berikut ini query yang digunakan untuk membuat database dengan nama “Aplikasi
Pengajaran Bahasa Isyarat Berbasis W eb” beserta tabel-tabel di dalamnya :
96
1. Tabel Admin
2. Tabel Kamus
3. Tabel Kategori
CREATE TABLE kategori idkategori NUMBER11 NOT NULL,
namakategori VARCHAR2100 BYTE NULL, keterangan VARCHAR22000 BYTE NULL
LOGGING NOCOMPRESS
NOCACHE; ALTER TABLE kategori ADD CHECK idkategori IS NOT NULL;
ALTER TABLE kategori ADD PRIMARY KEY idkategori; CREATE TABLE kamus
idkamus NUMBER11 NOT NULL, idkategori NUMBER11 NOT NULL,
nama VARCHAR2100 BYTE NULL, keterangan VARCHAR22000 BYTE NULL
LOGGING NOCOMPRESS
NOCACHE; ALTER TABLE kamus ADD CHECK idkamus IS NOT NULL;
ALTER TABLE kamus ADD PRIMARY KEY idkamus; CREATE TABLE admin
idadmin NUMBER11 NOT NULL, username VARCHAR230 BYTE NULL,
password VARCHAR230 BYTE NULL LOGGING
NOCOMPRESS NOCACHE;
ALTER TABLE admin ADD CHECK idadmin IS NOT NULL; ALTER TABLE admin ADD PRIMARY KEY idadmin;
97
4. Tabel Agenda
4.3 Implementasi Sistem
4.3.1 Halaman Beranda Pengguna
Beranda pengguna adalah halaman yang akan muncul ketika pengguna pertama kali membuka Aplikasi Pengajaran Bahasa Isyarat Berbasis Web.
Pada halaman ini terdapat menu kamus, menu katgeori, menu agenda, dan admin. Pada halaman ini terdapat juga slideshow foto serta penjelasan
tentang Aplikasi Pengajaran Bahasa Isyarat Berbasis Web dapat dilihat pada gambar 4.1
Gambar 4.1 Halamana Beranda Pengguna
CREATE TABLE agenda idagenda NUMBER11 NOT NULL,
namaagenda VARCHAR22000 BYTE NULL, keterangan VARCHAR24000 BYTE NULL
LOGGING NOCOMPRESS
NOCACHE; ALTER TABLE agenda ADD CHECK idagenda IS NOT NULL;
ALTER TABLE agenda ADD PRIMARY KEY idagenda;
98
4.3.2. Halaman Kamus Bahasa Isyarat Pengguna
Halaman kamus bahasa isyarat akan muncul ketika pengguna menekan menu kamus bahasa isyarat. Pada halaman ini akan menampilkan materi-
materi bahasa isyarat yang dapat dilihat pada gambar 4.2
Gambar 4.2 Halaman Kamus Bahasa Isyarat Pengguna
4.3.3. Halaman Gambar dan Video Bahasa Isyarat
Halaman ini akan muncul ketika pengguna memilih data bahasa isyarat yang ada dalam halaman kamus bahasa isyarat berdasarkan kategori
bahasa isyarat, dapat dilihat pada gambar 4.3 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Kategori