ASP.NET Responsive Site Yapımı – Bölüm 2 (Select, Insert, Upload)

Bir önceki yazıda ASP.NET responsive sitenin statik tasarımını yapmıştık. Bu yazıya yaptığımız bu tasarım üzerinden devam edeceğim. ASP.NET Responsive Site Tasarımı Bölüm 1 yazısını okumak ve kodları indirmek için buraya tıklayın.

Veritabanı Oluşturma ve ASP.NET Veritabanı İşlemleri

Bu bölümde

App_Data klasörü oluşturup, bu klasörün içine de haberlerimiz için bir tane veritabanı oluşturacağım.
Web.Config kullanrak veritabanı bağlantı cümlesi oluşturacağım.
Default.aspx sayfasında kayıtların gösterilmesini sağlamak için gerekli veritabanı sorgulama kodlarını yazacağım.
Son olarak sorgulanan kayıtları ekrana göstermek için aspx kodlarını kullanıp kayıtları ekranda listeleyeceğim.

App_Data klsörü ve veritabanı dosyasını oluşturma

Bölüm 1’de oluşturulan proje üzerinden devam edilecektir. Projeyi indirdikten sonra açmak için File /Open / Web Site ile YazilimBilisimNet klasörü seçilir.

App_Data Klsörünü oluşturmak için site adı üzerinde sağtıklayıp / Add / Add ASP.NET Folder / App_Data seçimini yapıyoruz.

Oluşturulan App_Data Klasörü üzerinde sağtıklayıp Add / Add New Item /SQL Server Database seçeneğini seçip yeni veritabanı eklenmesini sağlıyoruz. (Database.mdf adında oluşturdum)

Sağ panelde bulunan app_data klasöründeki database üzerine çift tıkladığımızda sol panelde server explorer ile veritabanı karşımıza geliyor.

Veritabanı Tablolarını ve alan adlarını oluşturma

Yeni bir tablo eklemek için Database.dmf üzerinde sağ tıklayıp / Add New Table Seçeneğini seçiyoruz.

Açılan SQL panelinde isterseniz grafik ekranla, istersenizde SQL cümlesini kendiniz yazarak tabloyu oluşturursunuz.

Tablo hazırlandıktan sonra Veritabanına kaydedilmesi için sol üst köşeden Update butonuna basarak gelen ekranda Update Database ile tabloyu veritabanı içine aktarıyoruz.

SQL Sorgusu


CREATE TABLE [dbo].[Haber] (
[Id] INT IDENTITY (1, 1) NOT NULL,
[Baslik] NVARCHAR (50) NULL,
[Ozet] NVARCHAR (MAX) NULL,
[Icerik] NVARCHAR (MAX) NULL,
[Tarih] DATETIME NULL,
[UyeID] INT NULL,
[TurID] INT NULL,
[Resim] NVARCHAR (MAX) NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);

CREATE TABLE [dbo].[Haber] (

[Id] INT IDENTITY (1, 1) NOT NULL,

[Baslik] NVARCHAR (50) NULL,

[Ozet] NVARCHAR (MAX) NULL,

[Icerik] NVARCHAR (MAX) NULL,

[Tarih] DATETIME NULL,

[UyeID] INT NULL,

[TurID] INT NULL,

[Resim] NVARCHAR (MAX) NULL,

PRIMARY KEY CLUSTERED ([Id] ASC)

);

Tabloya bir kaç tane veri eklemek için yine server explorer / database.mdf/ tables /Haber üzerinde sağ tıklayıp Show Table Data seçeneğini seçiyoruz.

Diğer bir veri ekleme seçeneği olarak da SQL sorgusu yazılabilir. Bunun içinse server explorer / database.mdf /tables üzerinde sağ tıklayıp new query seçeneğiniz seçiyoruz.

SQL Cümlesi


INSERT INTO Haber (Baslik, Ozet, Icerik, Tarih, UyeID,Resim) 
VALUES ('İlk Haber', 'Haberin Özet Bilgisi', 'Haberin Tüm detayları', NULL, NULL, N'gorseller/resim1.png')

INSERT INTO Haber (Baslik, Ozet, Icerik, Tarih, UyeID,Resim) 
VALUES ('ikinci Haber', 'Haberin Özet Bilgisi', 'Haberin Tüm detayları', NULL, NULL, N'gorseller/resim2.png')

INSERT INTO Haber (Baslik, Ozet, Icerik, Tarih, UyeID,Resim) 
VALUES ('Web Tasarım Programları', 'Haberin Özet Bilgisi', 'Haberin Tüm detayları', NULL, NULL, N'gorseller/resim4.png')

INSERT INTO Haber (Baslik, Ozet, Icerik, Tarih, UyeID,Resim)

VALUES ('İlk Haber', 'Haberin Özet Bilgisi', 'Haberin Tüm detayları', NULL, NULL, N'gorseller/resim1.png')

INSERT INTO Haber (Baslik, Ozet, Icerik, Tarih, UyeID,Resim)

VALUES ('ikinci Haber', 'Haberin Özet Bilgisi', 'Haberin Tüm detayları', NULL, NULL, N'gorseller/resim2.png')

INSERT INTO Haber (Baslik, Ozet, Icerik, Tarih, UyeID,Resim)

VALUES ('Web Tasarım Programları', 'Haberin Özet Bilgisi', 'Haberin Tüm detayları', NULL, NULL, N'gorseller/resim4.png')

Web.Config ile Veritabanı Bağlantısı Cümlesi Yazılması

ASP.NET ile oluşturduğumuz bütün sayfalardan ulaşabilmek için SQL bağlantı cümlesini web.config dosyasına aşağıdaki gibi oluşturuyoruz.

DataDirectory:App_Data klasörünü göstermektedir. Bağlantı cümlesini <configuration> etiketi içine aşağıdaki gibi oluşturuyoruz. Bağlantı adını Conn olarak belirttim. Bu ismi C# ile kodları yazarken kullanacağım.


<connectionStrings>
<add name="Conn" connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True"/>
</connectionStrings>

</connectionStrings>

Sayfa Yüklendiğinde Haberlerin Listelenmesi

Default.aspx sayfasını çift tıklayıp açıyoruz. Bölüm 1’de oluşturduğumuz Content2 nesnesini aşağıdaki gibi değiştiriyoruz.

DataReader ile gelen kayıtları göstermek için bir tane repeater nesnesi oluşturduk. Repeater nesnesindeki her kaydın statik tasarımdaki gibi gösterilmesi için bir tane de ItemTemplate nesnesi oluşturup kodlarımızı aşağıdaki gibi yazdık.

<% asp kodu için c# kodu yazmak için kullanıyoruz.


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="container">
<div class="row"> 
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="urun col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src='<%#Eval("Resim") %>'/>
<h2 class="text-center"><%#Eval("Baslik") %></h2>
<p>Lorem ipsum amet</p>
<button class="btn btn-default center-block">Göster</button>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:Repeater ID="Repeater1" runat="server">

<p>Lorem ipsum amet</p>

<button class="btn btn-default center-block">Göster</button>

</div>

</ItemTemplate>

</asp:Repeater>

</div>

</asp:Content>

Content nesnesini düzenledikten sonra aşağıdaki görselde göründüğü gibi Design butona tıklayıp grafik ekrana geçiyoruz.

Sayfanın master page ile oluşturulmuş olan (content kısmı dışında) her hangi bir alana tıklayıp Page_Load metodunun açılmasını (Default.aspx.cs sayfası) sağlıyoruz.

Page_Load Metodununu düzenleme

İlk olarak veritabanı bağlantısı için bir tane SqlConnection nesnesi oluşturuyoruz.

Oluşturulan SqlConnection nesnesinin bağlantı cümlesini(ConnectionString) Web.config dosyasındaki bağlantı cümlesi olarak düzenliyoruz. ConfigurationManager web.config dosyası için oluşturulmuş bir nesnesdir.

Sql sorgusunu yazmak için bir tane SqlCommand nesnesi oluşturup, bağlantısına SqlConnection nesnesini atıyoruz.

SqlCommand nesnesinin CommandText özelliğine sql sorgusunu yazıyoruz.

SqlCommand ile dönecek verileri tutması için bir tane SqlDataReader nesnesi oluşturuyoruz.

Bağlantı ve sql ayarları yapıldıktan sonra sql bağlantısını açıyoruz.

SqlKommand nesnesini ExecuteReader ile çalıştırıp gelen kayıtları SqlDataReader nesnesine aktarıyoruz.

Verileri aldıktan sonra Repeader nesnesini güncellemek için DataBind yapıp bağlantı cümlesini kapatıyoruz.

Page_Load Metodu


protected void Page_Load(object sender, EventArgs e)
{
SqlConnection baglanti = new SqlConnection();
baglanti.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;
SqlCommand komut = new SqlCommand();
komut.Connection = baglanti;
komut.CommandText = "select * from Haber";
SqlDataReader rd;


baglanti.Open();
rd = komut.ExecuteReader();
Repeater1.DataSource = rd;
Repeater1.DataBind();
baglanti.Close();
}

protected void Page_Load(object sender, EventArgs e)

{

SqlConnection baglanti = new SqlConnection();

baglanti.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;

SqlCommand komut = new SqlCommand();

komut.Connection = baglanti;

komut.CommandText = "select * from Haber";

SqlDataReader rd;

baglanti.Open();

rd = komut.ExecuteReader();

Repeater1.DataSource = rd;

Repeater1.DataBind();

baglanti.Close();

}

using System.Configuration;
using System.Data.SqlClient;

Cümlelerini yazmayı unutmayın

ASP.NET Haber Ekle Sayfası (ASP.NET Insert Into Kullanımı)

Site adı üzerinde sağ tıklayıp Add/ Add New Item ile masterpage sayfasını kullanan bir tane web form ekliyoruz.

HaberEkle.aspx sayfasındaki Content2 nesnesinin içini aşağıdaki gibi düzenliyoruz. Bootstrap form nesnelerini kullanarak kayıt ekleme için düzgün bir tane kayıt ekleme formu oluşturuyoruz.

Burada dikkat edilmesi gereken nokta asp nesnelerinin id bilgisi ve butona tıklandığında Button1_Click adında bir metodun çalışacağı bilgisidir.

Aşağıdaki kodları ekledikten sonra grafik ekrana geçip buton üzerinde çift tıklayarak Button1_Click metodunun oluşturulmasını sağlıyoruz.


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <div class="container">
 <div class="row">
 <div class="col-md-6 col-sm-12">
 <div class="form-group">
 <label for="txtBaslik">Haber Başlığı</label>
 <asp:TextBox CssClass="form-control" ID="txtBaslik" runat="server"></asp:TextBox>
 </div>
 <div class="form-group">
 <label for="txtOzet">Özet</label>
 <asp:TextBox CssClass="form-control" ID="txtOzet" runat="server"></asp:TextBox>
 </div>
 <div class="form-group">
 <label for="İçerik">İçerik</label>
 <asp:TextBox CssClass="form-control" ID="txtIcerik" TextMode="MultiLine" runat="server"></asp:TextBox>
 </div>
 <div class="form-group">
 <label for="uResim">Resim</label>
 <asp:FileUpload CssClass="form-control" ID="uResim" runat="server" />
 </div>
 <asp:Button CssClass="btn btn-default" ID="Button1" runat="server" Text="KAYDET" OnClick="Button1_Click" />
 </div>
 </div>
 </div>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<label for="txtBaslik">Haber Başlığı</label>

<asp:TextBox CssClass="form-control" ID="txtBaslik" runat="server"></asp:TextBox>

</div>

<asp:TextBox CssClass="form-control" ID="txtOzet" runat="server"></asp:TextBox>

</div>

<label for="İçerik">İçerik</label>

<asp:TextBox CssClass="form-control" ID="txtIcerik" TextMode="MultiLine" runat="server"></asp:TextBox>

</div>

<label for="uResim">Resim</label>

<asp:FileUpload CssClass="form-control" ID="uResim" runat="server" />

</div>

<asp:Button CssClass="btn btn-default" ID="Button1" runat="server" Text="KAYDET" OnClick="Button1_Click" />

</div>

</asp:Content>

HaberEke.aspx.cs dosyasında Button1_Click metodu ile kayıtların eklenmesi

Kayıt ekleme sorgumuz için KAYDET butonu üzerinde çift tıklayarak Button1_Click metodunu onclick olayına ekleyip CS sayfasının açtık. Kayıt ekleme sorgusu aşağıdaki gibi olacaktır.

Resim bilgisini kaydetmek için Server.MapPath nesnesini kullanarak resmin kaydedileceği yolu belirttik.

Kayıtları listeleme sorgusunda olduğu gibi Bir tane SqlConnection nesnesi oluşturup bağlantı cümlesini web.config dosyasındaki cümle olarak ayarladık.

SqlCommand nesnesi oluşturup bağlantı cümlesini oluşturduğumuz baglanti nesnesi olarak belirledik.

Sql Sorgusunu yazıp CommandText özelliğine parametre olarak geçtik.

Ayarlar bittikten sonra bağlantıyı açıp, sorguyu yürüttükten sonra bağlantı cümlesini kapattık.


  protected void Button1_Click(object sender, EventArgs e)//kaydet butonu
 {
 String yol = "";
 if (uResim.HasFile)
 {
 uResim.SaveAs(Server.MapPath("~/gorseller/") + uResim.FileName);
 yol = "gorseller/" + uResim.FileName;

 }
 SqlConnection baglanti = new SqlConnection();
 baglanti.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;
 SqlCommand komut = new SqlCommand();
 komut.Connection = baglanti;
 komut.CommandText = "insert into Haber (Baslik,Ozet,Icerik,Resim) values('" + txtBaslik.Text + "','" + txtOzet.Text + "','" + txtIcerik.Text + "','" + yol + "')";
 baglanti.Open();
 komut.ExecuteNonQuery();
 baglanti.Close();
 }

protected void Button1_Click(object sender, EventArgs e)//kaydet butonu

{

String yol = "";

if (uResim.HasFile)

{

uResim.SaveAs(Server.MapPath("~/gorseller/") + uResim.FileName);

yol = "gorseller/" + uResim.FileName;

}

SqlConnection baglanti = new SqlConnection();

baglanti.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;

SqlCommand komut = new SqlCommand();

komut.Connection = baglanti;

komut.CommandText = "insert into Haber (Baslik,Ozet,Icerik,Resim) values('" + txtBaslik.Text + "','" + txtOzet.Text + "','" + txtIcerik.Text + "','" + yol + "')";

baglanti.Open();

komut.ExecuteNonQuery();

baglanti.Close();

}

using System.Configuration;
using System.Data.SqlClient;

Cümlelerini yazmayı unutmayın

Not: dosya ismi ve içerikle ilgili herhangi bir düzeltme işlemi yapılmadığı için dosya eklerken boşluk ve Türkçeye özgü özel sembolleri kullanmayın.

Ekler: Uygulamya ek olarak Dosya yüklendikten sonra dosya yüklenmiştir uyarısı verdirmek için kodlara aşağıdaki gibi düzenlemeler yapılabilir.

HaberEkle.aspx.cs sayfasında public int durum = 0; global bir değişken oluşturup durum= komut.ExecuteNonQuery(); şeklinde sorgu durumu tutulabilir.

durum > 0 olası koşuluna göre HaberEkle.aspx sayfasında uygun bir yere aşağıdaki şekilde sonuç kodları yazılabilir.


<% if (durum>0)
{ %>
<div class="row">
<div class="col-md-12 col-sm-12">
<h3 style="padding:10px;" class="bg-info">Kayıt Eklendi</h3>
</div>
</div>
<% } %>

<% if (durum>0)

{ %>

<h3 style="padding:10px;" class="bg-info">Kayıt Eklendi</h3>

</div>

<% } %>

ASP.NET veritabanı işlemleri uygulamasının Kodları

ASP.NET Responsive Site Yapımı – Bölüm 2 (Select, Insert, Upload)

Veritabanı Oluşturma ve ASP.NET Veritabanı İşlemleri

App_Data klsörü ve veritabanı dosyasını oluşturma

Veritabanı Tablolarını ve alan adlarını oluşturma

Web.Config ile Veritabanı Bağlantısı Cümlesi Yazılması

Sayfa Yüklendiğinde Haberlerin Listelenmesi

ASP.NET Haber Ekle Sayfası (ASP.NET Insert Into Kullanımı)

HaberEke.aspx.cs dosyasında Button1_Click metodu ile kayıtların eklenmesi

İlgili

1 Yorum

Yorum Yap X

Veritabanı Oluşturma ve ASP.NET Veritabanı İşlemleri

App_Data klsörü ve veritabanı dosyasını oluşturma

Veritabanı Tablolarını ve alan adlarını oluşturma

Web.Config ile Veritabanı Bağlantısı Cümlesi Yazılması

Sayfa Yüklendiğinde Haberlerin Listelenmesi

ASP.NET Haber Ekle Sayfası (ASP.NET Insert Into Kullanımı)

HaberEke.aspx.cs dosyasında Button1_Click metodu ile kayıtların eklenmesi

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

Yorum Yap X