Скрипт Система управления библиотеками Javascript

FavoriteLoadingДобавить в избранное

Добро пожаловать эта статья о том, как создать простую систему управления библиотекой с помощью Javascript. Да, вы правильно прочитали. В этом примере вообще не используются скрипты на стороне сервера, и он демонстрирует, как мы можем использовать современный Javascript для создания автономной системы. Читайте дальше!

УПРАВЛЕНИЕ БИБЛИОТЕКОЙ JAVASCRIPT

Хорошо, давайте теперь подробно рассмотрим, как работает система управления библиотекой Javascript.

ЧАСТЬ 1) HTML

Создаём файл index.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="description" content="Library Management">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
<title>Система управления библиотеками</title>
<link rel="stylesheet" href="style.css"/>
<script defer src="js.js"></script>
</head>
<body>
<!-- (A) ДОБАВИТЬ/РЕДАКТИРОВАТЬ КНИГИ -->
<div id="libFormWrap"><form id="libForm" onsubmit="return lib.add()">
<div id="formClose" class="mi" onclick="lib.toggle(false)">
Закрыть
</div>
<input type="hidden" id="formID"/>
<label>ISBN/ISSN/серийный номер <br>
<input type="text" id="formCode" required/>
</label>
<label>Название книги <br>
<input type="text" id="formTitle" required/>
</label>
<label>Автор <br>
<input type="text" id="formAuthor" required/>
</label>
<label>Расположение <br>
<input type="text" id="formLoc" required/>
</label>
<input type="submit" value="Сохранить"/>
</form></div>
<!-- (B) Список книг -->
<div id="libListWrap">
<div id="libListHead">
<h1>Список книг</h1>
<div id="formAdd" class="mi" onclick="lib.toggle(true)">
добавить
</div>
</div>
<div id="libList"></div>
</div>
</body>
</html>

ЧАСТЬ 2) JAVASCRIPT

Создаём файл js.js

let lib = {
// (A) INIT
iDB: null,
iTX: null,
iName: "Моя библиотека", // объект idb и транзакция
hForm: null,
hID: null,
hCode: null, // HTML-элементы
hTitle: null,
hAuthor: null,
hLoc: null,
hList: null,
init: () => {
// (A1) ПРОВЕРКА ПОДДЕРЖКИ IDB
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!window.indexedDB) {
alert("Ваш браузер не поддерживает индексированную базу данных.");
return false;
}
// (A2) ОТКРЫТЬ БАЗУ ДАННЫХ "MYLIB"
let req = window.indexedDB.open(lib.iName, 1);
// (A3) ОШИБКА БАЗЫ ДАННЫХ
req.onerror = (evt) => {
alert("Indexed DB init error - " + evt.message);
console.error(evt);
};
// (A4) ТРЕБУЕТСЯ ОБНОВЛЕНИЕ
req.onupgradeneeded = (evt) => {
// (A4-1) НАЧАТЬ ОБНОВЛЕНИЕ
lib.iDB = evt.target.result;
lib.iDB.onerror = (evt) => {
alert("Indexed DB upgrade error - " + evt.message);
console.error(evt);
};
// (A4-2) VERSION 1
if (evt.oldVersion < 1) {
let store = lib.iDB.createObjectStore(lib.iName, {
keyPath: "id",
autoIncrement: true
});
store.createIndex("code", "code");
store.createIndex("title", "title");
store.createIndex("author", "author");
}
};
// (A5) ОТКРЫТЬ БАЗУ ДАННЫХ ОК
req.onsuccess = (evt) => {
// (A5-1) РЕГИСТРАЦИЯ ОБЪЕКТОВ IDB
lib.iDB = evt.target.result;
lib.iTX = () => {
return lib.iDB.transaction(lib.iName, "readwrite").objectStore(lib.iName);
};
// (A5-2) ПОЛУЧИТЬ HTML-ЭЛЕМЕНТЫ
lib.hForm = document.getElementById("libFormWrap");
lib.hID = document.getElementById("formID");
lib.hCode = document.getElementById("formCode");
lib.hTitle = document.getElementById("formTitle");
lib.hAuthor = document.getElementById("formAuthor");
lib.hLoc = document.getElementById("formLoc");
lib.hList = document.getElementById("libList");
// (A5-3) СПИСОК КНИГ
lib.draw();
};
},
// (B) TOGGLE ДОБАВИТЬ/РЕДАКТИРОВАТЬ ФОРМУ КНИГ
toggle : (id) => {
// (B1) СКРЫТЬ ФОРМУ
if (id == false) {
lib.hID.value = "";
lib.hCode.value = "";
lib.hTitle.value = "";
lib.hAuthor.value = "";
lib.hLoc.value = "";
lib.hForm.classList.remove("show");
}
// (B2) ПОКАЗАТЬ ФОРМУ
else {
// (B2-1) "РЕЖИМ РЕДАКТИРОВАНИЯ
if (Number.isInteger(id)) {
let req = lib.iTX().get(id);
req.onsuccess = (evt) => {
lib.hID.value = id;
lib.hCode.value = req.result.code;
lib.hTitle.value = req.result.title;
lib.hAuthor.value = req.result.author;
lib.hLoc.value = req.result.location;
};
}
// (B2-2) ПОКАЗАТЬ ФОРМУ
lib.hForm.classList.add("show");
}
},
// (C) ДОБАВИТЬ НОВУЮ КНИГУ
add: () => {
// (C1) ДАННЫЕ ДЛЯ СОХРАНЕНИЯ
let data = {
id: lib.hID.value,
code: lib.hCode.value,
title: lib.hTitle.value,
author: lib.hAuthor.value,
location: lib.hLoc.value
};
// (C2) СОХРАНИТЬ ИЛИ ОБНОВИТЬ
if (data.id == "") {
delete data.id;
lib.iTX().add(data);
} else {
data.id = parseInt(data.id);
lib.iTX().put(data);
}
// (C3) ВЫПОЛНЕНО
lib.toggle(false);
lib.draw();
return false;
},
// (D) УДАЛИТЬ ЗАПИСЬ
del : (id) => { if (confirm(`Delete ${id}?`)) {
// (D1) УДАЛИТЬ КНИГУ
lib.iTX().delete(id);
// (D2) СПИСОК ПЕРЕРАБОТКИ
lib.draw();
}},
// (E) СПИСОК КНИГ
draw : () => {
lib.hList.innerHTML = "";
lib.iTX().getAll().onsuccess = (evt) => { for (let book of evt.target.result) {
let row = document.createElement("div");
row.className = "row";
row.innerHTML = `<div class="binfo">
<div>
<p>Номер: ${book.id}</p>
<p>Серийный номер: ${book.code}</p>
</div>
<div>
<p>Название книги: ${book.title}</p>
<p>Автор: ${book.author}</p>
</div>
<p>расположение: ${book.location}</p>
</div>
<input type="button" class="mi" value="Удалить" onclick="lib.del(${book.id})"/>
<input type="button" class="mi" value="редактировать" onclick="lib.toggle(${book.id})"/>`;
lib.hList.appendChild(row);
}};
}
};
window.addEventListener("DOMContentLoaded", lib.init);

ЧАСТЬ 3) CSS

Создаём файл style.css

/* (A) ВСЯ СТРАНИЦА */
@font-face{font-family:"Material Icons";src:url(maticon.woff2) format("woff2")}
.mi {
font-family: "Material Icons";
font-weight: 400;
font-style: normal;
text-decoration: none;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
body {
background-color: #000;
padding: 0;
margin: 0;
}
/* (B) стили инпутов */
button, input[type=button], input[type=submit], #formAdd, #formClose {
border: 1px solid #fff;
color: #fff;
background: #780000;
cursor: pointer;
}
input, button {
padding: 10px;
}
input.mi, #formAdd, #formClose {
padding: 15px;
}
#libFormWrap, #libListHead {
display: flex;
align-items: center;
justify-content: center;
}
/* (C) ДОБАВИТЬ/РЕДАКТИРОВАТЬ КНИГИ */
/* (C1) Обертка на всю страницу */
#libFormWrap {
position: fixed;
top: 0; left: 0; z-index: 999;
width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.5);
opacity: 0; visibility: hidden;
transition: opacity 0.3s;
}
#libFormWrap.show {
opacity: 1; visibility: visible;
}
/* (C2) ДОБАВИТЬ/РЕДАКТИРОВАТЬ ФОРМУ */
#libForm {
position: relative;
width: 350px;
padding: 20px;
border: 1px solid #ddd;
background: #f2f2f2;
}
#formClose {
position: absolute;
top: 0; right: 0;
font-weight: 700;
}
#libForm, #libForm input {
border-radius: 10px;
}
#libForm label, #libForm input {
display: block;
width: 100%;
}
#libForm label {
margin: 10px 0;
}
#libForm input {
border: 1px solid #ccc;
}
#libForm input[type=submit] {
margin-top: 20px;
}
/* (D) СПИСОК КНИГ */
/* (D1) LIST WRAPPER */
#libListWrap {
max-width: 1000px;
padding: 10px;
margin: 0 auto;
}
/* (D2) LIST HEADER */
#libListHead {
display: flex;
align-items: center;
justify-content: center;
}
#libListHead h1 {
flex-grow: 1;
color: #fff;
font-size: 20px;
}
/* (D3) LIST ITEMS */
#libList .row {
display: flex;
border: 1px solid #eee;
background: #f2f2f2;
margin: 10px 0;
}
#libList .bdel {
padding: 0 20px;
border: 0;
color: #fff;
background: #780000;
}
#libList .binfo {
padding: 10px;
flex-grow: 1;
}

Можете скачать и посмотреть пример.
Посмотреть
Скачать

Написать Администратору

Вы можете написать Администратору сайта.

отправить