WEB/Django prac

[Django prac][Form] 12. Widget 응용

bay07 2024. 3. 29. 11:55

# articles > forms

더보기
from django import forms
from .models import Article

# 위젯 미적용 버전
class ArticleForm(forms.ModelForm):
    class Meta:
        model = Article
        fields = '__all__'

# 위젯 적용 버전
class ArticleForm(forms.ModelForm):
    title = forms.CharField(
        label='제목',
        widget=forms.TextInput(
            attrs={
                'class': 'my-title',
                'placeholder': 'Enter the title',
            }
        )
    )

    content = forms.CharField(
        label='내용',
        widget=forms.Textarea(
            attrs={
                'class': 'my-title',
                'placeholder': 'Enter the cotnent',
                'rows': 5,
                'cols': 50,
            }
        ),
        error_messages={'required': '내용을 입력해주세요.'}
    )

    class Meta:
        model = Article
        fields = '__all__'
        # exclude = ('title',)

 

# articles > edit.html

edit.html 파일의 이름을 update.html로 바꿔준다 

"articles:edit"을 "articles:update" 로 바꾸기

더보기
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Update</h1>
  <form action="{% url "articles:update" article.pk %}" method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    {% comment %} <div>
      <label for="title">Title: </label>
      <input type="text" name="title" id="title" value="{{ article.title }}">
    </div>
    <div>
      <label for="content">Content: </label>
      <textarea name="content" id="content">{{ article.content }}</textarea>
    </div> {% endcomment %}
    <input type="submit">
  </form>
  <hr>
  <a href="{% url "articles:detail" article.pk %}">[back]</a>
</body>
</html>

#  articles > urls.py 

edit에 대한 path를 주석처리 해준다 

더보기
from django.urls import path
from . import views

app_name = 'articles'
urlpatterns = [
    path('', views.index, name='index'),
    path('<int:pk>/', views.detail, name='detail'),
    # path('new/', views.new, name='new'),
    path('create/', views.create, name='create'),
    path('<int:pk>/delete/', views.delete, name='delete'),
    # path('<int:pk>/edit/', views.edit, name='edit'),
    path('<int:pk>/update/', views.update, name='update'),
]

 

# articles > detail.html

edit 부분을 update로 바꿔준다 

더보기
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Detail</h1>
  <h2>{{ article.pk }} 번째 글</h2>
  <hr>
  <p>제목: {{ article.title }}</p>
  <p>내용: {{ article.content }}</p>
  <p>작성일: {{ article.created_at }}</p>
  <p>수정일: {{ article.updated_at }}</p>
  <hr>
  <a href="{% url "articles:update" article.pk %}">UPDATE</a>
  <form action="{% url "articles:delete" article.pk %}" method="POST">
    {% csrf_token %}
    <input type="submit" value="DELETE">
  </form>
  <a href="{% url "articles:index" %}">[back]</a>
</body>
</html>

# 실행해서 확인해보기 

python manage.py runserver

 

http://127.0.0.1:8000/articles/

 

잘된당 ..! 

(영상)

 

 

Form12_django.zip
0.02MB

 

 

 

Form12_django2.zip
0.01MB