1. 데이터베이스에서 메뉴 정보 저장
메뉴 정보를 MSSQL 데이터베이스에 저장합니다. 메뉴의 이름, 링크(URL), 상위 메뉴 ID (계층 구조를 지원하는 경우), 기타 필요한 정보들을 테이블에 저장할 수 있습니다.
예를 들어, 메뉴 정보를 저장할 테이블 구조는 다음과 같을 수 있습니다.
CREATE TABLE Menus (
MenuID INT PRIMARY KEY,
ParentID INT NULL, -- 상위 메뉴의 ID, NULL일 경우 최상위 메뉴
MenuName NVARCHAR(255),
MenuLink NVARCHAR(255),
SortOrder INT -- 메뉴 정렬 순서
);
2. 검색 기능 구현
클래식 ASP에서 사용자가 입력한 검색어를 바탕으로 데이터베이스에서 메뉴를 검색합니다.
<%
Dim searchQuery, sqlQuery, rs, conn
' 검색어를 폼에서 받아옵니다.
searchQuery = Request("searchQuery")
' SQL 쿼리를 생성합니다.
sqlQuery = "SELECT MenuID, MenuName, MenuLink FROM Menus WHERE MenuName LIKE '%" & searchQuery & "%' ORDER BY SortOrder"
' 데이터베이스 연결
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "your_connection_string"
' 쿼리 실행
Set rs = conn.Execute(sqlQuery)
' 검색 결과를 표시
If Not rs.EOF Then
Do While Not rs.EOF
Response.Write "<a href='" & rs("MenuLink") & "'>" & rs("MenuName") & "</a><br>"
rs.MoveNext
Loop
Else
Response.Write "No menus found."
End If
' 리소스 해제
rs.Close
Set rs = Nothing
conn.Close
Set conn = Nothing
%>
검색 입력창에 내용을 입력하면 하단에 검색 결과를 실시간으로 출력하는 기능을 구현하려면, AJAX를 활용하여 페이지를 새로고침하지 않고 서버와 비동기적으로 통신하는 방식이 필요합니다. 여기서는 클래식 ASP와 AJAX를 사용하여 이 기능을 구현하는 방법을 설명드리겠습니다.
1. HTML 및 JavaScript (AJAX) 코드 작성
먼저, 사용자가 검색어를 입력할 수 있는 HTML 입력창과 검색 결과를 표시할 영역을 만듭니다. AJAX를 사용해 입력한 검색어에 따라 실시간으로 서버에 요청을 보내고, 검색 결과를 받아와서 표시할 수 있도록 JavaScript 코드를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>메뉴 검색</title>
<script>
function searchMenu() {
var searchQuery = document.getElementById("searchInput").value;
if (searchQuery.length > 0) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.asp?query=" + encodeURIComponent(searchQuery), true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("results").innerHTML = xhr.responseText;
}
};
xhr.send();
} else {
document.getElementById("results").innerHTML = "";
}
}
</script>
</head>
<body>
<h1>메뉴 검색</h1>
<input type="text" id="searchInput" onkeyup="searchMenu()" placeholder="메뉴 검색...">
<div id="results"></div>
</body>
</html>
2. 서버 측 ASP 파일 (search.asp)
이제 클라이언트에서 AJAX 요청이 전송되면, 서버에서 해당 요청을 처리하여 검색 결과를 반환하는 ASP 코드를 작성합니다. search.asp 파일을 만들어 검색어에 맞는 메뉴를 데이터베이스에서 조회하고 결과를 반환합니다.
<%
Dim query, sqlQuery, rs, conn
' 요청으로부터 검색어를 가져옵니다.
query = Request.QueryString("query")
' SQL 쿼리 생성
sqlQuery = "SELECT MenuID, MenuName, MenuLink FROM Menus WHERE MenuName LIKE '%" & query & "%' ORDER BY SortOrder"
' 데이터베이스 연결
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "your_connection_string"
' 쿼리 실행
Set rs = conn.Execute(sqlQuery)
' 검색 결과를 HTML로 출력
If Not rs.EOF Then
Do While Not rs.EOF
Response.Write "<a href='" & rs("MenuLink") & "'>" & rs("MenuName") & "</a><br>"
rs.MoveNext
Loop
Else
Response.Write "No menus found."
End If
' 리소스 해제
rs.Close
Set rs = Nothing
conn.Close
Set conn = Nothing
%>
3. 동작 방식 설명
- 사용자 입력: 사용자가 검색 입력창에 텍스트를 입력할 때마다 onkeyup 이벤트가 발생하고, searchMenu() 함수가 호출됩니다.
- AJAX 요청: searchMenu() 함수는 입력된 검색어를 서버로 보내기 위해 AJAX 요청을 생성합니다. 이 요청은 search.asp 파일로 전달됩니다.
- 서버 측 처리: search.asp 파일에서 데이터베이스에 연결하여 입력된 검색어에 맞는 메뉴를 조회하고, 해당 결과를 HTML로 반환합니다.
- 결과 출력: 서버에서 반환된 HTML이 results라는 <div> 요소에 표시되어, 검색 결과가 실시간으로 페이지에 나타납니다.
이렇게 구현하면 사용자가 검색어를 입력할 때마다 실시간으로 하단에 검색 결과가 표시되며, 해당 메뉴를 클릭하면 그 메뉴로 이동할 수 있습니다.
document.getElementById("results").innerHTML을 통해 검색 결과를 동적으로 추가하고 나서 해당 결과의 스타일을 변경하려면, innerHTML을 사용하여 HTML을 삽입한 후에 JavaScript나 CSS를 통해 스타일을 적용할 수 있습니다. 두 가지 방법을 사용할 수 있는데, CSS를 직접 <style> 태그나 외부 CSS 파일에 적용하는 방법과 JavaScript를 통해 스타일을 적용하는 방법입니다.
1. CSS를 통해 스타일 변경하기
CSS를 통해 results div의 스타일을 미리 지정할 수 있습니다. 예를 들어, 검색 결과가 표시되는 부분의 배경색, 테두리, 글꼴 스타일 등을 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>메뉴 검색</title>
<style>
#results {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
max-height: 200px;
overflow-y: auto;
font-family: Arial, sans-serif;
}
#results a {
display: block;
padding: 5px;
text-decoration: none;
color: #333;
}
#results a:hover {
background-color: #e0e0e0;
color: #000;
}
</style>
<script>
function searchMenu() {
var searchQuery = document.getElementById("searchInput").value;
if (searchQuery.length > 0) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.asp?query=" + encodeURIComponent(searchQuery), true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("results").innerHTML = xhr.responseText;
}
};
xhr.send();
} else {
document.getElementById("results").innerHTML = "";
}
}
</script>
</head>
<body>
<h1>메뉴 검색</h1>
<input type="text" id="searchInput" onkeyup="searchMenu()" placeholder="메뉴 검색...">
<div id="results"></div>
</body>
</html>
2. JavaScript를 통해 스타일 변경하기
JavaScript로 동적으로 results의 스타일을 변경할 수 있습니다. 예를 들어, 검색 결과가 업데이트될 때마다 특정 스타일을 적용하려면 다음과 같이 할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>메뉴 검색</title>
<style>
/* 기본 스타일 */
#results {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
max-height: 200px;
overflow-y: auto;
}
</style>
<script>
function searchMenu() {
var searchQuery = document.getElementById("searchInput").value;
var resultsDiv = document.getElementById("results");
if (searchQuery.length > 0) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.asp?query=" + encodeURIComponent(searchQuery), true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
resultsDiv.innerHTML = xhr.responseText;
// 결과가 있을 때 스타일을 변경
resultsDiv.style.backgroundColor = "#f9f9f9";
resultsDiv.style.border = "1px solid #ccc";
resultsDiv.style.padding = "10px";
}
};
xhr.send();
} else {
resultsDiv.innerHTML = "";
// 검색어가 없을 때 스타일을 초기화
resultsDiv.style.backgroundColor = "transparent";
resultsDiv.style.border = "none";
resultsDiv.style.padding = "0";
}
}
</script>
</head>
<body>
<h1>메뉴 검색</h1>
<input type="text" id="searchInput" onkeyup="searchMenu()" placeholder="메뉴 검색...">
<div id="results"></div>
</body>
</html>
3. JavaScript로 동적으로 생성된 요소 스타일링
검색 결과로 반환된 링크(<a> 태그)에 스타일을 추가하려면, 위의 CSS 예제에서와 같이 #results a와 같은 CSS 선택자를 사용하여 스타일을 정의할 수 있습니다. 만약 JavaScript로 직접 스타일을 적용하고 싶다면, getElementsByTagName이나 querySelectorAll을 사용하여 요소를 선택한 후 스타일을 적용할 수 있습니다.
document.querySelectorAll('#results a').forEach(function(link) {
link.style.display = "block";
link.style.padding = "5px";
link.style.textDecoration = "none";
link.style.color = "#333";
});이 방법들 중 하나를 사용하면, 실시간 검색 결과의 스타일을 쉽게 관리할 수 있습니다. CSS로 스타일을 관리하는 것이 유지보수 측면에서 더 효율적이며 권장됩니다.
'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글
| [JavaScript] 전화번호 - 표시 하고, 저장은 숫자로만 (0) | 2024.08.29 |
|---|---|
| [ASP, MSSQL] dbconnection.asp 사용하기 (0) | 2024.08.28 |
| [도커] 시놀로지 SSH로 Docker 사용하는 명령어들 (0) | 2024.08.21 |
| [톰캣] tomcat에서 context 추가하는 방법 3가지 (0) | 2024.08.21 |
| [이클립스] 프로젝트 기본 Text file encoding을 UTF-8로 변경하기 (0) | 2024.08.21 |
댓글