Bab 3 Perancangan Sistem Penelitian adalah suatu proses mencari sesutu secara sistematis dalam waktu yang ralelatif lama dengan menggunakan metode ilmiah serta aturan yang berlaku. Konseptualisasi proses tersebut kemudian dituangkan menjadi suatu metode penelitian lengkap dengan pola analisis observasi serta pengumpulan data yang diperlukan untuk melukiskan fenomena tersebut.
3.1
Model Perancangan Sistem Perancangan sistem yang digunakan dalam penelitian ini
adalah metode Waterfall. Tahap-tahap dari metode Waterfall dapat dilihat pada Gambar 3.1
Gambar 3.1 Waterfall Model (Pressman, 2001)
13
14
Fase-fase yang terdapat dalam metode waterfall yaitu : 1. Penentuan dan analisis spesifikasi. Tahap ini mengumpulkan data yang diperlukan oleh sistem, dihasilkan dari konsultasi dengan pengguna sistem. Meliputi domain informasi, fungsi, unjuk kerja, dan antarmuka. Pada tahap ini dalam perancangan akan dibuat use case, activity diagram, dan class diagram. 2. Design sistem dan perangkat lunak. Proses yang menghasilkan proses arsitektur secara keseluruhan. Pada tahap ini terfokus pada desian program yang dibutuhkan, bagaimana program ini dapat berinteraksi, karakteristik antarmuka dan juga pada tahap ini akan dibuat secara detail class diagram dan sequence diagram. 3. Implementasi dan uji coba unit. Pada tahap ini merupakan desain pengkodean yang akan dibuat. Disesuaikan dengan bahasa pemrograman yang digunakan. Uji unit termasuk pengujian bahwa setiap unit sesuai dengan spesifikasi. 4. Integrasi dan uji coba sistem. Unit program diintegrasikan dan diuji menjadi sistem yang lengkap untuk disampaikan ke pelanggan. 5. Operasi dan pemeliharaan. Normalnya, ini adalah fase yang terpanjang. Karena sistem dipasang dan digunakan dapat terjadi perubahan dan mempengaruhi operasi-operasi yang ada pada perangkat lunak secara langsung.
15
3.1.1 Kebutuhan Hardware dan Software Dalam pemakaian web aplikasi properti menggunakan framework MVC
ini, dibutuhkan perangkat keras minimal seperti
berikut ini : Prosesor
: Intel Pentium IV
RAM
: 512 MB
Hardisk
: 40 GB
Monitor
: Resolusi 800px X 600px
Aplikasi ini dibangun dengan spesifikasi perangkat lunak sebagai berikut :
3.2
UML Designer
: Rational Rose
Framework
: MVC 3.0 beta dan ActiveRecord 3.0
Database
: Microsoft SQL Server 2008
Tool Designer
: Adobe Photoshop CS4
Tool Editor
: Microsoft Visual Studio 2010
Web Browser
: Internet Explorer 6.0 dan Opera
Desain Sistem Pada tahap ini, dilakukan pembuatan desain sistem, dan juga
disertakan diagram-diagram, yaitu usecase diagram, activity diagram, class diagram, sequence diagram dan deployment diagram.
16
3.2.1 Use Case Diagram Di dalam usecase seorang user dapat melakukan beberapa aktivitas. Aktivitas inilah yang akan membatasi kegiatan user didalam sistem. Diagram usecase dapat dilihat pada Gambar 3.2
<
>
Tambah data
Masukan Biodata
Login
Edit Data
Admin
user Memilih Pertanyaan Logout
Delete Data
Gambar 3.2 Use Case Diagram
Dari Gambar 3.2, dapat dijelaskan aktivitas dari user. User dapat melakukan pengisian biodata yang meliputi nama, alamat, nomor telepon dan email, melakukan pemilihan pertanyaan dan dapat melakukan login dan logout , jika user akan melanjutkan ke tahap penjualan. Sedangkan aktivitas dari admin yaitu, admin harus malakukan login terlebih dahulu sebelum melakukan manipulasi data. Setelah login berhasil, admin dapat melakukan penambahan data, perubahan data, dan penghapusan data. Setelah proses manipulasi data selesai, admin dapat keluar dengan cara logout.
17
3.2.2 Activity Diagram Activity diagram menggambarkan proses-proses yang terjadi dari suatu aktifitas dimulai sampai berhenti. Activity diagram dapat dilihat pada Gambar 3.3 dan Gambar 3.4
User
system
database
Start Home
Database
Memilih pertanyaan
Login
Mengisi Form Biodata
Logout
Finish
Gambar 3.3 Activity Diagram User
Dari Gambar 3.3, dapat dijelaskan aktivitas dari user. Pertama user akan masuk ke halaman home. Dari halaman home tersebut, user dapat memilih pertanyaan berdasarkan kategori yang ada. Kategori dibagi menjadi 3, yaitu building, water, dan energy. Berikutnya user selesai memilih pertanyaan, user akan melakukan login untuk
18
pengisian biodata. Setelah pengisian biodata selesai, user akan kembali ke halaman home dengan cara logout dari aplikasi.
admin
system
database
Start Login
Home
sincronise Manage data Database Insert data / edit data / delete data Save data Logout
Finish
Gambar 3.4 Activity Diagram Admin
Dari gambar 3.4, dapat dijelaskan aktivitas dari admin. Pertama admin akan masuk ke halaman home. Dari halaman home admin akan melakukan login. Setelah login berhasil maka admin akan dapat melakukan proses manupulasi data seperti insert data, edit data dan delete data. Setelah proses manipulasi data selesai, maka data akan tersimpan dalam database. Admin dapat keluar dari aplikasi dengan melakukan logout dari sistem.
19
3.2.3 Sequence Diagram Sequence diagram menggambarkan interaksi antar obyek di dalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi vertikal (waktu) dan dimensi horisontal (obyek-obyek yang terkait). Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah yang dilakukan sebagai tanggapan dari sebuah event untuk menghasilkan output tertentu. Sequence Diagram dapat dilihat pada Gambar 3.5 dan Gambar 3.6
System User : user
: Database 1: Home 2: Album 3: Request 4: Response 5: Choose Question
6: Choose Question 7: Save 8: Insert Biodata 9: Save 10: Home
Gambar 3.5 Sequence Diagram User
Dari Gambar 3.5, dapat dijelaskan aktivitas user terhadap sistem. Pertama kali user akan masuk ke halaman home. Dari halaman
20
home user dapat melihat album dari bangunan yang dijual. Saat user akan melakukan pemilihan pertanyaan, sistem akan melakukan request kedalam database, response dari database akan dikembalikan ke user dalam bentuk list pertanyaan. Setelah user melakukan pemilihan pertanyaan, sistem akan melakukan save data ke dalam database. Setelah proses save selesai, user akan diminta untuk melakukan pengisian biodata, lalu sistem akan melakukan save biodata dan sistem akan memberikan halaman home kepada user.
System
Admin : Admin
Database : Database
1: Home 2: Login
3: Check username and password 4: Invalid 5: Form Login 6: Valid 7: Manage data 8: Manage Data 9: Save 10: Manage form
Gambar 3.6 Sequence Diagram Admin
Dari Gambar 3.6, dapat dijelaskan aktivitas admin terhadap sistem. Pertama kali admin akan masuk ke halaman home. Lalu admin akan melakukan login dengan memasukan username dan password. Sistem akan melakukan cek kedalam database, jika username dan
21
password valid maka admin dapat melakukan manage data. Jika username dan password tidak valid maka admin diminta mengisi username dan password yang baru. Setelah itu admin dapat melakukan manage data. Setelah selesai, system akan melakukan proses save ke dalam database. Dan sistem akan memberikan halaman manage data ke admin. 3.2.4 Class Diagram Class diagram merupakan diagram yang selalu ada di permodelan sistem berorientasi objek. Class diagram menunjukkan hubungan antar class dalam sistem yang sedang dibangun dan bagaimana setiap class dapat saling berkolaborasi untuk mencapai suatu tujuan. Class diagram sistem dapat dilihat pada Gambar 3.7
Gambar 3.7 Class Diagram Sistem
22
3.2.5 Deployment Diagram Deployment diagram merupakan diagram pemodelan sistem dalam proses deploy. Proses deployment meliputi interface, sistem, dan database. Deployment diagram dapat dilihat pada Gambar 3.8
Web browser
Database server
Web server
MS. Sql Server
View
Model Controller
Gambar 3.8 Deployment Diagram
3.3
Desain Antarmuka Desain antarmuka untuk Analisis dan Penjualan properti ini
terbagi menjadi dua bagian utama yaitu tampilan untuk halaman analisis dan penjualan. Untuk halaman analisis terbagi menjadi 4 halaman, yaitu halaman awal, halaman analisa, halaman penjualan, dan halaman admin.
23
3.3.1
Desain antarmuka halaman home Pada halaman home, terdapat 4 menu, untuk halaman
analisa dan halaman penjualan. Desain halaman home dapat dilihat pada Gambar 3.9
Logo
Menu Header
Category
Body
Footer Gambar 3.9 Desain antarmuka halaman home
2.2.1. Desain antarmuka halaman analisa 3.3.2.1 Desain halaman biodata Halaman biodata akan menangani data inputan dari user, meliputi username, firstname, lastname, address, city, state, postcode, country, phone, dan email. Pada saat klik button, akan mengarah ke halaman home. Desain halaman biodata dapat dilihat pada Gambar 3.10
24
Logo
Menu Header
Category
FirstName LastName Address City State PostalCode Country Phone Email
Autentication Button Footer Gambar 3.10 Desain halaman biodata
3.3.2.2 Desain halaman kategori bangunan Pada halaman ini akan terdapat beberapa pertanyaan mengenai sisi bangunan yang terdapat dalam obyek yang ditawarkan oleh konsumen. Desain antarmuka pertanyaan kategori bangunan dapat dilihat pada Gambar 3.11
25
Logo
Menu Header
Category
List Question
Footer Gambar 3.11 Desain antarmuka halaman pertanyaan kategori bangunan
3.3.2.3 Desain halaman pertanyaan kategori energi Pada halaman ini akan terdapat beberapa pertanyaan mengenai sisi energi yang terdapat dalam obyek yang ditawarkan oleh konsumen. Desain antarmuka pertanyaan kategori energi dapat dilihat pada Gambar 3.12
26
Logo
Menu Header
Category
List Question
Footer
Gambar 3.12 Desain halaman pertanyaan kategori energi
3.3.2.4 Desain halaman pertanyaan kategori air Pada halaman ini akan terdapat beberapa pertanyaan mengenai sisi air yang terdapat dalam obyek yang ditawarkan oleh konsumen. Desain antarmuka pertanyaan kategori air dapat dilihat pada Gambar 3.13
27
Logo
Menu Header
Category
List Question
Footer Gambar 3.13 Desain halaman pertanyaan kategori air
3.3.3 Desain halaman admin Pada halaman antar muka admin, untuk dapat melakukan pengolahan data, admin diminta memasukkan username dan password. Halaman login untuk admin dapat dilihat pada Gambar 3.14
28
Logo
Menu Header
Category
Username Password Button
Footer Gambar 3.14 Desain halaman login admin
3.3.3.1 Desain halaman manage data Pada halaman manage data, admin dapat melakukan pengolahan data, meliputi edit data dan delete data. Halaman manage data dapat dilihat pada Gambar 3.15 Logo
Menu Header
Category
Manage data Edit||Delete Edit||Delete Edit||Delete
Footer
Gambar 3.15 Desain halaman manage data
29
3.4
Desain Tabel Tabel 3.1 Tabel Questions
Field
Type
Length
Information
Question Id
Int
Max
Primary Key
Category Id
Int
Max
Foreign Key
QuestionCategoryId Int
Max
Foreign Key
Title
nVarchar
160
Not null
Nominal
Numeric
10,2
Not null
DisplayArtUrl
nVarchar
1024
Allow nul
Dalam tabel question terdapat 6 field. QuestionId merupakan primary key dan juga sebagai kunci yang menghubungkan dengan tabel results dan charts. Tabel ini juga mempunyai foreign key CategoryId dan QuestionCategoryId yang berhubungan dengan tabel Categories dan QuestionCategories. Nominal yang memiliki type data Numeric memiliki value 10.2 yang berarti 10 digit pertama sebagai desimal dan 2 sebagai pecahan. Field DisplayArtUrl dapat memiliki value dan dapat juga tidak memiliki value. Tabel 3.2 Tabel Categories
Field
Type
Length
Information
Category Id
Int
Max
Primary Key
Name
nVarchar
120
Allow null
Description
nVarchar
4000
Allow null
30
Dalam
tabel
Categories
terdapat
3
field.
CategoryId
merupakan primary key. Name dan description yang memiliki type data nVarchar dapat memiliki value dan dapat juga tidak memiliki value Tabel 3.3 Tabel QuestionCategories
Field
Type
QuestionCategory Int
Length
Information
Max
Primary Key
120
Allow null
Id TitleCategory
Dalam
tabel
QuestionCategoryId
nVarchar
QuestionCategories
terdapat
2
field.
merupakan primary key. TitleCategory yang
memiliki type data nVarchar dapat memiliki value dan dapat juga tidak memiliki value. Tabel 3.4 Tabel Charts
Field
Type
Length
Information
RecordId
Int
Max
Primary Key
ChartId
Varchar
50
Not null
QuestionId
Int
Max
Foreign Key
Count
Int
Max
Not null
DateCreate
DateTime
yy:mm:dd
Not null
00:00:00.000
31
Dalam tabel Charts terdapat 5 field. RecordId
merupakan
primary key. Sedangkan QuestionId merupakan foreign key untuk terhubung dengan tabel Question. DateCreated yang memiliki type data DateTime memiliki value yy:mm:dd:00:00:00.000 yang berarti year, month, date, hour, minute, second dan milisecond. Tabel 3.5 Tabel Results
Field
Length
Information
ResultDetailId Int
Max
Primary Key
ResultId
Int
Max
Not null
QuestionId
Int
Max
Foreign Key
Quantity
Int
Max
Not null
Nominal
Numeric
10.2
Not null
Dalam
Type
tabel
Results
terdapat
5
field.
ResultDetailId
merupakan primary key. Sedangkan QuestionId merupakan foreign key untuk terhubung dengan tabel Question. Nominal yang memiliki type data Numeric memiliki value 10.2 yang berarti 10 digit pertama sebagai desimal dan 2 sebagai pecahan. Tabel 3.6 Tabel Guest
Field
Type
Length
Information
GuestId
Int
Max
Primary Key
OrderDate
DateTime
yy:mm:dd
Allow null
00:00:00.000 UserName
nVarchar
256
Allow null
FirstName
nVarchar
160
Allow null
LastName
nVarchar
160
Allow null
32
Address
nVarchar
70
Allow null
City
nVarchar
40
Allow null
State
nVarchar
40
Allow null
PostalCode
nVarchar
10
Allow null
Country
nVarchar
40
Allow null
Phone
nVarchar
24
Allow null
Email
nVarchar
160
Allow null
NominalTotal
Numeric
10.2
Not null
Dalam tabel Guest terdapat 13 field. GuestId
merupakan
primary key. OrderDate yang memiliki type data DateTime memiliki value yy:mm:dd:00:00:00.000 yang berarti year, month, date, hour, minute, second dan milisecond. Nominal yang memiliki type data Numeric memiliki value 10.2 yang berarti 10 digit pertama sebagai desimal dan 2 sebagai pecahan. 3.4.1 Database Diagram Dari tabel yang sudah dirancang, maka dapat dijelaskan lebih detailnya hubungan antar tabel yang menghasilkan sebuah sistem yang saling berhubungan. Hubungan antar tabel tersebut dapat dilihat pada Gambar 3.16
33
Gambar 3.16 Relasi Tabel
Dari Gambar 3.16 dapat dijelaskan mengenai hubungan relasi antar tabel. Tabel Question memiliki QuestionId sebagai primary key dari tabel tersebut. Foreignkey dari QuestionId terdapat pada tabel Carts,
dan
Results.
Sedangkan
primary
key
pada
tabel
QuestionCategories adalah QuestionCategoryId yang juga terdapat foreignkey pada tabel Question. Untuk tabel Categories, memiliki CategoryId sebagai primarykey dan foreignkey pada tabel Question. Dan untuk tabel Guest hanya memiliki primarykey yaitu, GuestId dan tidak
memiliki
foreignkey
di
tabel
yang
lain.
34
3.5
Analisis Sistem Dalam penelitian ini, akan dilakukan analisis framework MVC
3.0
dan
Active
Record.
Proses
analisis
dilakukan
dengan
menggunakan analyse performance tools dari Microsoft Visual Studio 2010. Aspek dari analisis yang akan dilakukan yaitu analisis kecepatan dan analisis alokasi memori. Analisis kecepatan meliputi kecepatan akses dalam setiap method yang ada dalam sistem (proses query, running web layout, dan penggunaan resource dari processor). Untuk analisis alokasi memori meliputi alokasi memori yang digunakan dalam setiap proses yang dijalankan dan alokasi memori untuk setiap variable dalam sistem (string, char, dan integer) serta alokasi penggunaan resource dari processor.
