how to use bootstrap in a django form

28

Upload: kwangyoun-jung

Post on 28-Jul-2015

94 views

Category:

Software


0 download

TRANSCRIPT

Page 1: How to Use Bootstrap in a Django form
Page 2: How to Use Bootstrap in a Django form
Page 3: How to Use Bootstrap in a Django form

This template is free to use under Creative Commons Attribution license. If you use the graphic assets (photos, icons and typographies) provided with this presentation you must keep the Credits slide.

Page 4: How to Use Bootstrap in a Django form
Page 5: How to Use Bootstrap in a Django form

http://www.digett.com/blog/01/16/2014/pairing-static-websites-cms

Page 6: How to Use Bootstrap in a Django form

http://www.digett.com/blog/01/16/2014/pairing-static-websites-cms

Page 7: How to Use Bootstrap in a Django form

✖ HTML✖ CSS✖ Javascript✖ No server-side scripting✖ No database

Client 에 dynamic 하게 page 를 조합해 보여주지 않는다 .

Page 9: How to Use Bootstrap in a Django form

settings.py1. INSTALLED_APPS=(

‘django.contrib.staticfiles’,)

2. STATIC_URL=‘/static/’

3. STATICFILES_DIRS=os.path.join(BASE_DIR, “static”)

template file1. {% load staticfiles

%}2. ex) <link

rel=”stylesheet” href=”{% static ‘css/base.css’ %}”>

Page 10: How to Use Bootstrap in a Django form
Page 11: How to Use Bootstrap in a Django form

Place your screenshot here

Page 12: How to Use Bootstrap in a Django form

Place your screenshot here

<form action="/search/web/direct_search.php" method="get">

<input type="text" class="inputtext _586f" autocomplete="off" name="q"placeholder="Search Facebook" role="combobox" tabindex="1"aria-label="Search Facebook" id="u_0_c" />

Page 13: How to Use Bootstrap in a Django form

사용자가 Form 에 정보를 입력하여 저장 이라는 기능을 Request 하면 Database 에 저장되고

Browser 에 Response 된다 .

Page 14: How to Use Bootstrap in a Django form

input reinput

validate&

alert

Page 15: How to Use Bootstrap in a Django form
Page 16: How to Use Bootstrap in a Django form
Page 17: How to Use Bootstrap in a Django form
Page 18: How to Use Bootstrap in a Django form

FormModelF

orm

Model 연결 X O

application anything db-driven

others O O

사용 용도가 다를 뿐 !

Page 19: How to Use Bootstrap in a Django form

Place your screenshot here

# forms.pyfrom django import forms

class ExampleForm(forms.Form): name=forms.CharField(label=” 이름 ", required=True, max_length=30) age=forms.IntegerField(label=” 나이 ", initial=”30”) gender=forms.CharField(widget=forms.RadioSelect(choices=((‘M’,u’ 남 '), (‘F’,u’ 여 '),)))

# views.pyfrom module.forms import ExampleForm

def function(request): exform = ExampleForm(request.POST or None) …

return render(request, “index.html”, { ‘exform’: exform})30

남 여

input

# index.html..{{ exform.as_p }}..

이름

나이

label

Page 20: How to Use Bootstrap in a Django form

✖ BooleanField✖ CharField✖ ChoiceField✖ DateField✖ EmailField✖ IntegerField✖ URLField✖ etc.

Page 21: How to Use Bootstrap in a Django form

✖ required✖ label✖ initial✖ widget✖ help_text✖ error_messages✖ validators✖ etc.

Page 22: How to Use Bootstrap in a Django form

from django import forms

class NameForm(forms.Form):field_name = forms.FieldClass(

field arguments1,field arguments2,…

...)

Page 23: How to Use Bootstrap in a Django form

from django import forms

class NameForm(forms.ModelForm):class Meta:

fields=(name,)labels={‘name’: u‘ 이름’ ,}help_texts={‘name’:u' 이름만’ ,}widgets={‘name’: forms.TextInput(

attrs={‘placeholder’: ‘your name’

})})

Page 24: How to Use Bootstrap in a Django form
Page 25: How to Use Bootstrap in a Django form
Page 26: How to Use Bootstrap in a Django form

name=CharField(label=u” 이름 ",help_text=u” 이름만 ",widget=(

forms.TextInput(attrs={

‘class’: ’form-control’,

})

))

Page 27: How to Use Bootstrap in a Django form
Page 28: How to Use Bootstrap in a Django form