18.10.2017, 17:30. Показов 734. Ответов 2
Доброго времени суток!
Есть полноценно работающая вещь, написанная на js(AJAX)+php(MySQL). Суть работы: показывает список рабочих+станки, можно добавить станок рабочему или удалить станок, а также вывести список станков по имени рабочего. Наглядно выглядит так:
Структура базы:
2 таблицы worker и machine, связь "один ко многим" по worker_id. Сама база:
factory.sql.rar
worker
machine
Полный код:
config.php - конфигурация подключения к MySQL
Кликните здесь для просмотра всего текста
| PHP |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <?php
const PAGE_ENCODING='UTF-8';
// Connection's Parameters
$db_host="localhost";
$db_name="factory";
$username="root";
$password="";
$link=mysqli_connect($db_host,$username,$password,$db_name) or die ("cannot connect");
if (!$link) {
die("ERROR: ".mysqli_error($link));
}
if(mb_internal_encoding(PAGE_ENCODING) != PAGE_ENCODING)
die('There is no support encoding: '.PAGE_ENCODING);
?> |
|
create_machine.php - обработка создания станка для рабочего
Кликните здесь для просмотра всего текста
| PHP |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <?php
include('config.php');
mysqli_query($link, "SET NAMES utf8");
// Verify if user exists for login
if( isset($_POST['name']) && isset($_POST['worker']) ) {
$name = $_POST['name'];
$worker = $_POST['worker'];
$sql = "SELECT worker_id FROM worker WHERE fio='". $worker . "'" or die ("ERROR: ".mysqli_error());
$result = mysqli_query($link, $sql) or die (mysqli_error($link));
$data = mysqli_fetch_assoc($result);
$id = $data['worker_id'];
$ins_sql = "INSERT INTO machine (worker_id,name) VALUES ('". $id . "','" . $name . "')" or die ("ERROR: ".mysqli_error());
mysqli_query($link, $ins_sql) or die (mysqli_error($link));
echo 'OK';
} else {
die('Some variable is not set.');
}
mysqli_close($link);
?> |
|
delete_machine.php - удаление станка
Кликните здесь для просмотра всего текста
| PHP |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <?php
include('config.php');
mysqli_query($link, "SET NAMES utf8");
// Verify if user exists for login
if( isset($_POST['name']) ) {
$name = $_POST['name'];
$sql = "DELETE FROM machine WHERE name='". $name . "'" or die ("ERROR: ".mysqli_error());
$result = mysqli_query($link, $sql) or die (mysqli_error($link));
echo 'OK';
} else {
die('Some variable is not set.');
}
mysqli_close($link);
?> |
|
get_all_info.php - получение информации (рабочий:станки, рабочий:станки, ...)
Кликните здесь для просмотра всего текста
| PHP |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <?php
include('config.php');
mysqli_query($link, "SET NAMES utf8");
$sql = "SELECT fio FROM worker" or die ("ERROR: ".mysqli_error());
$result = mysqli_query($link, $sql) or die (mysqli_error($link));
$getUser_RecordCount = mysqli_num_rows($result);
if($getUser_RecordCount <= 0) {
echo '[]';
} else {
$ret = array();
for ($i=0; $i < $getUser_RecordCount; $i++) {
$getUser_result = mysqli_fetch_assoc($result);
$element = (object) array();
$element->fio = $getUser_result['fio'];
$element->machines = '';
array_push($ret, $element);
}
for ($j=0; $j<count($ret); $j++) {
$machines_sql = "SELECT name FROM machine WHERE worker_id IN (SELECT worker_id FROM worker WHERE fio = '" . $ret[$j]->fio . "')" or die ("ERROR: ".mysqli_error());
$machines_result = mysqli_query($link, $machines_sql) or die (mysqli_error($link));
$machines_count = mysqli_num_rows($machines_result);
if ($machines_count > 0) {
for ($x=0; $x < $machines_count; $x++) {
$current = mysqli_fetch_assoc($machines_result);
$ret[$j]->machines .= $current['name'];
if ($x < $machines_count - 1)
$ret[$j]->machines .= ',';
}
}
}
echo json_encode($ret);
}
mysqli_close($link);
?> |
|
get_search_info.php - получение станков найденного рабочего
Кликните здесь для просмотра всего текста
| PHP |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <?php
include('config.php');
mysqli_query($link, "SET NAMES utf8");
if ( isset($_GET['fio']) ) {
$find_fio = $_GET['fio'];
$sql = "SELECT name FROM machine WHERE worker_id IN (SELECT worker_id FROM worker WHERE fio = '" . $find_fio . "')" or die ("ERROR: ".mysqli_error());
$result = mysqli_query($link, $sql) or die (mysqli_error($link));
$getUser_RecordCount = mysqli_num_rows($result);
if($getUser_RecordCount <= 0) {
echo '[]';
} else {
$ret = array();
for ($i=0; $i < $getUser_RecordCount; $i++) {
$getUser_result = mysqli_fetch_assoc($result);
$element = $getUser_result['name'];
array_push($ret, $element);
}
echo json_encode($ret);
}
} else {
echo 'incorrect arguments';
}
mysqli_close($link);
?> |
|
index.js - js обработка главной страницы
Кликните здесь для просмотра всего текста
| JavaScript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
| var insertHttp;
var deleteHttp;
var infoHttp;
var findHttp;
getAllInfo();
function getAllInfo() {
infoHttp = new XMLHttpRequest();
infoHttp.open('GET', '/get_all_info.php', true);
infoHttp.onreadystatechange = getAllInfoReply;
infoHttp.send();
}
function getAllInfoReply() {
if(infoHttp.readyState == 4) {
if (infoHttp.status == 200) {
var response = JSON.parse(infoHttp.responseText);
fillListInfo(response);
}
}
}
function fillListInfo(mas) {
var list = document.getElementById("all");
list.innerHTML = "";
for (var i = 0; i < mas.length; i++) {
var li = document.createElement("li");
var node = document.createTextNode(mas[i].fio);
var mach = mas[i].machines.split(',');
var lst = document.createElement("ul");
for (var j = 0; j < mach.length; j++) {
var el = document.createElement("li");
var text = document.createTextNode(mach[j]);
el.appendChild(text);
lst.appendChild(el);
}
li.appendChild(node);
li.appendChild(lst);
list.appendChild(li);
}
}
function insertMachine(name,worker) {
insertHttp = new XMLHttpRequest();
var req = 'name=' + name + '&worker=' + worker;
insertHttp.open('POST', '/create_machine.php', true);
insertHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
insertHttp.onreadystatechange = insertMachineReply;
insertHttp.send(req);
}
function insertMachineReply() {
if(insertHttp.readyState == 4) {
if (insertHttp.status == 200) {
var response = insertHttp.responseText;
if(response == 'OK') {
getAllInfo();
} else {
alert('Action CREATE-MACHINE overed with error: ' + response);
}
}
}
}
function deleteMachine(name) {
deleteHttp = new XMLHttpRequest();
var req = 'name=' + name;
deleteHttp.open('POST', '/delete_machine.php', true);
deleteHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
deleteHttp.onreadystatechange = deleteMachineReply;
deleteHttp.send(req);
}
function deleteMachineReply() {
if(deleteHttp.readyState == 4) {
if (deleteHttp.status == 200) {
var response = deleteHttp.responseText;
if(response == 'OK') {
getAllInfo();
} else {
alert('Action DELETE-MACHINE overed with error: ' + response);
}
}
}
}
function findMachinesByFIO(fio) {
findHttp = new XMLHttpRequest();
findHttp.open('GET', '/get_search_info.php?fio=' + fio, true);
findHttp.onreadystatechange = getSearchInfoReply;
findHttp.send(null);
}
function getSearchInfoReply() {
if(findHttp.readyState == 4) {
if (findHttp.status == 200) {
var response = JSON.parse(findHttp.responseText);
var tModel = null;
clear();
if(response != 'null') {
tModel = new TableModel(response);
} else {
var mas = [];
tModel = new TableModel(mas);
}
appendData(tModel);
}
}
}
function appendData(model) {
var table = document.getElementsByTagName("TABLE");
table.innerHTML = "";
// APPEND MODEL INFO TO 'THEAD' ZONE
var thead = document.getElementById("header");
while (thead.rows.length != 0) {
thead.deleteRow(0);
}
var header = thead.insertRow(0);
for (var i = 0; i < model.columnCount(); i++) {
var cell = header.insertCell(i);
cell.innerHTML = "<b>" + model.columnName(i) + "</b>";
}
// APPEND MODEL INFO TO 'TBODY' ZONE
var tbody = document.getElementById("myTable");
var data = model.getData(null);
for (var i = 0; i < data.length; i++) {
var row = tbody.insertRow(i);
var cell = row.insertCell(0);
cell.innerHTML = data[i];
}
}
function clear() {
var table = document.getElementById('myTable');
table.innerHTML = '';
} |
|
TableModel.js - данные для построения таблицы (для get_find_info)
Кликните здесь для просмотра всего текста
| JavaScript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| class TableModel
{
constructor(data)
{
this.data = data;
}
columnCount()
{
return 1;
}
rowCount()
{
return this.data.length;
}
valueAt(row,col)
{
var p = this.data[row];
var ret;
switch(col)
{
case 0: ret = p.name; break;
}
return ret;
}
columnName(column)
{
var name = ["Machine Name"];
return name[column];
}
} |
|
index.html - главная страница
Кликните здесь для просмотра всего текста
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Factory Table</title>
<style type="text/css">
input[type="text"] {
width: 200px;
}
table {
border: 1px solid black;
}
td,th {
border: 1px solid black;
}
.down {
margin-top:10px;
}
</style>
</head>
<body>
<div style="white-space: nowrap;">
<div name="all_info" style="float: left; display: inline-block;">
<ul id="all">
</ul>
</div>
<div style="float: right; display: inline-block; margin-right: 250px;">
<div name="insert-machine-block">
<div style="text-align: center;">
<h2>Insert new machine</h2>
</div>
<div>
<input type = "text" id = "mName" placeholder = "Type the machine name here..." />
<input type = "text" id = "mWorker" placeholder = "Type worker's FIO here..." />
</div>
<div style="text-align: center; margin-top: 10px;">
<input type = "button" value = "Insert machine" onclick="insertMachine(encodeURI(mName.value), encodeURI(mWorker.value))">
</div>
</div>
<div style="text-align: center;">
<div>
<h2>Delete a machine</h2>
</div>
<div>
<input type = "text" id = "delName" placeholder = "Type the machine name here..." />
</div>
<div style="margin-top: 10px;">
<input type = "button" value = "Delete machine" onclick="deleteMachine(encodeURI(delName.value))">
</div>
</div>
<div>
<div style="text-align: center;">
<h2>Search</h2>
</div>
<div>
<input type = "text" id = "findFIO" style="width: 250px;" placeholder = "Type the FIO here to display machines..." />
<input type = "button" value = "Show machine(-s)" onclick="findMachinesByFIO(encodeURI(findFIO.value))">
</div>
<div class="down">
<table>
<thead id="header">
</thead>
<tbody id="myTable">
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="TableModel.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</body>
</html> |
|
Нужно перенести данное чудо на Node.js.

Может кто помочь?
Пытался делать задачу и вывести хотя бы начальный список, однако остановился на том, что нельзя достучаться до элементов страницы через Node.js (т.е. такой штуки, как document уже нет)... И тут понимание немного (т.е. совсем) пропало

Вот всё, что смог сделать (верстка показывается, попытался обратиться к SQL...):
index.rar
На данный момент крашится из-за обращения к document... Обработчики кнопок пока не менял на верстке...
Заранее благодарю за любую помощь и советы!