PC

블로그 이미지

DAVID

160414: 23회차

Programming 2016. 4. 14. 18:20

종료하기 전 티스토리 네이버 로그아웃 할 것


1. 툴

동일

추가시: 


2. 폴더

동일

추가시:


3. 사용할 사이트

동일

추가시:


4. 공부하는 것


notice 변경


select nvl(max(no),0)+1 from notice

↑nvl문


sysdate



oracle은 comma 관리를 잘 해야 한다.


--------------------------------------------------


4시 37분부터 수업 시작이쉰것



[12][메모장] 등록, 조회, 수정, 삭제, Action Tag(useBean, setProperty, getProperty) 변환

[01] 등록 

http 프로토콜을 이용해서 요청한다.

웹 컴포넌츠- jsp

자바빈 - 디애이오 디티오 부이오친구들



[02] Action Tag 

1.  <jsp:useBean  id="" class=""  scope=""/>

   - id와 scope 속성에 맞는 기존의 존재하는 객체를 먼저찾고 찾지 못했을
   경우에 새로운 객체를 생성한다.

//기존에 이름이 같은 애가 있으면 코드 이상해지는거십니다

   - id : 빈을 유일하게 구분하는 속성
   - class : 빈의 패키지를 포함한 이름
   - scope : application, session, request,page   
     자바빈즈의 유효범위(생명력이 다하는 때까지)를 나타내며, 기본값은 page


  application : 응용프로그램 모든 페이지에서 자바빈즈 객체 사용
  session      : 세션이 유효한 페이지까지 자바빈즈 이용가능   

//브라우저가 서버가 연결되어진 상태  
  request     : request 객체가 영향을 미치는 모든 JSP페이지 까지 자바빈즈
                  사용가능
  page        : 현재의 jsp페이지 내에서만 사용가능, 기본값으로 지정하지
                  않으면 이옵션 적용
페이지가 젤 작은 유효범위
애플리케이션이 제일 큰 유효범위



2. <jsp:useBean>  
   <jsp:setProperty name=""  property="" />

  - parameter의 값을 bean의 필드에 저장
 
  - name:bean name
  - property : 빈 필드명

조기다가 * 넣으면 모든 setter를 다 사용 가능 :>


3. <jsp:getProperty name=""  property="" />
  
 -  bean의 필드에서 값을 가져옴


얘는 표현식 없이 getter 안쓰고 바로 출력 가능 :> - 이긴 한데 *을 못쓰니까 그게 그거야... -.-

길이상으로 그게 그거여서 그냥 <%=dto.getPop() %> 같이 쓰는 게 짧음


------------------------------------------------------------------------------------------------------

[13] CSS의 사용, Action TAG를 이용한 Template 페이지의 제작 실습

[01] CSS(Cascading Style Sheet)의 사용 


인클루드 액션태그!


     - HTML은 구조 및 데이터 출력의 목적을 갖으며 CSS는 출력되는 HTML을
       시각적인 효과를 적용하는 기능을 함.

 

     - HTML에서 시각적인 부분을 CSS로 분리하면 유지보수성이 향상된
       웹사이트 개발가능. - 디자인 쪽은 따로 분리하는 것이 좋음...
       . HTML이 간결해짐.


 

     - SELECTOR{속성:값}의 형태, SELECTOR(태그 선택자)는
       어느 태그에 CSS를 적용할지를 지정
 
       예)
          BODY{         <-- BODY 태그에 적용
              font-size: 20px;
          }
 
          OL LI{        <-- OL태그안의 LI 태그
              font-size: 20px;
          }
 
          *{            <-- 모든 태그
              font-size: 20px;
          }
 
          #menu LI{     <-- id가 menu인 태그안의 LI 태그
              font-size: 20px;
          }

          .title{       <-- class 속성으로 사용
              text-align: center;
          }
 

- 주석: /* */

 
     - 태그에 class 속성과 style 속성이 있으면 style속성이 우선 적용 됩니다.
      <td width="500" class="td_left" style="height:250px" >
         <%=content%>
       </td>


- 스타일 속성 - 클래스 속성은 보통 생각하는 거랑 반대임


 

1. 태그에 직접 스타일을 주는 경우
  - 태그 발생시마다 스타일을 적용하여 주어야 함으로 반복 코드가 많이 발생되.

    <DIV style='font-size: 24px'></DIV>




2. <HEAD>태그안에 스타일을 주는 경우
   - 태그안에 직접 명시한 것보다 우수하나 다른 파일에서는 CSS 가져다 사용이 어려움.
  

    <style type="text/css"> 

    *{ 
      font-family: gulim; 
      font-size: 24px; 
    } 
    </style> 





3. CSS 파일에 스타일을 주는 경우(권장)
   - CSS를 독립 파일로 만들어두어 프로젝트에 경로 설정만으로 재사용이 가능.
   - CSS 파일의 사용: <link href="../css/style.css" rel="Stylesheet" type="text/css">
                            //얘네를 빠트리면 인식이 안된다 ! href + rel + type

>>>>> /WebContent/css/style.css 

/* 제목 */
.title{
  font-size: 28px;
  text-align: center;
  border-style: solid;   /* 실선 */
  border-width: 1px;     /* 선 두께 */
  border-color: #AAAAAA; /* 선 색깔 */
  color: #000000;        /* 글자 색깔 */
  width: 30%;            /* 화면의 30% */ 
  padding: 10px;         /* 위 오른쪽 아래 왼쪽: 시간 방향 적용 */
  
  /* padding: 50px 10px;  50px: 위 아래, 10px: 좌우 */
  /* padding-top: 30px;  상단만 간격을 30px 지정   */
  
  margin: 20px auto; /* 가운데 정렬 기능, 20px: 위 아래, auto: 오른쪽 왼쪽*/
}
 
/* 내용 */
.content{
  font-size: 24px;
  text-align: center;
  width: 100%;
  padding: 10px;  /* 위 오른쪽 아래 왼쪽 */
  margin: 0 auto; /* 가운데 정렬 */
}
 
/* 하단 메뉴 */
.bottom{
margin: 20px auto;
  text-align: center;
  width: 100%;
  padding: 10px;  /* 위 오른쪽 아래 왼쪽 */
}
 
 
/* 테이블에 CSS 적용 */
TABLE{
  margin: 0 auto;            /* 테이블 가운데 정렬 */
  border-color: #AAAAAA;     /* 테이블 외곽선 색깔 */ 
  border-width: 1px;         /* 테이블 외곽선 두께 */ 
  border-style: solid;       /* 테이블 외곽선 스타일 */
  border-collapse: collapse; /* 컬럼의 외곽선을 하나로 결합 */
 
}
 
TH{ //th만의 배경색 지정 가능
  border-color: #AAAAAA;     /* 테이블 외곽선 색깔 */ 
  border-width: 1px;         /* 테이블 외곽선 두께 */ 
  border-style: solid;       /* 테이블 외곽선 스타일 */
 
  color: #FFFFFF;            /* 글자 색 */ 
  background-color: #668db4; /* 배경 색 */
  padding: 5px;              /* 셀 내부 간격 */
}
 
 
td{
  border-color: #AAAAAA;     /* 테이블 외곽선 색깔 */ 
  border-width: 1px;         /* 테이블 외곽선 두께 */ 
  border-style: solid;       /* 테이블 외곽선 스타일 */
 
  color: #000000;            /* 글자 색 */ 
  background-color: #FFFFFF; /* 배경 색 */
  padding: 5px;              /* 셀 내부 간격 */  
}
 
 
.input{
  padding: 0px;
  border-color: #AAAAAA;     /* 테이블 외곽선 색깔 */ 
  border-width: 1px;         /* 테이블 외곽선 두께 */ 
  border-style: solid;       /* 테이블 외곽선 스타일 */
 
  border-top-style: none;
  border-right-style: none;
  border-left-style: none; 
}
 
.textarea{
  padding: 0px;
  border-color: #AAAAAA;     /* 테이블 외곽선 색깔 */ 
  border-width: 1px;         /* 테이블 외곽선 두께 */ 
  border-style: solid;       /* 테이블 외곽선 스타일 */
 
  border-top-style: none;
  border-right-style: none;
  border-left-style: none; 
}
 
A:link {     /* A 태그의 링크 속성 */
  text-decoration: none;     /* 문자열 꾸미기값을 지정하지 않음, 밑줄 삭제 */
  color: black;              /* 글자색깔 검정 */
}
                                             
A:hover{     /* A 태그에 마우스가 올라 갔을 경우 */
  text-decoration: none;     /* 문자열 꾸미기값을 지정하지 않음, 밑줄 삭제 */
  background-color: #E6F7FF; /* 배경 색 변경*/
  color: black;              /* 문자열 색깔 */ 
}
 
A:visited{     /* A 태그의 링크를 방문한 경우 */
  text-decoration: none;     /* 문자열 꾸미기값을 지정하지 않음, 밑줄 삭제 */
  color: black;              /* 글자색깔 검정 */
}

memo -> webcontent -> css 폴더 -> style.css


좀 졸았음.
http://lectureblue.pe.kr/reqtiles/read.jsp?bbsno=82&nowPage=2&col=&word=&code=7
다시 읽을 것


이건 css_test.jsp


<%@ page contentType="text/html; charset=UTF-8" %> 

<% request.setCharacterEncoding("utf-8"); %> 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<title></title> 

<style type="text/css"> 

*{ 

  font-family: gulim; 

  font-size: 24px; 

} 

 

#idcss{

  color: #FF0000;             /* 빨간색 */

  background-color: #FFFF00;  /* 노란색 */

  font-size: 50px;

  text-align: center;

  width: 35%;

  margin: 0 auto;

}

</style> 

<!-- <link href="./style.css" rel="Stylesheet" type="text/css"> -->

</head> 

<body> 

  <DIV class='title'>게시판 version 2.0</DIV>

  

  <DIV class='content'>내용</DIV>

  

  <TABLE class='table'>

    <TR>

      <TH>번호</TH>

      <TH>제목</TH>

      <TH>내용</TH>

    </TR>

    <TR>

      <TD align='center'>1</TD>

      <TD align='center'>월요일</TD>

      <TD>첫눈</TD>

    </TR>

    <TR>

      <TD align='center'>2</TD>

      <TD align='center'>화요일</TD>

      <TD>메모장 제작</TD>

    </TR>

    <TR>

      <TD align='center'>3</TD>

      <TD align='center'>수요일</TD>

      <TD>메모장 테스트</TD>

    </TR>

  </TABLE>

 

  <DIV class='content'>

    <A href='http://www.kma.go.kr'>기 상 청</A><br>

  </DIV>  

  

  <DIV id='idcss'>

    <br>

    고유한 CSS 적용

    <br><br>

  </DIV>

  <DIV class='bottom'>하단 메뉴</DIV>

</body> 

</html> 

 


-----------------------------------


[02] Action TAG를 이용한 Mneu 페이지의 제작 실습

     - <%@ include file="./ssi.jsp" %>
@ 들어가는 스크립틀릿은 지시자!
       ssi.jsp의 JSP 소스가 그대로 복사되어 원본 파일에 추가됨.    

차이점: 한꺼번에 파싱 - 한꺼번에  컴파일한다



     - <jsp:include page="/menu/top.jsp" flush="false"/>
이건 액션 태그

       top.jsp가 처리가 되고 나서 HTML로 변경된 결과가 포함.
flush를 true로 놓으면 오류가 많이 남 (기존 값 인정하고 뭐시기)
false로 놓으면 기존에 가던 거 취소하고 그냥 자기 자신을 보냄 - false가 나음
그래서 기본값이 false임
차이점: 각자 파싱 - 각자 컴파일한다 

 
     - menu는 jsp:include Action 태그를 사용해야 페이지간 간섭을
       피할 수 있습니다. 
       include file을 사용하면 같은 변수가 2번이상 선언될 경우 소스 충돌로
       에러 발생.

     - menu Layout(스마트폰 편리)


       ──────────────────────
                        상단 주메뉴                 
                          top.jsp                   
       ──────────────────────
                                                    
                                                    
                            내 용                  
                                                         
                                                        
        ─────────────────────       
                         하단 메뉴                   
                         bottom.jsp                  
        ─────────────────────
 


이런 애들은 include action tag로 만들면 항상 위 아래 보여줌

// 중복되어지는 것들은 파일로 한번에 컴파일해서 실행! :>

// 항상 보이는 것들은 각각 파일로 따로 만들어서 실행

















--------------------------------------------------------------------------------------------------------

Include 지시자와 Include action태그의 차이점을

http://khquasar.egloos.com/673282

★ Include 지시자

JSP 페이지내부에 다른 파일을 포함하고자 할 때 사용하며 포함된 파일의 내용이 지시자로 지정된 위치에 놓이게 한다.

즉, 해당 JSP page로 복사된 형태로 들어가 같이 번역(서블릿 파일로 변환)되고 컴파일되어 하나의 JSP 파일을 생성한다

★ Include action

JSP 페이지 수행시점에 해당 URL을 실행시켜서 결과를 포함시킨다.

Include 지시자와는 달리 실행시점에 동적/정적인 개념이 포함된다.


==================================================================


include 에는 크게 2가지가 있습니다. 잘 아시는 <%@ include file="" %> 과 조금은 낯선 <jsp:include page="" flush="true"/> 입니다. 일단 3개의 파일을 먼저 보겠습니다. 

  



ok.jsp

<%@ page contentType="text/html;charset=euc-kr"%><%

String ab="파일 ok.jsp 입니다.";

%><%=ab%>

<br>

<%@ include file="okD.jsp" %>

<br>

<jsp:include page="okA.jsp" flush="true"/>



  


unix 계열에서 돌아갈 경우 소스입니다. 한글 때문에 한번더 꽈줍니다. 


okD.jsp

<%

String abc="파일 okD.jsp 입니다.";

%><%=new String(abc.getBytes("8859_1"),"euc-kr")%>

<br><%=new String("HTML 텍스트입니다.".getBytes("8859_1"),"euc-kr")%>

<br>



  


환경(jsp엔진)에 따라 아래처럼 인코딩을 없애줘도 됩니다. 재수가 좋은 경우죠 


(okD.jsp)

<%

String abc="파일 okD.jsp 입니다.";

%><%=abc%>

<br>HTML 텍스트입니다.

<br>



  


page Directive로 charset을 정해주어야 한글이 깨지지 않습니다. 

okA.jsp

<%@ page contentType="text/html;charset=euc-kr"%><%

String abc="파일 okA.jsp 입니다.";

%><%=abc%>

<br>

<br>



  


파일 3개를 저장하시고, 브라우저에서 http://localhost:8080/ok.jsp 로 실행해보십시오. 물론 기본디렉토리에 위치시켜야죠. 이거 질문하는 분들 장난아니게 많습니다. tomcat 의 경우 server.xml 을 변경하지 않고 bin/startup.bat (startup.sh) 를 실행하셨다면 webapps/ROOT/ 가 기본디렉토리입니다. resin 의 경우는 doc 디렉토리가 기본 디렉토리겠죠. apache 랑 연동했을 경우 apache의 DocumentRoot 를 톰캣의 c:/jakarta-tomcat/webapps/ROOT 로 맞춰주시는 것이 헷갈리지 않을 겁니다. 

  


include Directive 는 <%@ ... %> 로 싸여있습니다. @은 Directive 라는 의미죠. 포함하는 문서에 정적으로 컴파일 됩니다. 포함하는 파일(ok.jsp)에서 사용한 변수를 따로 선언하지 않고 바로 사용할 수 있습니다. 물론 여기(okD.jsp)에서 선언된 변수도 포함하는 파일(ok.jsp)에서 따로 선언하지 않고 사용할 수 있습니다. 대신 이 파일(okD.jsp)을 변경할 경우 포함하는 파일(ok.jsp)의 시스템 날짜를 변경해서 재컴파일을 유도해야 이 파일(okD.jsp)의 변경사항이 적용되는 것을 볼 수 있습니다. 

  


include Action은 xml 형식으로 <jsp:include page=... flush="true" /> 를 사용합니다. flush="true" 는 그냥 쓰십시오 false로 바꾼다거나 빼먹거나 하면 안됩니다. 묻지 마십시오. 다칩니다. (==O%TT; 퍽!) 

  


include Action은 동적이라고 합니다. 처음엔 저도 이해가 안 갔습니다. 하지만 쓰면서 이 넘이 얼마나 독립적인지 아주 잘 알게 되었고, 왠만한 경우 저는 directive 보다는 action 을 사용합니다. 이 넘은 포함하는 파일과 상관없이 실행이 됩니다. directive 의 경우 ok.jsp와 okD.jsp 의 소스가 합져져서 하나로 컴파일되어 동작하는 것과 같지만 action 의 경우 ok.jsp 컴파일하고 okA.jsp 따로 컴파일되어서 ok.jsp가 okA.jsp를 호출해서 사용하고 다시 ok.jsp가 동작하는 구조라고 생각하시면 될 것입니다. (죄송합니다만 제가 경험상 체득한 것이라 검증이 필요한 부분입니다.) 

  


include Action 에는 page directive가 있습니다. include directive 에는 Page directive 가 없습니다. 만일 okD.jsp 에 <%@ page contentType="text/html;charset=euc-kr"%> 를 넣는다면 contentType="text/html;charset=euc-kr" 가 두개가 되기 때문에 Page directive: can't have multiple occurrences of contentType 라고 Exception 메시지를 보실 수 있습니다. import 속성이 틀리다면 contentType="text/html;charset=euc-kr" 만 삭제해주시면 될 것입니다. (이것도 자주 질문 하시는 것 중의 하나입니다.) 

  


파일을 변경해보겠습니다. (ok.jsp) 는 

ok.jsp

<%@ page contentType="text/html;charset=euc-kr"%><%

String ab="파일 ok.jsp 입니다.";

%><%=ab%>

<br>HTML 텍스트입니다.

<br>

<br>

<%@ include file="okD.jsp" %>

<br>

<jsp:include page="okA.jsp" flush="true">

  <jsp:param name="ab" value="<%=ab%>"/>

</jsp:include>



  



okD.jsp

<%

String abc="파일 okD.jsp 입니다."+"###"+ab;

%><%=new String(abc.getBytes("8859_1"),"euc-kr")%>

<br><%=new String("HTML 텍스트입니다.".getBytes("8859_1"),"euc-kr")%>

<br>



  



okA.jsp

<%@ page contentType="text/html;charset=euc-kr"%><%

String ab =request.getParameter("ab");

String abc="파일 okA.jsp 입니다."+"###"+ab;

%><%=abc%>

<br>

<br>



  


이해가 가실라나요? 변수전달방법입니다. Action 에 대해서 좀더 살펴봐야 할 것이 있습니다. 


출처: http://egloos.zum.com/khquasar/v/673282





지시자와 액션태그(2)

01087129057 | 2009.05.23 12:04목록크게

댓글쓰기

선도부 : 자..이번에는 include에 대해서 배워볼까.

            일단 include는 그냥 include와 include액션태그로 나눠서 생각할수있어.

           

            먼저 네가 메인으로 나가는 페이지를 하나 만들었다고 생각하자

            메인페이지의 상단과 하단부분에 각각 다른내용이 들어가겟지?

            이것을 하나의 페이지에 전부 표현한다면 페이지의 길이가 많이 길어지고

            수정하기도 어려을거야.

 

            --------------------------------------------------

                                             상단

            --------------------------------------------------

                                             중단

            --------------------------------------------------

                                             하단

            --------------------------------------------------

 

            만약 중단 부분만 메인페이지로 정하고 상단과 하단을 다른 페이지로 작성후

            중단페이지가 상단페이지와 하단페이지를 끌어와서 하나의 페이지로 보여주는거지

            보여지는건 하나의 페이지지만 실제로는 3개의 페이지가 합쳐져서 보여지는거지

 

현뚝 : 확실히 그렇게 작성한다면 나중에 소스 수정하기도 편하겠네요.

 

선도부 : 3개의 페이지가 하나로 묶여서 합쳐진 하나의 페이지로 컴파일이 되는거야.

            일단 예제를 보도록할까?

 

예제1 )------------------------------------------------------------

<h1>Directive Example4</h1>
<%@ page contentType="text/html;charset=euc-kr"%>
<%@ include file = "DirectiveTop.jsp"%>
include 지시자의 body부분입니다.
<%@ include file = "DirectiveBottom.jsp" %>

------------------------------------------------------------------

이게 중단인 메인페이지 부분이야.

<%@ include file = "DirectiveTop.jsp"%>

<%@ include file = "DirectiveBottom.jsp" %>

에서 메인페이지의 상단과 하단부분을 가져와서 쓰고있지?

그렇다면 상단과 하단의 내용을 보도록 하자.

예제1-1) -------------------------------------------------------

<%@ page contentType="text/html;charset=euc-kr"%>
<html>
<body>
include지시자의 top부분입니다.
<hr>
</html>

-----------------------------------------------------------------

 

예제 1-2 ) -------------------------------------------------------

<%@ page contentType="text/html;charset=euc-kr"%>
<%@ page import="java.util.*" %>
<%
Date date = new Date();
%>
<hr>
include지시자의 Botton부분입니다.<p>
<%=date.toLocaleString() %>

-----------------------------------------------------------------

 

1-1은 상단

1-2는 하단부분이야.

1-2경우 시간을 표현해주기 위해 java.util.*을 임포트시키고

Date date = new Date(); 로 객체를 만들어

<%=date.toLocaleString() %>로 시간을 표현해주고 있어.

 

결과 ) -----------------------------------------------------------

 

Directive Example4

include지시자의 top부분입니다.

include 지시자의 body부분입니다.

include지시자의 Botton부분입니다.

2007. 4. 9 오후 4:55:04

 

----------------------------------------------------------------------

 

같이 나오게 되겠지?

보여지는 페이지는 한개의 페이지지만 다른2군데에서 가져와 쓰고 있지.

근데 그냥 include지시자의 경우 단순히 소스만 가져와서 쓰는거야.

하지만 include액션지시자의 경우 다른페이지의 결과를 포함해서 가져오는거야.

한마디로

include지시자 : 소스의 내용을 텍스트로

include액션태그 : 포함시킬 페이지의 처리결과를 포함
이라는 거지

 

액션태그의 양식은

<jsp:include page ="원하는 페이지경로" flush="true" />

로 사용해

 

예제1 )-----------------------------------------------------------------

<h1>Action Example1</h1>
<FORM METHOD=POST ACTION="includeTag.jsp">
이름 : <INPUT TYPE="text" NAME="name"><p>
<INPUT TYPE="submit" VALUE="보내기">
</FORM>

-------------------------------------------------------------------

html문서로 name의 값을 입력받고 'includeTag.jsp'로 보내고 있군

 

예제 1-2) --------------------------------------------------------------

<html>
<h1>ActionTag Example1</h1>
<%@ page contentType="text/html;charset=euc-kr" %>
<%
 request.setCharacterEncoding("euc-kr");
 
String name= "japan football";
%>
<body>
<jsp:include page="includeTagTop1.jsp"/>
include action의 body입니다.<p>
<hr>
</body>
</html>

------------------------------------------------------------------

includeTag.jsp부분으로 중간에

 String name= "japan football"; 

로 선언된 부분이 있긴 하지만 이미 앞의 html부분에서 입력받은 값으로 처리되어

왔기때문에 실제로 이부분은 사용되지 않아.

 

그렇다면 <jsp:include page="includeTagTop1.jsp"/> 하는 top부분을 볼까

 

예제 1-3 ) ------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" %>
<% 
 request.setCharacterEncoding("euc-kr");
%>
<%
 String name = request.getParameter("name");
%>
include ActionTag의 Top부분입니다.<p>
<b><%=name%>Fighting!!</b>
<hr>

-----------------------------------------------------------------

 

 String name = request.getParameter("name");

이부분은 앞의 html에서 넘겨받은 값을 말하고 있어.

 

그리고 그것을 아래 <b><%=name%>Fighting!!</b>로 보여주고있네.

결과를 본다면

결과 ) -----------------------------------------------------------

Action Tag1 Example1

include ActionTag의 Top부분입니다.

명숙이Fighting!!

include ActionTag의 Body입니다.

 

-----------------------------------------------------------------

이렇게 나오게 되지.

중요한것은 includeTagTop1.jsp를 include시키면서 그 값이 그대로 따라와서

includeTag1.jsp로 와서 출력이 되는거지.

출처: http://m.blog.daum.net/eduiso/169

--------------------------------------------------------------------------------------------------------
 
1. 페이지를 분할하지 않은 통합 소스

    



memo -> webcontent -> menu에 top이랑 bottom .jsp만들고

memo -> webcontent에다가 index.jsp만든다.


근데 index를


<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<h1>기본 페이지 입니다.</h1>


</body>

</html>


이런 식으로 만들고 memo 자체에서 run on server하면


http://localhost:8000/memo/


기본 페이지가 생겨서 이제 404 안뜬당...


잠시 잠....


----------------------------------------5시 42분----------------


top.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



<%

String root = request.getContextPath();

%>


<html>

<head>

<style type="text/css">

ul#menu li {

display: inline; //가로로 보여주기

}


ul#menu li a {

background-color: black;

color: white;

pading: 10px 20px;

text-decoration: none;

border-radius: 4px 4px 0 0;

}


ul#menu li a:hover { //올려놨을 때 색깔

background-color: orange;

}

</style>

</head>

<body>

<!-- 상단 메뉴 -->

<div style="background-color: #EEEEEE;">

<table style="width: 100%">

<tr>

<td><img src="<%=root%>/menu/images/main-03.jpg" width='100%'

height='40%'></td>

</tr>


<tr>

<td>

<ul id="menu">

<li><a href="<%=root%>/index.jsp">홈</a></li>

<li><a href="<%=root%>/memov3/list.jsp">메모목록</a></li>

<li><a href="<%=root%>/memov3/createForm.jsp">메모등록</a></li>

<li><a href="">메뉴1</a></li>

<li><a href="">메뉴2</a></li>

<li><a href="">메뉴3</a></li>

<li><a href="">메뉴4</a></li>

</ul>

</td>

</tr>


</table>

</div>

<!-- 상단 메뉴 끝 -->



bottom.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">




<!-- 하단 메뉴 시작 -->

<div

style="width: 100%; background-color: #EEEEEE; text-align: center; margin-top: 2em;">

2016 SOLDESK JSP Developer</div>

<!-- 하단 메뉴 끝 -->



-----------------------------------------------------------------------------

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<jsp:include page = "/menu/top.jsp" ></jsp:include>
<br><br><br><br><br><br><br>

<h1>기본 페이지 입니다.</h1>
<br><br><br><br><br><br><br>
<jsp:include page = "/menu/bottom.jsp" ></jsp:include>


</body>
</html>



memov3의 list.jsp 수정


<title>Insert title here</title>

<link href="../css/style.css" rel = "stylesheet">
 
<style>
* {
font-family: gulim;
font-size: 24px;
}
</style>
<script type="text/javascript">
function read(memono){
var url = "./read.jsp";
url = url + "?memono=" + memono;
location.href = url; //자바스크립트에서 -get 방식- 링크 보내기
}

</script>

</head>
<body>

<jsp:include page = "/menu/top.jsp" />



<DIV class = 'title'>
메모 목록</DIV>

<Table>
<TR>
<TH>번호</TH>
<TH>제목</TH>
<TH>날짜</TH>
<TH>조회수</TH>
</TR>

<%
if (list.size()==0) {
%>
<TR>
<TD colspan='4'>등록된 메모가 없습니다.</TD>
</TR>
<%
} // end if
else {
for(int i = 0; i<list.size(); i++){
MemoVO vo = list.get(i);
//list 안에서 rs.next로 MemoVO 에다가 저장해줬었음 (희미한 기억)
%>
<TR>
<TD><%=vo.getMemono()%></TD>
<TD><a href = "javascript:read('<%=vo.getMemono()%>')"><%=vo.getTitle() %></a></TD>
<TD><%=vo.getWdate()%></TD>
<TD><%=vo.getViewcnt()%></TD>

</TR>

<%
} //end for
} //end else
%>
</Table>

<DIV class = 'bottom'>
<input type="button" value='등록'
onclick="location.href='./createForm.jsp'">
</DIV>


<jsp:include page = "/menu/bottom.jsp"/>




</body>
</html>















5. 수업

진도: 

hw: 


6. 할것


파일보관함에 editplus 도우미 있음

배포는 안함


ocjp랑 ocp 월요일까지 생각할 것 ★- 생각 다 하면 별 지우기 :>

'Programming' 카테고리의 다른 글

160418: 25회차  (0) 2016.04.18
160415: 24회차  (0) 2016.04.15
160412: 22회차  (0) 2016.04.12
160408: 20회차  (1) 2016.04.08
160407: 19회차  (1) 2016.04.07
Posted by DAVID
블로그 이미지

by DAVID

공지사항

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • 더 보기

태그

글 보관함

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

링크

카테고리

PC (112)
Programming (109)

카운터

Total
Today
Yesterday
방명록 : 관리자 : 글쓰기
DAVID's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

PC

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • PC (112)
    • Programming (109)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바