Dosya ve bağlantılar
GitHub: https://github.com/buyukculhaci/GoldenPersonelYonetimi-basic-1
Template: https://www.creative-tim.com/product/material-dashboard
c# ‘ta işletmeler için personel yönetim sistemi hazırlayacağım. Basit işlevleriyle veritabanından, sorgulanan personelin hangi birimede çalıştığı, maaşı, yaşı gibi bilgilerini çekeceğim.
Öncelikle kağıt üstünde hangi personel bilgilerinin dahil olacağını çıkarıyorum. Bunlar;
İsim, soyisim, doğum tarihi, başlangıç maaşı, cinsiyet, evlilik durumu gibi genel bilgiler.
Ardından bu bilgileri tutacak bir veritabanı hazırlıyorum.
USE [userManagement] GO /****** Object: Table [dbo].[Personel] Script Date: 3.10.2019 20:21:22 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Personel]( [id] [int] IDENTITY(1,1) NOT NULL, [departmanId] [int] NULL, [ad] [nvarchar](50) NULL, [soyad] [nvarchar](50) NULL, [maas] [smallint] NULL, [dogumtarihi] [smalldatetime] NULL, [cinsiyet] [bit] NULL, [evli] [bit] NULL, [kullAdi] [nvarchar](50) NULL, [eposta] [nvarchar](50) NULL, [adres] [nvarchar](max) NULL ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] GO
Çalıştığı departmanı başka bir tabloda tutuyorum ki hem veri tabanım üzerinde “string” ‘leri tekrar tekrar yazdırıp çok yer kaplamasına sebep olmayayım hem de departmanları daha sonra başka tablolarla ilişkilendirebileyim.
USE [userManagement] GO /****** Object: Table [dbo].[Departman] Script Date: 3.10.2019 20:17:57 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Departman]( [id] [int] IDENTITY(1,1) NOT NULL, [ad] [nvarchar](50) NULL ) ON [PRIMARY] GO
Her bir tablonun kendi “id” ‘sinin olmasının sebebi hem karışıklığı hem de kalabalığı önlüyor. Tabi bu “id” ‘ler “unique” yani benzersiz olarak ayarlanıyor.
Tabloları “id” ‘lerle ilişkilendirebilmek için örneğin personel tablosundaki “Ahmet” kişisinin “departmanId” sütununa 1 yazıyorum, veritabanında departman tablosunda 1 numaralı id hangisiyse bana onu döndürüyor.
Veritabanı kısmı hazır, MVC kısmına geçelim.
“Golden Personel Yönetimi” isimli MVC ayarlı boş bir c# web projesi açıp içini düzenlemeye başlıyorum.
Buradaki ilk iş “controller” oluşturmak,
standart isimle “Controllers” altına “HomeController” açıyorum (MVC 5 Controller – Empty).
// Controllers/HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace GoldenPersonelYonetimi.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}Üçüncü iş, “Views” klasörü altına “Shared” isimli bir klasör oluşturup içine “_Layout” isimli bir “view” ekliyorum. (isimlerin aynı olmasına özen gösterin. VisualStudio ‘nun bir ayarında bu isimleri arıyor.) Kendisi “layout” olduğu için “Use a layout page:” işaretini kaldırın.
<!-- Views/Shared/_Layout.cshtml -->
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
</head>
<body>
<div>
</div>
</body>
</html>
Boş “layout” dosyası yukarıdaki gibi gelecektir. “Layout” dosyası, hazırlayacağımız parça parça sayfayı birleştirmeye yarıyor. İşin gövdesi gibi düşünebiliriz. Bunu yapma sebebimiz, her sayfaya ayrı ayrı menü kodu eklemek yerine (çünkü ufak bir değişiklik olsa tüm HTML sayfalarını değiştirmek gerekir.) tek “header” ve tek “footer” oluşturup işimizi kolaylaştırmaktır.
Layout dosyası hazır açılmışken buradaki gerekli kodları yazıp öyle çıkalım.
Önce sitemin başlığını (title) değiştirerek “Golden Personel Yönetimi” yaptım. “Title” kısmını istersek “body” için gelecek kısımdan da ayarlayabiliriz. Buna daha sonra değineceğim.
15. ve 16. satırlar sitetmizin “body” kısmını yani değişken içeriği barındıracak. sayfalar asıl olarak buraya yüklenecek. Buradaki divler içine @RenderBody() kodunu ekleyelim. Bu kod, bu layout işaret edilerek oluşturulan diğer “view” ‘lerden gelen verinin buraya konulmasını sağlayacak.
@ sembolü ile başlayan kodlara Razor Syntax deniyor. MVC3 ile gelen ve hala kullanılan bir özelliktir. HTML dosyası içinde sunucuda çalışacak c# kodunu yazmamızı sağlar.
Bu arada bootstrap düzenine uymak için de “div” “class” ‘ını container yapalım.(kullandığım şablonda bootstrap kullanılmadığı için container olarak değil wrapper olarak tanımlanmış). Nasıl ki MVC tarafında gövdenin geleceği yere @RenderBody() koyuyorsak CSS düzeni için de gövdenin nerede olduğunu göstermemiz lazım.
Ortak kullanılacak olan menü yani header kısmını da 14. ve 15. satırdaki body içine div üstüne @Html.Partial(“_Header”) ekledim. Buradaki “_Header” benim verdiğim bir isim, henüz oluşturmadığım bir dosya ama bu isimle oluşturacağım.
Aynı şekilde “body” kapanmadan önce ve “div” ‘in altına (boş template’te 16. ve 17. satırın arası) @Html.Partial(“_Footer”) ekledim.
Bunlar haricinde yine her sayfada bulunması gereken CSS ve JS ‘lerim olacak. Hazır indirdiğim şablonu kullanacağım, buradaki “examples” klasörünün altındaki “dashboard.html” dosyasının içinden <head> “tag” ‘inin içindekileri keserek alıp “_Layout” içine <head> içine ekliyorum.
Body içinde olup menü, footer, script gibi değişken olmayan kodları da aktarıyorum (dosyayı internet istemcinizde açtıktan sonra istemcinizin geliştirici araçları (chrome için F12) yardımı ile “div” Wlerin üzerinde gezinerek hangisinin ne işe yaradığını görebilirsiniz) .
<!-- Views/Shared/_Layout.cshtml -->
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Golden Personel Yönetimi</title>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="../assets/css/material-dashboard.css?v=2.1.1" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../assets/demo/demo.css" rel="stylesheet" />
</head>
<body>
@Html.Partial("_Header")
<div>
@RenderBody()
</div>
@Html.Partial("_Footer")
<div class="fixed-plugin">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<ul class="dropdown-menu">
<li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line">
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="badge-colors ml-auto mr-auto">
<span class="badge filter badge-purple" data-color="purple"></span>
<span class="badge filter badge-azure" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
<span class="badge filter badge-rose active" data-color="rose"></span>
</div>
<div class="clearfix"></div>
</a>
</li>
<li class="header-title">Images</li>
<li class="active">
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-1.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-2.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-3.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-4.jpg" alt="">
</a>
</li>
<li class="button-container">
<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
</li>
<!-- <li class="header-title">Want more components?</li>
<li class="button-container">
<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
Get the pro version
</a>
</li> -->
<li class="button-container">
<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
View Documentation
</a>
</li>
<li class="button-container github-star">
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a>
</li>
<li class="header-title">Thank you for 95 shares!</li>
<li class="button-container text-center">
<button id="twitter" class="btn btn-round btn-twitter"><i class="fa fa-twitter"></i> · 45</button>
<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> · 50</button>
<br>
<br>
</li>
</ul>
</div>
</div>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap-material-design.min.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Plugin for the momentJs -->
<script src="../assets/js/plugins/moment.min.js"></script>
<!-- Plugin for Sweet Alert -->
<script src="../assets/js/plugins/sweetalert2.js"></script>
<!-- Forms Validations Plugin -->
<script src="../assets/js/plugins/jquery.validate.min.js"></script>
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
<script src="../assets/js/plugins/jquery.bootstrap-wizard.js"></script>
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="../assets/js/plugins/bootstrap-selectpicker.js"></script>
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="../assets/js/plugins/bootstrap-datetimepicker.min.js"></script>
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
<script src="../assets/js/plugins/jquery.dataTables.min.js"></script>
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
<script src="../assets/js/plugins/bootstrap-tagsinput.js"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="../assets/js/plugins/jasny-bootstrap.min.js"></script>
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
<script src="../assets/js/plugins/fullcalendar.min.js"></script>
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
<script src="../assets/js/plugins/jquery-jvectormap.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="../assets/js/plugins/nouislider.min.js"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
<!-- Library for adding dinamically elements -->
<script src="../assets/js/plugins/arrive.min.js"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist JS -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/demo.js"></script>
<script>
$(document).ready(function () {
$().ready(function () {
$sidebar = $('.sidebar');
$sidebar_img_container = $sidebar.find('.sidebar-background');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
window_width = $(window).width();
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
$('.fixed-plugin .dropdown').addClass('open');
}
}
$('.fixed-plugin a').click(function (event) {
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
if ($(this).hasClass('switch-trigger')) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .active-color span').click(function () {
$full_page_background = $('.full-page-background');
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if ($sidebar.length != 0) {
$sidebar.attr('data-color', new_color);
}
if ($full_page.length != 0) {
$full_page.attr('filter-color', new_color);
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.attr('data-color', new_color);
}
});
$('.fixed-plugin .background-color .badge').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('background-color');
if ($sidebar.length != 0) {
$sidebar.attr('data-background-color', new_color);
}
});
$('.fixed-plugin .img-holder').click(function () {
$full_page_background = $('.full-page-background');
$(this).parent('li').siblings().removeClass('active');
$(this).parent('li').addClass('active');
var new_image = $(this).find("img").attr('src');
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
$sidebar_img_container.fadeOut('fast', function () {
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$sidebar_img_container.fadeIn('fast');
});
}
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$full_page_background.fadeOut('fast', function () {
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
$full_page_background.fadeIn('fast');
});
}
if ($('.switch-sidebar-image input:checked').length == 0) {
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
}
});
$('.switch-sidebar-image input').change(function () {
$full_page_background = $('.full-page-background');
$input = $(this);
if ($input.is(':checked')) {
if ($sidebar_img_container.length != 0) {
$sidebar_img_container.fadeIn('fast');
$sidebar.attr('data-image', '#');
}
if ($full_page_background.length != 0) {
$full_page_background.fadeIn('fast');
$full_page.attr('data-image', '#');
}
background_image = true;
} else {
if ($sidebar_img_container.length != 0) {
$sidebar.removeAttr('data-image');
$sidebar_img_container.fadeOut('fast');
}
if ($full_page_background.length != 0) {
$full_page.removeAttr('data-image', '#');
$full_page_background.fadeOut('fast');
}
background_image = false;
}
});
$('.switch-sidebar-mini input').change(function () {
$body = $('body');
$input = $(this);
if (md.misc.sidebar_mini_active == true) {
$('body').removeClass('sidebar-mini');
md.misc.sidebar_mini_active = false;
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
} else {
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
setTimeout(function () {
$('body').addClass('sidebar-mini');
md.misc.sidebar_mini_active = true;
}, 300);
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function () {
window.dispatchEvent(new Event('resize'));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function () {
clearInterval(simulateWindowResize);
}, 1000);
});
});
});</script>
<script>
$(document).ready(function () {
// Javascript method's body can be found in assets/js/demos.js
md.initDashboardPageCharts();
});</script>
</body>
</html>son hali yukarıdaki gibi. Daha sonra CSS, JS ve görsellerin yerini göstermek için bu dosyaya döneceğim (aslında yerleri belli, şimdiden hazırlasam da olur).
Dördüncü iş, header ve footer kısımlarını hazırlayacağım.
“Header” için “Shared” klasörünün altına “_Header” isimli bir “view” ekledim. (tamamen boş bir cshtml dosyası)
Normalde menüleri “body” ‘nin hemen altına “nav-bar” ismiyle yazarlar ama bu şablonda “wrapper” sınıflı “div” içinde oluşturmuşlar. Menüyü geliştirici aracıyla buldum. “Sidebar” sınıflı “div” ‘i dışarıya aldığımda bir bozukluk meydana gelmedi.
Bu “Sidebar” sınıflı “div” ‘i şablondan keserek “_Header.cshtml” dosyamın içine yapıştırdım. Aynı şekilde Yukarıdaki arama çubuğu olan “navbar” ‘ı da aldım.
<!-- Views/Shared/_Header.cshtml -->
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
<!--
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
Tip 2: you can also add an image using data-image tag
-->
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
Creative Tim
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="./dashboard.html">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./icons.html">
<i class="material-icons">bubble_chart</i>
<p>Icons</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./map.html">
<i class="material-icons">location_ons</i>
<p>Maps</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./notifications.html">
<i class="material-icons">notifications</i>
<p>Notifications</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./rtl.html">
<i class="material-icons">language</i>
<p>RTL Support</p>
</a>
</li>
<li class="nav-item active-pro ">
<a class="nav-link" href="./upgrade.html">
<i class="material-icons">unarchive</i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
</div>
</div>
“Header” dosyam hazır, sıra “footer” ‘da.
kodların arasından “Footer” isimli sınıfı olan div’i arıyorum ama burada doğrudan “<footer>” “tag” ‘i ile açılmış. HTML 5 ile bazı yeni özellikler geldi, bunlardan biri yeni “tag” ‘ler. HTML5 semantic elements
Google’ın ve diğer arama motorlarının en son teknolojiyi takip ettiğini unutmayın, bu teknolojiye sizin de ayak uyfurmanız gerekir (tabi bu proje dışarıya kapalı olduğu için arama motorlarını düşünmeden hareket edebiliriz).
<!-- Views/Shared/_Footer.cshtml -->
<footer class="footer">
<div class="container-fluid">
<nav class="float-left">
<ul>
<li>
<a href="https://www.creative-tim.com">
Creative Tim
</a>
</li>
<li>
<a href="https://creative-tim.com/presentation">
About Us
</a>
</li>
<li>
<a href="http://blog.creative-tim.com">
Blog
</a>
</li>
<li>
<a href="https://www.creative-tim.com/license">
Licenses
</a>
</li>
</ul>
</nav>
<div class="copyright float-right">
©
<script>document.write(new Date().getFullYear())</script>, made by <a href="https://www.buyukculhaci.com" target="_blank">Boran Corp.</a> for a better life.
</div>
</div>
</footer>
“_Footer.cshtml” dosyam yukarıdaki kodları içeriyor (“copyright” kısmını kendinize göre özelleştirmeyi unutmayın)
Beşinci iş, artık sitenin içeriğini koyalım. Bu kısım değişken ve “controller” tarafından yönetilen bir kısım. Mevcut “controller” ‘ımızın içinde hazır bir “Index” “ActionResult” methodumuz var. Buna sağ tıklayarak “Add View” ‘i seçince otomatik olarak “Views” klasörüne methodumuzla aynı isimde “view” eklemek üzere pencere açıyor. Buradaki “Use a layout page:” aktif edip “layout” ‘umu seçip “view” ‘imi oluşturuyorum.
<!-- Views/Home/Index.cshtml -->
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>Boş index yukarıdaki kodları içerir. Bunun içine şablonumdan aldığım “body” kodlarını ekleyeceğim.
<!-- Views/Home/Index.cshtml -->
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="main-panel">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-warning card-header-icon">
<div class="card-icon">
<i class="material-icons">content_copy</i>
</div>
<p class="card-category">Used Space</p>
<h3 class="card-title">
49/50
<small>GB</small>
</h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons text-danger">warning</i>
<a href="#pablo">Get More Space...</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">store</i>
</div>
<p class="card-category">Revenue</p>
<h3 class="card-title">$34,245</h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">date_range</i> Last 24 Hours
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-danger card-header-icon">
<div class="card-icon">
<i class="material-icons">info_outline</i>
</div>
<p class="card-category">Fixed Issues</p>
<h3 class="card-title">75</h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">local_offer</i> Tracked from Github
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="fa fa-twitter"></i>
</div>
<p class="card-category">Followers</p>
<h3 class="card-title">+245</h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> Just Updated
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card card-chart">
<div class="card-header card-header-success">
<div class="ct-chart" id="dailySalesChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Daily Sales</h4>
<p class="card-category">
<span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.
</p>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">access_time</i> updated 4 minutes ago
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-chart">
<div class="card-header card-header-warning">
<div class="ct-chart" id="websiteViewsChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Email Subscriptions</h4>
<p class="card-category">Last Campaign Performance</p>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">access_time</i> campaign sent 2 days ago
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-chart">
<div class="card-header card-header-danger">
<div class="ct-chart" id="completedTasksChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Completed Tasks</h4>
<p class="card-category">Last Campaign Performance</p>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">access_time</i> campaign sent 2 days ago
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header card-header-tabs card-header-primary">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<span class="nav-tabs-title">Tasks:</span>
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active" href="#profile" data-toggle="tab">
<i class="material-icons">bug_report</i> Bugs
<div class="ripple-container"></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#messages" data-toggle="tab">
<i class="material-icons">code</i> Website
<div class="ripple-container"></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#settings" data-toggle="tab">
<i class="material-icons">cloud</i> Server
<div class="ripple-container"></div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="profile">
<table class="table">
<tbody>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Sign contract for "What are conference organizers afraid of?"</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>
Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Create 4 Invisible User Experiences you Never Knew About</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="messages">
<table class="table">
<tbody>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>
Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Sign contract for "What are conference organizers afraid of?"</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="settings">
<table class="table">
<tbody>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>
Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Sign contract for "What are conference organizers afraid of?"</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header card-header-warning">
<h4 class="card-title">Employees Stats</h4>
<p class="card-category">New employees on 15th September, 2016</p>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<th>ID</th>
<th>Name</th>
<th>Salary</th>
<th>Country</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dakota Rice</td>
<td>$36,738</td>
<td>Niger</td>
</tr>
<tr>
<td>2</td>
<td>Minerva Hooper</td>
<td>$23,789</td>
<td>Curaçao</td>
</tr>
<tr>
<td>3</td>
<td>Sage Rodriguez</td>
<td>$56,142</td>
<td>Netherlands</td>
</tr>
<tr>
<td>4</td>
<td>Philip Chaney</td>
<td>$38,735</td>
<td>Korea, South</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Normalde şimdi çalışır ancak CSS ve JS eklentilerini dahil etmediğimiz için bazı özellikler eksik ve görünümü biçimsiz olur. Bunu düzeltmek için;
CSS, JS ve görselleri projeme dahil edeceğim. Bunlar eskiden “assets” klasöründe saklanırdı, artık “Content” klasörü kullanılıyor. Projemin içine “Content” isimli yeni bir klasör oluşturuyorum. (Eğer hazır şablon kullanmadan sıfırdan bir web sitesi yapıyor olsaydım, CSS ve JS dosyalarımı da sunucumda barındırmak isteseydim ya “bootstrap” sitesine girerek dosyaları indirdikten sonra bu dizine atacaktım ya da “NuGet” paket yöneticisi ile “bootstrap” ‘ı indirecektim. “NuGet” ile indirirsem otomatik olarak “Content” klasörü oluşturup içine atıyor.)
Şablondan gelen CSS, JS ve görselleri doğrudan sürükleyerek bu dosyamın içine atıyorum. Sitemin de bu yolları tanıyabilmesi için gerekli yönlendirmeleri düzeltiyorum örneğin “_Layout” içindeki
<link href="../assets/css/material-dashboard.css?v=2.1.1" rel="stylesheet" />
satırını
<link href="/Content/css/material-dashboard.css?v=2.1.1" rel="stylesheet" />
şeklinde değiştiriyorum. Bunun gibi diğer stil (CSS), JS ve görsel yönlerdirmelerinin tümünü düzeltmem gerekiyor, aksi durumda HTML sayfamız bu dosyaları bulamayacağı için düzgün sonuç vermeyecektir. (Bazı görsel dosyaları (genellikle “background” ‘larda yapılıyor. CSS dosyasının içinde yazılabiliyor. İlgili stil dosyasına girerek değiştirmeniz gerekir.)
Projeyi çalıştırıp duruma bakalım.
“Console” ‘da “sidebar-1.jpg” dosyasının bulunamadığını yazmış (Diğer hata ise şablonda kullanılan Google Harita ile ilgili). Bu dosya nerede kullanılmış tüm projede (Entire Solution) aratıp, bulup değiştireceğim.
Bu dosya haricinde iki problem daha olduğunu görüyorum. Biri, sayfanın iç kısımda olması gerektiği gibi gözükmediği, diğeri ise sol üst köşede yazıların üst üste binmesi. Bunlar CSS ile alakalı problemler.
Sayfa içeriğinin sıkışık gözükmesinin nedeni, “body” kısmını belirtmek için “body” ‘nin sınıfını “bootstrapta” kullanılan “container” sınıfını kullanmıştım ama bu projede bootstrap kullanılmamış, “container” yerine “wrapper” sınıfıyla isimlendirilmiş. Aşağıdaki gibi düzelttim. Ayrıca “wrapper” içine, “main-panel” sınıflı bir div daha açılarak body kısmı bunun içine yerleştirilmiş.
Diğer hata ise, üstteki çubuğun da “wrapper” altına yazılmış olması. Yani “navbar” için de yeni bir “view” açıp yerine yerleştirmem gerekiyor.
<div class="wrapper">
<div class="main-panel">
@Html.Partial("_Navbar")
@RenderBody()
</div>
</div>“Navbar” için de bir “view” açıp buraya ekledim. (Daha önce header kısmında tutuyordum ancak yerinin “header” “partial view” ‘i ile farklı olmasından ötürü ona özel bir yer açtım.)
<!-- Views/Shared/_Navbar.cshtml -->
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="#pablo">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">dashboard</i>
<p class="d-lg-none d-md-block">
Stats
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->Buraya kadar yapılanlarla sitenin anasayfasının düzgün görüntülenmesi gerekiyor.
Yapılanlar özetle:
- Yeni MVC proje aç,
- Site hangi parçalardan (Header, Body, Footer) oluşuyorsa ona göre parça “View” ‘ler ve toplanma alanı görevi görecek olan “View” oluştur. Layout içinde parçaların geleceği yerleri göster (@Html.Partial(…) ve @RenderBody())
- Şablonu parçalarına böl (Header, Body, Footer, Layout)
- Her parçayı uygun yerine yerleştir.
devamında ise
- diğer sayfalar için view hazırlanması
- “Entity Framework” ile database ‘den veri aktarılması
yapacağım.
Diğer sayfaları da web sitemde görüntüleyebilmek için her birine ayrı “view” hazırlamam gerekiyor. Bunun için “controller” içinde gerekli “ActionResult” ‘ları yazdım. Şablondaki iki sayfayı dahil edeceğim, bunlar, UserProfile ve TableList sayfaları.
// Controllers/HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace GoldenPersonelYonetimi.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[Route("KProfil")]
public ActionResult UserProfile()
{
return View();
}
[Route("Liste")]
public ActionResult TableList()
{
return View();
}
}
}“ActionResult” olarak ekledikten sonra isminin üstüne sağ tıklayıp “Add View” ‘e tıklayıp “Use Layout Page:” kutusunu işaretleyip “Views/Shared/_Layout” seçtikten sonra sonra “Add” düğmesini tıklıyorum. Visual Studio otomatik olarak “View/Home” klasörü altına metodumun adıyla aynı boş cshtml sayfası oluşturuyor. TableList için de aynı şekilde oluşturuyorum.
Üstlerine ise adres çubuğundan girilen bağlantıya göre “ActionResult” ‘a gitmesi için “Route(“…”)” özelliği “Attribute” ekledim. (Bu özelliğin çalışması için yukarıda ikinci iş olarak bahsettiğim “RouteConfig” ayarının yapılması gerekiyor) Bu sayede www.###.com/KProfil yazınca bu method çalışacak.
Oluşturduğum dosyaların içini şablonumdaki ilgili sayfadan sadece gövde bölgesini ayıklayarak alıyorum.
<!-- Views/Home/UserProfile.cshtml -->
@{
ViewBag.Title = "User Profile";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title">Edit Profile</h4>
<p class="card-category">Complete your profile</p>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label class="bmd-label-floating">Company (disabled)</label>
<input type="text" class="form-control" disabled>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="bmd-label-floating">Username</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">Email address</label>
<input type="email" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">Fist Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">Last Name</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating">Adress</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">Country</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">Postal Code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>About Me</label>
<div class="form-group">
<label class="bmd-label-floating"> Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right">Update Profile</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-profile">
<div class="card-avatar">
<a href="#pablo">
<img class="img" src="/Content/img/faces/marc.jpg" />
</a>
</div>
<div class="card-body">
<h6 class="card-category text-gray">CEO / Co-Founder</h6>
<h4 class="card-title">Alec Thompson</h4>
<p class="card-description">
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
</p>
<a href="#pablo" class="btn btn-primary btn-round">Follow</a>
</div>
</div>
</div>
</div>
</div>
</div>aldığım “UserProfile.html” gövdesini “UserProfile.cshtml” dosyamın içine yapıştırdım. içindeki görselin yolunu da (yukarıda 97. satırda) “../assets” ‘den “/Content/” olarak değiştirdim.
Aynı şekilde “TableList” sayfasını da doldurdum. Sıra bunları çağıracak bağlantıda.
Menümün yer aldığı “_Header.cshtml” dosyamın içindeki
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>kodlarının “href” kısımlarını “HomeController” ‘ın içinde “Route” özelliğinde kullandığım isimlere yönlendiriyorum.
<li class="nav-item ">
<a class="nav-link" href="KullaniciProfili">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="Liste">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>olarak güncelliyorum. Yönlendirmelerim hazır.
biraz da veritabanı kısmını düzenleyeceğim.
Veritabanından verileri çağırırken doğrudan tabloları çağırmak yerine SQL ‘in “Stored Procedure” denilen özelliğini kullanarak sunucuya sorgu göndereceğim ve sunucudan tüm liste yerine sadece cevabı alacağım. Bu işlem veritabanı içinde arama yapma, filtreleme, sayma gibi işlemleri sunucu tarafında yapılıp dönmesini sağlar. Örneğin 1.000.000 kullanıcılı bir veri tabanında 20 yaşın üzerindeki kullanıcıları bulmak için standart yöntemle, önce tabloyu programımıza çekmemiz ardından içinde filtreletmemiz gerekir. Hem o kadar veriyi sunucudan çekmek hem de o veriyi işlemek zaman ve işlemci yükü harcar. Projenin performansını düşürür. “Stored Procedure” yönteminde saklanan “query” ile “query” içindeki değişkene değer gönderilir, sunucu kendi içinde işlem yaparak liste içindekileri sadece 20 yaş üstü kullanıcıları döndürür. Ayrıca “query” ‘ler sınırlandırıldığı için çok daha güvenlidir.
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO ALTER PROCEDURE PersonelListesi @onlu int AS BEGIN SET NOCOUNT ON; SELECT * FROM [userManagement].[dbo].[Personel] WHERE id BETWEEN @onlu AND @onlu + 9; END GO
“Stored Procedure” içine yukarıdaki “query” ‘i ekledim. c# içinden “PersonelListesi” prosedürünün “onlu” değişkenine değer göndereceğim, sunucu da gönderdiğim değer ile sonraki onuncusu arasındaki (dahil) sonuçları verecek. Bu yöntem genelde ürün sayfalamada kullanılıyor.
Veritabanı örnek verilerimi https://mockaroo.com/ sitesinde ücretsiz oluşturup veritabanıma ekledim.
Şimdi sunucu ile program arasındaki bağlantıyı yapacağım.
Bunun için, programımdaki models klasörüne sağ tıklayıp “Add -> New Item” ardından açılan pencereden “ADO.NET Entity Data Model” ‘i seçip ismini yazıp “Add” düğmesine tıklıyorum.
Entitiy Framework, belirlediğim klasör içine veritabanımdaki verilerin modelini oluşturacak.
- Çıkan pencerede ilk seçenek olan “EF Designer from database”
- “New Connection” düğmesi
- Microsoft SQL Server “Continue”
- “Server name:” buradan sunucunuzu aratabilirsiniz ancak çok uzun sürer, bunun yerine sunucunuzun adını kopyala yapıştır ile getirmeniz daha hızlı olacaktır (Benim için BORAN\SQLEXPRESS)
- Açılan “Select or enter a database name:” kısmından veritabanımı seçiyorum
- OK
- Bağlantı yazısını (Connection string) otomatik oluşturdu. Ana pencereden “Next”
- Entitiy Framework 6.x
- Açılan listede Tables, Views, Stored Procedures and Functions var, burada Departman tablom küçük olduğu için “Stored Procedure” kullanmadım, doğrudan tabloyu alacağım. Personel listesi içinse hazırladığım “Stored Procedure” ‘ü kullanacağım.
Bu işlem bilgisayarınıza zarar verebilir diye bir uyarı veriyor, sunucuyla doğrudan bağlantı yaptığı için o uyarıyı veriyor. Onaylayarak ilerleyin.
HomeController.cs dosyama gelerek, modeli burada kullanabilmek için using ile modelimi gösteriyorum
using GoldenPersonelYonetimi.Models;
[Route("Liste")]
public ActionResult TableList()
{
userManagementEntities db = new userManagementEntities();
var res = db.PersonelListesi(1).ToList();
return View(res);
}Yine “HomeController.cs” içinde, web sitemde “###.com/Liste” sorgusunda ulaşılacak olan metoduma “Entity Framework” ile oluşturduğum “userManagementEntities” sınıfımda “db” isimli değişken hazırlıyorum.
Yeni bir “var (variable)” türünde değişken oluşturup vertabanında kayıtlı olan “PersonelListesi” “Stored Procedure” ‘üne 1 verisini yani ilk 10 kaydı çekerek getirmesini ve listeye dönüştüreren “res” değişkenine atamasını istedim.
Dönen sonucu view içine bastım.
View içinde sonucu görebilmek için “TableList.cshtml” dosyamın kodlarının başına kütüphaneyi çekerek HTML içinde c# ‘tan gelen verileri yazdırmada kullanacağım “model” değişkenimin hangi sınıftan türediğini gösterdim.;
@using GoldenPersonelYonetimi.Models @model List<PersonelListesi_Result2>
TableList.cshtml dosyamın içinde listeyi oluşturan “<tbody>” “tag” ‘ının içinde yineleme şeklinde veriler var. Bunların yinelenmeyen bir parçasını (yani “<tr></tr>” arasını alıp bir foreach içine koyuyorum)
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@item.id
</td>
<td>
@item.ad @item.soyad
</td>
<td>
@item.kullAdi
</td>
<td>
@item.dogumtarihi
</td>
<td class="text-primary">
@item.eposta
</td>
<td class="text-primary">
@item.maas
</td>
</tr>
}
</tbody>Tam hali aşağıdaki gibi.
<!-- TableList.cshtml -->
@using GoldenPersonelYonetimi.Models
@model List<PersonelListesi_Result2>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title ">Simple Table</h4>
<p class="card-category"> Here is a subtitle for this table</p>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead class=" text-primary">
<th>
ID
</th>
<th>
İsim
</th>
<th>
Kullanıcı Adı
</th>
<th>
Doğum Tarihi
</th>
<th>
E-Posta
</th>
<th>
Maaş
</th>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@item.id
</td>
<td>
<a href="@item.id">@item.ad @item.soyad</a>
</td>
<td>
@item.kullAdi
</td>
<td>
@item.dogumtarihi
</td>
<td class="text-primary">
@item.eposta
</td>
<td class="text-primary">
@item.maas
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card card-plain">
<div class="card-header card-header-primary">
<h4 class="card-title mt-0"> Table on Plain Background</h4>
<p class="card-category"> Here is a subtitle for this table</p>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead class="">
<th>
ID
</th>
<th>
Name
</th>
<th>
Country
</th>
<th>
City
</th>
<th>
Salary
</th>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Dakota Rice
</td>
<td>
Niger
</td>
<td>
Oud-Turnhout
</td>
<td>
$36,738
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Burada 10 kişi listelenecek şeklinde ayarladım. Bunun altına “pagination” koyarak diğer kayıtları da görebilirim. Bu proje için onu geçeceğim.
Sonraki aşamada listedeki ismin üstüne tıklayınca profil sayfası açılacak şeklinde düzenleyeceğim.
Bunun için “HomeController.cs” içine “UserProfile.cshtml” dosyama yönlendirilmiş bir method ekleyeceğim. Listedeki yazıya “href” özelliği kazandırarak bağlantısını da “/KProfil/#” “hashtag” olan yere kullanıcı id gelecek şekilde ayarlayacağım. Bu bağlantı “HomeController.cs” içindeki “UserProfile” metoduna kullanıcının “id” sini gönderecek. Bu method da veri tabanına sorarak kullanıcı bilgilerini döndürerek “UserProfile.cshtml” içine basacak.
[Route("KProfil")]
public ActionResult UserProfile(int Id)
{
return View();
}USE [userManagement]
GO
/****** Object: StoredProcedure [dbo].[kullCek] Script Date: 3.10.2019 23:03:29 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author: <Author,,Name>
-- Create date: <Create Date,,>
-- Description: <Description,,>
-- =============================================
CREATE PROCEDURE [dbo].[kullCek]
-- Add the parameters for the stored procedure here
@Id int
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
-- Insert statements for procedure here
SELECT * FROM dbo.Personel WHERE dbo.Personel.id = @Id;
END
Bunun veritabanı tarafında buna özel bir “Stored Procedure” hazırlayarak “id” gönderdiğimde o id’ye ait olan kullanıcıların bilgisini çekiyorum.
“Solution Explorer” ‘dan Models klasörümün altına oluşturduğum (projemde) “PersonelOnluDB.edmx” ismiyle geçen modelimin üzerine sağ tıklayarak “Open” seçiyorum “Entity Framework” ‘ümün “ModelBrowser” ‘ından modelimi tazeliyorum.
Yeni “Stored Procedure” ‘ümü modelime dahil edip metodumun içinde çalıştırayım.
public ActionResult UserProfile(int Id)
{
userManagementEntities db = new userManagementEntities();
var res = db.kullCek(Id).FirstOrDefault();
return View(res);
}“TableList” methodunda olduğu gibi “UserProfile” ‘da da “db” ‘yi göstererek bir değişkene atıyorum. Ancak burada değişkenimin sonunda “FirstOrDefault()” metodunu kullanıyorum. Bunu kullanmamın amacı, aslında veritabanından tek satır olsa da bir tablo yani “list” dönmesi. Tek satır olduğundan emin olduğum listemin ilk satırını çekerek değişkenime ata diyorum. Burada artık “Model” klasörümde olan “kullCek_Result.cs” sınıfından türeyen bir değişkene de atayabilirim (aşağıdaki gibi).
public ActionResult UserProfile(int Id)
{
userManagementEntities db = new userManagementEntities();
kullCek_Result res = db.kullCek(Id).FirstOrDefault();
return View(res);
}Eğer tek satır çekme işlemini “FirstOrDefault()” ile yapmazsam sınıf dönüştürme hatası alırım.
Buradan aldığım verileri “UserProfile.cshtml” dosyamda HTML içine ekleyebilirim.
<!-- Views/Home/UserProfile.cshtml -->
@using GoldenPersonelYonetimi.Models
@model kullCek_Result
@{
ViewBag.Title = "User Profile";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title">Edit Profile</h4>
<p class="card-category">Complete your profile</p>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label class="bmd-label-floating">Company (disabled)</label>
<input type="text" value="Boran Corp." class="form-control" disabled>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="bmd-label-floating">Username</label>
<input type="text" value="@Model.kullAdi" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">Email address</label>
<input type="email" value="@Model.eposta" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">Fist Name</label>
<input type="text" value="@Model.ad" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">Last Name</label>
<input type="text" value="@Model.soyad" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating">Adress</label>
<input type="text" value="@Model.adres" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">Country</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">Postal Code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>About Me</label>
<div class="form-group">
<label class="bmd-label-floating"> Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right">Update Profile</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-profile">
<div class="card-avatar">
<a href="#pablo">
<img class="img" src="/Content/img/faces/marc.jpg" />
</a>
</div>
<div class="card-body">
<h6 class="card-category text-gray">CEO / Co-Founder</h6>
<h4 class="card-title">Alec Thompson</h4>
<p class="card-description">
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
</p>
<a href="#pablo" class="btn btn-primary btn-round">Follow</a>
</div>
</div>
</div>
</div>
</div>
</div>Eklerken HTML dosyamın içinde kullanacağım sınıfı
@using GoldenPersonelYonetimi.Models
@model kullCek_Result
ile referans gösteriyorum, gerekli yerlerde de, örneğin kullanıcı adı için
value=”@Model.kullAdi”
kodu ile formdaki kullanıcı adı kutusunun içini dolduruyorum.
Buraya kadarki olan kısımda veritabanından veri çekerek tablo içerisine ekledim, tablodan adını tıkladığım kişinin profil bilgisine gittim. Projenin üzerine daha çok özellik eklenir ancak bu proje için şimdilik bu kadar.
