2 Mayıs 2018 Çarşamba

ASP.Net MVC3 ile pjax kullanımı

ASP.Net MVC3 ile pjax kullanımı için pjax projesi ile çalışmaya başlayacağız. Bu noktada Asp.net ile birlikte kullanıp sizlere bu noktada rehberlik edecek bazı bilgileri paylacağım.. Basit bir asp.net mvc3 projesi desteği pjax’a sahip olmak için yeterli değildir.


ASP.Net MVC3 ile pjax kullanımı


Pjax, sayfanızın bir bölümünü yeniden yüklemek için ajax kullanır. Bu yeni bir şey değil, pjax’ın “p” kısmı pushState’i temsil ediyor. PushState, karma değerlerle uğraşmadan tarayıcınızın geçmişini değiştirmenize izin veren yeni bir Html5 özelliğidir. Yani, pushState size, IE gibi tarayıcılar için geleneksel bir deneyim sunarken, sayfanızın bir bölümünü güncellemek için ajax kullanmanın hızını artırır. Firefox 4+, Safari 5+, Chrome 8+, iOS 4+ ve Android 2.2+’ler pushState’i destekliyor.Sürümüm Ruby örneği kadar seksi olmasa da, basittir ve javascript gibi şeyler için içerik bölümlerini kullanmaya devam etmenizi sağlar. Yalnızca görünümler için düzenimin belirtildiği _ViewStart.cshtml dosyasındaki X-PJAX başlığını kontrol ediyorum. X-PJAX başlığı belirtilirse, görünümler chromsuz bir düzen kullanmalıdır. Aksi takdirde, normal düzeni kullanmalıdırlar.


_ViewStart.cshtml dosyası


 


 if (Request.Headers["X-PJAX"] != null) 
Layout = "~/Views/Shared/_PjaxLayout.cshtml";
else
Layout = "~/Views/Shared/_Layout.cshtml";

}

_PjaxLayout.cshtml düzen dosyam çok basit ve sadece sayfa başlığı ve içerik gövdesi bölümü için bir etiket içeriyor:


<title>@ViewBag.Title</title>

@RenderBody()


Diğer Bilgiler


Sayfada çalışması gereken javascript’iniz varsa, @RenderBody () öğesinden sonra @RenderSection (“Script”, false) kolayca ekleyebilirsiniz. Sadece pjax eklentisinin sayfada sadece bir kapsayıcıyı güncellediğini unutmayın. Dolayısıyla, güncellenmesi gereken birden çok html içerik bölümünüz varsa, bunları tek bir çağrıda güncellenebilecek bir  üst bir sınıf ile çalıştırmanızda fayda bulunur.




ASP.Net MVC3 ile pjax kullanımı

Asp.net ile wordpress kontrollerine api erişim

Asp.net ile wordpress kontrollerine api erişim WordPress’in yeni sürümleri yönetici kontrol paneline dahil olan oldukça kullanışlı bir widget’a sahiptir. Widget, kullanıcının çalıştırdığı tarayıcının sürümünü kullanıcı aracısı aracılığıyla denetler ve güvenebileceği bir sürüm değilse örneğin 6 versiyonu veya yükseltmesi varsa Firefox 3.x bunları uyarır.


Aşağıdaki kod, System.Web.Cache’in varlığına dayalı olarak System.Web.Cache veya bir in-memory sözlüğünde temelde bir sarıcı olan BiaCache adlı bir sınıf kullanır. Kullanımınıza bağlı olarak ufak bir değişiklik yapılması gerekecektir. Kullanıcı aracısına göre sonuçları bir hafta boyunca önbelleğe alıyorum.


WordPress hizmetinden gelen dizeyi serileştirmek için c# Serialization kitaplığını kullanmamız gerecektir.


Asp.net ile wordpress kontrollerine api erişim


var browserInfo = new HappyBrowsingHelper().GetBrowserInfo(Request.UserAgent);


Web hizmetinin sonuçları BrowserInfo adlı bir model nesnesinde saklanır:


public BrowserInfo GetBrowserInfo(string userAgent)


if (string.IsNullOrWhiteSpace(userAgent))

return new BrowserInfo();


var key = “__GetBrowserInfo_” + userAgent;

var item = BiaCache.Get(key);

if (item == null)


string serializedResponse = null;

try


var postData = “useragent=” + userAgent;


var request = WebRequest.Create(“http://api.wordpress.org/core/browse-happy/1.0/”);

request.Method = “POST”;

request.ContentType = “application/x-www-form-urlencoded”;

request.ContentLength = postData.Length;

using (var writeStream = request.GetRequestStream())


var encoding = new UTF8Encoding();

var bytes = encoding.GetBytes(postData);

writeStream.Write(bytes, 0, bytes.Length);


using (var response = request.GetResponse())


using (var responseStream = response.GetResponseStream())


using (var reader = new StreamReader(responseStream, Encoding.UTF8))


serializedResponse = reader.ReadToEnd();



var serializer = new PhpSerializer();

var result = (Hashtable) serializer.Deserialize(serializedResponse);

item = new BrowserInfo


Name = ToStringOrNull(result[“name”]),

Version = ToStringOrNull(result[“version”]),

Url = ToStringOrNull(result[“update_url”]),

ImageUrl = ToStringOrNull(result[“img_src_ssl”]),

CurrentVersion = ToStringOrNull(result[“current_version”]),

HasUpgrade = (bool) result[“upgrade”],

IsInsecure = (bool) result[“insecure”]
;


BiaCache.Add(key, item, (int) TimeSpan.FromDays(7).TotalMinutes, System.Web.Caching.CacheItemPriority.AboveNormal);


catch (Exception ex)


Log.Fatal(“Error getting browser info from wordpress 🙁 nUser agent: ” + userAgent + “nResult: ” + (serializedResponse ?? string.Empty) + “nn” + ex, ex);

item = new BrowserInfo();



return item;


private static string ToStringOrNull(object o)


return o == null ? null : o.ToString();



Asp.net ile wordpress kontrollerine api erişim

TemaForest için tema yapma

TemaForest için tema yapma internetten para kazanmanın bir yoludur. Tabii ki para kazanabilmenin kolay olmadığı bir yöntem. Öncelikle web tasarım adına bazı noktaları bilmeniz gerekiyor. Bunlar öncelikle hangi hazır sistem üzerine tema yapacağınızı kararlaştırmak. Bu makalemde sizlere WordPress üzerine tema yapabilmenin nasıl planlalınacağını anlatacağım. Themeforest yerli ve yabancı bireysel ya da kurumsal web tasarım yapanların, ziyaret ettiği önemli bir web sitesidir. Tema fiyatları ortalama olarak 20 dolar ile 60 dolar arasında değişmektedir. Sizin de yapabileceğiniz web tasarım temalarının satılabilmesi için temanızı hazırlayıp, kendinize hesap açarak bu site üzerinden satılabilmesi sağlayabilirsiniz. Bu da tabii ki size ek gelir sağlayacaktır.


TemaForest için tema yapma Tema Hazırlamak


Web tasarım temasını hazırlamak yerine isterseniz html tema satabilir yada Photoshop formatındaki psd temaları da satabilirsiniz. Psd temaları normal web tasarım temalarından farkı html ye dökülmemiş ve son kullanıcıya ya da Web tasarımcı geliştiricilere üzerinde değişiklik yapabilme hakkını sağlayabildiğiniz şeklidir.


 


Themeforest tema yapabilmek için bilmeniz gerekenler


Öncelikle WordPress alt yapısını iyi bir şekilde öğrenmeniz gerekiyor. WordPress altyapısının dışında JavaScript CSS html jquery gibi statik ve dinamik kodlama dillerini iyi bir şekilde bilmeniz şart. Güzel bir tasarımı TemaForest için tema yapmayı tamamlayıp sonra  senkronizasyon ve renk uyumunun en iyi şekilde gelmesini sağlamalısınız. Tüm hazırlıklar bittikten sonra hazırlamış olduğunuz temaya kullanım kılavuzu yani dökümantasyon hazırlamalısınız. Daha sonra tüm hazırlıklar bitip temamızı test edip temayı tema full HD olarak kendi profilimizi altında yayınlayabiliriz.  Tüm bu işlemleri yapabilmek için bir İngilizce’ye sahip olmalıyız. Sorulan sorulara cevap verebilmeliyiz. Temanın bazı birimlerinde değişiklik yapabilmek ve son kullanıcının istemiş olduğu bazı güncelleme ve hataları düzeltebilmek için İngilizce şart.


Bilmeniz Gerekenler


Html5 programlama dilini mutlaka iyi bir şekilde öğrenmeliyiz. Responsive tasarım yapabilmek için cep telefonu tablet ve tüm cihazlrda hazırlamış olduğunuz temanın en iyi şekilde görünmesini sağlamalıyız.  Bunun dışında css  işlemlerini yapabilmek ve hazırladığımız psd dosyalarını html de çevirmek için önem teşkil ediyor. Ayrıca tüm bu işlemleri JavaScript dili ileentegre çalıştırmalıyız. Dolayısıyla JavaScript dilini iyi şekilde öğrenmeliyiz. Tüm bunları hazırlamış olacağımızı WordPress tabanlı web sitelerini uygulayabilmek için orta derecede php  dilini bilmek yeterli.


 


Tüm bu işlemleri hallettikten sonra geriye  temamız için slider eklemek kalıyor. Dolayısı ile tüm sliderları jquery ile hazırlayabiliriz. Daha kolay bir yöntem olan hazır slider programları ile hazırlamış olduğumuz psd ya da jpg resimlerin  düzenlenmesi kalıyor. Flex slider ile ücretsiz olarak slider hazırlayabilirsiniz.


Responsive menü


Responsive menü oluşturabilmek için daha önce bahsetmiş olduğum bilgilerinize burada detaylı bir şekilde ihtiyacınız olacak. Eğer isterseniz hazır programlarla bu işi halledebilirsiniz bu konuda size tavsiye edebileceğimiz en iyi program wp megamenu  programıdır.


 



TemaForest için tema yapma

1 Mayıs 2018 Salı

MVC 4 Yapılandırması

MVC 4 Yapılandırması için öncelikle yeni bir MVC4 projesi başlatıyoruz. IOC kapsayıcı tercihim için StructureMap‘i kullanmak istedim.  Ancak bu bazı yapı hatalarına sebep olabiliyor. StructureMapDependencyResolver, Microsoft.Practices.ServiceLocation.IServiceLocator’ı kullanımında uyumsuz olan parametre adı: commonServiceLocator olacaktır.


Küçük bir uygulama ile Microsoft Kalıpları ve Uygulama grubundan CommonServiceLocator projesi örnek kullanımı için kullanılabilir. Bu projenin StructureMap için IServiceLocator arabiriminin StructureMap uygulaması bulunuyor. CommonServiceLocator nuget ile visual studio kurulumunu yapabiliriz. Daha sonra IServiceLocator’a  referans olarak kullanabiliriz. Kodun CommonServiceLocator uygulamasından alınmasıyla aşağıdaki örneği kullanabiliriz.


MVC 4 Yapılandırması


using System;

using System.Collections.Generic;

using System.Linq;

using Microsoft.Practices.ServiceLocation;

using StructureMap;


// This is part of MvcKickstart (https://nuget.org/packages/mvckickstart)

namespace MvcKickstart.Infrastructure


/// <summary>

/// Wrapper for IDependencyScope, so that StructureMap plays nicely with built in mvc4 dependency resolution.

/// </summary>

public class StructureMapDependencyScope : ServiceLocatorImplBase


protected readonly IContainer Container;


public StructureMapDependencyScope(IContainer container)


if (container == null)

throw new ArgumentNullException(“container”);


Container = container;


public new object GetService(Type serviceType)


if (serviceType == null)

return null;

try


return serviceType.IsAbstract

catch


return null;


/// <summary>

/// When implemented by inheriting classes, this method will do the actual work of resolving

/// the requested service instance.

/// </summary>

/// <param name=”serviceType”>Type of instance requested.</param>

/// <param name=”key”>Name of registered service you want. May be null.</param>

/// <returns>

/// The requested service instance.

/// </returns>

protected override object DoGetInstance(Type serviceType, string key)


if (string.IsNullOrEmpty(key))


return GetService(serviceType);


return Container.TryGetInstance(serviceType, key);


/// <summary>

/// When implemented by inheriting classes, this method will do the actual work of

/// resolving all the requested service instances.

/// </summary>

/// <param name=”serviceType”>Type of service requested.</param>

/// <returns>

/// Sequence of service instance objects.

/// </returns>

protected override IEnumerable<object> DoGetAllInstances(Type serviceType)


return Container.GetAllInstances(serviceType).Cast<object>();


public IEnumerable<object> GetServices(Type serviceType)


return Container.GetAllInstances(serviceType).Cast<object>();


public void Dispose()


Container.Dispose();



 


Aşağıdaki kodda , mvc’i structuremap’i bağımlılık çözümleyici olarak kullanacak şekilde ayarlayacağız. Webactivator nuget’ini visual studio’ya ekleyin ve aşağıdaki dosyayı app_start klasörünüze atın:


Örnek Kullanım


using System.Web.Mvc;

using MvcKickstart.Infrastructure;

using StructureMap;


[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(YourProject.IocConfig), “PreStart”, Order = -100)]

// This gets installed automatically with the MvcKickstart nuget (https://nuget.org/packages/mvckickstart)

namespace YourProject


public static class IocConfig


public static void PreStart()


// If changes need to be made to IocRegistry, please subclass it and replace the following line

ObjectFactory.Initialize(x => x.AddRegistry(new IocRegistry(typeof(IocConfig).Assembly)));

DependencyResolver.SetResolver(new StructureMapDependencyScope(ObjectFactory.Container));



 


 



MVC 4 Yapılandırması

Asp.Net MVC ile Google Analytics API"sini Kullanma

Her ne kadar wordpress hazır kurulu sistemler çok yaygın olsada, ve ben büyük bir wordpres hayranı olsamda Google Analyticator web sitelerimizin vazgeçilmezlerindendir. Bu vasıta ile web sitelerimizin arama motoru optimizasyon kalitesi ölçümleme ve ilerletme imkanı sağlıyor. WordPress üzerinde analytics istatistiklerinizi özetleyen bir gösterge tablosu widget’da gösterimine olanak sağlıyor. Oldukça kısıtlı bir yönetim panosuna sahip bir proje üzerinde çalışmak bu projeyi hayata geçirmeyi gerektirdi.  Bu sebeple Asp.Net MVC ile Google Analytics API’sini Kullanma istatistikleri görünümü sağlayacağımı düşünüyorum.. Temel fark, üzerinde çalıştığım projenin bir asp.net mvc3 projesiydi.


İnternet üzerinde Asp.net için bazı analitik API örnekleri aradım bulamadım. Bu yüzden umarım bu, gdata apis’i .net’ten kullanmak isteyen birine yardımcı olur. Kodlarımız bittiken sonra görünümünü merak edenler için ;



 


Google Api Veri Doğrulama


Google ile kimlik doğrulaması oldukça basit ve kolaydır. Google, OAuth2 dahil çeşitli kimlik doğrulama yöntemlerini destekler. Ben bu örnekde AuthSub kimlik doğrulama yöntemini kullanıyorum. Temel olarak, kullanıcıyı belirli bir Google URL’sine yönlendirmeniz uygulamanızı yetkilendirir. Bilgiler giriş  uygulamanıza geri döner. Daha sonra bu belirteci bir kerelik bir işlem için kullanabilir bilgiler tekrar tekrar kullanılabilecek uzun bir kalıcı uygulamaya dönüştürebilirsiniz.


Kimlik doğrulamak


 


public ActionResult Auth()


const string scope = “https://www.google.com/analytics/feeds/”;

var next = Url.FullPath(“~/home/authresponse”);

var url = AuthSubUtil.getRequestUrl(next, scope, false, true);

return Redirect(url);


public ActionResult AuthResponse(string token)


var sessionToken = AuthSubUtil.exchangeForSessionToken(token, null);

Settings settings;

using (RavenSession.Advanced.DocumentStore.DisableAggressiveCaching())


settings = RavenSession.Load<Settings>(Settings.DefaultId);


if (settings == null)

settings = new Settings


Id = Settings.DefaultId

;


settings.SessionToken = sessionToken;

RavenSession.Store(settings);


return RedirectToAction(“Config”);


Analytic Sorgulamaları


Web sitemiz kullanıcılardan bilgi akışını sağladığına  göre, kullanıcının erişimi olan herhangi bir siteye ait verileri almak için analizleri sorgulayabilirsiniz. Google sitelerinin kendileriyle ilişkili benzersiz bir kimliği vardır; Google, Table Id değişkenini kullanır. Bu değeri herhangi bir analitik veri sorgusuyla belirtmeniz gerekir. Kullanılabilir siteler listesi almak için hesap özet akışını sorgulamanız gerekir:


 


var authFactory = new GAuthSubRequestFactory(“analytics”, ApplicationName)


Token = settings.SessionToken

;

var analytics = new AnalyticsService(authFactory.ApplicationName) RequestFactory = authFactory ;


foreach (AccountEntry entry in analytics.Query(new AccountQuery()).Entries)


var account = entry.Properties.First(x => x.Name == “ga:accountName”).Value;

if (!model.Sites.ContainsKey(account))

model.Sites.Add(account, new Dictionary<string, string>());

model.Sites[account].Add(entry.ProfileId.Value, entry.Title.Text);


 


Bir web sitesi seçimi yapıldıktan sonra, toplam sayfa görüntülemeleri, sitede geçirilen ortalama süre gibi bilgileri sorgulayabilirsiniz. . Örneğin, aşağıdaki sorgu tüm sayfalarda bir dizi genel istatistik bilgilerini alarak bize döndürür.


İstatistik Alma


var siteUsage = new DataQuery(settings.SiteId, from, to)


Metrics = “ga:visits,ga:pageviews,ga:percentNewVisits,ga:avgTimeOnSite,ga:entranceBounceRate,ga:exitRate,ga:pageviewsPerVisit,ga:avgPageLoadTime”

;

var siteUsageResult = (DataEntry)analytics.Query(siteUsage).Entries.FirstOrDefault();

if (siteUsageResult != null)


foreach (var metric in siteUsageResult.Metrics)


switch (metric.Name)


case “ga:visits”:

model.TotalVisits = metric.IntegerValue;

break;

case “ga:pageviews”:

model.TotalPageViews = metric.IntegerValue;

break;

case “ga:percentNewVisits”:

model.PercentNewVisits = metric.FloatValue;

break;

case “ga:avgTimeOnSite”:

model.AverageTimeOnSite = TimeSpan.FromSeconds(metric.FloatValue);

break;

case “ga:entranceBounceRate”:

model.EntranceBounceRate = metric.FloatValue;

break;

case “ga:exitRate”:

model.PercentExitRate = metric.FloatValue;

break;

case “ga:pageviewsPerVisit”:

model.PageviewsPerVisit = metric.FloatValue;

break;

case “ga:avgPageLoadTime”:

model.AveragePageLoadTime = TimeSpan.FromSeconds(metric.FloatValue);

break;



 


Benzer şekilde, sorgunuza boyutlar ekleyebilirsiniz. Boyutlar, sql grubuna benzer şekilde metrik verilerini gruplandırmanıza olanak tanır. Aşağıdaki sorgu, çoğu sayfa görüntüleme sayısına göre sıralanmış sayfaların bir listesini alacak:


Metrics Kullanım


var topPages = new DataQuery(settings.SiteId, from, to)


Metrics = “ga:pageviews”,

Dimensions = “ga:pagePath,ga:pageTitle”,

Sort = “-ga:pageviews”,

NumberToRetrieve = 20

;

foreach (DataEntry entry in analytics.Query(topPages).Entries)


var value = entry.Metrics.First().IntegerValue;

var url = entry.Dimensions.Single(x => x.Name == “ga:pagePath”).Value.ToLowerInvariant();

var title = entry.Dimensions.Single(x => x.Name == “ga:pageTitle”).Value;


if (!model.PageViews.ContainsKey(url))

model.PageViews.Add(url, 0);

model.PageViews[url] += value;


if (!model.PageTitles.ContainsKey(url))

model.PageTitles.Add(url, title);


 


Sonuç

Asp.Net MVC ile Google Analytics API’sini Kullanma nasıl yapılır öğrenmiş olduk. Web Google Analytics ile istatistik bilgileri özetleyen bir asp.net mvc widget’ı oluşturduk. Daha fazla bilgi ve kaynak için Developer Google’ı ziyaret edebilirsiniz.


 


 


 



Asp.Net MVC ile Google Analytics API"sini Kullanma

PlaceHolder kullanımı

PlaceHolder kullanımı web sayfasında dinamik olarak eklenen web sunucusu kontrollerini depolamak için kullanılan bir asp.net web sunucusu kontrolüdür. Bir PlaceHolder kontrolünü kullanarak bir asp.net web sayfasında dinamik olarak Label, TextBox, Button, RadioButton, Image ve daha birçok web sunucusu kontrolünü ekleyebiliriz. Asp net placeholder kullanımı sunucu denetimi, web sayfasına dinamik olarak eklenen sunucu kontrollerini depolamak için bir konteyner kontrolü görevi görür.


PlaceHolder denetimi görünür bir çıktı sağlamaz. Dinamik olarak eklenen sunucu denetimlerini yalnızca bir PlaceHolder denetiminde çocuk denetimleri olarak görebiliriz. Sunucu denetimlerini PlaceHolder denetimine program aracılığıyla ekleyebilir, ekleyebilir ve kaldırabiliriz. Placeholder kontrolünü istersek veritabanındaki bir tabloya bağlı olarak, tablodaki bilgi yapısan bağlı dinamik olarak oluşturabiliriz. Böylece tabloa yapısındaki değer, istediğimiz değere ulaşmış ise, web sitesi kullanıcısına istediğimiz bir web sunucusu kontrolü göstermemize olanak sağlar.


Bu örnekte c# placeholder kullanımı  kodu, bir web sayfasına dinamik olarak PlaceHolder web sunucusu kontrolünü kullanarak sunucu kontrollerini nasıl ekleyebileceğimizi göstermektedir.


Körük örnek kodunda, Declarative sözdizimi ile bir PlaceHolder sunucu denetimi koyduk. Ayrıca bir Click olayı ile bir Button kontrolü oluşturuyoruz. Birisi düğmeyi tıkladığında, programlı bir görüntü kontrol örneği oluştururuz. Image server kontrolünü dolduktan sonra ControlHadder kontrolüne Controls.Add () gibi ControlCollection.Add () yöntemini kullanarak dinamik olarak ekledik. Add () yöntemi belirtilen kontrol nesnesini koleksiyona ekler.


Burada kontrol koleksiyonu PlaceHolder çocuk kontrolleri koleksiyonudur. Add () yöntemi bir argüman gerektirir. Bu argüman türü System.Web.UI.Control. ordinal dizin dizisinin sonuna yeni kontrol eklenir. Belirli bir dizin konumuna yeni kontrol eklemek için AddAt () yöntemini kullanabiliriz. Son olarak, web sayfası PlaceHolder sunucu kontrolü kullanılarak sayfaya dinamik olarak eklenen görüntüyü görüntüler.


Asp net placeholder kullanımı


%@ Page Language=”C#” %>


<!DOCTYPE html>


<script runat=”server”>

protected void Button1_Click(object sender, EventArgs e)


Image img = new Image();

img.ImageUrl = @”~/Images/sea.jpg”;

img.BorderWidth = 3;

img.BorderColor = System.Drawing.Color.SaddleBrown;

PlaceHolder1.Controls.Add(img);


</script>


<html xmlns=”http://www.w3.org/1999/xhtml”>

<head id=”Head1″ runat=”server”>

<title>asp.net PlaceHolder example: how to use</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<h2 style=”color:Navy”>PlaceHolder Example</h2>

<asp:PlaceHolder

ID=”PlaceHolder1″

runat=”server”

>

</asp:PlaceHolder>

<br />

<asp:Button

ID=”Button1″

runat=”server”

Text=”Add Image Control”

OnClick=”Button1_Click”

Font-Bold=”true”

ForeColor=”SaddleBrown”

/>

</div>

</form>

</body>

</html>



PlaceHolder kullanımı