[Django 주식 검색 웹 만들기 06] 주식 정보 테이블 디자인 및 데이터 출력 방법

1. 부트스트랩의 Tables 섹션을 활용하여 테이블 디자인 선택

 

이제 원하는 키워드만 뽑아내도록 합시다.

다시 부트스트랩 Content로 이동하여 Tables 섹션을 찾습니다.

 

 

원하는 테이블 디자인을 찾은 후 해당 부분을 복사합니다.

 

2. home.html 파일에 테이블 디자인 코드 삽입

 

그리고 home.html 파일에 붙여넣기를 하고, {{ stock }} 부분은 삭제합니다.

필요없는 컬럼들을 제거하여 아래와 같이 테이블을 구성해줬어요.

 

{% extends 'stocks/base.html' %}

{% block content %}

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
    </tr>
  </tbody>
</table>

{% endblock %}

 

 

3. 데이터 딕셔너리 형식을 활용하여 키워드(key)와 값을(value) 테이블에 출력

 

표의 #과 First로 되어 있는 부분을 key와 value로 변경합니다.

이미 데이터를 딕셔너리 형태로 파싱했으므로, 각 항목에 해당하는 값을 딕셔너리 형식으로 출력합니다.

예를 들어, 1은 symbol에 해당하므로 {{ stock.symbol }}과 같이 사용합니다.

나머지 항목들도 동일한 방식으로 처리합니다.

 

{% extends 'stocks/base.html' %}

{% block content %}

<table class="table">
  <thead>
    <tr>
      <th scope="col">key</th>
      <th scope="col">value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">symbol</th>
      <td>{{ stock.symbol }}</td>
    </tr>
    <tr>
      <th scope="row">companyName</th>
      <td>{{ stock.companyName }}</td>
    </tr>
    <tr>
      <th scope="row">primaryExchange</th>
      <td>{{ stock.primaryExchange }}</td>
    </tr>
    <tr>
      <th scope="row">latestPrice</th>
      <td>{{ stock.latestPrice }}</td>
    </tr>
      <tr>
      <th scope="row">latestPrice</th>
      <td>{{ stock.latestPrice }}</td>
    </tr>
      <tr>
      <th scope="row">week52High</th>
      <td>{{ stock.week52High }}</td>
    </tr>
      <tr>
      <th scope="row">week52Low</th>
      <td>{{ stock.week52Low }}</td>
    </tr>
  </tbody>
</table>

{% endblock %}

 

저는 이렇게 추가했습니다.

 

4. 검색한 주식 데이터 출력 결과 확인 및 최종 확인

 

이에 따라 최종적으로 goog를 검색했을 때 다음과 같이 출력됩니다.