BAB 4 RENCANA IMPLEMENTASI. Client yaitu User Interface dan Function, dimana komponen User Interface

Transkripsi

1 BAB 4 RENCANA IMPLEMENTASI 4.1 Component Diagram Content Management System yang dikembangkan ini akan diimplementasikan dalam arsitektur Client Server. Komponen yang terdapat pada Client yaitu User Interface dan Function, dimana komponen User Interface tersebut bertugas untuk mengatur User Interface yang dipergunakan oleh Client sedangkan komponen Function yang terdapat pada Client merupakan komponen yang mengatur fungsi fungsi yang dijalankan pada Client dan juga untuk mengirimkan request yang diberikan oleh Client terhadap Server. Pada Server terdapat 3 komponen yaitu, User interface, Function dan Model. Komponen User Interface tersebut merupakan komponen yang mengatur User Interface yang dipergunakan oleh Server dalam melakukan pengelolaan terhadap System. Komponen Function merupakan komponen yang mengatur fungsi fungsi yang dijalankan oleh Server dan memproses request yang diberikan oleh Client terhadap Server. Sedangkan komponen Model merupakan komponen yang mengatur database yang dimiliki oleh sistem tersebut. Berikut merupakan gambar Component Diagram dari sistem yang dikembangkan, yaitu: 230

2 231 <<component>>client <<component>> User Interface <<component>> Function_Client <<component>>server <<component>> User Interface <<component>> Function_Server <<component>> Model Gambar 4.1 Component Diagram 4.2 Deployment Diagram Dari spesifikasi software dan hardware sederhana pada Supplementary Requirements di Bab 3, maka ditentukan beberapa node dan Server yang akan dipergunakan untuk mengakses sistem yang dikembangkan ini. Client akan terhubung ke Web Server melalui jaringan Internet. Server terdiri dari Web Server yang mengatur request yang diberikan oleh Client dan juga terdapat Database Server yang mengatur akses dan penyimpanan Database yang diperlukan dalam mengelola sistem yang dikembangkan ini. Berikut merupakan gambar Deployment Diagram yang menunjukkan hubungan antara Client dengan Web Server dan Database Server.

3 232 Database Server <<Local Area Network>> Client Web server <<Internet>> Gambar 4.2 Deployment Diagram 4.3 Prototipe User Interface Dikembangkan pula Prototipe User Interface yang dibedakan berdasarkan fungsi fungsi yang ada seperti Login, Pendaftaran, Maintain Category, Maintain Content, Maintain Comment, Maintain System User, Maintain Event, View Event, Maintain News, View News dan juga Search. Selain itu, beberapa fungsi akan dibedakan berdasarkan kategori Usernya yaitu Public User, Member, Author, Admin, dan ReViewer sesuai dengan Hak Akses yang dimiliki oleh masing masing kategori User tersebut Contoh User Interface untuk Fungsi Login Public User yang telah melakukan pendaftaran, dapat melakukan Login sesuai dengan Kategori Usernya masing masing. Menu Login akan muncul pada setiap halaman Web yang akan memberikan kemudahan kepada User untuk menjalankan fungsi ini. Contoh tampilan layar menu Login akan ditunjukkan

4 233 melalui tampilan layar Home (Gambar 4.3). Setelah melakukan Login, tampilan awal dari masing masing kategori User tersebut adalah berbeda sesuai dengan hak akses masing masing. Tampilan layar menu Home Admin dapat dilihat pada Gambar 4.4, Home Author pada Gambar 4.5, Home ReViewer pada Gambar 4.6, dan Home Member pada Gambar 4.7.

5 Gambar 4.3 Contoh Tampilan Layar untuk Fungsi Login (Halaman Home) 234

6 235 Gambar 4.4 Contoh Tampilan Layar untuk Home Admin Gambar 4.5 Contoh Tampilan Layar untuk Home Author

7 236 Gambar 4.6 Contoh Tampilan Layar untuk Home ReViewer Gambar 4.7 Contoh Tampilan Layar untuk Home - Member

8 Contoh User Interface untuk Fungsi Pendaftaran Public User yang hendak menjadi System User dapat melakukan pendaftaran melalui Link Sign Up yang disediakan. Public User dapat memasukkan data pribadi yang diminta (Gambar 4.8), dan menunggu konfirmasi dari Admin mengenai status keanggotaannya, apakah di-approve atau di-reject. Gambar 4.8 Contoh Tampilan Layar untuk Fungsi Pendaftaran Contoh User Interface untuk Fungsi Maintain Category Fungsi Maintain Category merupakan salah satu fungsi yang hanya dapat dijalankan oleh Admin. Kategori yang terdapat pada sistem ini dapat ditambahkan, diubah atau dihapus sesuai dengan keperluannya. Contoh tampilan layar untuk fungsi ini dapat dilihat pada gambar 4.9. Ketika Admin memilih untuk melakukan fungsi Maintain Category, maka sistem akan menampilkan

9 238 satu halaman dimana di dalamnya terdapat kolom untuk menambahkan kategori dan juga untuk melihat seluruh kategori yang terdapat dalam sistem. Melalui halaman ini, Admin dapat melakukan perubahan dan penghapusan kategori. Gambar 4.9 Contoh Tampilan Layar untuk Fungsi Maintain Category Contoh User Interface untuk Fungsi Maintain Content Fungsi ini dapat dijalankan oleh semua Actor dengan hak akses yang berbedabeda. Keseluruhan Actor ini dapat melihat Content yang terdapat dalam sistem dan dapat melakukan penyimpanan Content, mengirimkannya kepada orang lain,

10 239 Mencetak Content, dan menambahkan Komentar untuk Content yang berkaitan tersebut. Sedangkan untuk ReViewer ditambahkan fasilitas ReView Content. Content yang ditampilkan tersebut dalam 3 jenis yaitu Content Article (Gambar 4.10), Content Link (Gambar 4.11) dan juga Content Other Format. Untuk Author, maka User ini dapat melakukan penambahan Content dan hanya dapat mengubah Content yang di masukkan oleh Author itu sendiri. Penambahan Content tersebut terbagi dalam 3 jenis, yaitu Article (Gambar 4.12), Link (Gambar 4.13), dan Other Format (Gambar 4.14). Khusus untuk Admin, akan ditambahkan fasilitas Arsip Content

11 Gambar 4.10 Contoh Tampilan Layar untuk Fungsi View Content - Article 240

12 Gambar 4.11 Contoh Tampilan Layar untuk Fungsi View Content Link 241

13 Gambar 4.12 Contoh Tampilan Layar untuk Fungsi Add Content Article 242

14 Gambar 4.13 Contoh Tampilan Layar untuk Fungsi Add Content link 243

15 244 Gambar 4.14 Contoh Tampilan Layar untuk Fungsi Add Content Other Format Contoh User Interface untuk Fungsi Maintain Comment Fungsi Maintain Comment merupakan fungsi yang dapat dilakukan oleh semua Actor untuk memberikan komentar kepada setiap Content yang ada. Selain itu, masing masing Actor tersebut dapat melakukan pengubahan dan penghapusan komentarnya masing masing, tetapi khusus untuk Admin dapat menghapus semua komentar yang ada. Setelah System User memilih Maintain Comment, maka akan ditampilkan suatu halaman yang berisikan informasi

16 245 mengenai seluruh komentar yang berhubungan dengan Content yang dipilih tersebut (Gambar 4.15). Melalui halaman tersebut, System User dapat melakukan penambahan Content, mengubah dan juga menghapus komentar. Gambar 4.15 Contoh Tampilan Layar untuk Fungsi Maintain Comment Contoh User Interface untuk Fungsi Maintain System User Fungsi Maintain System User ini dapat dijalankan oleh semua Actor, namun hanya Admin yang mempunyai hak untuk menambah, mengubah dan menghapus System User yang ada. Actor yang lainnya hanya dapat mengubah datanya sendiri. Ketika Admin memilih fungsi ini, maka akan ditampilkan suatu halaman yang memuat informasi mengenai seluruh User yang terdapat dalam sistem.

17 246 Melalui halaman tersebut, Admin dapat langsung melakukan pengubahan dan penghapusan System User (Gambar 4.16) Sedangkan untuk penambahan System User telah disediakan informasi mengenai Public User yang mendaftar pada halaman Home Admin. Setelah itu, Admin dapat melakukan Approve/Reject System User (Gambar 4.17) Gambar 4.16 Contoh Tampilan Layar untuk Fungsi Maintain System User

18 247 Gambar 4.17 Contoh Tampilan Layar untuk Fungsi Add System User Contoh User Interface untuk Fungsi Maintain Event Fungsi Maintain Event merupakan salah satu fungsi yang hanya dapat dijalankan oleh Admin. Event yang terdapat pada sistem ini dapat ditambahkan, diubah atau dihapus sesuai dengan keperluannya. Contoh tampilan layar untuk fungsi ini dapat dilihat pada gambar Ketika Admin memilih untuk melakukan fungsi Maintain Event, maka sistem akan menampilkan satu halaman dimana didalamnya terdapat kolom untuk menambahkan Event dan juga untuk melihat seluruh Event yang terdapat dalam sistem. Melalui halaman ini, Admin dapat melakukan perubahan dan penghapusan Event.

19 248 Gambar 4.18 Contoh Tampilan Layar untuk Fungsi Maintain Event Contoh User Interface untuk Fungsi View Event Fungsi ini dapat diakses dari setiap halaman, karena navigasinya diletakkan pada sebelah kanan Website. Jika User hendak melihat detail dari Event yang diselenggarakan, maka dapat mengklik judul dari Event tersebut dan akan ditampilkan suatu halaman detail Event (Gambar 4.19)

20 249 Gambar 4.19 Contoh Tampilan Layar untuk Fungsi View Event Contoh User Interface untuk Fungsi Maintain News Fungsi Maintain News merupakan salah satu fungsi yang hanya dapat dijalankan oleh Admin. News yang terdapat pada sistem ini dapat ditambahkan, diubah atau dihapus sesuai dengan keperluannya. Contoh tampilan layar untuk fungsi ini dapat dilihat pada gambar Ketika Admin memilih untuk melakukan fungsi Maintain News, maka sistem akan menampilkan satu halaman dimana didalamnya terdapat kolom untuk menambahkan News dan juga untuk melihat seluruh News yang terdapat dalam sistem. Melalui halaman ini, Admin dapat melakukan perubahan dan penghapusan News.

21 250 Gambar 4.20 Contoh Tampilan Layar untuk Fungsi Maintain News Contoh User Interface untuk Fungsi View News Fungsi ini dapat diakses dari setiap halaman, karena navigasinya diletakkan pada sebelah kanan Website. Jika User hendak melihat detail dari News, maka dapat mengklik judul dari News tersebut dan akan ditampilkan suatu halaman detail News (Gambar 4.21)

22 251 Gambar 4.21 Contoh Tampilan Layar untuk Fungsi View News Contoh User Interface untuk Fungsi Search Seluruh User dapat melakukan pencarian terhadap Content yang dimiliki oleh sistem ini. Menu ini dapat diakses pada setiap halaman pada bagian atas untuk Simple Search dan tampilah tengah tersebut merupakan menu yang dapat diakses untuk Advance Search(Gambar 4.22).

23 Gambar 4.22 Contoh Tampilan Layar untuk Fungsi Search 252