{"id":29861,"date":"2025-09-20T21:30:31","date_gmt":"2025-09-20T18:30:31","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/"},"modified":"2025-09-20T21:30:31","modified_gmt":"2025-09-20T18:30:31","slug":"rails-turbo-ve-stimulus-ile-modal-kontrolu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/","title":{"rendered":"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc"},"content":{"rendered":"<p>Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc<\/p>\n<p>Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek, etkile\u015fimli ve h\u0131zl\u0131 aray\u00fczler olu\u015fturmak art\u0131k olmazsa olmazd\u0131r.  Bu makalede, Ruby on Rails ile birlikte Turbo ve Stimulus kullanarak modal pencerelerin nas\u0131l etkili bir \u015fekilde y\u00f6netilece\u011fini, performans\u0131n\u0131 art\u0131raca\u011f\u0131n\u0131z\u0131 ve kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz.  Rails, Turbo ve Stimulus \u00fc\u00e7l\u00fcs\u00fcn\u00fcn g\u00fcc\u00fcn\u00fc kullanarak, tek bir modal kontrol mekanizmas\u0131yla t\u00fcm uygulama ihtiya\u00e7lar\u0131n\u0131z\u0131 nas\u0131l kar\u015f\u0131layabilece\u011finizi ke\u015ffedece\u011fiz.<\/p>\n<h2>Rails, Turbo ve Stimulus: Temel Kavramlar<\/h2>\n<p>\u00d6ncelikle, bu \u00fc\u00e7 teknolojinin ne oldu\u011funu ve nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak \u00f6nemlidir. Ruby on Rails, web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve pop\u00fcler bir framework&#8217;t\u00fcr.  Turbo, Rails uygulamalar\u0131na ger\u00e7ek zamanl\u0131 g\u00fcncellemeler eklemek i\u00e7in tasarlanm\u0131\u015f bir JavaScript framework&#8217;\u00fcd\u00fcr.  Sayfa yenilemesi olmadan sunucudan veri al\u0131p g\u00f6stermeyi sa\u011flar. Stimulus ise, JavaScript&#8217;i Rails uygulamalar\u0131na daha temiz ve organize bir \u015fekilde entegre etmek i\u00e7in tasarlanm\u0131\u015f bir framework&#8217;t\u00fcr.  \u00d6zetle, Rails uygulaman\u0131z\u0131n arka ucunu, Turbo \u00f6n ucun h\u0131zl\u0131 g\u00fcncellemelerini ve Stimulus ise \u00f6n u\u00e7taki JavaScript&#8217;i organize etmenizi sa\u011flar.  Bu \u00fc\u00e7 teknolojinin birle\u015fimi, performans\u0131 y\u00fcksek ve geli\u015ftirme s\u00fcreci kolay olan uygulamalar olu\u015fturmay\u0131 m\u00fcmk\u00fcn k\u0131lar.<\/p>\n<p>Bu makale boyunca, bu \u00fc\u00e7 teknolojiyi kullanarak modal pencerelerin nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131, y\u00f6netilece\u011fini ve optimize edilece\u011fini g\u00f6rece\u011fiz.  Modal pencereler, kullan\u0131c\u0131 etkile\u015fimini engelleyen ve belirli bir i\u015flemi tamamlamak i\u00e7in kullan\u0131lan ge\u00e7ici pencerelerdir.  \u00d6rne\u011fin, yeni bir kullan\u0131c\u0131 kayd\u0131 olu\u015fturmak, bir \u00fcr\u00fcn\u00fc sepete eklemek veya bir formu doldurmak i\u00e7in modal pencereler kullan\u0131l\u0131r.  Etkili modal kullan\u0131m\u0131, kullan\u0131c\u0131lara daha iyi bir deneyim sunar ve uygulaman\u0131n genel performans\u0131n\u0131 art\u0131r\u0131r.<\/p>\n<h2>Modal Olu\u015fturma: Ad\u0131m Ad\u0131m<\/h2>\n<p>\u015eimdi, Rails, Turbo ve Stimulus kullanarak basit bir modal pencere nas\u0131l olu\u015fturulaca\u011f\u0131na bakal\u0131m.  \u0130lk ad\u0131m, HTML&#8217;de modal&#8217;in yap\u0131s\u0131n\u0131 olu\u015fturmakt\u0131r.  Bu yap\u0131, bir d\u00fc\u011fme (modal&#8217;i a\u00e7mak i\u00e7in) ve modal pencerenin kendisinden olu\u015fur.  A\u015fa\u011f\u0131daki kod blo\u011fu, basit bir HTML modal&#8217;i g\u00f6stermektedir:<\/p>\n<pre><code class=\"language-html\"><button id=\"openModalButton\">Modal&#039;i A\u00e7<\/button>\n\n<div id=\"myModal\" class=\"modal\">\n  <div class=\"modal-content\">\n    <span class=\"close\">\u00d7<\/span>\n    <p>Bu bir modal pencere \u00f6rne\u011fidir.<\/p>\n  <\/div>\n<\/div><\/pre>\n<p><\/code><\/p>\n<p>Sonraki ad\u0131m, Stimulus kullanarak modal'in g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc y\u00f6netmektir.  Stimulus, JavaScript kodunuzu Rails uygulaman\u0131za entegre etmenin temiz ve d\u00fczenli bir yoludur. A\u015fa\u011f\u0131daki Stimulus kontrol\u00f6r\u00fc, <code>openModalButton<\/code>'a t\u0131kland\u0131\u011f\u0131nda modal'i g\u00f6sterir ve <code>close<\/code> butonuna t\u0131kland\u0131\u011f\u0131nda modal'i kapat\u0131r:<\/p>\n<pre><code class=\"language-javascript\">\/\/ app\/javascript\/controllers\/modal_controller.js\nimport { Controller } from \"@hotwired\/stimulus\";\n\nexport default class extends Controller {\n  static targets = [\"modal\", \"closeButton\"];\n\n  connect() {\n    console.log(\"Modal kontrol\u00f6r\u00fc ba\u011fl\u0131!\");\n  }\n\n  openModal() {\n    this.modalTarget.classList.add(\"is-active\");\n  }\n\n  closeModal() {\n    this.modalTarget.classList.remove(\"is-active\");\n  }\n}<\/pre>\n<p><\/code><\/p>\n<p>Bu kodda, <code>openModal()<\/code> ve <code>closeModal()<\/code> fonksiyonlar\u0131 modal'in CSS s\u0131n\u0131flar\u0131n\u0131 de\u011fi\u015ftirerek g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol eder.  <code>is-active<\/code> s\u0131n\u0131f\u0131, CSS'de modal'in g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc belirlemek i\u00e7in kullan\u0131l\u0131r.  Bunu daha sonra CSS dosyan\u0131zda tan\u0131mlars\u0131n\u0131z.  Son olarak, <code>data-controller<\/code> ve <code>data-action<\/code> \u00f6zniteliklerini HTML'inize ekleyerek Stimulus kontrol\u00f6r\u00fcn\u00fc ba\u011flamal\u0131s\u0131n\u0131z:<\/p>\n<pre><code class=\"language-html\"><button data-controller=\"modal\" data-action=\"click->modal#openModal\">Modal&#039;i A\u00e7<\/button>\n\n<div id=\"myModal\" class=\"modal\" data-modal-target=\"modal\" >\n  <div class=\"modal-content\">\n    <span data-modal-target=\"closeButton\" data-action=\"click->modal#closeModal\">\u00d7<\/span>\n    <p>Bu bir modal pencere \u00f6rne\u011fidir.<\/p>\n  <\/div>\n<\/div><\/pre>\n<p><\/code><\/p>\n<p>Bu ad\u0131mlar\u0131 takip ederek, basit ve i\u015flevsel bir modal pencere olu\u015fturmu\u015f olursunuz. Daha geli\u015fmi\u015f \u00f6zellikler i\u00e7in, a\u015fa\u011f\u0131daki b\u00f6l\u00fcmlere g\u00f6z atabilirsiniz.  Unutmay\u0131n ki, bu \u00f6rnekte CSS'in nas\u0131l uyguland\u0131\u011f\u0131 g\u00f6sterilmemi\u015ftir, ancak <code>is-active<\/code> s\u0131n\u0131f\u0131n\u0131 kullanarak modal'in g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol etmek i\u00e7in CSS dosyan\u0131zda gerekli stilleri tan\u0131mlaman\u0131z gerekir.<\/p>\n<h2>Turbo ile Modal'i Geli\u015ftirmek: Ger\u00e7ek Zamanl\u0131 G\u00fcncellemeler<\/h2>\n<p>Basit bir HTML modal'i olu\u015fturduk, \u015fimdi Turbo'nun g\u00fcc\u00fcnden yararlanarak modal'i daha dinamik hale getirelim.  \u00d6rne\u011fin, modal'i a\u00e7t\u0131\u011f\u0131m\u0131zda sunucudan veri \u00e7ekip modal i\u00e7inde g\u00f6sterebiliriz.  Bu, sayfa yenilemesi olmadan ger\u00e7ek zamanl\u0131 g\u00fcncellemeler sunar.  Bu senaryo i\u00e7in, Turbo'nun <code>stream_from<\/code> \u00f6zelli\u011fini kullanaca\u011f\u0131z.<\/p>\n<p>\u00d6rnek olarak, bir kullan\u0131c\u0131 profili sayfas\u0131ndan bir modal a\u00e7\u0131ld\u0131\u011f\u0131n\u0131 ve bu modal'in kullan\u0131c\u0131n\u0131n son 5 yorumunu g\u00f6sterdi\u011fini d\u00fc\u015f\u00fcnelim.  Rails backend'inizde, yorumlar\u0131 JSON format\u0131nda d\u00f6nd\u00fcren bir endpoint olu\u015fturmal\u0131s\u0131n\u0131z.  Ard\u0131ndan, Stimulus kontrol\u00f6r\u00fcn\u00fczde, modal a\u00e7\u0131ld\u0131\u011f\u0131nda bu endpoint'i \u00e7a\u011f\u0131rarak yorumlar\u0131 modal i\u00e7inde g\u00f6sterebilirsiniz.  A\u015fa\u011f\u0131daki kod, bu i\u015flemi g\u00f6stermektedir (k\u0131salt\u0131lm\u0131\u015f ve basitle\u015ftirilmi\u015ftir):<\/p>\n<pre><code class=\"language-javascript\">\/\/ app\/javascript\/controllers\/modal_controller.js\nimport { Controller } from \"@hotwired\/stimulus\";\n\nexport default class extends Controller {\n  \/\/ ... (\u00f6nceki kod) ...\n\n  openModal() {\n    this.modalTarget.classList.add(\"is-active\");\n    fetch(&#039;\/comments&#039;) \/\/Sunucuya istek g\u00f6nderme\n      .then(response => response.json())\n      .then(data => {\n        this.renderComments(data);\n      });\n  }\n\n  renderComments(comments) {\n    const commentList = this.element.querySelector(&#039;.comment-list&#039;);\n    comments.forEach(comment => {\n      const li = document.createElement(&#039;li&#039;);\n      li.textContent = comment.body;\n      commentList.appendChild(li);\n    });\n  }\n}<\/pre>\n<p><\/code><\/p>\n<pre><code class=\"language-html\"><\/pre>\n<p><\/code><\/p>\n<div id=\"myModal\" class=\"modal\" data-modal-target=\"modal\">\n<div class=\"modal-content\">\n    <span data-modal-target=\"closeButton\" data-action=\"click->modal#closeModal\">\u00d7<\/span><\/p>\n<ul class=\"comment-list\"><\/ul>\n<\/p><\/div>\n<\/div>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code>openModal()<\/code> fonksiyonu <code>\/comments<\/code> endpoint'ine bir istek g\u00f6nderir ve gelen JSON verisini <code>renderComments()<\/code> fonksiyonu kullanarak modal'e ekler.  Bu, sayfa yenilemesi olmadan modal'in dinamik olarak g\u00fcncellenmesini sa\u011flar.  Bu yakla\u015f\u0131m, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n<h2>Performans Optimizasyonu: \u0130pu\u00e7lar\u0131 ve P\u00fcf Noktalar\u0131<\/h2>\n<p>Modal pencerelerin performans\u0131n\u0131 optimize etmek i\u00e7in birka\u00e7 ipucu ve p\u00fcf noktas\u0131 vard\u0131r.  \u00d6ncelikle, modal'in i\u00e7eri\u011fini m\u00fcmk\u00fcn oldu\u011funca hafif tutmak \u00f6nemlidir.  Gereksiz JavaScript ve CSS kodlar\u0131ndan ka\u00e7\u0131n\u0131n.  \u0130kincisi, modal'in a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f animasyonlar\u0131n\u0131 optimize edin.  A\u015f\u0131r\u0131 karma\u015f\u0131k animasyonlar, performans\u0131 olumsuz etkileyebilir.  \u00dc\u00e7\u00fcnc\u00fcs\u00fc, modal'in i\u00e7eri\u011fini gerekti\u011finde y\u00fckleyin.  Modal a\u00e7\u0131ld\u0131\u011f\u0131nda t\u00fcm i\u00e7eri\u011fi y\u00fcklemek yerine, yaln\u0131zca gerekli i\u00e7eri\u011fi y\u00fckleyin.  Bu, ba\u015flang\u0131\u00e7 y\u00fcklenme s\u00fcresini azalt\u0131r.<\/p>\n<p>Ayr\u0131ca, modal pencerelerin eri\u015filebilirli\u011fini g\u00f6z \u00f6n\u00fcnde bulundurun.  Modal'i kapatmak i\u00e7in bir \"Kapat\" d\u00fc\u011fmesi sa\u011flay\u0131n ve klavyeyle navigasyonu m\u00fcmk\u00fcn k\u0131l\u0131n.  Ekran okuyucularla uyumlu olmas\u0131n\u0131 sa\u011flay\u0131n.  Bu, herkesin modal'i kolayca kullanabilmesini sa\u011flar.  Daha fazla bilgi i\u00e7in,  W3C'nin web eri\u015filebilirli\u011fi rehberlerini inceleyebilirsiniz.  Son olarak, modal'in performans\u0131n\u0131 d\u00fczenli olarak test edin ve gerekti\u011finde optimize edin.<\/p>\n<h2>\u0130leri D\u00fczey Teknikler: Form \u0130\u015fleme ve Hata Y\u00f6netimi<\/h2>\n<p>Modal pencereler genellikle form g\u00f6nderimi i\u00e7in kullan\u0131l\u0131r.  Bu durumda, Turbo ve Stimulus'u kullanarak form g\u00f6nderimini ve hata y\u00f6netimini kolayla\u015ft\u0131rmak m\u00fcmk\u00fcnd\u00fcr.  \u00d6rne\u011fin, bir form g\u00f6nderildi\u011finde, Turbo, sunucudan gelen yan\u0131t\u0131 otomatik olarak i\u015fleyebilir ve modal'i g\u00fcncelleyebilir.  Hata durumunda, hatalar\u0131 modal i\u00e7inde kullan\u0131c\u0131ya g\u00f6sterebilirsiniz.  Bu, kullan\u0131c\u0131lara daha iyi bir geri bildirim sa\u011flar ve hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<p>Bu i\u015flemi ger\u00e7ekle\u015ftirmek i\u00e7in, form g\u00f6nderiminde Turbo'nun <code>data-turbo-submit<\/code> \u00f6zelli\u011fini kullanabilirsiniz.  Bu \u00f6zellik, form g\u00f6nderildi\u011finde Turbo'nun otomatik olarak sunucuyla ileti\u015fim kurmas\u0131n\u0131 ve yan\u0131t\u0131 i\u015fleyerek modal'i g\u00fcncellemesini sa\u011flar.  Hatalar i\u00e7in ise, sunucudan gelen hata mesajlar\u0131n\u0131 modal'de uygun bir \u015fekilde g\u00f6sterecek bir Stimulus kontrol\u00f6r\u00fc yazabilirsiniz.  Bu \u015fekilde, kullan\u0131c\u0131 dostu ve dinamik bir form deneyimi sa\u011flayabilirsiniz.<\/p>\n<p>\u00d6rne\u011fin, bir kay\u0131t formu modal'i i\u00e7in, sunucudan d\u00f6nen hata mesajlar\u0131n\u0131 ekrana yazd\u0131rabilir ve bu mesajlar\u0131 daha g\u00f6rsel hale getirmek i\u00e7in CSS kullanabilirsiniz.  Bu, kullan\u0131c\u0131lar\u0131n hatalar\u0131 kolayca fark etmelerini ve d\u00fczeltmelerini sa\u011flar.  Daha geli\u015fmi\u015f senaryolarda, hata mesajlar\u0131n\u0131 daha ayr\u0131nt\u0131l\u0131 bir \u015fekilde g\u00f6stermek ve hata d\u00fczeltme \u00f6nerileri sunmak i\u00e7in  JavaScript\u2019in daha ileri tekniklerinden faydalanabilirsiniz.  Daha fazla bilgi i\u00e7in (https:\/\/fatihsoysal.com) inceleyebilirsiniz.<\/p>\n<h2>Ger\u00e7ek D\u00fcnya Senaryolar\u0131: Vaka Analizleri<\/h2>\n<p>\u015eimdi, ger\u00e7ek d\u00fcnya senaryolar\u0131nda Rails, Turbo ve Stimulus ile modal kontrol\u00fcn\u00fcn nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 inceleyelim.  \u0130lk senaryo, bir e-ticaret sitesindeki \u00fcr\u00fcn detay sayfas\u0131nda sepete ekleme i\u015flemidir.  Kullan\u0131c\u0131 bir \u00fcr\u00fcne t\u0131klad\u0131\u011f\u0131nda, \u00fcr\u00fcn\u00fcn ayr\u0131nt\u0131lar\u0131n\u0131 g\u00f6steren bir modal a\u00e7\u0131l\u0131r.  Kullan\u0131c\u0131, modal i\u00e7indeki bir butona t\u0131klayarak \u00fcr\u00fcn\u00fc sepetine ekler.  Turbo, sepetin g\u00fcncellendi\u011fini ger\u00e7ek zamanl\u0131 olarak g\u00f6sterir ve sayfan\u0131n yenilenmesini \u00f6nler.<\/p>\n<p>\u0130kinci senaryo, bir blog sitesindeki yorum ekleme i\u015flemidir.  Kullan\u0131c\u0131 bir blog yaz\u0131s\u0131na yorum eklemek istedi\u011finde, bir yorum formu i\u00e7eren bir modal a\u00e7\u0131l\u0131r.  Kullan\u0131c\u0131 formu doldurup g\u00f6nderdi\u011finde, Turbo, yorumun g\u00f6nderildi\u011fini ve ba\u015far\u0131yla eklendi\u011fini g\u00f6sterir.  Hata durumunda, hata mesajlar\u0131 modal i\u00e7inde g\u00f6sterilir.  \u00dc\u00e7\u00fcnc\u00fc senaryo, bir sosyal medya platformundaki mesajla\u015fma sistemidir.  Kullan\u0131c\u0131 bir kullan\u0131c\u0131ya mesaj g\u00f6ndermek istedi\u011finde, bir mesaj yazma alan\u0131 i\u00e7eren bir modal a\u00e7\u0131l\u0131r.  Kullan\u0131c\u0131 mesaj\u0131 g\u00f6nderdi\u011finde, mesaj ger\u00e7ek zamanl\u0131 olarak di\u011fer kullan\u0131c\u0131ya iletilir ve modal kapan\u0131r.  Bu \u00f6rnekler, Rails, Turbo ve Stimulus'un ger\u00e7ek d\u00fcnya uygulamalar\u0131nda ne kadar etkili oldu\u011funu g\u00f6stermektedir.<\/p>\n<h2>\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n<p><strong># Yeni Ba\u015flayan:<\/strong><\/p>\n<p>* Temel HTML, CSS ve JavaScript bilgisine sahip olun.<br \/>\n* Rails, Turbo ve Stimulus'un temellerini \u00f6\u011frenin.<br \/>\n* Bu makalede verilen basit modal \u00f6rne\u011fini uygulay\u0131n.<\/p>\n<p><strong># Orta Seviye:<\/strong><\/p>\n<p>* Turbo'nun <code>stream_from<\/code> \u00f6zelli\u011fini kullanarak ger\u00e7ek zamanl\u0131 g\u00fcncellemeleri uygulay\u0131n.<br \/>\n* Form g\u00f6nderimi ve hata y\u00f6netimi i\u00e7in Turbo ve Stimulus'u kullan\u0131n.<br \/>\n* Modal'in performans\u0131n\u0131 optimize etmek i\u00e7in teknikler \u00f6\u011frenin.<\/p>\n<p><strong># \u0130leri D\u00fczey:<\/strong><\/p>\n<p>* Karma\u015f\u0131k modal yap\u0131lar\u0131 olu\u015fturun ve y\u00f6netimini sa\u011flay\u0131n.<br \/>\n* \u00d6zel animasyonlar ve etkile\u015fimler ekleyin.<br \/>\n* Eri\u015filebilirlik ve performans testlerini uygulay\u0131n.<br \/>\n* Daha fazla geli\u015fmi\u015f \u00f6zellikler i\u00e7in (https:\/\/fatihsoysal.com) inceleyebilirsiniz.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Rails, Turbo ve Stimulus kullanarak modal pencerelerin nas\u0131l etkili bir \u015fekilde olu\u015fturulaca\u011f\u0131n\u0131 ve y\u00f6netilece\u011fini \u00f6\u011frendik.  Bu \u00fc\u00e7 teknolojinin birle\u015fimi, performans\u0131 y\u00fcksek, geli\u015ftirme s\u00fcreci kolay ve kullan\u0131c\u0131 deneyimi harika web uygulamalar\u0131 olu\u015fturmay\u0131 m\u00fcmk\u00fcn k\u0131lar.  Bu makalede verilen ipu\u00e7lar\u0131 ve teknikler sayesinde, uygulaman\u0131z\u0131n modal pencerelerini optimize edebilir ve kullan\u0131c\u0131lar\u0131n\u0131z\u0131n deneyimini geli\u015ftirebilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<p>* <strong>Stimulus'u kullanmak zorunlu mu?<\/strong> Hay\u0131r, Turbo'yu do\u011frudan kullanarak da modal'leri y\u00f6netebilirsiniz, ancak Stimulus, daha d\u00fczenli ve \u00f6l\u00e7eklenebilir bir kod yap\u0131s\u0131 sa\u011flar.<\/p>\n<p>* <strong>Turbo'nun sayfa yenilemesini tamamen \u00f6nledi\u011fini s\u00f6yleyebilir miyiz?<\/strong>  Hay\u0131r, baz\u0131 durumlarda sayfa yenilemesi gerekebilir, ancak Turbo bu durumlar\u0131 minimize eder.<\/p>\n<p>* <strong>Modal'in performans\u0131n\u0131 nas\u0131l \u00f6l\u00e7ebilirim?<\/strong>  Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 kullanarak sayfa y\u00fcklenme s\u00fcresini ve JavaScript performans\u0131n\u0131 \u00f6l\u00e7ebilirsiniz.<\/p>\n<p>* <strong>Modal pencerelerde g\u00fcvenlik nas\u0131l sa\u011flan\u0131r?<\/strong>  Sunucu taraf\u0131nda do\u011frulama yapmal\u0131 ve kullan\u0131c\u0131 girdilerini do\u011frulamal\u0131s\u0131n\u0131z.  XSS (Cross-Site Scripting) gibi g\u00fcvenlik a\u00e7\u0131klar\u0131ndan ka\u00e7\u0131nmak i\u00e7in gerekli \u00f6nlemleri almal\u0131s\u0131n\u0131z.  Dikkat: G\u00fcvenlik a\u00e7\u0131klar\u0131na kar\u015f\u0131 her zaman tedbirli olun!<\/p>\n<p>* <strong>Daha karma\u015f\u0131k modal ihtiya\u00e7lar\u0131 i\u00e7in ne yapmal\u0131y\u0131m?<\/strong> Daha karma\u015f\u0131k ihtiya\u00e7lar i\u00e7in, JavaScript framework'lerinin daha geli\u015fmi\u015f \u00f6zelliklerini veya \u00f6zel JavaScript kodunu kullanman\u0131z gerekebilir.<\/p>\n<p>Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek, etkile\u015fimli ve h\u0131zl\u0131 aray\u00fczler&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1342],"tags":[],"class_list":{"0":"post-29861","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ai","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc<\/title>\n<meta name=\"description\" content=\"Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek, etkile\u015fimli ve h\u0131zl\u0131 aray\u00fczler olu\u015fturmak art\u0131k olmazsa olmazd\u0131r. Bu makalede, Ruby on Rails ile birlikte Turbo ve Stimulus kullanarak modal pencerelerin nas\u0131l etkili bir \u015fekilde y\u00f6netilece\u011fini, performans\u0131n\u0131 art\u0131raca\u011f\u0131n\u0131z\u0131 ve kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Rails, Turbo ve Stimulus \u00fc\u00e7l\u00fcs\u00fcn\u00fcn g\u00fcc\u00fcn\u00fc kullanarak, tek bir modal kontrol mekanizmas\u0131yla t\u00fcm uygulama ihtiya\u00e7lar\u0131n\u0131z\u0131 nas\u0131l kar\u015f\u0131layabilece\u011finizi ke\u015ffedece\u011fiz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek, etkile\u015fimli ve h\u0131zl\u0131 aray\u00fczler olu\u015fturmak art\u0131k olmazsa olmazd\u0131r. Bu makalede, Ruby on Rails ile birlikte Turbo ve Stimulus kullanarak modal pencerelerin nas\u0131l etkili bir \u015fekilde y\u00f6netilece\u011fini, performans\u0131n\u0131 art\u0131raca\u011f\u0131n\u0131z\u0131 ve kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Rails, Turbo ve Stimulus \u00fc\u00e7l\u00fcs\u00fcn\u00fcn g\u00fcc\u00fcn\u00fc kullanarak, tek bir modal kontrol mekanizmas\u0131yla t\u00fcm uygulama ihtiya\u00e7lar\u0131n\u0131z\u0131 nas\u0131l kar\u015f\u0131layabilece\u011finizi ke\u015ffedece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-20T18:30:31+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc\",\"datePublished\":\"2025-09-20T18:30:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/\"},\"wordCount\":1746,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"AI\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/\",\"name\":\"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-20T18:30:31+00:00\",\"description\":\"Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek, etkile\u015fimli ve h\u0131zl\u0131 aray\u00fczler olu\u015fturmak art\u0131k olmazsa olmazd\u0131r. Bu makalede, Ruby on Rails ile birlikte Turbo ve Stimulus kullanarak modal pencerelerin nas\u0131l etkili bir \u015fekilde y\u00f6netilece\u011fini, performans\u0131n\u0131 art\u0131raca\u011f\u0131n\u0131z\u0131 ve kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Rails, Turbo ve Stimulus \u00fc\u00e7l\u00fcs\u00fcn\u00fcn g\u00fcc\u00fcn\u00fc kullanarak, tek bir modal kontrol mekanizmas\u0131yla t\u00fcm uygulama ihtiya\u00e7lar\u0131n\u0131z\u0131 nas\u0131l kar\u015f\u0131layabilece\u011finizi ke\u015ffedece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc","description":"Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek, etkile\u015fimli ve h\u0131zl\u0131 aray\u00fczler olu\u015fturmak art\u0131k olmazsa olmazd\u0131r. Bu makalede, Ruby on Rails ile birlikte Turbo ve Stimulus kullanarak modal pencerelerin nas\u0131l etkili bir \u015fekilde y\u00f6netilece\u011fini, performans\u0131n\u0131 art\u0131raca\u011f\u0131n\u0131z\u0131 ve kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Rails, Turbo ve Stimulus \u00fc\u00e7l\u00fcs\u00fcn\u00fcn g\u00fcc\u00fcn\u00fc kullanarak, tek bir modal kontrol mekanizmas\u0131yla t\u00fcm uygulama ihtiya\u00e7lar\u0131n\u0131z\u0131 nas\u0131l kar\u015f\u0131layabilece\u011finizi ke\u015ffedece\u011fiz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/","og_locale":"tr_TR","og_type":"article","og_title":"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc","og_description":"Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek, etkile\u015fimli ve h\u0131zl\u0131 aray\u00fczler olu\u015fturmak art\u0131k olmazsa olmazd\u0131r. Bu makalede, Ruby on Rails ile birlikte Turbo ve Stimulus kullanarak modal pencerelerin nas\u0131l etkili bir \u015fekilde y\u00f6netilece\u011fini, performans\u0131n\u0131 art\u0131raca\u011f\u0131n\u0131z\u0131 ve kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Rails, Turbo ve Stimulus \u00fc\u00e7l\u00fcs\u00fcn\u00fcn g\u00fcc\u00fcn\u00fc kullanarak, tek bir modal kontrol mekanizmas\u0131yla t\u00fcm uygulama ihtiya\u00e7lar\u0131n\u0131z\u0131 nas\u0131l kar\u015f\u0131layabilece\u011finizi ke\u015ffedece\u011fiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-20T18:30:31+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc","datePublished":"2025-09-20T18:30:31+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/"},"wordCount":1746,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["AI"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/","url":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/","name":"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-20T18:30:31+00:00","description":"Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek, etkile\u015fimli ve h\u0131zl\u0131 aray\u00fczler olu\u015fturmak art\u0131k olmazsa olmazd\u0131r. Bu makalede, Ruby on Rails ile birlikte Turbo ve Stimulus kullanarak modal pencerelerin nas\u0131l etkili bir \u015fekilde y\u00f6netilece\u011fini, performans\u0131n\u0131 art\u0131raca\u011f\u0131n\u0131z\u0131 ve kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Rails, Turbo ve Stimulus \u00fc\u00e7l\u00fcs\u00fcn\u00fcn g\u00fcc\u00fcn\u00fc kullanarak, tek bir modal kontrol mekanizmas\u0131yla t\u00fcm uygulama ihtiya\u00e7lar\u0131n\u0131z\u0131 nas\u0131l kar\u015f\u0131layabilece\u011finizi ke\u015ffedece\u011fiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/rails-turbo-ve-stimulus-ile-modal-kontrolu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Rails, Turbo ve Stimulus ile Modal Kontrol\u00fc"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/29861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=29861"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/29861\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=29861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=29861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=29861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}