09 December 2016

Blog Projesi 10: Yönetim Paneli Oluşturma

Yönetim panelinin tasarımı üzerinde fazla durmayacağız. Daha sonra tasarım değiştirilebilir.

Bir adet Yonetim.Master isimli masterpage oluşturalım. Tasarımı aşağıdaki şekilde olsun:

<form id="form1" runat="server">
 <div>
 <div>
 <div id="menu">
 <ul>
 <li><a href="#">Makale</a></li>
 <li><a href="#">Kategori</a></li>
 <li><a href="#">Etiket</a></li>
 <li><a href="#">Yorum</a></li>
 <li><a href="#">Sayfa</a></li>
 <li><a href="#">Rating</a></li>
 </ul>
 </div>
 <div id="content">
 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 </div>
 </div>
 </form>

yonetim.css diye bir Style Sheet dosyası oluşturup yolunu masterpage e ekleyelim.

body
 {
 margin:0px;
 padding:0px;
 }
 #menu
 {
 width:170px;
 background-color:#C7D5F0;
 float:left;
 text-align:right;
 padding-right:30px;
 }
 #content
 {
 width:700px;
 margin-bottom: 0px;
 float:left;
 }
ul
 {
 margin:0px;
 padding-top:50px;
 text-decoration:none;
 list-style-type:none;
 }
#menu li a
 {
 text-decoration:none;
}

 

Bir makale sayfası oluşturalım: Ymakale.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Yonetim/yonetim.Master" AutoEventWireup="true"
 CodeBehind="YMakale.aspx.cs" Inherits="Blog.Yonetim.YMakale" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 <style type="text/css">
 .style1
 {
 width: 100%;
 }
 .style2
 {
 width: 604px;
 }
 .style3
 {
 width: 25px;
 height: 24px;
 }
 </style>
 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 <asp:DataList ID="dlMakale" runat="server">
 <HeaderTemplate>
 <table>
 <tr>
 <td style="width:25%">
 Makale Başlık
 </td>
 <td style="width:50%">
 Makale İçerik
 </td>
 <td style="width:25%">
 Makale Eklenme Tarihi
 </td>
 </tr>
 </table>
 </HeaderTemplate>
 <ItemTemplate>
 <table class="style1">
 <tr>
 <td style="width:25%">
 <%#Eval("MakaleBaslik") %>
 </td>
 <td style="width:50%">
 <%#Eval("MakaleIcerik") %>
 </td>
 <td style="width:25%">
 <%#Eval("MakaleEklenmeTarihi") %>
 </td>
 <td class="style2">
 &nbsp;
 </td>
 <td>
 <img alt="" class="style3" src="../images/add.png" />&nbsp;&nbsp; </td>
 <td>
 <img alt="" class="style3" height="24px" src="../images/delete.png" width="24px" />
 </td>
 </tr>
 </table>
 </ItemTemplate>
 </asp:DataList>
 </asp:Content>

 

DBContext classımızın içinde bir metod overload edelim:

 

public static List<Makale> MakaleleriGetir()
 {
 List<Makale> makaleler = new List<Makale>();
 SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["WeblogCon"].ConnectionString);
 SqlCommand sqlcmd = new SqlCommand("select * from makale order by MakaleEklenmeTarihi desc", sqlcon);
 sqlcon.Open();
 SqlDataReader sdr= sqlcmd.ExecuteReader();
 while (sdr.Read())
 {
 Makale m = new Makale();
 m.MakaleID =Convert.ToInt32( sdr[0]);
 m.MakaleBaslik = sdr[1].ToString();
 m.MakaleIcerik = BlogDBContext.MakaleOzetGetir(sdr[2].ToString());
 m.MakaleEklenmeTarihi =Convert.ToDateTime( sdr[3]);
 makaleler.Add(m);
}
 sqlcon.Close();
 return makaleler;
 }

 

Ymakale.aspx kod kısmına yazalım:

protected void Page_Load(object sender, EventArgs e)
 {
 dlMakale.DataSource = BlogDBContext.MakaleleriGetir();
 dlMakale.DataBind();
 }

Buraya kadar Yönetim paneli oluşturup makaleleri listeledik.