KekBt AJAX példa

Szerző: Sallai András
Copyright © 2021, Sallai András
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Adatbázis

dolgozok { az, nev, igszam, telepules, vegzettseg, belepes, beosztasAz }
beosztasok { az, nev }

Dolgozó lekérése

Projekt könyvtárszerkezet

kekbt/
  |-database/
  |-src/
  |  |-php/
  |  |  |-includes/
  |  |  |   |-config.php
  |  |  |   |-database.php
  |  |  |   `-mariadb.php
  |  |  `-lekerdolgozok.php
  |  |-dolgozolista.html
  |  |-dolgozolista.js
  |  `-index.html
  `-test/

PHP

Adatok lekérése és megjelenítése adatbázisban.

config.php

<?php
 
$db['host'] = 'localhost';
$db['user'] = 'kekbt';
$db['pass'] = 'titok';
$db['name'] = 'kekbt';

mariadb.php

<?php
include_once 'config.php';
 
function connectDb() {
	global $db;
	$conn = mysqli_connect(
		$db['host'], 
		$db['user'], 
		$db['pass'], 
		$db['name']
	);
	if (!$conn) {
		error_log('Hiba! A kapcsolódás sikertelen!');
	}
	if(!mysqli_set_charset($conn, 'utf8')) {
		error_log('Hiba! A karakterkódolás beállítása sikertelen!');
	}
	return $conn;
}
 
function closeDb($conn) {
	mysqli_close($conn);
}

database.php

<?php
include_once 'mariadb.php';
 
 
function lekerDolgozok() {
	$conn = connectDb();
	$sql = "
	select * from dolgozok
	";
	$res = mysqli_query($conn, $sql);
	if(!$res) {
		error_log('Hiba! A lekérdezés sikertelen!' .
		$sql);
		exit();
	}
	for( $datar = array(); 
		$row = $res->fetch_assoc(); 
		$datar[] = $row);
	closeDb($conn);
	return $datar;
}

lekerdolgozok.php

<?php
 
include_once 'includes/database.php';
 
$datas = lekerDolgozok();
 
echo json_encode($datas);

HTML

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
    <h1>Kék Bt.</h1>
    <ul>
        <li><a href="dolgozolista.html">Dolgozolista</a></li>
    </ul>
 
</body>
</html>

dolgozolista.html

<!DOCTYPE html>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<h1>Dolgozolista</h1>
 
	<table id="lista"></table>
	<script src="dolgozolista.js"></script>
</body>
</html>

JavaScript

dolgozolista.js

'use strict';
 
function lekerdolgozok() {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'text';
 
    xhr.open("POST", "php/lekerdolgozok.php", true);
    xhr.send();
 
    xhr.onload = function() {
        if(xhr.readyState === xhr.DONE) {
            if(xhr.status === 200) {
				feltolt(xhr.responseText);
            }
        }
    }	
}
 
function feltolt(data_r) {
	let lista = document.getElementById('lista');
	let data = JSON.parse(data_r);
	for(let i=0; i<data.length; i++) {
		lista.innerHTML += `
			<tr>
				<td>${data[i].nev}</td>
				<td>${data[i].telepules}</td>
			</tr>		
		`;
 
	}
}
 
 
lekerdolgozok();

Dolgozó beszúrása

Projekt könyvtárszerkezet

kekbt/
  |-database/
  |-src/
  |  |-js/
  |  |  |-dolgozohozzaad.js
  |  |  `-dolgozolista.js
  |  |-php/
  |  |  |-includes/
  |  |  |   |-config.php
  |  |  |   |-database.php
  |  |  |   `-mariadb.php
  |  |  |-hozzaaddolgozo.php
  |  |  |-lekerbeosztasok.php
  |  |  `-lekerdolgozok.php
  |  |-dolgozohozzaad.html
  |  |-dolgozolista.html
  |  `-index.html
  `-test/

PHP

Kiegészítettük a database.php-t:

database.php

<?php
include_once 'mariadb.php';
 
function lekerDolgozok() {
	$conn = connectDb();
	$sql = "
	select * from dolgozok
	";
	$res = mysqli_query($conn, $sql);
	if(!$res) {
		error_log('Hiba! A lekérdezés sikertelen!' .
		$sql);
		exit();
	}
	for( $datar = array(); 
		$row = $res->fetch_assoc(); 
		$datar[] = $row);
	closeDb($conn);
	return $datar;
}
 
function lekerBeosztasok() {
	$conn = connectDb();
	$sql = "
	select * from beosztasok
	";
	$res = mysqli_query($conn, $sql);
	if(!$res) {
		error_log('Hiba! A lekérdezés sikertelen!' .
		$sql);
		exit();
	}
	for( $datar = array(); 
		$row = $res->fetch_assoc(); 
		$datar[] = $row);
	closeDb($conn);
	return $datar;
}
 
function beszurDolgozo($dolgozo) {
	$conn = connectDb();
	$sql = "
	insert into dolgozok
	(nev, igszam, telepules, vegzettseg, belepes, beosztasAz)
	values
	(?,?,?,?,?, ?)
	";
 
	if ($stmt = mysqli_prepare($conn, $sql)) {		
		mysqli_stmt_bind_param($stmt, "sssssd", 
			$dolgozo->nev, 
			$dolgozo->igszam, 
			$dolgozo->telepules, 
			$dolgozo->vegzettseg,
			$dolgozo->belepes,
			$dolgozo->beosztas
			);
		mysqli_stmt_execute($stmt);	 
		error_log(mysqli_stmt_error($stmt));
		mysqli_stmt_close($stmt);
		echo "Beszúrás vége";
	} else {
		echo "Hiba a beszúrás során!";
	}
	closeDb($conn);
	error_log($dolgozo->beosztas);
}

Lett két új PHP fájl:

lekerbeosztasok.php

<?php
include_once 'includes/database.php';
 
$datas = lekerBeosztasok();
echo json_encode($datas);

hozzaaddolgozo.php

<?php
include 'includes/database.php';
 
$dolgozo = json_decode(file_get_contents("php://input"));
beszurDolgozo($dolgozo);

HTML

dolgozohozzaad.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>Dolgozó hozzáadása</h1>
 
    <form id="dolgozoAdatok">
        <fieldset>
            <legend>Dolgozó adatai</legend>
 
            <label>Név</label>
            <input type="text" id="nev"><br>
 
            <label>Igazolványszám</label>
            <input type="text" id="igszam"><br>
 
            <label>Település</label>
            <input type="text" id="telepules"><br>
 
            <label>Végzettség</label>
            <input type="text" id="vegzettseg"><br>
 
            <label>Belépés</label>
            <input type="text" id="belepes"><br>        
 
            <label>Beosztás</label> 
            <select id="beosztas"></select>
 
        </fieldset>
        <button type="button" id="hozzaadGomb">Mentés</button>
    </form>
 
    <script src="js/dolgozohozzaad.js"></script>
</body>
</html>

JavaScript

dolgozohozzaad.js

const hozzaadGomb = document.getElementById('hozzaadGomb');
hozzaadGomb.addEventListener('click', event => {
	let dolgozo = osszeallitDolgozo();
	hozzaadDolgozo(dolgozo);
});
 
function osszeallitDolgozo() {
	let dolgozo = new Object();
	dolgozo.nev = document.getElementById('nev').value;
	dolgozo.igszam = document.getElementById('igszam').value;
	dolgozo.telepules = document.getElementById('telepules').value;
	dolgozo.vegzettseg = document.getElementById('vegzettseg').value;
	dolgozo.belepes = document.getElementById('belepes').value;
	dolgozo.beosztas = document.getElementById('beosztas').value;
	return dolgozo;
}
 
function hozzaadDolgozo(dolgozo) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'text'; 
    xhr.open("POST", "../php/hozzaaddolgozo.php", true);
    xhr.send(JSON.stringify(dolgozo)); 
    xhr.onload = function() {
        if(xhr.readyState === xhr.DONE) {
            if(xhr.status === 200) {
				console.log(xhr.responseText);
            }
        }
    }	
}
 
function lekerBeosztasok() {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'text'; 
    xhr.open("POST", "../php/lekerbeosztasok.php", true);
    xhr.send(); 
    xhr.onload = function() {
        if(xhr.readyState === xhr.DONE) {
            if(xhr.status === 200) {
				feltoltBeosztasok(xhr.responseText);
            }
        }
    }		
}
 
function feltoltBeosztasok(beosztasok) {
	console.log(beosztasok);
 
	let beosztasokSelect = document.getElementById('beosztas');
	let data = JSON.parse(beosztasok);
	for(let i=0; i<data.length; i++) {
		beosztasokSelect.innerHTML += `
			<option value='${data[i].az}'>
			${data[i].nev}
			</option>		
		`;
	}
}
 
lekerBeosztasok();