Anlatıma geçmeden önce AspNet Core 8.0 ile geliştirdiğimiz bu projeye ait linkleri aşağıda sıraladım.
AspNet Core 8.0 projesi için linkler
Ayrıca bir önceki yazıyı okumadıysanız;
AspNet Core ile geliştirdiğimiz projenin bu bölümünde WhoWeAreDetail kısmına devam ediyoruz.
Azure Data Studio’da Product Tablosuna eklemeler
Azure Data Studio ile geliştirme yaptığım için ADS üzerinden datamı açıyorum. Ardından DB içerisinde tables klasöründe Product tablosunu bularak sağ tuş tıklayıp Design menüsüne gidiyorum. Bu sayede tabloda yeni sütun ekleme işlemi gerçekleştirebileceğim. Ardından sütun adını Type olarak belirliyoruz ve türünü de nvarchar(20) olarak belirliyoruz. Ardından CMD + S yardımı ile tablomuzu kaydedip güncelliyoruz. Ardından Product tablosuna sağ tuş ile tıklayıp Edit Data kısmına gelip var olan datalarımızın verilerini güncelleyeceğiz. Bu veri güncelleme işlemi elbetteki yeni eklediğimiz “Type” alanında olacak.
İki veriyide “Satılık” olarak güncelledik.
Görsel açıdan düzenlemeler
Biraz daha gerçekçi bir site gibi durması için ilanlarımıza görseller ekleyelim ve ilan sayılarını çoğaltalım. Kullanacağımız villa görselleri için aşağıdaki dosyayı indirebilirsiniz. Zip dosyasını masaüstüne çıkartarak kendi projenizin içerisine aşağıda anlattığım gibi taşıyabilirsiniz.
UI katmanı üzerinde wwwroot klasöründe starter dosyası içerisinde bir dosya oluşturuyoruz. Adına images dedik. Ardından masaüstüne çıkardığınız 7 görselin hepsini seçin ve idenize dönerek bu images klasörünün üzerine bırakın. Ardından hepsi içerisine kopyalanacaktır.
Görsellerimizin yolu şu şekilde oldu;
/starter/images/villa1.jpeg
/starter/images/villa2.jpeg
/starter/images/villa3.jpeg
/starter/images/villa4.jpeg
/starter/images/villa5.jpeg
/starter/images/villa6.jpeg
/starter/images/villa7.jpegBu yolu gidip datada vereceğiz. Sizin için datayı csv formatında hazırladım.
Bu csv sayesinde datayı import edebilirsiniz. Bunun için yapmanız gereken Azure Data Studio da extension sekmesine gitmek ve SQL Server Import yazmak. Ardından çıkan eklentiyi yüklemek. Sol paneldeki ikonlardan en alttaki extension sekmesi oluyor.
Yükleme işlemi tamamlandığında sol paneldeki en üstteki ikon ile database’lerin olduğu sekmeye geçiş yapıyoruz. Ardından projede kullandığımız DbDapperRealEstate db sini bulup üzerine sağ tuş tıklayarak Import wizard’a tıklıyoruz.
Açılan pencerede yukarda verdiğim csv dosyasnın yolunu seçiyorsunuz.
Ardından New table name alanına Product yazıyoruz. Ardından next next diyerek işlemi tamamlıyoruz. Bu işlem sizin için olmazsa Product tablosunu komple datadan silin. Hiç Product adında tablo olmasın. Sonra işlemi tekrar yapın. Bu sayede tablo oluşacaktır.
DTO Güncellemesi
UI katmanı içerisinde Dtos klasörü altında ProductDtos klasörünün içindeki ResultProductDtos.cs dosyasını açarak class’ımızın içerisine şu üç prop’u ekliyoruz.
public string coverimage { get; set; }
public string type { get; set; }
public string address { get; set; }
Bu proplar bize adres, kapak fotoğrafı ve satılık/kiralık bilgisini verecek.
Component Güncellemesi
Verilerimizi döneceğimiz yere ilgili kodlarımızı yazmamız gerekiyor.
RealEstate_Dapper_UI > Views > Shared > Components > _DefaultHomePageProductList >Default.cshtml dosyasını açalım.
@model List<RealEstate_Dapper_UI.Dtos.ProductDtos.ResultProductDtos>
<section class="locations-1" id="locations">
<div class="locations py-5">
<div class="container py-lg-5 py-md-4 py-2">
<div class="heading text-center mx-auto">
<h3 class="title-big">Günün Favori İlanları</h3>
</div>
<div class="row pt-md-5 pt-4">
@foreach (var item in Model)
{
<div class="col-lg-4 col-md-6 mb-3">
<a href="property-single.html">
<div class="box16">
<div class="rentext-listing-category"><span>@item.type</span><span>@item.categoryName</span>
</div>
<img class="img-fluid" src="@item.coverimage" alt="" height="200px" width="700px">
<div class="box-content">
<h3 class="title">@item.price</h3>
<span class="post">@item.address @item.district - @item.city </span>
</div>
</div>
</a>
</div>
}
</div>
</div>
</div>
</section>Şeklinde güncelleyelim.
API Katmanında Düzenlemeler
API katmanında adres, tip ve görsel dönmediği için düzenleme yaparak bunları da getirmemiz gerekiyor. Bunun için API katmanını açıyoruz Dtos altında Product Dtos altında ResultProductWithCategoryDto dosyasını açıyoruz.
public string CoverImage { get; set; }
public string Type { get; set; }
public string Address { get; set; }İlgili prop’ları burada da tanımlıyoruz. Ardından yine API katmanında Repositories klasörü altında ProductRepository.cs sınıfımızı buluyoruz. Anasayfadaki WhoWeAreDetial buradaki GetAllProductWithCategory yardımı ile datasını çektiği için burada güncelleme yapacağız. Querymize ekleme yapacağız. DTO’ya eklediğimiz CoverImage Type ve Address sütunlarını burada da çekeceğiz. Kısaca kodumuz şu şekilde olacak;
Query:
string query = "Select ProductID,Title,Price,City,District,CategoryName,CoverImage,Type,Address From Product inner join Category on Product.ProductCategory = Category.CategoryID";
Metodun kendisi:
public async Task<List<ResultProductWithCategoryDto>> GetAllProductWithCategory()
{
string query = "Select ProductID,Title,Price,City,District,CategoryName,CoverImage,Type,Address From Product inner join Category on Product.ProductCategory = Category.CategoryID";
using (var connection = _context.CreateConnection())
{
var values = await connection.QueryAsync<ResultProductWithCategoryDto>(query);
return values.ToList();
}
}Evet, bu derslik bu kadar. Bir sonraki derslerde görüşmek üzere.
