No title

76

BAB IV IMPLEMENTASI DAN PENGUJIAN

4.1

Implementasi

Implementasi atau tahap penerapan ini adalah suatu bentuk kegiatan yang merupakan rangkaian lanjutan dari kegiatan perancangan perangkat lunak. Pada umumnya implementasi merupakan proses penerapan rancangan program yang telah dibuat pada bab sebelumnya atau aplikasi dalam melaksanakan perancangan aplikasi pemrograman yang dibuat. Pada penelitian ini, implementasi sistem didukung oleh beberapa elemen pendukung yaitu perangkat lunak dan perangkat keras. Spesifikasi perangkat lunak dan perangkat keras yang digunakan pada tahap implementasi ini bukan merupakan spesifikasi optimal, karena implementasi ini tidak dilakukan pada perangkat lunak dan perangkat keras yang lain.

4.2

Spesifikasi Perangkat Keras

Spesifikasi perangkat lunak yang digunakan penulis dalam implementasi dan pengujian adalah sebagai berikut: Table 4.1 Spesifikasi Perangkat Keras

Perangkat Keras

Spesifikasi ASUS S451LN

Personal Computer/Notebook

Processor intel core i5 2.3 GHz Memory 8 GB

http://digilib.mercubuana.ac.id/

77

4.3

Spesifikasi Perangkat Lunak

Spesifikasi perangkat lunak yang digunakna penulis dalam implementasi dan pengujian adalah sebagai berikut: Table 4.2 Spesifikasi Perangkat Lunak

4.4

Perangkat Lunak

Spesifikasi

Sistem Operasi

Windows 8.1

Paket Web Server

IIS 7

Browser

Chrome

Editor

Visual Studio

Implementasi Kode Program

Pada sub bab ini, penulis akan menampilkan potongan dari kode sumber (Source Code) aplikasi pengembangan sistem rentalan online berbasis web yang menggunakan ASP.NET MVC dan Google Maps API, yang akan ditampilkan yaitu proses ketika aplikasi dipanggil pertamakali untuk menampilkan daftar rentalan pada peta. 1) Pada Halaman Index (http://localhost:60694/Home/Index) dibuat sebuah div yang akan digunakan sebagai map

2) Buat sebuah baris JQuery yang berfungsi sebagai trigger untuk meload data rentalan ketka halaman html sudah ready.


78

$(document).ready(function () { { // Get the locations array var locations; jQuery.ajax( { url: '/Home/GetRentalan', data: { Latitude: $("#Latitude").val(), Longitude: $("#Longitude").val(), Category: $("#ddlRentalanCategory").val() }, dataType: 'json', beforeSend:function () { // Activate Map Loader jQuery('.properties-map .maploader').addClass('visible'); }, success: function (result) { //locations = result.locations; locations = result; jQuery('body').trigger('loadGoogleMap'); }, complete:function () { jQuery('.properties-map .maploader').removeClass('visible'); }, error: function (xhr, status, error) { console.log(xhr); console.log(status); console.log(error); } });

var propertyPopup = { "container": jQuery('.property-popup'), "close": jQuery('.property-popup .close-popup'), "loader": jQuery('.property-popup .popup-loader'), "coverLink": jQuery('.property-popup .popup-cover a'), "coverImage": jQuery('.property-popup .popup-cover img'), "title": jQuery('.property-popup .popup-body h2 a'), "link": jQuery('.property-popup .popup-body .properypage'), "address": jQuery('.property-popup .popup-body p'), "price": jQuery('.property-popup .popup-body .price'), }; var infobox = new InfoBox({ content: document.getElementById('property-popup'), closeBoxURL: "" }); // Single or Multiple jQuery('body').on('loadGoogleMap', function () { var single = document.getElementById("mapcanvas").hasAttribute('data-property-id'); if (single) { var propertyId = jQuery('#map-canvas').attr('dataproperty-id');


79

// Single Property on Map var mapLatLng = new google.maps.LatLng($("#LatitudeRentalan").val(), $("#LongitudeRentalan").val()), mapOtions = { scrollwheel: true, scaleControl: true, zoom: 10, center: mapLatLng, styles: [{ "featureType": "administrative", "elementType": "all", "stylers": [{ "visibility": "on" }, { "saturation": -150 }, { "lightness": 10 }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "visibility": "on" }, { "saturation": 150 }, { "lightness": 10 }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "visibility": "on" }, { "saturation": -40 }, { "lightness": 10 }] }, { "featureType": "landscape.man_made", "elementType": "all", "stylers": [{ "visibility": "simplified" }, { "saturation": -100 }, { "lightness": 10 }] }, { "featureType": "landscape.natural", "elementType": "all", "stylers": [{ "visibility": "simplified" }, { "saturation": -100 }, { "lightness": 20 }] }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "off" }, { "saturation": -150 }, { "lightness": 20 }] }, { "featureType": "transit", "elementType": "all", "stylers": [{ "visibility": "off" }, { "saturation": -150 }, { "lightness": 20 }] }] }, map = new google.maps.Map(document.getElementById('map-canvas'), mapOtions); var pin; pin = $("#lnkIconMap").val();

var marker = new google.maps.Marker({ position: mapLatLng, map: map, icon: pin }); } else { // Multiple Properties on Map var mapLatLng = new google.maps.LatLng($("#Latitude").val(), $("#Longitude").val()), mapOtions = { scrollwheel: true, scaleControl: true, zoom: 10, center: mapLatLng, styles: [{ "featureType": "administrative", "elementType": "all", "stylers": [{ "visibility": "on" }, { "saturation": 150 }, { "lightness": 10 }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "visibility": "on" }, { "saturation": -150 }, { "lightness": 10 }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "visibility": "on" }, { "saturation": -40 }, { "lightness": 10 }] }, { "featureType": "landscape.man_made", "elementType": "all", "stylers": [{ "visibility": "simplified" }, { "saturation": -100 }, { "lightness": 10 }] }, { "featureType": "landscape.natural", "elementType": "all", "stylers": [{ "visibility": "simplified" }, { "saturation": -100 }, { "lightness": 20 }] }, { "featureType": "poi", "elementType": "all",


80

"stylers": [{ "visibility": "off" }, { "saturation": -150 }, { "lightness": 20 }] }, { "featureType": "transit", "elementType": "all", "stylers": [{ "visibility": "off" }, { "saturation": -150 }, { "lightness": 20 }] }] }, map = new google.maps.Map(document.getElementById('map-canvas'), mapOtions); // Adding Map Markers var markers = []; jQuery.each(locations, function (i, val) { var pos = new google.maps.LatLng(val.location[0], val.location[1]), pin; if (val.type == 1) { pin = 'Content/rentalan/img/pin-house.png'; } else { pin = 'Content/rentalan/img/pin-apartment.png'; } markers[i] = new google.maps.Marker({ position: pos, map: map, icon: pin, customId: i, customName: val.name, customPrice: val.price, customAdress: val.address, customCover: val.cuver, customUrl: val.url }); // Open Property Popup google.maps.event.addListener(markers[i], 'click', function () { infobox.open(map, this); propertyPopup.container.addClass('active'); propertyPopup.loader.addClass('visible'); setTimeout(function () { propertyPopup.title.text(val.name); propertyPopup.address.text(val.address); propertyPopup.price.text(val.price); propertyPopup.coverImage.attr('src', val.cover); propertyPopup.coverImage.attr('style', 'width:230px;height:127px'); propertyPopup.link.attr('href', val.url); propertyPopup.coverLink.attr('href', val.url); propertyPopup.title.attr('href', val.url); }, 120); setTimeout(function () { propertyPopup.loader.removeClass('visible'); }, 700); });


81

// Close Property Popup propertyPopup.close.on('click', function () { propertyPopup.container.removeClass('active'); }); // Update Map jQuery('.update-properties').on('click', function (e) { e.preventDefault(); var mapLoader = jQuery('.properties-map .maploader'); // Close Popups propertyPopup.container.removeClass('active'); // Show Loader mapLoader.addClass('visible'); // Remove Loader setTimeout(function () { mapLoader.removeClass('visible'); }, 1000); }); }); } }); } });

3) Pada baris JQuery diatas ada sebuah terdapat sebuah function ajax yang berfungsi untuk meload daftar rentalan yang ada pada database, url yang dipanggil adalah

url:

'/Home/GetRentalan'

berikut potongan kode dari

function GetRentalalan yang terdapat pada HomeController : public JsonResult GetRentalan(String Latitude, String Longitude, String Category) { var locations = new List(); var datas = new List(); if (!String.IsNullOrEmpty(Category)) { datas = rentalanService.ListRentalan(x => x.RentalanCategoryId.Equals(Category)).ToList(); } else { datas = rentalanService.ListRentalan().ToList(); } var _Latitude = Convert.ToDouble(Latitude); var _Longitude = Convert.ToDouble(Longitude); foreach (var item in datas) { var data = new locations


82

{ propertyId = item.Id, type = Convert.ToInt32(item.RentalanCategoryId), name = item.Title, address = item.StreetAddress, price = Convert.ToInt32(item.Price).ToString("c", base.cultureInfo), location = new String[] { item.Latitude, item.Longitude }, url = Url.Content("~/Home/RentalanDetail/" + item.Id), cover = Url.Content(_pathImage + (rentalanImgesService.ListRentalanImages(x => x.RentalanId == item.Id).FirstOrDefault() != null ? rentalanImgesService.ListRentalanImages(x => x.RentalanId == item.Id).FirstOrDefault().ImageName : "")), distance = distance(_Latitude, _Longitude, Convert.ToDouble(item.Latitude), Convert.ToDouble(item.Longitude), 'K') }; if (data.distance < 30) { locations.Add(data); } } return Json(locations, JsonRequestBehavior.AllowGet); }

Kode diatas merupakan sebuah method yang mengembalikan data daftar rentalan dengan format JSON. 4.5

Implementasi Basis Data

Pada implementasi basis data ini perangkat lunak yang digunakan yaitu Sql Server 2014.


83

Gambar 4.1

Version SQL Server

1. Implementasi basis data table province Tampilan query untuk create table province ditunjukkan pada gambar berikut

ini:

Gambar 4.2 Tampilan Query Create Table Province


84

Query diatas digunakan untuk membuat table province. Field-field di atas dibentuk untuk menampung data master provinsi. Tampilan design tabel province seperti pada gambar berikut ini:

Gambar 4.3 Tampilan Struktur Tabel Province

2. Implementasi basis data table province Tampilan query untuk create table kabupaten ditunjukkan pada gambar berikut ini:


85

Gambar 4.4 Tampilan Query Create Table Kabupaten

Query diatas digunakan untuk membuat table kabupaten. Field-field di atas dibentuk untuk menampung data master kabupaten. Tampilan design tabel kabupaten seperti pada gambar berikut ini:

Gambar 4.5 Tampilan Design Tabel Kabupaten


86

3. Tampilan query create tabel kecamatan ditunjukkan pada gambar berikut ini:

Gambar 4.6 Tampilan Query Create Table Kecamatan

Tampilan design tabel kecamatan seperti pada gambar berikut ini:

Gambar 4.7 Tampilan Design Tabel Kecamatan


87

4. Tampilan query create tabel User ditunjukkan pada gambar berikut ini:

Gambar 4.8 Tampilan Query Create Table Kecamatan

Tampilan design table User seperti pada gambar berikut ini:

Gambar 4.9 Tampilan Design Tabel User


88

5. Tampilan query create tabel UserMessage ditunjukkan pada gambar berikut ini:

Gambar 4.10 Tampilan Query Create Table UserMessage

Tampilan design table User seperti pada gambar berikut ini:



89

6. Tampilan query create tabel Rentalan ditunjukkan pada gambar berikut ini:

Gambar 4.12 Tampilan Query Create Table Rentalan

Tampilan design table Rentalan seperti pada gambar berikut ini:


90


7. Tampilan query create tabel RentalanCategory ditunjukkan pada gambar berikut ini

Gambar 4.14 Tampilan Query Create Table RentalanCategory

Tampilan design table RentalanCategory seperti pada gambar berikut ini :


91

Gambar 4.15 Tampilan Design Create Table RentalanCategory

8. Tampilan query create tabel RentalanImages ditunjukkan pada gambar berikut ini:

Gambar 4.16 Tampilan Query Create Table RentalanImages

Tampilan design table Rentalan Images seperti pada gambar berikut ini:


92

Gambar 4.17 Tampilan Design Create Table Rentalan Images


93

4.6

Konfigurasi Dasar ASP.NET MVC

Sebelum menerapkan Framework ASP.NET MVC pada aplikasi web kita, ada beberapa konfigurasi yang harus dilakukan agar framework tersebut berjalan dengan baik di atas browser. Berikut konfigurasi yang harus dilakukan adalah sebagai berikut:

4.7

Konfigurasi File Web.Config

<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFramework Section, EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />


94

<system.web> <system.webServer> <modules> <dependentAssembly> <dependentAssembly>


95

<dependentAssembly> <dependentAssembly> <dependentAssembly> <entityFramework> <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFac tory, EntityFramework"> <parameters> <parameter value="v11.0" />

4.8

Implementasi Perancangan Antarmuka (Interface) Implementasi antarmuka merupakan hasil dari perancangan user interface

yang sebelumnya sudah dilakukan pada tahap perancangan. Pada implementasi


96

antarmuka menampilkan rancangan halaman dan potongan program dari beberapa menu fungsional seperti menu home.

4.9

Implementasi Halaman Utama

Halaman utama situs web ini merupakan halaman default saat situs web ini di buka. Halaman ini berisi menu utama yang terdiri dari menu HOME, MYPROFILE, RENTALAN, AGENTS dan link LOGIN / REGISTER. Berikut adalah tampilan halaman utama:

Gambar 4.18 Antarmuka Halaman Home

Gambar di atas merupakan tampilan halaman home. Halaman ini akan muncul pertama kali ketika user masuk ke aplikasi Rentalan.Info. URL untuk mengakses halaman ini adalah http://rentalan.info/.


97

4.10

Implementasi Halaman MyProfile

Halaman MyProfile adalah halaman yang akan jika user sudah mendaftar dan login kedalam aplikasi, halamn ini digunakan untuk menyimpan detail informasi mengenai user, mensubmit data rentalan dan melihat data rentalan yang telah disubmit.

Gambar 4.19 Antarmuka Halaman MyProfile

Gambar 4.20 Antarmuka Halaman MyProfile - Tab Submit New Rentalan


98

Gambar 4.21 Antarmuka Halaman MyProfile - Tab My Rentalan

4.11

Implementasi Halaman Rentalan List

Halaman Rentalan List merupakan halaman yang berisi berbagai data data rentalan yang sudah disubmit oleh user.

Gambar 4.22 Antarmuka Halaman Rentalan List


99

4.12

Implementasi Halaman Detail Rentalan

Halaman Detail Rentalan adalah halaman yang berisi mengenai lengkap dari sebuah rentalan, pada halaman ini user dapat mengirim pesan kepada pemilik rentalan.

Gambar 4.23 Antarmuka Halaman Detail Rentalan


100

4.13

Pengujian

Pengujian program aplikasi ini dilakukan dengan metode Black Box Testing Black Box Testing adalah pengujian dengan metode test dari perspektif; tak ada data informasi mengenai struktural internal software (baik desain maupun Source Code) pengujian ini bisa dilakukan baik secara fungsional maupun non fungsional. Pengujian dengan metode blackbox testing ini dilakukan dengan menjalankan program pengembangan sistem rentalan online, kemudian dilakuan testing pada aplikasi yang telah dibangun apakah berjalan dengan baik atau tidak yang disajikan dalam bentuk tabel.

4.14

Skenario Pengujian

Skenario pengujian merupakan pengujian terhadap aplikasi pengembangan sistem rentalan yang dibangun menggunakan ASP.NET MVC. Skenario pengujian ini meliputi pengujian perangkat lunak terhadap fungsionalitas aplikasi yang berfungsi untuk menguji kesesuaian terhadap proses yang terjadi di dalam sistem. Pengujian dilakukan mengguna metode Black Box Testing, dimana metode ini lebih menitikberatkan kebutuhan fungsi dari suatu program aplikasi. Pengujian metode ini dilakukan dengan cara memberikan sejumlah masukkan pada program yang kemudian diproses sesuai dengan kebutuhan fungsionalnya untuk menghasilkan keluaran yang diinginkan. Apabila hasil keluaran yang diberikan proses sesuai dengan spesifikasi yang dirancang, maka program aplikasi dianggap benar. Akan tetapi apabila hasil keluaran yang dihasilkan tidak sesuai dengan kebutuhan fungsionalnya, maka masih terdapat kesalahan pada aplikasi tersebut.


101

4.15

Skenario Pengujian Aplikasi Halaman Utama/Home.

Table 4.3 Tabel Skenario Pengujian Halaman Utama

No 1.

Deskripsi

Kelompok

Fungsional

Uji

Menu Home

Normal

Hasil

Kasus Uji

diharapkan

Melakukan klik

yang

Menampilkan

Hasil Uji Sukses

pada halaman utama

menu

website

utama/home

4.16

Skenario Pengujian Aplikasi Halaman Register. Table 4.4 Skenario Pengujian Halaman Register

No 1.

Deskripsi

Kelompok

Fungsional

Uji

Link Register

Normal

Hasil

Kasus Uji

diharapkan

Melakukan

Menampilkan

klik pada link popup Register 2.

Register User

yang

Hasil Uji Sukses

untuk

register

Data

Submit

User Email

Valid

Information

Sukses

Activation

dengan email terkirim. yang benar 2

RegisterUser

Data

Sumit

user Email

Invalid

Information

terkirim

dengan email yan salah


tidak Sukses

102

4.17

Skenario Pengujian Aplikasi Halaman Login. Table 4.5 Skenario Pengujian Aplikasi Halaman Login

No 1.

Deskripsi

Kelompok

Fungsional

Uji

Link Login

Normal

Hasil

Kasus Uji

diharapkan

Melakukan

Menampilkan

klik pada link popup Login 2.

Login User

yang

Sukses

untuk

Login

Data

Submit email System

Valid

dan password mengarahkan dengan

Hasil Uji

akan Sukses

data halaman

yang benar

kepada MyProfile

3

Login User

Data

Submit email System

Invalid

dan password mengeluarkan dengan

akan

data notifikasi

yang salah

email/password tidak ditemukan

4.18

Skenario Pengujian Aplikasi Halaman Rentalan List

Table 4.6 Skenario Pengujian Halaman Rentalan List

No 1.

Deskripsi

Kelompok

Fungsional

Uji

Menu Rentalan

Normal

Kasus Uji Melakukan klik menu

Hasil

yang

diharapkan Menampilkan

pada halaman Rentalan List

Rentalan


Hasil Uji Sukses

103

4.19

Skenario Pengujian Aplikasi Halaman Rentalan Detail Table 4.7 Skenario Pengujian Aplikasi Halaman Rentalan Detail

No 1.

Deskripsi

Kelompok

Fungsional

Uji

Link

Title Normal

Rentalan

Kasus Uji Melakukan

Hasil

yang


Hasil Uji Sukses

klik pada link halaman Title Rentalan Rentalan List di

Rentalan

List

4.20

Skenario Pengujian Aplikasi Halaman Agent List

Table 4.8 Skenario Pengujian Halaman Agent List

No 1.

Deskripsi

Kelompok

Fungsional

Uji

Menu Agent

Normal

Kasus Uji Melakukan klik

yang


Hasil Uji Sukses

pada halaman Agent

menu Agent

4.21

Hasil

List

Skenario Pengujian Aplikasi Halaman Agent Detail

Table 4.9 Skenario Pengujian Halaman Agent Detail

No

Deskripsi

Kelompok

Fungsional

Uji

Kasus Uji

Hasil diharapkan


yang Hasil Uji

104

1.

Link

Title Normal

Agent

Melakukan

Menampilkan

Sukses

klik pada link halaman Agent Ttile

pada Detail

box Agent di Agent List

4.22

Skenario Pengujian Aplikasi Halaman My Profle

Table 4.10 Skenario Pengujian Halaman My Profile

No 1.

Deskripsi

Kelompok

Fungsional

Uji

Menu

My Normal

Profile

Hasil


yang Hasil

diharapkan

Uji

Menampilkan

Sukses

pada halaman

menu

My

My Profile

Profile 2.

Form

Submit Normal

New Rentalan

Memberikan

Menampilkan

masukkan

pesan “data has

pada

Sukses

form been succesfuly

Submit New saved” dan data Rentalan

akan pada

muncul tab

My

Rentalan

4.23

Skenario Pengujian Aplikasi Halaman Admin > User List Table 4.11 Skenario Pengujian Aplikasi Halaman Admin > User List

No 1.

Deskripsi

Kelompok

Fungsional

Uji

Menu List

User Normal


Hasil

yang Hasil

diharapkan

Uji

Menampilkan

Sukses

pada halaman List


User

105

menu

User

List 2.

Icon

Block Normal

User

Melakukan

Menampilkan

klik pada link popup Block User

Sukses

form

untuk memblock user.

3.

Form

Block Data valid Melakukan

User



Menampilkan Sukses

submit

notifikasi

dengan

User Berhasil

mengisi

diblok.

alasan ketika 

User

user diblok

dapat

tidak

mengakses account yang diblok 

Semua rentalan yang diposting user tersebut tidak

akan

muncul. Data

Melakukan

Akan

Invalid

submit

notifikasi

dengan

“silahkan

alasan

yang lengkapi alasan”

tidak di isi


muncul Sukses

106

4.24

Analisa Hasil Pengujian

Hasil pengujian skenario yang telah dilakukan dapat diperoleh hasil pengujian. Maka di peroleh hasil pengujian tersebut sesuai dengan tahap perancangan aplikasi program ini, yaitu sebagai berikut: 1.

Hasil pengujian berdasarkan analisis perancangan sistem sesuai dengan yang diharapkan dan selama pengujian, semua tombol serta menu-menu berfungsi dengan baik dan berjalan sesuai fungsi yang diinginkan.

2. Penulis berhasil menampilkan data rentalan pada maps ketika sebuah

rentalan telah disubmit. 3. Dari hasil

pengujian pencarian sudah dapat berjalan dengan

sebagaimana mestinya. 4. Pada halaman admin user list fungsi validasi sudah berjalan dengan

baik. Dari hasil pengujian yang telah dilakukan pada aplikasi ini penulis dapat menarik kesimpulan bahwa semua menu, form serta tombol pada aplikasi ini dapat berjalan dengan baik.


No title

Recommend Documents