DB를 이용한 데이타 출력 확장 - 검색하기

마지막으로 검색 기능을 달아보자. 이 검색의 특징은 페이지 이동이 없다는것이다. 보통 게시판에서 검색을 하면 검색결과를 보이는 페이지로 이동을 하는데 여기서 보이는 검색은 그러할 필요가 전혀 없다. 소스를 보자

list_asp_ex3.asp

<%
' 변수 선언및 초기화
Dim DBCon
Dim strConn
Dim strQry
Dim szHead
Dim szBody
szHead  = ""
szBody  = ""
strConn = ""

' 검색어를 받아온다.
req_CustomerID = Request("CustomerID")
' DB 연결 문자 변수
strConn = strConn&"Provider=SQLOLEDB.1;Persist Security Info=True;"
strConn = strConn&"Data Source=localhost;"     ' Server Name
strConn = strConn&"User ID=sa;"                ' User ID
strConn = strConn&"Password=;"     ' User Password
strConn = strConn&"Initial Catalog=NorthWind;" ' DataBase
' DB 객체 생성및 DB 오픈
Set DBCon = Server.CreateObject("ADODB.Connection")
DBCon.Open strConn    

' 쿼리문 실행결과를 레코드셋으로 반환
strQry = "select CustomerID,CompanyName,ContactName from Customers "
' 검색을 위해서 쿼리문 수정
if Trim(req_CustomerID) <> "" then
    strQry = strQry& " where CustomerID like '%"&req_CustomerID&"%'"
end if
Set rs = DBCon.Execute(strQry)
Do While not rs.eof
    db_CustomerID  = rs(0)
    db_CompanyName = rs(1)
    db_ContactName = rs(2)
    
    ' TDC 형식으로 데이타를 가공한다.
    szBody = szBody&"|"& db_CustomerID  &"|¶"
    szBody = szBody&"|"& db_CompanyName &"|¶"
    szBody = szBody&"|"& db_ContactName &"|^"
    rs.MoveNext()
Loop

' TDC 형식으로 헤더를 만든다.
szHead = "CustomerID¶CompanyName¶ContactName^"
Response.Write szHead
Response.Write szBody
%>

list_asp_ex3.htm

<OBJECT id=List CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
    <PARAM NAME="UseHeader" VALUE="true">
    <PARAM NAME="DataURL" VALUE="list_asp_ex3.asp">
    <PARAM NAME="TextQualifier" VALUE="|">
    <param NAME="FieldDelim" VALUE="¶">
    <PARAM NAME="RowDelim" VALUE="^">
    <PARAM NAME="CharSet" VALUE="euc-kr">
</OBJECT>
<SCRIPT for="List" event="ondatasetcomplete">
    loading.style.display = "none";
    var rs = List.recordset;
    if (rs.eof) {
        nodata.style.display = "";
    } 
</SCRIPT>
<SCRIPT language="javascript">
function doSearch(srch) {
    loading.style.display = "";
    nodata.style.display = "none";
    List.DataURL = "list_asp_ex3.asp?CustomerID="+srch;
    List.ReSet();
}
</SCRIPT>
CustomerID : <input type="text" name="txtSrch">
<input type="button" value="Search" onclick="doSearch(txtSrch.value);">
<table border="1" DataSrc="#List">
    <thead>
    <tr>
        <th>CustomerID</th>
        <th>CompanyName</th>
        <th>ContactName</th>
    </tr>
    <tr id="loading">
        <td colspan="3" align="center">데이타를 읽는 중입니다. 잠시만 기다려 주세요...</td>
    </tr>
    <tr id="nodata" style="display:none;">
        <td colspan="3" align="center">검색된 데이타가 없습니다.</td>
    </tr>
    </head>
    <tbody>
    <tr>
        <td><span datafld="CustomerID" DATAFORMATAS="HTML"></span></td>
        <td><span datafld="CompanyName" DATAFORMATAS="HTML"></span></td>
        <td><span datafld="ContactName" DATAFORMATAS="HTML"></span></td>
    </tr>
    </tbody> 
</table>

검색이 되었을 경우 다음과 같이 나온다

2-31.gif 

검색 결과가 없을 경우...

2-32.gif 

검색을 해보면 알겠지만 검색시 페이지 이동없이 바로 리스트만 새로 갱신해서 보여준다. (신기하지 않나 -_-; 나는 처음에 신기했다 -_-; 특히나 검색된 게시물 없을 경우 처리가 신기했다 -_-) list_asp_ex3.asp 을 보면 검색을 위해서 다음 두 줄의 구문을 추가하였다.

req_CustomerID = Request("CustomerID")
if Trim(req_CustomerID) <> "" then
    strQry = strQry& " where CustomerID like '%"&req_CustomerID&"%'"
end if

검색을 위해서 검색어를 request로 받아와서 그것을 쿼리문 변수에 넣는다.

이번엔 list_asp_ex3.htm 페이지를 보자. 추가된 부분이 몇부분 있는데..위에서 부터 새롭게 추가된 부분을 하나씩 살펴보겠다.

<SCRIPT for="List" event="ondatasetcomplete">
    loading.style.display = "none";
    var rs = List.recordset;
    if (rs.eof) {
        nodata.style.display = "";
    } 
</SCRIPT>

List 객체가 ondatasetcomplete 이벤트가 일어났을때 실행되는 코드이다.(위에서 설명했으니 대충 알것지 -_-) 나는 처음에 이 코드를 보고 놀랬었다. List.recordset 란 부분을 보면 List란 객체의 레코드를 가져온다. 꼭 asp 처럼 말이다. 또한 값이 있는지 없는지를 rs.eof 로 검사를 해서 확인한다. ADO와 거의 흡사하다! (도대체가 똑같은 기술을 왜 만들어 놓은것일까 -_-) 아무튼 이런식으로 해서 가져오는 값이 없을 경우는 id 값이 nodata을 가진 객체를 보여주게해서 데이타가 없음을 메시지로 뿌려준다. 

function doSearch(srch) {
    loading.style.display = "";
    nodata.style.display = "none";
    List.DataURL = "list_asp_ex3.asp?CustomerID="+srch;
    List.ReSet();
}

검색하는 할때 이용하는 자바스크립트 함수이다. 검색을 시작시에 일단 loading, nodata 객체들을 다시 초기화 시킨다. 그런 후 List 객체에서 DataURL 속성에 다시 새로운 URL 값을 할당한다. 그리곤 ReSet() 메서드 실행! 그럼 다시 List의 값을 갱신한다. 이 ReSet() 메서드 때문에 페이지 이동없이 검색이 가능한것이다. 단지 List 객체를 ReSet()만 시키기 때문이다.

CustomerID : <input type="text" name="txtSrch">
<input type="button" value="Search" onclick="doSearch(txtSrch.value);">

검색 버튼을 추가한다. (보면 알겠지 -_-+)

<tr id="nodata" style="display:none;">
    <td colspan="3" align="center">검색된 데이타가 없습니다.</td>
</tr>

이 부분도 추가한다. (역시 보면 알것지 -_-++)






이 게시물을...