BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 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

2 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) 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.

3 41 Mengelola Data Pengajar Mengelola Data Siswa Admin Mengelola Data Kelas <<include>> Mengelola Data Topik Mengunggah Video Login Pengajar Melakukan Registrasi <<include>> 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 Aktor Deskripsi Singkat Pengecualian Login Admin Admin Admin harus melakukan login terlebih dahulu sebelum melakukan pengelolaan data pengajar, data siswa, data video dan data kelas. Jika admin belum mendaftar, maka admin tidak

4 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 Aktor Deskripsi singkat Skenario Kelola data pengajar Admin 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. 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.

5 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 hasil perubahan kedalam database. 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 Kondisi Akhir Admin memilih menu kelola data pengajar yang berada pada halaman admin. 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 Aktor Deskripsi singkat Kelola data siswa Admin Admin mengelola data siswa jika admin telah melakukan login terlebih dahulu. kemudian sistem akan menampilkan link untuk mengelola data siswa antara lain input data

6 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 .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 Kondisi akhir Admin memilih menu kelola data siswa yang berada pada halaman admin Setelah admin melakukan pengisian, perubahan

7 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.

8 46 Kondisi awal Kondisi akhir 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. 2) Skenario Use Case Untuk Pengajar Table 3.5 Spesifikasi Skenario Use Case Login Pengajar Nama Use Case Aktor Deskripsi singkat Skenario Login pengajar Pengajar 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. 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 mengisi username dan password. 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 Kondisi akhir Pengajar harus terdaftar pada sistem dan melakukan login. Pengajar masuk ke halaman untuk pengajar.

9 47 Table 3.6 Spesifikasi Skenario Use Case Kelola Data Topik Nama Use case Aktor Deskripsi Singkat Skenario Kelola Data Topik Pengajar 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 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 Kondisi akhir Pengajar berada pada halaman pengajar 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 Aktor Deskripsi Singkat Unggah Video Pengajar 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

10 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 Kondisi akhir Pengajar berada pada halaman pengajar 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 Aktor Deskripsi singkat Skenario Login user User 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. 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

11 49 akan menampilkan halaman siswa, jika tidak maka sistem akan menampilkan kembali form login. Kondisi awal Kondisi akhir User harus terdaftar pada sistem dan melakukan login. User masuk ke halaman untuk user Tabel 3.9 Spesifikasi Skenario Use Case Lihat Kelas Nama Use Case Aktor Deskripsi singkat Skenario Lihat Menu Kelas User User harus melakukan login terlebih dahulu untuk melihat menu kelas.. 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 Kondisi akhir User berada pada halaman kelas 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 Aktor Deskripsi singkat Lihat Topik User 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

12 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 User berada pada halaman kelas 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 Aktor Deskripsi singkat Skenario Lihat Video User 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. 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 User berada pada halaman kelas 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 Aktor Isi komentar User

13 51 Deskripsi Singkat Skenario 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. 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 akan menampilkan form komentar. Kondisi awal Kondisi akhir Siswa berada pada halaman utama kelas 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 Aktor Deskripsi Singkat Skenario Chat Online User 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. 1. User melakukan klik chat online yang terdapat pada halaman siswa. 2. User dapat melakukan interaksi ke pada user lainnya. Kondisi awal Kondisi akhir User berada pada halaman user Setelah selesai berinteraksi, user dapat kembali

14 52 ke halaman user 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 Valid Valid Menampilkan halaman Admin Gambar 3.2 Diagram Activity Login Admin

15 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 Admin mengisi data pengajar pada form Simpan ke database Simpan data ke database Klik menu tampilkan data pengajar Menampilkan halaman daftar pengajar Klik ubah data pengajar Menampilkan halaman form ubah data pengajar Admin mengisi perubahan data pengajar pada form Simpan ke database Simpan data ke databse Klik hapus data pengajar terpilih Simpan data ke databse Klik keluar Gambar 3.3 Diagram Activity Kelola Data Pengajar

16 54 c. Diagram Activity Kelola Data Siswa Admin Sistem Melakukan klik pada link kelola data siswa Menampilkan halaman kelola data siswa Klik menu isi data siswa Menampilkan halaman form isi data siswa terpilih Admin mengisi data siswa pada form Simpan ke database Simpan data ke database Klik menu tampilkan data siswa Menampilkan halaman daftar siswa Klik ubah data siswa Menampilkan halaman form ubah data siswa Admin mengisi perubahan data siswa pada form Simpan ke database Simpan data ke databse Klik hapus data siswa terpilih Simpan data ke databse Klik keluar Gambar 3.4 Diagram Activity Kelola Data Siswa

17 55 d. Diagram Activity Kelola Data Kelas Admin Sistem Melakukan klik pada link kelola data kelas Menampilkan halaman kelola data kelas Klik menu isi data kelas Menampilkan halaman form isi data kelas terpilih Admin mengisi data kelas pada form Simpan ke database Simpan data ke database Klik menu tampilkan data kelas Menampilkan halaman daftar kelas Klik ubah data kelas Menampilkan halaman form ubah data kelas Admin mengisi perubahan data kelas pada form Simpan ke database Simpan data ke databse Klik hapus data kelas terpilih Simpan data ke databse Klik keluar Gambar 3.5 Diagram Activity Kelola Data Kelas

18 56 2) Diagram Activity Pengajar a. Diagram Activity Login Pengajar Pengajar Sistem Melakukan klik pada link login Menampilkan form login Mengisi form login Melakukan validasi pengajar valid Menampilkan halaman pengajar Gambar 3.6 Diagram Activity Login Pengajar

19 57 b. Diagram Activity Kelola Data Topik Pengajar Sistem Melakukan klik pada link tambah topik Menampilkan halaman form tambah topik Pengajar menambah topik pada form Simpan ke database Simpan data ke database Klik Keluar Gambar 3.7 Diagram Activity Kelola Data Topik c. Diagram Activity Kelola Data Video Pengajar Sistem Melakukan klik pada link tambah video Menampilkan halaman form tambah video Pengajar unggah video pada form Simpan ke database Simpan data ke database Klik Keluar Gambar 3.8 Diagram Activity Kelola Data Video

20 58 3) Diagram Activity User (Siswa dan Pengajar) a. Diagram Activity Login User Siswa Sistem Melakukan klik pada link login Menampilkan form login Mengisi form login Melakukan validasi User Menampilkan halaman User Gambar 3.9 Diagram Activity Login user

21 59 b. Diagram Activity Lihat Kelas Pengajar Sistem Melakukan klik pada link kelas Menampilkan halaman lihat kelas Klik pilih kelas Menampilkan halaman kelas untuk kelas pilihan Klik keluar Gambar 3.10 Diagram Activity Lihat Kelas

22 60 c. Diagram Activity Lihat Topik Pengajar Sistem Melakukan klik pada link topik Menampilkan halaman lihat topik Klik pilih topik Menampilkan halaman topik untuk topik pilihan Klik keluar Gambar 3.11 Diagram Activity Lihat Topik

23 61 d. Diagram Activity Lihat Video Siswa Sistem Melakukan klik pada link video Menampilkan halaman lihat video Klik pilih video Menampilkan halaman video untuk video pilihan Klik keluar Gambar 3.12 Diagram Activity Lihat Video

24 62 e. Diagram Activity Isi Komentar Siswa Sistem Melakukan klik pada link isi komentar Menampilkan halaman form isi komentar Pengajr mengisi kelas Komentar pada form Simpan ke database Simpan data ke database Klik keluar Gambar 3.13 Diagram Activity Isi Komentar f. Diagram Activity Chat Online Siswa Sistem Melakukan klik pada link chat online Menampilkan halaman chat online Klik keluar Gambar 3.14 Diagram Activity Chat Online

25 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.

26 64 b. Diagram Sequence Kelola Data Pengajar Admin 1. Mengakses menu kelola data pengajar Layer kelola data pengajar 2. Mengakses menu input data pengajar Data pengajar 5. Mengakses menu edit data pengajar 3. Menghapus data Pengajar dari database Layar form input data pengajar 4. Mengisi form data pengajar Mengisi data pengajar 6. Menyimpan data kedatabase Simpan perubahan data pengajar 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 1. Mengakses menu kelola data siswa Layer kelola data siswa Data siswa 2. Mengakses menu input data siswa 3. Menghapus data siswa dari database 4. Mengakses menu edit data siswa Layar form input data siswa 5. Mengisi form data siswa Mengisi data siswa 7. Menyimpan data kedatabase Simpan perubahan data siswa Gambar 3.17 Diagram Sequence Kelola Data Siswa

27 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 1. Mengakses menu kelola data kelas Layer kelola data kelas 2. Mengakses menu input data kelas 4. Mengakses menu edit data kelas Data kelas Layar form input data kelas 3. Menghapus data kelas dari database 5. Mengisi form data kelas Mengisi data kelas Simpan perubahan 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.

28 66 2) Diagram Sequence Pengajar a) Diagram Sequence Kelola Topik Pengajar Layar tambah topik Layar form Input topik tambah video Simpan topik 1. Mengakses menu tambah topik 2. Mengakses tambah topik pada kelas yang terpilih 3. Mengisi form tambah 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.

29 67 b) Diagram Sequence Kelola Video Pengajar 1. Mengakses menu tambah video Layar unggah video 2. Mengakses unggah video pada topik yang terpilih Layar form Input video 3. Mengisi form Unggah video Unggah video 4. Menyimpan video Pada database Simpan video 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.

30 68 3) Diagram Sequence User (Siswa dan Pengajar) a) Diagram Sequence Lihat Kelas User Layar kelas Layar halaman user 1. 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.

31 69 b) Diagram Sequence Lihat Topik User Layar topik Layar halaman user 1. 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 User Layar video Layar halaman user 1. Mengakses menu lihat video 2. Mengakses menu Kembali ke Halaman utama Gambar 3.23 Diagram Sequence Lihat Video

32 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 User Layar chat online Layar halaman user 1. 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.

33 Class Diagram portal_topik portal_pengajar -id -teacher_username -teacher_name -teacher_password -level +tambah() +edit() +delete() portal_siswa -student_username -student_name -student_password -student_lastlogin +tambah() +edit() +delete() * 1..* 1..* 1..* -topic_id -class_id -topic_name +tambah() +edit() +delete() portal_kelas -class_id -class_name -class_aktif +tambah() +edit() +delete() 1 portal_komentar -comment_id -comment_student -student_username -video_id +tambah() +view() 1 1..* 1..* 1 1..* -video_id -video_name -Video_description -video_file -video_thumb -Video_uplodded_date -video_end_date -topic_id -Teacher_username +tambah() +edit() +delete() portal_video 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 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.

34 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. Varcha(50) 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 Primary key 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 Tabel 3.16 Portal_pengajar No Nama kolom Type data Keterangan Primary key 1. id Int(11) Id pengajar *

35 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 Primary key 1. class_id Int(11) Id kelas * 2. class_name Varchar(255) Nama kelas 3. class_aktif Datetime Kelas aktif Tabel 3.18 Portal_kelas_siswa No Nama kolom Type data Keterangan Primary key 1. student_username Varchar(255) Nama siswa 2. class_id Int(11) Id kelas 3. id Int(11) id Tabel 3.19 Portal_kelas_pengajar No Nama kolom Type data Keterangan Primary key 1. teacher_username Varchar(255) Nama pengajar 2. class_id Int(11) Id kelas 3 id Int(11) Id

36 74 Tabel 3.20 Portal_topik No Nama kolom Type data Keterangan Primary key 1. topic_id Int(11) Id topic * 2. class_id Int(11) Id kelas 3. topic_name Varchar(255) Nama topik Tabel 3.21 Portal_video No Nama kolom Type data Keterangan Primary key 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 Tabel 3.22 Portal_komentar No Nama kolom Type data Keterangan Primary key 1. comment_id Int(11) Id komen * 2. comment_content Varchar(255) Isi komen 3. teacher_name Varchar(255) Nama pengajar

37 75 4. teacher_password Varchar(255) 5. level Tinyint(1) Tabel 3.23 Portal_user_vline No Nama kolom Type data Keterangan Primary key 1. Id Int(11) * 2. Username Varchar(150) 3. Password Varchar(150) 4. name Varchar(150) 5. Isadmin Tinyint(1) 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.

38 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.

39 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.

40 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.

41 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.

42 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.

43 81 3. Halaman Daftar Video Gambar 3.36 Interface Halaman Daftar Topik Setelah memilih topik akan muncul thumbnail video yang terdapat di dalam topik yang dipilih. 4. Halaman Utama Kelas Gambar 3.37 Interface Halaman Daftar Video Tampilan halaman utama kelas siswa dan pengajar.

44 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