2. 화면 구성 - (9) 회원정보 화면

[1] 개요

  1. URL

    - HOST/profile/<int:pk>

    - URL에 회원 아이디가 들어가는데, 임의의 ID를 입력하여 아무나 회원정보를 확인할 수 있는 문제 존재

 

  2. 구성

    - 가입 시 입력했던 회원정보를 확인

    - 현재, 점주로 등록 안되어 있어도 음식점 관련 내용도 뜨는 문제 존재

    - 회원정보 수정 버튼으로 회원정보 수정 화면으로 이동

    - 내가 작성한 리뷰 버튼을 누르면, 내가 작성한 리뷰 리스트가 출력

    - 현재, 내가 작성한 리뷰 실제 리스트 불러오는 기능 구현X

 

[2] CODE

  1. HTML

    - <details>와 <summary> 라는 태그를 활용하여 JavaScript 없이 내가 작성한 리뷰 리스트를 클릭하여 리스트를

      볼 수 있게 구현

/templates/profile.html

<div class="container" align="center">
            <div class="row col-xs-10 col-sm-10 col-md-4 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad" style="padding:10px; background:#fff; border-top:solid; border-bottom:solid; border-width:1px;">
                <div class="panel panel-info" style="padding-bottom:40px;">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="text-align:left; padding-top:20px;">
                            {% if request.session.sessionid == None %}
                            <img src="http://placeimg.com/100/100/any" style="width:50px; height:50px;">
                            {% else %}
                            <div style="text-align:left;"><img src="/static/img/{{Cust.custimg}}" style="width:100px; height:100px;">
                            {% endif %}
                            {{Cust.id}}</div>
                        </h3>
                    </div>
                    <div class="panel-body">

                        <div class="row" style="padding:10px;">
                            <div id="profile" name="profile" class="col-md-6 col-lg-6">
                                <table class="table table-user-information">
                                    <tbody style="text-align:left;">
                                        <tr>
                                            <td style="width:130px;">이름</td>
                                            <td>{{Cust.name}}</td>
                                        </tr>
                                        <tr>
                                            <td>생년월일</td>
                                            <td>{{Cust.birth}}</td>
                                        </tr>
                                        <tr>
                                            <td>성별</td>
                                            <td>{{Cust.gender}}</td>
                                        </tr>
                                        <tr>
                                            <td>이메일</td>
                                            <td>{{Cust.email}}</td>
                                        </tr>
                                        <tr>
                                            <td>연락처</td>
                                            <td>{{Cust.phone}}</td>
                                        </tr>
                                        <tr>
                                            <td>주소</td>
                                            <td>{{Cust.address}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-6 col-lg-6">

                                <table class="table table-user-information" style="text-align:left;">
                                    <tr>
                                        <td style="width:130px;">상호명</td>
                                        <td>{{Rest.rest_name}}</td>
                                    </tr>
                                    <tr>
                                        <td>대표자명</td>
                                        <td>{{Rest.host_name}}</td>
                                    </tr>
                                    <tr>
                                        <td>사업자등록번호</td>
                                        <td>{{Rest.reg_num}}</td>
                                    </tr>
                                    <tr>
                                        <td>음식점연락처</td>
                                        <td>{{Rest.phone}}</td>
                                    </tr>
                                    <tr>
                                        <td>음식점주소</td>
                                        <td>{{Rest.address}}</td>
                                    </tr>
                                    <tr>
                                        <td>개점시간</td>
                                        <td>{{Rest.openhour}}</td>
                                    </tr>
                                    <tr>
                                        <td>재료준비시간</td>
                                        <td>{{Rest.breakhour}}</td>
                                    </tr>
                                    <tr>
                                        <td>정보</td>
                                        <td>{{Rest.restindex}}</td>
                                    </tr>
                                    <tr>
                                        <!--음식점 사진은 여러 장 들어갈 수 있어서 수정 필요-->
                                        <td>음식점사진</td>
                                        <td style="text-align:left;"><img src="/static/img/{{Rest.restimg}}" style="width:100px; height:100px;"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br><br><br>
        <form style="position:absolute; left:50%; transform:translateX(-50%); text-align:center;">
            <input type="button" onclick="location.href='/profileupdate/{{request.session.sessionid}}'" style="font-size:14pt; border:none; width:250px; height:45px; border-radius:7px; background-color:#FFA722; color:white; " value="회원정보수정">
        </form>
        <br><br><br><br><br>
        <div class="container">
            <details>
                <summary>내가 작성한 리뷰</summary>
                <section class="" id="review2">
                    <div class="container px-5 my-1" style="border:1px solid; border-radius:10px">
                        <span class="nav-item" style="display: inline-block; width:200px; opacity: 0.5">사용자 아이디</span>
                        <span class="nav-item" style="opacity: 0.5">작성 날짜</span>
                        <span class="nav-item" style="display: inline-block; width:830px; opacity: 0.5"></span>
                        <!-- review edit delete-->
                        <span class="nav-item text-decoration-underline" style="display: inline-block; width:40px; opacity: 0.5"><a href="#">수정</a></span>
                        <span class="nav-item text-decoration-underline" style="opacity: 0.5"><a href="#">삭제</a></span>
                        <h1 class="lead fw-normal text-black mb-1 fs-6 float-start text-center" style="border:1px solid; width:4rem">서비스</h1>
                            <div class="d-flex justify-content-center small text-warning mb-2 float-start">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                        <h1 class="mx-1 lead fw-normal text-black mb-1 fs-6 float-start text-center" style="border:1px solid; width:4rem">음식</h1>
                            <div class="d-flex justify-content-center small text-warning mb-2 float-start">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star"></div>
                            </div>
                        <h1 class="mx-1 lead fw-normal text-black mb-1 fs-6 float-start text-center" style="border:1px solid; width:4rem">가격</h1>
                            <div class="d-flex justify-content-center small text-warning mb-2 float-start">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-half"></div>
                            </div>
                        <h1 class="mx-5 lead fw-normal text-black mb-1 fs-6 float-start text-center" style="width:4rem">메뉴</h1>
                        <h1 class="mx-5 lead fw-normal text-black mb-1 fs-6 float-start text-center" style="width:4rem">인원</h1>
                        <h1 class="mx-5 lead fw-normal text-black mb-1 fs-6 float-start text-center" style="width:4rem">목적</h1>
                        <!-- review photo title content-->
                        <div class="" style="clear:both">
                            <div class="col-xxl-1 d-none d-xl-block float-start mx-2"><a href="#"><img class="img-fluid rounded-3 my-1" src="{% static 'img/food1.jpg' %}" alt="..." /></a></div>
                            <div class="col-xxl-1 d-none d-xl-block float-start mx-2"><a href="#"><img class="img-fluid rounded-3 my-1" src="{% static 'img/food2.jpg' %}" alt="..." /></a></div>
                        </div>
                        <div style="clear:both">
                            <div class="my-3"><h2 class="h3">review title title title</h2></div>
                            <div class="col-lg-8">
                                <p class="mb-0">예약 할 때 요청사항을 절 맞춰주셔서 일단 들어가면서부터 너무 맘에 들었구요. 음식도 맛있는데 심지어 양도 많기까지! 주차가 조금 어렵지만 이 주변 주차가 다 그러니까 그건 어디든 마찬가지 일거예요.예약 할 때 요청사항을 절 맞춰주셔서 일단 들어가면서부터 너무 맘에 들었구요. 음식도 맛있는데 심지어 양도 많기까지! 주차가 조금 어렵지만 이 주변 주차가 다 그러니까 그건 어디든 마찬가지 일거예요.예약 할 때 요청사항을 절 맞춰주셔서 일단 들어가면서부터 너무 맘에 들었구요. 음식도 맛있는데 심지어 양도 많기까지! 주차가 조금 어렵지만 이 주변 주차가 다 그러니까 그건 어디든 마찬가지 일거예요.</p>
                            </div>
                        </div>
                    </div>
                </section>
            </details>
        </div>

 

  2. CSS

    - /static/css/styles.css

 

  3. JavaScript

    - 적용 사항 없음

 

  4. Application

    - profile(pk)

      1) sessionid를 URL로 받아서 요청하여 회원정보 페이지인 profile.html 출력

      2) context로 회원정보와 점주인 경우 음식점 정보를 보내서 활용

    - 현재 URL로 임의의 ID를 입력하여 접근하는 것이 가능하여 보안 문제 발생

      -> URL은 /profile 로 변경하고, 회원정보를 Cust 모델에서 불러올 때 request.session['sessionid']를 활용해야 함

/web/views.py -> class MyView(View)

@request_mapping("")
class MyView(View):

    @request_mapping("/profile/<str:pk>", method="get")
    def profile(self, request, pk):
        profile = Cust.objects.get(id=pk);
        try:
            Rest.objects.get(cust_id=pk);
            restprf = Rest.objects.get(cust_id=pk);
        except:
            restprf = '';
        context = {
            'Cust': profile,
            'Rest': restprf
        };
        return render(request, 'profile.html',context);

- 끝 -