Bab 4 Hasil dan Pembahasan -...

28
35 Bab 4 Hasil dan Pembahasan Setelah melakukan perancangan terhadap sistem dan menetapkan metode yang akan digunakan, maka pada bab ini akan dilakukan pembahasan mengenai bagian-bagian dari sistem dan analisa terhadap hasil yang telah didapatkan dari pembuatan aplikasi Properti Berbasis Web. 4.1 Pembuatan Sistem User 4.1.1 Halaman home Merupakan halaman home dari user. Pada halaman utama terdapat 3 kategori pertanyaan, yang masing-masing berisi pertanyaan dari tiap kategori. Terdapat juga menu yang akan menampung pilihan pertanyaan yang telah dipilih oleh user dan juga menu untuk administrator untuk melakukan maintenance data, serta link untuk kurs dollar. Keseluruhan halaman home, dapat dilihat pada Gambar 4.1 Gambar 4.1 Tampilan home

Transcript of Bab 4 Hasil dan Pembahasan -...

Page 1: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

35

Bab 4

Hasil dan Pembahasan

Setelah melakukan perancangan terhadap sistem dan

menetapkan metode yang akan digunakan, maka pada bab ini akan

dilakukan pembahasan mengenai bagian-bagian dari sistem dan

analisa terhadap hasil yang telah didapatkan dari pembuatan aplikasi

Properti Berbasis Web.

4.1 Pembuatan Sistem User

4.1.1 Halaman home

Merupakan halaman home dari user. Pada halaman utama

terdapat 3 kategori pertanyaan, yang masing-masing berisi

pertanyaan dari tiap kategori. Terdapat juga menu yang akan

menampung pilihan pertanyaan yang telah dipilih oleh user dan

juga menu untuk administrator untuk melakukan maintenance

data, serta link untuk kurs dollar. Keseluruhan halaman home,

dapat dilihat pada Gambar 4.1

Gambar 4.1 Tampilan home

Page 2: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

36

Berikut kode program untuk menampilkan link menu dan

kategori dari setiap pertanyaan, dapat dilihat pada kode program

4.1

Kode Program 4.1 Kode View untuk menampilkan menu dan link kategori

1. <ul id="navlist">

2. <li class="first">

3. <a href="@Url.Content("~")"id="current">Home</a></li>

4. <li>@{Html.RenderAction("CartSummary", "ShoppingCart");}</li>

5. <li><a href="@Url.Content("~/StoreManager/")">Admin</a></li>

6. </ul>

7. </div>

8. @{Html.RenderAction("Menu", "Store");}

9. <div id="main">

10. @RenderBody() 11. </div>

Kode perintah @{Html.RenderAction berfungsi untuk

mengambil isi dari ChartSummary yang berada dalam folder

ShoppingChart. Sedangkan kode perintah @RenderBody() berfungsi

untuk melakukan render body dari kode yang terdapat pada

file.css.

Kode Program 4.2 Kode Controller untuk halaman home

1. using System.Collections.Generic;

2. using System.Linq;

3. using System.Web.Mvc;

4. using MVC.Models;

5. namespace MVC.Controllers

6. {

7. public class HomeController : Controller

8. {

9. EntitiesDB storeDB = new EntitiesDB();

10. public ActionResult Index() 11. { 12. var quest = GetTopQuestion(5); 13. return View(quest); 14. } 15. private List<Question> GetTopQuestion(int count) 16. { 17. return storeDB.Questions 18. .OrderByDescending(a => a.AnswerResults.Count()) 19. .Take(count) 20. .ToList(); 21. } 22. } 23. }

Page 3: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

37

Pada Kode Program 4.2, terdapat beberapa fungsi yang

akan melakukan control terhadap database. Yaitu EntitiesDB

storeDB = new EntitiesDB yang merupakan inisialisasi dari class

EntitiesDB, dan return stored yang merupakan pengembalian dari

database berupa list.

Kode Program 4.3 Kode Model untuk halaman home

1. using System.Data.Entity;

2. namespace MVC.Models

3. {

4. public class EntitiesDB : DbContext

5. {

6. public DbSet<Question>Questions{ get; set; }

7. public DbSet<Category>Categorys{ get; set; }

8. public DbSet<QuestionCategory>QuestionCategorys{ get; set; }

9. public DbSet<Cart>Carts{ get; set; }

10. public DbSet<Guest>Guests{ get; set; } 11. public DbSet<Result>Results{ get; set; } 12. } 13. }

Kode Program 4.3, merupakan database context yang

mengambil setiap field pada database. Class EntitiesDB inilah

yang menjadi class perantara antara aplikasi dan database.

4.1.2 Halaman browse kategori

Pada halaman browse kategori, terdapat pertanyaan dari

setiap kategori. Kategori yang ada yaitu kategori building, water,

dan energy. Keseluruhan tampilan dapat dilihat pada Gambar 4.2,

4.3, dan 4.4

Page 4: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

38

Gambar 4.2 Tampilan halaman browse kategori building

Gambar 4.2 merupakan halaman browse kategori

building. User dapat memilih pertanyaan yang sesuai dengan

objek yang akan ditawarkan.

Gambar 4.3 Tampilan halaman browse kategori water

Gambar 4.3 merupakan halaman browse kategori

water. User dapat memilih pertanyaan yang sesuai dengan objek

yang akan ditawarkan.

Page 5: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

39

Gambar 4.4 Tampilan halaman browse kategori energy

Gambar 4.4 merupakan halaman browse kategori

energy. User dapat memilih pertanyaan yang sesuai dengan

objek yang akan ditawarkan.

Berikut Kode Program untuk menampilkan list data pertanyaan,

dapat dilihat pada Kode Program 4.4

Kode Program 4.4 Kode View untuk menampilkan list pertanyaan

1. @model MVC.Models.Category

2. @{ViewBag.Title = "Browse Question";}

3. <div class="categories">

4. <h3><em>@Model.Name</em> Question</h3>

5. <ul id="data-list">

6. @foreach (var quest in Model.Questions)

7. {

8. <li>

9. <a href="@Url.Action("Details", new { id = quest.QuestionId

})">

10. <img alt="@quest.Title" src="@quest.DisplayArtUrl" /> 11. <span>@quest.Title</span> 12. </a> 13. </li> 14. } 15. </ul> 16. </div>

Page 6: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

40

Kode Program 4.5 Kode Controller untuk menampilkan list pertanyaan

1. public ActionResult Browse(string categori)

2. {

3. var categoryModel = storeDB.Categorys.Include("Questions")

4. .Single(g => g.Name == categori);

5. return View(categoryModel);

6. }

7. public ActionResult Details(int id)

8. {

9. var question = storeDB.Questions.Find(id);

10. return View(question); 11. } 12. [ChildActionOnly] 13. public ActionResult Menu() 14. { 15. var categori = storeDB.Categorys.ToList(); 16. return PartialView(genres); 17. } 18. } 19. }

Dari Kode Program 4.5, pencarian kategori dilakukan

berdasarkan string per-kategori. Sedangkan untuk detail dari setiap

kategori dilakukan dengan mengambil nilai dari Id setiap kategori.

Dalam pengambilan value dari kategori, proses dilakukan dengan

menggabungkan model class question dan class kategory. Class

question dan kategori dapat dilihat pada Kode Program 4.6 dan 4.7

Kode Program 4.6 Kode Model untuk menampilkan list pertanyaan

1. namespace MVC.Models

2. {

3. public partial class Category

4. {

5. public int CategoryId { get; set; }

6. public string Name { get; set; }

7. public string Description { get; set; }

8. public List<Question> Questions { get; set; }

9. }

10. }

Page 7: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

41

Kode Program 4.7 Kode Model untuk menampilkan list pertanyaan

1. namespace MVC.Models

2. {

3. [Bind(Exclude = "QuestionId")]

4. public class Question

5. {

6. [ScaffoldColumn(false)]

7. public int QuestionId { get; set; }

8. [DisplayName("Categori")]

9. public int CategoryId { get; set; }

10. [DisplayName("QuestCategori")] 11. public int QuestionCategoryId { get; set; } 12. [Required(ErrorMessage = "An Question Title is required")] 13. [StringLength(160)] 14. public string Title { get; set; } 15. [Required(ErrorMessage = "Nominal is required")] 16. [Range(0.01, 10000000.00,

ErrorMessage = "Nominal must be between 0.01 and

1000000.00")]

17. public decimal Nominal { get; set; } 18. [DisplayName("Display Art URL")] 19. [StringLength(1024)] 20. public string DisplayArtUrl { get; set; } 21. public virtual Category Categori {get; set; } 22. public virtual QuestionCategory QuestionCategory

{ get; set; }

23. public virtual List<Result> AnswerResults { get; set; } 24. } 25. }

Kode Program 4.6 dan 4.7, merupakan class penjembatan

antara aplikasi dan database. Class category terdiri dari 3

parameter, dan 1 parameter sebagai penghubung dengan class

question. Sedangkan class question menangani value dari class

question database. Fungsi dari required errormessage yaitu untuk

menampilkan informasi jika terjadi kegagalan atau kesalahan

dalam aplikasi. Sedangkan scaffoldColumn merupakan auto

generate pada saat men-generate class tersebut. ScaffoldColumn

sendiri merupakan sebuah template untuk pemodelan interface.

4.1.3 Halaman list chart

Halaman list chart merupakan halaman untuk menampung

setiap pilihan dari user. Pada halaman ini juga nilai total dari

Page 8: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

42

setiap pilihan dijumlahkan. Keseluruhan halaman dapat dilihat

pada Gambar 4.5

Gambar 4.5 Tampilan halaman list chart

Berikut Kode Program untuk menampung pilihan dari user

serta fungsi total, dapat dilihat pada Kode Program 4.8

Kode Program 4.8 Kode View untuk menampilkan list chart

1. <scriptsrc="/Scripts/jquery-1.4.4.min.js"

type="text/javascript"></script>

2. <script type="text/javascript">

3. $(function () {

4. $(".RemoveLink").click(function ()

5. {var recordToDelete = $(this).attr("data-id");

6. if (recordToDelete != '') {

7. $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete

},

8. });

9. });

………………………………. ……………………………….

10. if (data.ItemCount == 0) { 11. $('#row-' + data.DeleteId).fadeOut('slow'); 12. } else { 13. $('#item-count-' + data.DeleteId).text(data.ItemCount); 14. } 15. $('#cart-total').text(data.CartTotal); 16. $('#update-message').text(data.Message); 17. $('#cart-status').text('Cart (' + data.CartCount + ')'); 18. }

19. </script> 20. <h3><em>Review</em> your list</h3> 21. <p class="button"> 22. @Html.ActionLink("Checkout >>>", "Address", "Checkout") 23. </p>

Page 9: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

43

Kode Program 4.8 Kode View untuk menampilkan list chart

………………………. ……………………….

24. @foreach (var item in Model.CartItems) 25. { 26. <tr id="[email protected]"> 27. <td>@Html.ActionLink(item.Quest.Title, "Details", "Store", new

{ id = item.QuestionId }, null)</td>

28. <td>@item.Quest.Nominal</td> 29. <td id="[email protected]"> 30. @item.Count</td> 31. <td><a href="#" class="RemoveLink" data-

id="@item.RecordId">Remove from list</a></td></tr>}

32. @Html.ActionLink("Log off", "LogOff", "Account") 33. </p>

Fungsi Kode Program 4.8 adalah untuk melakukan handle

data dari pilihan user, terdapat script yang berfungsi untuk

interface. Sedangkan fungsi dari setiap kode @ yaitu untuk

mengambil nilai dari model yang nantinya akan ditampilkan

melalui view. Class model untuk menampilkan list chart dapat

dilihat pada Kode Program 4.9

Kode Program 4.9 Kode Model untuk menampilkan list chart

1. namespace MVC.Models

2. {

3. public partial class ShoppingCart

4. {

5. EntitiesDB storeDB = new EntitiesDB();

6. string ShoppingCartId { get; set; }

7. public const string CartSessionKey = "CartId";

………………………………………

………………………………………

………………………………………

8. public static ShoppingCart GetCart(HttpContextBase context)

9. {

10. foreach (Cart item in shoppingCart) 11. { 12. item.CartId = userName; 13. } 14. storeDB.SaveChanges(); 15. } 16. } 17. }

Page 10: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

44

Dari Kode Program 4.9, terdapat beberapa fungsi.

1. Fungsi add to chart. Berfungsi untuk menerima inputan dari user

dan selanjutnya ditampung kedalam chart.

2. Fungsi remove chart. Berfungsi untuk menghapus chart dari list.

Proses penghapusan juga mengembalikan nilai dari jumlah list yang

ada, setelah list terhapus.

3. Fungsi empty chart. Berfungsi jika list chart dalam keadaan null

atau empty.

4. Fungsi getCount. Berfungsi untuk melakukan penjumlahan item

dari setiap question yang telah dipilih oleh user.

5. Fungsi getTotal. Berfungsi untuk melakukan penjumlahan nilai

nominal dari setiap question yang telah dipilih oleh user.

6. Fungsi createOrder. Berfungsi untuk identifikasi semua pilihan

dari user, sehingga setiap pilihan dalam list dapat ter-autentikasi.

7. Fungsi migrateChart. Berfungsi untuk autentikasi username dari

setiap list pilihan user.

Sedangkan untuk controller dari list chart dapat dilihat pada

Kode Program 4.10

Kode Program 4.10 Kode Controller untuk menampilkan list chart

1. public class ShoppingCartController : Controller

2. {

3. EntitiesDB storeDB = new EntitiesDB();

4. public ActionResult Index()

5. {

6. var cart = ShoppingCart.GetCart(this.HttpContext);

7. var viewModel = new CartViewModel

8. {

9. CartItems = cart.GetCartItems(),

10. CartTotal = cart.GetTotal()}; 11. return View(viewModel);}

……………………………….

……………………………….

……………………………….

12. var cart = ShoppingCart.GetCart(this.HttpContext); 13. ViewData["CartCount"] = cart.GetCount(); 14. return PartialView("CartSummary");

Page 11: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

45

Dari Kode Program 4.10 terdapat 3 fungsi utama, yaitu

fungsi add to chart, remove from chart, dan cartSummary. Fungsi

add to chart yaitu memasukan question yang telah dipilih oleh

user kedalam list, fungsi remove from chart, yaitu menghapus

chart yang terdapat dalam list, dan chart summary yang berfungsi

untuk mengambil semua nilai total termasuk nominal dan quantity.

Semua fungsi tersebut berhubungan dengan database, sehingga

semua transaksi akan mengupdate database.

4.1.4 Halaman Login

Pada halaman login, user diharuskan memasukkan

username dan password. Jika user tidak memiliki account, maka

user dapat melakukan registrasi. Setelah user memiliki account,

maka login dapat berhasil, lalu user akan diminta memasukkan

data diri yang meliputi nama, alamat, kota, provinsi, kode pos,

nomor telepon, dan alamat email. Keseluruhan halaman dapat

dilihat pada Gambar 4.6, Gambar 4.7, dan Gambar 4.8

Gambar 4.6 Tampilan halaman Login User

Page 12: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

46

Gambar 4.7 Tampilan halaman Create New Account

Gambar 4.7 merupakan halaman create new account, dimana

terdapat 4 field yang harus diisi oleh user. Meliputi username, email

address, password, dan confirm password.

Gambar 4.8 Tampilan halaman User Information

Berikut Kode Program view untuk halaman login, dapat dilihat

pada Kode Krogram 4.11

Page 13: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

47

Kode Program 4.11 Kode View untuk halaman Login

1. @model MVC.Models.LogOnModel

2. @{ViewBag.Title = "Log On";}

3. <h2>Log On</h2>

4. <p>Please enter your username and password.

@Html.ActionLink("Register", "Register") if you don't have an

account.</p>

5. <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"

type="text/javascript"></script>

6. <script

src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.

a. min.js")" type="text/javascript"></script>

7. @Html.ValidationSummary(true, "Login was unsuccessful. Please

correct the errors and try again.")

8. @using (Html.BeginForm()) {

9. <div>

10. <fieldset> 11. <legend>Account Information</legend>

12. <div class="editor-label"> 13. @Html.LabelFor(m => m.UserName) 14. </div> 15. <div class="editor-field"> 16. @Html.TextBoxFor(m => m.UserName) 17. @Html.ValidationMessageFor(m => m.UserName) 18. </div>

19. <div class="editor-label"> 20. @Html.LabelFor(m => m.Password) 21. </div> 22. <div class="editor-field"> 23. @Html.PasswordFor(m => m.Password) 24. @Html.ValidationMessageFor(m => m.Password) 25. </div>

26. <div class="editor-label"> 27. @Html.CheckBoxFor(m => m.RememberMe) 28. @Html.LabelFor(m => m.RememberMe) 29. </div> 30. <p><input type="submit" value="Log On" /></p> 31. </fieldset> 32. </div> 33. }

Dari Kode Program 4.11, merupakan kode interface untuk

login user dan login administrator, hanya proses login yang

membedakan, yaitu username dan password. Sedangkan proses

autentikasi username dan password tidak melalui query database

atau sejenisnya, melainkan menggunakan fitur dari ASP.NET,

yaitu ASP.NET Configuration yang dapat dilihat pada Gambar

Page 14: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

48

4.9. Dari sini akan tercatat secara otomatis, username dan

password pada saat melakukan registrasi. Sebagai administrator,

configurasi dapat dilakukan untuk menambah user, atau

menghapus user yang dilakukan secara manual.

Gambar 4.9 Tampilan ASP.NET Configuration

Berikut kode Controller dan Model untuk proses Login

dapat dilihat pada Kode Program 4.12

Kode Program 4.12 Kode Controller untuk halaman Login

1. namespace MVC.Controllers

2. {

3. public class AccountController : Controller

4. {

5. public IFormsAuthenticationService FormsService { get; set; }

6. public IMembershipService MembershipService { get; set; }

7. protected override void Initialize(RequestContext

requestContext)

8. {

9. if (FormsService == null) { FormsService = new

FormsAuthenticationService(); }

10. if (MembershipService == null) { MembershipService = new AccountMembershipService(); }

11. base.Initialize(requestContext); 12. }

…………………………….

…………………………….

…………………………….

13. [Authorize] 14. public ActionResult ChangePassword() 15. { 16. ViewBag.PasswordLength = MembershipService.MinPasswordLength; 17. return View();

Page 15: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

49

Dari Kode Program 4.12, terdapat beberapa fungsi utama

yaitu, logon, logoff, register, dan change password. Fungsi login

sebagai validasi user yang masuk ke dalam sistem perbedaan

validasi berdasarkan username dan password. Fungsi logoff untuk

keluar dari sistem, dan menghapus seluruh session yang ada.

Fungsi register digunakan untuk melakukan registrasi terhadap

user baru yang belum memiliki account sebelumnya, dan change

password digunakan untuk mengganti password yang telah ada

dengan password yang baru. Terdapat juga peringatan jika terjadi

kesalahan dalam melakukan login dan perubahan password.

Kode Program 4.13 Kode Model untuk halaman Login

1. namespace MVC.Models

2. {

3. #region Models

4. public class ChangePasswordModel

5. {

6. [Required]

7. [DataType(DataType.Password)]

8. [Display(Name = "Current password")]

9. public string OldPassword { get; set; }

10. [Required] 11. [ValidatePasswordLength] 12. [DataType(DataType.Password)] 13. [Display(Name = "New password")] 14. public string NewPassword { get; set; } 15. [DataType(DataType.Password)] 16. [Display(Name = "Confirm new password")] 17. [Compare("NewPassword", ErrorMessage = "The new password and

confirmation password do not match.")]

18. public string ConfirmPassword { get; set; } 19. }

………………………………..

………………………………..

………………………………..

20. public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata,

ControllerContext context)

21. { ModelClientValidationStringLengthRule(FormatErrorMessage(me

tadata.GetDisplayName()), _minCharacters, int.MaxValue)

22. }; 23. } 24. } 25. #endregion 26. }

Page 16: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

50

Dari Kode Program 4.13, fungsi utama yaitu melakukan

verifikasi terhadap setiap username dan password serta password

baru pada saat penggantian password. Terdapat validasi terhadap

setiap password yang harus memiliki minimal 7 karakter dan

dalam 7 karakter tersebut terdiri dari alphabet, numerik dan

simbol.

Jika tidak sesuai dengan kriteria, maka peringatan akan

muncul berdasarkan kesalahan dari user. Untuk kode lengkap

dapat dilihat pada lampiran.

4.1.5 Halaman manage data

Pada halaman manage data, khususnya untuk

administrator, terdapat 3 pilihan menu yaitu create new, edit dan

delete. Halaman keseluruhan dapat dilihat pada Gambar 4.9

Gambar 4.10 Tampilan halaman manage data

Dari halaman manage data, administrator dapat melakukan

insert data baru dengan memilih link create new. Sedangkan link

edit dan delete berfungsi untuk melakukan edit data yang telah ada

untuk diperbaharui dan delete untuk menghapus data yang ada.

Page 17: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

51

Halaman create new, edit dan delete dapat dilihat pada Gambar

4.10, Gambar 4.11, Gambar 4.12

Gambar 4.11 Tampilan halaman create new question

Gambar 4.10 merupakan halaman create new question. Terdapat

5 field yang harus diisi, antara lain category, question category, title,

nominal, dan display art url.

Gambar 4.12 Tampilan halaman edit question

Page 18: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

52

Gambar 4.11 merupakan halaman edit question. Terdapat 5 field

yang dapat diubah antara lain category, question category, title,

nominal, dan display art url.

Gambar 4.13 Tampilan halaman delete question

Gambar 4.12 merupakan halaman delete confirmation. Terdapat

button delete sebagai tanda user menyetujui penghapusan data.

Berikut Kode Program view untuk halaman manage data.

Kode Program 4.14 Kode View untuk halaman manage data

1. @model IEnumerable<MVC.Models.Question>

2. @using MVC.Helpers

3. @{ViewBag.Title = "Store Manager - All Questions";

4. }

5. <h2>Index</h2>

6. <p>@Html.ActionLink("Create New ", "Create")

7. </p>

8. <table><tr>

9. <th></th>

10. <th>Title</th> 11. <th>Question Title</th> 12. <th>Category</th> 13. </tr> 14. @foreach (var item in Model) { 15. <tr> 16. <td>@Html.ActionLink("Edit", "Edit", new { id=item.QuestionId

}) | @Html.ActionLink("Delete", "Delete", new {

id=item.QuestionId })

17. </td> 18. <td>@Html.Truncate(item.Title, 25) </td> 19. <td>@Html.Truncate(item.QuestionCategory.TitleCategory,

25)</td>

…………………………. …………………........

Page 19: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

53

Dari Kode Program 4.14, dapat dilihat beberapa fungsi,

antara lain yaitu fungsi truncate dan IEnumerable. Fungsi truncate

digunakan untuk membatasi nilai dari row tabel. Sedangkan

IEnumerable digunakan untuk mengambil nilai tertentu dari form

@Html.

Sedangkan untuk kode controller dapat dilihat pada Kode

Program 4.15

Kode Program 4.15 Kode Controller untuk halaman manage data

1. namespace MVC.Controllers

{

2. [Authorize(Roles = "Administrator")]

3. public class StoreManagerController : Controller

4. {

5. EntitiesDB storeDB = new EntitiesDB();

6. public ActionResult Index()

7. {

8. var albums = storeDB.Questions

.Include("Categori").Include("QuestionCategory")

.ToList();

9. return View(albums);

10. } ………………………………

…………………………….

…………………………….

11. [HttpPost] 12. public ActionResult Delete(int id, FormCollection collection) 13. { 14. var album = storeDB.Questions.Find(id);

15. storeDB.Questions.Remove(album); 16. storeDB.SaveChanges(); 17. return View("Deleted"); 18. } 19. } 20. }

Dari Kode Program 4.15, terlihat bahwa dalam halaman ini,

autentikasi diberikan kepada administrator sebagai hak dalam

melakukan manage data, dengan adanya [Authorize(Roles =

"Administrator")]

Page 20: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

54

4.2 Pengujian Sistem

Untuk pengujian aplikasi properti berbasis web ini

menggunakan metode blackbox. Pengujian dilakukan oleh bagian

pemasaran Damai Putra Group bagian pengolahan data, dan dua

orang staff pegawai sebagai guest. Rincian pengujian dapat dilihat

pada Tabel 4.1 berikut :

a. Pengujian Login untuk melakukan pengecekan apakah

fungsional dari halaman Login telah berjalan dengan baik. Dari

pengujian yang dilakukan didapat kesimpulan bahwa halaman

Login telah berjalan dengan baik.

Tabel 4.1 Pengujian Blackbox halaman Login

Aktivitas

dan Event

Input Output Status

Pengujian

Login user

dengan klik

tombol

login

Username

dan

Password

a. Jika berhasil maka

masuk halaman user

information dengan

hak akses sebagai

user

b. Jika password salah

maka akan muncul

peringatan password

salah

c. Jika username salah

maka akan muncul

peringatan username

salah

Valid

Login

admin

Username

dan

a. Jika berhasil maka

masuk halaman

Valid

Page 21: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

55

dengan klik

tombol

login

Password manage data dengan

hak akses sebagai

admin

b. Jika password salah

maka akan muncul

peringatan password

salah

c. Jika username salah

maka akan muncul

peringatan username

salah

b. Pengujian untuk halaman menu-menu yang dapat diakses oleh

user meliputi pilihan kategori, dan lihat album. Dari pengujian

yang dilakukan didapat kesimpulan bahwa menu-menu yang

ada telah berjalan dengan baik.

Tabel 4.2 Pengujian Blackbox halaman menu user

Aktivitas

dan

Event

Input Output Status

Pengujian

Pilih

kategori

Building

Jika berhasil maka

masuk halaman

pertanyaan dari kategori

building.

Valid

Pilih

kategori

Water

Jika berhasil maka

masuk halaman

pertanyaan dari kategori

water .

Valid

Page 22: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

56

Pilih

kategori

Energy

Jika berhasil maka

masuk halaman

pertanyaan dari kategori

energy.

Valid

Lihat

album

dengan

klik link

album

Jika berhasil maka akan

masuk ke halaman

album.

Valid

Lihat list

chart

Pilihan

kategori

dari setiap

pertanyaan

Jika berhasil maka akan

masuk halaman list

chart.

Valid

Create

new user

Username,

password,

email

address

a. Jika berhasil maka

akan masuk ke

halaman home.

b. Jika gagal maka akan

muncul informasi

kesalahan format

inputan username,

password, dan email

address.

Valid

Change

password

Current

password

dan new

password

a. Jika berhasil maka

akan masuk ke

halaman home.

b. Jika gagal maka akan

muncul informasi

kesalahan format

inputan password.

Valid

c. Pengujian untuk halaman menu-menu yang dapat diakses oleh

admin meliputi view data, insert data, edit data, delete data,

pilihan kategori, dan lihat album. Dari pengujian yang

dilakukan didapat kesimpulan bahwa menu-menu yang ada

telah berjalan dengan baik.

Page 23: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

57

Tabel 4.3 Pengujian Blackbox halaman menu admin

Aktivitas

dan Event

Input Output Status

Pengujian

View data Username dan

password

a. Jika berhasil

maka masuk

halaman manage

data.

b. Jika gagal akan

muncul informasi

username atau

password salah.

Valid

Insert data Memasukkan

Category,

QuestCategor

y, Title,

Nominal dan

DisplayArtUrl

a. Jika berhasil

maka masuk

halaman manage

data.

b. Jika gagal akan

muncul informasi

kesalahan dalam

format inputan

data.

Valid

Edit Data Memasukkan

Category,

QuestCategor

y, Title,

Nominal dan

DisplayArtUrl

a. Jika berhasil

maka masuk

halaman manage

data.

b. Jika gagal akan

muncul informasi

kesalahan dalam

format inputan

data.

Valid

Delete data Jika berhasil maka

akan masuk ke

halaman delete

confirmation.

Valid

Page 24: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

58

Pilih

kategori

Building

Jika berhasil maka

masuk halaman

pertanyaan dari

kategori building.

Valid

Pilih

kategori

Water

Jika berhasil maka

masuk halaman

pertanyaan dari

kategori water.

Valid

Pilih

kategori

Energy

Jika berhasil maka

masuk halaman

pertanyaan dari

kategori energy.

Valid

Lihat

album

dengan klik

link album

Jika berhasil maka

akan masuk ke

halaman album.

Valid

Berdasarkan pengujian yang telah dilakukan didapatkan

hasil bahwa aplikasi ini sudah berjalan secara fungsional dan

mengeluarkan informasi sesuai dengan yang diharapkan.

Page 25: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

59

4.3 Analisis Aplikasi

Sistem yang dibangun merupakan sebuah aplikasi web

properti yang menitikberatkan informasi kepada user mengenai

nilai jual dari fitur bangunan yang user miliki. Selain itu aplikasi

ini juga memberikan informasi kepada pihak pengelola mengenai

data dari penjual (khususnya member dari Valencia Residence)

sehingga pihak pengelola telah memiliki gambaran letak, bentuk

dan fitur dan juga nilai jual dari bangunan tersebut. Dari fitur-fitur

yang dimiliki, user akan mendapatkan keuntungan nilai jual dari

harga semestinya. Ada tiga aspek yang mempengaruhi dari nilai

jual bangunan yang dimiliki.

Aspek pertama adalah fitur bangunan. Sebagai contoh bentuk

bangunan secara default tidak memiliki kolam ikan pada badian

depan atau belakang bangunan. Dengan adanya penambahan

kolam ikan tersebut, maka nilai jual bangunan akan bertambah

sesuai dengan nilai jual dari bagian pemasaran.

Aspek kedua adalah fitur air. Sebagai contoh sumber air yang

digunakan bersumber dari PDAM (Perusahaan Daerah Air

Minum). Dengan penambahan sumber air berupa sumur, maka

nilai jual akan bertambah sesuai dengan nilai jual dan spesifikasi

teknis alat pompa.

Aspek ketiga adalah fitur energi. Sebagai contoh sumber

tegangan listrik berasal dari PLN (Perusahaan Listrik Negara)

dengan daya tertentu. Jika sumber tegangan dari PLN padam,

maka akan mengganggu aktifitas dari pemilik rumah. Dengan

adanya fitur energi lain yaitu berupa generator, maka akan

membatu pemilik rumah dalam beraktifitas.

Page 26: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

60

Dari ketiga fitur tersebut, akan mempengaruhi nilai jual dari

bangunan serta menjawab pemikiran dan persepsi masyarakat

terhadap tingginya nilai jual dari bangunan.

4.4 Analisis Performansi

Hasil analisis performa dari MVC 3.0 yang dilakukan dengan

testing berdasarkan aspek kecepatan (time/milisecond) dan aspek

memori (kilobyte). Berikut hasil analisis performa kecepatan dari

MVC 3.0.

Gambar 4.14 Report hasil analisis kecepatan

Dari Gambar 4.14, terdapat grafik yang menunjukkan

penggunaan resource dari processor saat menjalankan perintah-

perintah berdasarkan permintaan user. Rata-rata penggunaan

resource dalam 1detik mencapai kurang lebih 50% dari total

resource yang ada. Dari tabel, ditunjukkan bahwa proses dalam

menjalankan perintah untuk menampilkan halaman home adalah

sebesar 6.877 milisecond, untuk menampilkan halaman login

Page 27: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

61

adalah sebesar 1.255 milisecond, dan proses menjalankan layout

web sebesar 2.530 milisecond

Gambar 4.15 Tampilan hasil analisis alokasi memori

Dari Gambar 4.15, terdapat grafik yang menunjukkan

penggunaan resource dari processor saat menjalankan perintah-

perintah berdasarkan permintaan user. Rata-rata penggunaan

Page 28: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1747/5/T1_672007236_BAB IV.pdf · browse. kategori . Pada halaman . browse. kategori, terdapat

62

resource dalam 1detik mencapai kurang lebih 50% dari total

resource yang ada. Dari tabel, ditunjukkan bahwa alokasi memori

dalam menjalankan perintah proses doublequery adalah sebesar

39.85% dari total keseluruhan, untuk proses update dan save data

adalah sebesar 8.68%, dan proses untuk singlequery sebesar

6.14%. Sedangkan untuk alokasi dari tipe data yang ada yaitu

string, char, dan int adalah 14.95%, 7.96% dan 4.71%.