Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, eğitmen Flask framework'ü ile Bootstrap kütüphanesinin nasıl kullanılacağını adım adım göstermektedir.
- Video, Flask projelerinde paket yönetimi için pip freeze komutunun kullanımı ile başlıyor ve ardından Flask Bootstrap kütüphanesinin kurulumu gösteriliyor. Eğitmen, base template'e Bootstrap'in nasıl entegre edileceğini, login sayfası için Bootstrap form bileşenlerinin nasıl kullanılacağını ve navigation bar'ın nasıl ekleneceğini detaylı şekilde anlatıyor. Ayrıca URL for fonksiyonunun kullanımı da gösteriliyor. Video, Flask projelerinde Bootstrap ile profesyonel bir arayüz oluşturmak isteyenler için temel bir rehber niteliğindedir.
- 00:01Flask ile Bootstrap'e Giriş
- Bu derste Flask ile Bootstrap'e giriş yapılacak.
- Seasorf token için for hidden tech diyerek hid metodunu çağırarak formu samit ederken gerekli olan bir metot kullanılıyor.
- Terminal üzerinde "pip freeze" komutu ile kurulan extensionlar ve paketler görüntülenebiliyor.
- 00:38Gereksinim Dosyası Oluşturma
- Gerekli extensionlar bir dosyaya yazılacak ve arkadaşlar projeyi kullanmak istediklerinde versiyonlarla uğraşmadan kısa bir komut vererek bütün paketleri indirip projeyi ayağa kaldırabilecekler.
- "pip freeze requirement.txt" dosyasına yazılan dosyada kurulan extensionların listesi ve versiyonları bulunuyor.
- Her pip ile paket yüklendiğinde bunları "pip freeze > requirements" ile dosyasına yazıp, kurmak istediği zaman "pip install requirement" komutuyla kurabilirler.
- 01:43Flask Bootstrap Kurulumu
- Flask Bootstrap için extension "pip install flask bootstrap bootstrap" komutuyla kuruluyor.
- Kurulum sonrası "pip freeze" komutu ile paket listesi yenileniyor ve Bootstrap'in 3.30 versiyonu görünüyor.
- Base template için gerekli düzenlemeler yapılıyor ve table navigation bar yerine daha güzel bir tasarım kullanılacak.
- 02:34Base Template Düzenlemesi
- Block content Bootstrap kendisi için kullanıldığı için yorum satırı olarak bırakılıyor.
- Body ve content anahtar kelimeleri başka bir şey için kullanılacak.
- Hata mesajları yazılan kod Bootstrap'in kullanacağı alana alınıyor ve application'da kullanılacak blok yerleştiriliyor.
- 03:45Bootstrap Miras Alma ve Layout Düzenlemesi
- Base template'in Bootstrap'in base template miras alması için "extend bootstrap base.html" kodu kullanılıyor.
- Block content içerisindeki şeyler bir div içerisine alınıp "container" sınıfı veriliyor, böylece Bootstrap bütün body'yi bunun içerisinde tutuyor.
- Login sayfasında base template body'si alınıyor ve Bootstrap'in sunmuş olduğu "wtf.html" import ediliyor.
- 05:20Form ve Başlık Ekleme
- Form için "col md-5" ve "col-md-offset-4" sınıfları kullanılarak ortada durması sağlanıyor.
- "wtf.quick form" metoduyla root'dan gelen form buraya yerleştiriliyor.
- Başlık olarak "Giriş Yap" ekleniyor ve sayfa yenilendiğinde değişiklikler görülebiliyor.
- 06:16Bootstrap Uygulaması
- "from bootstrap" diyerek bir sınıfın nesnesi oluşturulup application'a veriliyor.
- Sayfa yenilendiğinde "Merhaba Yönetici" yazısı görünüyor ve "Login" başlığı düzgün duruyor.
- Navigation bar eklemek için getbootstrap.com'dan 3.30 sürümü kullanılıyor.
- 07:19Navigation Bar ve Include Kullanımı
- Navigation bar component URL'si kopyalanıp base template'e include ediliyor.
- Base template'e "end block" bloğu oluşturuluyor ve include için aynı işlem yapılıyor.
- Index ve users sayfalarına "app content" bloğu ekleniyor ve kullanıcılar listesi Bootstrap'in etki etmesi için "table table hover" sınıfı veriliyor.
- 08:37Navigation Bar Düzenleme ve URL Kullanımı
- Navigation bar'da sağdaki dropdown kaldırılıyor ve "Logout" olarak değiştiriliyor.
- URL for kullanımı gösteriliyor ve login metodunun ismi "indeks" olarak belirlenmiş.
- Navigation bar'da URL for kullanılarak login metoduna bağlantı oluşturuluyor ve kullanıcılar listesi daha da güzelleştirilebiliyor.