2019.05.03 북마크 프로젝트의 개별 상세페이지를 만들고 링크를 연동하여 연결시켜 줍니다.

개인 Bookmark웹 만들기

  • 웹사이트를 통해 개인 북마크를 설정할 수 있다.
    • 북마크에는 url 주소와 사이트명이 들어간다.
    • 해당 사이트에 대한 설명과 작성일자가 자동으로 생성된다.
  • 메인 페이지에서 해당 북마크에 대한 리스트를 보여준다.
    • 메인페이지에서 북마크 추가하기 버튼으로 추가할 수 있다.
    • 해당 북마크를 클릭하면 상세페이지로 이동한다.
    • 상세페이지에서 수정 및 삭제를 할 수 있다.
    • base.html과 연동하여 쉽게 구현할 수 있도록 한다.

이번 시간에 할 것

  • 개별 템플릿 꾸미기
  • base.html과 연동시켜주기
  • 링크를 연결하여 페이지 이동시키기

개별 템플릿 만들기

bookmark 템플릿 수정하기

bookmark list

스크린샷 2019-05-04 오후 1 31 39
  • block content 구성
  • models 을 통해 생성된 object의 list들을 돌면서 한 줄씩 가지고 온다.
    • 해당 object의 id/ site_name/ url 나열
  • 각각의 링크 연결

bookmark_create

스크린샷 2019-05-04 오후 1 36 08
  • form을 활용하여 입력창 생성
  • post형식으로 전송
  • { csrf_token }을 작성하여 보안문제 해결
  • {{ form.as_p }} 를 적어줌으로서 한줄씩 띄우면서 create의 field에 등록된 것을 가지고 옴

bookmark_detail

D2667FDE-3F5D-4A6F-8B80-7B1587ABCA8A
  • 해당 컨텐츠의 이름/ url / content를 보여준다.
  • 수정과 삭제를 할 수 있도록 링크 연결

bookmark_delete

F11BCB62-DAD1-474D-8EC6-72B10C33BD98
  • form 형식으로 구현
  • 한번 더 실제로 지울지를 확인하는 페이지로 구성

bookmark_update

81B685AD-43C9-470D-AA9B-502CB6D026A9
  • create와 비슷하게 구현
  • 폼 형태로 입력할 수 있도록 구현

실제 실행 및 실제 페이지 확인

  • python manage.py runserver
스크린샷 2019-05-04 오후 2 30 54 스크린샷 2019-05-04 오후 2 20 46

+ Recent posts