Professional Documents
Culture Documents
Основи BET ЛР5 Окаянченко Давид ІА-13
Основи BET ЛР5 Окаянченко Давид ІА-13
Прийняв: Виконав:
Викладач Студент 3 курсу, гр. ІА-13
Зубко Р.А. Окаянченко Д.О.
«__»_________2024 р.
2024 р.
Лабораторна робота №5.
NodeJS. Робота з БД MongoDB. Додаток що реалізує CRUD
операції в БД.
Завдання.
Хід роботи
1. Створимо головну сторінку з переходами на функціональні сторінки:
<div class="p-3 shadow text-center">
<h2>Головна сторінка</h2>
</div>
<div class="container">
<div class="d-flex flex-column align-items-center">
<div class="container mt-5">
<div class="form-group d-flex flex-column align-items-center">
<div class="nav">
<a class="nav-link btn btn-primary btn-lg btn-block"
href="products/info.php">Інформація</a>
<a class="nav-link btn btn-primary btn-lg btn-block"
href="products/search.php">Пошук</a>
</div>
</div>
</div>
</div>
</div>
Результат:
Результат:
?>
<div class="form-group d-flex flex-column align-items-center">
<form method="post">
<label for="search_field">Рядок пошуку</label>
<input type="text" name="search_field" id="search_field"
class="form-control" maxlength="50"/>
<input type="submit" name="search-by-name-submit" class="btn btn-
primary" value="Пошук"/>
</form>
<?php
if (isset($_POST['search-by-name-submit'])) {
$query = "SELECT * FROM details WHERE name LIKE
'$_POST[search_field]'";
$result = mysqli_query($connection, $query);
if ($result) generateTable($result);
else echo "Результатів немає :(";
}
?>
<form method="post">
<label for="start_date">Початкова дата</label>
<input type="date" name="start_date" id="start_date" class="form-
control"/>
<label for="end_date">Кінцева дата</label>
<input type="date" name="end_date" id="end_date" class="form-
control"/>
<input type="submit" name="search-by-time-submit" class="btn btn-
primary" value="Пошук"/>
</form>
<?php
if (isset($_POST['search-by-time-submit'])) {
$start_date = isset($_POST['start_date']) ? $_POST['start_date'] :
'';
$end_date = isset($_POST['end_date']) ? $_POST['end_date'] : '';
$query = "SELECT * FROM details WHERE created BETWEEN '$start_date'
AND '$end_date'";
$result = mysqli_query($connection, $query);
if ($result) generateTable($result);
else echo "Результатів немає :(";
}
?>
</div>
Результат:
Структура проєкту:
Скрипт КП:
Головна папка проєкту
index.php:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initialscale=1">
<meta name="description" content="">
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="noarchive, nosnippet">
<meta name="googlebot" content="noindex, nofollow">
<meta name="googlebot" content="noarchive, nosnippet">
<title>BET-1</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.nav-link {
transition: all 0.3s ease;
}
.nav-link:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="p-3 shadow text-center">
<h2>Головна сторінка</h2>
</div>
<div class="container">
<div class="d-flex flex-column align-items-center">
<div class="container mt-5">
<div class="form-group d-flex flex-column align-items-center">
<div class="nav">
<a class="nav-link btn btn-primary btn-lg btn-block"
href="products/info.php">Інформація</a>
<a class="nav-link btn btn-primary btn-lg btn-block"
href="products/search.php">Пошук</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"><
/script>
</body>
</html>
Папка pages
info.php:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initialscale=1">
<meta name="description" content="">
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="noarchive, nosnippet">
<meta name="googlebot" content="noindex, nofollow">
<meta name="googlebot" content="noarchive, nosnippet">
<title>BET-1</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="p-3 shadow text-center">
<h2>Сторінка інформації</h2>
</div>
<div class="container">
<div class="m-3">
<a class="h5" href="../index.php">На головну</a>
</div>
<div class="form-group d-flex flex-column align-items-center">
<?php
$connection = mysqli_connect("localhost", "root", "",
"technological_maps_db");
?>
<div class="form-group d-flex flex-column align-items-center">
<form method="post">
<label for="search_field">Рядок пошуку</label>
<input type="text" name="search_field" id="search_field"
class="form-control" maxlength="50"/>
<input type="submit" name="search-by-name-submit" class="btn
btn-primary" value="Пошук"/>
</form>
<?php
if (isset($_POST['search-by-name-submit'])) {
$query = "SELECT * FROM details WHERE name LIKE
'$_POST[search_field]'";
$result = mysqli_query($connection, $query);
if ($result) generateTable($result);
else echo "Результатів немає :(";
}
?>
<form method="post">
<label for="start_date">Початкова дата</label>
<input type="date" name="start_date" id="start_date"
class="form-control"/>
<label for="end_date">Кінцева дата</label>
<input type="date" name="end_date" id="end_date" class="form-
control"/>
<input type="submit" name="search-by-time-submit" class="btn
btn-primary" value="Пошук"/>
</form>
<?php
if (isset($_POST['search-by-time-submit'])) {
$start_date = isset($_POST['start_date']) ?
$_POST['start_date'] : '';
$end_date = isset($_POST['end_date']) ? $_POST['end_date'] :
'';
$query = "SELECT * FROM details WHERE created BETWEEN
'$start_date' AND '$end_date'";
$result = mysqli_query($connection, $query);
if ($result) generateTable($result);
else echo "Результатів немає :(";
}
?>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"><
/script>
</body>
</html>
Папка assets/css
main.css:
.vh-80 {
height: 80vh !important;
}