Skip to content

Instantly share code, notes, and snippets.

@ep4sh

ep4sh/index.php

Created October 7, 2018 18:16
Show Gist options
  • Save ep4sh/98ce36df6e5a92cef5bd5cc3318c71ca to your computer and use it in GitHub Desktop.
Save ep4sh/98ce36df6e5a92cef5bd5cc3318c71ca to your computer and use it in GitHub Desktop.
Download ZIP
datatables-bootstrap4-mysql
Raw
index.php
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
VCG
</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/css/st.css" />
<link rel="stylesheet" href="static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
<script src="static/js/jquery.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<script src="static/js/my.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#Modal" data-whatever="@mdo">ВХОД</button>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<button type="button" class="btn btn-danger">ВЫХОД</button>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">
<button type="button" class="btn btn-info">Статистика</button>
</a>
</li>
</ul>
<!--
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Фамилия гостя" aria-label="Фамилия гостя">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Поиск</button>
</form>
-->
</div>
</nav>
<!--
-->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Новый гость БЦ</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">ФИО:</label>
<input type="text" class="form-control" id="guest-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">№ карты:</label>
<input type="text" class="form-control" id="cardno">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Отметить гостя</button>
</div>
</div>
</div>
</div>
<!--
-->
<main role="main" class="container">
<div class="starter-template">
<h1>Список гостей за <span class="badge badge-primary"><?php date("%Y:%m:%d"); ?></span></h1>
<hr>
<table id="gData" class="stripe" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Ф.И.О гостя</th>
<th>Номер карты</th>
<th>Компания</th>
<th >Отметка входа</th>
<th >Отметка выхода</th>
</tr>
</thead>
</table>
</main>
</body>
</html>
Raw
json.php
<?php
$mysqli = new mysqli('localhost', 'root', 'root', 'vcguest');
if ($mysqli->connect_errno) {
// Соединение не удалось. Что нужно делать в этом случае?
// Можно отправить письмо администратору, отразить ошибку в журнале,
// информировать пользователя об ошибке на экране и т.п.
// Вам не нужно при этом раскрывать конфиденциальную информацию, поэтому
// просто попробуем так:
echo "Извините, возникла проблема на сайте";
echo "Ошибка: Не удалсь создать соединение с базой MySQL и вот почему: \n";
echo "Номер_ошибки: " . $mysqli->connect_errno . "\n";
echo "Ошибка: " . $mysqli->connect_error . "\n";
// Вы можете захотеть показать что-то еще, но мы просто выйдем
exit;
}
// Выполняем запрос SQL
$sql = "SELECT guests.id, guestName, cardNo, inDate, outDate, companyName from guests JOIN companys ON (guests.company_id = companys.id)";
#$sql = "SELECT * from guests JOIN companys ON (guests.company_id = companys.id)";
if (!$result = $mysqli->query($sql)) {
// О нет! запрос не удался.
echo "Извините, возникла проблема в работе сайта.";
// И снова: не делайте этого на реальном сайте, но в этом примере мы покажем,
// как получить информацию об ошибке:
echo "Ошибка: Наш запрос не удался и вот почему: \n";
echo "Запрос: " . $sql . "\n";
echo "Номер_ошибки: " . $mysqli->errno . "\n";
echo "Ошибка: " . $mysqli->error . "\n";
exit;
}
// Уфф, мы это сделали. У нас есть соединение с базой даннх и успешный запрос.
// Но где же его результат?
if ($result->num_rows === 0) {
// Упс! в запросе нет ни одной строки! Иногда это ожидаемо и нормально, иногда нет.
// Решать Вам. В данном случае, может быть actor_id был слишком большим?
echo "Мы не смогли сделать что-либо, простите. Пожалуйста, попробуйте еще раз.";
exit;
}
while ($row = $result->fetch_assoc()) {
$results["data"][] = $row ;
# $results = array_push($results,$data);
}
echo json_encode($results, JSON_UNESCAPED_UNICODE);
/*while($row = $result->fetch_array(MYSQLI_ASSOC)){
$results["data"][] = $row ;
}*/
#echo json_encode($json_data, json.php);
//$array = ;
//echo json_encode($array, JSON_UNESCAPED_UNICODE);
?>
Raw
my.js
$(document).ready(function() {
$('#gData').DataTable( {
language: {
processing: "Загрузка..",
search: "Быстрый поиск:",
lengthMenu: "Показать _MENU_ элементов",
info: "Показано _START_ - _END_; Всего: _TOTAL_ ",
infoEmpty: "Показано 0 -- 0 из 0 ",
infoFiltered: "(выбрано из _MAX_ записей)",
emptyTable: "Нет записей",
paginate: {
first: "Раз",
previous: "Назад",
next: "Вперёд",
last: "Конец"
},
},
ajax: {
url: 'json.php',
dataSrc: 'data',
},
columns: [
{ "data": "id" },
{ "data": "guestName" },
{ "data": "cardNo" },
{ "data": "inDate" },
{ "data": "outDate" },
{ "data": "companyName" }
]
} );
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment