1. 기본 프레임 html에 드롭다운 생성
cd demo ($app_name)
vi templates/demo/basic_frame.html
<!DOCTYPE html>
<html>
<head>
<title>Shop Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand Demo</a>
</div>
</div>
</nav>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Category
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000004">문방구</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000006">패션의류</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000010">책/잡지</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000031">CD</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000041">키친용품</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000049">인테리어/가구</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000082">DIY</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000146">가전</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000162">컴퓨터</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/basic/000174">일상용품/생활용품</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
2. 기본 html 작성
vi templates/demo/basic.html
{% extends "brand/basic_frame.html" %}
{% block content %}
<div class="container-fluid bg-3 text-center">
<div class="row">
{% for d in data%}
<div class="col-sm-4">
<div class="media">
<div class="media-left media-middle">
<img src="{{d.imgurl}}" class="media-object" width="100" height="100">
</div>
<div class="media-body">
<h4> {{d.pname}} </h4>
<p> {{d.brand}} </p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
3. 드롭다운에서 얻는 카테고리 id (href="/basic/000004") url 주소로 파싱
vi urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^basic/$',views.basic.as_view(), name='basic'),
url(r'^basic/(?P<catid>[-\w]+)/$',views.basic.as_view(), name='basic'),
]
4. url 주소에서 얻은 카테고리 id의 데이터 반영
vi views.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
from django.views import View
from .models import *
# Create your views here.
class basic(View):
def get(self, request, *args, **kwargs):
#data = Product.objects.all()
catid = '000006'
if 'catid' in kwargs:
catid = kwargs['catid']
data = Product.objects.filter(cat1id=catid)
return render(request, 'brand/basic.html', context={'catid':catid,'data':data})
5. 드롭다운 동작 확인
https://~:8080/basic
- Reference
'Programming > Django' 카테고리의 다른 글
| [Django CSS] Bootstrap Templates (0) | 2018.09.07 |
|---|---|
| [Django CSS] Bootstrap Pagination (0) | 2018.09.06 |
| [Django CSS] 장고 CSS로 테이블 꾸미기 (0) | 2018.08.31 |
| [Django Paginator] 장고 paginator로 페이지 생성 (0) | 2018.07.12 |
| [Django Templatetags] 장고 템플릿태그 함수 생성 및 활용 (0) | 2018.07.12 |