DX Data School

데이터베이스 연동 3

Kim J 2024. 1. 30. 10:46

밥을 아주 야물딱지게 먹고 와서 아마 졸음과의 싸움이 예상되지만, 그래도 해야겠죠!?

이어서 해볼게용

​

오전 시간에는 데이터를 넣고, 해당 데이터를 html로 불러오는 것을 했는데

데이터 이쁘게 불려오는것이 아니라 그냥 모든 데이터를 가져오기만 했어요!

그래서 오후에는 이제 쪼금은 더 보기 좋게 한번 해보는 시간이라서 html에 내가 원하는 정보들이

이쁘게 쏙쏙 들어갈 수 있도록 만져봅니당.

​

​

우선 HTML을 수정해서 반복문을 통해, 데이터가 쏙쏙 들어가도록 해줄거다.

저번달 초에 처음 시작하면서 배운 HTML의 방법과는 달랐다...! 역시,, 인생은 배움의 연속

HTML을 아래처럼 수정했따.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>데이터를 출력해</title>
</head>
<body>
    <div align="center" class ="body">
        
    <h3>상품 목록 화면</h3>
    <table border="1">
        <tr class="header">
            <th align="center" width = "80">상품 ID</th>
            <th align="center" width = "320">상품 이름</th>
            <th align="center" width = "100">가격</th>
        </tr> 
        <!-- 데이터를 반복문으로 불러올건데 이것을 템플릿 이라고 한다. -->
        {% for item in data %} 
            <tr class = "record">
                <td align="center">{{item.itemid}}</td>
                <td align="center">{{item.itemname}}</td>
                <td align="right">{{item.price}}원</td>
            </tr>
        {%endfor %}
    </table>
    </div>
</body>
</html>

그러고 다시 서버 구동을 하고 127.0.0.1:80에 접속을 하면...!

어때유 보기 좋죠?

아, %를 써서 하는것은 HTML이 아니라고 한다.

템플릿 엔진을 사용해서 HTML에 맞게 변환 시켜 화면에 출력되는것이었다...!!

템플릿 엔진은 또 뭐냔 말이다...

​

1) 템플릿 엔진을 이용한 출력

일반 HTML은 자바스크립트를 이용하지 않으면 동적인 데이터를 출력할 수 없다. !!

HTML은 정적 파일인데 우리는 반복문을 써서 동적으로 데이터를 자동으로 들어가게 만든 것이다.

그것을 가능하게 해준놈이 바로 템플릿 엔진,,!!

​

템플릿 엔진은 서버의 데이터를 출력하는 파일에 전달해 문법으로 출력하는 코드를 작성하면 이를

HTML 코드로 번역해 출력문을 만들어준다.

아주 기똥찬 녀석이었다.이다.

한 번 만들면 소스코드를 고치지 않는 이상 있는 그대로 보여지는 파일이다.

​

HTML은 정적 파일인데 우리는 반복문을 써서 동적으로 데이터를 자동으로 들어가게 만든 것이다.

그것을 가능하게 해준놈이 바로 템플릿 엔진,,!!

​

템플릿 엔진은 서버의 데이터를 출력하는 파일에 전달해 문법으로 출력하는 코드를 작성하면 이를

HTML 코드로 번역해 출력문을 만들어준다.

아주 기똥찬 녀석이었다.

​

django에서는 확장자가 html이지만, 정적파일이 아니기 때문에 templates 디렉토리에 작성한다.

그렇기 때문에..!! 우리가 오전시간에 templates 디렉토리를 따로 생성한것이다.

그래서 정적파일은 따로!! 저장한다고 한다.

정적파일은 수정을 안하기 때문에 따로 메모리에 로드시켜두고, 캐싱을 통해 빠르게 불러온다.

캐싱은 캐시 또는 임시 저장 위치에 저장하여 보다 빠르게 액세스할 수 있도록 하는것이다.

​

근데 헷갈리게 확장자를 html로 쓰게 하다니 (자바에서는 jsp라고 한다는ㄷ..)

오후 처음으로 실습한 내용이 바로 템플릿 엔진을 이용한 출력이다.

​

2) 전체 보기에 css를 적용

템플릿을 이용해서 보기 좋게 만들긴 했는데 좀 심심~하기 때문에 css를 활용해 조금 꾸며보기로 하자

[0] html 파일 최상단에 static 디렉토리의 내용을 불러오는 코드 작성

 {% load static %}

[1] test.html 파일에 css 링크를 추가 한다

    <!-- css 디렉토리에 있는 style.css를 적용하겠다. -->
    <link rel="stylesheet" href="{% static 'css/style.css'%}" />

[2] 애플리케이션 디렉토리에 static 디렉토리를 생성

[3] 생성한 static 안에 css 디렉토리를 생성

[4] css 디렉토리 안에 style.css 파일을 만들어서 css 코드를 작성

이렇게 만들고 이제 css 파일에 코드를 작성해보쟈

일단 되는지 확인만 하면 되니까 간단하게 요정도,,

tr.header{
    background: #c9bfed;
}
tr.record{
    background: #ededed;
}

> 프로젝트의 settings.py 파일에 정적 파일의 위치를 설정

CSS는 정적 파일이기 때문에 따로 위치를 지정 시켜줘야 한다! 왜냐 수정을 안하고 캐싱을 통해 빨리 불러오기 위해서지. 아까 했던 말이죠?! 

# static 파일의 위치를 지정
import os
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

두구두구,,, 서버를 재구동 시키고 확인을 해보자!

아직 조잡하긴 하지만 아까보다 훨 낫다!

3) 상세보기 구현

[1] test.html 파일에서 제목 부분에 링크를 설정

<td align="center"><a href="./detail{{item.itemid}}">{{item.itemname}}</a></td>

[2] views.py 파일에 detail 요청을 처리하는 함수를 추가

def detail(request, itemid):
    # itemid의 값이 itemid 인 데이터를 1개 가져온다.
    item = Item.objects.get(itemid=itemid)
    # detail.html 파일로 출력하는데 이 때 data라는 이름으로 item을 전달한다.
    return render(request, 'detail.hteml', {'data' : item})

[3] templates 디렉토리에 detail.html 파일을 생성

detail.html 파일 최상단에 {% load static %} 를 적어준다.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상세보기</title>
</head>
<body>
    <div align="center">
        <h2>상세보기</h2>
        <table>
            <tr><tb>{{data.itemname}}</tb></tr>
            <tr><tb>{{data.price}}</tb></tr>
            <tr><tb>{{data.description}}</tb></tr>
        </table>
    </div>
</body>
</html>

[4] urls.py 파일에 url을 처리하는 함수를 연결하는 코드를 작성

from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", views.test),
    path("index/", views.index),
    path("detail/<int:itemid>", views.detail)
]

이까지 했다면 이제

서버를 재구동하고 디테일 페이지가 잘 열리는지 확인 해보자!

여기 들어가서 레몬을 눌렀을 때 이제 상세보기 페이지가 열리면 잘 된것이다.

허접하긴 하지만 짜잔 하고 성공 했슴니당 !!

생각보다 졸리지 않은 시간이었따. 지금까지 서버 사이드 랜더링 방식으로 웹 서비스를 구현해 보았다.

다음시간에는 REST API를 구현한다. 아주 중요하다고 하니.. 잠시 쉬었다가 REST API 구현하기로 다시 가보자고~~

​

저작자표시 비영리 변경금지

'DX Data School' 카테고리의 다른 글

Github  (0) 2024.04.01
데이터베이스 연동 4  (0) 2024.04.01
데이터베이스 연동 2  (1) 2024.01.30
데이터베이스 연동  (0) 2024.01.30
Django 활용하여 Web Programming 실습 2  (0) 2024.01.30

'DX Data School'의 다른글

  • 현재글데이터베이스 연동 3

관련글

티스토리툴바