HTML에서 보낸 데이터 어드민 사이트에서 수락 거절 기능

프로젝트를 하면서 option에서 선택한 값을 어드민 사이트로 보낸 후 어드민 사이트에서 수락을 누르면 DB에 저장이 되고 거절을 누르면 삭제되는 기능을 구현하였다.

 

HTML 구조

<select class="recommend_select" name="main">
    <option value="">메인분류</option>
    <option value="밥">밥</option>
    <option value="빵">빵</option>
    <option value="면">면</option>
</select>

 

 

 

구현 과정

 

선택된 값들을 POST 요청으로 서버로 보내기

선택된 값들을 서버로 보내기 위해서는 많은 방법이 있지만 나는 버튼에 onclick 이벤트를 주어 자바스크립트를 통해서 서버로 보내주었다.

function sendData() {
    var name = document.querySelector('.recommend_name').value;
    var main = document.querySelector('[name=main]').value;
    var soup = document.querySelector('[name=soup]').value;
    var spicy = document.querySelector('[name=Spicy]').value;
    var temperature = document.querySelector('[name=temperature]').value;
    var weight = document.querySelector('[name=weight]').value; 
    
    if (name && main && soup && spicy && temperature && weight) {
        $.ajax({
            url: '/recommend/',
            data: {
                'name': name,
                'main': main,
                'soup': soup,
                'spicy': spicy,
                'temperature': temperature,
                'weight': weight,
                },
            method: "POST",
    
            success: function (data){
                location.replace("")
            },
            error: function (request, status, error){
                console.log("에러");
            },
            complete: function (){
                console.log("완료");
            }
        });
    }
    else if(!name || !main || !soup || !spicy || !temperature || !weight) {
        alert('모든 옵션을 선택해주세요!');
    }
}

 

 

 

서버에서 POST 요청을 처리해서 DB에 새로운 데이터 추가하기

• POST 요청을 처리하는 view함수 작성
• POST요청에서 선택된 값들 추출
• DB모델에 새로운 데이터 추가

def recommend(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        main = request.POST.get('main')
        soup = request.POST.get('soup')
        spicy = request.POST.get('spicy')
        temperature = request.POST.get('temperature')
        weight = request.POST.get('weight')
        approved = False
        print(name,main,soup,spicy,temperature,weight,approved)
        FoodList.objects.create(name=name, main=main, soup=soup, Spicy=spicy, temperature=temperature, weight=weight, approved=approved)
        return redirect('recommendname')
    return render(request, 'content/recommend.html')

 

 

 

서버에서 DB모델 삭제하기

서버에서 FoodList모델을 삭제하는 기능은 장고의 admin 사이트를 이용하여 구현하였습니다. 어드민 사이트에서는 모델 데이터를 생성, 수정, 삭제할 수 있는 기능을 제공합니다. 모델 데이터를 삭제하기 위해서는 해당 모델을 등록하는 admin.py파일에서 ModelAdmin 클래스의 delete_selected 메서드를 오버라이딩해줘야합니다.

 

class FoodListAdmin(admin.ModelAdmin):
    list_display = ['name', 'main', 'soup', 'Spicy', 'temperature', 'weight']
    list_filter = ['main', 'soup', 'Spicy', 'temperature', 'weight']
    actions = ['DB에 추가', 'DB에서 삭제']

    def accept_recommend(self, request, queryset):
        for food in queryset:
            food.accepted = True
            food.save()

    def reject_recommend(self, request, queryset):
        queryset.delete()

admin.site.register(FoodList, FoodListAdmin)