-
[김영한 스프링] 30. 스프링 MVC 웹 페이지 만들기 - 상품 서비스 HTMLSpring/스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 2023. 7. 20. 03:12
상품 서비스 HTML
부트스트랩
참고로 HTML을 편리하게 개발하기 위해 부트스트랩 사용했다.
먼저 필요한 부트스트랩 파일을 설치하자
부트스트랩을 다운로드 받고 압출을 풀자.
- 이동 : https://getbootstrap.com/docs/5.0/getting-started/download/
- Compiled CSS and JS 항목을 다운로드하자.
- 압축을 출고 bootstrap.min.css를 복사해서 다음 폴더에 추가하자
- resources/static/css/bootstrap.min.css
참고
부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. - 출처: 위키백과서버 실행
css 열기
http://localhost:8080/css/bootstrap.min.css
잘 열린다면 정상
열리지 않는다면 out폴더 삭제 후 서버 재 실행
상품 목록 HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link href="../css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="max-width: 600px"> <div class="py-5 text-center"> <h2>상품 목록</h2> </div> <div class="row"> <div class="col"> <button class="btn btn-primary float-end" onclick="location.href='addForm.html'" type="button">상품 등록</button> </div> </div> <hr class="my-4"> <div> <table class="table"> <thead> <tr> <th>ID</th> <th>상품명</th> <th>가격</th> <th>수량</th> </tr> </thead> <tbody> <tr> <td><a href="item.html">1</a></td> <td><a href="item.html">테스트 상품1</a></td> <td>10000</td> <td>10</td> </tr> <tr> <td><a href="item.html">2</a></td> <td><a href="item.html">테스트 상품2</a></td> <td>20000</td> <td>20</td> </tr> </tbody> </table> </div> </div> <!-- /container --> </body> </html>
main/resources/static/html/items.html 생성
상품 상세 HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link href="../css/bootstrap.min.css" rel="stylesheet"> <style> .container { max-width: 560px; } </style> </head> <body> <div class="container"> <div class="py-5 text-center"> <h2>상품 상세</h2> </div> <div> <label for="itemId">상품 ID</label> <input type="text" id="itemId" name="itemId" class="form-control" value="1" readonly> </div> <div> <label for="itemName">상품명</label> <input type="text" id="itemName" name="itemName" class="form-control" value="상품A" readonly> </div> <div> <label for="price">가격</label> <input type="text" id="price" name="price" class="form-control" value="10000" readonly> </div> <div> <label for="quantity">수량</label> <input type="text" id="quantity" name="quantity" class="form-control" value="10" readonly> </div> <hr class="my-4"> <div class="row"> <div class="col"> <button class="w-100 btn btn-primary btn-lg" onclick="location.href='editForm.html'" type="button">상품 수정</button> </div> <div class="col"> <button class="w-100 btn btn-secondary btn-lg"onclick="location.href='items.html'" type="button">목록으로</button> </div> </div> </div> <!-- /container --> </body> </html>
main/resources/static/html/item.html 생성
상품 등록 폼 HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link href="../css/bootstrap.min.css" rel="stylesheet"> <style> .container { max-width: 560px; } </style> </head> <body> <div class="container"> <div class="py-5 text-center"> <h2>상품 등록 폼</h2> </div> <h4 class="mb-3">상품 입력</h4> <form action="item.html" method="post"> <div> <label for="itemName">상품명</label> <input type="text" id="itemName" name="itemName" class="form-control" placeholder="이름을 입력하세요"> </div> <div> <label for="price">가격</label> <input type="text" id="price" name="price" class="form-control" placeholder="가격을 입력하세요"> </div> <div> <label for="quantity">수량</label> <input type="text" id="quantity" name="quantity" class="form-control" placeholder="수량을 입력하세요"> </div> <hr class="my-4"> <div class="row"> <div class="col"> <button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button> </div> <div class="col"> <button class="w-100 btn btn-secondary btn-lg" onclick="location.href='items.html'" type="button">취소</button> </div> </div> </form> </div> <!-- /container --> </body> </html>
main/resources/static/html/addForm.html 생성
상품 수정 폼 HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link href="../css/bootstrap.min.css" rel="stylesheet"> <style> .container { max-width: 560px; } </style> </head> <body> <div class="container"> <div class="py-5 text-center"> <h2>상품 수정 폼</h2> </div> <form action="item.html" method="post"> <div> <label for="id">상품 ID</label> <input type="text" id="id" name="id" class="form-control" value="1" readonly> </div> <div> <label for="itemName">상품명</label> <input type="text" id="itemName" name="itemName" class="form-control" value="상품A"> </div> <div> <label for="price">가격</label> <input type="text" id="price" name="price" class="form-control" value="10000"> </div> <div> <label for="quantity">수량</label> <input type="text" id="quantity" name="quantity" class="form-control" value="10"> </div> <hr class="my-4"> <div class="row"> <div class="col"> <button class="w-100 btn btn-primary btn-lg" type="submit">저장 </button> </div> <div class="col"> <button class="w-100 btn btn-secondary btn-lg" onclick="location.href='item.html'" type="button">취소</button> </div> </div> </form> </div> <!-- /container --> </body> </html>
main/resources/static/html/editForm.html 생성
파일로 확인
절대 경로 복사
서버를 통해서 확인
http://localhost:8080/html/addForm.html
/resources/static에 넣어두었기 때문에 스프링 부트가 정적 리소스를 제공한다.
그런데 정적 리소스여서 해당 파일을 탐색기를 통해 직접 열어도 동작하는 것을 확인할 수 있다.
참고
이렇게 정적 리소스가 공개되는 /resources/static 폴더에 HTML을 넣어두면, 실제 서비스에서도 공개된다. 서비스를 운영한다면 지금처럼 공개할 필요 없는 HTML을 두는 것은 주의하자.출처 : https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의
웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 MVC의 핵심 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., 원
www.inflearn.com
'Spring > 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 카테고리의 다른 글
[김영한 스프링] 32. 스프링 MVC 웹 페이지 만들기 - 상품 상세 & 상품 등록 폼 (0) 2023.07.24 [김영한 스프링] 31. 스프링 MVC 웹 페이지 만들기 - 상품 목록 타임리프 (0) 2023.07.23 [김영한 스프링] 29. 스프링 MVC 웹 페이지 만들기 - 상품 도메인 개발 (0) 2023.07.19 [김영한 스프링] 28. 스프링 MVC 웹 페이지 만들기 - 프로젝트 생성 & 세팅 & 요구사항 분석 (0) 2023.07.19 [김영한 스프링] 27. 스프링 MVC 기본 기능 - HTTP 메시지 컨버터 & 요청 매핑 헨들러 어뎁터 구조 (0) 2023.07.18