\u201cPeki neden Windows Form?<\/em>\u201d diye d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fcz\u00fc duyar gibiyim. \u201cYani, konsol uygulamas\u0131ndan farkl\u0131 ne olabilir ki?<\/em>\u201d\u2026 Temel olarak yine Katana yard\u0131m\u0131yla OWIN uyumlu bir web sunucu olu\u015fturaca\u011f\u0131z. Bu defa \u00fczerine, yeni \u00f6\u011frendi\u011fimiz statik dosya<\/a> ve ASP.Net Web API\u2019nin sunulmas\u0131<\/a> i\u00e7in gerekli katmanlar\u0131 ekleyece\u011fiz. Bu sayede hem sabit html, css ve imaj gibi dosyalar\u0131m\u0131z\u0131 zahmetsizce yay\u0131nlayabilecek, hem de Web API sayesinde dinamik i\u00e7erik i\u00e7in ihtiyac\u0131m\u0131z olan veri servislerini a\u00e7abilece\u011fiz. Bu kadar i\u015flem ard\u0131nda art\u0131k gidip bir browserdan web uygulaman\u0131z\u0131 a\u00e7\u0131n demenin bir anlam\u0131 yok! Madem ki bir Windows Forms uygulamas\u0131, bir masa\u00fcst\u00fc uygulamas\u0131 geli\u015ftiriyoruz; o zaman ana ekrana kocaman bir Webbrowser kontrol\u00fc ekleyelim!<\/p>\n\n\n\n Uygulamam\u0131za neden mi bir web browser g\u00f6m\u00fcyoruz?!<\/em> \u00c7ok basit; bu sayede kullan\u0131c\u0131n\u0131n uygulamam\u0131zdan ba\u015fka bir yere ayr\u0131lmas\u0131na gerek kalm\u0131yor.. \u015eaka bir yana, as\u0131l neden kullan\u0131c\u0131ya bir web browser a\u00e7t\u0131rmak demek t\u00fcm b\u00fcy\u00fcn\u00fcn kaybolmas\u0131 demek olacak da o y\u00fczden. Web i\u00e7in geli\u015ftirdi\u011fimiz, bir browser \u00fczerinden hizmet veren uygulamam\u0131z asl\u0131nda \u00e7ok fazla de\u011fi\u015fmeden bir masa\u00fcst\u00fc uygulamas\u0131 haline, internet ba\u011flant\u0131s\u0131 olmadan da \u00e7al\u0131\u015fabilir hale gelecekte bu y\u00fczden\u2026 Arka plandaki bu sihir b\u0131rakal\u0131m bize kals\u0131n, b\u0131rak\u0131n son kullan\u0131c\u0131 ayn\u0131 aray\u00fcze sahip; fakat masa\u00fcst\u00fc i\u00e7in geli\u015ftirmi\u015f bir uygulama kulland\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcns\u00fcn…<\/p>\n\n\n\n \u0130\u015fe Visual Studio\u2019yu a\u00e7\u0131p bir Windows Forms projesi olu\u015fturmakla ba\u015flayal\u0131m. Ard\u0131ndan detaylar\u0131n\u0131 daha \u00f6nceki makalelerimde bulabilece\u011finiz gibi OWIN hosting<\/a>, ASP.Net Web API<\/a> ve statik dosya sunumu<\/a> i\u00e7in gerekli NuGet paketlerini kural\u0131m. Art\u0131k haz\u0131r\u0131z\u2026<\/p>\n\n\n\n Program.cs dosyas\u0131n\u0131n i\u00e7eri\u011fini a\u015fa\u011f\u0131daki \u015fekilde de\u011fi\u015ftirerek uygulamam\u0131z a\u00e7\u0131l\u0131r a\u00e7\u0131lmaz sunucumuzu da ba\u015flatal\u0131m;<\/p>\n\n\n\n Her zamanki gibi static dosyalar ve ASP.Net Web API i\u00e7in gerekli ayarlamalar\u0131 Startup s\u0131n\u0131f\u0131 i\u00e7inde yap\u0131yoruz;<\/p>\n\n\n\n Yukar\u0131daki kodla birlikte uygulamam\u0131z\u0131n statik dosyalar\u0131 StatikIcerik<\/strong> klas\u00f6r\u00fcnde arayaca\u011f\u0131n\u0131 s\u00f6ylememe gerek yok san\u0131r\u0131m\u2026 Dolay\u0131s\u0131yla projemizde bu isimde bir klas\u00f6r olu\u015ftural\u0131m.<\/p>\n\n\n\n Bu ad\u0131mlar sonras\u0131nda s\u0131ra geliyor Ana formumuza. Ana form \u00fczerine WebBrowser kontrol\u00fcn\u00fc t\u00fcm formu kaplayacak \u015fekilde atabilirsiniz. Bu noktada; .Net ile birlikte gelen WebBrowser kontrol\u00fc a\u00e7\u0131k\u00e7as\u0131 \u00e7ok yetersiz kald\u0131\u011f\u0131 ve \u00e7ok hata \u00e7\u0131kartt\u0131\u011f\u0131 i\u00e7in do\u011frusu benim tercihim de\u011fil. Ben bunun yerine arkaplanda Chrome motorunu kullanan Awesomium<\/a>\u2019u kullanmay\u0131 tercih ettim. Ticari olmayan ya da k\u00fc\u00e7\u00fck \u00f6l\u00e7ekli firmalar i\u00e7in \u00fccretsiz olan bu bile\u015fen ayn\u0131 zamanda Awesomium.Net sayesinde C# deste\u011fine de sahip\u2026 Tercih sizin\u2026<\/p>\n\n\n\n Ana ekran\u0131m a\u00e7\u0131l\u0131r a\u00e7\u0131lmaz browser kontrol\u00fcn\u00fcn sunucumun ana sayfas\u0131n\u0131 a\u00e7mas\u0131n\u0131 sa\u011flad\u0131m. Tabi bunun yan\u0131nda a\u00e7\u0131lan sayfan\u0131n ba\u015fl\u0131\u011f\u0131 de\u011fi\u015fti\u011finde ayn\u0131 \u015fekilde ana formumum ba\u015fl\u0131\u011f\u0131n\u0131 da g\u00fcncelledim. Benzer \u015fekilde bir favicon varsa bunu ana formun ikonu haline getirdim. Bu sayede masa\u00fcst\u00fc uygulamam\u0131n koduna dokunmadan sundu\u011fum web uygulamas\u0131n\u0131 do\u011fal bir par\u00e7as\u0131ym\u0131\u015f gibi g\u00f6sterebildim\u2026<\/p>\n\n\n\n \u015eimdi s\u0131ra geldi web uygulamas\u0131na. Web uygulamas\u0131 olarak son zamanlar\u0131n giderek y\u00fckselen trendi olan tek sayfa web uygulamas\u0131 (Single-Page Application, SPA) konseptini se\u00e7tim. Uygulamam asl\u0131nda basit bir uygulama olacak; x bir veri kayna\u011f\u0131ndan gelen yap\u0131lacak i\u015fler listesini kullan\u0131c\u0131ya g\u00f6stererek i\u015flem yapmas\u0131 sa\u011flayacak\u2026 Yani bir To-Do uygulamas\u0131\u2026<\/p>\n\n\n\n \u00d6ncelikle ASP.Net Web API \u00fczerinden yap\u0131lacak i\u015flerin \u00e7ekilece\u011fi bir controller haz\u0131rlad\u0131m: YapilacaklarController<\/strong>;<\/p>\n\n\n\n Ana amac\u0131m\u0131z bu konsepti anlamak oldu\u011fu i\u00e7in ger\u00e7ek bir veri kayna\u011f\u0131na ba\u011flan\u0131p veri \u00e7ekmek yerine sabit veri d\u00f6nd\u00fcm; ama ger\u00e7ek bir uygulamada tabi ki veri kayna\u011f\u0131 kullan\u0131lacakt\u0131r. \u00d6rnek olmas\u0131 ad\u0131na sadece 4 yap\u0131lacak i\u015fi listeledim. \u0130\u015fin tamamlan\u0131p tamamlanmad\u0131\u011f\u0131n\u0131 belirtmek ad\u0131na da Tamamlandi<\/strong> alan\u0131n\u0131 ekledim. Daha da ilerlemeden bir taray\u0131c\u0131 a\u00e7arak http:\/\/localhost:8080\/api\/yapilacaklar<\/a> adresine gidecek olursak a\u015fa\u011f\u0131daki JSON \u00e7\u0131kt\u0131s\u0131n\u0131 g\u00f6rebilirsiniz;<\/p>\n\n\n\n \u015eimdi, s\u0131ra geldi bu veriyi kullanaca\u011f\u0131m\u0131z html sayfas\u0131na. \u00d6ncelikle veriyi \u00e7ekebilmek i\u00e7in JQuery kulland\u0131m; \u00e7\u00fcnk\u00fc JQuery ile olduk\u00e7a rahat bir \u015fekilde ajax \u00e7a\u011fr\u0131lar\u0131 yap\u0131p gelen JSON yan\u0131t\u0131n\u0131 javascript nesnelerine d\u00f6n\u00fc\u015ft\u00fcrebiliyoruz. Html sayfas\u0131n\u0131 StatikIcerik klas\u00f6r\u00fc alt\u0131nda a\u00e7t\u0131m, ad\u0131na index.html dedim. Bu sayede varsay\u0131lan d\u00f6k\u00fcman olarak istemciye d\u00f6n\u00fclebilecek. Sonras\u0131nda da her derleme \u00e7\u0131kt\u0131 klas\u00f6r\u00fcne kopyalanmas\u0131n\u0131 sa\u011flad\u0131m. Yap\u0131lacaklar\u0131n listesini \u00e7ekip bunu sayfada g\u00f6sterebilmek ad\u0131na a\u015fa\u011f\u0131daki basit iki javascript fonksiyonunu yazd\u0131m;<\/p>\n\n\n\n Son olarak da sayfaya bir buton ekleyip, t\u0131kland\u0131\u011f\u0131nda YapilacaklariGetir<\/strong> fonksiyonunun \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 sa\u011flad\u0131m. Yani, toparlayacak olursak, a\u015fa\u011f\u0131daki gibi bir web sayfas\u0131 yazd\u0131m;<\/p>\n\n\n\n Ok, s\u0131ra geldi uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rmaya. F5 ile uygulamam\u0131z\u0131 \u00e7al\u0131\u015ft\u0131racak olursak a\u015fa\u011f\u0131daki gibi bir ekran bizi kar\u015f\u0131layacakt\u0131r;<\/p>\n\n\n\n Biliyorum. \u0130\u00e7erik olarak \u00e7ok bo\u015f geldi \ud83d\ude42 Bir de Yap\u0131lacaklar\u0131 Listele<\/strong> butonuna bas\u0131nca bak\u0131n bakal\u0131m;<\/p>\n\n\n\n Taa.. Taaammm\u2026 Bir ajax \u00e7a\u011fr\u0131s\u0131 ile controller \u00fczerinden veri \u00e7ekilerek kullan\u0131c\u0131ya sunuldu.. \u00dcstelik masa\u00fcst\u00fc uygulamas\u0131 deneyimiyle\u2026<\/p>\n\n\n\n Biliyorum; aray\u00fcz size fazla sade <\/em>geldi.. O zaman bira css ile bakal\u0131m bu sadeli\u011fi da\u011f\u0131tabilecekmiyiz;<\/p>\n\n\n\n Asl\u0131na bakarsan\u0131z bu css\u2019ler bana ait de\u011fil ve orjinalini http:\/\/cssdeck.com\/labs\/simple-css-todo-list<\/a> adresinde bulabilirsiniz. Bu css\u2019i uygulad\u0131\u011f\u0131mda sonu\u00e7 nas\u0131l m\u0131 oldu? Kendi g\u00f6zlerinizle g\u00f6r\u00fcn;<\/p>\n\n\n\n \u00c7ok daha g\u00fczel de\u011fil mi! CSS\u2019le biraz daha oynayarak \u00e7ok daha ba\u015far\u0131l\u0131 bir aray\u00fcz deneyimi sunman\u0131z da m\u00fcmk\u00fcn. \u0130\u015fin g\u00fczel taraf\u0131, bir web uygulamas\u0131 sunuyorsan\u0131z zaten ekibinizde bu konuda b\u00fcy\u00fck i\u015fler \u00e7\u0131kartabilecek ki\u015filer mevcuttur\u2026 Web deneyimi olan ekibinizin masa\u00fcst\u00fc uygulamas\u0131 geli\u015ftirmesine gerek yok! S\u0131f\u0131rdan kodlamaya gerek yok!<\/p>\n\n\n\n Daha iyi bir aray\u00fcz tasar\u0131m\u0131 ile web uygulamalar\u0131n\u0131 masa\u00fcst\u00fcne ta\u015f\u0131mak daha ba\u015far\u0131l\u0131 olacakt\u0131r. \u00dcstelik aray\u00fcz css\u2019inde yapaca\u011f\u0131n\u0131z basit oynamalarda farkl\u0131 geni\u015fliklere adapte olan bir uygulama ba\u015far\u0131n\u0131z\u0131 daha da artt\u0131racakt\u0131r.<\/p>\n\n\n\n Konsepti anlatabilmek ad\u0131na payla\u015ft\u0131\u011f\u0131m yukar\u0131daki ekran g\u00f6r\u00fcnt\u00fclerinde yer alan \u015fablon tahmin edebilece\u011finiz gibi bana ait de\u011fil. \u0130nternet \u00fczerinden sat\u0131n ald\u0131\u011f\u0131m ve asl\u0131nda bir web uygulamas\u0131n\u0131n y\u00f6netim paneli aray\u00fcz\u00fc i\u00e7in tasarlanm\u0131\u015f bir \u015fablon. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi do\u011fru bir aray\u00fczle harika bir masa\u00fcst\u00fc uygulamas\u0131na d\u00f6n\u00fc\u015ft\u00fc.<\/p>","protected":false},"excerpt":{"rendered":" Hat\u0131rlarsan\u0131z OWIN ile ilgili ilk makalemde sizlere art\u0131k uygulama sunucusu ve i\u015fletim sistemi ba\u011f\u0131ms\u0131z olarak web uygulamalar\u0131n\u0131z\u0131 sunabilece\u011finizden bahsetmi\u015ftim. \u015eimdiye kadar geldi\u011fimiz noktaya bakacak olursak \u00f6ncelikle Katana \u00fczerinden, ard\u0131ndan IIS\u2019te ve son olarak da kendi geli\u015ftirdi\u011fimiz bir konsol uygulamas\u0131nda web uygulamalar\u0131m\u0131z\u0131 sunabilmi\u015ftik. Bu makalemde konuya farkl\u0131 bir a\u00e7\u0131dan yakla\u015fmak istedim; OWIN\u2019i sadece uygulama sunucusu…<\/p>\nusing System;\nusing System.Windows.Forms;\nusing Microsoft.Owin.Hosting;\n\nnamespace Enterprisecoding.OwinUI {\n static class Program {\n public const string SUNUCU_ADRESI = \"http:\/\/localhost:8080\";\n\n \/\/\/ <summary>\n \/\/\/ The main entry point for the application.\n \/\/\/ <\/summary>\n [STAThread]\n static void Main() {\n using (WebApp.Start<Startup>(SUNUCU_ADRESI)) {\n Application.EnableVisualStyles();\n Application.SetCompatibleTextRenderingDefault(false);\n Application.Run(new MainForm());\n }\n }\n }\n}<\/pre>\n\n\n\nusing System.Web.Http;\nusing Owin;\n\nnamespace Enterprisecoding.OwinUI {\n internal class Startup {\n public void Configuration(IAppBuilder app) {\n var config = new HttpConfiguration();\n\n config.Routes.MapHttpRoute(\n name: \"DefaultApi\",\n routeTemplate: \"api\/{controller}\/{id}\",\n defaults: new { id = RouteParameter.Optional }\n );\n\n app.UseWebApi(config); \n\n app.UseFileServer(options => options.WithRequestPath(\"\/\")\n .WithPhysicalPath(\"StatikIcerik\")\n .WithDirectoryBrowsing());\n\n }\n }\n}<\/pre>\n\n\n\nusing System.Collections.Generic;\nusing System.Web.Http;\n\nnamespace Enterprisecoding.OwinUI.Controllers {\n public class YapilacaklarController : ApiController {\n public IEnumerable<Yapilacak> Get() {\n return new[] {\n new Yapilacak { Id = 1, Content = \"OWIN makaleleri yaz\", Tamamlandi = true },\n new Yapilacak { Id = 2, Content = \"Roslyn scripting \u00f6rne\u011fi kodla\", Tamamlandi = true },\n new Yapilacak { Id = 3, Content = \"Geri bildirimleri yan\u0131tla\", Tamamlandi = false },\n new Yapilacak { Id = 4, Content = \"Tatilin tad\u0131n\u0131 \u00e7\u0131kar\", Tamamlandi = false }\n };\n }\n }\n\n public class Yapilacak {\n public int Id;\n public string Content;\n public bool Tamamlandi;\n }\n}<\/pre>\n\n\n\n[\n {\"Id\":1,\"Content\":\"OWIN makaleleri yaz\",\"Tamamlandi\":true},\n {\"Id\":2,\"Content\":\"Roslyn scripting \u00f6rne\u011fi kodla\",\"Tamamlandi\":true},\n {\"Id\":3,\"Content\":\"Geri bildirimleri yan\u0131tla\",\"Tamamlandi\":false},\n {\"Id\":4,\"Content\":\"Tatilin tad\u0131n\u0131 \u00e7\u0131kar\",\"Tamamlandi\":false}\n]<\/pre>\n\n\n\nfunction YapilacaklariGetir() {\n $.ajax({\n url: 'http:\/\/localhost:8080\/api\/yapilacaklar',\n type: 'GET',\n dataType: 'json',\n success: function (data) {\n YapilacaklariYaz(data);\n },\n error: function (x, y, z) {\n alert(x + '\\n' + y + '\\n' + z);\n }\n });\n}\n\nfunction YapilacaklariYaz(yapilacaklar) {\n var sonuc = \"<ul>\";\n $.each(yapilacaklar, function (index, yapilacak) {\n sonuc += \"<li>\" + yapilacak.Content + \"<\/li>\";\n });\n\n sonuc += \"<\/ul>\";\n $(\"#divSonuc\").html(sonuc);\n\n}<\/pre>\n\n\n\n<!DOCTYPE html>\n\n<html lang="en" xmlns="http:\/\/www.w3.org\/1999\/xhtml">\n<head>\n <meta charset="utf-8" \/>\n <title>Enterprisecoding - OWIN Arayüz Örne\u011fi<\/title>\n <script src="http:\/\/code.jquery.com\/jquery-2.0.0.min.js"><\/script>\n<\/head>\n<body>\n <script type="text\/javascript">\n function YapilacaklariGetir() {\n $.ajax({\n url: 'http:\/\/localhost:8080\/api\/yapilacaklar',\n type: 'GET',\n dataType: 'json',\n success: function (data) {\n YapilacaklariYaz(data);\n },\n error: function (x, y, z) {\n alert(x + '\\n' + y + '\\n' + z);\n }\n });\n }\n\n function YapilacaklariYaz(yapilacaklar) {\n var sonuc = "<ul>";\n $.each(yapilacaklar, function (index, yapilacak) {\n sonuc += "<li>" + yapilacak.Content + "<\/li>";\n });\n\n sonuc += "<\/ul>";\n $("#divSonuc").html(sonuc);\n\n }\n <\/script>\n <button onclick="YapilacaklariGetir();return false;">Yapilacaklari Listele<\/button>\n <div id="divSonuc"><\/div>\n<\/body>\n<\/html><\/pre>\n\n\n\n![\"Yap\u0131lacaklar](\"https:\/\/fatihboy.com\/wp-content\/uploads\/2013\/07\/yapilacaklar-uygulamasi_thumb.png\")
<\/a><\/figure>\n\n\n\n![\"Yap\u0131lacaklar](\"https:\/\/fatihboy.com\/wp-content\/uploads\/2013\/07\/yapilacaklar-uygulamasi-dolu_thumb.png\")
<\/a><\/figure>\n\n\n\n<!DOCTYPE html>\n\n<html lang="en" xmlns="http:\/\/www.w3.org\/1999\/xhtml">\n <head>\n <meta charset="utf-8" \/>\n <title>Enterprisecoding - OWIN Arayüz Örne\u011fi<\/title>\n <script src="http:\/\/code.jquery.com\/jquery-2.0.0.min.js"><\/script>\n <\/head>\n <style>\n \/* http:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\n v2.0 | 20110126\n License: none (public domain)\n *\/\n\nhtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }\n\nbody { line-height: 1 }\n\nol, ul { list-style: none }\n\nblockquote, q { quotes: none }\n\nblockquote:before, blockquote:after, q:before, q:after {\n content: '';\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n\/* * Copyright (c) 2012 Thibaut Courouble\n * http:\/\/www.webinterfacelab.com\n *\n * Licensed under the MIT License:\n * http:\/\/www.opensource.org\/licenses\/mit-license.php\n ================================================== *\/\n\n\/* ========================================================\n Page\n =====================================================\n ================================================== *\/\n\nbody {\n background: #f8f6f6;\n color: #404040;\n font-family: 'Lucida Grande', Verdana, sans-serif;\n font-size: 13px;\n font-weight: normal;\n line-height: 20px;\n}\n\na {\n color: #1e7ad3;\n text-decoration: none;\n}\n\na:hover { text-decoration: underline }\n\n.container {\n margin: 50px auto;\n width: 380px;\n}\n\n\/* ========================================================\n Icons\n =====================================================\n ================================================== *\/\n\n[class^="icon-"], [class*=" icon-"] {\n display: inline-block;\n width: 12px;\n height: 12px;\n vertical-align: -2px;\n margin-right: 2px;\n background-image: url("http:\/\/demo.webinterfacelab.com\/14-to-do-list\/img\/sprite.png");\n background-repeat: no-repeat;\n text-indent: 100%;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.icon-check { background-position: 0 0 }\n\n.icon-add { background-position: -12px 0 }\n\n.icon-delete { background-position: -24px 0 }\n\n.icon-settings { background-position: -36px 0 }\n\n.icon-previous { background-position: -48px 0 }\n\n.icon-next { background-position: -60px 0 }\n\n\/* ========================================================\n Todo List\n =====================================================\n ================================================== *\/\n\n.todo {\n position: relative;\n width: 260px;\n margin: 0 auto;\n padding: 12px 0;\n background: #fff;\n border: 1px solid;\n border-color: #dfdcdc #d9d6d6 #ccc;\n border-radius: 2px;\n -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n.todo:before, .todo:after {\n content: '';\n position: absolute;\n z-index: -1;\n height: 4px;\n background: #fff;\n border: 1px solid #ccc;\n border-radius: 2px;\n}\n\n.todo:after {\n left: 0;\n right: 0;\n bottom: -3px;\n -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n.todo:before {\n left: 2px;\n right: 2px;\n bottom: -5px;\n border-color: #c4c4c4;\n -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.lt-ie9 .todo:before, .lt-ie9 .todo:after {\n height: 1px;\n border-top: 0;\n}\n\n.todo-list { border-top: 1px solid #e6ebed }\n\n.todo-list:before {\n content: '';\n width: 3px;\n z-index: 2;\n border: 1px solid #f2e3df;\n border-width: 0 1px;\n position: absolute;\n top: 0px;\n bottom: 0px;\n left: 35px;\n}\n\n.todo-list li {\n position: relative;\n padding: 7px 15px 7px 50px;\n line-height: 21px;\n font-size: 12px;\n color: #8b8f97;\n border-bottom: 1px solid #e6ebed;\n}\n\ninput[type=checkbox] {\n display: none;\n}\n\ninput[type=checkbox]:checked + .toggle:after{\n opacity: 1;\n}\n\n.todo-list .toggle {\n display: block;\n height: 35px;\n width: 35px;\n position: absolute;\n top: 0px;\n bottom: 0px;\n left: 0px;\n text-indent: 100%;\n overflow: hidden;\n cursor: pointer;\n}\n\n.toggle:after {\n content: '';\n position: absolute;\n position: absolute;\n width: 7px;\n height: 3px;\n background: transparent;\n top: 14px;\n left: 13px;\n border: 2px solid #aaa;\n border-top: none;\n border-right: none;\n\n -webkit-transform: rotate(-45deg);\n -moz-transform: rotate(-45deg);\n -o-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n transform: rotate(-45deg);\n opacity: 0;\n}\n\n.todo-list .toggle:before {\n content: '';\n width: 15px;\n height: 15px;\n background: #faf9f9;\n border: 1px solid #6bb3ca;\n border-radius: 2px;\n position: absolute;\n top: 9px;\n left: 9px;\n -webkit-box-shadow: 0 1px 1px #dfecf4;\n -moz-box-shadow: 0 1px 1px #dfecf4;\n box-shadow: 0 1px 1px #dfecf4;\n}\n\n.todo-list .toggle:hover:before {\n -webkit-box-shadow: 0 0 3px #6bb3ca;\n -moz-box-shadow: 0 0 3px #6bb3ca;\n box-shadow: 0 0 3px #6bb3ca;\n}\n\n.todo-list .done .toggle:before, .todo-list .toggle:active:before {\n border-color: #c0c0c0 #ccc #d8d8d8;\n -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 5px 5px rgba(0, 0, 0, 0.05);\n -moz-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 5px 5px rgba(0, 0, 0, 0.05);\n box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 5px 5px rgba(0, 0, 0, 0.05);\n}\n.todo-controls {\n margin: 0 15px 12px 50px;\n height: 12px;\n}\n\n.todo-controls li { float: left }\n\n.todo-controls li + li { margin-left: 10px }\n\n.todo-controls .right { float: right }\n\n.todo-controls a {\n display: block;\n margin: 0;\n opacity: .6;\n}\n\n.todo-controls a:hover { opacity: 1 }\n\n.todo-pagination {\n margin: 12px 12px 0 50px;\n height: 22px;\n}\n\n.todo-pagination li { float: left }\n\n.todo-pagination .next { float: right }\n\n.todo-pagination .next i { margin: 0 0 0 2px }\n\n.todo-pagination a, .todo-pagination span {\n display: block;\n line-height: 22px;\n font-size: 11px;\n color: #676f7f;\n}\n\n.todo-pagination a {\n padding: 0 8px;\n text-shadow: 0 1px #fff;\n background: #f1f0f0;\n border-radius: 3px;\n}\n\n.todo-pagination a:hover {\n background: #e9e9e9;\n text-decoration: none;\n}\n\n.todo-pagination span {\n padding: 0 4px;\n opacity: .3;\n}\n\n\/* ========================================================\n About\n =====================================================\n ================================================== *\/\n\n.about {\n margin: 80px auto 50px;\n padding: 15px 20px;\n width: 300px;\n text-align: center;\n color: #777;\n text-shadow: 0 1px rgba(255, 255, 255, 0.7);\n background: rgba(0, 0, 0, 0.05);\n border-radius: 3px;\n}\n\n.about a {\n padding: 1px 3px;\n margin: 0 -1px;\n color: #1c74c8;\n text-decoration: none;\n border-radius: 2px;\n}\n\n.about a:hover {\n color: #fff;\n text-shadow: 0 1px #0063A6;\n background: #0090D2;\n}\n\n.links { zoom: 1 }\n\n.links:before, .links:after {\n content: "";\n display: table;\n}\n\n.links:after { clear: both }\n\n.links a {\n padding: 6px 0;\n float: left;\n width: 50%;\n font-size: 14px;\n}\n\n.author {\n margin-top: 15px;\n font-size: 11px;\n}\n <\/style>\n<body>\n <script type="text\/javascript">\n function YapilacaklariGetir() {\n $.ajax({\n url: 'http:\/\/localhost:8080\/api\/yapilacaklar',\n type: 'GET',\n dataType: 'json',\n success: function (data) {\n YapilacaklariYaz(data);\n },\n error: function (x, y, z) {\n alert(x + '\\n' + y + '\\n' + z);\n }\n });\n }\n\n function YapilacaklariYaz(yapilacaklar) {\n var sonuc = "";\n\n $.each(yapilacaklar, function (index, yapilacak) {\n sonuc += yapilacak.Tamamlandi ?\n "<li class='done'><input type='checkbox' id='todo" + yapilacak.Id + "' checked disabled \/>" :\n "<li><input type='checkbox' id='todo" + yapilacak.Id + "'\/>";\n sonuc += "<label class='toggle for='todo" + yapilacak.Id + "'><\/label>" + yapilacak.Content + "<\/li>";\n });\n\n $(".todo-list").html(sonuc);\n\n }\n <\/script>\n <div class="container">\n <section class="todo">\n <ul class="todo-controls">\n <li><a href="javascript:void(0);" class="icon-add">Add<\/a><\/li>\n <li><a href="javascript:void(0);" class="icon-delete">Delete<\/a><\/li>\n <li class="right"><a href="javascript:YapilacaklariGetir();" class="icon-settings">Settings<\/a><\/li>\n <\/ul>\n\n <ul class="todo-list"><\/ul>\n\n <ul class="todo-pagination">\n <li class="previous"><span><i class="icon-previous"><\/i> Geri<\/span><\/li>\n <li class="next"><a href="javascript:void(0);">\u0130leri <i class="icon-next"><\/i><\/a><\/li>\n <\/ul>\n <\/section>\n<\/div>\n<\/body>\n<\/html><\/pre>\n\n\n\n![\"Yap\u0131lacaklar](\"https:\/\/fatihboy.com\/wp-content\/uploads\/2013\/07\/yapilacaklar-uygulama-bos-css_thumb.png\")
<\/a><\/figure>\n\n\n\n![\"Yap\u0131lacaklar](\"https:\/\/fatihboy.com\/wp-content\/uploads\/2013\/07\/yapilacaklar-uygulama-css_thumb.png\")
<\/a><\/figure>\n\n\n\n![\"Yap\u0131lacaklar](\"https:\/\/fatihboy.com\/wp-content\/uploads\/2013\/07\/yapilacaklar-css_thumb.png\")
<\/a><\/figure>\n\n\n\n![\"Y\u00f6netici](\"https:\/\/fatihboy.com\/wp-content\/uploads\/2013\/07\/yonetici-paneli-kucuk_thumb.png\")
<\/a><\/figure>\n\n\n\n![\"Y\u00f6netici](\"https:\/\/fatihboy.com\/wp-content\/uploads\/2013\/07\/yonetici-paneli-orta_thumb.png\")
<\/a><\/figure>\n\n\n\n![\"Y\u00f6netici](\"https:\/\/fatihboy.com\/wp-content\/uploads\/2013\/07\/yonetici-paneli-buyuk_thumb.png\")
<\/a><\/figure>\n\n\n\n