Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Storage Gonie

19. (app1) 앱 다듬기(버튼을 이용한 리다이렉트, 클릭한 객체의 정보를 이용해 렌더링) 본문

웹개발/Django 웹서비스 개발(인프런)

19. (app1) 앱 다듬기(버튼을 이용한 리다이렉트, 클릭한 객체의 정보를 이용해 렌더링)

Storage Gonie 2019. 2. 12. 10:58
반응형

주제 : 버튼을 이용한 리다이렉트, 클릭한 객체의 정보를 이용해 렌더링하기


<버튼을 이용한 리다이렉트>


1. default.html에서 이 부분을 추가해주면 urls에 있는 것중 하나로 링크를 걸어줄 수 있다.

- 버튼이 보여지며 누르면 new_lottto로 이동한다.

<h2><a href="{% url 'new_lotto' %}"><span class="glyphicon glyphicon-plus btn btn-default"></span></a></h2>>





<클릭한 객체의 정보를 이용해 렌더링하기>


1. default.html에서 이 부분을 추가해줌 

- 텍스트 클릭시 객체의 Primary Key가 urls에 있는 name = 'detail' 인 url로 넘어가게 함

<h2><a href="{% url 'detail' lottokey=lotto.pk %}">{{lotto.text}}</a></h2>
<div class="container lotto">
  {% for lotto in lottos %}
  <h2><a href="{% url 'detail' lottokey=lotto.pk %}">{{lotto.text}}</a></h2>
  <p> {{lotto.update_date}}</p>
  <p> {{lotto.lottos|linebreaksbr}}</p>
  {% endfor %}
</div>


2. urls.py에서 맨 아래에 있는 url 추가.

- 예전엔 ~인 url일 때 지정된 메소드로 연결해줘라 이런 느낌이었는데, 여기서는 detail로 연결될 때 url을 다음의 것으로 지정해 줘라 이런느낌.

- 아래와 같이 해주면 html에서 전달받은 lottokey을 views.detail 메소드에 넘겨줄 수 있음.

urlpatterns = [
    url(r'^admin/', admin.site.urls), #localhost:8000/admin일 때
    url(r'^$', views.index),          #localhost:8000/일 때 views.index에 연결해준다.
    url(r'^lotto/$', views.index2, name='index'),
    url(r'^lotto/new/$', views.post, name='new_lotto'),
    #url(r'^lotto/[0-9]+/detail/$', views.detail1, name='detail1'), #regular expression 사용, localhost:8000/555/detail 같은 링크연결이 가능

    #localhost:8000/555/detail 같은 링크연결이지만 사용자가 링크 클릭시 눌린 객체의 primary key가 url에 자동으로 들어감
    url(r'^lotto/(?P<lottokey>[0-9]+)/detail/$', views.detail, name='detail'),
]


3. views.py에 detail 메소드를 추가함

- 특이사항으로 파라미터에 lottokey를 추가로 받아 사용할 수 있음

def detail(request, lottokey):
    lotto = GuessNumbers.objects.get(pk = lottokey) # pk는 primary key를 의미한다.
    return render(request, "lotto/detail.html", {"lotto" : lotto})


4. detail.html파일을 템플릿에 추가

<!DOCTYPE html>
{% load staticfiles %}
<html lang="ko">
<head>
  <title>My Little Lotto</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <link href="//fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/lotto.css'%}">
</head>

<body>
  <div class="page-header">
  <h1>My Lotto Page</h1>
  </div>
  <div class="container lotto">
    <h2>{{lotto.text}}</h2>
    <p> by {{lotto.name}}</p>
    <p> {{lotto.update_date}}</p>
    <p> {{lotto.lottos|linebreaksbr}}</p>
  </div>
</body>
</html>


아래의 그림은 "1등 만세!"를 클릭해서 불려진 detail 페이지



반응형
저작자표시 비영리

'웹개발 > Django 웹서비스 개발(인프런)' 카테고리의 다른 글

21. (app2) 셋업 및 urls.py와 views.py 수정( app2, polls 프로젝트 생성 및 Including another URLconf)  (0) 2019.02.17
20. python anywhere를 이용한 Django 프로젝트 배포  (0) 2019.02.12
18. (app1) POST 처리(form에서 버튼 클릭시 DB에 반영시키기)  (0) 2019.02.09
17. (app1) Django 데이터를 입력받는 form 만들기(form 형태만 만듬)  (0) 2019.02.09
16. (app1) Django MTV연동하기  (0) 2019.02.09
'웹개발/Django 웹서비스 개발(인프런)' Related Articles more
Comments