<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mine_contract</title>
<link href="new.css" rel="stylesheet"/>
<script src="script.js" defer></script>
</head>
<body>
<?php
print("v 0.0.22\n");
include 'perem.php'; <!--подключаю БД? -->
?>
<table id="m_info">
<tr>
<th>№ п/п</th>
<th>Номер</th>
<th>Название</th>
<th>Адрес</th>
<th>ФИО директора</th>
<th>Номер телефона директора</th>
</tr>
<tr>
<td><p>1</p></td>
<td><p>1</p></td>
<td><p>Пример названия</p></td>
<td><p>Пример адреса</p></td>
<td><p>ФИО директора</p></td>
<td><p>+79490000000</p></td>
</tr>
</table>
<div class="popup">
<div class="popup__container">
<div class="popup__wrapper">
<div id="wrapper">
<form action="perem.php" method="POST" class="form">
<button class="exit" class="exit" id="closeButton" onclick="delRow()">х</button>
<div class="string">
<label for="id">№ П/П:</label>
<input type="number" id="id" name="id" required>
</div>
<div class="string">
<label for="N_m">Номер :</label>
<input type="text" id="N_m" name="n_m" placeholder="Например" required>
</div>
<div class="string">
<label for="name">Название:</label>
<input type="text" id="name" name="name_m" placeholder="Например " required>
</div>
<div class="string">
<label for="Adr">Адрес:</label>
<input type="text" id="Adr" name="Adr_m" placeholder="Например г.Название города, р.Район, ул.Улица">
</div>
<div class="string">
<label for="Full_name">ФИО директора :</label>
<input type="text" id="Full_name" name="director" placeholder="Например Иванов Иван Иванович" required>
</div>
<div class="string">
<label for="Phone">Номер телефона :</label>
<input type="tel" id="Phone" name="Phone_number" placeholder="Например +00000000000" required>
</div>
<button type="submit" id="contact" value="Отправить в БД">
</form>
</div>
</div>
</div>
</div>
<button id="button" class="button" onclick="addRow()">Открыть форму</button>
</body>
</html>const button = document.querySelector('#button');
const closeButton = document.querySelector('#closeButton');
const form = document.querySelector('.form');
const popup = document.querySelector('.popup');
button.addEventListener('click', () => {
form.classList.add('open');
popup.classList.add('popup_open');
});
closeButton.addEventListener('click', () => {
form.classList.remove('open');
popup.classList.remove('popup_open');
});<?php
$host='мои данные';
$db = 'мои данные';
$username = 'мои данные';
$password = 'мои данные';
# Создаем соединение с базой PostgreSQL с указанными выше параметрами
$dsn = "pgsql:host=$host; port=5432; dbname=$db; user=$username; password=$password";
try{
$conn = new PDO($dsn);
if($conn){
# Выполняем запрос на создание таблиц
$psql = "CREATE TABLE IF NOT EXISTS mine_info ();
ALTER TABLE mine_info ADD IF NOT EXISTS id_k1 integer PRIMARY KEY;
ALTER TABLE mine_info ADD IF NOT EXISTS N_mi varchar(20) NOT NULL;
ALTER TABLE mine_info ADD IF NOT EXISTS name_m text NOT NULL;
ALTER TABLE mine_info ADD IF NOT EXISTS address varchar(70) NOT NULL;
ALTER TABLE mine_info ADD IF NOT EXISTS full_name_of_director text NOT NULL;
ALTER TABLE mine_info ADD IF NOT EXISTS phone_number varchar(30) NOT NULL;";
$conn->exec($psql);
# Сделаем запрос на получение списка созданных таблиц
$res = $conn->query("select table_name, column_name from information_schema.columns where table_schema='public'");
}
}catch (PDOException $e){
echo $e->getMessage();
}
?>
// В порядке выполнения:
xhr.onloadstart // 1
xhr.upload.onloadstart // 2
xhr.upload.onprogress // 3
xhr.upload.onload // 4
xhr.upload.onerror // 4
xhr.upload.onabort // 4
xhr.upload.ontimeout // 4
xhr.upload.onloadend // 5
// download
xhr.onprogress // 6
xhr.onload // 7
xhr.onerror // 7
xhr.onabort // 7
xhr.ontimeout // 7
xhr.onloadend // 8
xhr.onreadystatechange // 6-8function request(options) {
let requestJson = options.data;
let requestBody = JSON.stringify(requestJson);
let xhr = new XMLHttpRequest();
xhr.open('POST', options.url);
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xhr.responseType = 'json';
xhr.onload = function () {
if (xhr.status == 200) {
if (xhr.response == null) {
options.error.call(xhr, 'FORMAT_ERROR');
} else {
options.success.call(xhr, xhr.response);
}
} else {
options.error.call(xhr, 'SERVER_ERROR');
}
};
xhr.onerror = function () {
options.error.call(xhr, 'NETWORK_ERROR');
};
xhr.send(requestBody);
}
function click() {
// ...FORM STUFF...
let requestData = { 'name1': 'value1', 'name2': 'value2' };
request({
url: 'json.php',
data: requestData,
success: function (response) {
console.log('XHR:', response);
// response['key1'], response['key2']
// ...TABLE STUFF...
},
error: function (message) {
console.error('XHR:', message);
},
});
}<?php
// json.php
header('Content-Type: application/json; charset=utf-8');
$requestBody = file_get_contents('php://input');
$requestJson = json_decode($requestBody, true);
// $requestJson['name1'], $requestJson['name2']
// ...DATABASE STUFF...
$responseJson = [ 'key1' => 'value1', 'key2' => 'value2' ];
$responseBody = json_encode($responseJson);
echo $responseBody;const button = document.querySelector('#button');
const closeButton = document.querySelector('#closeButton');
const form = document.querySelector('.form');
const popup = document.querySelector('.popup');
const table = document.getElementById('mine_info');
button.addEventListener('click', () => {
openForm();
});//вызов функции открытия формы
closeButton.addEventListener('click', () => {
closeForm();
});//вызов функции закрытия формы
const httpRequest = (url, options) => {
return fetch(url, options)
.then(response => response.json())
.then(console.log)
.catch(console.error);
};
const postOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
};//тело Post-запрос
const getOptions = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
}
};//тело Get-запрос
const postRequest = data => {
return httpRequest('http://данные:3000/mine_info', {
...postOptions,
body: JSON.stringify(data)
});
};//указания при POST-запросе
const getRequest = () => {
return fetch('http://данные:3000/mine_info', getOptions)
.then(response => response.json())
.then(data => {
updateTable(data);
})
.catch(console.error);
};//указания при GET-запросе
const updateTable = data => {
data.forEach(item => {
const newRow = document.createElement("tr");
for (let key in item) {
const newCell = document.createElement("td");
newCell.textContent = item[key];
newRow.appendChild(newCell);
}
table.appendChild(newRow);
});
};//создание константы, где будет происходить действия с таблицей
window.onload = function() {
getRequest();
};//для того чтобы при загрузке страницы происходил GET-запрос
const openForm = () => {
form.classList.add('open');
popup.classList.add('popup_open');
};//функция открытия формы
const closeForm = () => {
form.classList.remove('open');
popup.classList.remove('popup_open');
};//функция закрытия формы
const formHandler = (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(e.target).entries());
postRequest(data)
.then(() => {
closeForm();
location.reload();
})
.catch(console.error);
};//отправка данных из формы
form.addEventListener('submit', formHandler);const Pool = require('pg').Pool
const pool = new Pool({
user: '',
host: '',
database: '',
password: '',
port: 5432,
})//Данные для подключения к БД
const getMineinfo = (request, response) => {
pool.query('SELECT * FROM mine_info', (error, results) => {
if (error) {
throw error
}
response.status(200).json(results.rows)
})
}//Создание константы getMineinfo, где вызывается SQL-команду "SELECT", для того чтобы взять данные из БД
const createRow = (request, response) => {
const { id_k1, n_mine, name_mine, adress, full_name_of_direcor, phone_number } = request.body
pool.query('INSERT INTO mine_info (id_k1, n_mine, name_mine, adress, full_name_of_direcor, phone_number) VALUES ($1, $2, $3, $4, $5, $6) RETURNING *', [id_k1, n_mine, name_mine, adress, full_name_of_direcor, phone_number], (error, results) => {
if (error) {
throw error
}
response.status(201).send(`User added with ID: ${results.rows[0].id}`)
})
}//Создание константы createRow, где вызываеться SQL-команда "INSERT INTO", для взятия информации из формы и записи её в БД
module.exports = {
getMineinfo,
createRow,
}//Берём из файла.js файла//файл.js
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const db = require('./queries')
const app = express()
const port = 3000
app.use(bodyParser.json())
app.use(
bodyParser.urlencoded({
extended: true,
})
)
app.get('/', (request, response) => {
response.json({ info: 'Node.js, Express, and Postgres API' })
})
app.use(cors())
app.get('/mine_info', db.getMineinfo)
app.post('/mine_info', db.createRow)
app.listen(port, () => {
console.log(`App running on port ${port}.`
)})
Простой
Простой
Простой
