728x90
1. view 함수에서 저장한 데이터 가져오기
1) Model에 있는 burger 클래스를 가져오고 해당 데이터를 template으로 전달해주기 위해 dictionary 객체를 사용
dictionary 객체의 변수명은 context로 지정
context dict 객체 안에 burgers라는 키를 지정해주고, 해당 키의 값은 Burger.objects.all()로 설정
2. template에서 전달된 데이터 출력
딕셔너리로 받은 키값을 불러올땐 {{ key }}로 확인
페이지 확인해보면 이렇게 뜸
2-1. 햄버거 이름, 가격, 칼로리 함께 표시하기
{%for%} 태그 활용하여 burger 클래스에 있는 각 항목 불러오기
2-2. 테이블 꾸미기
style 태그는 스타일을 정의하는 태그, table은 표를 나타내는 태그
<!DOCTYPE html>
<html lang="ko">
<body>
<h1>햄버거 목록입니다</h1>
<div>
<style>
table {
border-collapse: collapse;
width: 60%;
border-spacing: 0;
}
th, td {
border: 1px solid #000000;
padding: 8px;
text-align: center;
}
th {
background-color: #000000;
font-weight: bold; /* 굵게 설정하는 부분 */
color: #ffffff; /* 글자색을 흰색으로 설정 (선택사항) */
}
</style>
<table>
<tr>
<th>name</th>
<th>price</th>
<th>calories</th>
</tr>
{% for burger in burgers %}
<tr>
<td>{{burger.name}}</td>
<td>{{burger.price}}원</td>
<td>{{burger.calories}}kcal</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
부트스트랩 사용해서 테이블 꾸미기
1. views 파일에서 데이터를 pandas 데이터 프레임으로 불러오고 부트스트랩에서 원하는 테이블 class를 불러옴
2. html 파일에서 head 영역에 부트스트랩 css 코드 넣어주고 body 영역에 {{ burgers|safe }} 넣어줌
<!DOCTYPE html>
<html lang="ko">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<h1>햄버거 목록입니다</h1>
{{ burgers|safe }}
</body>
</html>
728x90
'django' 카테고리의 다른 글
| model 클래스 만들고 관리자 페이지 만들기 (1) | 2024.01.28 |
|---|---|
| view, template, URLconf 만들고 연결하기 (0) | 2024.01.28 |
| [Django] 설치 및 프로젝트 생성 (0) | 2024.01.27 |
| Django 디자인패턴 MTV, get&post (0) | 2024.01.27 |