ii Universitas Kristen Maranatha
ABSTRACT
A project is generally done by a group of people. Everyone who joined in a projecthave their respective duties. Therefore we need an effective job description for the project to run optimally. These are usually present in the Job Description. The web application will answer all these problems. This application will resemble the merger forums and chat rooms, so everyone who joined in a project can communicate with ease, knowing the task of every person, every conversation will be recorded, it's easy to share the work.
Java programming language using Vaadin framework chosen, because it is easy to implement. Programmer who only has knowledge of Java to create web applications without the need to have knowledge about web programming, such as HTML, CSS, JavaScript, AJAX, jQuery, JSP. Hibernate technology is also used to be a liaison between the Java with the database. By using Hibernate, the application will not depend on a variety of databases. For example, such as migration from MySQL to Oracle, will be easy to implement.
iii Universitas Kristen Maranatha
ABSTRAK
Proyek pada umumnya dikerjakan oleh sekumpulan orang. Anggota yang tergabung dalam suatu proyek mempunyai tugasnya masing-masing. Rincian tugas yang efektif agar proyek dapat berjalan dengan optimal. Hal-hal tersebut biasanya terdapat dalam Job Description.
Aplikasi web akan menjawab semua permasalahan tersebut. Aplikasi ini akan menyerupai penggabungan forum dan chat room, sehingga setiap orang yang tergabung dalam suatu proyek dapat berkomunikasi dengan mudah, mengetahui tugas setiap orang, semua percakapan akan tercatat, mudah untuk share hasil pekerjaan.
Bahasa pemrograman Java dengan menggunakan frameworkVaadin dipilih, karena mudah untuk diimplementasikan. Programmer yang hanya memiliki pengetahuan Java dapat membuat aplikasi web tanpa perlu memiliki pengetahuan tentang web programming, seperti HTML, CSS, JavaScript, AJAX, jQuery, JSP. Teknologi Hibernate juga digunakan untuk menjadi penghubung antara Java dengan database. Dengan menggunakan Hibernate, aplikasi tidak akan tergantung pada 1 jenis database. Misalnya seperti migrasi dari MySQL ke Oracle, akan mudah untuk diimplementasikan.
iv Universitas Kristen Maranatha
1.5 Sistematika Pembahasan ... 2
1.6 Time Schedule ... 3
Bab II Dasar Teori 2.1 Job Description... 4
2.2 Java ... 4
2.2.1 Java Server Pages ... 5
2.3 Vaadin Framework ... 5
2.3.1 Vaadin Components ... 5
2.4 Database ... 9
2.6.4 Sequence Diagram. ... 18
v Universitas Kristen Maranatha
2.8 Flowchart ... 19
Bab III Analisa dan Pemodelan 3.1 Analisis Sistem... 21
3.2 Arsitektur Aplikasi ... 22
3.2.1 Flowchart Diagram ... 22
3.2.1.1 Flowchart Diagram Guest ... 22
3.2.1.2 Flowchart Diagram Admin & Normal User ... 24
3.2.1.3 Flowchart Diagram Project Manager & Member ... 25
3.2.2 Use Case Diagram ... 26
3.2.2.1 Use Case Diagram User Level ... 26
3.2.2.2 Use Case Diagram Guest ... 26
3.2.2.2.1 Use Case Register ... 27
3.2.2.2.2 Use Case Login... 27
3.2.2.3 Use Case Diagram Normal User & Admin... 28
3.2.2.3.1 Use Case Suspend User ... 28
3.2.2.3.2 Use Case Reactivate User ... 28
3.2.2.3.3 Use Case Update Self Data ... 29
3.2.2.3.4 Use Case Unregister ... 29
3.2.2.3.5 Use Case Send Private Message ... 29
3.2.2.3.6 Use Case Delete Private Message ... 29
3.2.2.3.7 Use Case Create Project ... 30
3.2.2.3.8 Use Case Open Project ... 30
3.2.2.4 Use Case Diagram Project Manager & Member ... 31
3.2.2.4.1 Use Case Update Project ... 32
3.2.2.4.2 Use Case Lock Project ... 32
3.2.2.4.3 Use Case Unlock Project ... 32
3.2.2.4.4 Use Case Delete Project ... 33
3.2.2.4.5 Use Case Create Task ... 33
3.2.2.4.6 Use Case Delete Task... 34
3.2.2.4.7 Use Case Post Task Comment ... 34
3.2.2.4.8 Use Case Create Chat Room ... 34
3.2.2.4.9 Use Case Update Chat Room ... 35
3.2.2.4.10 Use Case Delete Chat Room ... 35
vi Universitas Kristen Maranatha
3.2.2.4.12 Use Case Download File ... 36
3.2.2.4.13 Use Case Update File ... 36
3.2.2.4.14 Use Case Delete File ... 37
3.2.2.4.15 Use Case Add Project Member ... 37
3.2.2.4.16 Use Case Remove Project Member ... 38
3.2.3 State Diagram ... 38
3.2.3.1 State Diagram User ... 38
3.2.3.2 State Diagram Member ... 39
3.2.3.3 State Diagram Task... 40
3.2.4 Class Diagram ... 41
3.2.5 Sequence Diagram ... 42
3.2.5.1 Sequence Diagram User ... 42
3.2.5.2 Sequence Diagram Project ... 42
3.2.5.3 Sequence Diagram Task ... 43
3.2.6 ER Diagram ... 44
3.2.7 User Interface ... 45
Bab IV Perancangan dan Implementasi 4.1 Screenshoot User Interface ... 48
4.1.1 Halaman Utama / Login ... 48
4.1.2 Halaman Register ... 49
4.1.3 Halaman User Page ... 49
4.1.4 Halaman Control Panel ... 50
4.1.5 Halaman Inbox / Outbox ... 51
4.1.6 Halaman New Message ... 52
4.1.7 Halaman Project ... 52
4.1.8 Halaman Task ... 54
4.1.9 Halaman New Task ... 55
4.1.10 Halaman Detailed Task ... 56
4.1.11 Halaman Member ... 56
4.1.12 Halaman Chat Room ... 58
4.1.13 Halaman Chat ... 59
4.1.14 Halaman File ... 59
4.2 Implementasi Database ... 61
vii Universitas Kristen Maranatha
4.2.2.Entitas MessageBox ... 62
4.2.3.Entitas Message ... 62
4.2.4.Entitas ProjectMembership ... 62
4.2.5.Entitas Project ... 63
4.2.6.Entitas File ... 63
4.2.7.Entitas Chatroom ... 63
4.2.8.Entitas Task ... 64
4.2.9.Entitas TaskComment ... 64
4.2.10.Entitas LogActivity ... 64
Bab V Pengujian 5.1 BlackBox Testing ... 65
5.1.1.Test Register ... 65
5.1.2.Test Login ... 66
5.1.3.Test Send Message... 67
5.2 Kuisoner ... 68
Bab VI Kesimpulan dan Saran 6.1 Kesimpulan... 70
6.2 Saran ... 71
viii Universitas Kristen Maranatha
DAFTAR GAMBAR
Gambar 2.1 General Architecture of Vaadin ... 5
Gambar 2.2 Vaadin Component UI Basics ... …………6
Gambar 2.3 Vaadin Component Value Input Components ... 6
Gambar 2.4 Vaadin Component Forms and Data Model ... 7
Gambar 2.5 Vaadin Component Grids and Trees ... 7
Gambar 2.6 Vaadin Component Drag and Drop ... 7
Gambar 2.7 Vaadin Component Layout and Comoponent Containers ... 8
Gambar 2.8 Vaadin Component Windows Popups and Navigation ... 8
Gambar 2.9 DBMS... 9
Gambar 2.10 Contoh Entitas Mahasiswa ... 11
Gambar 2.11 Relasi Satu ke Satu ... 11
Gambar 2.12 Relasi Satu ke Banyak ... 11
Gambar 2.13 Relasi Banyak ke Satu ... 11
Gambar 2.14 Relasi Banyak ke Banyak ... 12
Gambar 2.15 Contoh Model ER ... 12
Gambar 2.16 Total Participation ... 12
Gambar 2.17 Partial Participation ... 12
Gambar 2.18 Lambang Sequence Diagram ... 18
Gambar 3.1 Flowchart Diagram Guest ... 22
Gambar 3.2 Flowchart Diagram Admin & Normal User ... 24
Gambar 3.3 Flowchart Diagram Project Manager & Member ... 25
Gambar 3.4 Use Case Diagram User Level ... 26
Gambar 3.5 Use Case Diagram Guest ... 26
Gambar 3.6 Use Case Diagram Normal User & Admin ... 28
Gambar 3.7 Use Case Diagram Project Manager & Member ... 31
Gambar 3.8 State Diagram User ... 38
Gambar 3.9 State Diagram Member ... 39
Gambar 3.10 State Diagram Task ... 40
Gambar 3.11 Class Diagram JobDesk ... 41
ix Universitas Kristen Maranatha
Gambar 3.13 Sequence Diagram Project ... 42
Gambar 3.14 Sequence Diagram Task ... 43
Gambar 3.15 ER Diagram JobDesk ... 44
Gambar 3.16 UI Halaman Awal ... 45
Gambar 3.17 UI Register Form ... 45
Gambar 3.18 UI User Page ... 46
Gambar 3.19 UI User Control Panel ... 46
Gambar 3.20 UI User Task Detail ... 47
Gambar 3.21 UI Chat Room ... 47
Gambar 4.1 Halaman Utama / Login ... 48
Gambar 4.2 Halaman Register ... 49
Gambar 4.3 Halaman User Page ... 49
Gambar 4.4 Halaman Control Panel... 50
Gambar 4.5 Halaman Inbox / Outbox ... 51
Gambar 4.6 Halaman Detailed Message ... 51
Gambar 4.7 Halaman New Message ... 52
Gambar 4.8 Halaman Awal Project 1 ... 52
Gambar 4.9 Halaman Awal Project 2 ... 53
Gambar 4.10 Halaman Awal Project 3 ... 53
Gambar 4.11 Halaman Awal Project 4 ... 54
Gambar 4.12 Halaman Task 1 ... 54
Gambar 4.13 Halaman Task 2 ... 55
Gambar 4.14 Halaman New Task ... 55
Gambar 4.15 Halaman Detailed Task ... 56
Gambar 4.16 Halaman Member 1 ... 56
Gambar 4.17 Halaman Member 2 ... 57
Gambar 4.18 Halaman Member 3 ... 57
Gambar 4.19 Halaman Chat Room... 58
Gambar 4.20 Halaman New Chat Room ... 58
Gambar 4.21 Halaman Chat ... 59
Gambar 4.22 Halaman File ... 59
Gambar 4.23 Halaman Upload File ... 60
x Universitas Kristen Maranatha
Gambar 4.25 Database JobDesk ... 61
Gambar 5.1 Flowchart Register ... 65
Gambar 5.2 Flowchart Login ... 66
xi Universitas Kristen Maranatha
DAFTAR TABEL
Tabel 2.1 Lambang Entity Relational Diagram ... 9
Tabel 2.2 Lambang Use Case Diagram ... 15
Tabel 2.3 Lambang State Diagram ... 16
Tabel 2.4 Lambang Class Diagram ... 17
Tabel 2.5 Lambang Flowchart Diagram ... 19
Tabel 3.1 Entitas User ... 21
Tabel 3.2 Entitas MessageBox... 21
Tabel 3.3 Entitas Message ... 21
Tabel 3.4 Entitas ProjectMembership ... 22
Tabel 3.5 Entitas Project ... 22
Tabel 3.6 Entitas File ... 22
Tabel 3.7 Entitas Chatroom... 23
Tabel 3.8 Entitas Task ... 23
Tabel 3.9 Entitas TaskComment ... 23
Tabel 4.1 EntitasUser ... 61
Tabel 4.2 EntitasMessageBox ... 62
Tabel 4.3 EntitasMessage ... 62
Tabel 4.4 Entitas ProjectMembership ... 62
Tabel 4.5 Entitas Project ... 63
Tabel 4.6 Entitas File ... 63
Tabel 4.7 Entitas Chatroom... 63
Tabel 4.8 Entitas Task ... 64
Tabel 4.9 Entitas TaskComment ... 64
Tabel 4.10 Entitas LogActivity ... 64
Tabel 5.1 Test Register ... 65
Tabel 5.2 Test Login ... 66
xii Universitas Kristen Maranatha
DAFTAR LAMPIRAN
1 Universitas Kristen Maranatha
BAB I PENDAHULUAN
Bab I akan menjelaskan tentang alasan mengapa penulis membuat aplikasi JobDesK.
1.1. Latar Belakang
Suatu proyek pada umumnya dikerjakan oleh sekumpulan orang. Setiap orang yang tergabung
dalam suatu proyek mempunyai tugasnya masing-masing. Untuk itu diperlukan rincian tugas yang
efektif agar proyek dapat berjalan dengan optimal. Hal-hal tersebut biasanya terdapat dalam Job Description.
Job description / deskripsi pekerjaan merupakan daftar tugas dan tanggung jawab dari setiap orang dalam suatu proyek. Job description dibuat berdasarkan analisis-analisis yang dibutuhkan pada
suatu proyek. Tujuan dibuatnya job description adalah agar setiap orang mengetahui tugas dan tanggung jawabnya, sehingga dapat mengerjakan bagiannya dengan fokus. Diharapkan dengan
adanya job description, maka proyek akan berjalan dengan optimal. Job description akan dibuat oleh
Project Manager (PM) dan disepakati oleh setiap anggotanya. Beberapa unsur yang terdapat dalam job description adalah nama proyek, tugas setiap bagian, wewenang setiap orang, jadwal penyelesaian, kompetensi dan kualifikasi yang dibutuhkan.
Job description pada umumnya berbentuk format cetak. Namun bagaimana dengan proyek yang dikerjakaan oleh orang-orang yang tidak berada dalam suatu wilayah, berbeda kota bahkan negara?
Solusinya adalah mengirimkan job description melalui surat, fax, e-mail. Namun solusi tersebut memiliki kekurangan, misalnya dokumen job description yang tidak diterima karena masalah pengiriman, hilangnya berkas dokumen, sulit untuk berkomunikasi, sulit untuk mengevaluasi hasil
perkerjaan. Solusi tambahan untuk masalah komunikasi adalah menggunakan telepon atau aplikasi
chatting.
Solusi yang ditawarkan adalah aplikasi berbasis web yang mencakup semua permasalahan
tersebut. Aplikasi ini akan menyerupai penggabungan forum dan chat room, sehingga setiap orang yang tergabung dalam suatu proyek dapat berkomunikasi dengan mudah, mengetahui tugas setiap
orang, semua percakapan akan tercatat, mudah untuk share hasil pekerjaan. Aplikasi ini diimplementasikan pada jaringan internet.
1.2. Rumusan Masalah
Permasalahan mengapa perlu adanya jobdesk adalah:
1. Bagaimana cara untuk berkomunikasi antar anggota di dalam suatu proyek dimana mereka
2 Universitas Kristen Maranatha 2. Bagaimana cara untuk memberi pengarahan suatu tugas dan tanggung jawab kepada setiap
anggota dalam suatu proyek?
3. Bagaimana cara untuk memantau perkembangan suatu proyek?
1.3. Tujuan
Tujuan dari pengaturan jobdesk adalah:
1. Diperlukan sesuatu yang dapat di akses oleh setiap anggota untuk dapat berkomunikasi
secara efisien dan optimal.
2. Diperlukan sesuatu yang dapat mencatat tugas, kewajiban, wewenang dari setiap anggota
yang telah disepakati.
3. Diperlukan sesuatu yang dapat mencatat setiap perkembangan proyek, beserta tempat
untuk menyimpan laporan hasil kerja yang bisa dilihat oleh setiap anggota, dan hal untuk
memeriksa deadline suatu proyek.
1.4. Batasan Masalah
1. Aplikasi harus diletakkan dalam server dan terhubung dengan jaringan internet.
2. Data yang dapat di-upload terbatas ukuran sizenya.
1.5. Sistematika Pembahasan
Sistematika penulisan laporan:
1. BAB I. PENDAHULUAN
Bab I akan menjelaskan latar belakang tentang alasan dibuatnya aplikasi dan sistematika
laporan.
2. BAB II. DASAR TEORI
Bab II akan menjelaskan mengenai dasar teori yang dipakai dalam pembuatan aplikasi.
3. BAB III. ANALISA DAN PEMODELAN
Bab III akan akan menjelaskan secara rinci rancangan aplikasi.
4. BAB IV. PERANCANGAN DAN IMPLEMENTASI
Bab IV akan menampilan screenshoot dari setiap fungsi aplikasi.
5. BAB V. PENGUJIAN
Bab V akan menjelaskan setiap hasil dari proses yang dilakukan aplikasi.
6. BAB VI. KESIMPULAN DAN SARAN
Bab VI akan berisi tentang kesimpulan dari pembuatan aplikasi, beserta permohonan saran
3 Universitas Kristen Maranatha
1.6. Time Schedule
KETERANGAN MULAI SELESAI
Pembuatan draft BAB I 20-Aug-10 27-Aug-10
Pembuatan draft BAB II 27-Aug-10 17-Sep-10
Pembuatan draft BAB III 14-Sep-10 17-Sep-10
Revisi BAB I-III 17-Sep-10 16-Nov-10
Revisi BAB I-III 16-Nov-10 23-Nov-10
Revisi BAB I-III Final 23-Nov-10 25-Nov-10
Pembuatan Draft Aplikasi 1-Jan-11 30-Jan-11
Revisi Aplikasi 30-Jan-11 30-Apr-11
Pembuatan BAB IV 30-Apr-11 15-May-11
Pembuatan BAB V 15-May-11 28-May-11
70 Universitas Kristen Maranatha
BAB VI KESIMPULAN DAN SARAN
Pada Bab VI akan dibahas mengenai kesimpulan dari hasil yang telah dicapai pada pembuatan
aplikasi JobDesk. Beserta saran untuk pengembangan aplikasi.
6.1. Kesimpulan
Aplikasi JobDesk diharapkan dapat mengoptimasi kerja setiap Project Manager maupun
Member untuk me-manageproject yang sedang dilakukan. Fitur-fitur aplikasi yang ada diharapkan
dapat memfasilitasi setiap pengguna untuk menetapkan tugas, berkomunikasi, bertukar data.
Perkembangan proyek diharapkan tidak terganggu ketika para anggota tidak dapat berkumpul di
suatu tempat, meskipun para anggota tim sedang berada di kota bahkan negara yang berbeda,
tetapi dengan akses internet setiap anggota dapat saling memantau perkembangannya. Pemberian
tanggung jawab juga diharapkan dapat dilakukan meskipun Project Manager tidak dapat bertemu
langsung dengan Member.
Penggunaan framework Vaadin bagi mereka yang memiliki pengetahuan Java, sangat mudah
untuk pembuat web application yang dinamis, karena tidak perlu memiliki pengetahuan bahasa web
programming, seperti HTML, CSS, AJAX, bahkan JSP sekalipun. Developer hanya akan bekerja di
lingkungan Java. Namun Developer ada baiknya memiliki beberapa pengetahuan web seperti CSS,
HTML, karena Vaadin dapat memfasilitasi pembuatan custom component sesuai yang dibutuhkan.
Framework Vaadin secara default telah memiliki hasil tampilan user interface yang menarik. Namun
memiliki tingkat kesulitan yang cukup sulit untuk memodifikasi tampilan Vaadin, seperti warna dan
bentuk.
Berbeda dengan rencana awal menggunakan bahasa web programming. Developer harus
memiliki pengetahuan HTML, CSS, AJAX, JavaScript, DHTML, jQuery, PHP untuk mengembangkan
aplikasi web yang dinamis. Hal ini menyebabkan penggantian platform menjadi Java menggunakan
framework Vaadin. Namun bila developer memiliki pengetahuan tentang web programming, aplikasi
web yang dihasilkan akan lebih mudah untuk melakukan customize sesuai dengan kebutuhan.
Teknologi Hibernate juga digunakan untuk memudahkan implementasi antara Java dengan
database. Penggunaan Hibernate tidak tergantung pada 1 jenis database, developer dapat dengan
mudah mengganti database, misal dari MySQL ke Oracle. Teknologi Hibernate akan memfasilitasi
71 Universitas Kristen Maranatha
6.2. Saran
Saran untuk pengembangan aplikasi:
1. Dapat terhubung pada server svn, sehingga file-file yang ada dapat lebih mudah dipantau
perkembangan perubahannya.
2. Mengganti platform ke bahasa pemrograman web, sehingga dapat lebih disesuaikan
xiv Universitas Kristen Maranatha
DAFTAR PUSTAKA
Bauer, Christian, & King, Gavin; Hibernate in Action; Manning Publication, 2005
Bodnar, George H., & Hopwood , William S.; Accounting Information Systems (9 ed.); Prentice Hall, 2003.
Fowler, Martin, & Scott, Kendall; UML Distilled Second Edition A Brief Guide to the Standart Object
Modelin Language; Addison Wesley, 1999
Fryman, Mark A.; Quality and process improvement; Cengage Learning, 2002
Gelinas, Ulric J., & Dull, Richard B.; Accounting Information Systems(8 ed.); South-Western College Pub, 2009
Grönroos, Marko; Book of Vaadin: Vaadin 6.4; Vaadin Ltd, 2010
Hariyanto, Bambang; Esensi-esensi Bahasa Pemrograman Java; Bandung: Informatika, 2007
Imbar, Radiant Victor, & Suteja, Bernard R.; Pemrograman Web Commerce dengan ORACLE dan ASP; Bandung: Penerbit INFORMATIKA Bandung, 2006
Jogiyanto, H.; Konsep Dasar Pemrograman C; Yogyakarta: Penerbit ANDI, 1993
Nugroho, Adi; Konsep Pengembangan Sistem Basis Data; Bandung: Penerbit INFORMATIKA, 2004
