BAB 4. PERANCANGAN SISTEM 4.1. Perancangan Sistem Untuk memudahkan pembuatan aplikasi virtual lab ini, gambar di bawah ini menggambarkan bagaimana interaksi antara layanan dan aplikasi yang terjadi. Persistent Data Access PostgreSQL Request nginx python Temporary Redis Response Container interaction LXD Gambar 4-1 Interaksi antara sistem dan aplikasi Request yang masuk akan diteruskan melalui nginx yang berfungsi sebagai reverse proxy, kemudian Python menyimpan sesi sementara pada Redis, dan menyimpan data secara persistent ke dalam Postgresql. Selain itu, akan dibuat model diagram dengan menggunakan UML (Unified Modeling Language) dengan jenis diagram Use case, Activity diagram, dan Sequence diagram. Diagram ini akan membantu melihat interaksi yang terjadi pada aplikasi virtual lab. 4.1.1. Use case Diagram Diagram ini menggambarkan interaksi antara aktor dengan sistem. Use case diagram dari aplikasi virtual lab ini dapat dilihat pada gambar berikut: 20
Add Edit <<include>> <<include>> Instructor Add s <<include>> Login <<include>> Drop s <<include>> Get s Gambar 4-2 Use case Diagram Virtual Lab Penjelasan mengenai Use case diagram tersebut terangkum dalam tabel berikut: Tabel 4.1 Keterangan Use case Diagram Virtual Lab Nama Use case Keterangan Add Use case untuk menambahkan /kelas baru Edit Use case untuk melakukan perubahan pada yang sudah ada Add s Use case untuk menambahkan murid/ s ke dalam Drop s Extend dari s, untuk menghapus data murid/ s Login Use case Login Get s Untuk menampilkan yang sedang diambil oleh s 4.1.2. Skenario Use case Diagram Skenario Use case digunakan untuk menjelaskan lebih lanjut dari Use case diagram. Adapun skenario Use case diagram dari gambar 4-1 adalah sebagai berikut: 21
1. Skenario Use case diagram Login Use case Login bertujuan untuk membantu user (Instructor & ) untuk masuk ke dalam virtual lab. Tahapannya dijelaskan pada scenario Use case di bawah ini: Tabel 4.2 Skenario Use Case Login Nama Use case Deskripsi Primary Actor Pre-Condition Normal Flow of Login Instruktur atau melakukan login ke dalam sistem. Instructor/ Instruktur, Actor/ user memiliki username dan password. 1. User memasukkan username dan password 2. Sistem melakukan pengecekan terhadap data yang diinput dengan database. 3. User berhasil masuk ke dalam virtual lab Alternatif 1. User memasukkan username dan password 2. Sistem melakukan pengecekan terhadap data yang diinput. 3. Sistem menampilkan pesan error jika informasi Login tidak sesuai 4. User memasukkan ulang informasi Login ke dalam sistem. 4. Sistem melakukan pengecekan terhadap data yang diinput dengan database. 5. User berhasil masuk ke dalam virtual lab. Exceptions Informasi login yang dimasukkan user tidak sesuai dengan data yang ada pada database. 22
Post- Conditions telah dibuat 2. Skenario Use case diagram Management Use case Add bertujuan untuk membantu user (Instructor) untuk menambahkan course/ kelas. Tahapannya dijelaskan pada scenario Use case di bawah ini: Tabel 4.3 Skenario Use case diagram Management Nama Use case Deskripsi Primary Actor Pre-Condition Normal Flow of Add Instruktur melakukan penambahan course Instructor/ Instruktur Instruktur memiliki username dan password. 6. Instruktur melakukan Login 7. Sistem menampilkan data s yang telah ada 8. Instruktur menerima informasi s yang telah ada beserta menu-menu pengelolaan serta 9. Instruktur memilih menu Add 10. Sistem menampilkan halaman Add 11. Instruktur melakukan input baru 12. Sistem menyimpan inputan data baru 13. Sistem menampilkan data yang baru diinput Alternatif 5. Instruktur memilih menu Add 6. Sistem menampilkan halaman penambahan baru 7. Instruktur batal menambahkan 23
Conditions telah dibuat 3. Skenario Use case diagram Edit s Use case Edit bertujuan untuk membantu user (Instructor) untuk mengelola atau membuat perubahan course/ kelas. Tahapannya dijelaskan pada scenario Use case di bawah ini: Tabel 4.4 Skenario use case diagram Edit s Post- Nama Use case Deskripsi Primary Actor Pre-Condition Normal Flow of Alternatif Post- Conditions Edit Instruktur melakukan pengelolaan terhadap kelas/ mata pelajaran Instructor/ Instruktur Instruktur memiliki username dan password. 1. Instruktur melakukan Login 2. Sistem menampilkan data s yang telah ada 3. Instruktur menerima informasi s yang telah ada beserta menu-menu pengelolaan serta 4. Instruktur memilih menu Edit 5. Sistem menampilkan halaman yang akan dilakukan perbuahan terhadap datanya 6. Instruktur mengisi perubahan data 7. Sistem menyimpan perubahan yang telah dibuat 1. Instructorr memilih menu Edit 2. Sistem menampilkan halaman dari yang sudah ada 3. Instruktur batal melakukan perubahan data pada yang telah ada telah dibuat 24
4. Skenario Use case diagram Add Use case Add bertujuan untuk membantu user (Instructor) untuk mengelola / murid. Tahapannya dijelaskan pada scenario Use case di bawah ini: Tabel 4.5 Skenario Use case Management Nama Use case Deskripsi Primary Actor Pre-Condition Normal Flow of Add Instruktur melakukan penambahan murid/ peserta terhadap course. Instructor/ Instruktur Instruktur memiliki username dan password. 1. Instruktur melakukan Login 2. Sistem menampilkan data s yang telah ada 3. Instruktur menerima informasi s yang telah ada beserta menu-menu pengelolaan serta jumlah murid yang mengikuti 4. Instruktur memilih menu s 5. Sistem menampilkan halaman Management 6. Sistem menampilkan daftar murid yang ada 7. Instruktur memilih menu Add 8. Sistem menampilkan halaman Add 9. Instruktur mengisi data dari murid yang akan ditambahkan 10. Sistem menyimpan data murid yang ditambahkan Alternatif 1. Instruktur memilih menu Add s 2. Sistem menampilkan halaman penambahan baru 3. Instruktur batal menambahkan murid/ Post- Conditions / murid telah ditambahkan 25
5. Skenario Use case diagram Drop Use case Drop bertujuan untuk membantu user (Instructor) untuk mengelola / murid. Tahapannya dijelaskan pada scenario Use case di bawah ini: Tabel 4.6 Skenario use case diagram Drop Nama Use case Deskripsi Primary Actor Pre-Condition Normal Flow of Alternatif Post- Conditions Drop Instruktur mengeluarkan student dari course. Instructor/ Instruktur Instruktur memiliki username dan password. 1. Instruktur melakukan Login 2. Sistem menampilkan data s yang telah ada 3. Instruktur menerima informasi s yang telah ada beserta menu-menu pengelolaan serta jumlah murid yang mengikuti 4. Instruktur memilih menu s 5. Sistem menampilkan halaman Management 6. Sistem menampilkan daftar murid yang ada 7. Instruktur memilih menu Drop dari list murid/ s 8. Sistem menghapus s dari 1. Instructur memilih menu Drop 2. Sistem menghapus s dari 3. Instruktur memilih menu re-add 4. Sistem menambahkan kembali s ke dalam / murid telah ditambahkan 6. Skenario Use case diagram Get 26
Use case Get bertujuan untuk membantu user () untuk melihat apa saja yang diikuti. Tahapannya dijelaskan pada skenario Use case di bawah ini: Tabel 4.7 Skenario Use case diagram Get Nama Use case Deskripsi Primary Actor Pre-Condition Normal Flow of Get Menampilkan yang tersedia bagi memiliki username dan password. 1. / murid melakukan Login 2. Sistem menampilkan data yang tersedia untuk 3. memilih menu Workspace 4. Sistem menampilkan halaman Workspace 5. Sistem menampilkan jendela terminal emulator yang diakses dari server Alternatif 1. melakukan Login 2. Sistem menampilkan data yang tersedia untuk 3. menutup jendela browser Post- Conditions melakukan akses terhadap Linux Container melalui web browser 4.1.3. Activity Diagram Activity diagram menggambarkan berbagai alur aktivitas dalam suatu sistem yang sedang berlangsung. Diagram ini dapat membantu menjelaskan proses Use case diagram secara lebih mendalam sehingga mempermudah proses pembuatan 27
aplikasi. Berikut merupakan Activity diagram yang menjelaskan interaksi antara pengguna atau aktor dengan sistem Virtual Lab. Aktivitas dimulai ketika aktor membuka web browser dan mengetikkan alamat untuk mengakses virtual lab. Setelah itu akan muncul halaman Login. Halaman Login berisikan isian mengenai username dan password. 1. Activity Diagram Login Instructor Login Instructor Sistem Memasukkan username dan password Salah Cek Data Login Masuk sebagai instructor Phase Gambar 4-3 Activity Diagram Login Instructor 28
2. Activity Diagram Login Gambar 4-4 Activitiy Diagram Login 3. Activity Diagram Management (Add ) Management (Add ) Instructor Sistem Memilih menu Add Menampilkan halaman Add Menambahkan Baru Menyimpan yang telah ditambah Phase Gambar 4-5 Activity Diagram Management (Add ) 29
4. Activity Diagram Management (Edit ) Management (Edit ) Instructor Sistem Memilih menu Edit Menampilkan halaman Edit Melakukan perubahan data Menyimpan yang telah diperbarui Phase Gambar 4-6 Activity Diagram Management (Edit ) 5. Activity Diagram Management Add 30
Management (Add ) Instructor Sistem Memilih menu Add Menampilkan halaman Add Menambahkan Nama dan Email untuk baru Menyimpan data yang telah ditambah Phase Gambar 4-7 Activity Diagram Management (Add ) 6. Activity Diagram Management (Drop ) Management (Drop ) Instructor Sistem Memilih menu Drop Menghapus dari Phase Gambar 4-8 Activity Diagram Management (Drop ) 7. Activity Diagram Get 31
Get Sistem Memilih menu Menampilkan Phase Gambar 4-9 Activity Diagram Get 4.1.4. Sequence Diagram Sequence Diagram menggambarkan interaksi antar objek di dalam sistem terhadap waktu. Sequence Diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan output tertentu. 32
1. Sequence Diagram Login Instructor/ Form Login Database Halaman Utama 1. Username dan Password(): Data Login(): 3. Memeriksa Login(): 4. Hasil (): 5. Login invalid(): 6. Login Valid(): Gambar 4-10 Sequence Diagram Login 2. Sequence Diagram Management (Add ) Instructor Halaman Management Form Add Database 1. Pilih Menu(): 2. Tampil Halaman Management 3. Mengisi Form Add (): 4. Simpan (): 5. Konfirmasi Inputan(): Gambar 4-11 Sequence Diagram Add 33
3. Sequence Diagram Management (Edit ) Instructor Halaman Management Form Edit Database 1. Pilih Menu(): 2. Tampil Halaman Management Edit 3. Mengisi Form Edit (): 4. Simpan Perubahan (): 5. Konfirmasi Inputan(): Gambar 4-12 Sequence Diagram Management (Edit ) 4. Sequence Diagram Management (Add ) Instructor Halaman Management Form Add Database 1. Pilih Menu(): 2. Tampil Halaman Management Add 3. Mengisi Form Add (): 4. Simpan Data(): 5. Konfirmasi Inputan(): Gambar 4-13 Sequence Diagram Management (Add ) 34
5. Sequence Diagram Management (Drop ) Instructor Halaman Management Database 1. Pilih Menu(): 2. Tampil Halaman Management(): 3. Pilih Drop (): 4. Simpan Data(): 5. Konfirmasi Inputan(): Gambar 4-14 Sequence Diagram Management (Drop ) 6. Sequence Diagram Get Halaman Database 1. Pilih Menu(): 2. Tampil Halaman (): 3. Memilih (): 4. Konfirmasi Data(): 5. Tampilkan Workspace(): Gambar 4-15 Sequence Diagram Get 35
4.2. Desain Antarmuka Desain antarmuka dari aplikasi ini adalah sebagai berikut: 1. Halaman Utama Pada halaman utama, akan ada form untuk Login, dengan kolom username dan password serta tombol untuk Login. Username Password LOGIN Gambar 4-16 Halaman Utama 2. Interface Ketika Login, user dengan role akan melihat tampilan layar dengan berbagai list yang diikuti. 36
s Change Password Logout s[nama ] List courses s 001 002 Option Workspace Workspace Gambar 4-17 Tampilan role Pada sudut kanan atas, terdapat tiga link yaitu: a. s: untuk melihat list s yang diikuti b. Change Password: untuk mengganti password c. Logout: berfungsi untuk keluar dari sesi Pada halaman utama, terdapat list dari s yang diikuti. Pada bagian option di setiap s, terdapat link Workspace. Link Workspace jika diklik akan membawa ke halaman Workspace. 3. Instructor Interface (s Management) Ketika Login, user dengan role Instructor akan melihat tampilan berikut di web browser: 37
Instructor Change Password Logout s Management List courses s Option 001 002 4 2 Edit Edit s Workspace s Workspace Gambar 4-18 Halaman Management Instructor akan diarahkan menuju halaman Management. Pada halaman Management, terdapat 3 kolom utama yaitu s, dan Option. Kolom s menampilkan apa saja yang telah ada, kolom menampilkan jumlah murid yang tergabung dalam tersebut, sedangkan pada kolom Option, terdapat tiga link yaitu Edit,, dan Workspace. 4. Instructor Interface ( Management) Pada menu Management, jika link s dipilih, maka akan langsung diarahkan menuju halaman Management. Berikut tampilan dari halaman Management. 38
Instructor Change Password s001 Management Add Name Options [Nama ] [Nama ] Drop Drop Workspace Workspace Gambar 4-19 Management Pada halaman Management, terdapat dua kolom utama yaitu Name dan Options. Kolom Name menampilkan siapa saja user/ murid yang mengikuti tersebut, sedangkan kolom Options memiliki menu untuk melakukan Drop ( Delete ) maupun menuju ke Workspace dari user/ murid. Terdapat menu Add, fungsinya untuk menambahkan user/ murid ke dalam tersebut. 5. Workspace Interface Workspace merupakan halaman di mana Linux Container ditampilkan melalui web browser. Halaman Workspace menampilkan terminal emulator yang terhubung dengan Linux Container yang terdapat pada server. 39
s Change Password Logout s001 Workspace Welcome to Ubuntu 16.04 (GNU/ Linux 3.13 Generic x86_64) student@ubuntu1604: Gambar 4-20 Workspace Interface 40