[장고 기초] 웹 페이지에 Pandas를 적용한 Table 출력

이번 포스팅에서는 모델의 저장한 값들을 표로 출력을 해볼텐데요.

이때 이용할 라이브러리는 Pandas 입니다. 

 

 

 

판다스 설치

Pandas는 기본적으로 설치된 라이브러리가 아니기 때문에

터미털창에 pip install pandas를 입력한 후 먼저 해당 라이브러리를 설치해줘야 합니다. 

 

 

모델 생성

참고로 우리가 사용할 모델은 해당포스트에서 생성한 Cars 모델을 사용할 것입니다. 

 

미리 5개의 CARS 인스턴스를 생성하였고, admin에서 확인해보니 아래와 같은 값들이 저장되어 있네요.

참고로 해당 인스터의 값들은 아래와 필드와 값으로 이루어져 있습니다.

 

 

view 생성

우리가 원하는건 웹페이지 상에 테이블을 생성하는 것이므로 View 함수를 만들어 보겠습니다. 

 

from django.shortcuts import render
from cars.models import Cars
import pandas as pd


def main_view(request):
    qs = Cars.objects.all()
    context = {'qs' : qs}
    return render(request, 'cars/main.html', context)

먼저 Cars.objects.all()를 통해 모델의 저장된 모든 instance를 불러오고 해당 값을 context에 넣어 우리 웹페이지에 띄워보겠습니다. 

 

결과는 당연히 QuerySet 형태가 그대로 출력이 됩니다. 

우리가 원하는 필드와  값들이 다 출력되게 하려면 어떻게 해야할까요? 바로 .values()를 추가해주면 됩니다.

def main_view(request):
    qs = Cars.objects.all().values()

    context = {'qs' : qs}
    return render(request, 'cars/main.html', context)

결과는 ..?

우리가 원하는 값은 아니지만 그래도 각 필드의 값들이 다 출력되는것을 알 수 있습니다. 

 

이어서 해볼것은 해당 queryset을 판다스 데이터프레임에 넣는 것입니다. 

def main_view(request):
    qs = Cars.objects.all().values()
    data = pd.DataFrame(qs)
    
    context = {'df' : data}
    return render(request, 'cars/main.html', context)

 

 

그 결과는 어떨까요?

QuerySet 이 사라지고 뭔가 깔끔해지긴 했는데 여전히 우리가 원하는 형태가 아닙니다. 

 

 

그 다음 추가할것은 바로 .to_html() 입니다.

def main_view(request):
    qs = Cars.objects.all().values()
    data = pd.DataFrame(qs)

    context = {'df' : data.to_html()}
    return render(request, 'cars/main.html', context)

결과는..?

이제 뭔가 테이블이 만들어질것같은 느낌이 드시지 않나요?

 

 

해당 html 값을 우리가 눈에 보이는 테이블을 만들어 주기 위해선 main.html을 조금 수정해주어야 합니다. 

현재 html은 아래와 같은 상태인데요.

<h1> Hello world</h1>
    {{ df }}

 

|safe 필터를 적용 해줍니다. 이렇게되면 <tag>로 이루어져있는 값들이 실제 우리 눈에 보이는 형태로 변형이 됩니다. 

<h1> Hello world</h1>
    {{ df|safe }}

 

자! 드디어 우리가 원하는 테이블 형태가 출력되었군요.

참고로, 첫번째 컬럼들을 중앙 정렬 하고싶다면 .to_html인자로  justify='center'을 추가하면 됩니다. 

def main_view(request):
    qs = Cars.objects.all().values()
    data = pd.DataFrame(qs)

    context = {'df' : data.to_html(justify='center')}
    return render(request, 'cars/main.html', context)

 

이 글과 읽으면 좋은글

• [django 기초] 페이징 처리(pagination) 마스터 하기
• [장고 기초] choices를 통한 드롭 다운 메뉴 만들기
• [장고 기초] 기본 html을 이용하여 detail view 구현 해보기
• [django 기초] Foreign Key(외래키)관계에서의 reverse_name 사용법