회원가입, 로그인 기능 및 아이템 창 구현

회원가입 및 로그인

회원가입 창
html

<body>
<div class="container wrapper">
    <div class="header" th:fragment="bodyHeader">
        <a href="/main"><h3 class="text-muted">BIN SHOP</h3></a>
    </div>
    <form role="form" action="/members/new" th:object="${memberForm}"
          method="post">
        <div class="form-group">
            <label th:for="name">이름</label>
            <input type="text" th:field="*{name}" class="form-control"
                   placeholder="이름을 입력하세요"
                   th:class="${#fields.hasErrors('name')}? 'form-controlfieldError' : 'form-control'"></br>
            <label th:for="name">아이디</label>
            <input type="text" th:field="*{userId}" class="form-control"
                   placeholder="아이디"></br>

            <label th:for="name">비밀번호</label>
            <input type="password" th:field="*{userPassword}" class="form-control"
                   placeholder="비밀번호"></br>
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">제출</button>
    </form>
    <br/>
    <div class="footer" th:fragment="footer">
        <p>&copy; BIN Shop V1</p>
    </div>
</div> <!-- /container -->
</body>

</html>

이전에 강의에서 진행한 프로젝트에서 사용한 form을 가져와서 css를 적용했다.
일단은 간단하게 이름과 아이디 비밀번호만 입력받도록 했다.

입력된 정보는 memberForm class에 담겨서 전달되고 전달된 정보를 MemberController에서 받아서 repository 에 저장한다.

memberForm

package com.example.tp2.Controller;

import lombok.Getter;
import lombok.Setter;

@Getter @Setter
public class MemberForm {

    private String name;

    private String userId;
    private String userPassword;
}

이후 로그인을 완료하면 메인화면으로 이동하도록 설계했다.

메인화면에서도 로그인 창으로 이동할 수 있는 버튼을 만들었다.

추후에 로그인 완료시 이 버튼을 마이페이지로 이동하는 버튼으로 바뀌도록 코드를 수정할 예정이다.

아이템

메인화면 상품정보가 직접 입력한 아이템에 의해서 나타나도록 간단히 구조만 설계했다.

메인 화면
html

<section class="py-5">
            <div class="container px-4 px-lg-5 mt-5">
                <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
                    <div class="col mb-5" th:each="item:${items}">
                        <div class="card h-100">
                            <!-- Sale badge-->
                            <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                            <!-- Product image-->
                            <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
                            <!-- Product details-->
                            <div class="card-body p-4">
                                <div class="text-center">
                                    <!-- Product name-->
                                    <h5 class="fw-bolder" th:text="${item.name}">Special Item</h5>
                                    <!-- Product reviews-->
                                    <div class="d-flex justify-content-center small text-warning mb-2">
                                        <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>
                                    <!-- Product price-->
                                    <span th:text="${item.price}">$20.00</span>

                            </div>
                            <!-- Product actions-->
                            <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#"th:href="@{item/form/{id}(id=${item.id})}">상품 정보</a></div>
                                <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">장바구니</a></div>
                            </div>

                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </section>

thymeleaf의 반복 구조를 사용해서 아이템의 이름과 가격을 담은 상품 정보가 화면에 출력되도록 하였다.

또 pathvariable 을 이용하여 상품정보를 클릭하면 해당 상품 정보를 담고 있는 itemForm으로 이동하도록 하였다

(url 마지막 1 이 해당 상품의 id값)

Author And Source

이 문제에 관하여(회원가입, 로그인 기능 및 아이템 창 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bins1225/21.11.18

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

회원가입, 로그인 기능 및 아이템 창 구현

회원가입 및 로그인

아이템

Author And Source

좋은 웹페이지 즐겨찾기