BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

3.1 Identifikasi Masalah kursus merupakan salah satu lembaga pelatihan yang termasuk dalam jenis pendidikan non formal. Pada umumnya setiap siswa yang ingin kurus harus datang langsung ke tempat lembaga kursusnya, namun kebanyakan dari setiap siswa yang tidak sempat untuk datang karena kesibukannya, dan ada juga karena malas untuk pergi ke lembaga atau ke temepat kursus. Hal ini menghambat proses pembelajaran yang sudah ada. Dengan melihat proses tersebut diatas, maka akan membuang biaya yang sudah di keluarkan untuk mengikuti kursus dan pembelajaran tidak terlaksana dengan baik. Untuk itulah penulis berfikir bagaimana membangun sebuah aplikasi yang dapat membantu para siswa yang ingin kursus.

3.2 Spesifikasi Sistem Untuk membangun aplikasi kursus online interaktif berbasis web ini penulis menganalisa spesifikasi system yang dibutuhkan, diantaranya sebagai berikut: 1. Dalam sistem ini terdapat video, kelas dan video chat yang harus dikelompokkan. 2. Dalam aplikasi ini terdapat ruang khusus administrator yang dapat diakses untuk proses insert, update dan delete semua data, termasuk video dan data siswa. 3. Insert, update dan delete video dan data siswa hanya dapat dilakukan oleh pengajar, sehingga user lain tidak diberikan hak akses untuk keperluan ini.

39

http://digilib.mercubuana.ac.id/

40

3.3 Rancangan Umum Aplikasi Dari hasil analisa diatas, penulis membuat sebuah perancangan aplikasi kursus online dengan menggunakan video streaming menggunakan PHP dan MySQL dengan menggunakan framework CodeIgniter dalam pembuatan aplikasi tersebut. Agar aplikasi ini mudah dipahami, penulis membuat diagram use case untuk menunjukkan fungsionalitas suatu system. Diagram aktifitas untuk menggambarkan proses parallel yang mungkin terjadi pada beberapa eksekusi. Diagram sequence untuk menggambarkan skenario atau rangkaian langkahlangkah yang dilakukan sebagai respon dari sebuah event untuk melakukan output tertentu. Serta perancangan database dan perancangan antar muka pemakai (user interface). 3.3.1 Diagram Use Case Diagram Use Case menggambarkan fungsionalitas yang diharapkan dari suatu sistem, yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan “bagaimana” sebuah use case mempresentasikan sebuah interaksi antara actor dengan sistem. Use case menggambarkan kata kerja seperti login ke sistem, maintenance user dan sebagainya. Seorang (aktor) adalah sebuah entitas manusia atau mesin yang berinteraksi dengan sistem untuk melakukan pekerjaan-pekerjaan

tertentu.

Sebuah

use

case

dapat

meng-include

fungsionalitas use case lain sebagai bagian dari proses dalam dirinya. Secara umum diasumsikan bahwa use case yang di-include akan dipanggil setiap kali use cse yang meng-include di eksekusi secara normal. Pada aplikasi pembuatan kursus online interaktif berbasis web ini dapat diidentifikasi bahwa aktor adalah admin, pengajar dan siswa.


41

Mengelola Data Pengajar Mengelola Data Siswa Admin

Mengelola Data Kelas <>

Mengelola Data Topik Mengunggah Video

Login

Melakukan Registrasi

Pengajar

<>

Melihat Kelas

Melihat Topik

Meliihat Video Siswa

Melakukan Chat Online

Gambar 3.1 Diagram Use Case Halaman Admin

1) Skenario Use Case untuk Admin Tabel 3.1 Spesifikasi Skenario Use Case Login Admin Nama Use Case

Login Admin

Aktor

Admin

Deskripsi Singkat

Admin harus melakukan login terlebih dahulu sebelum melakukan pengelolaan data pengajar, data siswa, data video dan data kelas.

Pengecualian

Jika admin belum mendaftar, maka admin tidak


42

dapat melakukan aktifitas didalamnya. Skenario

1. Admin memilih user dan login yang berada dihalaman utama. 2. Kemudian sistem akan menampilkan form login. 3. Admin mengisi username dan password. 4. Sistem akan melakukan validasi apakan username dan password valid datanya, jika ya sistem akan menampilkan halaman admin jika tidak maka sistem akan menampilkan kembali form login.

Kondisi awal

Admin harus sudah terdaftar dalam sistem.

Kondisi akhir

Admin masuk ke halaman admin untuk mengakses data pengajar, data siswa, data video dan data kelas.

Table 3.2 Spesifikasi Skenario Use Case Kelola Data Pengajar Nama Use Case

Kelola data pengajar

Aktor

Admin

Deskripsi singkat

Admin dapat mengelola data pengajar jika admin telah melakukan login terlebih dahulu kemudian sistem akan menampilkan link untuk mengelola data pengajar antara lain input data pengajar,ubah data pengajar dan hapus data pengajar.

Skenario

1. Jika admin memilih link input pengajar , maka skenarionya sebagai berikut : a. Admin melakukan klik pada link input data pengajar pada halaman admin b. Kemudian sistem akan menampilkan form input data pengajar terdiri dari id_pengajar, nama pengajar, dan mata pelajaran yang harus diisi oleh admin.


43

c. Sistem akan menyimpan kedalam database. 2. Jika admin memilih link ubah data pengajar makan skenarionya sebagai berikut : a. Admin melakukan klik pada link ubah data pengajar pada kolom yang ada pada table pengajar b. Kemudian sistem akan menampilkan halaman pengajar yang akan diubah. Padahalaman ini, admin dapat langsung mengubah identitas dari data pengajar yang telah dipilih. c. Sistem akan menyimpan data perubahan kedalam database.

hasil

3. Jika admin memilih link hapus pada kolom yang ada pada table pengajar, maka skenarionya sebagai berikut : a. Admin melakukan klik link hapus pada kolom table data pengajar. b. Kemudian sistem akan menghapus data pengajar yang telah dipilih dari database. Kondisi awal

Admin memilih menu kelola data pengajar yang berada pada halaman admin.

Kondisi Akhir

Setelah admin melakukan pengisian, perubahan atau penghapusan data pengajar, maka dapat kembali ke halaman admin.

Table 3.3 Spesifikasi Skenario Use Case Kelola Data Siswa Nama Use Case

Kelola data siswa

Aktor

Admin

Deskripsi singkat

Admin mengelola data siswa jika admin telah melakukan login terlebih dahulu . kemudian sistem akan menampilkan link untuk mengelola data siswa antara lain input data


44

siswa, ubah data siswa dan hapus data siswa Skenario

1. Jika admin memilih link input siswa, maka skenarionya sebagai berikut : a. Admin melakukan klik pada link input data siswa pada halaman admin. b. Kemudian sistem akan menampilkan form input data siswa yang terdiri dari id_siswa, nama, dan email.yang harus diisi admin. c. Sistem akan menyimpan ke dalam database. 2. Jika admin memilih link ubah data siswa maka skenarionya sebagai berikut : a. Admin melakukan klik pada link ubah data siswa pada kolom yang ada pada table siswa. b. Kemudian sistem akan menampilkan halaman siswa yang akan diubah. Pada halaman ini, admin dapat langsung mengubah identitas dari data siswa yang telah dipilih. c. Sistem akan menyimpan data hasil perubahan kedalam database. 3. Jika admin memilih link hapus pada kolom yang ada pada table siswa, maka skenarionya sebagai berikut : a. Admin melakukan klik link hapus pada kolom table data siswa. b. Kemudian sistem akan menghapus data siswa yang telah dipilih dari database.

Kondisi awal

Admin memilih menu kelola data siswa yang berada pada halaman admin

Kondisi akhir

Setelah admin melakukan pengisian, perubahan


45

atau penghapusan data siswa, maka dapat kembali ke halaman admin.

Table 3.4 Spesifikasi Skenario Use Case Kelola Data Kelas Nama Use Case Aktor Deskripsi singkat

Skenario

Kelola data kelas Admin Admin dapat mengelola data kelas apabila admin telah login terlebih dahulu. Kemudian sistem akan menampilkan link untuk mengelola data kelas antara lain input data kelas, ubah data kelas dan hapus data siswa 1. Jika admin memilih kelas maka skenarionya sebagai berikut : a. Admin melakukan klik pada link input data kelas pada halaman admin b. Kemudian sistem akan menampilkan from input data kelas yang terdiri dari nama kelas yang harus diisi oleh admin. c. Sistem akan menyimpannya ke dalam database. 2. Jika admin memilih link ubah data kelas maka skenarionya sebagai berikut : a. Admin melakukan klik pada link ubah data kelas pada kolom yang ada pada table kelas. b. Kemudian sistem akan menampilkan halaman kelas yang akan diubah. Pada halaman ini, admin dapat langsung mengubah data kelas yang telah dipilih. c. Sistem akan menyimpan data hasil perubahan kedalam database. 3. Jika admin memilih link hapus pada kolom yang ada pada table kelas, maka skenarionya sebagai berikut : a. Admin melakukan klik link hapus pada kolom table data kelas. b. Kemudian sistem akan menghapus data kelas yang telah dipilih dari database.


46

Kondisi awal

Admin memilih menu kelola data kelas yang berada pada halaman admin Setelah admin melakukan pengisian data kelas atau perubahan data kelas, maka dapat kembali kehalaman admin.

Kondisi akhir

2) Skenario Use Case Untuk Pengajar Table 3.5 Spesifikasi Skenario Use Case Login Pengajar Nama Use Case

Login pengajar

Aktor

Pengajar

Deskripsi singkat

Pengajar harus melakukan login terlebih dahulu untuk mengelola data pengajar, setelah login maka sistem akan menampilkan link untuk upload video, melihat coment, menjawab pertanyaan, dan chat online.

Skenario

1. Pengajar melakukan klik terhadap menu login pada menu utama. 2. Sistem menampilkan form login yang terdiri dari field username dan password. 3. Pengajar akan password.

mengisi

username

dan

4. Sistem melakukan pengecekan username dan password yang dimasukkan pakah terdapat pada table pengajar, jika yam aka sistem akan menampilkan halaman pengajar, jika tidak maka sistem akan menampilkan kembali form login. Kondisi awal

Pengajar harus terdaftar pada sistem dan melakukan login.

Kondisi akhir

Pengajar masuk ke halaman untuk pengajar.


47

Table 3.6 Spesifikasi Skenario Use Case Kelola Data Topik Nama Use case

Kelola Data Topik

Aktor

Pengajar

Deskripsi Singkat

Pengajar harus melakukan login terlebih dahulu untuk melakukan kelola data topik, setelah melakukan login maka sistem akan menampilkan halaman untuk pengajar dimana didalamnya terdapat link untuk kelola data topic

Skenario

1. Pengajar melakukan klik terhadap menu kelola topik pada halaman pengajar 2. Sistem akan menampilkan menu pilihan tambah topik 3. Jika pengajar telah mengklik menu pilihan tersebut maka akan ditampilkan form kelola topik 4. Setelah terbuka form nya pengajar dapat mengisi topik sesuai dengan kelas.

Kondisi awal

Pengajar berada pada halaman pengajar

Kondisi akhir

Jika kelola data topik selesai maka data topik akan tersimpan sesuai dalam kode kelas, dan pengajar dapat mengisi data topik yang sesuai dengan kelasnya atau jika sudah selesai dapat kembali ke halaman pengajar.

Table 3.7 Spesifikasi Skenario Use Case Unggah Video Nama Use case

Unggah Video

Aktor

Pengajar

Deskripsi Singkat

Pengajar harus melakukan login terlebih dahulu untuk melakukan unggah video, setelah melakukan login maka sistem akan menampilkan halaman untuk pengajar dimana didalamnya terdapat link untuk mengunggah


48

video Skenario

1. Pengajar melakukan klik terhadap menu kelola video pada halaman pengajar 2. Sistem akan menampilkan menu pilihan tambah video berdasarkan kelas. 3. Jika pengajar telah mengklik menu pilihan tersebut maka akan di tampilkan form untuk mengunggah video.

Kondisi awal

Pengajar berada pada halaman pengajar

Kondisi akhir

Jika unggah video selesai maka video akan tersimpan sesuai dalam kode kelas, dan pengajar dapat unggah video yang lain sesuai dengan kelasnya atau jika sudah selesai dapat kembali ke halaman pengajar.

3) Skenario Use Case Untuk User (pengajar dan Siswa) Table 3.8 Spesifikasi Skenario Use Case Login User Nama Use Case

Login user

Aktor

User

Deskripsi singkat

user harus melakukan login terlebih dahulu untuk melihat kelas dan video, setelah melakukan login maka sistem akan menampilkan link kelas, Topik, lihat video, komentar, dan chat online.

Skenario

1. User melakukan klik terhadap menu login pada menu utama. 2. Sistem menampilkan form login yang terdiri dari field username dan password. 3. User akan mengisi username dan password. 4. Sistem melakukan pengecekan username dan password yang dimasukkan pakah terdapat pada table pengajar, jika ya maka sistem


49

akan menampilkan halaman siswa, jika tidak maka sistem akan menampilkan kembali form login. Kondisi awal

User harus terdaftar pada sistem dan melakukan login.

Kondisi akhir

User masuk ke halaman untuk user

Tabel 3.9 Spesifikasi Skenario Use Case Lihat Kelas Nama Use Case

Lihat Menu Kelas

Aktor

User

Deskripsi singkat

User harus melakukan login terlebih dahulu untuk melihat menu kelas..

Skenario

1. User melakukan klik terhadap menu kelas pada halaman user. 2. Sistem akan menampilkan isi dari daftar link kelas yang di klik pada menu kelas yang telah dipilih

Kondisi awal

User berada pada halaman kelas

Kondisi akhir

Setelah user selesai melihat menu kelas, user dapat memilih kelas dan akan muncul daftar topik.

Table 3.10 Spesifikasi Skenario Use Case Lihat Daftar Topik Nama Use Case

Lihat Topik

Aktor

User

Deskripsi singkat

User harus melakukan login terlebih dahulu untuk melihat daftar topik. Setelah melakukan login maka sistem akan menampilkan halaman untuk user dimana didalamnya terdapat link untuk melihat daftar topic


50

Skenario

1. User melakukan klik terhadap menu kelas pada halaman user. 2. Setelah user memilih kelas, maka akan muncul link daftar topik.

Kondisi awal


Kondisi akhir

Setelah user selesai melihat daftar topik user dapat memilih daftar topik, dan akan muncul daftar video.

Table 3.11 Spesifikasi Skenario Use Case Lihat Daftar Video Nama Use Case

Lihat Video

Aktor

User

Deskripsi singkat

User harus melakukan login terlebih dahulu untuk melihat daftar video. Setelah melakukan login maka sistem akan menampilkan halaman untuk user dimana didalamnya terdapat link untuk melihat daftar video.

Skenario

1. User melakukan klik terhadap menu kelas pada halaman user. 2. Setelah user memilih kelas dan memilih daftar topic maka akan muncul link daftar video.

Kondisi awal


Kondisi akhir

Setelah user selesai melihat daftar video user dapat memilih daftar video, dan akan muncul halaman utama kelas.

Table 3.12 Spesifikasi Skenario Use Case Isi Komentar Nama Use case

Isi komentar

Aktor

User


51

Deskripsi Singkat

User harus melakukan login terlebih dahulu untuk mengisi komentar atau mengajukan pertanyaan, setelah melakukan login maka sistem akan menampilkan halaman untuk user dimana didalamnya terdapat form untuk mengisi komentar.

Skenario

1. User melakukan klik menu kelas pada halaman user. 2. Sistem akan menampilkan halaman utama kelas dan user mengklik komentar yang terdapat pada halaman utama kelas. 3. Maka sistem komentar.

akan

menampilkan

form

Kondisi awal

Siswa berada pada halaman utama kelas

Kondisi akhir

Jika isi komentar telah selesai diisi makan akan tersimpan kedalam databse, dan dapat kembali ke halaman user.

Table 3.13 Spesifikasi Skenario Use Case Chat Online Nama Use case

Chat Online

Aktor

User

Deskripsi Singkat

User harus melakukan login terlebih dahulu untuk berinteraksi melalui chat online kepada user lain, setelah melakukan login maka sistem akan menampilkan halaman untuk user dimana didalamnya terdapat link chat online untuk user.

Skenario

1. User melakukan klik chat online yang terdapat pada halaman siswa. 2. User dapat melakukan interaksi ke pada user lainnya.

Kondisi awal

User berada pada halaman user

Kondisi akhir

Setelah selesai berinteraksi, user dapat kembali


52

ke halaman user.

3.3.2 Diagram Activity Diagram

Activity

adalah

teknik

untuk

mendeskripsikan

logika

procedural, proses bisnis, dan aliran kerja. Diagram activity mempunyai peran seperti halnya flowchart, akan tetapi perbedaannya dengan flowchart adalah activity diagram mendukung perancangan terstruktur sedangkan flowchart tidak bisa (Munwar, 2005:109). Sebuah aktivitas dapat direalisasikan oleh datu use case atau lebih. Aktivitas menggambarkan proses yang berjalan, sementara use case menggambarkan bagaimana aktor menggunakan sistem untuk melakukan aktivitas. 1) Diagram Activity Admin a. Diagram Activity Login Admin Admin

Sistem

Melakukan klik pada link login

Menampilkan form login

Mengisi form login

Melakukan validasi admin

Tidak Valid Valid Menampilkan halaman Admin

Gambar 3.2 Diagram Activity Login Admin


53

b. Diagram Activity Kelola data Pengajar Admin

Sistem

Melakukan klik pada link kelola data pengajar

Menampilkan halaman kelola data pengajar

Klik menu isi data pengajar

Menampilkan halaman form isi data pengajar

Ya

Tidak

Admin mengisi data pengajar pada form

Simpan ke database

Ya

Simpan data ke database

Tidak Klik menu tampilkan data pengajar

Ya

Menampilkan halaman daftar pengajar

Tidak Klik ubah data pengajar

Ya

Menampilkan halaman form ubah data pengajar

Tidak Admin mengisi perubahan data pengajar pada form

Simpan ke database

Ya

Simpan data ke databse

Tidak Klik hapus data pengajar terpilih

Ya


Tidak

Klik keluar

Tidak

Ya

Gambar 3.3 Diagram Activity Kelola Data Pengajar


54

c. Diagram Activity Kelola Data Siswa Admin

Sistem

Menampilkan halaman kelola data siswa

Melakukan klik pada link kelola data siswa

Klik menu isi data siswa

Ya

Menampilkan halaman form isi data siswa terpilih

Tidak Admin mengisi data siswa pada form

Ya

Simpan ke database


Tidak Klik menu tampilkan data siswa

Ya

Menampilkan halaman daftar siswa

Tidak

Klik ubah data siswa

Ya

Menampilkan halaman form ubah data siswa

Tidak Admin mengisi perubahan data siswa pada form

Simpan ke database

Ya


Tidak Klik hapus data siswa terpilih

Ya


Tidak Tidak

Klik keluar Ya

Gambar 3.4 Diagram Activity Kelola Data Siswa


55

d. Diagram Activity Kelola Data Kelas Admin

Sistem

Menampilkan halaman kelola data kelas

Melakukan klik pada link kelola data kelas

Ya

Klik menu isi data kelas

Menampilkan halaman form isi data kelas terpilih

Tidak Admin mengisi data kelas pada form

Ya

Simpan ke database


Tidak

Tidak

Ya

Klik menu tampilkan data kelas

Tidak

Klik ubah data kelas

Menampilkan halaman daftar kelas

Ya

Menampilkan halaman form ubah data kelas

Admin mengisi perubahan data kelas pada form

Tidak

Simpan ke database

Klik hapus data kelas terpilih

Ya


Ya


Tidak Tidak

Klik keluar

Ya

Gambar 3.5 Diagram Activity Kelola Data Kelas


56

2) Diagram Activity Pengajar a. Diagram Activity Login Pengajar Pengajar

Sistem



Mengisi form login

Melakukan validasi pengajar

Tidak valid valid Menampilkan halaman pengajar

Gambar 3.6 Diagram Activity Login Pengajar


57

b. Diagram Activity Kelola Data Topik Pengajar

Sistem

Menampilkan halaman form tambah topik

Melakukan klik pada link tambah topik

Pengajar menambah topik pada form

Simpan ke database

Ya

Klik Keluar

Tidak


Ya

Gambar 3.7 Diagram Activity Kelola Data Topik c. Diagram Activity Kelola Data Video Pengajar

Sistem

Menampilkan halaman form tambah video

Melakukan klik pada link tambah video

Pengajar unggah video pada form

Simpan ke database

Klik Keluar

Ya


Tidak

Ya

Gambar 3.8 Diagram Activity Kelola Data Video


58

3) Diagram Activity User (Siswa dan Pengajar) a. Diagram Activity Login User Siswa

Sistem



Mengisi form login

Melakukan validasi User

Tidak Ya Menampilkan halaman User

Gambar 3.9 Diagram Activity Login user


59

b. Diagram Activity Lihat Kelas Pengajar

Sistem

Melakukan klik pada link kelas

Klik pilih kelas

Menampilkan halaman lihat kelas

Ya

Menampilkan halaman kelas untuk kelas pilihan

Tidak

Klik keluar

Tidak

Ya

Gambar 3.10 Diagram Activity Lihat Kelas


60

c. Diagram Activity Lihat Topik Pengajar

Sistem

Melakukan klik pada link topik

Klik pilih topik

Menampilkan halaman lihat topik

Ya

Menampilkan halaman topik untuk topik pilihan

Tidak

Klik keluar

Tidak

Ya

Gambar 3.11 Diagram Activity Lihat Topik


61

d. Diagram Activity Lihat Video Siswa

Sistem

Menampilkan halaman lihat video

Melakukan klik pada link video

Klik pilih video

Ya

Menampilkan halaman video untuk video pilihan

Tidak

Tidak

Klik keluar

Ya

Gambar 3.12 Diagram Activity Lihat Video


62

e. Diagram Activity Isi Komentar Siswa

Sistem

Menampilkan halaman form isi komentar

Melakukan klik pada link isi komentar

Pengajr mengisi kelas Komentar pada form

Ya

Simpan ke database


Tidak

Klik keluar

Ya

Gambar 3.13 Diagram Activity Isi Komentar f. Diagram Activity Chat Online Siswa

Sistem

Melakukan klik pada link chat online

Klik keluar

Menampilkan halaman chat online

Tidak

Ya

Gambar 3.14 Diagram Activity Chat Online


63

3.3.3 Pemodelan Diagram Sequence Diagram Sequence digunakan untuk menggambarkan perilaku pada sebuah skenario. Diagram ini menunjukan sejumlah contoh objek dan message (pesan) yang diletakan diantara obyek-obyek ini di dalam use case (Fowler:2005,81). Diagram Sequence bisa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu. 1) Diagram Sequence Admin a. Diagram Sequence Login Admin

Admin

Layer login

Form username & password

Data login

Halaman Admin

1. Mengakses Menu login 2. Masukan username & password

3. Verifikasi data

4. Login kembali bila tidak valid 5.

Mengakses menu admin bila data valid

Gambar 3.15 Diagram Sequence Login Admin Admin mengakses menu login pada halaman login, setelah admin mengisi kolom username dan password sistem akan verifikasi data dan jika valid admin akan masuk ke halaman admin.


64

b. Diagram Sequence Kelola Data Pengajar

Admin 1.

Layer kelola data pengajar

Layar form input data pengajar

Data pengajar

Mengakses menu kelola data pengajar 2. Mengakses menu input data pengajar

3. Menghapus data Pengajar dari database

5. Mengakses menu edit data pengajar

Mengisi data pengajar

4. Mengisi form data pengajar

Simpan perubahan data pengajar

6. Menyimpan data kedatabase

Gambar 3.16 Diagram Sequence Kelola Data Pengajar Admin mengisi data pengajar pada form kelola pengajar dan setelah data tersimpan pada database, admin dapat melakukan edit dan hapus pada data pengajar yang sebelumnya telah diisi dan kemudian tersimpan kedalam database. c. Diagram Sequence Kelola Data Siswa

Admin

Layer kelola data siswa

1. Mengakses menu kelola data siswa

Data siswa

Layar form input data siswa

2. Mengakses menu input data siswa 3. Menghapus data siswa dari database

Mengisi data siswa

Simpan perubahan data siswa

5. Mengisi form data siswa

4. Mengakses menu edit data siswa

7. Menyimpan data kedatabase

Gambar 3.17 Diagram Sequence Kelola Data Siswa


65

Admin mengisi data siswa pada form kelola siswa dan setelah data tersimpan pada database, admin dapat melakukan edit dan hapus pada data siswa yang sebelumnya telah diisi dan kemudian tersimpan kedalam database. d. Diagram Sequence Kelola Data Kelas

Admin

Layer kelola data kelas

Data kelas

1. Mengakses menu kelola data kelas 2. Mengakses menu input data kelas

4. Mengakses menu edit data kelas

Layar form input data kelas

3. Menghapus data kelas dari database

Mengisi data kelas

Simpan perubahan data kelas

5. Mengisi form data kelas 6. Menyimpan data kedatabase

Gambar 3.18 Diagram Sequence Kelola Data Kelas Admin mengisi data kelas pada form kelola kelas dan setelah data tersimpan pada database, admin dapat melakukan edit dan hapus pada data kelas yang sebelumnya telah diisi dan kemudian tersimpan kedalam database.


66

2) Diagram Sequence Pengajar a) Diagram Sequence Kelola Topik

Pengajar

Layar tambah topik

1. Mengakses menu tambah topik

Layar form Input topik

2. Mengakses tambah topik pada kelas yang terpilih

tambah video

3. Mengisi form tambah topik

Simpan topik

4. Menyimpan data topik Pada database

Gambar 3.19 Diagram Sequence Kelola Topik Pengajar mengisi data topik pada form kelola topik dan setelah data tersimpan pada database, pengajar dapat melakukan edit dan hapus pada data topik yang sebelumnya telah diisi dan kemudian tersimpan kedalam database.


67

b) Diagram Sequence Kelola Video

Pengajar 1.

Layar unggah video Mengakses menu tambah video

Layar form Input video

2. Mengakses unggah video pada topik yang terpilih

Unggah video

3. Mengisi form Unggah video

Simpan video

4. Menyimpan video Pada database

Gambar 3.20 Diagram Sequence Kelola Video Pengajar mengisi data video pada form kelola video dan setelah data tersimpan pada database, admin dapat melakukan edit dan hapus pada data video yang sebelumnya telah diisi dan kemudian tersimpan kedalam database.


68

3) Diagram Sequence User (Siswa dan Pengajar) a) Diagram Sequence Lihat Kelas

Layar kelas

User 1.

Layar halaman user

Mengakses menu lihat kelas 2. Mengakses menu Kembali ke Halaman utama user

Gambar 3.21 Diagram Sequence Lihat Kelas User dapat mengakses menu kelas untuk melihat daftar kelas yang telah dipilih, dan user dapat kembali ke halaman user.


69

b) Diagram Sequence Lihat Topik

Layar topik

User 1.

Layar halaman user

Mengakses menu lihat topik 2. Mengakses menu Kembali ke Halaman utama user

Gambar 3.22 Diagram Sequence Lihat Topik User dapat mengakses menu topik untuk melihat daftar topik yang telah dipilih, dan user dapat kembali ke halaman user. c) Diagram Sequence Lihat Video

Layar video

User 1.

Layar halaman user

Mengakses menu lihat video 2. Mengakses menu Kembali ke Halaman utama

Gambar 3.23 Diagram Sequence Lihat Video


70

User dapat mengakses menu video untuk melihat daftar video yang telah dipilih, dan user dapat kembali ke halaman user.

d) Diagram Sequence Chat Online

Layar chat online

User 1.

Layar halaman user

Mengakses menu chat online 2. Mengakses menu Kembali ke Halaman utama user

Gambar 3.24 Diagram Sequence Chat Online User dapat melakukan chat online pada menu chat, dan user dapat kembali ke halaman user.


71

3.3.4 Class Diagram portal_topik portal_pengajar -id -teacher_username -teacher_name -teacher_password -level +tambah() +edit() +delete()

1..*

-topic_id -class_id -topic_name +tambah() +edit() +delete()

1..*

-class_id -class_name -class_aktif +tambah() +edit() +delete()

1 1

1

portal_kelas

1..*

1..*

1

portal_siswa -student_username -student_name -student_password -student_lastlogin +tambah() +edit() +delete()

1..*

1

1

portal_komentar 1..*

-comment_id -comment_student -student_username -video_id +tambah() +view()

1..*

portal_video -video_id -video_name -Video_description -video_file -video_thumb -Video_uplodded_date -video_end_date -topic_id -Teacher_username +tambah() +edit() +delete()

Gambar 3.25 Class Diagram Pada gambar diatas terdapat delapan buah table. Instansiasi entitas kuat selalu memiliki karakteristik yang disebut identifier atau primary key. Pada database diatas ke enam table keberadaannya sangat bergantung pada keberadaan entitas yang lainnya. 3.3.5 Perancangan Tabel Pada perancangan aplikasi ini penulis membuat sebuah database dengan nama portal_db dan membuat 8 (delapan) buah table yang saling terhubung, 1 (satu) buah table untuk menampung data admin.


72

Tabel 3.14 Portal_pengguna No

Nama Kolom

Type Data

Keterangan

Primary Key

1.

id

Int (11)

Id pengguna

2.

custip

Varchar(16)

Custip

3.

nama

Varchar(50)

Nama pengguna

4.

email

Varcha(50)

Email pengguna

5.

username

Varchar(50)

Username pengguna

6.

password

Varchar(50)

password

7.

joindate

Datetime

Tanggal join

8.

lastlogin

Datetime

Login terakhir

9.

level

Int(5)

*

Tabel 3.15 Portal_siswa No

Nama kolom

Type data

Keterangan

1.

student_username

Varchar(255)

Username siswa

2.

student_name

Varchar(255)

Nama siswa

3.

student_password

Varchar(255)

password

4

student_lastlogin

Datetime

Login terakhir siswa

Primary key *

Tabel 3.16 Portal_pengajar No 1.

Nama kolom id

Type data Int(11)

Keterangan Id pengajar


Primary key *

73

2.

teacher_username

Varchar(255)

Username pengajar

3.

teacher_name

Varchar(255)

Nama pengajar

4.

teacher_password

Varchar(255)

password

5.

level

Tinyint(1)

Tabel 3.17 Portal_kelas No

Nama kolom

Type data

Keterangan

1.

class_id

Int(11)

Id kelas

2.

class_name

Varchar(255)

Nama kelas

3.

class_aktif

Datetime

Kelas aktif

Primary key *

Tabel 3.18 Portal_kelas_siswa No

Nama kolom

Type data

Keterangan

1.

student_username

Varchar(255)

Nama siswa

2.

class_id

Int(11)

Id kelas

3.

id

Int(11)

id

Primary key

Tabel 3.19 Portal_kelas_pengajar No

Nama kolom

Type data

Keterangan

1.

teacher_username

Varchar(255)

Nama pengajar

2.

class_id

Int(11)

Id kelas

3

id

Int(11)

Id


Primary key

74

Tabel 3.20 Portal_topik No

Nama kolom

Type data

Keterangan

1.

topic_id

Int(11)

Id topic

2.

class_id

Int(11)

Id kelas

3.

topic_name

Varchar(255)

Nama topik

Primary key *

Tabel 3.21 Portal_video No

Nama kolom

Type data

Keterangan

1.

video_id

Int(11)

Id video

2.

video_name

Varchar(255)

Nama video

3.

video_descriptions

Varchar(255)

Video deskripsi

4.

video_file

Varchar(255)

File video

5.

video_thumb

Varchar(255)

Video thumbnail

6.

video_upload_date

Datetime

Tanggal unggah video

7.

video_end_date

Datetime

Tanggal

8

topic_id

Int(11)

Id topik

9.

teacher_username

Varchar(255)

Nama pengajar

Type data

Keterangan

Primary key *

Tabel 3.22 Portal_komentar No

Nama kolom

1.

comment_id

Int(11)

Id komen

2.

comment_content

Varchar(255)

Isi komen

3.

teacher_name

Varchar(255)

Nama pengajar


Primary key *

75

4.

teacher_password

Varchar(255)

5.

level

Tinyint(1)

Tabel 3.23 Portal_user_vline No

Nama kolom

Type data

1.

Id

Int(11)

2.

Username

Varchar(150)

3.

Password

Varchar(150)

4.

name

Varchar(150)

5.

Isadmin

Tinyint(1)

Keterangan

Primary key *

3.3.6 Perancangan Antarmuka Pada bagian ini penulis akan menggambarkan rancangan antar muka dimana rancangan antar muka ini dibuat agar pengguna dapat dengan mudah mengerti cara menggunakan aplikasi ini atau dengan kata lain rancangan antar muka ini dibuat user friendly bagi pengguna. Untuk itu diciptakan suatu antar muka yang baik. 1)

Rancangan Antarmuka Halaman Login Admin

Tampilan interface ini di rancang untuk memperlihatkan login untuk admin dan pengajar.


76

Gambar 3.26 Interface Halaman Login Admin 2)

Rancangan Antarmuka Halaman Utama admin

Tampilan interface ini dirancang untuk memperlihatkan halaman utama untuk admin, setelah melalui proses login.

Gambar 3.27 Interface Halaman Utama Admin

3) Rancangan Antarmuka Halaman Admin pada Kelola Kelas Tampilan interface ini dirancang untuk memperlihatkan halaman admin pada kelola guru nama kelas, jumlah kelas, masa aktif, aksi.


77

Gambar 3.28 Interface Halaman Admin Pada Kelola Kelas 4) Rancangan Antarmuka Halaman Admin pada Kelola Siswa Tampilan interface ini dirancang untuk memperlihatkan halaman kelola siswa untuk menampilkan username, fullname, aksi.

Gambar 3.29 Interface Halaman Admin Untuk Kelola Siswa 5) Rancangan Antarmuka Halaman Admin pada Kelola Pengajar Tampilan interface ini dirancang untuk memperlihatkan halaman kelola pengajar untuk menampilkan username, fullname, aksi.


78

Gambar 3.30 Interface Halaman Admin Untuk Kelola Pengajar 6) Rancangan Antarmuka Halaman Utama Pengajar Tampilan interface ini dirancang untuk memperlihatkan halaman utama untuk pengajar, setelah melalui proses login.

Gambar 3.31 Interface Halaman Utama Pengajar 7) Rancangan Antarmuka Halaman Pengajar pada Kelola Topik Tampilan interface ini dirancang untuk memperlihatkan halaman pengajar pada kelola topik untuk menampilkan kelas, topic, jumlah video, aksi.


79

Gambar 3.32 Interface Halaman Pengajar Untuk Kelola Topik 8) Rancangan Antarmuka Halaman Pengajar pada Kelola Topik Tampilan interface ini dirancang untuk memperlihatkan halaman pengajar pada kelola video untuk menampilkan thumbnail, judul video, topic, tanggal unggah, komentar, aksi.

Gambar 3.33 Interface Halaman Pengajar Untuk Kelola Video 9) Rancangan Antarmuka Halaman Utama User (Siswa dan Pengajar) Tampilan interface ini dirancang untuk memperlihatkan halaman utama untuk user, setelah melalui proses login.


80

Gambar 3.34 Interface Halaman Utama Siswa 10) Rancangan Antarmuka Halaman User Pada Kelas 1.

Halaman Daftar Kelas user Sebelum masuk kehalaman utama kelas, user memilih kelas terlebih dahulu

Gambar 3.35 Interface Halaman Daftar Kelas 2.

Halaman Daftar Topik Setelah memilih kelas akan muncul topik yang terdapat di dalam kelas yang dipilih.


81

Gambar 3.36 Interface Halaman Daftar Topik 3.

Halaman Daftar Video Setelah memilih topik akan muncul thumbnail video yang terdapat di dalam topik yang dipilih.

Gambar 3.37 Interface Halaman Daftar Video 4.

Halaman Utama Kelas Tampilan halaman utama kelas siswa dan pengajar.


82

Gambar 3.38 Interface Halaman Utama Kelas 11) Rancangan Antarmuka Halaman Chat Online Tampilan interface ini dirancang untuk memperlihatkan halaman chat online user.

Gambar 3.39 Interface Halaman Chat Online


BAB III ANALISA DAN PERANCANGAN

Recommend Documents