Spring/Spring 기본 도구 복습
간단한 Firebase(서치 엔진 만들기 .html / css/ js / firebase. (2023.12.26)
sehunbang
2023. 12. 26. 19:09
일단은 오늘 알아낸 방법입니다.
우선 input(textfield) 을 만들어 유저가 입력을 할수 있게 합니다.
<input
href = "search.html"
type="search"
class="form-control form-control-dark"
placeholder="Search..."
aria-label="Search"
id="searchQuery"
name="q"
required onkeydown="submitForm(event)"
>
href 에 검색 html 가 열리게 설정해주소 이름 q (url 에 q=검색한단어 로 나오게) 를 설정해주고 id 값을 줘서 js 로 사용할수 있도록 합니다.
그리고 엔터키를 쳤을때 제출 할수 있도록 코드를 넣어줍니다
<!--검색창 기능-->
<script>
function submitForm(event) {
// 엔터누르면 작동
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById('searchForm').submit(); // 제출
}
}
</script>
<!--검색창 기능(끝)-->
이제 아까 말한 검색 html "search.html" 을 만듬니다. (bootstrap 으로 만들었습니다 , 본인 만의 search.html 만드셔도 됩니다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Linkd-->
<link rel="stylesheet" href="../css/post.css">
<link rel="stylesheet" href="../css/sehun.css">
<link
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<title>검색결과</title>
</head>
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div
class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a
href="/"
class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul
class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>
<a href="index.html" class="nav-link px-2 text-secondary">Home</a>
</li>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search" id="searchForm" action="search.html" method="get">
<input
href = "search.html"
type="search"
class="form-control form-control-dark text-bg-dark"
placeholder="Search..."
aria-label="Search"
id="searchQuery" name="q" required onkeydown="submitForm(event)"
>
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="posting">
<div class="card mb-3">
<div class="profile">
<h4>검색 결과 입니다</h4>
<div class="imgbox">
<p>검색 : <span id="searchInput"></span></p>
<div id="searchResults"></div>
</div>
</div>
</div>
<button
type="button"
class="btn btn-dark"
id="home"
onclick="location.href='./index.html'">뒤로가기</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Url 에 "q=방세훈" 처럼 나오는 보니 get 방식을 사용해서, 입력받은 것을 search.html 에 옴기는데 성공 했습니다.
하지만 string 이 아닌 div 을 가져 온것 이기 때문에 역시 string 으로 바꿔 줘야 js 코딩할때 활용할수 있습니다(firebase 하면서)
자 이제 firebase 서버 설정과 코드를 합니다.
우선 script type 는 module 로 합니다 - (웹사이트를 켜자마자 firebase 가 작동 할수 있도록)
<script type="module">
//이름으로 quary 가져오기
function getQueryParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
// 입력받은거 보여주기
function displaySearchResults() {
const searchQuery = getQueryParam('q');
const resultsContainer = document.getElementById('searchInput');
if (searchQuery) {
resultsContainer.innerHTML = `${searchQuery}`;
} else {
resultsContainer.innerHTML = '<p>No search query specified.</p>';
}
}
// 페이지 켜지자마자 작동하세합니다
window.onload = displaySearchResults;
///////////////// firebase 설정 합니다
/////quary 에 쓸 query ,where ,or ,and 다 자져 오도록 합니다
import {
collection,
addDoc,
query,
where,
or,
and
export const FirebaseConfig = {
apiKey: "AIzaSyCnWzN5W6X8uCEa8kDshO7yFHMmPlyK2Bw",
authDomain: "sparta-b8ff7.firebaseapp.com",
projectId: "sparta-b8ff7",
storageBucket: "sparta-b8ff7.appspot.com",
messagingSenderId: "382464668576",
appId: "1:382464668576:web:82e59da68a7a5b9aecaac5",
measurementId: "G-9S7MFN1FS9",
};
// Firebase 인스턴스 초기화
const app = initializeApp(FirebaseConfig);
const db = getFirestore(app);
const collections= collection(db, "SearchDB")
const docs = await getDocs(collections);
console.log(docs);
// 받아오기
// js 로 사용하기 위해서 div(Object object) 를 string 로 변경해줘야 합니다.
// HTMLDivElement 에 입력 받은 정보 가져오기
var myDivElement = document.getElementById('searchInput');
// inner HTML 컨텐드 지정하기
var divContent = myDivElement.innerHTML;
// nner HTML 컨텐드 string 으로 변경
var divContentString = divContent.toString();
// 로그 띄워서 확인
console.log(divContentString);
// query 정의 성별 이름 mbti 중 아무거나 같으면 or 가져오도록 합니다
const q = query(collections, or(
where("sex", "==", divContentString),
where('name', '==', divContentString),
where('mbti', '==', divContentString),
)
);
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
let row = doc.data();
console.log("작동중");
let url = row["url"];
let name = row["name"];
let sex = row["sex"];
let mbti = row["mbti"];
let temp_html =
`
<br>
<div style = "margin:auto ; border: 1px solid black">
<p>
<b>이름</b> : ${name}
<b>성별</b> : ${sex}
<b>MBTI</b> : ${mbti}
<span><b>주소</b> :<a href = ${url}>${url}</a></span>
<br></p>
</div>
`
;
$(`#searchResults`).append(temp_html);
});
/////////////////////////////////////
</script>
주의! 참고로 firebase에 정보를 넣으셔야 합니다.
결과
풀 프로젝트 배포링크 :https://2geonhee.github.io/team2/
깃 :https://github.com/2GeonHee/team2