Dari penjelasan di atas maka pada sub bab ini akan dilakukan pembuatan file komponen view untuk setiap fitur dari aplikasi book store. Berikut adalah daftar file komponen view untuk setiap fitur:
1. Mengelola kategori buku.
- Index.cshtml yang akan menampilkan tabel daftar kategori buku. Pada halaman ini juga terdapat fitur untuk menghapus data kategori buku. Kategore buku hanya bisa dihapus jika belum ada buku yang menggunakan kategori tersebut. - Create.cshtml untuk form input untuk menambah data kategori buku. - Edit.cshtml untuk form mengedit data kategori buku.
2. Mengelola pengarang buku, fitur ini akan memiliki 2 file yaitu:
- Index.cshtml yang akan menampilkan tabel daftar pengarang buku. Pada halaman ini juga terdapat fitur untuk menghapus data pengarang buku.
139 Pengarang buku hanya bisa dihapus jika belum ada buku yang terkait dengan data pengarang tersebut.
- Create.cshtml untuk form input untuk menambah data pengarang buku. - Edit.cshtml untuk form mengedit data pengarang buku.
3. Mengelola buku
- Index.cshtml yang akan menampilkan tabel daftar buku. Pada halaman ini juga terdapat fitur untuk menghapus data buku.
- Create.cshtml untuk form input untuk menambah data buku. - Edit.cshtml untuk form mengedit data buku.
Kategori
File-file ini disimpan pada folder Category di dalam folder Views.
Index.cshtml Index.cshtml @model IList<EFCoreBookStore.Models.Category> <div class=""> <div class="page-title"> <div class="title_left"> <h3>Books Categories</h3> </div> <div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group"> <input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> </div> <div class="clearfix"></div> <div class="row">
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel">
<div class="x_title">
<h2>List of Book Categories</h2>
<ul class="nav navbar-right panel_toolbox"> <li><a controller="Category" asp-action="Create"><i class="fa fa-plus"></i> Add Data</a></li> </ul>
<div class="clearfix"></div> </div>
<div class="x_content">
<div class="table-responsive"> <table class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings"> <th>
<input type="checkbox" id="check-all" class="flat">
140
<th
class="column-title" style="width: 5%">@Html.DisplayNameFor(model => model.FirstOrDefaul t().CategoryID)</th>
<th
class="column-title" style="width: 85%">@Html.DisplayNameFor(model => model.FirstOrDefau lt().Name)</th>
<th class="column-title
no-link last" style="width: 10%"><span class="nobr">Action</span></th> </tr>
</thead> <tbody>
@{ var odd = false; }
@foreach (var item in Model){
<tr class="@(odd ? "odd": "even") pointer"> <td class="a-center ">
<input type="checkbox" class="flat" na me="table_records">
</td>
<td class=" ">@item.CategoryID</td> <td class=" ">@item.Name</td> <td class=" last">
<a controller="Category" asp-action="Edit" asp-route-id="@item.CategoryID">Edit</a> |
<a controller="Category" asp-action="Delete" asp-route-id="@item.CategoryID">Delete</a> </td> </tr> odd = !odd; } </tbody> </table> </div> </div> </div> </div> </div> </div>
Berikut adalah antarmuka dari file Index.cshtml ini.
141 Create.cshtml Create.cshtml @model EFCoreBookStore.Models.Category <div class=""> <div class="page-title"> <div class="title_left"> <h3>Books Categories</h3> </div> <div class="clearfix"></div> <div class="row">
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel">
<div class="x_title">
<h2>Form of Book Categories <small>create data</sm all></h2>
<div class="clearfix"></div> </div>
<div class="x_content"> <br />
<form controller="Category"
asp-action="Create" data-parsley-validate class="form-horizontal form-label-left">
<div asp-validation-summary="All"></div> <div class="form-group">
<label asp-for="Name" class="control-label col-md-3 col-sm-3 col-xs-12" ></class="control-label>
<div class="col-md-6 col-sm-6 col-xs-12"> <input
asp-for="Name" required="required" class="form-control col-md-7 col-xs-12"> <span asp-validation-for="Name"></span> </div>
</div>
<div class="ln_solid"></div> <div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button class="btn btn-primary" type="button">Cancel</button>
<button class="btn btn-primary" type="reset">Reset</button>
<button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> </div> </div> </div> </div>
142
Gambar 97. Book Store - Kategori buku - Create.cshtml.
Edit.cshtml Edit.cshtml @model EFCoreBookStore.Models.Category <div class=""> <div class="page-title"> <div class="title_left"> <h3>Books Categories</h3> </div> <div class="clearfix"></div> <div class="row">
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel">
<div class="x_title">
<h2>Form of Book Categories <small>edit data</smal l></h2>
<div class="clearfix"></div> </div>
<div class="x_content"> <br />
<form controller="Category"
asp-action="Edit" data-parsley-validate class="form-horizontal form-label-left">
<div asp-validation-summary="All"></div> <div class="form-group">
<label
asp-for="CategoryID" class="control-label col-md-3 col-sm-3 col-xs-12" ></label>
<div class="col-md-6 col-sm-6 col-xs-12"> <input
asp-for="CategoryID" readonly="readonly" required="required" class="form-control col-md-7 col-xs-12">
<span asp-validation-for="CategoryID"></span>
</div> </div>
<div class="form-group">
<label asp-for="Name" class="control-label col-md-3 col-sm-3 col-xs-12" ></class="control-label>
143
<div class="col-md-6 col-sm-6 col-xs-12"> <input
asp-for="Name" required="required" class="form-control col-md-7 col-xs-12"> <span asp-validation-for="Name"></span> </div>
</div>
<div class="ln_solid"></div> <div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button class="btn btn-primary" type="button">Cancel</button>
<button class="btn btn-primary" type="reset">Reset</button>
<button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> </div> </div> </div> </div>
Berikut adalah antarmuka file Edit.cshtml.
Gambar 98. Book Store - Kategori buku - Edit.cshtml.
Pengarang
File-file ini disimpan di dalam folder Author yang berada pada folder Views.
Index.cshtml Index.cshtml @model IList<EFCoreBookStore.Models.Category> <div class=""> <div class="page-title"> <div class="title_left"> <h3>Books Categories</h3>
144
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group"> <input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> </div> <div class="clearfix"></div> <div class="row">
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel">
<div class="x_title">
<h2>List of Book Categories</h2>
<ul class="nav navbar-right panel_toolbox"> <li><a controller="Category" asp-action="Create"><i class="fa fa-plus"></i> Add Data</a></li> </ul>
<div class="clearfix"></div> </div>
<div class="x_content">
<div class="table-responsive"> <table class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings"> <th>
<input type="checkbox" id="check-all" class="flat">
</th>
<th
class="column-title" style="width: 5%">@Html.DisplayNameFor(model => model.FirstOrDefaul t().CategoryID)</th>
<th
class="column-title" style="width: 85%">@Html.DisplayNameFor(model => model.FirstOrDefau lt().Name)</th>
<th class="column-title
no-link last" style="width: 10%"><span class="nobr">Action</span></th> </tr>
</thead> <tbody>
@{ var odd = false; }
@foreach (var item in Model){
<tr class="@(odd ? "odd": "even") pointer"> <td class="a-center ">
<input type="checkbox" class="flat" na me="table_records">
</td>
<td class=" ">@item.CategoryID</td> <td class=" ">@item.Name</td> <td class=" last">
<a controller="Category" asp-action="Edit" asp-route-id="@item.CategoryID">Edit</a> |
<a controller="Category" asp-action="Delete" asp-route-id="@item.CategoryID">Delete</a>
145 </td> </tr> odd = !odd; } </tbody> </table> </div> </div> </div> </div> </div> </div>
Berikut ini adalah antarmuka file Index.cshtml.
Gambar 99. Book Store - Pengarang - Index.cshtml.
Create.cshtml Create.cshtml @model EFCoreBookStore.Models.Author <div class=""> <div class="page-title"> <div class="title_left"> <h3>Author</h3> </div> <div class="clearfix"></div> <div class="row">
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel">
<div class="x_title">
<h2>Form of Author <small>create data</small></h2> <div class="clearfix"></div>
</div>
<div class="x_content"> <br />
<form controller="Author"
asp-action="Create" data-parsley-validate class="form-horizontal form-label-left">
146
<div class="form-group">
<label asp-for="Name" class="control-label col-md-3 col-sm-3 col-xs-12" ></class="control-label>
<div class="col-md-6 col-sm-6 col-xs-12"> <input
asp-for="Name" required="required" class="form-control col-md-7 col-xs-12"> <span asp-validation-for="Name"></span> </div>
</div>
<div class="form-group">
<label asp-for="Email" class="control-label col-md-3 col-sm-3 col-xs-12" ></class="control-label>
<div class="col-md-6 col-sm-6 col-xs-12"> <input
asp-for="Email" required="required" class="form-control col-md-7 col-xs-12"> <span asp-validation-for="Email"></span> </div>
</div>
<div class="ln_solid"></div> <div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button class="btn btn-primary" type="button">Cancel</button>
<button class="btn btn-primary" type="reset">Reset</button>
<button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> </div> </div> </div> </div>
Antarmuka file Create.cshtml dapat dilihat pada gambar di bawah ini.
147 Edit.cshtml Edit.cshtml @model EFCoreBookStore.Models.Author <div class=""> <div class="page-title"> <div class="title_left"> <h3>Author</h3> </div> <div class="clearfix"></div> <div class="row">
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel">
<div class="x_title">
<h2>Form of Author <small>edit data</small></h2> <div class="clearfix"></div>
</div>
<div class="x_content"> <br />
<form controller="Author"
asp-action="Edit" data-parsley-validate class="form-horizontal form-label-left">
<div asp-validation-summary="All"></div> <div class="form-group">
<label asp-for="AuthorID" class="control-label col-md-3 col-sm-3 col-xs-12" ></class="control-label>
<div class="col-md-6 col-sm-6 col-xs-12"> <input
asp-for="AuthorID" readonly="readonly" required="required" class="form-control col-md-7 col-xs-12">
</div> </div>
<div class="form-group">
<label asp-for="Name" class="control-label col-md-3 col-sm-3 col-xs-12" ></class="control-label>
<div class="col-md-6 col-sm-6 col-xs-12"> <input
asp-for="Name" required="required" class="form-control col-md-7 col-xs-12"> <span asp-validation-for="Name"></span> </div>
</div>
<div class="form-group">
<label asp-for="Email" class="control-label col-md-3 col-sm-3 col-xs-12" ></class="control-label>
<div class="col-md-6 col-sm-6 col-xs-12"> <input
asp-for="Email" required="required" class="form-control col-md-7 col-xs-12"> <span asp-validation-for="Email"></span> </div>
</div>
<div class="ln_solid"></div> <div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button class="btn btn-primary" type="button">Cancel</button>
<button class="btn btn-primary" type="reset">Reset</button>
<button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div>
148
</div> </div> </div> </div>
Antarmuka file Edit.cshtml dapat dilihat pada gambar di bawah ini.
Gambar 101. Book Store - Pengarang - Edit.cshtml..
Buku
Index.cshtml Index.cshtml @model IList<EFCoreBookStore.Models.BookViewModel> <div class=""> <div class="page-title"> <div class="title_left"> <h3>Books</h3> </div> <div class="title_right"><div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group"> <input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> </div> <div class="clearfix"></div> <div class="row">
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel">
<div class="x_title"> <h2>List of Books</h2>
149
<ul class="nav navbar-right panel_toolbox"> <li><i class="fa fa-plus"></i> Add Data</li> </ul>
<div class="clearfix"></div> </div>
<div class="x_content">
<div class="table-responsive"> <table class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings"> <th>
<input type="checkbox" id="check-all" class="flat">
</th>
<th class="column-title" style="width: 10%">Cover</th>
<th class="column-title" style="width: 10%">Category</th>
<th class="column-title" style="width: 40%">Title</th>
<th class="column-title" style="width: 20%">Publish Date</th> <th class="column-title" style="width: 10%">Qty</th>
<th class="column-title
no-link last" style="width: 10%"><span class="nobr">Action</span></th> </tr>
</thead> <tbody>
@{ var odd = false; }
@foreach (var item in Model){
<tr class="@(odd ? "odd": "even") pointer"> <td class="a-center ">
<input type="checkbox" class="flat" na me="table_records">
</td>
<td class=" "><img src="~/upload/aspnet-mvc.jpg" width="100"/></td> <td class=" ">@item.CategoryName</td> <td class=" "> @item.Title<br/> ISBN: @item.ISBN<br/> Authors: @item.AuthorNames<br/> Price: @item.Price<br/> </td> <td class=" ">@item.PublishDate</td> <td class=" ">@item.Quantity</td> <td class=" last">
<a controller="Book" asp-action="Edit" asp-route-id="@item.ISBN">Edit</a> |