Efficient, Rapid, Accurate

데이터베이스 (2)

💻 Programming/JSP

[JSP] Database CRUD (데이터베이스 연동)

오늘은 JSP를 이용하여 데이타베이스에 접속하고 SELECT, INSERT, DELETE, 그리고 UPDATE 하는 방법에 대해서 알아보도록 하겠습니다.

우선 데이타베이스를 설치가되어있고 emp계정이 만들어져 있으며 Employees테이블이 id, first, last, age 컬럼으로 이루어져 있다고 가정을 했습니다.

SELECT Operation:

JTSL을 이용하여 JSP 페이지를 작성합니다.

<%@ page import="java.io.*,java.util.*,java.sql.*"%> <%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <html>

<head>
    <title>SELECT Operation</title>
</head>

<body>
    <sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost/TEST" user="emp"
        password="emp" />
    <sql:query dataSource="${snapshot}" var="result"> SELECT * from Employees; </sql:query>
    <table border="1" width="100%">
        <tr>
            <th>Emp ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        <c:forEach var="row" items="${result.rows}">
            <tr>
                <td>
                    <c:out value="${row.id}" />
                </td>
                <td>
                    <c:out value="${row.first}" />
                </td>
                <td>
                    <c:out value="${row.last}" />
                </td>
                <td>
                    <c:out value="${row.age}" />
                </td>
            </tr>
        </c:forEach>
    </table>
</body>

</html>

위 JSP페이지에 접속하면 아래와 같은 결과가 나오겠죠?

Emp ID	First Name	Last Name	Age
100	Zara	Ali	18
101	Mahnaz	Fatma	25
102	Zaid	Khan	30
103	Sumit	Mittal	28

INSERT Operation:

역시나 JSTL을 이용한 JSP 페이지입니다.

<%@ page import="java.io.*,java.util.*,java.sql.*"%> <%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <html>

<head>
    <title>JINSERT Operation</title>
</head>

<body>
    <sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost/TEST" user="emp"
        password="emp" />
    <sql:update dataSource="${snapshot}" var="result"> INSERT INTO Employees VALUES (104, 2, 'Nuha', 'Ali');
    </sql:update>
    <sql:query dataSource="${snapshot}" var="result"> SELECT * from Employees; </sql:query>
    <table border="1" width="100%">
        <tr>
            <th>Emp ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        <c:forEach var="row" items="${result.rows}">
            <tr>
                <td>
                    <c:out value="${row.id}" />
                </td>
                <td>
                    <c:out value="${row.first}" />
                </td>
                <td>
                    <c:out value="${row.last}" />
                </td>
                <td>
                    <c:out value="${row.age}" />
                </td>
            </tr>
        </c:forEach>
    </table>
</body>

</html>

결과는 아래처럼 한줄이 추가가 되어 나오겠죠.

Emp ID	First Name	Last Name	Age
100	Zara	Ali	18
101	Mahnaz	Fatma	25
102	Zaid	Khan	30
103	Sumit	Mittal	28
104	Nuha	Ali	2

DELETE Operation:

<%@ page import="java.io.*,java.util.*,java.sql.*"%> <%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <html>

<head>
    <title>DELETE Operation</title>
</head>

<body>
    <sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost/TEST" user="emp"
        password="emp" />
    <c:set var="empId" value="103" />
    <sql:update dataSource="${snapshot}" var="count"> DELETE FROM Employees WHERE Id = ?
        <sql:param value="${empId}" />
    </sql:update>
    <sql:query dataSource="${snapshot}" var="result"> SELECT * from Employees; </sql:query>
    <table border="1" width="100%">
        <tr>
            <th>Emp ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        <c:forEach var="row" items="${result.rows}">
            <tr>
                <td>
                    <c:out value="${row.id}" />
                </td>
                <td>
                    <c:out value="${row.first}" />
                </td>
                <td>
                    <c:out value="${row.last}" />
                </td>
                <td>
                    <c:out value="${row.age}" />
                </td>
            </tr>
        </c:forEach>
    </table>
</body>

</html>

결과는 아래와 같습니다.

Emp ID	First Name	Last Name	Age
100	Zara	Ali	18
101	Mahnaz	Fatma	25
102	Zaid	Khan	30
104	Nuha	Ali	2

UPDATE Operation:

<%@ page import="java.io.*,java.util.*,java.sql.*"%> <%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <html>

<head>
    <title>DELETE Operation</title>
</head>

<body>
    <sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost/TEST" user="emp"
        password="emp" />
    <c:set var="empId" value="102" />
    <sql:update dataSource="${snapshot}" var="count"> UPDATE Employees SET last = 'Ali'
        <sql:param value="${empId}" />
    </sql:update>
    <sql:query dataSource="${snapshot}" var="result"> SELECT * from Employees; </sql:query>
    <table border="1" width="100%">
        <tr>
            <th>Emp ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        <c:forEach var="row" items="${result.rows}">
            <tr>
                <td>
                    <c:out value="${row.id}" />
                </td>
                <td>
                    <c:out value="${row.first}" />
                </td>
                <td>
                    <c:out value="${row.last}" />
                </td>
                <td>
                    <c:out value="${row.age}" />
                </td>
            </tr>
        </c:forEach>
    </table>
</body>

</html>

결과는 아래처럼 나오겠죠?

Emp ID	First Name	Last Name	Age
100	Zara	Ali	18
101	Mahnaz	Fatma	25
102	Zaid	Ali	30
104	Nuha	Ali	2

저작자표시 비영리 변경금지

'💻 Programming > JSP' 카테고리의 다른 글

JSP vs Javascript (Difference between JSP and Javascript) (0)	2019.06.28
[JSP] Security ( 보안 ) (0)	2019.02.15
[JSP] JSTL ( JSP Standard Tag Library ) (0)	2019.02.15
[JSP] Page Redirection ( 페이지 리디렉션 ) (0)	2019.02.15
[JSP] File Upload ( 파일 업로드 ) (0)	2019.02.15

💻 Programming/웹프로그래밍

AJAX란? - 데이터베이스

AJAX 데이터베이스 예제

아래 예제는 AJAX를 이용해서 데이터베이스에서 읽어온 자료를 처리하는 것을 보여줍니다.

예제

form 태그가 먹히지 않는 관계로 예제는 실습하기 버튼을 눌러서 W3Schools로 가셔서 해보시기 바랍니다.

실습하기 »

예제 설명 - showCustomer() 함수

사용자가 드랍다운 리스트에서 고객을 선택하면, "showCustomer()" 함수가 호출되어 실행됩니다. 이 함수는 "onchange" 이벤트가 발생하면 호출되도록 되어있습니다.

showCustomer 함수 소스 코드

function showCustomer(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("txtHint").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q="+str, true);
  xhttp.send();
}

showCustomer() 함수는 아래와 같은 작업을 합니다.

customer가 선택이 되었는지 검사합니다.
XMLHttpRequest 객체를 생성합니다.
서버로부터 응답을 받고나서 실행될 함수를 정의합니다.
서버에 있는 파일로 요청을 보냅니다.
요청을 보낼 때 파라미터 "q" 와 드랍다운 리스트에서 읽어온 str을 URL에 추가했습니다.

AJAX Server Page

위 예제에서 사용된 서버페이지는 "getcustomer.asp"입니다.

서버 페이지 파일은 PHP, JSP와 같은 다른 서버 언어로도 구현할 수 있습니다.

PHP로 구현한 동일한 기능의 소스 보기

"getcustomer.asp" 는 데이터베이스의 정보를 조회하고 읽어온 정보를 HTML 테이블에 넣는 기능을 합니다.

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>

자, 큰 그림이 그려지나요?

정리를 한번 해드리자면,

1. 드랍다운 리스트에서 항목을 선택한다.

2. 항목이 선택되면 onchange 이벤트에의해 showCustomer() 함수를 호출하여 ajax 요청이 서버로 전송되고

3. 서버에서 getcustomer.asp파일이 실행이 되는데 이 파일은 DB를 조회해서 읽어온 정보를 html형태의 테이블을 만들어서 응답으로 보냅니다.

4. 그러면 이 응답으로 받은 html형식의 정보를 드랍다운 리스트 아래쪽에 뿌려줍니다.

이런식으로 ajax를 이용한 요청이 처리가 되는 겁니다.

별로 어렵지 않죠? ^-^

여기서 AJAX 포스팅은 마치도록 하겠습니다.

참고로 AJAX포스팅에 사용된 자료는 W3Schools에 있는 자료를 번역해놓은 수준입니다.

궁금한게 있으시면 댓글 달아주시면 답글 달아드리도록 하겠습니다.