JSP

 

 

 

 

 

강좌와 약간씩 다를 수 있습니다.  

 content 값 varchar2 3000 으로 변경함.

 

drop table board   --> 기존 테이블 삭제

create table board(
 
    num number primary key,
    writer varchar2 (20),
    email varchar2(50),
    subject varchar2(50),
    password varchar2(10),
    reg_date  Date,
    ref number,
    ref_step number,
    ref_level  number,
    readcount number,
    content  varchar2(3000)
     
);          

 

class BoardDAO

package model;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class BoardDAO {

	Connection con;
	PreparedStatement pstmt;
	ResultSet rs;
	
	//데이터 베이스의 커넥션을 사용하도록 설정하는 메소드
	//lib 에  ojdbc7.jar 라이브러리 등록 할것  maver.repository 사이트 검색후 다운로드
	public void getCon(){
		try{
			//외부에서 데이터를 읽어들어야 하기에
			Context initctx =new InitialContext();
			//톰켓 서버에 정보를 담아놓은 고으로 이동
			Context envctx =(Context) initctx.lookup("java:comp/env/");
			//데이터 소스 객체를 선언
			DataSource ds =(DataSource) envctx.lookup("jdbc/pool");
			//데이터 소스를 기준으로 커넥션을 연결해주시오
			con =ds.getConnection();
			
		}catch(Exception e){
			e.printStackTrace();
		}
	}
	
	
	
}


 

CKEDITOR CDN  적용 

 

Header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>동영상과 다르게  부트스트랩 적용 Head 부분만 붙이면 됩니다.</title>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- CKEDITOR  -->
<script src="//cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>

 

Bottom.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>    
      <p id="footerP"></p>
<nav class="avbar navbar-inverse navbar-fixed-bottom">
  <div class="container text-center" style="color:#fff;">
   <ul style=" list-style:none;">
   		<li><h3>주소 : <a href="http://macaronics.net" >macaronics.net</a></h3></li>
   </ul>
  </div>
</nav>

 

BoardWrite.jsp

<%@page import="java.sql.Connection"%>
<%@page import="org.apache.catalina.connector.OutputBuffer"%>
<%@page import="model.BoardDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="Header.jsp"/>
</head>
<body>



<div class="row">
	<div class="col-md-2"></div>
	<div class="col-md-8">
		<h2 class="text-center">게시글 쓰기</h2>
		<form action="BoardWriterProc.jsp" method="post" \>
		  <table class="table table-striped">
		 	<tr>
		 		<td>작성자</td>
		 		<td><input type="text"  class="form-control" name="writer"></td>
		 	</tr>
		 	<tr>
		 		<td>제목</td>
		 		<td><input type="text"  class="form-control" name="subject"></td>
		 	</tr>
		 	<tr>
		 		<td>이메일</td>
		 		<td><input type="email"  class="form-control" name="email"></td>
		 	</tr>
		 	
		 	<tr>
		 		<td>비밀번호</td>
		 		<td><input type="password"  class="form-control" name="password"></td>
		 	</tr>
		 	
		 	<tr>
		 		<td>글내용</td>
		 		<td><textarea rows="10" cols="50" name="content" class="form-control"></textarea></td>
		 	</tr>
		  	<tr>
		 		
		 		<td colspan="2"  class="text-center">
		 			<input type="submit" value="글쓰기" class="btn btn-success">
		 			<input type="reset" value="다시작성" class="btn btn-warning">
		 			<button type="button"  class="btn btn-primary">전체 게시글보기</button>
		 		</td>
		 	</tr>
		 	
		  </table>
		</form>
	</div>
</div>


<jsp:include page="Bottom.jsp"/>


<script>
//CKEDITOR 적용 
CKEDITOR.replace('content', {
		
	width:'100%',
	height:'350'
		
});

</script>
</body>
</html>


 

 

 

 

 

동영상 강좌와 다르게  모바일 적용이 가능한 반응형 부트스트랩을 사용하였다.

여기서는  jsp 를 배우는 강좌 이기 때문에 html 적 요소에는 비중있게 생각 하지 않아도 될 것이다.

소스 :  https://github.com/braverokmc79/jsp_sin

 

 

유튜브 동영상 출처 :

소프트캠퍼스

강사 : 신형섭(잭임연구원)

저작권 : (주)소프트캠퍼스 http://www.softcampus.co.kr 더많은 무료 강의는 사이트에서 확인하실수 있습니다.

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

결혼 생활은 참다운 뜻에서 연애의 시작이다. -괴테

댓글 ( 4)

댓글 남기기

작성