/* list.jsp 일부분(전체 소스는 여기로) */ 


<table border="1" cellspacing="0">

<tr>

<td>Number</td>

<td>ID</td>

<td>Name</td>

<td>password</td>


<TD>비고 </TD>


</tr>

<%

    while(rs.next()) {

%><tr>

<td><%= rs.getInt("idx") /*ⓖ*/%></td>

<td><%=rs.getString(2)%></td>

<td><%= rs.getString(3) /*ⓗ*/%></td>

<td><%=rs.getString("pwd")%></td>


<TD>

<A href="delete-do.jsp?idx=<%=rs.getInt("idx")%>">삭제</A>

<INPUT type="button" value="수정"

onClick="location.href='modify.jsp?idx=<%=rs.getInt("idx")%>'">

</TD>


</tr>

<%

    } // end while

%></table>



/* delete-do.jsp */


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

import="java.sql.*" %>

<%

request.setCharacterEncoding("utf-8");

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

try

{

Class.forName("com.mysql.jdbc.Driver");

String DB_URL = "jdbc:mysql://localhost:3306/web01?useUnicode=true&characterEncoding=utf8";

Connection con = DriverManager.getConnection(DB_URL, "admin", "1234");

String sql = "DELETE FROM member WHERE idx=?";

PreparedStatement pstmt = con.prepareStatement(sql); // 쿼리를 이용해 delete 실행!!

pstmt.setInt(1,Integer.parseInt(idx));

pstmt.executeUpdate();

pstmt.close();

con.close();

}

catch(ClassNotFoundException e)

{

out.println(e);

}

catch(SQLException e)

{

out.println(e);

}

response.sendRedirect("list.jsp");

%>


실행결과



삭제라고 써져있는 링크를 눌러보도록 하겠습니다



해당 데이터가 삭제가된걸 볼 수 있네요



MYSQL로 확인해본 TABLE




신고

/* input.jsp */

/* 앞에서 목록생성을 한 list에서 저장링크를 누르면 나오는 페이지입니다(회원가입)*/


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

<HTML>

<HEAD></HEAD>

<BODY>

<FORM action="save_do.jsp" method="post"> <!-- 입력받은 데이터들을 save_do.jsp로 넘겨줍니다. DB에 저장하기 위해서죠. -->

ID : <INPUT type="text" name="id" maxlength="8" size="8"><BR>

이름 : <INPUT type="text" name="name" maxlength="12" size="12"><BR>

PW : <INPUT type="password" name="pwd" maxlength="8" size="8"><BR>

<INPUT type="submit" value=" 저  장 ">

</FORM>

</BODY>

</HTML>


/* save_do.jsp */


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

import="java.sql.*" %>

<%

request.setCharacterEncoding("utf-8");

String id = request.getParameter("id"); // input.jsp에서 입력받은 값들을 받아옵니다.

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

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

try

{

Class.forName("com.mysql.jdbc.Driver");

String DB_URL = "jdbc:mysql://localhost:3306/web01?useUnicode=true&characterEncoding=utf8"; // 아까 예제에서와 마찬가지로 url을 설정하죠

Connection con = DriverManager.getConnection(DB_URL, "admin", "1234");

String sql = "INSERT INTO member(id,name,pwd) VALUES(?,?,?)"; // sql문 작성(id와 name, pwd값들을 보내기위한 작업)

PreparedStatement pstmt = con.prepareStatement(sql);

pstmt.setString(1,id); // values에 들어갈 각각의 id, name, pwd 설정

pstmt.setString(2,name);

pstmt.setString(3,pwd);

pstmt.executeUpdate(); // sql문 실행(회원추가 실행)

pstmt.close();

con.close();

}

catch(ClassNotFoundException e) // 예외처리

{

out.println(e);

}

catch(SQLException e)

{

out.println(e);

}

response.sendRedirect("list.jsp"); // 다시 list.jsp를 실행시켜 새로운 정보를 업데이트 시킵니다.

%>



실행결과


list.jsp 하단에 있는 저장버튼을 누르면 회원가입창인 input.jsp가 뜨고 양식을 입력을 합니다. 



input.jsp에서 저장을 누르게되면 아까 입력했던 회원양식이 추가되는걸 볼 수 있겠네요. 



마찬가지로 MYSQL에서 새로운 데이터가 추가된 것을 볼수 있겠습니다.





신고

/* list.jsp */ 


<%@ page  contentType="text/html;charset=utf-8" import="java.sql.*" %>

<%

Class.forName("com.mysql.jdbc.Driver"); // JDBC연결을 위한 Class이름 설정


String DB_URL = "jdbc:mysql://localhost:3306/web01?useUnicode=true&characterEncoding=utf8";

// 기본설정된 포트 3306으로 하고 사용할 db의 이름을 적어준다(web01)


String DB_USER = "admin"; // web01 데이터베이스에 접근하는 아이디

String DB_PASSWORD= "1234"; // password


Connection conn= null;

Statement stmt = null;

ResultSet rs   = null;


try {

    

    conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD); // 연결자 획득


    

    stmt = conn.createStatement(); // 상태 확인


    

    String query = "SELECT idx, id, name, pwd FROM member"; // DB에 전송할 쿼리문 생성 목록을 나타내기 위해 SELECT문을 사용했습니다. 

    rs = stmt.executeQuery(query); // 쿼리문 실행!


%><table border="1" cellspacing="0">

<tr>

<td>Number</td>

<td>ID</td>

<td>Name</td>

<td>password</td>


<TD>비고 </TD>


</tr>

<%

    while(rs.next()) {

%><tr>

<td><%= rs.getInt("idx") /* 파라미터값을 직접 넣어줘 출력시켜도 되구요 */%></td>

<td><%=rs.getString(2)%></td>

<td><%= rs.getString(3) /* 숫자를 부여하여 몇번째 데이터 값인지 출력해도 되네요. */%></td>

<td><%=rs.getString("pwd")%></td>


<TD>

<A href="delete-do.jsp?idx=<%=rs.getInt("idx")%>">삭제</A> <!-- delete-do.jsp링크를 이용하여 해당 테이블의 데이터들을 삭제합니다. -->


<INPUT type="button" value="수정"

onClick="location.href='modify.jsp?idx=<%=rs.getInt("idx")%>'"> <!-- modify.jsp로 이동하여 해당 테이블의 데이터값들을 수정하도록 합니다. -->

</TD>


</tr>

<%

    } // end while

%></table>

<%


rs.close();     // ResultSet 종료


    stmt.close();     // Statement 종료


    conn.close(); // Connection 종료


} catch (SQLException e) { // 예외처리

      out.println("err:"+e.toString());

%>

<A href="input.jsp">저장</A>


실행결과



MYSQL에서 본 데이터들




신고

Java Beans


JSP 에서는 Java로 작성한 자바 클래스 중에 Java Beans 이라는 규약에 맞게 작성된 래스를 JSP에서 사용할 수 있습니다.

이를 통해서 디자인쪽 부분과 기능 부분을 분리시킬 수가 있겠죠. 이렇게 각각 분리해서 개발 함으로써 명확한 작업의 분리가 가능하고, 반복적인 코드를 다시 사용할 수 있음으로써 효율적인 작성 및 수정이 가능하기 때문에 Beans를 이용해서 jsp 프로그래밍을 합니다.




Beans의 구성과 동작의 예


여기서 쓰이는 클래스는 결코 어려운것이 아닙니다.

객체지향프로그래밍(OOP)에서 자주 볼 수 있는 get함수와 set함수를 사용하여 데이터들을 입력하고 출력하기 쉽게 표현할 수 있도록 하는것이죠.


예제

/* main.jsp */


<!-- 간단한 게시판 main -->

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

<style type="text/css">

tr.a { color:white; font-family:"monospace" }

</style>

<html> 

<body>


<div id="container" style="width:1000px;float:left;">


<div id="header" style="background-color:#000000; height:25px;">

<table> 

<tr class="a" > 

</td> <td width="500"> &nbsp;&nbsp;&nbsp;홈으로 </td> <td width="150"> 로그인 </td> <td width="150"> 회원가입 </td> 

<td width="150"> 마이페이지 </td> <td width="150"> 즐겨찾기 추가 </td>

</tr> 

</table>

</div>

<div id="menu" style="background-color:#C0C0C0;height:415px;width:280px;float:left;">

<table border="1" width="280">

<tr><td height="80"> 1번째 들어갈 글 </td></tr>

<tr><td height="80"> 2번째 들어갈 글 </td></tr>

<tr><td height="80"> 3번째 들어갈 글 </td></tr>

<tr><td height="80"> 4번째 들어갈 글 </td></tr>

<tr><td height="80"> 5번째 들어갈 글 </td></tr>

</table>

</div>


<div id="content" style="background-color:#EEEEEE;height:415px;width:720px;float:left;">

    <FORM method="get" action="Inputview01.jsp"> 

<TABLE border="2" align="left">

<TR>

<TD width="200"><center> 제목 </center></TD>

<TD> <input type="text", name="title", size="80"></TD>

</TR>

<TR>

<TD width="200"><center> 내용 </center></TD>

<TD> <TEXTAREA name="text" rows="20", cols="85"></TEXTAREA>  </TD>

</TR>

<TR>

<TD width="200"><center> 파일첨부 <center> </TD>

<TD><INPUT type=file></TD>

</TR>

<TR>

<TD colspan="2" align="right"> <input type="submit" value="등록"> <input type="reset" value="초기화">  </TD>

</TR> </table>

</div>


<div id="footer" style="background-color:#7B68EE;clear:both;">

</div>

</div>

</body>

</html>


/* Input.java */

package my; // my라는 이름의 package를 생성합니다. 이 input java파일을 컴파일하게되면 classes 폴더에 Input.class 파일이 저장이 되죠.


public class Input(){

private String title;

private String text;

public Input(){

}

public void setTitle(String title){

this.title = title;

}

public void setText(String text){

this.text = text;

}

public String getTitle(){

return title;

}

public String getText(){

return text;

}

}


/* Inputview01.jsp */


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


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

%>

<jsp:useBean id="input" class="my.Input" scope="page"/> <!-- id를 input으로 설정 my패키지의 Input class를 받아온다 -->

<jsp:setProperty name="input" property="*" /> <!-- property="*" 으로 설정하여 속성에따라 자동으로 출력하게끔 설정한다 -->

<table border="1" >

<tr>

<td>글의 제목</td>

<td><jsp:getProperty name="input" property="title" /></td> <!-- get함수 호출을 이용해 title문 출력 -->

</tr>

<td>글의 내용</td>

<td><jsp:getProperty name="input" property="text" /></td> <!-- get함수를 호출하여 text문 출력 -->

</table>



main.jsp에서 입력을 받는 화면




Inputview01.jsp에서 글의 제목과 내용을 출력해주는 화면



신고


/* fibo.jsp */


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

<HTML>

<HEAD><TITLE>number3</TITLE></HEAD>

<body>

<%!

public long fibo(long number){ /* fact라는 재귀함수 선언 */

if(number==0)

return 0;

else if(number==1)

return 1;

else

return fibo(number-1) + fibo(number-2); /* 재귀함수를 이용한 팩토리얼 계산 */

}

%>

<table border="1" width = "100">

<tr> 

<td align=center> 항 </td><td align=center> 값 </td>

</tr>

<% 

for(int i=0; i<=10; i++)

{

out.println("<tr align=center><td>" + i + "</td>" + "<td align=center>" + fibo(i) + "</td></tr>"); /* 스크립틀릿으로 테이블 안에다가 값을 넣어서 출력하도록 만들 수 있습니다 */

}

%>

</table>

</body>

</HTML>


실행결과=>


신고


JSP 구동 원리 =>



JSP 스크립트 요소(표현식)

1. 선언문
- JSP 파일에서 메소드나 멤버 변수를 쓸 때 사용한다.
- JSP 내에 프로그램 코드를 많이 두는 것은 바람직하지 않다.
기본형식 =>
<%! 멤버변수1; 멤버변수2; 메소드 선언 %>


ex)
<%!
// 멤버변수 선언이나 메소드 선언이 올 수 있다.
String str ="test";
public boolean check(){
    return false;
}
%>

2. 스크립틀릿
- JSP 파일 중간에 자바 코드를 넣어서 _jspService() 메소드에서 수행하고자 하는 코드 기술
- 화면 출력을 위해 out.println()을 사용한다.
- 스크립틀릿을 닫고 HTML 출력 후 다시 스크립틀릿 작성 가능
기본형식 => <% 자바코드 %>

ex)
<%
    for(int i=0; i<10; i++)
        out.println(i); // 0부터 9까지 출력 
%>


3. 표현식

- JSP 파일에서 간단한 출력을 하기 위해서 사용
- 세미콜론 사용 x

기본형식 => <%= 메소드 호출 및 변수 %>

사용 예

-> 메소드 호출 결과 출력 : <%= calculator() %>

-> 변수 출력 : <%= result %>

-> 사칙 연산과 문자열 결합 : <%= "i+2=" + i+2+" 입니다" %>



/* test.jsp */
<%@ page contentType = "text/html;charset=utf-8" %>

<HTML>

<HEAD><TITLE>test</TITLE></HEAD>

<BODY>

<CENTER>

<H2> 스크립틀릿 TEST : 1-10 까지 출력 </H2>

<% 

for(i=1; i<=10; i++) {

%>

<%= i %><BR>

<%

}

%>

</BODY>

</HTML>

신고


/* javascript.html */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

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

 </HEAD>

 <SCRIPT>

 var str;

 var length;

 str = document.getElementById("textarea").value; // textarea에서의 string을 받는다.

 function keyup() // keyup함수

 {

if(document.getElementById("textarea").value.length >= 80) // 문자열의 길이가 80이 넘어갈 경우

{

alert("overflow!!!"); // 초과 alert창을 띄운다

cleartext(); // 초기화시킨다

}

else // 그렇지 않을경우 leng(문자열 남은 길이)는 80에서 문자열의 길이를 뺸 것을 계산한다.

{

document.getElementById("leng").value = 80 - document.getElementById("textarea").value.length;

}

 }

 function clickon() // 클릭했을 경우 출력

 {

alert(document.getElementById("textarea").value);

 }

 function cleartext() // 초기화(텍스트 내용과 남은 길이값을 초기화)

 {

 document.getElementById("textarea").value = " ";

 document.getElementById("leng").value = "80";

 }

 </SCRIPT>

 <BODY>

  <TEXTAREA id="textarea" rows="5" cols="30" onkeyUp="keyup()"></TEXTAREA>

  <p> You have <input type="text" id="leng" value="80" readOnly> characters left.

  <p>

  <input type="button" value="Send!" onClick="clickon();">  <input type="button" value="Clear" onClick="cleartext();">

 </BODY>

</HTML>


- 실행시 화면창(textarea 폼에 입력)


- 입력을 하면서 동시에 남은 문자열 입력가능 개수를 출력한다.


- 입력하면서 80글자가 넘어갈 경우 overflow alert창을 띄운다.


신고


CSS 선택자(Selectors)

- 원하는 스타일 요소를 선택하기 위해 사용하는 패턴

- HTML태그에 class와 id속성을 정의하여 element를 선택하고 적용

- 보통 일반적으로 class 속성을 정의해서 사용한다.


class 선택자

- 같은 태그에 내용에 따라 서로 다른 스타일을 적용하고자 할 때 사용한다.

- class = "intro"와 같이 class 속성을 가지는 모든 element들을 선택

ex) .intro{ background-color:yellow;}

ex) P.question1 {font-size:15pt; background:rgb(215,200,240) }

    P.question2 {color:#0000ff}


id 선택자

- id="firstname" 속성을 가지는 하나의 element를 선택

- 문서 내에서 어떤 스타일을 단 한번만 적용하고자 할 경우 사용

ex) #intro {font-style:italic}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <META http-equiv="content-type" content="text/html; charset=UTF=8" />

  <STYLE type="text/css">

  .thumbnail {width:100px; height:90px} /* 선택자 클래스를 이용하여 그림크기 같게끔 고정 */

  .wideImg {position:absolute; left:30% ; top:30%; width:300px; height:270px;} /* 이미지크기를 늘리게 하는 클래스 선언(선택자)*/

  </STYLE>

  <SCRIPT type="text/javascript">

  var flag=0;

  function img01() { document.getElementById("img1").style.display="none"; }

  function img02() { document.getElementById("img2").style.display="none"; }

  function img03() { 

temp = new Image()

temp.src = document.getElementById("img3").src;

document.getElementById("img3").className = "wideImg"; // className을 wideImg로 변경.....

  }

  function jongbum()

  {

document.getElementById("img1").style.display="inline";

document.getElementById("img2").style.display="inline";

document.getElementById("img3").style.display="inline";

  }

  /* 

  function hide(obj)

{

obj.style.display="none";

}

function showAll()

{

for(i=0; i<document.images.length.i++)

{

document.images[i].style.display="inline";

document.images[i].style.visibility="visible";

}

}

  */

  </SCRIPT>

 </HEAD>


 <BODY>

  <IMG class="thumbnail" src="img01.jpg" id="img1" onclick="img01()"> <!-- class를 thumbnail로 선언 그리고 클릭시 onclick이벤트발생(img함수호출) -->

  <IMG class="thumbnail" src="img02.jpg" id="img2" onclick="img02()">

  <IMG class="thumbnail" src="img03.jpg" id="img3" onclick="img03()">

  <P>

<input type="button" value="원래대로" onclick="jongbum()">

</P>

 </BODY>

</HTML>


신고

'Web Programming > HTML & CSS' 카테고리의 다른 글

CSS를 이용한 간단한 예제(선택자)  (0) 2012.04.04
CSS 기초 01  (0) 2012.03.28
HTML소스(가입양식 폼 만들기)  (0) 2012.03.14
HTML(HyperText Markup Language) part 01  (0) 2012.03.07


CSS(Cascading Style Sheets)

- 웹 페이지의 외형을 명시하고 제어하기 위한 언어

- 웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그에 따라 별도의 스타일 정보를 정의하여 종류별로 일괄적인 스타일을 적용한다.

HTML만으로 스타일을 수동적으로 그때그때변경하기 힘들기 때문에

CSS를 이용하여 편하게 외형을 정의할 수 있습니다.


사용하는 방법


<STYLE type="text/css">

H1, H2 { background:url(./bg_sky.jpg) } /* H1,H2의 배경으로 image 사용 */

H3 { background:Navy; color:white } /* H3의 배경을 남색, 글자색을 흰색으로 */

BODY { color:Navy; } /* BODY 태그의 색을 남색으로 지정 속성이 상속되므로 모든

                               글자색이 남색 */

P EM { font-weight:bold; color:red } /* P 태그 안의 EM 태그의 글자를 굵게 */

</STYLE>

// HEAD 안에서 선언을 한 후 BODY구문에서 적용...



간단한 CSS 예제->

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

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 

<style type="text/css">

P {font-size:250%; color:#ff0000} // P 태그에서의 정의

.c1 {font-family:"궁서체"; color:#00cc00} // 클래스(선택자)

#my {width:50px ; height:50px}

P.mySize {font-size:12pt; color:#ff0000} // 같은 P태그에서도 다른 양식 적용(클래스)

</style>

</head>

 <body>

 <p>스타일 연습</p>

 <DIV class="c1"> 클래스 선택자1 연습</div>

 <INPUT type="button" value="버튼" class="c1"></INPUT>

 <INPUT type="button" value="내 버튼" id="my">

 <P class="mySize">글꼴 크기</P>

 <DIV class="mySize">글꼴 크기</DIV>

 </body>

</html>


신고

'Web Programming > HTML & CSS' 카테고리의 다른 글

CSS를 이용한 간단한 예제(선택자)  (0) 2012.04.04
CSS 기초 01  (0) 2012.03.28
HTML소스(가입양식 폼 만들기)  (0) 2012.03.14
HTML(HyperText Markup Language) part 01  (0) 2012.03.07

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

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 </head>

<SCRIPT>

function colorchange()

{

document.getElementById("textcolor").value = document.getElementById("selectcolor").value;

}

function on()

{

document.getElementById("main").bgColor = document.getElementById("selectcolor").value;

}

</SCRIPT>

 <body id = "main">

 <SELECT id="selectcolor" onChange="colorchange()">

<OPTION value="yellow">노랑</OPTION>

<OPTION value="green">초록</OPTION>

<OPTION value="blue">파랑</OPTION>

<OPTION value="red">빨강</OPTION>

 </SELECT>

 <INPUT type="text" id="textcolor" size="6">

 <INPUT type="button" value="배경색 변경" onClick="on()">

 </body>

</html>

신고

+ Recent posts