이번에는 방명록 위주로 짜보았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>방명록</title>
<style>
/* 스타일 부분은 기존과 동일 */
.section {
margin: 20px 0;
padding: 10px;
}
.guest-book ul {
list-style-type: none;
}
.guest-book li {
margin-bottom: 10px;
}
textarea, input[type="text"] {
width: 100%;
padding: 8px;
font-size: 16px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #000000;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #333;
}
.edit-btn {
background-color: #0067A3;
margin-left: 10px;
}
.delete-btn {
background-color: #e74c3c;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="guest-book">
<h3>방명록</h3>
<form id="guestBookForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required placeholder="이름을 입력하세요">
<label for="message">내용:</label>
<textarea id="message" name="message" required placeholder="방명록 내용을 입력하세요"></textarea>
<button type="submit">저장</button>
</form>
<h4>방명록 내용</h4>
<ul id="guestMessages"></ul>
</div>
<script>
// IndexedDB 데이터베이스 열기
const dbName = 'guestbook';
const dbVersion = 1;
let db;
const openDb = () => {
const request = indexedDB.open(dbName, dbVersion);
request.onupgradeneeded = (event) => {
db = event.target.result;
if (!db.objectStoreNames.contains('messages')) {
const store = db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });
store.createIndex('name', 'name', { unique: false });
store.createIndex('message', 'message', { unique: false });
}
};
request.onsuccess = (event) => {
db = event.target.result;
loadMessages();
};
request.onerror = (event) => {
console.error("IndexedDB 열기 실패:", event);
};
};
// 방명록 메시지 불러오기
const loadMessages = () => {
const transaction = db.transaction('messages', 'readonly');
const store = transaction.objectStore('messages');
const cursorRequest = store.openCursor();
const messagesList = document.getElementById('guestMessages');
messagesList.innerHTML = ""; // 메시지 목록 초기화
cursorRequest.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
const listItem = document.createElement('li');
listItem.setAttribute('data-id', cursor.value.id);
listItem.textContent = `${cursor.value.name}: ${cursor.value.message}`;
// 수정 버튼
const editButton = document.createElement('button');
editButton.className = 'edit-btn';
editButton.textContent = '수정';
editButton.onclick = () => editMessage(cursor.value.id, cursor.value.name, cursor.value.message);
listItem.appendChild(editButton);
// 삭제 버튼
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-btn';
deleteButton.textContent = '삭제';
deleteButton.onclick = () => deleteMessage(cursor.value.id);
listItem.appendChild(deleteButton);
messagesList.appendChild(listItem);
cursor.continue();
}
};
};
// 방명록 메시지 추가하기
const addMessage = (name, message) => {
const transaction = db.transaction('messages', 'readwrite');
const store = transaction.objectStore('messages');
store.add({ name, message });
transaction.oncomplete = () => {
loadMessages(); // 새 메시지 불러오기
window.location.reload();
};
};
// 방명록 메시지 수정하기 (기존 메시지 삭제 후 새로 추가)
const editMessage = (id, currentName, currentMessage) => {
const newName = prompt("이름을 수정하세요", currentName);
const newMessage = prompt("내용을 수정하세요", currentMessage);
if (newName && newMessage) {
const transaction = db.transaction('messages', 'readwrite');
const store = transaction.objectStore('messages');
// 기존 메시지 삭제
store.delete(id);
// 새 메시지 추가
store.add({ name: newName, message: newMessage });
transaction.oncomplete = () => {
loadMessages(); // 수정 후 메시지 목록 새로고침
};
}
};
// 방명록 메시지 삭제하기
const deleteMessage = (id) => {
const transaction = db.transaction('messages', 'readwrite');
const store = transaction.objectStore('messages');
store.delete(id);
transaction.oncomplete = () => {
loadMessages(); // 삭제 후 메시지 목록 새로고침
window.location.reload();
};
};
// 폼 제출 처리
document.getElementById('guestBookForm').addEventListener('submit', (event) => {
event.preventDefault();
const name = document.getElementById('name').value;
const message = document.getElementById('message').value;
addMessage(name, message);
document.getElementById('name').value = '';
document.getElementById('message').value = '';
});
// DB 열기
openDb();
</script>
</body>
</html>indexmessage
를이용한 내용이엿다.
지금은 수정파트가 문제가잇어 건드리기 다시 수정 파트의 id 부분을 수정하여
오래된 값도 수정이 가능하게 해야하는 부분이 잇다.
'웹' 카테고리의 다른 글
| indexed db (0) | 2025.02.18 |
|---|---|
| 웹페이지 만들기 방명록 (0) | 2025.02.18 |
| 웹사이트만들기 1일차 (1) | 2025.02.17 |
| 템플릿 활용 (0) | 2025.02.12 |
| 웹 컨트롤러 (0) | 2025.02.12 |