AI 본 교육/AI 5주차

장고 과제 (개인페이지 / 완료 체크리스트 만들기)

호기호 2023. 9. 7. 21:02

개인페이지는 혼자 힘으로 만들어냄

@csrf_exempt
def individual(request):
    if request.method == "POST":
        todos = Todo.objects.all()
        context = {
            'todos': todos,
        }
        return render(request, "todo/individual.html", context)
    elif request.method == "GET":
        todos = Todo.objects.all()
        context = {
            'todos': todos,
        }
        return render(request, "todo/individual.html", context)
    else:
        return HttpResponse('Invalid request method', status=405)

views.py에서 이렇게 썼고

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todo 리스트</title>
</head>
<body>
    <h1>{{user.username}}의 Todo 리스트</h1>
    {% if request.user.is_authenticated %}
        <div>
            <a href="/todo/create/">
                <button>새로만들기</button>
            </a>
            <ul>
            <form action="/todo/is_completed/" method="post">
                    {% for todo in todos %}
                        {% if request.user.id == todo.user_id %}
                            <a href="/todo/{{todo.id}}">
                                <div>
                                    <input type="checkbox" name={{ids}} id={{todo.id}} value={{todo.id}} >
                                    {{ todo.content }}
                                </div>
                            </a>
                        {% endif %}
                    {% endfor %}
                <button  type="submit" >완료하기</button>
            </form>
            </ul>
        </div>
        <a>
            <a href="/todo/">
            <button>전체 Todo 리스트로 돌아가기</button>
        </a>
    {% else %}
        <div>
            <button onclick="location.href='/user/signus'">회원가입 하기</button>
            <button onclick="location.href='/user/login'">로그인 하기</button>
        </div>
    {% endif %}
</body>
</html>

html은 이렇게 씀

원래 index.html에 있던 버튼과 기능들을 individual.html 로 옮겼고, views.py의 다른 함수들도 다 바꿔줬다.

{% if request.user.id == todo.user_id %}

if문 써서 로그인 한 사용자 것만 보이게 했다.


여기에 완료 체크박스를 만들어서

체크박스에 체크하고 '완료하기'버튼을 submit 해서 post 해주면,

 

             ▢ 운동하기

 

이런식으로 취소선을 긋는다던지, 색깔이 바뀌게해서 완료를 표시하고 싶었다.

 

models.py에서

is_completed = models.BooleanField(default=False)

이거를 class에 추가해주고, migrate해준다.

views.py에서

@csrf_exempt
def is_completed(request, todo_id):
    if request.method == "POST":
        todo = Todo.objects.get(id=todo_id)
        todo.is_completed = True
        todo.save()
        return redirect('/todo/individual/')
    elif request.method == "GET":
        todo = Todo.objects.get(id=todo_id)
        context = {
            'todo': todo,
        }
        return render(request, "todo/individual.html", context)
    else:
        return HttpResponse('Invalid request method', status=405)

대충 이런식으로 만들어 놓고, urls.py에 연결을 했다. (잘 만든지도 모르겠음)

individual.html 안에 form태그로

<form action="/todo/is_completed/" method="post">

이걸 추가해줬는데, 그 다음을 모르겠다. 아마도 views.py도 많이 틀렸을 거라 예상...

html에서

{% for todo in todos %}

이 for문 안에

{% if todo.is_completed == True %}

이렇게 조건문을 걸어서 만져야 할 것 같다는 느낌?!?!

            <form action="/todo/is_completed/" method="post">
                    {% for todo in todos %}
                        {% if request.user.id == todo.user_id %}
                            {% if todo.is_completed == False %}
                                <a href="/todo/{{todo.id}}">
                                    <div>
                                        <input type="checkbox" name={{ids}} id={{todo.id}} value={{todo.id}} >
                                        {{ todo.content }}
                                    </div>
                                </a>
                            {% else %}
                                <a href="/todo/{{todo.id}}">
                                    <div>
                                        <input type="checkbox" name={{ids}} id={{todo.id}} value={{todo.id}} >
                                        (완료) {{ todo.content }}
                                    </div>
                                </a>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                <button  type="submit" >완료하기</button>
            </form>

html은 잘 만든것 같고, views.py를 어떻게 손봐야 할지 모르겠다.


해설을 들어보니, urls에서 todo.user_id를 지정해줘야 작동하는것 같다!!!!!