ASP.NET Core: Admin Panel (Dev Rehber)

Lothric · 10 Haz 2024

ASP.NET Core: Admin Panel

Merhaba, bu konumda sizlere bir ASP.NET Core projesinde admin panel işlemlerini gerçekleştireceğiz. Bir önceki konumda yaptığımız projenin devamı niteliğinde olacak. Aynı projenin üstüne admin paneli ekleyeceğiz. Admin panelini oluşturmaya başlamadan önce admin paneli nedir ve neden kullanılır bunun hakkında konuşalım.

Admin Paneli Nedir?

Admin paneli, bir uygulama veya web sitesinin yönetimsel işlemlerini gerçekleştirmek için kullanılan bir arayüzdür. Bu arayüz, genellikle site veya uygulamanın yönetimiyle ilgili çeşitli görevleri yerine getirmek için kullanılır. Admin paneli, sistem yöneticilerine ve yetkili kullanıcılara belirli özelliklere erişim ve kontrol imkânı sağlar.

Neden Kullanılır?

Kolay Yönetim: Admin paneli, teknik bilgiye sahip olmayan yöneticilerin bile sistemi kolayca yönetmesini sağlar. Kullanıcı dostu arayüzler sayesinde işlemler hızlı ve pratik bir şekilde gerçekleştirilebilir.

Verimlilik: Merkezi bir yönetim arayüzü, birçok yönetimsel işlemi tek bir noktadan yapma imkânı sağlar, bu da zaman ve emek tasarrufu sağlar.

Güvenlik: Admin paneli, erişim kontrolleri ve yetkilendirme mekanizmaları ile güvenliği artırır. Yalnızca yetkili kişilerin kritik işlemleri yapmasına izin verir.

Esneklik ve Özelleştirme: Admin panelleri genellikle özelleştirilebilir yapıya sahiptir. Bu sayede, işletmenin özel ihtiyaçlarına göre panelde değişiklikler yapılabilir.

İzleme ve Kontrol: Uygulamanın performansını, kullanıcı etkinliklerini ve diğer önemli metrikleri izlemek ve kontrol etmek kolaylaşır.

Admin paneli hakkında fikir sahibi olduysak projeye geçebiliriz...

PROJE

Projeye ön bakış

Oluşturacağımız admin panelinde projemizdeki tablolara admin erişim sağlayabilecek. Ve sizin tercihinize göre Crud işlemlerini yapabilecek.

Admin Paneli

İlk adım olarak admin panelimizin temasını ayarlayalım. Admin Panel sayfalarımızda birden fazla sidebar, navbar gibi kendini tekrar eden kod sütunları olacağı için her sayfaya bütün temayı defalarca yazmak çok mantıklı olmaz. View’larımızdaki kodların satırlarını düşürmek için kendi ellerimizle bir layout oluşturacağız.

Layout’umuzu oluşturmak için Presentation Layer katmanımızın içindeki Views klasörünün içinde olan Shared klasörüne sağ tıklayıp Ekle => Görünüm diyoruz. Görünümün ismine “_AdminLayout” diyoruz ve seçenekler kısmında herhangi bir kutucuğun tikli olmadığını kontrol ediyoruz. View’ımız geldiğinde aşağıdaki kodu yapıştırıyoruz.

HTML:

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">

@await Html.PartialAsync("~/Views/AdminPartials/PartialHead.cshtml")

<body>
    <div class="container-scroller">

        @await Html.PartialAsync("~/Views/AdminPartials/PartialNavbar.cshtml")
        <div class="container-fluid page-body-wrapper">

            @await Html.PartialAsync("~/Views/AdminPartials/PartialSidebar.cshtml")
            <div class="main-panel">
                <div class="content-wrapper">
                    <div class="row">
                        @RenderBody()
                    </div>

                </div>

                <footer class="footer">
                    <div class="d-sm-flex justify-content-center justify-content-sm-between">
                        <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © <a href="https://www.bootstrapdash.com/" target="_blank">bootstrapdash.com </a>2021</span>
                        <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Only the best <a href="https://www.bootstrapdash.com/" target="_blank"> Bootstrap dashboard  </a> templates</span>
                    </div>
                </footer>

            </div>
        </div>
    </div>
    @await Html.PartialAsync("~/Views/AdminPartials/PartialScript.cshtml")

</body>

</html>

Kodların içinde partial view’ler olduğunu görebilirsiniz. Konu içerisinde admin temasının partial’lara bölünmesini anlatmak uzun süreceği için ve sizi de yormak istemediğimden burayı hızlıca geçiyorum. Views klasörünün içine AdminPartials isimli bir klasör oluşturuyoruz. Bu klasörün içine 4 tane view ekleyeceğiz. Bunların isimleri PartialHead, PartialNavbar, PartialScript, PartialSidebar olacak.

Bu 4 view’imiz bir kısmi görünüm (partial view) olacağından eklerken görseldeki gibi Kısmi görünüm olarak oluştur’un tikli olması lazım. Partial view’lar oluştuktan sonra aşağdaki kodları içlerine yazıyoruz.

HTML:

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Majestic Admin</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/base/vendor.bundle.base.css">
    <!-- endinject -->
    <!-- inject:css -->
    <link rel="stylesheet" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template//css/style.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/images/favicon.png" />
</head>

HTML:

<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
    <div class="navbar-brand-wrapper d-flex justify-content-center">
        <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
            <a class="navbar-brand brand-logo" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template//index.html"><img src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/images/logo.svg" alt="logo" /></a>
            <a class="navbar-brand brand-logo-mini" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/index.html"><img src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/images/logo-mini.svg" alt="logo" /></a>
            <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                <span class="mdi mdi-sort-variant"></span>
            </button>
        </div>
    </div>
    <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
        <ul class="navbar-nav navbar-nav-right">
        </ul>
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
            <span class="mdi mdi-menu"></span>
        </button>
    </div>
</nav>

HTML:

<script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/base/vendor.bundle.base.js"></script>
<script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/chart.js/Chart.min.js"></script>
<script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/js/off-canvas.js"></script>
<script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/js/hoverable-collapse.js"></script>
<script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/js/template.js"></script>

HTML:

<nav class="sidebar sidebar-offcanvas" id="sidebar">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="/Default/Index/">
                <i class="mdi mdi-home menu-icon"></i>
                <span class="menu-title">Sayfaya Dön</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/Feature/Index/">
                <i class="mdi mdi-home menu-icon"></i>
                <span class="menu-title">Feature</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/About/Index/">
                <i class="mdi mdi-home menu-icon"></i>
                <span class="menu-title">About</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/Skill/Index/">
                <i class="mdi mdi-home menu-icon"></i>
                <span class="menu-title">Skills</span>
            </a>
        </li>
    </ul>
</nav>

Feature Controller

Layoutumuzu tamamladığımıza göre Admin paneline geçebiliriz. Controller klasörüne sağ tıklayıp Ekle => Denetliyici… diyoruz. Gelen ekranda da MVC Denetliyicisi – Boş diyoruz. İlk oluşturacağımız controller’ın ismine FeatureController diyoruz.

Controller’lar bizim tablolarımızda Temel Crud işlemlerini ve daha fazlasını yapmamıza olanak sağlayacak sayfalardır. Controller sayfamız ilk başta içi boş sadece view dönen bir IActionResult karşılıyor. IActionResult kısaca açıklamak gerekirse bir view’lerle çalışan bir aksiyon metodudur. Bu metotların içerisine crud işlemlerimizi yazacağız. Controller sayfamıza aşağıdaki kodları yapıştırıyoruz.

C#:

namespace Nkatmanli.Controllers
{
    public class FeatureController : Controller
    {
        FeatureManager featureManager = new FeatureManager(new EfFeatureDal());
        [HttpGet]
        public IActionResult Index()
        {

            var values = featureManager.TGetByID(1);
            return View(values);
        }
        [HttpPost]
        public IActionResult Index(Feature feature)
        {
            featureManager.TUpdate(feature);
            return RedirectToAction("Index", "Default");
        }
    }
}

Yazdığımız kodun içerini açıklarsak: IActionResult metodlarımızın üstüne Feature tablosuyla çalıştığımız için BusinessLayer’daki FeatureManager sınıfından bir nesne türettik. Bu nesne sayesinde Feature tablosu için DataAccessLayer ve BusinessLayer’da tanımladığımız metotlara erişimimiz olmuş oluyor. Sonrasında Index isimli metodumuzu HttpGet ve HttpPost diye ikiye böldük. HttpGet atadığımız Index metodunda Id değeri 1 olan satırı View’in içinde döndürüyoruz. HttpPost kısmında ise Feature classından gelen nesne ile Update işlemi gerçekleştiriyoruz. Feature kısmı sitede tek bir satıra sahip olacağından bu Controller’da sadece güncelleme işlemi gerçekleştiriyoruz. Bu sayede admin, panelden Feature kısmında bir değişiklik yapmak isterse güncelleyebilecek.

Index metodunun üstüne sağ tıklayıp Görünüm ekle diyoruz. Görünümü eklerken Yerleşim sayfası kullan seçeneğinin işaretli olduğunu kontrol edin. Kutucuğu tikledikten sonra sağ alttaki üç noktaya (…) tıklayıp görseldeki gibi _AdminLayout.cshtml’i seçiyoruz.

Görünümümüz eklendikten sonra aşağıdaki kodlarımızı yazıyoruz.

HTML:

@model EntityLayer.Concrete.Feature
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@using (Html.BeginForm("Index", "Feature", FormMethod.Post))
{
    @Html.HiddenFor(x=>x.FeatureID)
    <br />
    <label>Başlık</label>
    @Html.TextBoxFor(x=>x.Header, new {@class ="form-control"})
    <br />
    <label>Ad Soyad</label>
    @Html.TextBoxFor(x=>x.Name, new {@class ="form-control"})
    <br />
    <label>Görev</label>
    @Html.TextBoxFor(x=>x.Title, new {@class ="form-control"})
    <br />
    <button class="btn btn-success">Güncelle</button>
}

Crtl Shift W ile sayfayı çalıştırıyoruz. Eğer sorunsuz çalışıyorsa burda Feature tablosundaki Id değeri 1 olan satırımızdaki değerler gelmiş oluyor. (Ben Feature’ın verilerini ssms’ten elle girdim konu öncesi)

About Controller

Controller klasörüne bir önceki gibi bir denetleyici daha oluşturuyoruz ve ismine AboutController diyoruz. Controller’ımız geldiğinde aşağıdaki kodları yazıyoruz.

C#:

namespace Nkatmanli.Controllers
{
    public class AboutController : Controller
    {
        AboutManager aboutManager = new AboutManager(new EfAboutDal());
        [HttpGet]
        public IActionResult Index()
        {

            var values = aboutManager.TGetByID(1);
            return View(values);
        }
        [HttpPost]
        public IActionResult Index(About about)
        {
            aboutManager.TUpdate(about);
            return RedirectToAction("Index", "Default");
        }
    }
}

AboutController’da FeatureController’daki işlemlerin aynısı yapmış oluyoruz. Site sahibinin hakkımda kısmındaki değerlerin sadece bir kere olacağından (örn. Yaş, Adres vs.) Admin sadece bu değerleri güncelleyebilecek. Siz isterseniz buraya ekleme silme ve listelemede ekleyebilirsiniz.

Index metoduna sağ tıklayıp FeatureController’da da yaptığımız şekilde görünüm ekliyoruz. View’ımız geldiğinde aşağıdaki kodları yazıyoruz.

HTML:

@model EntityLayer.Concrete.About
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@using (Html.BeginForm("Index", "About", FormMethod.Post))
{
    <div class="col-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <p class="card-description"> Hakkımda Düzenleme Paneli </p>
                <form class="forms-sample">
                    <div class="form-group">
                        <label>ID</label>
                        @Html.TextBoxFor(x=>x.AboutID, new {@class ="form-control"})
                    </div>
                    <div class="form-group">
                        <label>Başlık</label>
                        @Html.TextBoxFor(x=>x.Title, new {@class ="form-control"})
                    </div>
                    <div class="form-group">
                        <label>Yaş</label>
                        @Html.TextBoxFor(x=>x.Age, new {@class ="form-control"})
                    </div>
                    <div class="form-group">
                        <label>Mail</label>
                        @Html.TextBoxFor(x=>x.Mail, new {@class ="form-control"})
                    </div>
                    <div class="form-group">
                        <label>Telefon</label>
                        @Html.TextBoxFor(x=>x.Phone, new {@class ="form-control"})
                    </div>
                    <div class="form-group">
                        <label>Adres</label>
                        @Html.TextBoxFor(x=>x.Address, new {@class ="form-control"})
                    </div>
                    <div class="form-group">
                        <label>Açıklama</label>
                        @Html.TextAreaFor(x=>x.Description,6,3, new {@class ="form-control"})
                    </div>
                    <button type="submit" class="btn btn-success">Kaydet</button>
                    <button class="btn btn-dark">İptal</button>
                </form>
            </div>
        </div>
    </div>
}

Skill Controller

Bu controllerda işler değişmeye başlıyor. Çünkü bu sefer diğerlerine yaptığımız gibi sadece güncelleme işlemi yapmayacağız. Sitenin Skill kısmında birden fazla skill olabileceği için hem listeleme hem de ekleme, hatalı giriş gibi bir durum olursa diye de silme işlemi yapacağız. Sizlere tek tek yazacağımız IActionResult’ları açıklayacağım.

Index

C#:

        SkillManager skillManager = new SkillManager(new EfSkillDal());
        public IActionResult Index()
        {

            var values = skillManager.TGetList();
            return View(values);
        }

Bütün IActionResult üstüne SkillManager’dan bir nese türetiyoruz. Bu sayede Skill için tanımladığımız crud işlemlerini görecek metotlara erişimimiz olacak. Sonrasında Index metodunun içinde values isimli bir değişkenin içine oluşturduğumuz skillManager nesnesin listesini atıyoruz. Bu sayede Skills tablomuzu listelemek için bir değişkenimiz oluyor. values değişkenini View tarafına yönlendirmek için parantezin içine yazıyoruz. Diğerlerine yaptığımız gibi Index metoduna View ekleyip aşağıdaki kodları yazıyoruz.

HTML:

@using EntityLayer.Concrete
@model List<Skill>
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div class="col-lg-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Skill List</h4>
           
            <div class="table-responsive pt-3">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Başlık</th>
                            <th>Oran</th>
                            <th>Sil</th>
                            <th>Güncelle</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                        <tr>
                            <td>@item.SkillID</td>
                            <td>@item.Title</td>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: @item.Value%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </td>
                                <td><a href="/Skill/DeleteSkill/@item.SkillID" class="btn btn-outline-danger">Sil</a></td>
                                <td><a href="/Skill/EditSkill/@item.SkillID" class="btn btn-outline-primary">Güncelle</a></td>
                        </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

AddSkill

C#:

        [HttpGet]
        public IActionResult AddSkill()
        {

            return View();
        }
        [HttpPost]
        public IActionResult AddSkill(Skill skill)
        {
            skillManager.TAdd(skill);
            return RedirectToAction("Index");
        }

AddSkill metoduna geldiğimizde bu metodu ikiye böldüğümü görebilirsiniz. Ekleme işlemi biraz da güncelleme işlemine benzemektedir. Ekleme işleminde ilk metotta hiç bir şeyin dönmesini istemiyoruz. Bize boş textboxlar’la dolu sayfa lazım. İkinci metotta ise metodun içinde Skill sınıfından skill isimli bir değişken türetiyoruz. Sonrasında skillManager nesnesiyle ekleme metodunu çağırıyoruz ve içine skill değişkenini yazıyoruz. Bu sayede ekleme işlemini tamamlamış oluyoruz. Devamında bu kısma view ekleyip aşağıdaki kodları yazıyoruz.

C#:

@model EntityLayer.Concrete.Skill
@{
    ViewData["Title"] = "AddSkill";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div class="col-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Yeni Plak Girişi</h4>
            <form class="forms-sample" method="post">
                <div class="form-group">
                    <label for="exampleInputName1">Başlık</label>
                    <span asp-validation-for="Title" class="text-danger"></span>
                    <input type="text" class="form-control" id="exampleInputName1" placeholder="Başlığı Giriniz" asp-for="Title">
                </div>
                <div class="form-group">
                    <label for="exampleInputName1">Değeri</label>
                    <span asp-validation-for="Value" class="text-danger"></span>
                    <input type="text" class="form-control" id="exampleInputName1" placeholder="Değeri Giriniz" asp-for="Value">
                </div>
                <button type="submit" class="btn btn-primary me-2">Kaydet</button>
            </form>
        </div>
    </div>
</div>

DeleteSkill

C#:

        public IActionResult DeleteSkill(int id)
        {
            var values = skillManager.TGetByID(id);
            skillManager.TDelete(values);
            return RedirectToAction("Index");
        }

Bu kısımda metodumuzun içine int türünde id isimli bir parametre koyuyoruz. Metodun içinde values isimli bir değişkene id değerine göre skill değerlerini atıyoruz. Sonrasında TDelete() metodunun içine values’i yazarak valuesten gelen değer ile silme işlemini yapıyoruz. Bu kısım için bir sayfamız olmayacak. Admin Index üzerinden istediği satırı satırın sağındaki sil butonuyla silebilecek.

EditSkill

C#:

[HttpGet]
        public IActionResult EditSkill(int id)
        {

            var values = skillManager.TGetByID(id);
            return View(values);
        }
        [HttpPost]
        public IActionResult EditSkill(Skill skill)
        {

            skillManager.TUpdate(skill);
            return RedirectToAction("Index");
        }

Bu kısmı diğer controller’da yapıp anlattığım için burada üstünde çok durmayacağım çünkü diğerlerine yaptığımız güncelleme işleminin birebir aynısı. Kodları yazıp bir view oluşturduktan sonra içine View kodlarını yazıyoruz.

HTML:

@model EntityLayer.Concrete.Skill
@{
    ViewData["Title"] = "EditSkill";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div class="col-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Category Düzenleme Sayfası</h4>
            <form class="forms-sample" method="post">
                @Html.HiddenFor(x=>x.SkillID)
                <div class="form-group">
                    <label for="exampleInputName1">İsim</label>
                    <input type="text" class="form-control" asp-for="Title" id="exampleInputName1" placeholder="İsmi Giriniz">
                </div>
                <div class="form-group">
                    <label for="exampleInputName1">Değer</label>
                    <input type="text" class="form-control" asp-for="Value" id="exampleInputName1" placeholder="Değeri Giriniz">
                </div>
             
                <button type="submit" class="btn btn-primary me-2">Kaydet</button>
            </form>
        </div>
    </div>
</div>

EditSkill’ini tamamlayarak admin panelini bitirmiş oluyoruz. Tabi ki admin paneli bu kadar sınırlı bir şey değildir. Admin yani sizler sitede başka şeyleri değiştirmek yada admin paneline daha bir çok özellik koymak için istediğiniz gibi araştırarak yazabilirsiniz. Ama çok önemli bir sorunumuz var. İyi güzel biz admin panelini yaptık da bu admin paneli sadece adminin erişimi olabileceği bir şey değil mi? Bu durumuyla her siteye giren insan admin paneline erişmez mi? Bir sonraki konum olacak ASP.NET Core’da Identity de görüşmek üzere.

//Not: Eğer projeyi yaparken bir hatayla karşılaşırsanız kendiniz araştırıp çözmekten çekinmeyin. Cevabı bulamadıysanız da hata için benle iletişime geçebilirsiniz. Elimden geldiğince yardımcı olmaya çalışırım.

Proje Github Linki: GitHub - lothriccc/Nkatmanli

4lp3rqwea · 10 Haz 2024

Lothric' Alıntı:
ASP.NET Core: Admin Panel

Merhaba, bu konumda sizlere bir ASP.NET Core projesinde admin panel işlemlerini gerçekleştireceğiz. Bir önceki konumda yaptığımız projenin devamı niteliğinde olacak. Aynı projenin üstüne admin paneli ekleyeceğiz. Admin panelini oluşturmaya başlamadan önce admin paneli nedir ve neden kullanılır bunun hakkında konuşalım.

Admin Paneli Nedir?

Admin paneli, bir uygulama veya web sitesinin yönetimsel işlemlerini gerçekleştirmek için kullanılan bir arayüzdür. Bu arayüz, genellikle site veya uygulamanın yönetimiyle ilgili çeşitli görevleri yerine getirmek için kullanılır. Admin paneli, sistem yöneticilerine ve yetkili kullanıcılara belirli özelliklere erişim ve kontrol imkânı sağlar.

Neden Kullanılır?

Kolay Yönetim: Admin paneli, teknik bilgiye sahip olmayan yöneticilerin bile sistemi kolayca yönetmesini sağlar. Kullanıcı dostu arayüzler sayesinde işlemler hızlı ve pratik bir şekilde gerçekleştirilebilir.

Verimlilik: Merkezi bir yönetim arayüzü, birçok yönetimsel işlemi tek bir noktadan yapma imkânı sağlar, bu da zaman ve emek tasarrufu sağlar.

Güvenlik: Admin paneli, erişim kontrolleri ve yetkilendirme mekanizmaları ile güvenliği artırır. Yalnızca yetkili kişilerin kritik işlemleri yapmasına izin verir.

Esneklik ve Özelleştirme: Admin panelleri genellikle özelleştirilebilir yapıya sahiptir. Bu sayede, işletmenin özel ihtiyaçlarına göre panelde değişiklikler yapılabilir.

İzleme ve Kontrol: Uygulamanın performansını, kullanıcı etkinliklerini ve diğer önemli metrikleri izlemek ve kontrol etmek kolaylaşır.

Admin paneli hakkında fikir sahibi olduysak projeye geçebiliriz...

PROJE

Projeye ön bakış

Oluşturacağımız admin panelinde projemizdeki tablolara admin erişim sağlayabilecek. Ve sizin tercihinize göre Crud işlemlerini yapabilecek.

Admin Paneli

İlk adım olarak admin panelimizin temasını ayarlayalım. Admin Panel sayfalarımızda birden fazla sidebar, navbar gibi kendini tekrar eden kod sütunları olacağı için her sayfaya bütün temayı defalarca yazmak çok mantıklı olmaz. View’larımızdaki kodların satırlarını düşürmek için kendi ellerimizle bir layout oluşturacağız.

Layout’umuzu oluşturmak için Presentation Layer katmanımızın içindeki Views klasörünün içinde olan Shared klasörüne sağ tıklayıp Ekle => Görünüm diyoruz. Görünümün ismine “_AdminLayout” diyoruz ve seçenekler kısmında herhangi bir kutucuğun tikli olmadığını kontrol ediyoruz. View’ımız geldiğinde aşağıdaki kodu yapıştırıyoruz.

HTML:

@{ Layout = null; } <!DOCTYPE html> <html lang="en"> @await Html.PartialAsync("~/Views/AdminPartials/PartialHead.cshtml") <body> <div class="container-scroller"> @await Html.PartialAsync("~/Views/AdminPartials/PartialNavbar.cshtml") <div class="container-fluid page-body-wrapper"> @await Html.PartialAsync("~/Views/AdminPartials/PartialSidebar.cshtml") <div class="main-panel"> <div class="content-wrapper"> <div class="row"> @RenderBody() </div> </div> <footer class="footer"> <div class="d-sm-flex justify-content-center justify-content-sm-between"> <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © <a href="https://www.bootstrapdash.com/" target="_blank">bootstrapdash.com </a>2021</span> <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Only the best <a href="https://www.bootstrapdash.com/" target="_blank"> Bootstrap dashboard </a> templates</span> </div> </footer> </div> </div> </div> @await Html.PartialAsync("~/Views/AdminPartials/PartialScript.cshtml") </body> </html>

Kodların içinde partial view’ler olduğunu görebilirsiniz. Konu içerisinde admin temasının partial’lara bölünmesini anlatmak uzun süreceği için ve sizi de yormak istemediğimden burayı hızlıca geçiyorum. Views klasörünün içine AdminPartials isimli bir klasör oluşturuyoruz. Bu klasörün içine 4 tane view ekleyeceğiz. Bunların isimleri PartialHead, PartialNavbar, PartialScript, PartialSidebar olacak.

Bu 4 view’imiz bir kısmi görünüm (partial view) olacağından eklerken görseldeki gibi Kısmi görünüm olarak oluştur’un tikli olması lazım. Partial view’lar oluştuktan sonra aşağdaki kodları içlerine yazıyoruz.

HTML:

<head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Majestic Admin</title>  <link rel="stylesheet" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/base/vendor.bundle.base.css">   <link rel="stylesheet" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template//css/style.css">  <link rel="shortcut icon" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/images/favicon.png" /> </head>

HTML:

<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row"> <div class="navbar-brand-wrapper d-flex justify-content-center"> <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100"> <a class="navbar-brand brand-logo" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template//index.html"><img src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/images/logo.svg" alt="logo" /></a> <a class="navbar-brand brand-logo-mini" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/index.html"><img src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/images/logo-mini.svg" alt="logo" /></a> <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize"> <span class="mdi mdi-sort-variant"></span> </button> </div> </div> <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end"> <ul class="navbar-nav navbar-nav-right"> </ul> <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas"> <span class="mdi mdi-menu"></span> </button> </div> </nav>

HTML:

<script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/base/vendor.bundle.base.js"></script> <script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/chart.js/Chart.min.js"></script> <script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/js/off-canvas.js"></script> <script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/js/hoverable-collapse.js"></script> <script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/js/template.js"></script>

HTML:

<nav class="sidebar sidebar-offcanvas" id="sidebar"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="/Default/Index/"> <i class="mdi mdi-home menu-icon"></i> <span class="menu-title">Sayfaya Dön</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="/Feature/Index/"> <i class="mdi mdi-home menu-icon"></i> <span class="menu-title">Feature</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="/About/Index/"> <i class="mdi mdi-home menu-icon"></i> <span class="menu-title">About</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="/Skill/Index/"> <i class="mdi mdi-home menu-icon"></i> <span class="menu-title">Skills</span> </a> </li> </ul> </nav>

Feature Controller

Layoutumuzu tamamladığımıza göre Admin paneline geçebiliriz. Controller klasörüne sağ tıklayıp Ekle => Denetliyici… diyoruz. Gelen ekranda da MVC Denetliyicisi – Boş diyoruz. İlk oluşturacağımız controller’ın ismine FeatureController diyoruz.

Controller’lar bizim tablolarımızda Temel Crud işlemlerini ve daha fazlasını yapmamıza olanak sağlayacak sayfalardır. Controller sayfamız ilk başta içi boş sadece view dönen bir IActionResult karşılıyor. IActionResult kısaca açıklamak gerekirse bir view’lerle çalışan bir aksiyon metodudur. Bu metotların içerisine crud işlemlerimizi yazacağız. Controller sayfamıza aşağıdaki kodları yapıştırıyoruz.

C#:

namespace Nkatmanli.Controllers { public class FeatureController : Controller { FeatureManager featureManager = new FeatureManager(new EfFeatureDal()); [HttpGet] public IActionResult Index() { var values = featureManager.TGetByID(1); return View(values); } [HttpPost] public IActionResult Index(Feature feature) { featureManager.TUpdate(feature); return RedirectToAction("Index", "Default"); } } }

Yazdığımız kodun içerini açıklarsak: IActionResult metodlarımızın üstüne Feature tablosuyla çalıştığımız için BusinessLayer’daki FeatureManager sınıfından bir nesne türettik. Bu nesne sayesinde Feature tablosu için DataAccessLayer ve BusinessLayer’da tanımladığımız metotlara erişimimiz olmuş oluyor. Sonrasında Index isimli metodumuzu HttpGet ve HttpPost diye ikiye böldük. HttpGet atadığımız Index metodunda Id değeri 1 olan satırı View’in içinde döndürüyoruz. HttpPost kısmında ise Feature classından gelen nesne ile Update işlemi gerçekleştiriyoruz. Feature kısmı sitede tek bir satıra sahip olacağından bu Controller’da sadece güncelleme işlemi gerçekleştiriyoruz. Bu sayede admin, panelden Feature kısmında bir değişiklik yapmak isterse güncelleyebilecek.

Index metodunun üstüne sağ tıklayıp Görünüm ekle diyoruz. Görünümü eklerken Yerleşim sayfası kullan seçeneğinin işaretli olduğunu kontrol edin. Kutucuğu tikledikten sonra sağ alttaki üç noktaya (…) tıklayıp görseldeki gibi _AdminLayout.cshtml’i seçiyoruz.

Görünümümüz eklendikten sonra aşağıdaki kodlarımızı yazıyoruz.

HTML:

@model EntityLayer.Concrete.Feature @{ ViewData["Title"] = "Index"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } @using (Html.BeginForm("Index", "Feature", FormMethod.Post)) { @Html.HiddenFor(x=>x.FeatureID) <br /> <label>Başlık</label> @Html.TextBoxFor(x=>x.Header, new {@class ="form-control"}) <br /> <label>Ad Soyad</label> @Html.TextBoxFor(x=>x.Name, new {@class ="form-control"}) <br /> <label>Görev</label> @Html.TextBoxFor(x=>x.Title, new {@class ="form-control"}) <br /> <button class="btn btn-success">Güncelle</button> }

Crtl Shift W ile sayfayı çalıştırıyoruz. Eğer sorunsuz çalışıyorsa burda Feature tablosundaki Id değeri 1 olan satırımızdaki değerler gelmiş oluyor. (Ben Feature’ın verilerini ssms’ten elle girdim konu öncesi)

About Controller

Controller klasörüne bir önceki gibi bir denetleyici daha oluşturuyoruz ve ismine AboutController diyoruz. Controller’ımız geldiğinde aşağıdaki kodları yazıyoruz.

C#:

namespace Nkatmanli.Controllers { public class AboutController : Controller { AboutManager aboutManager = new AboutManager(new EfAboutDal()); [HttpGet] public IActionResult Index() { var values = aboutManager.TGetByID(1); return View(values); } [HttpPost] public IActionResult Index(About about) { aboutManager.TUpdate(about); return RedirectToAction("Index", "Default"); } } }

AboutController’da FeatureController’daki işlemlerin aynısı yapmış oluyoruz. Site sahibinin hakkımda kısmındaki değerlerin sadece bir kere olacağından (örn. Yaş, Adres vs.) Admin sadece bu değerleri güncelleyebilecek. Siz isterseniz buraya ekleme silme ve listelemede ekleyebilirsiniz.

Index metoduna sağ tıklayıp FeatureController’da da yaptığımız şekilde görünüm ekliyoruz. View’ımız geldiğinde aşağıdaki kodları yazıyoruz.

HTML:

@model EntityLayer.Concrete.About @{ ViewData["Title"] = "Index"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } @using (Html.BeginForm("Index", "About", FormMethod.Post)) { <div class="col-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <p class="card-description"> Hakkımda Düzenleme Paneli </p> <form class="forms-sample"> <div class="form-group"> <label>ID</label> @Html.TextBoxFor(x=>x.AboutID, new {@class ="form-control"}) </div> <div class="form-group"> <label>Başlık</label> @Html.TextBoxFor(x=>x.Title, new {@class ="form-control"}) </div> <div class="form-group"> <label>Yaş</label> @Html.TextBoxFor(x=>x.Age, new {@class ="form-control"}) </div> <div class="form-group"> <label>Mail</label> @Html.TextBoxFor(x=>x.Mail, new {@class ="form-control"}) </div> <div class="form-group"> <label>Telefon</label> @Html.TextBoxFor(x=>x.Phone, new {@class ="form-control"}) </div> <div class="form-group"> <label>Adres</label> @Html.TextBoxFor(x=>x.Address, new {@class ="form-control"}) </div> <div class="form-group"> <label>Açıklama</label> @Html.TextAreaFor(x=>x.Description,6,3, new {@class ="form-control"}) </div> <button type="submit" class="btn btn-success">Kaydet</button> <button class="btn btn-dark">İptal</button> </form> </div> </div> </div> }

Skill Controller

Bu controllerda işler değişmeye başlıyor. Çünkü bu sefer diğerlerine yaptığımız gibi sadece güncelleme işlemi yapmayacağız. Sitenin Skill kısmında birden fazla skill olabileceği için hem listeleme hem de ekleme, hatalı giriş gibi bir durum olursa diye de silme işlemi yapacağız. Sizlere tek tek yazacağımız IActionResult’ları açıklayacağım.

Index

C#:

SkillManager skillManager = new SkillManager(new EfSkillDal()); public IActionResult Index() { var values = skillManager.TGetList(); return View(values); }

Bütün IActionResult üstüne SkillManager’dan bir nese türetiyoruz. Bu sayede Skill için tanımladığımız crud işlemlerini görecek metotlara erişimimiz olacak. Sonrasında Index metodunun içinde values isimli bir değişkenin içine oluşturduğumuz skillManager nesnesin listesini atıyoruz. Bu sayede Skills tablomuzu listelemek için bir değişkenimiz oluyor. values değişkenini View tarafına yönlendirmek için parantezin içine yazıyoruz. Diğerlerine yaptığımız gibi Index metoduna View ekleyip aşağıdaki kodları yazıyoruz.

HTML:

@using EntityLayer.Concrete @model List<Skill> @{ ViewData["Title"] = "Index"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } <div class="col-lg-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <h4 class="card-title">Skill List</h4> <div class="table-responsive pt-3"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Başlık</th> <th>Oran</th> <th>Sil</th> <th>Güncelle</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td>@item.SkillID</td> <td>@item.Title</td> <td> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: @item.Value%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </td> <td><a href="/Skill/DeleteSkill/@item.SkillID" class="btn btn-outline-danger">Sil</a></td> <td><a href="/Skill/EditSkill/@item.SkillID" class="btn btn-outline-primary">Güncelle</a></td> </tr> } </tbody> </table> </div> </div> </div> </div>

AddSkill

C#:

[HttpGet] public IActionResult AddSkill() { return View(); } [HttpPost] public IActionResult AddSkill(Skill skill) { skillManager.TAdd(skill); return RedirectToAction("Index"); }

AddSkill metoduna geldiğimizde bu metodu ikiye böldüğümü görebilirsiniz. Ekleme işlemi biraz da güncelleme işlemine benzemektedir. Ekleme işleminde ilk metotta hiç bir şeyin dönmesini istemiyoruz. Bize boş textboxlar’la dolu sayfa lazım. İkinci metotta ise metodun içinde Skill sınıfından skill isimli bir değişken türetiyoruz. Sonrasında skillManager nesnesiyle ekleme metodunu çağırıyoruz ve içine skill değişkenini yazıyoruz. Bu sayede ekleme işlemini tamamlamış oluyoruz. Devamında bu kısma view ekleyip aşağıdaki kodları yazıyoruz.

C#:

@model EntityLayer.Concrete.Skill @{ ViewData["Title"] = "AddSkill"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } <div class="col-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <h4 class="card-title">Yeni Plak Girişi</h4> <form class="forms-sample" method="post"> <div class="form-group"> <label for="exampleInputName1">Başlık</label> <span asp-validation-for="Title" class="text-danger"></span> <input type="text" class="form-control" id="exampleInputName1" placeholder="Başlığı Giriniz" asp-for="Title"> </div> <div class="form-group"> <label for="exampleInputName1">Değeri</label> <span asp-validation-for="Value" class="text-danger"></span> <input type="text" class="form-control" id="exampleInputName1" placeholder="Değeri Giriniz" asp-for="Value"> </div> <button type="submit" class="btn btn-primary me-2">Kaydet</button> </form> </div> </div> </div>

DeleteSkill

C#:

public IActionResult DeleteSkill(int id) { var values = skillManager.TGetByID(id); skillManager.TDelete(values); return RedirectToAction("Index"); }

Bu kısımda metodumuzun içine int türünde id isimli bir parametre koyuyoruz. Metodun içinde values isimli bir değişkene id değerine göre skill değerlerini atıyoruz. Sonrasında TDelete() metodunun içine values’i yazarak valuesten gelen değer ile silme işlemini yapıyoruz. Bu kısım için bir sayfamız olmayacak. Admin Index üzerinden istediği satırı satırın sağındaki sil butonuyla silebilecek.

EditSkill

C#:

[HttpGet] public IActionResult EditSkill(int id) { var values = skillManager.TGetByID(id); return View(values); } [HttpPost] public IActionResult EditSkill(Skill skill) { skillManager.TUpdate(skill); return RedirectToAction("Index"); }

Bu kısmı diğer controller’da yapıp anlattığım için burada üstünde çok durmayacağım çünkü diğerlerine yaptığımız güncelleme işleminin birebir aynısı. Kodları yazıp bir view oluşturduktan sonra içine View kodlarını yazıyoruz.

HTML:

@model EntityLayer.Concrete.Skill @{ ViewData["Title"] = "EditSkill"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } <div class="col-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <h4 class="card-title">Category Düzenleme Sayfası</h4> <form class="forms-sample" method="post"> @Html.HiddenFor(x=>x.SkillID) <div class="form-group"> <label for="exampleInputName1">İsim</label> <input type="text" class="form-control" asp-for="Title" id="exampleInputName1" placeholder="İsmi Giriniz"> </div> <div class="form-group"> <label for="exampleInputName1">1. Şarkı</label> <input type="text" class="form-control" asp-for="Value" id="exampleInputName1" placeholder="1. Şarkı"> </div> <button type="submit" class="btn btn-primary me-2">Kaydet</button> </form> </div> </div> </div>

EditSkill’ini tamamlayarak admin panelini bitirmiş oluyoruz. Tabi ki admin paneli bu kadar sınırlı bir şey değildir. Admin yani sizler sitede başka şeyleri değiştirmek yada admin paneline daha bir çok özellik koymak için istediğiniz gibi araştırarak yazabilirsiniz. Ama çok önemli bir sorunumuz var. İyi güzel biz admin panelini yaptık da bu admin paneli sadece adminin erişimi olabileceği bir şey değil mi? Bu durumuyla her siteye giren insan admin paneline erişmez mi? Bir sonraki konum olacak ASP.NET Core’da Identity de görüşmek üzere.

//Not: Eğer projeyi yaparken bir hatayla karşılaşırsanız kendiniz araştırıp çözmekten çekinmeyin. Cevabı bulamadıysanız da hata için benle iletişime geçebilirsiniz. Elimden geldiğince yardımcı olmaya çalışırım.

Proje Github Linki: GitHub - lothriccc/Nkatmanli

eline sağlık

OBT is HeRYerDe · 11 Haz 2024

Eline Sağlık.

ACE Veen · 11 Haz 2024

Lothric' Alıntı:
ASP.NET Core: Admin Panel

Merhaba, bu konumda sizlere bir ASP.NET Core projesinde admin panel işlemlerini gerçekleştireceğiz. Bir önceki konumda yaptığımız projenin devamı niteliğinde olacak. Aynı projenin üstüne admin paneli ekleyeceğiz. Admin panelini oluşturmaya başlamadan önce admin paneli nedir ve neden kullanılır bunun hakkında konuşalım.

Admin Paneli Nedir?

Admin paneli, bir uygulama veya web sitesinin yönetimsel işlemlerini gerçekleştirmek için kullanılan bir arayüzdür. Bu arayüz, genellikle site veya uygulamanın yönetimiyle ilgili çeşitli görevleri yerine getirmek için kullanılır. Admin paneli, sistem yöneticilerine ve yetkili kullanıcılara belirli özelliklere erişim ve kontrol imkânı sağlar.

Neden Kullanılır?

Kolay Yönetim: Admin paneli, teknik bilgiye sahip olmayan yöneticilerin bile sistemi kolayca yönetmesini sağlar. Kullanıcı dostu arayüzler sayesinde işlemler hızlı ve pratik bir şekilde gerçekleştirilebilir.

Verimlilik: Merkezi bir yönetim arayüzü, birçok yönetimsel işlemi tek bir noktadan yapma imkânı sağlar, bu da zaman ve emek tasarrufu sağlar.

Güvenlik: Admin paneli, erişim kontrolleri ve yetkilendirme mekanizmaları ile güvenliği artırır. Yalnızca yetkili kişilerin kritik işlemleri yapmasına izin verir.

Esneklik ve Özelleştirme: Admin panelleri genellikle özelleştirilebilir yapıya sahiptir. Bu sayede, işletmenin özel ihtiyaçlarına göre panelde değişiklikler yapılabilir.

İzleme ve Kontrol: Uygulamanın performansını, kullanıcı etkinliklerini ve diğer önemli metrikleri izlemek ve kontrol etmek kolaylaşır.

Admin paneli hakkında fikir sahibi olduysak projeye geçebiliriz...

PROJE

Projeye ön bakış

Oluşturacağımız admin panelinde projemizdeki tablolara admin erişim sağlayabilecek. Ve sizin tercihinize göre Crud işlemlerini yapabilecek.

Admin Paneli

İlk adım olarak admin panelimizin temasını ayarlayalım. Admin Panel sayfalarımızda birden fazla sidebar, navbar gibi kendini tekrar eden kod sütunları olacağı için her sayfaya bütün temayı defalarca yazmak çok mantıklı olmaz. View’larımızdaki kodların satırlarını düşürmek için kendi ellerimizle bir layout oluşturacağız.

Layout’umuzu oluşturmak için Presentation Layer katmanımızın içindeki Views klasörünün içinde olan Shared klasörüne sağ tıklayıp Ekle => Görünüm diyoruz. Görünümün ismine “_AdminLayout” diyoruz ve seçenekler kısmında herhangi bir kutucuğun tikli olmadığını kontrol ediyoruz. View’ımız geldiğinde aşağıdaki kodu yapıştırıyoruz.

HTML:

@{ Layout = null; } <!DOCTYPE html> <html lang="en"> @await Html.PartialAsync("~/Views/AdminPartials/PartialHead.cshtml") <body> <div class="container-scroller"> @await Html.PartialAsync("~/Views/AdminPartials/PartialNavbar.cshtml") <div class="container-fluid page-body-wrapper"> @await Html.PartialAsync("~/Views/AdminPartials/PartialSidebar.cshtml") <div class="main-panel"> <div class="content-wrapper"> <div class="row"> @RenderBody() </div> </div> <footer class="footer"> <div class="d-sm-flex justify-content-center justify-content-sm-between"> <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © <a href="https://www.bootstrapdash.com/" target="_blank">bootstrapdash.com </a>2021</span> <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Only the best <a href="https://www.bootstrapdash.com/" target="_blank"> Bootstrap dashboard </a> templates</span> </div> </footer> </div> </div> </div> @await Html.PartialAsync("~/Views/AdminPartials/PartialScript.cshtml") </body> </html>

Kodların içinde partial view’ler olduğunu görebilirsiniz. Konu içerisinde admin temasının partial’lara bölünmesini anlatmak uzun süreceği için ve sizi de yormak istemediğimden burayı hızlıca geçiyorum. Views klasörünün içine AdminPartials isimli bir klasör oluşturuyoruz. Bu klasörün içine 4 tane view ekleyeceğiz. Bunların isimleri PartialHead, PartialNavbar, PartialScript, PartialSidebar olacak.

Bu 4 view’imiz bir kısmi görünüm (partial view) olacağından eklerken görseldeki gibi Kısmi görünüm olarak oluştur’un tikli olması lazım. Partial view’lar oluştuktan sonra aşağdaki kodları içlerine yazıyoruz.

HTML:

<head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Majestic Admin</title>  <link rel="stylesheet" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/base/vendor.bundle.base.css">   <link rel="stylesheet" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template//css/style.css">  <link rel="shortcut icon" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/images/favicon.png" /> </head>

HTML:

<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row"> <div class="navbar-brand-wrapper d-flex justify-content-center"> <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100"> <a class="navbar-brand brand-logo" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template//index.html"><img src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/images/logo.svg" alt="logo" /></a> <a class="navbar-brand brand-logo-mini" href="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/index.html"><img src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/images/logo-mini.svg" alt="logo" /></a> <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize"> <span class="mdi mdi-sort-variant"></span> </button> </div> </div> <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end"> <ul class="navbar-nav navbar-nav-right"> </ul> <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas"> <span class="mdi mdi-menu"></span> </button> </div> </nav>

HTML:

<script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/base/vendor.bundle.base.js"></script> <script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/vendors/chart.js/Chart.min.js"></script> <script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/js/off-canvas.js"></script> <script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/js/hoverable-collapse.js"></script> <script src="~/MajesticAdmin-Free-Bootstrap-Admin-Template-master/template/js/template.js"></script>

HTML:

<nav class="sidebar sidebar-offcanvas" id="sidebar"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="/Default/Index/"> <i class="mdi mdi-home menu-icon"></i> <span class="menu-title">Sayfaya Dön</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="/Feature/Index/"> <i class="mdi mdi-home menu-icon"></i> <span class="menu-title">Feature</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="/About/Index/"> <i class="mdi mdi-home menu-icon"></i> <span class="menu-title">About</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="/Skill/Index/"> <i class="mdi mdi-home menu-icon"></i> <span class="menu-title">Skills</span> </a> </li> </ul> </nav>

Feature Controller

Layoutumuzu tamamladığımıza göre Admin paneline geçebiliriz. Controller klasörüne sağ tıklayıp Ekle => Denetliyici… diyoruz. Gelen ekranda da MVC Denetliyicisi – Boş diyoruz. İlk oluşturacağımız controller’ın ismine FeatureController diyoruz.

Controller’lar bizim tablolarımızda Temel Crud işlemlerini ve daha fazlasını yapmamıza olanak sağlayacak sayfalardır. Controller sayfamız ilk başta içi boş sadece view dönen bir IActionResult karşılıyor. IActionResult kısaca açıklamak gerekirse bir view’lerle çalışan bir aksiyon metodudur. Bu metotların içerisine crud işlemlerimizi yazacağız. Controller sayfamıza aşağıdaki kodları yapıştırıyoruz.

C#:

namespace Nkatmanli.Controllers { public class FeatureController : Controller { FeatureManager featureManager = new FeatureManager(new EfFeatureDal()); [HttpGet] public IActionResult Index() { var values = featureManager.TGetByID(1); return View(values); } [HttpPost] public IActionResult Index(Feature feature) { featureManager.TUpdate(feature); return RedirectToAction("Index", "Default"); } } }

Yazdığımız kodun içerini açıklarsak: IActionResult metodlarımızın üstüne Feature tablosuyla çalıştığımız için BusinessLayer’daki FeatureManager sınıfından bir nesne türettik. Bu nesne sayesinde Feature tablosu için DataAccessLayer ve BusinessLayer’da tanımladığımız metotlara erişimimiz olmuş oluyor. Sonrasında Index isimli metodumuzu HttpGet ve HttpPost diye ikiye böldük. HttpGet atadığımız Index metodunda Id değeri 1 olan satırı View’in içinde döndürüyoruz. HttpPost kısmında ise Feature classından gelen nesne ile Update işlemi gerçekleştiriyoruz. Feature kısmı sitede tek bir satıra sahip olacağından bu Controller’da sadece güncelleme işlemi gerçekleştiriyoruz. Bu sayede admin, panelden Feature kısmında bir değişiklik yapmak isterse güncelleyebilecek.

Index metodunun üstüne sağ tıklayıp Görünüm ekle diyoruz. Görünümü eklerken Yerleşim sayfası kullan seçeneğinin işaretli olduğunu kontrol edin. Kutucuğu tikledikten sonra sağ alttaki üç noktaya (…) tıklayıp görseldeki gibi _AdminLayout.cshtml’i seçiyoruz.

Görünümümüz eklendikten sonra aşağıdaki kodlarımızı yazıyoruz.

HTML:

@model EntityLayer.Concrete.Feature @{ ViewData["Title"] = "Index"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } @using (Html.BeginForm("Index", "Feature", FormMethod.Post)) { @Html.HiddenFor(x=>x.FeatureID) <br /> <label>Başlık</label> @Html.TextBoxFor(x=>x.Header, new {@class ="form-control"}) <br /> <label>Ad Soyad</label> @Html.TextBoxFor(x=>x.Name, new {@class ="form-control"}) <br /> <label>Görev</label> @Html.TextBoxFor(x=>x.Title, new {@class ="form-control"}) <br /> <button class="btn btn-success">Güncelle</button> }

Crtl Shift W ile sayfayı çalıştırıyoruz. Eğer sorunsuz çalışıyorsa burda Feature tablosundaki Id değeri 1 olan satırımızdaki değerler gelmiş oluyor. (Ben Feature’ın verilerini ssms’ten elle girdim konu öncesi)

About Controller

Controller klasörüne bir önceki gibi bir denetleyici daha oluşturuyoruz ve ismine AboutController diyoruz. Controller’ımız geldiğinde aşağıdaki kodları yazıyoruz.

C#:

namespace Nkatmanli.Controllers { public class AboutController : Controller { AboutManager aboutManager = new AboutManager(new EfAboutDal()); [HttpGet] public IActionResult Index() { var values = aboutManager.TGetByID(1); return View(values); } [HttpPost] public IActionResult Index(About about) { aboutManager.TUpdate(about); return RedirectToAction("Index", "Default"); } } }

AboutController’da FeatureController’daki işlemlerin aynısı yapmış oluyoruz. Site sahibinin hakkımda kısmındaki değerlerin sadece bir kere olacağından (örn. Yaş, Adres vs.) Admin sadece bu değerleri güncelleyebilecek. Siz isterseniz buraya ekleme silme ve listelemede ekleyebilirsiniz.

Index metoduna sağ tıklayıp FeatureController’da da yaptığımız şekilde görünüm ekliyoruz. View’ımız geldiğinde aşağıdaki kodları yazıyoruz.

HTML:

@model EntityLayer.Concrete.About @{ ViewData["Title"] = "Index"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } @using (Html.BeginForm("Index", "About", FormMethod.Post)) { <div class="col-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <p class="card-description"> Hakkımda Düzenleme Paneli </p> <form class="forms-sample"> <div class="form-group"> <label>ID</label> @Html.TextBoxFor(x=>x.AboutID, new {@class ="form-control"}) </div> <div class="form-group"> <label>Başlık</label> @Html.TextBoxFor(x=>x.Title, new {@class ="form-control"}) </div> <div class="form-group"> <label>Yaş</label> @Html.TextBoxFor(x=>x.Age, new {@class ="form-control"}) </div> <div class="form-group"> <label>Mail</label> @Html.TextBoxFor(x=>x.Mail, new {@class ="form-control"}) </div> <div class="form-group"> <label>Telefon</label> @Html.TextBoxFor(x=>x.Phone, new {@class ="form-control"}) </div> <div class="form-group"> <label>Adres</label> @Html.TextBoxFor(x=>x.Address, new {@class ="form-control"}) </div> <div class="form-group"> <label>Açıklama</label> @Html.TextAreaFor(x=>x.Description,6,3, new {@class ="form-control"}) </div> <button type="submit" class="btn btn-success">Kaydet</button> <button class="btn btn-dark">İptal</button> </form> </div> </div> </div> }

Skill Controller

Bu controllerda işler değişmeye başlıyor. Çünkü bu sefer diğerlerine yaptığımız gibi sadece güncelleme işlemi yapmayacağız. Sitenin Skill kısmında birden fazla skill olabileceği için hem listeleme hem de ekleme, hatalı giriş gibi bir durum olursa diye de silme işlemi yapacağız. Sizlere tek tek yazacağımız IActionResult’ları açıklayacağım.

Index

C#:

SkillManager skillManager = new SkillManager(new EfSkillDal()); public IActionResult Index() { var values = skillManager.TGetList(); return View(values); }

Bütün IActionResult üstüne SkillManager’dan bir nese türetiyoruz. Bu sayede Skill için tanımladığımız crud işlemlerini görecek metotlara erişimimiz olacak. Sonrasında Index metodunun içinde values isimli bir değişkenin içine oluşturduğumuz skillManager nesnesin listesini atıyoruz. Bu sayede Skills tablomuzu listelemek için bir değişkenimiz oluyor. values değişkenini View tarafına yönlendirmek için parantezin içine yazıyoruz. Diğerlerine yaptığımız gibi Index metoduna View ekleyip aşağıdaki kodları yazıyoruz.

HTML:

@using EntityLayer.Concrete @model List<Skill> @{ ViewData["Title"] = "Index"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } <div class="col-lg-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <h4 class="card-title">Skill List</h4> <div class="table-responsive pt-3"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Başlık</th> <th>Oran</th> <th>Sil</th> <th>Güncelle</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td>@item.SkillID</td> <td>@item.Title</td> <td> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: @item.Value%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </td> <td><a href="/Skill/DeleteSkill/@item.SkillID" class="btn btn-outline-danger">Sil</a></td> <td><a href="/Skill/EditSkill/@item.SkillID" class="btn btn-outline-primary">Güncelle</a></td> </tr> } </tbody> </table> </div> </div> </div> </div>

AddSkill

C#:

[HttpGet] public IActionResult AddSkill() { return View(); } [HttpPost] public IActionResult AddSkill(Skill skill) { skillManager.TAdd(skill); return RedirectToAction("Index"); }

AddSkill metoduna geldiğimizde bu metodu ikiye böldüğümü görebilirsiniz. Ekleme işlemi biraz da güncelleme işlemine benzemektedir. Ekleme işleminde ilk metotta hiç bir şeyin dönmesini istemiyoruz. Bize boş textboxlar’la dolu sayfa lazım. İkinci metotta ise metodun içinde Skill sınıfından skill isimli bir değişken türetiyoruz. Sonrasında skillManager nesnesiyle ekleme metodunu çağırıyoruz ve içine skill değişkenini yazıyoruz. Bu sayede ekleme işlemini tamamlamış oluyoruz. Devamında bu kısma view ekleyip aşağıdaki kodları yazıyoruz.

C#:

@model EntityLayer.Concrete.Skill @{ ViewData["Title"] = "AddSkill"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } <div class="col-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <h4 class="card-title">Yeni Plak Girişi</h4> <form class="forms-sample" method="post"> <div class="form-group"> <label for="exampleInputName1">Başlık</label> <span asp-validation-for="Title" class="text-danger"></span> <input type="text" class="form-control" id="exampleInputName1" placeholder="Başlığı Giriniz" asp-for="Title"> </div> <div class="form-group"> <label for="exampleInputName1">Değeri</label> <span asp-validation-for="Value" class="text-danger"></span> <input type="text" class="form-control" id="exampleInputName1" placeholder="Değeri Giriniz" asp-for="Value"> </div> <button type="submit" class="btn btn-primary me-2">Kaydet</button> </form> </div> </div> </div>

DeleteSkill

C#:

public IActionResult DeleteSkill(int id) { var values = skillManager.TGetByID(id); skillManager.TDelete(values); return RedirectToAction("Index"); }

Bu kısımda metodumuzun içine int türünde id isimli bir parametre koyuyoruz. Metodun içinde values isimli bir değişkene id değerine göre skill değerlerini atıyoruz. Sonrasında TDelete() metodunun içine values’i yazarak valuesten gelen değer ile silme işlemini yapıyoruz. Bu kısım için bir sayfamız olmayacak. Admin Index üzerinden istediği satırı satırın sağındaki sil butonuyla silebilecek.

EditSkill

C#:

[HttpGet] public IActionResult EditSkill(int id) { var values = skillManager.TGetByID(id); return View(values); } [HttpPost] public IActionResult EditSkill(Skill skill) { skillManager.TUpdate(skill); return RedirectToAction("Index"); }

Bu kısmı diğer controller’da yapıp anlattığım için burada üstünde çok durmayacağım çünkü diğerlerine yaptığımız güncelleme işleminin birebir aynısı. Kodları yazıp bir view oluşturduktan sonra içine View kodlarını yazıyoruz.

HTML:

@model EntityLayer.Concrete.Skill @{ ViewData["Title"] = "EditSkill"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } <div class="col-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <h4 class="card-title">Category Düzenleme Sayfası</h4> <form class="forms-sample" method="post"> @Html.HiddenFor(x=>x.SkillID) <div class="form-group"> <label for="exampleInputName1">İsim</label> <input type="text" class="form-control" asp-for="Title" id="exampleInputName1" placeholder="İsmi Giriniz"> </div> <div class="form-group"> <label for="exampleInputName1">1. Şarkı</label> <input type="text" class="form-control" asp-for="Value" id="exampleInputName1" placeholder="1. Şarkı"> </div> <button type="submit" class="btn btn-primary me-2">Kaydet</button> </form> </div> </div> </div>

EditSkill’ini tamamlayarak admin panelini bitirmiş oluyoruz. Tabi ki admin paneli bu kadar sınırlı bir şey değildir. Admin yani sizler sitede başka şeyleri değiştirmek yada admin paneline daha bir çok özellik koymak için istediğiniz gibi araştırarak yazabilirsiniz. Ama çok önemli bir sorunumuz var. İyi güzel biz admin panelini yaptık da bu admin paneli sadece adminin erişimi olabileceği bir şey değil mi? Bu durumuyla her siteye giren insan admin paneline erişmez mi? Bir sonraki konum olacak ASP.NET Core’da Identity de görüşmek üzere.

//Not: Eğer projeyi yaparken bir hatayla karşılaşırsanız kendiniz araştırıp çözmekten çekinmeyin. Cevabı bulamadıysanız da hata için benle iletişime geçebilirsiniz. Elimden geldiğince yardımcı olmaya çalışırım.

Proje Github Linki: GitHub - lothriccc/Nkatmanli

eline sağlık

Kruvazör · 12 Haz 2024

eline sağlık

sessizejder · 8 Ara 2024

Geliştirilir ama iyi

ASP.NET Core: Admin Panel (Dev Rehber)

Lothric

Yeni üye

4lp3rqwea

Yeni üye

OBT is HeRYerDe

Kıdemli Üye

ACE Veen

Uzman üye

Kruvazör

Uzman üye

sessizejder

Uzman üye

Sosyal medya sayfalarımız