Berikut adalah navigation diagram ketika memilih new dari layar staff management:

(1)

Gambar 3.58 Navigation Diagram Edit Video Detail

Berikut adalah navigation diagram ketika memilih submenu staff management dari menu setting:

Gambar 3.59 Navigation Diagram Submenu Staff Management

(2)

Gambar 3.60 Navigation Diagram New Staff Detail

Berikut adalah navigation diagram ketika memilih edit dari layar staff management:

Gambar 3.61 Navigation Diagram Edit Staff Detail

Berikut adalah navigation diagram ketika memilih submenu list table dari menu setting:

(3)

Gambar 3.62 Navigation Diagram Submenu List Table

Berikut adalah navigation diagram ketika memilih submenu category dari submenu list table:

(4)

Pilih Menu Administration Tampilkan Menu Administration

Pilih Close Kembali ke Menu Utama Main Menu

(Menu Utama)

Layar Category Pilih Submenu Category Tampilkan Layar Category

Setting

Submenu List Table Pilih Submenu List Table Tampilkan option Submenu List Table

Pilih No Kembali ke Layar Category

Konfirmasi Pilih Delete

Tampilkan Konfirmasi

Data Terhapus

Piilh Yes Hapus Data dari Database Proses Selesai

Kembali ke Layar Category Text Category Enable

Button New Disable Button Edit Disable Button Save Enable Button Cancel Enable

Pilih New Text Category Kosong

Pilih Edit Text Category dirisi sesuai List yang dipilih

Setting Selesai

Data Tersimpan Pilih Save Simpan Data ke Database

Text Category Disable Button New Enable Button Edit Enable Button Save Disable

Button Cancel Disable _{Setting disable}Pilih Cancel Proses Selesai Kembali ke Layar Category

Gambar 3.63 Navigation Diagram Submenu Category

(5)

6. Navigation Diagram untuk Menu Windows

Main Menu (Menu Utama)

Windows Pilih Menu Windows Tampilkan Menu Windows

Proses Selesai Kembali ke Menu Utama

Cascade

Tile Vertical

Tile Horizontal

Arrange Icons

Close All Pilih Submenu Cascade

Tampilan windows yang terbuka menjadi Cascade

Pilih Submenu Tile Vertical Tampilan windows yang terbuka

menjadi Tile Vertical

Pilih Submenu Tile Horizontal Tampilan windows yang terbuka

menjadi Tile Horizontal

Pilih Submenu Arrange Icons Tampilan windows yang di-minimize

menjadi teratur

Pilih Submenu Close All Tutup semua windows yang terbuka

Gambar 3.64 Navigation Diagram Submenu Windows

7. Navigation Diagram untuk Menu Help

(6)

3.6.8.4. Perancangan Modul

Modul : main

Fungsi : Menjalankan aplikasi utama Parameter Input : -

Parameter Output : - bukaKoneksiDatabase frmLogin.formLoad

End modul main

Modul : bukaKoneksiDatabase

Fungsi : Membuka koneksi ke database Parameter Input : connectionString

Parameter Output : -

Buka koneksi ke database sesuai dengan connectionString

End modul bukaKoneksiDatabase

Modul : frmLogin.formLoad

Fungsi : menjalankan form frmLogin Parameter Input : -

Tampilkan form frmLogin

End modul frmLogin.formLoad

Modul : frmLogin.btnLogin_Click

Fungsi : Melakukan aksi ketika tombol login ditekan Parameter Input : -

Jika CekAutentikasiStaff Maka

mdiIPTV.formLoad

Lainnya

Tampilkan pesan “Autentikasi gagal”

Selesai

End modul frmLogin.btnLogin_Click

Modul : CekAutentikasiStaff

Fungsi : Memeriksa apakah staff dan passwordnya benar Parameter Input : ID staff, password staff

Parameter Output : Cek

Jika ID staff dan password staff sesuai dengan database Maka

Set Cek = benar

(7)

Set Cek = salah

Selesai

End modul CekAutentikasiStaff

Modul : mdiIPTV.formLoad

Fungsi : Menjalankan form mdiIPTV Parameter Input : -

Jika IsAdministrator Maka

Aktifkan menuSetting

Lainnya

Non-aktifkan menuSetting

Selesai

End modul mdiIPTV.formLoad

Modul : mdiIPTV.menuStaffChangePassword_Click

Fungsi : Melakukan aksi ketika menuStaffChangePassword dipilih Parameter Input : -

frmStaffChangePassword.formLoad

End modul mdiIPTV.menuStaffChangePassword_Click

Modul : mdiIPTV.menuLogout_Click

Fungsi : Melakukan aksi ketika menuLogout dipilih Parameter Input : -

Tutup form mdiIPTV frmLogin.formLoad

End modul mdiIPTV.menuLogout_Click

Modul : mdiIPTV.menuCustomerManagement_Click

Fungsi : Melakukan aksi ketika menuCustomerManagement dipilih Parameter Input : -

frmCustomerManagement.formLoad

End modul mdiIPTV.menuCustomerManagement_Click

Modul : mdiIPTV.menuCustomerChangePassword_Click

Fungsi : Melakukan aksi ketika menuCustomerChangePassword dipilih Parameter Input : -

(8)

frmCustomerChangePassword.formLoad

End modul mdiIPTV.menuCustomerChangePassword_Click

Modul : mdiIPTV.menuRequestChannel_Click

Fungsi : Melakukan aksi ketika menuRequestChannel dipilih Parameter Input : -

frmRequestChannel.formLoad

End modul mdiIPTV.menuRequestChannel_Click

Modul : mdiIPTV.menuRequestVideo_Click

Fungsi : Melakukan aksi ketika menuRequestVideo dipilih Parameter Input : -

frmRequestVideo.formLoad

End modul mdiIPTV.menuRequestVideo_Click

Modul : mdiIPTV.menuPayBilling_Click

Fungsi : Melakukan aksi ketika menuPayBilling dipilih Parameter Input : -

frmPayBilling.formLoad

End modul mdiIPTV.menuPayBilling_Click

Modul : mdiIPTV.menuBillingInformation_Click

Fungsi : Melakukan aksi ketika menuBillingInformation dipilih Parameter Input : -

frmBillingInformation.formLoad

End modul mdiIPTV.menuBillingInformation_Click

Modul : mdiIPTV.menuChannelSchedule_Click

Fungsi : Melakukan aksi ketika menuChannelSchedule dipilih Parameter Input : -

frmChannelSchedule.formLoad

End modul mdiIPTV.menuChannelSchedule_Click

Modul : mdiIPTV.menuNewsAndEvents_Click

(9)

Parameter Input : - Parameter Output : -

frmNewsAndEvents.formLoad

End modul mdiIPTV.menuNewsAndEvents_Click

Modul : mdiIPTV.menuChannel_Click

Fungsi : Melakukan aksi ketika menuChannel dipilih Parameter Input : -

frmChannel.formLoad

End modul mdiIPTV.menuChannel_Click

Modul : mdiIPTV.menuVideoOnDemand_Click

Fungsi : Melakukan aksi ketika menuVideoOnDemand dipilih Parameter Input : -

frmVideoOnDemand.formLoad

End modul mdiIPTV.menuVideoOnDemand_Click

Modul : mdiIPTV.menuStaffManagement_Click

Fungsi : Melakukan aksi ketika menuStaffManagement dipilih Parameter Input : -

frmStaffManagement.formLoad

End modul mdiIPTV.menuStaffManagement_Click

Modul : mdiIPTV.menuCategory_Click

Fungsi : Melakukan aksi ketika menuCategory dipilih Parameter Input : -

frmCategory.formLoad

End modul mdiIPTV.menuCategory_Click

Modul : mdiIPTV.menuAbout_Click

Fungsi : Melakukan aksi ketika menuAbout dipilih Parameter Input : -

frmAbout.formLoad

(10)

Modul : frmStaffChangePassword.formLoad

Fungsi : Menampilkan form frmStaffChangePassword Parameter Input : -

Set frmStaffChangePassword.txtStaffID = currentStaff.ID

End modul frmStaffChangePassword.formLoad

Modul : frmCustomerManagement.formLoad

Fungsi : Menampilkan form frmCustomerManagement Parameter Input : -

Tampilkan rincian semua customer yang ada di database

End modul frmCustomerManagement.formLoad

Modul : frmBillingInformation.formLoad

Fungsi : Menampilkan form frmBillingInformation Parameter Input : -

Tampilkan rincian pembayaran semua customer pada periode waktu tertentu

End modul frmBillingInformation.formLoad

Modul : frmChannelSchedule.formLoad

Fungsi : Menampilkan form frmChannelSchedule Parameter Input : -

Tampilkan jadwal acara dari database untuk tiap channel

End modul frmChannelSchedule.formLoad

Modul : frmNewsAndEvents.formLoad

Fungsi : Menampilkan form frmNewsAndEvents Parameter Input : -

Tampilkan semua news dan events dari database

End modul frmNewsAndEvents.formLoad

Modul : frmChannel.formLoad

Fungsi : Menampilkan form frmChannel Parameter Input : -

Tampilkan semua channel dari database

(11)

Modul : frmVideoOnDemand.formLoad

Fungsi : Menampilkan form frmVideoOnDemand Parameter Input : -

Tampilkan semua video dari database

End modul frmVideoOnDemand.formLoad

Modul : frmStaffManagement.formLoad

Fungsi : Menampilkan form frmStaffManagement Parameter Input : -

Tampilkan semua staff dari database

End modul frmStaffManagement.formLoad

Modul : frmCategory.formLoad

Fungsi : Menampilkan form frmCategory Parameter Input : -

Tampilkan semua category dari database

End modul frmCategory.formLoad

Modul : frmStaffChangePassword.btnClose_Click

Fungsi : Melakukan aksi ketika tombol close ditekan Parameter Input : -

Tutup form frmStaffChangePassword

End modul frmStaffChangePassword.btnClose_Click

Modul : frmCustomerManagement.btnClose_Click

Tutup form frmCustomerManagement

End modul frmCustomerManagement.btnClose_Click

Modul : frmCustomerChangePassword.btnClose_Click

(12)

Tutup form frmCustomerChangePassword

End modul frmCustomerChangePassword.btnClose_Click

Modul : frmRequestChannel.btnClose_Click

Tutup form frmRequestChannel

End modul frmRequestChannel.btnClose_Click

Modul : frmRequestVideo.btnClose_Click

Tutup form frmRequestVideo

End modul frmRequestVideo.btnClose_Click

Modul : frmPayBilling.btnClose_Click

Tutup form frmPayBilling

End modul frmPayBilling.btnClose_Click

Modul : frmBillingInformation.btnClose_Click

Tutup form frmBillingInformation

End modul frmBillingInformation.btnClose_Click

Modul : frmChannelSchedule.btnClose_Click

Tutup form frmChannelSchedule

End modul frmChannelSchedule.btnClose_Click

Modul : frmNewsAndEvents.btnClose_Click

(13)

Parameter Input : - Parameter Output : -

Tutup form frmNewsAndEvents

End modul frmNewsAndEvents.btnClose_Click

Modul : frmChannel.btnClose_Click

Tutup form frmChannel

End modul frmChannel.btnClose_Click

Modul : frmVideoOnDemand.btnClose_Click

Tutup form frmVideoOnDemand

End modul frmVideoOnDemand.btnClose_Click

Modul : frmStaffManagement.btnClose_Click

Tutup form frmStaffManagement

End modul frmStaffManagement.btnClose_Click

Modul : frmCategory.btnClose_Click

Tutup form frmCategory

End modul frmCategory.btnClose_Click

Modul : frmAbout.btnClose_Click

Tutup form frmAbout

(14)

Modul : frmStaffChangePassword.btnSave_Click

Fungsi : Melakukan aksi ketika tombol save ditekan Parameter Input : -

Jika txtPasswordLama ≠ GetStaffPassword Maka

Tampilkan pesan “Password Salah”

Lainnya, Jika txtPasswordBaru ≠ txtKonfirmasiPasswordBaru Maka

Tampilkan pesan “Password baru tidak sesuai”

Lainnya

Simpan password baru (txtPasswordBaru) ke database

Selesai

End modul frmStaffChangePassword.btnSave_Click

Modul : GetStaffPassword

Fungsi : Mengambil password staff dari database Parameter Input : ID staff

Parameter Output : password staff

Set password staff = password dari database untuk staff dengan ID staff ini

End modul GetStaffPasswordFromDatabase

Modul : frmCustomerManagement.btnNew_Click

Fungsi : Melakukan aksi ketika tombol new ditekan Parameter Input : -

frmCustomerDetail.formLoad

End modul frmCustomerManagement.btnNew_Click

Modul : frmCustomerManagement.btnEdit_Click

Fungsi : Melakukan aksi ketika tombol edit ditekan Parameter Input : -

frmCustomerDetail.formLoad

End modul frmCustomerManagement.btnEdit_Click

Modul : frmCustomerManagement.btnDelete_Click

Fungsi : Melakukan aksi ketika tombol delete ditekan Parameter Input : -

Hapus data customer dengan ID tersebut (sesuai yang dipilih dari grid) dari database

(15)

Modul : frmCustomerDetail.formLoad

Fungsi : Menampilkan form frmCustomerDetail Parameter Input : IsEdit, ID customer

Jika IsEdit Maka

Tampilkan rincian customer berdasarkan ID customer

Selesai

End modul frmCustomerDetail.formLoad

Modul : frmCustomerDetail.btnSave_Click

Simpan data customer ke dalam database Tutup form frmCustomerDetail

End modul frmCustomerDetail.btnSave_Click

Modul : frmCustomerDetail.btnClose_Click

Tutup form frmCustomerDetail

End modul frmCustomerDetail.btnClose_Click

Modul : frmCustomerChangePassword.btnSave_Click

Jika txtPasswordLama ≠ GetCustomerPassword Maka

Tampilkan pesan “Password Salah”

Lainnya, Jika txtPasswordBaru ≠ txtKonfirmasiPasswordBaru Maka

Tampilkan pesan “Password baru tidak sesuai”

Lainnya

Simpan password baru (txtPasswordBaru) ke database

Selesai

End modul frmCustomerChangePassword.btnSave_Click

Modul : GetCustomerPassword

Fungsi : Mengambil password customer dari database Parameter Input : ID customer

(16)

Parameter Output : password customer

Set password customer = password dari database untuk customer dengan ID customer ini

End modul GetCustomerPassword

Modul : frmRequestChannel.txtID_KeyPress

Fungsi : Melakukan aksi ketika tombol ditekan pada textbox ID Parameter Input : keycode

Jika keycode = enter Maka

Jika CekCustomerExists Maka

Tampilkan rincian channel yang direquest untuk ID customer ini

Lainnya

Tampilkan pesan “ID tidak ditemukan”

Selesai Selesai

End modul frmRequestChannel.txtID_KeyPress

Modul : CekCustomerExists

Fungsi : Memeriksa apakah ID customer ini ada di database Parameter Input : ID customer

Parameter Output : Cek

Jika ID customer terdapat dalam database Maka

Set Cek = benar

Lainnya

Set Cek = salah

End modul CekCustomerExists

Modul : frmRequestChannel.btnBrowse_Click

Fungsi : Melakukan aksi ketika tombol browse ditekan Parameter Input : -

frmFindCustomer.formLoad

End modul frmRequestChannel.btnBrowse_Click

Modul : frmFindCustomer.formLoad

Tampilkan semua customer dari database

(17)

Modul : frmFindCustomer.btnOK

Fungsi : Melakukan aksi ketika tombol OK ditekan Parameter Input : -

Parameter Output : ID customer

Kembalikan ID customer pada form pemanggil Tutup form frmFindCustomer

End modul frmFindCustomer.btnOK

Modul : frmFindCustomer.btnCancel

Fungsi : Melakukan aksi ketika tombol cancel ditekan Parameter Input : -

Tutup form frmFindCustomer

End modul frmFindCustomer.btnCancel

Modul : frmRequestChannel.btnRequest_Click

Fungsi : Melakukan aksi ketika tombol request ditekan Parameter Input : -

Tampilkan konfirmasi proses request

Jika hasil konfirmasi adalah OK Maka

Meminta inputan password customer

Jika password customer salah Maka

Tampilkan pesan “Proses request dibatalkan”

Lainnya

Simpan transaksi request pada database

Selesai Lainnya

Selesai

End modul frmRequestChannel.btnRequest_Click

Modul : frmRequestChannel.btnCancel_Click

Parameter Output : - Kosongkan isi form

End modul frmRequestChannel.btnCancel_Click

Modul : frmRequestVideo.txtID_KeyPress

(18)

Parameter Input : keycode Parameter Output : -

Tampilkan rincian video yang direquest untuk ID customer ini

Lainnya

End modul frmRequestVideo.txtID_KeyPress

Modul : frmRequestVideo.btnBrowse_Click

End modul frmRequestVideo.btnBrowse_Click

Modul : frmRequestVideo.cmbCategory_IndexChange

Fungsi : Melakukan aksi ketika index cmbCategory berubah Parameter Input : -

Tampilkan video sesuai dengan category yang dipilih

End modul frmRequestVideo.cmbCategory_IndexChange

Modul : frmRequestVideo.btnRequest_Click

Fungsi : Melakukan aksi ketika tombol request ditekan Parameter Input : -

Tampilkan konfirmasi proses request

Meminta inputan password customer

Jika password customer salah Maka

Lainnya

Simpan transaksi request pada database

Selesai Lainnya

Selesai

(19)

Modul : frmRequestVideo.btnCancel_Click

End modul frmRequestVideo.btnCancel_Click

Modul : frmPayBilling.txtID_KeyPress

Fungsi : Melakukan aksi ketika tombol ditekan pada textbox ID Parameter Input : keycode

Tampilkan rincian biaya yang telah direquest oleh ID customer ini

Lainnya

End modul frmPayBilling.txtID_KeyPress

Modul : frmPayBilling.btnBrowse_Click

End modul frmPayBilling.btnBrowse_Click

Modul : frmPayBilling.cmbYear_IndexChange

Fungsi : Melakukan aksi ketika index cmbYear berubah Parameter Input : -

Tampilkan rincian biaya sesuai dengan tahun yang dipilih

End modul frmPayBilling.cmbYear_IndexChange

Modul : frmPayBilling.cmbMonth_IndexChange

Fungsi : Melakukan aksi ketika index cmbMonth berubah Parameter Input : -

Tampilkan rincian biaya sesuai dengan bulan yang dipilih

(20)

Modul : frmPayBilling.btnPay_Click

Fungsi : Melakukan aksi ketika tombol pay ditekan Parameter Input : -

Tampilkan konfirmasi proses pembayaran

Simpan transaksi pembayaran pada database

Lainnya

Tampilkan pesan “Proses pembayaran dibatalkan”

Selesai

End modul frmPayBilling.btnPay_Click

Modul : frmPayBilling.btnCancel_Click

End modul frmPayBilling.btnCancel_Click

Modul : frmBillingInformation.cmbYear_IndexChange

Fungsi : Melakukan aksi ketika index cmbYear berubah Parameter Input : -

Tampilkan rincian biaya sesuai dengan tahun yang dipilih

End modul frmBillingInformation.cmbYear_IndexChange

Modul : frmBillingInformation.cmbMonth_IndexChange

Fungsi : Melakukan aksi ketika index cmbMonth berubah Parameter Input : -

Tampilkan rincian biaya sesuai dengan bulan yang dipilih

End modul frmBillingInformation.cmbMonth_IndexChange

Modul : frmChannelSchedule.btnPrev_Click

Fungsi : Melakukan aksi ketika tombol prev ditekan Parameter Input : -

Tampilkan jadwal acara tiap channel untuk satu hari sebelumnya

(21)

Modul : frmChannelSchedule.btnNext_Click

Fungsi : Melakukan aksi ketika tombol next ditekan Parameter Input : -

Tampilkan jadwal acara tiap channel untuk satu hari setelahnya

End modul frmChannelSchedule.btnNext_Click

Modul : frmChannelSchedule.btnSave_Click

Tampilkan konfirmasi proses simpan ke database

Simpan acara-acara untuk semua channel pada database

Lainnya

Tampilkan pesan “Proses penyimpanan dibatalkan”

Selesai

End modul frmChannelSchedule.btnSave_Click

Modul : frmChannelSchedule.btnCancel_Click

End modul frmChannelSchedule.btnCancel_Click

Modul : frmNewsAndEvents.btnNew_Click

frmNewsDetail.formLoad

End modul frmNewsAndEvents.btnNew_Click

Modul : frmNewsAndEvents.btnEdit_Click

frmNewsDetail.formLoad

(22)

Modul : frmNewsAndEvents.btnDelete_Click

Hapus news dengan ID tersebut (sesuai yang dipilih dari grid) dari database

End modul frmNewsAndEvents.btnDelete_Click

Modul : frmNewsDetail.formLoad

Fungsi : Menampilkan form frmNewsDetail Parameter Input : IsEdit, ID news

Tampilkan rincian news berdasarkan ID news

Selesai

End modul frmNewsDetail.formLoad

Modul : frmNewsDetail.btnSave_Click

Simpan data news ke dalam database Tutup form frmNewsDetail

End modul frmNewsDetail.btnSave_Click

Modul : frmNewsDetail.btnClose_Click

Tutup form frmNewsDetail

End modul frmNewsDetail.btnClose_Click

Modul : frmChannel.btnNew_Click

frmChannelDetail.formLoad

End modul frmChannel.btnNew_Click

Modul : frmChannel.btnEdit_Click

(23)

frmChannelDetail.formLoad

End modul frmChannel.btnEdit_Click

Modul : frmChannel.btnDelete_Click

Hapus channel dengan ID tersebut (sesuai yang dipilih dari grid) dari database

End modul frmChannel.btnDelete_Click

Modul : frmChannelDetail.formLoad

Fungsi : Menampilkan form frmChannelDetail Parameter Input : IsEdit, ID channel

Tampilkan rincian channel berdasarkan ID channel

Selesai

End modul frmChannelDetail.formLoad

Modul : frmChannelDetail.btnSave_Click

Simpan data channel ke dalam database Tutup form frmChannelDetail

End modul frmChannelDetail.btnSave_Click

Modul : frmChannelDetail.btnClose_Click

Tutup form frmChannelDetail

End modul frmChannelDetail.btnClose_Click

Modul : frmVideoOnDemand.btnNew_Click

frmVideoDetail.formLoad

(24)

Modul : frmVideoOnDemand.btnEdit_Click

frmVideoDetail.formLoad

End modul frmVideoOnDemand.btnEdit_Click

Modul : frmVideoOnDemand.btnDelete_Click

Hapus video dengan ID tersebut (sesuai yang dipilih dari grid) dari database

End modul frmVideoOnDemand.btnDelete_Click

Modul : frmVideoDetail.formLoad

Fungsi : Menampilkan form frmVideoDetail Parameter Input : IsEdit, ID video

Tampilkan rincian video berdasarkan ID video

Selesai

End modul frmVideoDetail.formLoad

Modul : frmVideoDetail.btnSave_Click

Simpan data video ke dalam database Tutup form frmVideoDetail

End modul frmVideoDetail.btnSave_Click

Modul : frmVideoDetail.btnClose_Click

Tutup form frmVideoDetail

(25)

Modul : frmStaffManagement.btnNew_Click

frmStaffDetail.formLoad

End modul frmStaffManagement.btnNew_Click

Modul : frmStaffManagement.btnEdit_Click

frmStaffDetail.formLoad

End modul frmStaffManagement.btnEdit_Click

Modul : frmStaffManagement.btnDelete_Click

Hapus staff dengan ID tersebut (sesuai yang dipilih dari grid) dari database

End modul frmStaffManagement.btnDelete_Click

Modul : frmStaffDetail.formLoad

Fungsi : Menampilkan form frmStaffDetail Parameter Input : IsEdit, ID staff

Tampilkan rincian staff berdasarkan ID staff

Selesai

End modul frmStaffDetail.formLoad

Modul : frmStaffDetail.btnSave_Click

Simpan data staff ke dalam database Tutup form frmStaffDetail

End modul frmStaffDetail.btnSave_Click

Modul : frmStaffDetail.btnClose_Click

(26)

Tutup form frmStaffDetail

End modul frmStaffDetail.btnClose_Click

Modul : frmCategory.btnNew_Click

Aktifkan txtType Set txtType = (kosong)

End modul frmCategory.btnNew_Click

Modul : frmCategory.btnEdit_Click

Aktifkan txtType

Set txtType = dengan category yang dipilih dari list

End modul frmCategory.btnEdit_Click

Modul : frmCategory.btnSave_Click

Simpan data category ke dalam database Non-aktifkan txtType

End modul frmCategory.btnSave_Click

Modul : frmCategory.btnCancel_Click

Non-aktifkan txtType

End modul frmCategory.btnCancel_Click

Modul : frmCategory.btnDelete_Click

Hapus category dengan ID tersebut (sesuai yang dipilih dari list) dari database

(27)

3.6.9. Perancangan Front End Sistem IPTV

Bagian ini membahas perancangan yang akan dilakukan untuk pembuatan front end sistem IPTV.

3.6.9.1. Perancangan Struktur Menu

Dalam perancangan front end sistem IPTV, menu-menunya akan dirancang seperti berikut:

Channel List

Video

Video List Channel Schedule Request

Media Administration Configuration About Layar Utama Channel Mulai

Gambar 3.66 Struktur Menu Front End Berikut adalah penjelasan dari masing-masing menu tersebut:

Layar Utama: Layar ini adalah layar pertama yang dilihat oleh pelanggan ketika

(28)

− Menu Channel List adalah menu yang berisi daftar channel serta preview dari channel yang telah dipesan oleh pelanggan. Dari menu ini, pelanggan juga dapat langsung menonton dan sekaligus merekam channel yang dipilih.

− Menu Video List adalah menu yang berisi daftar video serta preview dari video yang

telah dipesan oleh pelanggan. Dari menu ini, pelanggan juga dapat langsung menonton dan sekaligus merekam video yang dipilih.

− Menu Channel Schedule adalah menu yang berisi jadwal-jadwal siaran dari setiap channel yang terdaftar.

− Menu Request adalah menu yang dapat digunakan pelanggan untuk memesan video atau channel. Terdapat dua submenu, yaitu video dan channel:

Submenu Video dapat digunakan pelanggan untuk memesan video yang tersedia

di server.

Submenu Channel dapat digunakan pelanggan untuk memesan channel yang tersedia di server.

− Menu Media adalah menu yang berisi daftar media yang pernah direkam oleh

pelanggan sebelumnya pada menu Channel List atau Video List.

− Menu Administration adalah menu yang berisi detail tagihan untuk bulan berjalan.

− Menu Configuration adalah menu yang berfungsi untuk mengubah password pelanggan.

(29)

3.6.9.2. Perancangan Layar

1. Layar Channel List

Gambar 3.67 Layar Channel List

Layar ini adalah layar yang menampilkan seluruh daftar channel yang telah dipesan oleh pelanggan. Pelanggan dapat menekan tombol up atau down untuk memilih channel yang diinginkan, lalu dapat menekan tombol accept untuk memilih channel dan menonton dalam modus fullscreen.

(30)

2. Layar Video List

Gambar 3.68 Layar Video List

Layar ini adalah layar yang menampilkan seluruh daftar video yang telah dipesan oleh pelanggan. Pelanggan dapat menekan tombol up atau down untuk memilih video yang diinginkan, lalu dapat menekan tombol accept untuk memilih video dan menonton dalam modus fullscreen.

(31)

3. Layar Channel Schedule

Gambar 3.69 Layar Channel Schedule

Layar ini adalah layar yang menampilkan seluruh jadwal channel yang tersedia. Untuk memilih tanggal, pelanggan dapat menekan tombol left ataupun right. Untuk melihat keseluruhan jadwal, dapat menekan tombol up maupun down.

(32)

4. Layar Request

Gambar 3.70 Layar Request

Layar ini adalah layar yang dapat digunakan pelanggan untuk me-request channel ataupun video. Pelanggan dapat memilih video atau channel. Apabila pelanggan memilih video, maka pelanggan dapat memilih kategori video dengan menekan tombol left atau right, lalu menekan tombol accept untuk memilih video yang diinginkan. Apabila pelanggan memilih channel, maka dapat langsung memilih channel yang diinginkan. Pelanggan dapat menekan tombol up atau down untuk memilih video atau channel yang dipilih, lalu menekan tombol accept untuk memilih video atau channel. Tekan tombol back untuk kembali ke menu sebelumnya. Terdapat konfirmasi apabila pelanggan memilih satu atau lebih video atau channel. Video atau channel yang dipilih dapat langsung disaksikan pada menu channel list dan video list.

(33)

5. Layar Media

Gambar 3.71 Layar Media

Layar ini adalah layar yang digunakan pelanggan untuk menonton kembali channel atau video yang telah direkam, ketika pelanggan menggunakan modus perekaman dalam layar channel atau layar video.

(34)

6. Layar Administration

Gambar 3.72 Layar Administration

Pada layar ini akan ditampilkan daftar channel dan video yang di-request oleh pelanggan pada bulan tersebut. Layar ini ditujukan agar pelanggan dapat mengetahui berapa jumlah uang yang harus dibayarkan dalam bulan tersebut.Disini pelanggan juga dapat mengetahui tanggal berapa request untuk channel dan video tersebut dilakukan.

(35)

7. Layar Configuration

Gambar 3.73 Layar Configuration

Layar ini ditujukan untuk mengganti password pelanggan. Ada tiga tahapan dalam penggantian password. Tahap pertama, pelanggan harus memasukkan password lamanya. Tahap kedua, pelanggan harus memasukkan password barunya. Dan tahap ketiga, pelanggan harus memasukkan kembali password barunya sebagai pencegahan terjadinya kesalahan dalam pengetikan. Setelah ketiga tahap ini dilalui, maka password baru pelanggan akan disimpan kedalam database.

(36)

8. Layar About

Gambar 3.74 Layar About

Layar ini ditujukan untuk menampilkan pembuat aplikasi ini dan sekaligus sebagai bukti bahwa aplikasi ini merupakan aplikasi buatan sendiri.

3.6.9.3. Perancangan Navigation Diagram

(37)

(38)

1. Navigation Diagram untuk Menu Channel List

Gambar 3.76 Navigation Diagram Menu Channel List

2. Navigation Diagram untuk Menu Video List

(39)

3. Navigation Diagram untuk Menu Channel Schedule

Channel Schedule Pilih Menu Channel Schedule

Tampilkan Layar Channel Schedule

Tekan Back Kembali ke Menu Utama

Tekan Down

Tampilkan Jadwal Tayang Berikutnya

Tekan Right Tampilkan jadwal tayang

hari berikutnya Tekan Left Tampilkan jadwal tayang

hari sebelumnya

Tekan Up

Tampilkan Jadwal Tayang Sebelumnya

Gambar 3.78 Navigation Diagram Menu Channel Schedule

4. Navigation Diagram untuk Menu Request

Request Pilih Menu Request

Tampilkan Layar Request

Video Category

Channel Pilih Video

Tampilkan Category dan Video yang tersedia

Pilih Channel

Tampilkan Channel yang tersedia Tekan Back Kembali ke Layar Request

(40)

5. Navigation Diagram untuk Menu Request ketika memilih Video

Request

Video Category Pilih Video

Tampilkan Category dan Video yang tersedia

Tekan Back Kembali ke Layar Request

Video Tekan Accept

Pilih Video yang ingin di-request

Tekan Kanan Pilih Category berikutnya Tekan Kiri

Pilih Category sebelumnya

Tekan Kanan Memilih / Membatalkan Video

untuk di-request Tekan Back

Me-request Video (jika ada yang dipilih) Dan kembali ke Video Category

Tekan Atas / Bawah Memilih Video untuk di-request

Gambar 3.80 Navigation Diagram Menu Request Video

6. Navigation Diagram untuk Menu Request ketika memilih Channel

Request

Channel Pilih Channel

Tampilkan Channel yang tersedia

Tekan Kanan

Memilih / Membatalkan Channel untuk di-request Tekan Back

Me-request Channel (jika ada yang dipilih) Dan kembali ke Layar Request

Tekan Atas / Bawah Memilih Channel untuk di-request

(41)

7. Navigation Diagram untuk Menu Media

Media Pilih Menu Media

Tampilkan Layar Media

Tekan Down Pilih Media berikutnya

Tekan Up Pilih Media sebelumnya

Tekan Accept Tampilkan Media fullscreen

Tekan Record Delete Media

Tekan Pause

Menghentikan Media sementara / melanjutkan Media

Tekan Mute Menghilangkan suara / mengembalikan suara

Tekan Volume Mengatur besar suara

Tekan Nomor(1-9) Tampilkan Media yang sesuai nomor

(42)

8. Navigation Diagram untuk Menu Configuration

Gambar 3.83 Navigation Diagram Menu Configuration

9. Navigation Diagram untuk Menu About

(43)

3.6.9.4. Perancangan Modul

Modul : main

Fungsi : Menjalankan aplikasi utama Parameter Input : -

Parameter Output : - bukaKoneksiDatabase mdiIPTV.formLoad

End modul main

Modul : bukaKoneksiDatabase

Fungsi : Membuka koneksi ke database Parameter Input : connectionString

Buka koneksi ke database sesuai dengan connectionString

End modul bukaKoneksiDatabase

Modul : RunStoredProcedure

Fungsi : Menjalankan sebuah stored procedure dari database Parameter Input : procedureName

Parameter Output : result

Jalankan stored procedure sesuai nama procedure

End modul RunStoredProcedure

Modul : GetVideoChannelByCustomer

Fungsi : Mengambil daftar video atau channel berdasarkan pelanggan Parameter Input : sender

Parameter Output : targetDT

Jika sender = btnMenuVideo Maka

Set result = RunStoredProcedure IPTV_GetCustomerRequestedVideo

Lainnya

Set result = RunStoredProcedure IPTV_GetCustomerRequestedChannel

Selesai

Set targetDT = result

End modul GetVideoChannelByCustomer

Modul : FillVideoChannelList

Fungsi : Mengambil daftar video atau channel Parameter Input : sender

Parameter Output : targetDT

(44)

Set result = RunStoredProcedure IPTV_GetVideoForRequest

Lainnya

Set result = RunStoredProcedure IPTV_GetChannelForRequest

Selesai

Set targetDT = result

End modul GetVideoChannelByCustomer

Modul : mdiIPTV.formLoad

Fungsi : Menjalankan form mdiIPTV Parameter Input : -

frmMenus.formLoad

End modul mdiIPTV.formLoad

Modul : frmMenus.formLoad

Fungsi : Menjalankan form frmMenus Parameter Input : -

Tampilkan semua button menu

End Modul frmMenus.formLoad

Modul : frmMenus.btnMenu_Click

Fungsi : Melakukan action apabila tombol menu di klik Parameter Input : btnMenu

Jika btnMenu = btnMenuVideo or btnMenu = btnMenuChannel Maka

frmChannels.formLoad

Lainnya, Jika btnMenu = btnMenuRequest Maka

frmRequests.formLoad

Lainnya, Jika btnMenu = btnMenuSchedule Maka

frmSchedules.formLoad

Lainnya, Jika btnMenu = btnMenuMedia Maka

frmMedia.formLoad

Lainnya, Jika btnMenu = btnMenuAdministration Maka

frmAdministration.formLoad

Lainnya, Jika btnMenu = btnMenuConfiguration Maka

frmConfiguration.formLoad

Lainnya, Jika btnMenu = btnMenuAbout Maka

frmAbout.formLoad

Selesai

(45)

Modul : frmChannels.formLoad

Fungsi : Menjalankan form frmChannels Parameter Input : -

GetVideoChannelByCustomer btnMenu Play channel / video

End Modul frmChannels.formLoad

Modul : frmChannels.btnChannel_KeyDown

Fungsi : Melakukan action apabila menekan tombol pada keyboard Parameter Input : keycode

Jika keycode = Q Maka

Tutup frmChannels

Lainnya, Jika keycode = + Maka

Tambah volume channel / video

Lainnya, Jika keycode = - Maka

Kurangi volume channel / video

Lainnya, Jika keycode = M Maka

Jika muted Maka

Set volume menjadi unmute

Lainnya

Set volume menjadi mute

Selesai

Lainnya, Jika keycode = W Maka

Pilih channel / video sebelumnya

Lainnya, Jika keycode = S Maka

Pilih channel / video selanjutnya

Lainnya, Jika keycode = A Maka

Pilih 5 channel / video sebelumnya

Lainnya, Jika keycode = D Maka

Pilih 5 channel / video selanjutnya

Lainnya, Jika keycode > 0 dan keycode < 9 Maka

Pilih nomor channel / video sesuai keycode

Lainnya, Jika keycode = P Maka

Jika paused Maka

Play channel / video

Lainnya

Pause channel / video

Selesai

Lainnya, Jika keycode = E Maka

Jika fullscreen Maka

Set ukuran channel menjadi normal

Lainnya

Set ukuran channel menjadi fullscreen

(46)

Lainnya, Jika keycode = R Maka Jika recording Maka

Berhenti rekam channel

Lainnya

Mulai rekam channel

End Modul frmChannels.btnChannel_KeyDown

Modul : frmRequests.formLoad

Fungsi : Menjalankan form frmRequests Parameter Input : -

FillVideoChannelList btnRequestVideo

Ulangi untuk setiap channel / video

Jika sudah pernah dipesan Maka

Tampilkan masa aktif

End Modul frmRequests.formLoad

Modul : frmRequests.btnRequest_KeyDown

Fungsi : Melakukan action jika menekan tombol pada keyboard Parameter Input : keycode

Jika keycode = S Maka

FillVideoChannelList btnRequestChannel

FillVideoChannelList btnRequestVideo

Pilih kategori (frmRequests.btnCategory_KeyDown)

Lainnya, Jika keycode = A Or keycode = Q Maka

Tutup frmRequests

Selesai

End Modul frmRequests.btnRequest_KeyDown

Modul : frmRequests.btnCategory_KeyDown

Jika keycode = E Maka

Pilih channel / video (frmRequests.List_KeyDown)

(47)

Pilih kategori sebelumnya

Pilih kategori selanjutnya

Lainnya, Jika keycode = Q Maka

Pilih jenis request (frmRequests.btnRequest_KeyDown)

Selesai

End Modul frmRequests.btnCategory_KeyDown

Modul : frmRequests.List_KeyDown

Jika keycode = W Maka

Pilih item sebelumnya

Pilih item selanjutnya

Jika selected Maka

Unselect item

Lainnya

Select item

Selesai

Jika terdapat item yang diselect Maka Jika konfirmasi = setuju Maka

Ulangi untuk setiap item yang diselect

RunStoredProcedure IPTV_CreateTrCustomer

Selesai

Pilih kategori (frmRequests.btnCategory_KeyDown)

Selesai

End Modul frmRequests.List_KeyDown

Modul : frmSchedules.LoadSchedules

Fungsi : Menjalankan form frmSchedules Parameter Input : date

RunStoredProcedure IPTV_GetChannelName

Ulangi untuk setiap channel

Set result = RunStoredProcedure

IPTV_GetProgramNameByChannelStart

Selesai

(48)

End Modul frmSchedules.LoadSchedules

Modul : frmSchedules.formLoad

Fungsi : Menjalankan form frmSchedules Parameter Input : -

frmSchedules.LoadSchedules

End Modul frmSchedules.formLoad

Modul : frmSchedules.btnNavigation_KeyDown

Jika keycode = D Maka

frmSchedules.LoadSchedules (day + 1)

frmSchedules.LoadSchedules (day – 1)

Scroll ke bawah

Tutup frmSchedules

Selesai

End Modul frmSchedules.btnNavigation_KeyDown

Modul : frmMedia.formLoad

Fungsi : Menjalankan form frmMedia Parameter Input : -

frmMedia.GetMediaRecorded Play media

End Modul frmMedia.formLoad

Modul : frmMedia.GetMediaRecorded

Fungsi : Mengambil semua media yang pernah direkam Parameter Input : -

Ulangi untuk setiap file di direktori rekam Jika file extension = avi Maka

Tambah file ke daftar media

(49)

Modul : frmMedia.btnMedia_KeyDown

Fungsi : Melakukan action apabila menekan tombol pada keyboard Parameter Input : keycode

Jika keycode = Q Maka

Tutup frmMedia

Lainnya, Jika keycode = + Maka

Tambah volume media

Lainnya, Jika keycode = - Maka

Kurangi volume media

Lainnya, Jika keycode = M Maka

Jika muted Maka

Set volume menjadi unmute

Lainnya

Set volume menjadi mute

Selesai

Pilih media sebelumnya

Pilih media selanjutnya

Pilih 5 media sebelumnya

Pilih 5 media selanjutnya

Lainnya, Jika keycode > 0 dan keycode < 9 Maka

Pilih nomor media sesuai keycode

Lainnya, Jika keycode = P Maka

Jika paused Maka

Play media

Lainnya

Pause media

Selesai

Jika fullscreen Maka

Set ukuran media menjadi normal

Lainnya

Set ukuran media menjadi fullscreen

Selesai

Lainnya, Jika keycode = R Maka

Jika konfirmasi delete = yes Maka

Hapus file rekaman

(50)

Modul : frmAdministration.formLoad

Fungsi : Menjalankan form frmAdministration Parameter Input : -

Tampilkan tagihan bulan saat itu

End Modul frmAdministration.formLoad

Modul : frmConfiguration.formLoad

Fungsi : Menjalankan form frmConfiguration Parameter Input : -

Meminta inputan password

End Modul frmConfiguration.formLoad

Modul : frmAbout.formLoad

Fungsi : Menjalankan form frmAbout Parameter Input : -

Tampilkan Halaman About