DATABASES, BOOTSTRAP, & JQUERY IN WEB DESIGN EĞİTİMİ

Bootstrap, jQuery ve veriyle dinamik arayüz kurun

Bootstrap ızgarası ve bileşenleri, jQuery ile DOM ve AJAX, SQL veritabanıyla dinamik sayfalar

Databases, Bootstrap, & jQuery in Web Design Eğitimi, duyarlı arayüzü dinamik veriyle birleştiren klasik web geliştirme zincirini uygulamalı öğretir.

4 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Bootstrap ızgara ve bileşenlerden jQuery etkileşimine, AJAX'tan veritabanı CRUD işlemlerine akış

Databases, Bootstrap, & jQuery in Web Design Eğitimi, duyarlı arayüzü dinamik veriyle buluşturan klasik web geliştirme zincirini uygulamalı öğretir. Katılımcılar Bootstrap ızgara sistemi ve hazır bileşenlerle hızlı arayüz kurar, jQuery ile DOM'u günceller, olayları ve efektleri yönetir. Ardından AJAX ile sunucuya istek atılır, ilişkisel veritabanında SQL ile ekleme, okuma, güncelleme ve silme yapılır. Program, form verisini veritabanına yazan uçtan uca sayfayla tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; Bootstrap ile kurulan arayüz jQuery ile etkileşim kazanır ve bir veritabanına bağlanır.

Seviye

Orta Seviye — Bootstrap ızgarası, jQuery etkileşimi ve veritabanı bağlantısıyla dinamik arayüz kurulumu

Öğrenme Metodu

Her modülde kurulan arayüz ve kod tarayıcıda çalıştırılır; teknikler tek bir dinamik web sayfası üzerinde adım adım uygulanır.

Neden Bu Eğitim?

⚡Hızlı arayüz

Bootstrap ızgara sistemi ve hazır bileşenlerle sıfırdan CSS yazmadan duyarlı ve düzenli arayüzleri kısa sürede kurarsınız.

🖱️Canlı etkileşim

jQuery ile DOM'u seçip günceller, olayları yakalar ve AJAX istekleriyle sayfayı yenilemeden veri alışverişi yaparsınız.

🗄️Veriye bağlanma

İlişkisel veritabanı ve SQL ile form verisini kalıcı olarak saklar, okur ve günceller; arayüzü gerçek veriyle beslersiniz.

Anahtar Konular

bootstrap eğitimijquery eğitimiweb tasarım eğitimiveritabanı eğitimisql eğitimiajax eğitimidinamik web sitesiön yüz geliştirme eğitimibootstrap kursujquery kursu
“Güzel bir arayüz canlı veriyle buluştuğunda web sayfası gerçek bir uygulamaya dönüşür; bu eğitim o köprüyü kurmayı öğretir.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve çalışma ortamı

1
HTML ve CSS

Temel HTML etiketleri ve CSS seçicilere aşinalık beklenir; Bootstrap bu temel üzerine kurulur.

2
JavaScript temeli

Değişken, fonksiyon ve koşul gibi temel JavaScript kavramlarını bilmek jQuery modüllerinde gereklidir.

3
Geliştirme ortamı

Bir kod editörü, güncel tarayıcı ve yerel sunucu ortamı örnekleri çalıştırmak için gereklidir.

4
Temel veri kavramı

Tablo ve satır gibi temel veri kavramlarına aşinalık veritabanı modülünde işleri kolaylaştırır.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Bootstrap'in container ve ızgara sistemini kavrar, kesme noktalarıyla duyarlı sütunlar kurar ve yardımcı sınıflarla hızlı yerleşim yapar.
Modül 1
Bootstrap Kurulumu ve Yapı
  • CDN ve npm ile Bootstrap'in projeye eklenmesi
  • CSS ve JavaScript paketlerinin yüklenme sırası
  • container ve container-fluid farkı
  • Varsayılan tipografi ve sıfırlama davranışı
  • Renk, kenarlık ve gölge yardımcı sınıfları
  • Bootstrap sürümleri arasındaki temel farklar
Modül 2
12 Sütunlu Izgara Sistemi
  • row ve col ile ızgara düzeninin kurulması
  • 12 sütunun oranlı olarak paylaştırılması
  • col-auto ve otomatik genişlik davranışı
  • Sütunların iç içe ızgarayla bölünmesi
  • offset ile sütunların kaydırılması
  • order sınıflarıyla sütun sırasının değişimi
Modül 3
Kesme Noktaları ve Duyarlılık
  • sm, md, lg, xl ve xxl kesme noktaları
  • Mobil öncelikli sınıf yazım mantığı
  • Ekrana göre sütun sayısının değişmesi
  • display sınıflarıyla gizleme ve gösterme
  • Esnek kutu yardımcılarıyla hizalama
  • Gerçek cihazda duyarlı davranışın denetimi
Modül 4
Boşluk ve Yardımcı Sınıflar
  • margin ve padding için m ve p ölçekleri
  • gap ve gutter ile sütun arası boşluk
  • Metin hizalama ve renk yardımcıları
  • flex yardımcılarıyla yön ve hizalama
  • Gölge, yuvarlaklık ve kenarlık sınıfları
  • Yardımcı sınıfların özel CSS'e göre avantajı
Günün hedefiKatılımcı Bootstrap'in hazır bileşenlerini kullanarak gezinme, kart ve pencere kurar, form kontrollerini biçimlendirir ve yerleşik doğrulamayı uygular.
Modül 1
Gezinme ve Navbar
  • navbar yapısı ve marka alanının kurulması
  • Daraltılabilir menü ve hamburger düğmesi
  • nav, nav-item ve nav-link bileşenleri
  • dropdown menülerin navbar'a eklenmesi
  • Sabit ve yapışkan üst menü davranışı
  • Breadcrumb ve sayfalama bileşenleri
Modül 2
Kart ve İçerik Bileşenleri
  • card yapısı, başlık, gövde ve alt bilgi
  • Kart içinde görsel ve düğme yerleşimi
  • card-group ile kartların gruplanması
  • Liste grupları ve rozet bileşenleri
  • Uyarı ve bilgilendirme kutuları
  • accordion ile katlanır içerik panelleri
Modül 3
Pencere ve Etkileşimli Bileşenler
  • modal pencere yapısı ve tetikleyici düğme
  • JavaScript ile modal açma ve kapama
  • tooltip ve popover ipucu bileşenleri
  • carousel ile görsel kaydırma galerisi
  • toast ile geçici bildirim gösterimi
  • offcanvas ile yandan açılan panel
Modül 4
Form Kontrolleri ve Doğrulama
  • form-control ile metin ve alan biçimi
  • Seçim kutusu, onay ve radyo düğmeleri
  • input group ile ekli simge ve metin
  • Form yerleşiminde ızgara kullanımı
  • Yerleşik form doğrulama ve geri bildirim
  • Erişilebilir etiket ve yardım metinleri
Günün hedefiKatılımcı jQuery seçicileriyle öğeleri seçer, DOM'u günceller, olayları bağlar, efektlerle animasyon yapar ve AJAX ile sunucuya istek atar.
Modül 1
jQuery Seçiciler ve Zincirleme
  • jQuery'nin sayfaya eklenmesi ve hazır olayı
  • CSS tabanlı seçicilerle öğe seçimi
  • find, parent ve children ile gezinme
  • filter ve eq ile seçimin daraltılması
  • Metotların zincirlenmesi mantığı
  • jQuery nesnesi ile saf DOM arasındaki fark
Modül 2
DOM Güncelleme ve İçerik
  • text ve html ile içerik okuma ve yazma
  • attr ve prop ile öznitelik yönetimi
  • addClass, removeClass ve toggleClass
  • css ile stil okuma ve değiştirme
  • append, prepend ve remove ile öğe ekleme
  • val ile form alanı değerinin alınması
Modül 3
Olay Yönetimi ve Delegasyon
  • click, submit ve change olaylarının bağlanması
  • on ile olay bağlama ve olay delegasyonu
  • Olay nesnesi ve preventDefault kullanımı
  • Dinamik öğelere olay atama sorunu
  • Klavye ve fare olaylarının yakalanması
  • off ile olay bağlantısının kaldırılması
Modül 4
Efektler ve AJAX
  • show, hide ve toggle ile görünürlük
  • fadeIn, slideDown ve animate efektleri
  • jQuery ajax ile sunucuya istek atma
  • get ve post kısayollarının kullanımı
  • Gelen JSON verisinin arayüze işlenmesi
  • done, fail ve always ile yanıt yönetimi
Günün hedefiKatılımcı ilişkisel veritabanı modelini kavrar, SQL ile CRUD işlemleri yapar, sunucu ucuna istek gönderir ve form verisini veritabanına yazan bir akış kurar.
Modül 1
İlişkisel Veritabanı Temelleri
  • Tablo, satır, sütun ve birincil anahtar
  • Veri tipleri ve alan tasarımı kararları
  • Yabancı anahtar ile tablolar arası ilişki
  • Bir ve çok ilişkilerinin modellenmesi
  • MySQL ve SQLite gibi veritabanı seçenekleri
  • phpMyAdmin benzeri araçlarla tablo yönetimi
Modül 2
SQL ile CRUD İşlemleri
  • SELECT ile veri okuma ve sütun seçimi
  • WHERE, ORDER BY ve LIMIT ile filtreleme
  • INSERT ile tabloya yeni kayıt ekleme
  • UPDATE ile mevcut kaydı güncelleme
  • DELETE ile kayıt silme ve dikkat noktaları
  • JOIN ile ilişkili tabloların birleştirilmesi
Modül 3
Sunucu Ucu ve Güvenlik
  • PHP veya Node ile veritabanına bağlanma
  • Gelen isteğin okunması ve yanıt üretimi
  • Hazır ifadelerle SQL enjeksiyonu önleme
  • Kullanıcı girdisinin doğrulanması
  • JSON biçiminde istemciye yanıt döndürme
  • Hata durumunda uygun durum kodu gönderme
Modül 4
Uçtan Uca Dinamik Sayfa
  • Bootstrap form ile veri giriş arayüzü
  • jQuery AJAX ile verinin sunucuya iletimi
  • Kayıtların tablo olarak listelenmesi
  • Düzenle ve sil düğmeleriyle güncelleme
  • Başarı ve hata mesajlarının gösterimi
  • Uçtan uca akışın birlikte test edilmesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Bootstrap ızgara

Bootstrap container ve 12 sütunlu ızgara sistemiyle kesme noktalarına göre uyarlanan duyarlı sayfa düzenleri kurarsınız.

✅
Hazır bileşenler

Navbar, kart, modal, carousel ve uyarı gibi hazır bileşenleri kullanarak zengin arayüzleri hızla oluşturabilirsiniz.

✅
Form ve doğrulama

Bootstrap form kontrollerini biçimlendirir, ızgarayla düzenler ve yerleşik doğrulamayla kullanıcı geri bildirimi sağlarsınız.

✅
jQuery seçiciler

jQuery seçicileri ve zincirleme ile öğeleri seçer, DOM içeriğini, sınıfları ve stilleri rahatça güncellersiniz.

✅
Olay yönetimi

Olayları bağlar, olay delegasyonuyla dinamik öğeleri yönetir ve kullanıcı etkileşimine göre arayüzü tepkisel kılarsınız.

✅
AJAX ile veri

jQuery AJAX ile sayfayı yenilemeden sunucuya istek atar, gelen JSON verisini işleyip arayüze yansıtırsınız.

✅
SQL ve CRUD

İlişkisel veritabanında SELECT, INSERT, UPDATE, DELETE ve JOIN ile verileri okur, ekler, günceller ve silersiniz.

✅
Dinamik sayfa

Bootstrap arayüzü, jQuery etkileşimi ve veritabanını birleştirerek form verisini saklayan uçtan uca dinamik sayfa kurarsınız.

Kimler İçin Uygundur?

  • Bootstrap ve jQuery ile hızlı arayüz kurmak isteyen web tasarımcıları
  • statik sayfalarını veritabanına bağlamak isteyen ön yüz geliştiriciler
  • klasik web yığınını öğrenmek isteyen öğrenciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Bootstrap ve jQuery ile hızlı arayüz kurmak isteyen web tasarımcıları, statik sayfalarını veritabanına bağlamak isteyen ön yüz geliştiriciler ve klasik web yığınını baştan sona öğrenmek isteyen öğrenciler için uygundur. Temel HTML, CSS ve JavaScript bilgisi faydalıdır.
Bootstrap ve jQuery hâlâ kullanılıyor mu?
Evet, her ikisi de çok sayıda mevcut projede ve kurumsal panelde aktif olarak kullanılır. Bootstrap hızlı duyarlı arayüz için, jQuery ise eski kod tabanlarının bakımı ve hızlı etkileşim için yaygındır. Eğitim bu teknolojilerin güçlü yanlarını ve güncel kullanım senaryolarını gösterir.
Hangi veritabanı kullanılıyor?
Örnekler MySQL veya SQLite gibi ilişkisel bir veritabanı üzerinden işlenir ve SQL komutları her iki sistemde de geçerlidir. Sunucu ucu için PHP veya Node kullanılabilir. İçerik, kurumun mevcut altyapısına ve tercih ettiği veritabanına göre uyarlanabilir.
Eğitimin süresi ve formatı nedir?
Eğitim dört gün sürer ve her gün dört modülden oluşur. Bootstrap ile kurulan arayüz, jQuery ile etkileşim kazanır ve bir veritabanına bağlanarak uçtan uca dinamik bir sayfaya dönüşür. Yüz yüze veya online yapılabilir; içerik kurumun projelerine göre uyarlanır.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen örnek dinamik sayfayı belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Databases, Bootstrap, & jQuery in Web Design Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSHTML - Content Authoring Fundamentals Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML - Content Authoring Fundamentals Eğitimi

3 günTemelOnline / Yüz Yüze / Hibrit

HTML belge yapısı, anlamsal etiketler, bağlantı, görsel, tablo ve form ile sıfırdan web içeriği yazma eğitimi. Erişilebilir ve doğrulanmış HTML temeli.

Detayları Gör →
HTML ve CSSHTML - Content Authoring with New and Advanced Features Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML - Content Authoring with New and Advanced Features Eğitimi

5 günİleriOnline / Yüz Yüze / Hibrit

HTML5'in gelişmiş formları, audio/video, Canvas, SVG, Web Storage, IndexedDB ve cihaz API'leriyle zengin içerik geliştirme eğitimi. İleri ve uygulamalı.

Detayları Gör →
HTML ve CSSHTML Controls, Bindings, & Collections Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML Controls, Bindings, & Collections Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

HTML form kontrolleri, tek ve iki yönlü veri bağlama ve koleksiyonları liste, tablo ve ızgaraya bağlama eğitimi. Tepkisel ve performanslı arayüzler.

Detayları Gör →
HTML ve CSSHTML Helpers for ASP.NET MVC Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML Helpers for ASP.NET MVC Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

ASP.NET MVC ve Core için Razor, strongly-typed HTML Helper'lar, EditorFor/DisplayFor şablonları ve Tag Helper'larla form üretimi eğitimi. Uygulamalı ve model od

Detayları Gör →
HTML ve CSSHTML with JavaScript & CSS: Advanced CSS Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML with JavaScript & CSS: Advanced CSS Eğitimi

5 günİleriOnline / Yüz Yüze / Hibrit

Flexbox, CSS Grid, transform, keyframe animasyon, custom properties ve duyarlı tasarımla ileri CSS eğitimi. Modern, performanslı ve ölçeklenebilir arayüzler.

Detayları Gör →
HTML ve CSSHTML with JavaScript & CSS: Advanced Input Validation Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML with JavaScript & CSS: Advanced Input Validation Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

HTML5 kısıtları, Constraint Validation API, düzenli ifadeler ve erişilebilir hatalarla ileri form doğrulama eğitimi. İstemci ve sunucu güvenliği birlikte.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn