4 Model Perancangan Model perancangan merupakan kelanjutan dari model analisis yang dibuat lebih mengarah ke implementasi perangkat lunak. Dilakukan penyesuaian terhadap model analisis dengan bahasa pemrograman yang akan digunakan dalam pembangunan perangkat lunak. Bahasa pemrograman yang akan digunakan saat implentasi adalah PHP. 4.1
Realisasi Use Case Tahap Perancangan
4.1.1 Diagram Sequence Terdapat perubahan pada diagram sequence, perubahan terdapat pada penambahan maupun pengurangan method sebagai penyesuaian dengan bahasa pemrograman yang digunakan pada saat implementasi.
Gambar 4-1 Diagram SequenceMelakukan Pencarian
48
Gambar 4-2 Diagram Sequence Melihat Daftar Proyek
49
Gambar 4-3 Diagram Sequence Melihat Aktifitas Perubahan Proyek
50
Gambar 4-4 Diagram Sequence Melakukan Filter Data
51
Gambar 4-5 Diagram Sequence Melihat Aktifitas Perubahan File
52
Gambar 4-6 Diagram Sequence Melihat Perbedaan antar Versi
53
Gambar 4-7 Diagram Sequence Membandingkan Aktifitas antara Dua Proyek
54
Gambar 4-8 Diagram Sequence Membandingkan Aktifitas antara Dua Proyek (Lanjutan)
55
Gambar 4-9 Diagram Sequence Melihat Statistik Aktivitas Perubahan Proyek
56
Gambar 4-10 Diagram Sequence Manajemen Pengguna
Gambar 4-11 Manajemen Link Repositori
57
Gambar 4-12 Diagram Sequence Menambah Proyek
Gambar 4-13 Diagram Sequence Manajemen Data Proyek
58
Gambar 4-14 Diagram Sequence Manajemen Timeline
59
Gambar 4-15 Diagram Sequence Mengolah Data Perubahan CVS
60
4.1.2 Diagram Kelas Perancangan Perancangan kelas menghasilkan diagram kelas perancangan yang mengalami perubahan dari kelas hasil analisis. Terdapat dua paket kelas tambahan yaitu include dan JPGraph. Paket include merupakan kelas yang dimanfaatkan oleh kelas lainnya. Sedangkan JPGraph merupakan paket kelas yang digunakan kelas GraphController dalam paket Reporting untuk membuat sebuah grafik hasil reporting IT Change. Jumlah total kelas yang dihasilkan untuk pembangunan perangkat lunak adalah 41 kelas. Diagram kelas perancangan dapat dilihat pada Gambar 4-16 sampai 4-22. Perubahan dan penambahan kelas pada model perancangan ini dapat dilihat pada Tabel 4-1.
Gambar 4-16 Diagram Paket Perancangan “IT Change”
Gambar 4-17 Diagram Kelas Paket Admin Management
61
Gambar 4-18 Diagram Kelas Admin Project Management
Gambar 4-19 Diagram Kelas Cron Task
Gambar 4-20 Diagram Kelas Paket include
62
Gambar 4-21 Diagram Kelas Paket Reporting
Gambar 4-22 Diagram Kelas Paket JPGraph
63
4.2
Kelas Perancangan
Tabel 4.1 menampilkan informasi keterhubungan antara kelas analisis dan kelas perancangan. Tabel 4-1 Daftar Kelas Perancangan
No Nama Kelas Perancangan Paket include 1 MySql 2 config Paket JpGraph 3 BarPlot 4 Graph 5 GroupBarPlot 6 Legend 7 LinePlot 8 PieGraph 9 PiePlot 10 PiePlot3D 11 Plot Paket Reporting 12 MainUI 13 CompareUI 14 FileUI 15 Index 16 ProjectListUI 17 ProjectUI 18 SearchUI 19 CompareController 20 DiffController 21 FileReportingController 22 GraphController 23 LoginController 24 ProjectListController 25 ProjectReportingController 26 SearchController 27 FileChanges 28 ProjectChanges 29 User Paket Admin Management 30 AdminUI 31 AdminController 32 UserData 33 ProjectData 34 Repository Paket Project Admin Management 35 AdminProjectUI 36 AdminProjectController
Nama Kelas Analisis Reporting.MainUI Reporting.CompareUI Reporting.FileUI Reporting.ProjectListUI Reporting.ProjectUI Reporting.SearchUI Reporting.CompareController Reporting.DiffController Reporting.FileReportingController Reporting.GraphController Reporting.ProjectListController Reporting.ProjectReportingController Reporting.SearchController Reporting.FileChanges Reporting.ProjectChanges AdminManagement.AdminUI AdminManagement.AdminController AdminManagement.UserData AdminManagement.ProjectData AdminManagement.Repository ProjectAdminManagement.AdminProjectUI ProjectAdminManagement.AdminProjectController
64
Tabel 4-1 Daftar Kelas Perancangan
No Nama Kelas Perancangan 37 TimeLine 38 ProjectData Paket Cron Task 39 Indeks 40 CronController 41 Repository 42 Changes
Nama Kelas Analisis ProjectAdminManagement.TimeLine ProjectAdminManagement.ProjectData CronTask.Indeks CronTask.CronController CronTask.Repository CronTask.Changes
4.2.1 Atribut dan Operasi Nama Kelas Paket include MySql
config
Paket JpGraph BarPlot
Atribut
Tanggung Jawab __construct() connect() execute() getArray() getRow() getObject() getDataset() getNumRows() getResult() getDataArray() close_connection()
db host user password database query result row dataset
host name user password value title
Graph
img title xaxis
GroupBarPlot
plots numpoints
__construct() SetFillColor() SetLegend() SetValuePlot() SetMargin() SetAntiAliasing() SetScale() SetFont() add() SetTicksLabels() Add() SetWidth() Legend() Min() Max() GetCSIMareas() SetLayout() Pos()
Legend
65
Nama Kelas
LinePlot
Atribut
filled fill_color line_style title
PieGraph
PiePlot
title data
PiePlot3D
value legend
Plot
Paket Reporting MainUI
CompareUI
changes1 changes2
FileUI
changes viewDiff viewCmd
Tanggung Jawab SetShadow() Hide() Add() Stroke() SetFilled() SetBarCenter() SetColor() SetFillColor() SetFillGradient() SetLegend() SetCenter() Add() SetColor() Stroker() SetFont() SetAntiAliasing() SetCenter() SetGuideLines() SetColor() SetShadow() SetTheme() SetSize() SetCenter() SetLegends() SetFont() SetLabelPos() __construct() SetFillColor() SetLegend() SetWidth() __construct() viewHeader() viewFooter() viewUI() viewLeftBox() viewMainBody __construct() viewLeftBox() viewMainBody() viewDiffResume() viewCompareGraph() __construct() viewLeftBox() viewMainBox() setDiffResult() viewDiffForm() viewDiffResult() viewListVer()
66
Nama Kelas
Atribut
Index
user
ProjectListUI
projectchanges
ProjectUI
changes
SearchUI
numResult result projectChanges fileChanges
CompareController
DiffController
FileReportingController
v1 v1 repo file cmd changes graph view
GraphController
LoginController
user
ProjectListController
view projectChanges changes
ProjectReportingController
67
Tanggung Jawab viewMenuLeft() viewAuthorGraph() viewFileResume() getRelated() viewVersGraph() viewAnnotate() viewLoginForm() viewLeftBox() viewMainBox() __construct() viewLeftBox() viewMainBox() __construct() viewMenuLeft() viewProjectResume() viewPSumGraph() viewPLOCGraph() viewPAuthorGraph() viewFormFilter() viewLeftBox() viewMainBox() __construct() setResult() viewLeftBox() viewMainBox() viewResult() __construct() processSubmit() loopAll() __construct() getDiff() getCmd() preVersions() __construct() processRequest() createLOCGraph() createGraphAuthorChange() __construct() setPChangeGraph() setLChangeGraph() setAuthorGraph() setCompareActGraph() setStatsGraph() isValidate() processSubmit() __construct() __construct()
Nama Kelas
Atribut view graph
SearchController
FileChanges
ProjectChanges
projectChanges fileChanges view fname fid pid arrDataY arrDataX ver repoAddr lsVer
db lsProject pid arrDataY arrDataX fname author dateFrom dateTo log branch attrFilter filter
68
Tanggung Jawab processRequest() createGraphSumChange() createLineChange() createGraphAuthorChange() __construct() processSubmit() __construct() getLsFile() selectFileResult() getNumResult() setFid() setPid() getFname() getFid() getVer getRepoAddr getListVers getFile() getArrDataX getArrDataY selectSumAuthorByDate() getSumRev() getAge() getLast() getFirstAuthor getMostTime() getRelated() getResume() __construct() selectListProject() getActiveProject getMostActive() getLsProject() selectProjectResult() getNumResult() selectProjectChanges() selectSumChangeByDate() selectSumLineByDate() selectSumAuthorByDate() getArrDataX() getArrDataY() setPid() setAttrFilter() getPid() getPName() getRepository() getDesc() getAdmin()
Nama Kelas
User
Paket Admin Management AdminUI
Atribut
username password
user pdata repository
AdminController
view user pdata repo
UserData
db uid username password email role realname
Tanggung Jawab getAuthor() getSumChanges() getUnixTime() getTime() getInterval() getAttrFilter() getListPName() getTimestamp() getModu() getSumAuthor() getResume() __construct() isValidate() setUid() getUsername() getPasswordByUname() __construct() viewUserList() viewAddUserForm() viewNewUser() viewProjectList() viewAddProjectForm() viewNewProject() viewRepositoriList() viewAddRepoForm() viewNewRepo() viewLeftMenu() viewHeader() viewFooter() __construct() processSubmit() addRepo() delRepo() Repo() addUser() delUser() updateUser() User() addProject() __construct() getUserName() getPassword() getEmail() getRole() getRealname() getUsernameById() setUid() insertUser()
69
Nama Kelas
Atribut
ProjectData
db pid pname padmin
Repository
db rid cvsroot historysize
Paket Project Admin Management AdminProjectUI pdata timeline
AdminProjectController
pdata timeline view
TimeLine
db cid dateFrom dateTo event
ProjectData
db
Tanggung Jawab delUser() updateUser() __construct() insertProject() selectProject() getPid() getPname() getPadmin() __construct() setRid() setCvsroot() setHistorysize() insertRepo() delRepo() selectRepo() viewHeader() viewLeftBox() viewMainBox() viewFooter() leftProject() viewDataProject() viewEditProject() viewTimeline() viewAddForm() __construct() procesRequest() projectData() updateProjectData() timeline() addTimeline() deleteTimeline() __construct() selectTimeline() insertTimeline() deleteTimeline() getLsResult() getUnixTime() updateTimeline() getdateFrom() getdateTo() getEvent() setCid() setdateFrom() setdateTo() setEvent() setCid() __construct()
70
Nama Kelas
Atribut pid pname pdesc timestamp pcommit pfile padmin pstatus
Paket Cron Task Indeks CronController
repo change
Repository
db rid cvsroot historysize fname vers fid cn message date branch author rid sum_ins sum_del
Changes
Tanggung Jawab setPid() getPid() getTomestamp() getPname() getPdesc() getPadmin() getPstatus() getPfile() getPcommit() selectDataProject() getAdminName() getStatus() getLsUser() getLsResult() updateProjectData() history_update() run() __construct() parseRlog() readHistory() __construct() selectRepository() updateFileHistorySize() getLsRepo() __construct() getMaxCn() setTempTable() setLsFc() selectLsFile() getLsFile() emptyFc() setLsRev() delLsRev setChanges() updateProject() dropTempTable() emptyRev getNumResult()
4.2.2 Asosiasi dan Generalisasi Perubahan pada kelas perancangan mempengaruhi perubahan hubungan antar kelas. Berdasarkan diagram kelas perancangan pada Gambar 4-17 sampai Gambar 4-22, hubungan asosiasi terdapat pada hubungan antar kelas Controller dengan kelas Entity dan kelas UI.
71
Generalisasi terjadi pada kelas MainUI dengan kelas Index, FileUI, ProjectUI, SearchUI, CompareUI, dan ProjectListUI (sebagai spesialisasi) pada paket Reporting. Generalisasi terdapat juga pada paket JpGraph. Salah satunya yaitu kelas PieGraph yang merupakan turunan dari kelas Graph. 4.3
Perancangan Representasi Persisten Kelas Entity
Berdasarkan kelas perancangan yang terdefinisi pada Subbab 4.2, dibutuhkan representasi persisten kelas entity yang diwujudkan dalam tabel basis data. Daftar tabel basis data hasil perancangan tersebut terdapat pada Tabel 4.2. Tabel 4-2 Representasi Persisten Kelas
No Nama Tabel
Atribut
Tipe Data
1
uid
int
username password email role
varchar(25) varchar(8) varchar(50) Tinyint(1)
repository
realname rid
varchar(50) int
project
cvsroot historysize pid
text bigint int
pname pdesc padmin
varchar(50) text int
pstatus
tinyint(2)
timestamp pcommit pfile rid
int int int int
pid
int
2
3
4
usertable
prepository
Keterangan
Kelas Entity Auto_increment, UserData primary key Unique
1 = system administrator, 2 = project administrator, 3 = other Auto_increment, Primary key
Repository
Auto_increment, Primary key Unique
ProjectData
Foreign key kolom uid tabel usertable 1 = open, 2 = close
Foreign key kolom rid repository Foreign key
72
ProjectData
Tabel 4-2 Representasi Persisten Kelas
No Nama Tabel
Atribut
Tipe Data
Keterangan
Kelas Entity
kolom pid project 5
6
7
4.4
cvschange
cvsfilechang e
calendar
modul cn
text int
date branch user message rid
bigint text varchar(20) text int
cn
int
fid
int
file_name ver sum_ins sum_del calid
text text int int int
calname caldateFrom caldateTo pid
varchar(50) bigint bigint int
Auto_increment, Primary key
Foreign key kolom rid repository Foreign key kolom cn cvschange Auto_increment, Primary key
Auto_increment, Primary key
Changes
Changes
Timeline
Foreign key kolom pid project
Perancangan Subsistem
Tidak ada perancangan subsistem 4.5
Perancangan Antarmuka
Secara umum, tampilan antar muka IT Change digambarkan pada Gambar 4-21. Bagian Header diisi banner berupa logo aplikasi dan menu utama halaman web. Pada halaman Reporting, menu utama menampilkan pilihan link ke halaman Project List, Search, dan Compare. Pada halaman manajemen data proyek untuk admin proyek, menu utama menampilkan pilihan link ke halaman Timeline dan
73
Project Data. Sedangkan pada halaman manajemen aplikasi, menu utama menampilkan link ke halaman Repository Management, User Management, dan Add Project. Di bawah bagian Header, terdapat bagian Isi yang terbagi menjadi dua subbagian yaitu kotak kiri yang berisi menu khusus serta informasi singkat dan kotak kanan yang berisi informasi utama yang ditampilkan di masing-masing halaman web. Sebagai contoh, halaman Search akan menampilkan form untuk pencarian di kotak kiri dan hasil pencarian di kotak kanan. Terakhir, terdapat bagian Footer yang berfungsi sebagai penutup halaman web. Gambar 4-23 sampai 4-46 menggambarkan rancangan antar muka aplikasi “IT Change” secara lengkap. Header
Kotak kiri
Kotak kanan
Footer Gambar 4-23 Rancangan Antarmuka Generik
4.5.1 Perancangan Hasil Reporting a. Grafik aktivitas perubahan terhadap waktu Jenis grafik yang digunakan adalah grafik garis (Gambar 4-24). Grafik menyatakan jumlah perubahan yang terjadi pada setiap satuan waktu tertentu. Nilai jumlah perubahan ditampilkan di setiap poin. Waktu ditampilkan dalam format dd:mm.
Gambar 4-24 Hasil Perancangan Grafik Aktivitas Perubahan terhadap Waktu
b. Grafik perbandingan aktivitas perubahan antar proyek Jenis grafik yang digunakan adalah grafik batang (Gambar 4-25). Grafik menyatakan jumlah perubahan yang terjadi di masing-masing proyek terhadap
74
periode. Nilai jumlah perubahan ditampilkan di setiap batang. Periode dihitung dengan formula: (waktu perubahan terakhir-waktu perubahan pertama)/12. Jumlah perubahan dihitung berdasarkan periode tersebut. Sumbu-Y sebelah kiri menyatakan jumlah perubahan untuk proyek pertama sedangkan sebelah kanan diperuntukan bagi proyek kedua. Setiap proyek diberi identitas warna yang berbeda sehingga mudah dibedakan. Pada grafik juga ditampilkan legenda yang memberi keterangan nama proyek yang sedang dibandingkan.
Gambar 4-25 Hasil Perancangan Grafik Perbandingan Aktivitas Perubahan Proyek
c. Grafik perbandingan aktivitas pemrogram Jenis grafik yang digunakan adalah grafik lingkaran tiga dimensi (Gambar 426). Nilai persentase yang ditampilkan pada grafik menyatakan persentase jumlah aktivitas seorang pemrogram terhadap total perubahan. Setiap pemrogram diberi identitas warna yang berbeda. Pada grafik ditampilkan legenda yang menginformasikan nama-nama pemrogram yang terlibat dan identitas warna untuk masing-masing pemrogram.
Gambar 4-26 Hasil Perancangan Grafik Perbandingan Aktivitas Pemrogram
d. Grafik perubahan versi file Grafik menyatakan graf perubahan versi termasuk branch yang dimiki oleh sebuah file (Gambar 4-27). Setiap kotak pada grafik menyatakan sebuah versi. Informasi yang ditampilkan adalah nomor versi dan tanggal versi tersebut dibuat. Kotak yang berwarna kuning menyatakan akar dari versi yang ada dibawahnya. Sebuah branch akan digambarkan sebagai cabang dari sebuah versi dan nama branch ditampilkan sebagai keterangan di bawah nomor versi,
75
Gambar 4-27 Grafik Perubahan Versi File
e. Ringkasan aktivitas proyek Laporan ringkasan aktivitas proyek ditampilkan dalam bentuk tabel (Gambar 4-28). Informasi yang ditampilkan adalah nama proyek, deskripsi proyek, alamat repository, nama admin, dan total perubahan. Total perubahan ditampilkan dalam format: [jumlah aktivitas perubahan] [jumlah file yang terlibat perubahan]
Gambar 4-28 Hasil Perancangan Ringkasan Aktivitas Proyek
f. Ringkasan aktivitas file Laporan ringkasan aktivitas file ditampilkan dalam bentuk tabel (Gambar 429). Informasi yang ditampilkan terdiri dari nama file, alamat repositori, jumlah versi yang dimiliki file, nomor versi dan waktu perubahan terakhir, nama pihak yang pertama kali menyimpan file ke dalam repositori proyek. serta waktu saat file paling sering mengalami perubahan dan jumlah perubahan yang terjadi saat itu.
Gambar 4-29 Hasil Perancangan Ringkasan Aktivitas File
76
g. Tabel daftar aktivitas perubahan No
Identitas Perubahan [Waktu perubahan (dd:mm:yy HH:ii:ss)] [Nama pengubah] [log message]
Daftar Perubahan File Nama file | nomor versi | jumlah baris yang bertambah | jumlah baris yang dihapus Nama file | nomor versi | jumlah baris yang bertambah | jumlah baris yang dihapus
h. Perbedaan antar versi (cvs rdiff) [Nama File] [Versi ke-1][Versi ke-2] [No urut [Nomor baris kode/LOC yang [Nomor baris kode/LOC hasil kelompok berubah] perubahan di versi yang ke-2\ perubahan Jumlah baris yang bertambah, jumlah baris yang berkurang, jumlah baris kode] baris yang berubah Kode pada versi ke-1 Kode pada versi ke-2 + [kode yang bertambah di versi + [kode yang bertambah di versi ke-2] ke-1] - [kode yang terhapus di versi ke- [kode yang terhapus di versi ke2] 1] ! [kode yang berubah di versi ke-1] ! [kode yang berubah di versi ke2]
i. Laporan perubahan versi terakhir per baris kode (cvs rannotate) Nomor versi [nomor versi terakhir baris kode ke-1]
Nama pengubah [8 karakter pertama nama pengubah versi terakhir baris kode ke-1]
…
…
Tanggal [Waktu perubahan terakhir dengan format dd-MM-YY untuk baris kode ke1] …
Kode versi terakhir [baris kode ke-1]
[baris kode ke-2]
j. Laporan daftar file yang berelasi [Nama file relasi ke-1] - [link ke halaman “File Reporting” untuk file relasi ke-1 versi ke-1 ] [log message ke-1] - [link ke halaman “File Reporting” untuk file relasi ke-1 versi ke-2] [log message ke-2]
77
k. Laporan daftar proyek dan ringkasan aktivitas proyek
Gambar 4-30 Hasil Perancangan Laporan Daftar Proyek dan Ringkasan Aktivitas Seluruh Proyek
4.5.2 Perancangan Form dan Menu
Gambar 4-31 Form Login
Gambar 4-32 Form Pencarian Proyek (Halaman Web Search)
78
Gambar 4-33 Form Pencarian File (Halaman Web Search)
Gambar 4-34 Hasil Pencarian File (Halaman Web Search)
Gambar 4-35 Hasil Pencarian Proyek (Halaman Web Search)
Gambar 4-36 Form Perbandingan Antar Proyek (Halaman Web Compare)
79
Gambar 4-37 Form Filter Data
Gambar 4-38 Form Perbandingan antar Versi (diff)
Gambar 4-39 Halaman Melihat Data Proyek
80
Gambar 4-40 Form Mengubah Data Proyek
Gambar 4-41 Tampilan Halaman Melihat Timeline Proyek
Gambar 4-42 Form Menambah Timeline Proyek
Gambar 4-43 Form Menambah Proyek
81
Gambar 4-44 Tampilan Halaman Admin
Gambar 4-45 Form Menambah Pengguna
Gambar 4-46 Form Menambah Alamat Repositori
82
4.6
Diagram Deployment
Gambar 4-47 Diagram Deployment IT Change
Dari Gambar 4.47, aplikasi diimplementasikan pada node Web Server. Client aplikasi merupakan web browser yang terhubung ke web server melalui HTTP. Sedangkan web server terhubung ke database server melalui jaringan. Web server dan database server juga dapat diimplementasikan secara fisik di node yang sama.
83
