AI로 홈페이지 만들기 - 책 목록 DB화

지난 시간 sqlite MCP(에스큐엘라이트 엠씨피) 를 통해 이제 sqlite 를 훨씬 쉽게 다룰수 있게 되었습니다.

https://itadventure.tistory.com/767

AI로 홈페이지 만들기 - SQLITE MCP 연결

오늘은 책 목록을 sqlite 와 연동하겠습니다.

저의 서점 홈페이지에는 '도서목록' 메뉴가 있는데요.
현재는 sqlite 와 아무관련 없는 책들입니다.
이 책들을 sqlite 에 넣고 연결하겠습니다.

먼저 sqlite mcp 연결을 인식시켜주어야 하는데요.
안 그러면 엉뚱하게 PHP 파일을 만들어서 연결을 시도하려 합니다.
인식은 무료 모델로 해도 됩니다.

sqlite mcp 에서 테이블 조회해줘

 

준비 작업이 하나 더 있습니다.
현재 sqlite MCP 는 내 PC에서만 연결되는 방식이지,
홈페이지에서 연결되는 방식은 아닙니다.

그러니 sqlite 에 자료를 입력하고 조회하는 등의 작업은 MCP로 작동하지만,
인터넷에서 작동하는 홈페이지의 기능 구현은 db/sqlite.db 경로를 사용해야 합니다.

앞으로 이걸 일일히 설명하기보다는 윈드서프 규칙으로 잊지 않게 정보를 기록하는게 확실한데요..windsurfrules 파일을 생성하고,

AI가 알아듣게 규칙을 적어주겠습니다.

- sqlite DB 작업은 MCP에 연결해서 처리해줘.
- php 코드는 db/sqlite.db 파일을 사용하도록 해. sqlite MCP와 동일한 파일이야.
- 컨텍스트가 큰 경우 2~3k 단위로 점진적으로 작업해줘.

다음으로 책목록에 해당하는 books.php 를 채팅창에 드래그하고,

Windsurf 채팅창에 아래와 같이 입력하겠습니다. 모델은 클로드 소넷 3.7(Thinking)으로 바꾸고요.

@books.php 이 페이지 책 목록을 sqlite 에서 불러올거야. 
먼저 books 테이블을 만들고 데이터를 추가해줘,

Windsurf 의 대화를 잠시 살펴볼까요?

안녕하세요! SQLite를 사용하여 책 목록을 관리하도록 설정하겠습니다. 
먼저 books 테이블을 만들고 데이터를 추가해 보겠습니다.

먼저 SQLite 테이블 목록을 확인해보겠습니다.

이제 books 테이블을 생성하겠습니다. 
책 정보를 저장하기 위한 테이블을 만들어 보겠습니다.

테이블이 성공적으로 생성되었습니다! 이제 샘플 데이터를 추가해보겠습니다.

데이터가 성공적으로 추가되었습니다! 이제 추가된 데이터를 확인해보겠습니다.

이제 books.php 파일에 SQLite 데이터베이스에서 책 목록을 불러오는 코드를 작성하겠습니다. 
먼저 books.php 파일의 현재 내용을 확인해보겠습니다.

음?! 시키지도 않은 짓을..
어차피 할 생각이긴 했지만요. 클로드은 너무 똑똑한게 탈이네요 ㅎ

이제 books.php 파일을 수정하여 SQLite 데이터베이스에서 책 정보를 불러오도록 하겠습니다.

모든 작업이 잘 완료된 것 같습니다. 
  :
필요하시다면 다른 기능도 추가로 구현해드릴 수 있습니다. 예를 들어:

카테고리별 필터링 기능
가격 순서로 정렬하는 기능
제목이나 저자로 검색하는 기능
추가로 필요한 기능이 있으시면 말씀해 주세요.

확인해보니 아래와 같군요. 책이 5권으로 줄어든건 아쉽네요.

정말 sqlite DB에서 불러온게 맞는지 확인하기 위해 책을 추가하겠습니다.

책 테이블에 임의의 책을 20권 추가해줘. 그림은 픽썸에서 가져와줘.

네, SQLite 데이터베이스에 추가 책 15권을 더 추가하겠습니다. 
이미 5권이 추가되어 있으니 총 20권이 될 것입니다.

결과는? 오오~

직접 DB 파일을 열어보겠습니다. 지난번에 extension 을 설치했으니 sqlite.db 파일을 선택하면 바로 내용이 보일텐데요. 다른 테이블이 선택된 경우 books 로 바꿔주시면 됩니다.

책 제목, 저자, 페이지, 가격 잘 들어있군요.

음? 그런데 약간 이상한 부분이 있군요.
책의 이미지 픽썸 이미지 URL ( 예 : https://picsum.photos/id/42/300/400 ) 이 어딘가 들어있어야 하는데 전혀 보이질 않습니다.

물어보겠습니다.

books 테이블에 픽썸이미지 URL이 안보이네. 어디서 볼 수 있어?

책 테이블에 픽썸 이미지 URL이 별도로 저장되어 있지 않습니다. 
현재 코드에서는 책의 ID를 사용하여 픽썸 이미지 URL을 동적으로 생성하고 있어요.
    :
예를 들어, ID가 1인 책은 https://picsum.photos/id/101/300/400 이미지를 사용하고, 
ID가 2인 책은 https://picsum.photos/id/102/300/400 이미지를 사용하는 식입니다.

이런 id값으로 계산하도록 했나 봅니다.
이러면 나중에 사진 업로드같은 기능을 못 만들지 않슴...

다행히도 다음 단계를 안내하네요.

만약 데이터베이스에 이미지 URL을 직접 저장하고 싶으시다면, 
books 테이블에 image_url 필드를 추가하여 저장할 수 있습니다. 
필요하시면 그 작업도 도와드릴 수 있어요.

뭐 당연히 해야하겠지요?

고고

이런말도 알아듣습니다 ㅎㅎ

네, 픽썸 이미지 URL을 데이터베이스에 저장하도록 구현하겠습니다. 
      :

잠시 후 DB에는 이미지 URL 항목이 추가되고, 데이터도 입력됩니다.

이제 books.php 파일을 수정하여 데이터베이스에 저장된 이미지 URL을 사용하도록 하겠습니다.
현재 코드는 ID를 기반으로 동적으로 이미지 URL을 생성하고 있는데, 
이를 데이터베이스에서 가져온 URL을 사용하도록 변경하겠습니다.

그래 그래! 잘한다!

이래 저래 약간의 사연 끝에 책 목록 페이지가 왼성되었네요.
이 페이지는 완전히 sqlite 데이터베이스에서 불러오는 것입니다.

아직은 페이지 기능도 없고 카테고리도 작동하지 않습니다.
하지만 해달라고 하면 됩니다.
다음번에 이어서 해당 기능을 만드는 걸 기약하도록 하겠습니다.

자연어로 코딩하는게 그리 순탄하지만은 않습니다.
그래서 IT 지식이 있어야 잘 작동되는지 확인할 수 있는 것이지요.

오늘 저의 결과물은 아래 URL에서 보실 수 있습니다.

https://cray7.mycafe24.com/HappyBooks6/books.php

아무쪼록 관심 있는 분들께 도움이 되셨기를 바라며.

방문해 주신 모든 분들께 감사드립니다!