Halaman Pembuatan Sistem User

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 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 Cha rtSummary 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 = GetTopQuestion5; 13. return Viewquest; 14. } 15. private List Question GetTopQuestion int count 16. { 17. return storeDB.Questions 18. .OrderByDescendinga = a.AnswerResults.Count 19. .Takecount 20. .ToList; 21. } 22. } 23. } 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 cla ss 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 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. 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 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. .Singleg = g.Name == categori; 5. return ViewcategoryModel; 6. } 7. public ActionResult Details int id 8. { 9. var question = storeDB.Questions.Findid; 10. return Viewquestion; 11. } 12. [ ChildActionOnly ] 13. public ActionResult Menu 14. { 15. var categori = storeDB.Categorys.ToList; 16. return PartialViewgenres; 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 cla ss 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. } 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 cla ss penjembatan antara aplikasi dan database . Class category terdiri dari 3 parameter, dan 1 parameter sebagai penghubung dengan cla ss 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 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. script src =Scriptsjquery-1.4.4.min.js type =textjavascript script 2. script type =textjavascript 3. function { 4. .RemoveLink .click function 5. { var recordToDelete = this .attr data-id ; 6. if recordToDelete = { 7. .post ShoppingCartRemoveFromCart , { id : recordToDelete }, 8. }; 9. }; ………………………………. ………………………………. 10. if data.ItemCount == 0 { 11. row- + data.DeleteId.fadeOut slow ; 12. } else { 13. item-count- + data.DeleteId.textdata.ItemCount; 14. } 15. cart-total .textdata.CartTotal; 16. update-message .textdata.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 Kode Program 4.8 Kode View untuk menampilkan list chart ………………………. ………………………. 24. foreach var item in Model.CartItems 25. { 26. tr id =row- item.RecordId 27. td Html.ActionLinkitem.Quest.Title, Details , Store , new { id = item.QuestionId }, null td 28. td item.Quest.Nominal td 29. td id =item-count- item.RecordId 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 . Cla ss 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. } Dari Kode Program 4.9, terdapat beberapa fungsi. 1. Fungsi add to chart . Berfungsi untuk menerima inputan dari user dan selanjutnya ditampung kedalam cha rt . 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 migrateCha rt . 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 ViewviewModel;} ………………………………. ………………………………. ………………………………. 12. var cart = ShoppingCart .GetCart this .HttpContext; 13. ViewData[ CartCount ] = cart.GetCount; 14. return PartialView CartSummary ; Dari Kode Program 4.10 terdapat 3 fungsi utama, yaitu fungsi add to cha rt, remove from cha rt , dan ca rtSummary . 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 cha rt summa ry yang berfungsi untuk mengambil semua nilai total termasuk nominal dan quantity . Semua fungsi tersebut berhubungan dengan database , sehingga semua transaksi akan meng update 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 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 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 dont have an account. p 5. script src = Url.Content ~Scriptsjquery.validate.min.js type =textjavascript script 6. script src = Url.Content ~Scriptsjquery.validate.unobtrusive. a. min.js type =textjavascript 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.LabelForm = m.UserName 14. div 15. div class =editor-field 16. Html.TextBoxForm = m.UserName 17. Html.ValidationMessageForm = m.UserName 18. div 19. div class =editor-label 20. Html.LabelForm = m.Password 21. div 22. div class =editor-field 23. Html.PasswordForm = m.Password 24. Html.ValidationMessageForm = m.Password 25. div 26. div class =editor-label 27. Html.CheckBoxForm = m.RememberMe 28. Html.LabelForm = 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 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 .InitializerequestContext; 12. } ……………………………. ……………………………. ……………………………. 13. [ Authorize ] 14. public ActionResult ChangePassword 15. { 16. ViewBag.PasswordLength = MembershipService.MinPasswordLength; 17. return View; 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 pa ssword . 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 pa ssword 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 FormatErrorMessageme tadata.GetDisplayName, _minCharacters, int .MaxValue 22. }; 23. } 24. } 25. endregion 26. } Dari Kode Program 4.13, fungsi utama yaitu melakukan verifikasi terhadap setiap username dan pa ssword serta password baru pada saat penggantian pa ssword . 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