szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript:javascript_ajax|< AJAX]]

====== KekBt AJAX példa ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 ====

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

==== PHP ====


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

<code php config.php>
<?php

$db['host'] = 'localhost';
$db['user'] = 'kekbt';
$db['pass'] = 'titok';
$db['name'] = 'kekbt';
</code>

<code php 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);
}

</code>

<code php 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;
}

</code>

<code php lekerdolgozok.php>
<?php

include_once 'includes/database.php';

$datas = lekerDolgozok();

echo json_encode($datas);
</code>

==== HTML ====


<code 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>
</code>


<code 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>
</code>

==== JavaScript ====

<code 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();
</code>

===== Dolgozó beszúrása =====
==== Projekt könyvtárszerkezet ====

<code>
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/
</code>

==== PHP ====

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

<code php 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);
}

</code>


Lett két új PHP fájl:

<code php lekerbeosztasok.php>
<?php
include_once 'includes/database.php';

$datas = lekerBeosztasok();
echo json_encode($datas);
</code>

<code php hozzaaddolgozo.php>
<?php
include 'includes/database.php';

$dolgozo = json_decode(file_get_contents("php://input"));
beszurDolgozo($dolgozo);
</code>


==== HTML ====

<code 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>
</code>



==== JavaScript ====

<code 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();

</code>
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
