20 Nisan 2014 Pazar

Django Bootstrap

Merhaba Arkadaşlar,

Bu hafta sizlere Django Bootstrap hakkında bilgi vermek istiyorum.
Bootstrap için; daha hızlı ve daha kolay kullanımıyla, şık, sezgisel ve güçlü bir mobil web geliştirme çatısı diyebiliriz. Bildiğiniz gibi web tasarımı zevkli bir iş olmasına karşın çok vakit alan bir iştir. Ayrıca vaktin yeterli olmadığı zamanlarda tam bir işkence haline dönüştüğü de olabiliyor. İşte tam burada Bootstrap devreye giriyor. "Kullanımı kolay, sonucu güzel olsun." diyen biz yazılımcılara hitap eden güzel bir kütüphane.

Şimdi Bootstrap'i kuralım. Tabi bundan önce bilgisayarımızda pip'ın kurulu olması gerekiyor.



pip : Python paketlerini yüklemek ve yönetmek için bir araçtır.

Ben burada sadece kurulumundan bahsedeceğim. İsteyen arkadaşlar daha fazla bilgiye aşağıdaki linklerden ulaşabilirler:

https://pypi.python.org/pypi/pip
http://www.pip-installer.org/en/latest/index.html

pip Kurulumu

Öncelikle linkte bulunan dosyayı masaüstüne kaydedelim: get-pip.py 
Ardından komut istemcisini dosyayı kaydettiğimiz konuma getirerek aşağıdaki işlemi isteyelim:

C:\Users\...\Desktop>python get-pip.py

















Ben bu aracı daha önceden kurduğum için bu ekranı aldım, sizde de buna yakın bir ekran olacaktır. Şimdi kurulup kurulmadığını kontrol edelim ama bundan önce python'u komut satırında uzun uzun konumunu yazıp çağırmak yerine "python" olarak çağırdığımız gibi pip'ı da kısa yoldan çağıralım. Bunun için :
Bilgisayarım'ın özelliklerinden Gelişmiş Sistem Ayarları > Gelişmiş > Ortam Değişkenleri... > Sistem Değişkenleri 'nden pathi bulup Düzenle dedikten sonra path'e "C:\Python27\Scripts;" ekleyip Tamam diyebiliriz. Bunun nedeni  bildiğiniz üzre pip.exe dosyasının o konumda bulunmasıdır. Artık Komut satırına sadece "pip" yazarak pip'ı kullanabiliriz.

C:\Users\...\Desktop>pip

Usage:
  pip <command> [options]

Commands:
  install                     Install packages.
  uninstall                   Uninstall packages.
  freeze                      Output installed packages in requirements format.
  list                        List installed packages.
  show                        Show information about installed packages.
  search                      Search PyPI for packages.
  wheel                       Build wheels from your requirements.
  zip                         DEPRECATED. Zip individual packages.
  unzip                       DEPRECATED. Unzip individual packages.
  bundle                      DEPRECATED. Create pybundles.
  help                        Show help for commands.

General Options:
  -h, --help                  Show help.
  -v, --verbose               Give more output. Option is additive, and can be
                              used up to 3 times.
  -V, --version               Show version and exit.
  -q, --quiet                 Give less output.
  --log-file <path>           Path to a verbose non-appending log, that only
                              logs failures. This log is active by default at
                              C:\Users\aatici-sony\pip\pip.log.
  --log <path>                Path to a verbose appending log. This log is
                              inactive by default.
  --proxy <proxy>             Specify a proxy in the form
                              [user:passwd@]proxy.server:port.
  --timeout <sec>             Set the socket timeout (default 15 seconds).
  --exists-action <action>    Default action when a path already exists:
                              (s)witch, (i)gnore, (w)ipe, (b)ackup.
  --cert <path>               Path to alternate CA bundle.

Gördüğünüz gibi yardım veya kullanımın nasıl olduğunu görmek için yeterli bilgi veriliyor. Ayrıca var olan sürümü güncellemek için pip install -U setuptools komutunu kulanabilirsiniz. Artık paket yükleme ve yönetme aracımız pip kurulduğuna göre django-bootstrap'ı kurmaya başlayabiliriz. 


Django-Bootstrap Kurulumu

Komut satırını yeniden başlatıp aşağıdaki adımları takip edelim:

     1. pip kullanarak paket yüklemek için aşağıdaki satırı komut istemcisinden isteyelim:
    pip install django-bootstrap3
    
Bu komutu istedikten sonra paketler "C:\Python27\Lib\site-packages" konumuna   kurulacaktır.Ayrıca, aşağıdaki adreste bulunan repository'i kopyalayarak da yükleme yapabilirsiniz. Bunun için aşağıdaki satırı çağırmanız yeterli olacaktır :

                            https://github.com/dyve/django-bootstrap3

           pip install -e "dosya_konumu"
   
  2. Artık kütüphaneyi kurduk. Şimdi de bu kütüphaneyi kendi projemizde kullanabilmemiz için                            projemizin settings.py dosyasında bulunan INSTALLED_APPS değişkenine aşağıdaki argümanı                ekleyelim:
                                      'bootstrap3',

    3. Kütüphane kuruldu, projede kullanılır hale geldi. Artık kurduklarımızı kullanma vakti geldi.                             Şablonlarınızda, bootstrap3 kitaplığı yükleyükleyerek, bootstrap_ * etiketler ile kullanabiliriz:

Bir kaç kullanım göstermek gerekirse ;

bootstrap_form

Etiket Adı:
bootstrap_form
Kullanımı:
{% bootstrap_form form FIXTHIS %}

bootstrap_formset

Etiket Adı:
bootstrap_formset
Kullanımı:
{% bootstrap_formset formset FIXTHIS %}

bootstrap_field


Etiket Adı:
bootstrap_field
Kullanımı:
{% bootstrap_field form_field FIXTHIS %}

bootstrap_label

Etiket Adı:
bootstrap_label
Kullanımı:
{% bootstrap_label FIXTHIS %}

bootstrap_button


Etiket Adı:
bootstrap_button
Kullanımı:
{% bootstrap_button FIXTHIS %}

buttons


Etiket Adı:
bootstrap_buttons
Kullanımı:
{% bootstrap_buttons FIXTHIS %}

bootstrap_messages


Etiket Adı:
bootstrap_messages
Kullanımı:
{% bootstrap_messages FIXTHIS %}

bootstrap_pagination

Etiket Adı:
bootstrap_pagination
Kullanımı:
{% bootstrap_pagination FIXTHIS %}

Yukarda bir kaç etiketi ve kullanımını verdim. Siz daha fazla etikete ve kullanımına burdan ulaşabilirsiniz. Şu an biraz havada kaldığının farkındayım. Bu yüzden geçen haftalarda üzerinde çalıştığımız okul projesinin form şablonuna bootstrap ile bir kaç ufak dokunuş yapalım. Ama öncesinde değişiklik yapmadan önceki şablonumuza bir göz atalım : 
genel_form.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title> {{ baslik }} </title>
</head>

    <link rel="stylesheet" type="text/css" href="/static/django_kitabi.css"/>

<body>
<h1> {{ baslik }} Formu </h1>

{% if form.errors %}
<font color ="red" >
<p>Lutfen hatali/eksik alanlari duzeltip tekrar gonderin</p>
</font>
{% endif %}


<form method ="POST" >
{% csrf_token %}

<table border = "1">
{% for alan in form %}

    {% if alan.errors %} <tr class ="errors">{% else %}<tr>{% endif %}
        <th>{{ alan.label}} </th>
        <th> {{alan}} </th>
        {% if alan.errors %}<td> {{alan.errors}} </td>{% endif %}
    </tr>
{% endfor %}
</table>
<input type="submit" value="Gonder">
</form>
{% if id %}
<p><a href = "/?id={{id}}&sil={{id}}"> Bu kaydi sil.</a></p>
{% endif %}
</body>
</html>
Geçen haftalarda üzerinde çalıştığımız şablon görüntüsü
genel_form.html








genel_form.html(bootstrap)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title> {{ baslik }} </title>
</head>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

<body>
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% bootstrap_messages %}


<h1>{{ baslik }} Formu </h1>

{% if form.errors %}
<font color ="red" >
<p>Lutfen hatali/eksik alanlari duzeltip tekrar gonderin</p>
</font>
{% endif %}



<form method ="POST" class="form" >
{% csrf_token %}

{% bootstrap_form form FIXTHIS %}


{% buttons %}
<button type="submit" class="btn btn-primary" >
{% bootstrap_icon "star" %} GONDER </button>
{% endbuttons %}


</form>
{% if id %}
<p><a href = "/?id={{id}}&sil={{id}}"> Bu kaydi sil.</a></p>
{% endif %}
</body>
</html>

Peki yukarda neler yaptık? İlk olarak css'imizi değiştirdik. Ondan sonra kullanacağımız etiketleri çağırdık. Şablonların değişen satırlarını renklendirdim. Böylelikle aradaki fark daha da anlaşılır olacaktır.
Gördüğünüz gibi sadece bir kaç ufak dokunuş. Peki görüntümüz nasıl oldu?


Boş form

Zorunlu alanı doldurulmamış form

E-posta adresi yanlış girilmiş form























































Ben burada sadece göstermek amacıyla ufak işler yaptım. Siz daha da güzel şeyler yapabilirsiniz. İyi eğlenceler :)

Referanslar :
  1. https://docs.djangoproject.com/en/dev/
  2. http://django-bootstrap3.readthedocs.org/en/latest/index.html
  3. http://getbootstrap.com/
  4. http://www.djangobook.com/
  5. http://stackoverflow.com/
  6. https://github.com/dyve/django-bootstrap3
  7. https://pypi.python.org/pypi/pip
  8. http://www.pip-installer.org/en/latest/index.html

Hiç yorum yok:

Yorum Gönder