Java Spring JSP웹페이지 만들기1 (인텔리 제이)

🥗 JSP란?

JavaServer Pages 의 약자이며, HTML 코드에 JAVA 코드를 넣어 동적웹페이지를 생성하는 웹어플리케이션 도구

🥗 웹 페이지를 만들기 위한 준비!

• 데이터베이스 세팅
• 인텔리제이 환경 설정(프로젝트 생성, 디렉토리 생성)

메인 페이지(bxSlider 활용)

---

🌮 작업 순서

① MySQL 워크벤치에서 데이터베이스 생성
② IntelliJ에서 New Project 생성
③ jsp페이지 만들기
④ controller 클래스 만들어서 실행

1. MySQL 워크벤치에서 데이터베이스 생성(게시판)

• root계정에서 스키마 생성 후 Users and Privileges에서 새로운 계정 생성(로그인 네임, 비번 지정)
• Schema Privileges에서 권한 설정(Select "ALL")

• 홈에서 mysql connection 새로 생성하기(username 새로 생성한 유저, 비번 넣기)

• test connection으로 연결 확인
• 게시판db 접속 후 board_db 더블클릭해서 사용(use) 상태로 만들어주기

• 게시판 샘플 코드 입력(MySQL)

2. IntelliJ에서 New Project 생성

프로젝트 생성 방법은 아래 링크에 포스팅!

🎈 JDBC 프로젝트용 기본 환경설정

3. 메인 페이지 로드용 소스 작성

🥨 home.jsp

//script 영역
$(function(){
           //bxSlider 설정용 스크립트
           $(".slider").bxSlider({
              auto:true,
              slideWidth: 600
           });
        });

//body 영역
<div class="wrap">
    <header>
        <jsp:include page="header.jsp"></jsp:include>
    </header>
    <section>
        <div class="content-home">
            <div class="slider">
                <div><img src="images/Chrysanthemum.jpg"></div>
                <div><img src="images/Desert.jpg"></div>
                <div><img src="images/Lighthouse.jpg"></div>
                <div><img src="images/Tulips.jpg"></div>
            </div>
        </div>
    </section>
    <footer>
        <jsp:include page="footer.jsp"></jsp:include>
    </footer>
</div>

🥨 header.jsp

<div class="top-bar">
        <div class="content">
            <img src="images/r-logo.jpg" alt="로고" class="top-left logo" onclick="goHome()">
            <h2 class="top-left top-home">Web Board</h2>
            <nav class="top-right">
                <ul>
                    <li class="suc" id="mname">테스트님</li>
                    <li class="suc"><a href="logout">Logout</a></li>
                    <li class="bef"><a href="loginForm">Login</a></li>
                    <li class="bef"><a href="joinForm">Join</a></li>
                </ul>
            </nav>
        </div>
    </div>

🥨 Controller.java

//@Controller, @Log 클래스 맨 위에 import 하기

@GetMapping("/")
    public String home(){
        log.info("home()");
        return "home";
    }

---

메인페이지 실행한 모습