Pembuatan Aplikasi Web Jobdesk Berbasis Java.

(1)

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.

Applications JobDesk expected to meet the needs of project management where the team members can no meet somewhere. Although different city even though the state, privided that has an Internet connection, the project cas still run regularly, and progress is not distrupted. Giving a clear duty to the members can still be done, though not met. Communications continue to run smoothly by using the chat feature. And the data is needed to keep distributed to each member, although not able to meet.

(2)

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.

Aplikasi JobDesk diharapkan dapat memenuhi kebutuhan project management dimana para anggota tim tidak dapat bertemu di suatu tempat. Meskipun berbeda kota bahkan negara sekalipun, asalkan memiliki koneksi internet, project dapat tetap berjalan teratur, dan perkembangannya tidak terganggu. Pemberian tugas secara jelas kepada anggota dapat tetap dilakukan, meskipun tidak bertemu. Komunikasi tetap dapat berjalan lancar dengan menggunakan fitur chatting. Dan data-data yang dibutuhkan dapat tetap dibagikan ke setiap anggota, meskipun tidak dapat bertemu.

(3)

iv Universitas Kristen Maranatha

DAFTAR ISI

PRAKATA ...i

ABSTRACT ... ii

ABSTRAK ... iii

DAFTAR ISI ... iv

DAFTAR GAMBAR ... viii

DAFTAR TABEL ... xi

DAFTAR LAMPIRAN ... xii

Bab I Pendahuluan 1.1 Latar Belakang ... 1

1.2 Rumusan Masalah ... 1

1.3 Tujuan ... 2

1.4 Batasan Masalah ... 2

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.4.1 Model Data ... 9

2.4.2 Hubungan Antartabel... 13

2.5 MySQL ... 13

2.6 UML... 15

2.6.1 Use Case Diagram ... 15

2.6.2 State Diagram. ... 16

2.6.3 Class Diagram. ... 17

2.6.4 Sequence Diagram. ... 18

(4)

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

(5)

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

(6)

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

(7)

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

(8)

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

(9)

x Universitas Kristen Maranatha

Gambar 4.25 Database JobDesk ... 61

Gambar 5.1 Flowchart Register ... 65

Gambar 5.2 Flowchart Login ... 66

(10)

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

(11)

xii Universitas Kristen Maranatha

DAFTAR LAMPIRAN

Lampiran SQL ... xiv Lampiran User Manual... xxi Riwayat Hidup Penulis ... xii

(12)

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 tidak berada di lokasi yang dekat (berbeda kota / negara)?

(13)

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 untuk pengembangan aplikasi.

(14)

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 Pembuatan BAB VI 28-May-11 30-May-11

(15)

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

(16)

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 dengan kebutuhan, karena framework Vaadin tidak mudah untuk dilakukan customize.

(17)

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

Robbins, Stehen P., & Coulter, Mary; Management (9 ed.); Upper Saddle River, NJ: Pearson Education, Inc, 2007

(1)