django 기초 - bootstrap을 이용한 사이트 만들기 : 8. 글 수정, 삭제

 - 글 내용 페이지에서 접속한 사용자가 글쓴이라면 글의 수정과 삭제가 가능하도록 한다.

 - 삭제와 수정버튼을 만들고 기능을 연결

1. 버튼 만들기

<div class="box-footer">
	<button type="submit" class="btn btn-primary" id="list_all">게시글 목록</button>
	{% if session_user_name == orm_obj.writer %}
		<button type="submit" class="btn btn-danger" id="btn_update">수정</button>
		<button type="submit" class="btn btn-warning" id="btn_delete">삭제</button>
	{% endif %}
</div>

 

 - 기존에 있던 게시글 목록 버튼 이외에 수정, 삭제 버튼을 추가 생성

 - views의 함수에서 넘겨받은 세션데이터와 게시글 데이터를 사용해서 사용자 식별

 - 현재 접속자가 글쓴이와 같다면 수정과 삭제버튼을 활성화

2. 삭제 버튼 활성화

 - <a>나 <form> 태그가 아니기 때문에 script를 통해서 action을 제어해야 한다.

<script>
$(document).ready(function(){
	$('#list_all').click(function() {
		//alert(' come back ! ')
		location.href = '../list_all' ;
	})
	$('#btn_delete').click(function() {
    	//alert( ' delete ! ')
		location.href = '../delete_form/?id='+$('#id').val();
	})
});
</script>

 

 - delete 버튼을 눌렀을 때, id='id'로 정의된 값을 찾아 get 방식으로 서버로 전송한다.

 - read.html 문서의 id는 해당 글의 id 번호로 저장되어 있다. 즉, 해당 게시글의 id값 (데이터 베이스의 기본키 값)이다.

 

# urls.py
  path('delete_form/', views.delete_form, name='delete_form'),
  
# views.py
def delete_form(request):
    if request.method=='GET':
        board_id = request.GET['id']
        print(' --- delete form request !! ---')
        print(' ---- board_id : ', board_id)

        form_data = Bbs.objects.get(id=board_id)
        form_data.delete()
    return redirect('list')

 

 - get 방식으로 수신받은 id 값을 사용해 데이터베이스에서 해당 게시글 데이터를 가져온다. 

 * 일반 데이터 테이블에서 하나의 행을 가져오는것과 같다.

 - delete() 를 사용해 데이터를 삭제한다. 따로 save없이 삭제 즉시 테이블에 반영된다. DBMS의 auto commit과 같다.

 - 게시글이 삭제되면 redirect를 통해 다시 게시글 목록 페이지로 이동한다.

3. 수정버튼 활성화

 

 - 게시글의 제목, 내용 부분은 readonly 속성으로 수정이 불가능하게 되어있다.

 - 수정 버튼을 처음 누르면 readonly 속성을 제거하여 title과 content의 새로운 텍스트를 입력받는다.

 - 다시 수정 버튼을 누르면 해당 내용을 백엔드에 전송하여 처리하고, 다시 해당 글 내용으로 render 한다.

1. Front

$(document).ready(function(){
	$('#btn_delete').click(function() {
		location.href = '../delete_form/?id='+$('#id').val();
	})
	$('#btn_update').click(function() {
		//alert(' update !! ')
		if ( $('#title').prop('readonly') ){
			//alert(' read only ! ')
			$('#title').prop('readonly','')
			$('#content').prop('readonly','')
		}
		else {
			//alert($('#title').val())
			//alert( $('#id').val() )
			//alert( $('#content').val() )
			location.href = '../update_form/?id='+$('#id').val()+'&title='+$('#title').val()+'&content='+$('#content').val()
			$('#title').prop('readonly')
			$('#content').prop('readonly')
		}
	})
});

 

 - update버튼을 누르면 제목의 readonly 속성을 찾는다. readonly 속성이라면, title(제목)과 content(본문)의 readonly 속성을 해제한다.

 - readonly 속성을 해제하면 제목과 본문에 텍스트 입력이 가능하다. 자연스럽게 입력하면 된다.

 - 입력을 마치고 다시 버튼을 누르면 update_form/을 get방식으로 데이터를 바뀐 내용의 데이터를 전송한다.

 - 제목과 내용의 속성을 다시 readonly로 바꾼다.

2. Back

# urls.py
    path('update_form/', views.update_form, name='update_form'),
    
# views.py
def update_form(request):
    if request.method == 'GET':
        board_id = request.GET['id']
        new_content = request.GET['content']
        new_title = request.GET['title']

        form_data = Bbs.objects.get(id=board_id)
        form_data.title = new_title
        form_data.content = new_content
        form_data.save()

        context = {
        'orm_obj': form_data,
        'session_user_name': request.session['user_name'],
        'session_user_id': request.session['user_id']
        }
    return render(request, 'bbs/read.html', context)

 

 - 서버부분은 지금까지 한 내용과 똑같다. GET으로 데이터를 받아내고, model 클래스로 데이터베이스에 접근하여 정보 수정, context로 데이터를 다시 html로 전송하는 방식이다.

수정 버튼을 누르기 전 - 후