Jquery | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar jquery

Asp.Net Core üzerinde SignalR kullanımı

09 September 2016 Yorum yapılmamış

Sevgili arkadaşım Bora Kaşmer yeni yapacağı bir proje ile ilgili konuşurken Asp.Net Core üzerinde SignalR çalıştırmak istediğini söyledi, ben de bu makaleyi yazdım :)

Bu makalede adım adım ilerleyerek, dotnet CLI ile projeyi oluşturacak, Visual Studio Code ile geliştirecek ve Microsoft Edge tarayıcısı ile test edeceğiz.

Öncelikle, eğer bilgisayarınızda .Net Core yüklü değilse yüklemeniz gerekiyor.

Hemen proje için yeni bir dizin oluşturalım ve Command Prompt açarak dotnet new komutu ile projeyi oluşturalım;

Projeyi oluşturduğumuz dizinde Program.cs ve project.json dosyaları oluşmuş olmalı.

Eğer SignalR ve .Net Core birlikte kullanmak istiyorsak, bu makalenin yazıldığı tarihte yayınlanmamış olan en yeni Nuget paketlerini kullanmalıyız. Bunun için gecelik derlenen paketlere erişebilmemiz lazım. Projeye Nuget.config isimli bir dosya ekleyelim ve içerisine aşağıdaki Nuget kaynaklarını yazalım;

Artık project.json dosyasını açarak, dependencies kısmının içerisine aşağıdaki paketleri yazabiliriz;

Paketleri indirmek için Command Prompt içerisinde dotnet restore komutunu çalıştırmamız lazım;

Şimdi Program.cs dosyasını açalım ve Main() method’unun içerisini aşağıdaki şekilde değiştirelim;

Program.cs dosyasının using kısmına aşağıdaki tanımlamaları da eklememiz gerekiyor;

Satır satır inceleyecek olursak, öncelikle Application Server olarak IIS değil, Kestrel kullanacağımızı tanımlıyoruz, html, js, css, jpg gibi static dosyaların wwwroot dizininde olacağını tanımlıyoruz, uygulamanın açılışı esnasında yapılacak işleri Startup isimli class içerisine yazacağımızı tanımlıyoruz ve son olarak uygulamayı çalıştırmaya başlıyoruz.

Projeyi oluşturduğumuz dizinde Startup.cs isimli bir dosya oluşturalım ve içerisine aşağıdaki kodları yazalım;

Böylece, WebSocket ve SignalR kullanacağımızı .Net Core uygulamamızda tanımlamış olduk.

Bir SignalR Hub‘ı oluşturmak için projeyi oluşturduğumuz dizine ChatHub.cs isimli bir dosya ekleyelim ve içine aşağıdaki kodları yazalım;

Artık proje dizininde wwwroot isimli yeni bir dizin oluşturarak içine index.html dosyasını ekleyebiliriz, index.html dosyasının içine aşağıdaki kodları yazalım;

Basitçe, mesajların sayfada görüntülenebilmesi için bir textarea, mesaj göndermek için bir text ve bir button ekledik. Javascript ile buton’a her tıklandığında SignalR Hub’ına mesajın gönderilmesini, SignalR Hub’ından gelen mesajların da textarea içerisinde gösterilmesini sağladık.

Command Prompt açarak dotnet run komutunu çalıştıralım;

Command Prompt penceresini kapatmadan, iki farklı Microsoft Edge tarayıcı açarak uygulamayı http://localhost:5000/index.html adresinden test edebiliriz;

Projenin kodlarını Github hesabım üzerinden dotnet-core-signalr dizininde bulabilirsiniz.

AçıkAkademi Html, Css ve jQuery Eğitimleri 2015

26 April 2015 1 yorum

AçıkAkademi üzerinde yayınlanan 29 video‘luk Html, Css ve jQuery eğitim seti yayına alındı.

Sevgili arkadaşım Bora Kaşmer ile hazırladığımız eğitim setini sizler de Web sitesi yapmayı öğrenerek programlamaya başlamak istiyorum başlıklı AçıkAkademi sayfasından izleyebilirsiniz. Eğitim konu listesi;

  • Eğitmenlerle Tanışma

HTML5

  • HTML Nedir?
  • WebMatrix’in Kurulumu ve İlk Sayfanın Yayınlanması 1
  • WebMatrix’in Kurulumu ve İlk Sayfanın Yayınlanması 2
  • Başlık Elementleri
  • Metin Elementleri
  • Liste Elementleri
  • Link ve Resim Elementleri 1
  • Link ve Resim Elementleri 2
  • Form Bilgi ve Giriş Elementleri
  • Aşağı Açılır Kutu Seçim Elementleri
  • Seçim Elementleri
  • Video ve Audio Elementleri

CSS3

  • CSS3 ile Stil
  • Stillendirme
  • CSS3 ile Yazı ve Renk Stilleri
  • Kenarlık
  • CSS3 Özellikleri
  • CSS3 ile Animasyon

jQuery

  • JavaScript ve JQuery Nedir?
  • jQuery ile Focus ve Blur
  • jQuery ile Merhaba Dünya
  • Each Function
  • Değişkenler ve Fonksiyonlar
  • OnChange Olayı
  • Hover Function
  • jQuery ile Animasyonlar
  • Klavye olayları
  • Son Söz

AçıkAkademi için bu eğitim setini çekmemizi sağlayan sevgili arkadaşım Ümit Batu‘ya da teşekkür ederim.

jQuery için SlideShow eklentisi : CrossSlide

22 November 2009 3 yorum

jQuery ile uygulama geliştirirken en büyük avantajımız, web’de çok fazla plugin bulabilmemizdir.

Bir arkadaşımın sorusu üzerine, slide-show yaptırabileceği jQuery plugin’i aramaya başladım.

Karşılaştığım birkaç plugin’den en çok hoşuma giden, CrossSlide oldu.

Örnek kullanımını görmek için demo sayfasına bakabilirsiniz.

Sıkıştırılmamış hali 11Kb olan plugin’i şuradan indirebilirsiniz. (Nedense plugin’in minify versiyonu bulunmuyor.)

Minify halini arayan geliştiriciler için, plugin’i http://jscompress.com adresinden minify ettirdim. Minify edilmiş halini (6.46Kb) buradan download edebilirsiniz.

Minify edilmiş halini değil, packed halini download etmek istiyorsanız, aynı siteden packed (4.59Kb) ettirdim. Onu da buradan download edebilirsiniz.

jQuery için web’de bulabileceğiniz diğer slide-show eklentileri;