Django 프로젝트에서 DB 만들기 (ORM)
웹 사이트에 게시될 데이터들을 저장하기 위한 데이터베이스를 생성해야 하는데, 별도의 데이터베이스 작업을 하지 않고 장고(Django)에서 간단한 DB를 만들어보고자 합니다. 이렇게 애플리케이션 레벨에서 코드만으로 DB 작업까지 해주는 기능을 ORM(Object Relational Mapping)이라 합니다.
Model 작성 후 DB 생성하기
웹 컨텐츠를 담을 content 앱에 있는 models.py 파일에서 피드에 올릴 이미지 파일, 닉네임 등의 데이터를 저장할 데이터베이스 형식을 class로 생성합니다. 하나의 표를 구성하는 각 열(field)의 내용을 {필드이름} = models.{필드종류}Field() 형식으로 입력합니다.
위와 같이 입력한 후 콘솔에서 다음 두 명령어를 순서대로 입력하면 SQLite라는 타입의 DB가 생성됩니다.
python manage.py makemigrations
python manage.py migrate
DB에 데이터 저장하기
파이참 프로그램 오른쪽에 숨겨진 탭으로 Database가 있는데 이를 확장하고 '+' 버튼을 눌러 SQLite를 추가합니다. 프로젝트가 저장된 폴더 경로에 생성된 SQL 파일을 선택하여 열어줍니다.
추가된 데이터베이스의 테이블 중 앞서 명령어로 생성한 테이블인 content_feed를 더블클릭하여 파일을 열어줍니다.
아래 그림과 같이 '+' 버튼을 눌러 행을 추가하고 저장하길 원하는 내용을 입력합니다. 모든 입력이 끝나면 Ctrl+Enter 혹은 '↑' 버튼을 눌러 변경사항을 저장합니다.
DB 정보를 웹으로 불러오기 (DB → Web)
메인 앱의 views.py 파일을 열어 Main class 안에 아래 그림과 같이 context = dict(data_list=Feed.objects.all()) 구문을 추가합니다. Feed의 모든 오브젝트를 main.html로 보내겠다는 설정입니다. 그 후에 main.html에는 views.py에서 보낸 값을 받아 오브젝트 횟수만큼 반복적으로 피드에 넣기 위해 for문으로 설정합니다.
모든 설정 후 웹 페이지를 새로고침하면 데이터베이스에 올린 필드 수 만큼 인스타그램 피드가 반복하여 나타나는 것을 확인할 수 있습니다.
웹에서 입력받은 데이터를 DB에 저장하기 (DB ← Web)
modal 만들기
새 피드 작성을 위해 이미지 파일 및 글을 업로드 하는 용도로 modal(모달)을 사용하려고 합니다.
modal이란 창 안에 새로운 화면을 띄우는 기술로 팝업과 비슷하지만 새로운 웹브라우저를 실행하지 않는다는 점이 특징입니다.
부트스트랩의 컴포넌트 페이지에서 모달 소스코드를 찾아 복사한 후 <body> 부분에 붙여주고, 아래와 같이 적절히 코드의 내용을 수정합니다. 아래 코드를 간단히 설명하면 모달을 띄울 버튼에는 '피드생성' 이라고 표시해주고, 모달 내부에는 가로로 반을 나누어 사진 올리는 곳과 글을 올리는 곳으로 구분했습니다.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModal">
피드생성
</button>
<!-- Modal -->
<div class="modal-body" style="display:flex; flex-direction: row">
<div id="image_upload"
style="width: 50%; height: 300px; background-color: silver">
<!-- 사진 올리는 곳 -->
사진올리는 곳
</div>
<div style="width: 50%; height: 300px">
<!-- 글 쓰는 곳 -->
<div class="mb-3">
<textarea class="form-control" id="exampleFormControlTextarea1"
style="height: 300px">
</textarea>
</div>
</div>
</div>
'사진 업로드' 파트 작성하기
이미지를 drag 하여 창으로 가져왔을 때 변화가 발생하도록 설정합니다.
drag하여 가져온 이미지를 놓았을 때(drop) 이미지가 화면에 표시되도록 설정합니다.
'media' 폴더를 생성하고, settings.py 파일 안에 URL 정보를 입력합니다.
urls.py 파일에는 기존 urlpatterns 아래에 새롭게 urlpatterns를 입력합니다.
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDEA_ROOT)
'글 쓰기' 파트 작성하기
모달 코드 중 텍스트 받는 부분에 id="input_content"를 입력하고, jquery 설정 부분에 사용자가 입력한 값을 받아서 'content'라는 상수로 저장합니다.
데이터베이스에 전달하는 설정하기
content 폴더 안의 views.py에 Test라는 API를 작성하고, 이를 호출했을 때 동작은 main.html에 작성합니다.
추가 설정
임의로 이름을 변경하여 저장한 이미지파일은 웹 경로(http://)가 아니기 때문에 웹에서 불러올 수가 없습니다.
아래 설정처럼 <head>에 static을 불러오고 피드 사진을 불러오는 부분에 get_media_prefix를 입력하면 해결됩니다.
'Django(웹서비스 만들기)' 카테고리의 다른 글
| [6주차] AWS에 웹 서비스 배포하기 (0) | 2021.12.29 |
|---|---|
| [5주차] Git 사용하기 (0) | 2021.12.24 |
| [4주차] 사용자별 정보 다르게 출력하기 (0) | 2021.12.16 |
| [3주차] 회원가입, 로그인 만들기 (0) | 2021.12.07 |
| [1주차] Django로 웹 페이지 구성하기 (0) | 2021.11.21 |
