개발_TIL | 2022-06-13 (38)

▷ 장고 팀 프로젝트 시작 (4)

   <로그인 / 회원가입 페이지 HTML>

     - base.html을 만들어 모든 페이지에 들어가는 header 부분과 footer 부분을 페이지에 html자체를 집어넣어줌 

{% extends 'base.html' %}

{% block title %}
로그인
{% endblock %}
{% block content %}
<div class="signin-wrap">
    <div id="login_form">
        <!--로그인 폼-->
        <form method="post" action="/sign-in/">
            {% csrf_token %}
            <h3 class="login" style="letter-spacing:-1px;">Ladder to Wine</h3>
            <hr>
            <label>
                <p style="text-align: left; font-size:12px; color:#666">Username</p>
                <input type="text" placeholder="아이디를 입력" id="username" name="username" class="size">
                <p></p>
            </label>

            <label>
                <p style="text-align: left; font-size:12px; color:#666">Password </p>
                <input type="password" placeholder="비밀번호를 입력" id="password" name="password" class="size">
            </label>
            {% if error %}
            <div class="alert alert-danger" role="alert">
                {{ error }}
            </div>
            {% endif %}
            <p>
                <input type="submit" value="로그인" class="sign-btn">
            </p>
        </form>
        <hr>
        <p class="find">
            <span><a href="">아이디 찾기</a></span>
            <span><a href="">비밀번호 찾기</a></span>
            <span><a href="/sign-up">회원가입</a></span>
        </p>
    </div>
</div>

{% endblock %}

css까지 적용된 로그인페이지

   <검색창을 이용한 와인 검색기능 구현>

     - DB에 저장된 와인들의 이름이 포함된 글씨를 작성 하였을 때, 와인의 이름을 나열하게끔 작성해주었다.

def search(request):
        if request.method == 'POST':
            searched = request.POST['searched']        
            winename = WineModel.objects.filter(name__contains=searched)
            return render(request, 'search.html', {'searched': searched, 'winename': winename})
        else:
            return render(request, 'search.html', {})

{% extends 'base.html' %}

{% block title %}
검색
{% endblock %}
{% block content %}

    {% if searched %}
        <div>
            <div>
                <div>
                    <h2> " {{ searched }} "가 포함된 와인을 검색하였습니다. </h2>
                </div>
                <br>
                {% for WineModel in winename %}
                    <p>
                        <a href="/wine/{{ WineModel.id }}" class="search-wine">- {{ WineModel.name }} {{ WineModel.year}} </a> <br>
                    </p>
                {% endfor %}
            </div>
            <div class="search-height">
                
            </div>
            {% else %}
            <div class="search-content">
                <br>
                <br>
                <h1> 찾고 있는 와인을 검색창에 입력해주세요. </h1>
            </div>
        </div>
            
    {% endif %}

{% endblock %}