Asp Net Admin Paneli Yapımı

Bu adımımızda var olan bir projeye farklı bir layout eklemeyi öğreneceğiz. Bir başka deyişle var olan bir projeye farklı bir proje ekleyebilecek kabiliyete ulaşacaksınız.

Eğer bu sayfayı google'da araştırma yaparken bulduysanız lütfen önce sayfanın sonundaki videoyu izleyiniz.

MVC 4 Areas Ne İşe Yarar?

Diyelim ki bir e-ticaret sitesi tasarladınız. Sizi çok seven yazılımcı arkadaşlarınız sizden sitenin admin paneli sayfasını tasarlamanızı istiyor. Sitenizin ismi farazî olarak eticaretsitesi.com olsun. Yapacağınız admin paneli ise eticaretsitesi.com/admin/ adresinde olacak. Bunun için projenize bir alt sayfa ekleyebilirsiniz; fakat eticaretsitesi.com sayfasının layout'unu kullanmak zorunda kalırsınız. Bunu ve birtakım programatik karışıklıkları ortadan kaldırmak için MVC 4 Areas tekniğini kullanmalısınız. Bu şekilde eticaretsitesi.com/admin/ sayfasında, yani admin panel'inde farklı bir layout kullanabilirsiniz.

I. Aşama - Area'nın Projeye Eklenmesi

Projenizi açın.

Proje ismine bir kez tıklayın. Proje ismi seçili hâle geldikten sonra sağ tıklayın. Add > Area... yolunu izleyin.

Area'ya bir isim verin. Bu sitenizin alt sayfası niteliğinde olacaktır. Bu yüzden verdiğiniz isme dikkat edin. Her şey tamamsa Add'e tıklayın.

Areas klasörü kısa bir süre sonra bu şekilde eklenmiş olmalı. adminAreaRegistration.cs sınıfı sayfası açık şekilde gelmelidir. Bu sayfayı geçici olarak kapatın.

Nasıl ki yeni bir projeye layout ve ana sayfa ekliyorsak Controller'lar ile aynı şekilde Layout ve Home sayfalarını ekleyin. Burada dikkat etmeniz gereken nokta Home sayfası için layout yolunu Areas içindeki admin layout'u olarak belirtmeniz. Yanlışlıkla ana projenizin layout'unu seçtiyseniz eklediğiniz view'i silin, controller'daki index'e sağ tıklayın ve tekrar ekleyin.

Eğer bir sorun yaşarsanız bu sayfanın sonundaki videoyu izleyin.

II. Aşama - Route Ayarı

Şimdi RouteConfig düzenlemesi yapacağız.

App_Start klasörünün altındaki RouteConfig.cs dosyasını açın. Görselde de gördüğünüz gibi son satırın sonuna virgül koyun ve namespaces: new []{""} kodlarını ekleyin. Yazılımdan pek anlamam; fakat sanırım burada namespace'ler için yeni bir liste tanımlaması yapıyoruz.

Bu arada MVC 5'in en büyük yeniliğinin RouteConfig alanında olacağına dair sağlam duyumlar alıyorum. Bunun dışında MVC 4 bildikten sonra çok rahat MVC 5 projesi geliştirebilirsiniz diye tahmin ediyorum. Lafı uzatmadan devam edelim...

Projenizdeki ana Controllers klasöründen HomeController'ı açın ve namespace adını controller'ı ile birlikte kopyalayın. Yanlışlıkla Areas'ın içindeki HomeController'dan kopyalama yapmadığınıza emin olun.

Aslında bu işlemi bu kısmı açmadan sadece proje ismine bakarak da yapabilirdik. Yine de garanti olsun.

Biraz önce tanımladığınız namespaces alanına tırnak işaretleri içine kopyaladığınız kısmı yapıştırın.

III. Aşama - AreaRegistration Ayarı

Şimdi Map Route ayarı yapacağız.

Areas > admin klasörünün en altında bulunan adminAreaRegistration.cs dosyasını açın.

Bir üst satırdaki formata uygun olarak action'dan önce controller = "Home" kodlarını ekleyin. Virgül koymayı unutmayın. Bu şekilde admin panelinin ana sayfasını kendi Home controller'ından okunmasını sağladık. Ana projenin Home controller'ından değil.

Her şey tamamsa CTRL + Shift + B kısayolu ile projenizi derleyin.

IV. Aşama - Web Optimization Paketinin Kurulması

Projenizi çalıştırın.

Ana sayfanız düzgün bir şekilde açılacaktır. Bunu RouteConfig ile düzeltmiştik. Fakat admin sayfasına baktığımızda Web Optimization hatasını alıyoruz.

Projenizi durdurun.

Menüden TOOLS > Library Package Manager > Package Manager Console yolunu izleyin.

Konsol alanına Install-Package Microsoft.AspNet.Web.Optimization komutunu yazın. Yazmayın, bunu aynen kopyalayın ve yapıştırın. =)

Tamamsa Enter'a basın ve kurulumun bitmesini bekleyin.

Bütün ıvır zıvırların başarılı bir şekilde eklendiğine dair bildirimler alacaksınız. Biraz bekledikten sonra her şey tamamsa tekrar projenizi derleyin ve çalıştırın.

Tebrikler! Areas ile projenize yeni bir layout eklemeyi başardınız. Bu şekilde artık üçüncü dereceden alt sayfa eklemeyi de öğrenmiş oldunuz.

Dilerseniz admin klasörüne sağ tıklayarak Content, Scripts gibi yeni klasörler ekleyebilir ve nasıl ki yeni bir web sitesi yapıyorsanız alt alan adınızda aynı şekilde farklı bir site oluşturabilirsiniz.

Ekler

Bu adımda biten çalışmayı ise aşağıdaki bağlantıdan indirebilirsiniz.

▼ Leaf Solutions (Adım 15) VS Projesi İndir ▼

Bu adımın videosunu 1080p HD kalitesinde izleyebilirsiniz.

On beşinci adımı tamamladınız. Bir sonraki adımda Visual Studio İpuçları ve Kısayolları konusuna değineceğiz.

Diğer adıma geçmek için tıklayınız. >>>

Üst Edit: Uygulamaları yüklemek için youtube daki video eğitimimi izleyebilirsiniz. 
https://www.youtube.com/watch?v=gn9lekIceyc&list=PLzJP4sAivSii2VDD49eArBnR-D-04MR2F 
https://mesutd.com/aspnet-mvc-mysql-egitimi

Bu uygulama ile ASP.NET MVC kullanarak MySQL veri tabanına bağlanarak örnek bir web site nasıl olur onu göreceksiniz.

Web sayfası ana sayfa, hakkımızda, ürünler, mağaza bilgileri, iletişim formu sayfalarından oluşuyor. Bu sayfaların admin panelinde yönetimi ayrıca kullanıcı yönetimi mevcuttur. Yönetim panelinde /admin ile ulaşılabilinir.

Veri tabanının adı kahve.

Uygulamayı Visual Studio 2019 ile oluşturdum.

Kullandığım MySQL sürümü 5.7.23 (MySQL için Wamp server kurulu olması yeterli)

MySQL Connector Net 6.9.12 sürümünü kullanarak veri tabanına bağlandım

MySQL for Visual Studio 1.2.8 kurulu olması da  Visual Studio ile MySQL bağlantısı için gerekli.

Veri tabanı için ayarlarında web.config sayfasından aşağıdaki satırları güncelleyerek değişiklik yapabilirsiniz.

Paylaştığım web sitenin bazı özellikleri:

• ASP.NET MVC ile MySQL veritabanına bağlanma
• Bootstrap 4
• İletişim formu doğrulamalı (validation)
• Kullanıcı girişi (login), beni hatırla
• Session (Oturum)
• Cookie (Çerez)
• Url Rewrite
• Ürünleri sıralama
• Ürünleri pasif yapma
• Aktif link yapısı
• Ajax ile aktif/pasif (switch button) yapısı
• Veri listeleme
• Veri ekleme
• Veri silme
• Veri düzenleme
• Ürünlerde arama
• Kullanıcı yönetimi
• MD5 kullanıcı bilgisi şifreleme
• Hata sayfası
• File upload
• Datatables
• Sweet alert
• CKeditor 5 ile veri girişi

admin paneli giriş bilgileri: 
Kullanıcı adı: admin
Parola: 1234

Umarım sizin için faydalı bir paylaşım olmuştur.

Örnek web sitesi dosyalarını ve veri tabanını indirmek için: ornek_ASP_NET_MVC_Site.zip

• Binbaşı

  

  1366 Mesaj

  
  Konu Sahibi

  Arkadaşlar merhaba. İş yeri eğitimi yaptığım şirket için ASP.NET ile bir web sitesi hazırlıyorum. Çalıştığım şirket, yapıyor olduğum web sitesinin dinamik olmasını istiyor. Yani yönetim panelinden, her şeyin olmasa da büyük bir kısmın değiştirilebilir olmasını istiyor. Yönetim panelinde, web sitesinin header kısmında bulunan menülerin eklenmesini, güncellenmesini ve silinmesini sağladım. Şimdi yapmak istediğim şey web sitesindeki sayfaların dinamikliğini sağlamak. Bunun için nasıl bir yol izlemeliyim? Menü tablosu ile sayfalar tablosu arasında bir ilişki kurmam gerekiyor mu yoksa farklı bir yol izlenerek de yapılabilir mi? Bunu hallettikten sonra da sayfanın düzenlenebilir olmasını sağlamak istiyorum. Bunu nasıl yapabilirim? < Bu mesaj bu kişi tarafından değiştirildi Shadouspan -- 3 Kasım 2015; 9:55:45 >

  
  
  
  

• Yüzbaşı

  

  663 Mesaj

  
  

  dinamik sayfalar kısmını biraz daha açabilirsen buradan sana fikir çıkar. Ben sana nasıl bir tavsiye de bulunabileceğimi açıkçası kestiremedim. yapmak istediğin şey atıyorum bir ürünler sayfası yapacaksın panelden ürünler girilecek. sonra tek ürün sayfasında tüm ürünleri gösterilebilecek bu şekilde bir şey mi.

• Binbaşı

  

  1366 Mesaj

  
• Süresiz olarak uzaklaştırıldı.
  

  Yani adam iletişim butonuna basınca iletisim.aspx sayfasına gidecek. bunu dahi bilmiyorsan senin ki hiç bişey bilmeden sorarak öğrenme durumu oluyor bence sen ya egitim al yada egitim seti ile başla

• Binbaşı

  

  1366 Mesaj

  
• Süresiz olarak uzaklaştırıldı.
  

  quote: Orijinalden alıntı: Shadouspan quote: Orijinalden alıntı: Parola_18 Yani adam iletişim butonuna basınca iletisim.aspx sayfasına gidecek. bunu dahi bilmiyorsan senin ki hiç bişey bilmeden sorarak öğrenme durumu oluyor bence sen ya egitim al yada egitim seti ile başla Sen çok yanlış gelmişsin hocam. Benim anlatmak istediğim şey ile senin anladığın şeyler farklı. Ben siteyi dinamik olarak tasarlamak istiyorum dolayısıyla menü kısmını öyle direk <ul></ul><li></li> etiketlerinin arasına yazmak yerine veritabanından çekliyorum. Veritabanından çektiğim menülerin kullanıcının eklediği sayfa ile ilişkili olması gerekiyor ki bende o ilişkiyi nasıl kurabilirim diye soruyorum. Buradaki sorunum sadece ilişki ile bitmiyor. Kullanıcının o sayfası düzenlemesi vs. de var. Lütfen dikkatli oku yazdığım şeyleri. kullanıcı nasıl sayfa ekliyor anlamadım ? kişiye göre sayfa göstermek istiyorsan veritabanına ihtiyaç yok boş işler biraz düşünsen sorunu çözersin static kullanıcı sayfası yapıp code tarafında login olanlar olmayanlar a göre yönlendirme veya anasayfada kullanıcı paneli gibi butonları açıp kapatırsın

  
  
  
  
  
• Binbaşı

  

  1366 Mesaj

  
• Süresiz olarak uzaklaştırıldı.
  

  quote: Orijinalden alıntı: Shadouspan quote: Orijinalden alıntı: Parola_18 quote: Orijinalden alıntı: Shadouspan quote: Orijinalden alıntı: Parola_18 Yani adam iletişim butonuna basınca iletisim.aspx sayfasına gidecek. bunu dahi bilmiyorsan senin ki hiç bişey bilmeden sorarak öğrenme durumu oluyor bence sen ya egitim al yada egitim seti ile başla Sen çok yanlış gelmişsin hocam. Benim anlatmak istediğim şey ile senin anladığın şeyler farklı. Ben siteyi dinamik olarak tasarlamak istiyorum dolayısıyla menü kısmını öyle direk <ul></ul><li></li> etiketlerinin arasına yazmak yerine veritabanından çekliyorum. Veritabanından çektiğim menülerin kullanıcının eklediği sayfa ile ilişkili olması gerekiyor ki bende o ilişkiyi nasıl kurabilirim diye soruyorum. Buradaki sorunum sadece ilişki ile bitmiyor. Kullanıcının o sayfası düzenlemesi vs. de var. Lütfen dikkatli oku yazdığım şeyleri. kullanıcı nasıl sayfa ekliyor anlamadım ? kişiye göre sayfa göstermek istiyorsan veritabanına ihtiyaç yok boş işler biraz düşünsen sorunu çözersin static kullanıcı sayfası yapıp code tarafında login olanlar olmayanlar a göre yönlendirme veya anasayfada kullanıcı paneli gibi butonları açıp kapatırsın Yok hocam biz anlaşamayız seninle o yüzden fazla uzatmak istemiyorum. Sen olayı anlamadın ben yönetim paneline giren kişiden yani kullanıcıdan bahsediyorum. Staj yapıyor olduğum şirkete bir web sitesi yapıyorum. Şirketin yöneticisi bana diyor ki; bana öyle bir site yap ki senin stajın bittiği zaman sana ihtiyacım olmadan o siteyi kullanabileyim. Yani diyor ki yeni bir sayfa ekleyebileyim, yeni bir menü ekleyebileyim, sayfalar üzerinde oynama yapabileyim, değişiklik yapabileyim. Anlatabildim mi? Sen çok yanlış anlıyorsun benim söylediğimi ki muhtemelen bu yazdığımı da yanlış anlayacaksın o yüzden bu son cevabımdı. İyi günler. kullanıcı sayfa ekleyemez eklenen sayfayı kafasına göre düzenleyemez sen veri tabanındaki verileri anca düzenletebilirsin onun dışındaki arayışların olmayacak şeyler

  
  
  
  
  
• Binbaşı

  

  1366 Mesaj

  
• Süresiz olarak uzaklaştırıldı.
• Yüzbaşı

  

  663 Mesaj

  
  

  öncelikle 2. açıklama daha iyi olmuş. çıkardığım sonuca gelirsem. örnek: kullanıcı panel üzerinde diyor ki ben özgeçmiş diye bir sayfa eklemek istiyorum. 1- menüyü oluşturdu. 2- sayfa oluşturulacak !(senin sorun bu kısım da başlıyor.) bu duruma göre sayfayı Visual studio da add new item webform diyip ozgecmis.aspx şekilde oluşturmak istemediğini anladım. eğer doğru anladıysam bu sayfa oluşturma işlemini çözersin. ama sayfanın tasarımı noktasına gelindiğinde. kullanıcı üste bir başlık gelsin, ortada fotoğrafım olsun. aşağıda diğer bilgileri doldurayım derse. bunu yaptırman mümkün olmakla birlikte kolay olmayacaktır. basit mantıklı bir designer ekranın gibi birşey olması lazım. içerisindede temel html elemanları. button text image vb. olacak. ve buları seçtiğinde paneli kullanandan belirli ölçülerde almak zorundasın. bu verilerin gelmesi neticesinde. sen arkada create ettiğin sayfanın. Html Görünümünü kendin oluşturmaya başlayacaksın. örnek olarak. bir fotoğraf eklediğini düşün. Sayfan içerisine <div style="widt:400px; Height:300px; float:top;"> <img src="pic_mountain.jpg" alt="Mountain View" style="width:300px;height:400px;"> </div> gibi bir divi oluşturduğun sayfaya eklemelisin. tabiki style içerisindeki bilgileri de kullanıcıdan alarak. bu şekilde kullanıcıya bir sayfa oluşturta bilirsin. inş. bir faydası olur.

  
  
  
  
  
• Binbaşı

  

  1366 Mesaj

  
• Yüzbaşı

  

  663 Mesaj

  
  

  quote: Orijinalden alıntı: Shadouspan Çok sağolun hocam tam da yapmak istediğim şeyi anlatmışsınız. Teşekkür ediyorum, deneyeceğim bakalım bir şeyler. kolay gelsin o zmn. < Bu mesaj bu kişi tarafından değiştirildi Hakan5434 -- 3 Kasım 2015; 17:32:33 >

yeni mesaja git
Yeni mesajları sizin için sürekli kontrol ediyoruz, bir mesaj yazılırsa otomatik yükleyeceğiz.Bir Daha Gösterme

Benzer içerikler