성장 기록 블로그🌴

## 자바 스프링 뿌시기! ( jsp 프로젝트 생성 , Spring 파일 환경설정 세팅 , 게시판 홈페이지 만들기 , Spring 홈페이지 만들기 , Spring 회원 테이블 ) 본문

AI & BigData 교육과정/자바 Spring & SQL 관련

## 자바 스프링 뿌시기! ( jsp 프로젝트 생성 , Spring 파일 환경설정 세팅 , 게시판 홈페이지 만들기 , Spring 홈페이지 만들기 , Spring 회원 테이블 )

wlswls2s 2022. 10. 21. 15:38
728x90

< 자바스프링 내용 >

 

◆ 자바스프링 기본

개념정리

< 홈페이지 결과 미리보기 >

< 새로운 프로젝트 만들기 > 

● 기존 파일 Ctrl+C , Ctrl+V 해서 파일 이름 SpringMVC02 변경 후 Tomcat Server에 끌어와서 서버 연결해주고 기존에 있던 SpringMVC01은 삭제해줌! 서버가 겹치면 안됨!

# 02. 실행 Spring 파일과  DB와 연결해주기!

- 먼저, C드라이브 들어가서 eGovFrame있는 곳에서 bin - mysql 들어가서 startup으로 해서 ping 할 수 있는 환경 만들어줌!

 

- Data Source Explorer 선택 후 Connect로 DB와 연결해주기!

 

 

# 03. 파일 좌클릭 -> Run as - Server 선택하는데 localhost 아래에 있는 Tomcat으로 선택해주고! ( 그냥 local host 선택하면 안됨 ) -> always로 항상 실행할때마다 자동으로 연결될 수 있도록 체크해주기!

=> 여기까지 해주면 새 프로젝트 환경설정 세팅 끝!

=> 게시판 홈페이지 만들기! 

-나머지는 그대로 list.jsp만 예쁘게 꾸며주기!

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt"%><!-- 필수 -->
    
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <script>
     // $의 의미는 선택자! select -> 찾아가라는 의미! 
     // ready() 메서드 : 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체의
     //             로딩이 끝나면이벤트를 발생시킴!
     $(document).ready(function(){
        
        // 버튼을 클릭할 때 발생하는 메서드 지정!
        $("button").click(function(){
           
           // 내가 register.jsp 파일로 가고싶어도 그럴 수없음!
           // Controll한테 register.do로 지시를 해서 그 경로를 통해 jsp파일로 넘어가게!
           location.href="register.do";
        });   
        
        
     }); 
  </script>
</head>
<body> 
 
  <div class="card">
    <div class="card-header">
       <div class="jumbotron jumbotron-fluid" style="background-color : #FAFAD2;">
         <div class="container">
             <h1>♣~This is My Homepage^-^~♣</h1>
             <h5>Welcome to wls homepage!!</h5>
         </div>
      </div> 
    </div>
    <div class="card-body">
       <div class="row">
          <!-- 컬럼을 2:7:3 비율로 나눠서 사용하겠다!  -->
          <div class = "col-lg-2">
           <div class="card" style="min-height: 500px; max-height: 1000px;" >
            <div class="card-body">
            	<!-- 로그인 실패코드 : m에 값이 없다면! empty m -->
               <c:if test="${empty m}">
               <h4 class="card-title">Guest</h4>
               <p class="card-text">회원님 Welcome!!</p>
               <form action="login.do" method= "post">
                  <div class="form-group">
                     <label for="memId">아이디</label>
                     <input type="text" class="form-control" name="memId"/>
                  </div>
                  <div class="form-group">
                     <label for="memPwd">비밀번호</label>
                     <input type="password" class="form-control" name="memPwd"/>
                  </div>
                  <button type="submit" class="btn btn-sm btn-primary form-control">로그인</button>
               </form>
               </c:if>
               <!-- 로그인 성공코드 : m에 값이 있다면! !empty m -->
               <c:if test="${!empty m}">
                <h4 class="card-title">${m.memName}님의 페이지</h4>
               <p class="card-text">회원님 Welcome!!<br><br>
               <img src="resources/img/img7.jfif" class="img-circle" alt="Cinque Terre" width="180" height="200">
               	
               </p>
                 <button type="button" class="btn btn-sm btn-primary form-control">로그아웃</button>
               </c:if>
            </div>    
           </div>
          </div>
          <div class = "col-lg-7">
             <div class="card" style="min-height: 500px; max-height: 1000px;">
             <div class="card-body">
               <h4 class="card-title">BOARD</h4>
               <!-- 게시판 리스트 보기 화면 구현! -->
               <table class = "table table-bordered table-hover">
               <thead>
                   <th>번호</th>
                   <th>제목</th>             
                   <th>작성자</th>          
                   <th>작성일</th>
                   <th>조회수</th>          
                  </thead>
                  
                  <tbody>             
                  <c:forEach var="vo" items = "${list}">
                  <tr>
                        <td>${vo.idx}</td>
                        <!-- 상세보기 기능! 게시판 번호를 가지고 와서 값을 넘김!-->
                        <td><a href="get.do?idx=${vo.idx}">${ vo.title}</a></td>
                        <td>${ vo.writer}</td>
                        <td><fmt:formatDate value="${vo.indate}" pattern="yyyy-MM-dd" /></td>
                        <td>${ vo.count}</td>                                          
                     </tr>
                     </c:forEach>   
            </tbody>
       </table>
       <button class="btn btn-sm btn-primary">글쓰기</button>
             </div>
             </div>
          </div>
           <div class = "col-lg-3">
              <div class="card" style="min-height: 500px; max-height: 1000px;">
              <div class="card-body">
              <h4 class="card-title">My Menu</h4>
              <p class="card-text">  페이지 내용을 작성하세요. 
              </p>
              </div>
              </div>
           </div>
       </div>
    </div>
    <div class="card-footer">Made by>(AI.BigData 취업역량강화)_wls</div>
  </div>

</body>
</html>

=> 이미지 태그 넣는 법!

https://www.w3schools.com/bootstrap/bootstrap_images.asp

 

Bootstrap Images

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

=> 여기서 원하는거 소스코드 받아오기!

- 스크립트에 이거 붙여넣고

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

원하는 곳에 이거 넣으면 끝

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">

이미지 파일은 여기에 옮기기!

# 아이디, 비밀번호 받아주는 Member.java 만들어주기!

 

01. Member.java 파일 생성 후에 String memId , String memPwd 만들어주기

package kr.smhrd.entity;



public class Member {
	
	private String memId;
	private String memPwd;
	private String memName;
	
	// setter, getter - Lombok API
	
}

02. memId, memPwd, memName에 대해서 setter, getter를 만들어야하는데 이를 자동으로 생성해주는 API 설치

=> lombok 라이브러리! - 1.18.12 버전 다운로드 후 pom.xml에 다운로드!

 

03. 다시 Member.java 파일로 돌아와서 클래스명 위에 @Data하면 자동으로 생성된 것을 확인할 수 있음!

package kr.smhrd.entity;

import lombok.Data;

// 여기에 @Data 해주면 자동으로 setter getter 생성됨
@Data
public class Member {
	
	private String memId;
	private String memPwd;
	private String memName;
	
	// setter, getter - Lombok API
	
}

 

# db.sql에 Member 테이블을 생성하고 회원정보 3명만 받아보기!

- db.sql

create table member(
	memId varchar(30) not null,
	memPwd varchar(30) not null,
	memName varchar(30) not null,
	primary key(memId)
);

insert into member(memId, memPwd , memName)
values('smart', '1234', '길동이');

insert into member(memId, memPwd , memName)
values('wlswls', '1111', '기가지니');

insert into member(memId, memPwd , memName)
values('pororo', '9999', '뽀로로');

select * from member;

728x90

'AI & BigData 교육과정 > 자바 Spring & SQL 관련' 카테고리의 다른 글

## 자바 스프링 ( 자바 스프링 게시판 홈페이지 , 로그아웃 기능 구현 , 스프링 프로필 사진 추가하기 , 스프링 본인 글만 수정 삭제 , 스프링 로그인 후 글쓰기 , 자바 스프링 게시판 페이지 총 ..  (0) 2022.10.22
## 자바 스프링 ( 로그인 페이지 만들기 , 스프링 로그인 기능 구현하기 )  (1) 2022.10.21
## 자바 스프링 ( jsp 게시글 상세보기 페이지 , jsp 게시글 삭제 기능 , jsp 게시글 수정 기능 , jsp 조회수 업데이트 기능 , java 폴더 내보내기 , 자바 폴더 export , 게시판 만들기 소스 코드 파일 )  (0) 2022.10.21
## 자바 스프링 ( jstl for-each문 arraylist, jstl 날짜 포맷팅 , 게시판 정보 jstl로 출력하기 , jstl date 날짜 형식 바꾸기 , jQuery data-xx 속성 지정 )  (0) 2022.10.21
## 자바 스프링 for문 사용하기! ( jsp for문, jstl for문 , 스프링 for-each문 , Spring에서 for문 , if문 , 글씨 사이즈 점점 키우기 , Spring 배열 리스트 출력)  (0) 2022.10.20
'AI & BigData 교육과정/자바 Spring & SQL 관련' Related Articles more