der henry: dynamische Webseite mit php

Beitrag lesen

Hallo Rolf,

Und warum das Gefummel mit einem fixed-Container? ....

weil ich es leider nicht besser weiß 🤔, ich lerne aber dazu ... hoffe ich.

Anbei mein komplettes Script, was ich bis jetzt programmiert habe. Es fehlt aber noch das Schreiben des Rückgabewertes in die Datenbank, was ich noch nicht erstellt habe. Die Optik ist auch noch nicht berauschend.

<?php

include_once("../cgi-bin/database_tools.php");
include_once("../cgi-bin/tools.php");

/*
Beispieldaten

["name": "Schaltbefehl1",
"type":"switch",                          // oder value
"headline":"Ueberschrift",
"group":9,
"role":"user",
"passwd":"0815"],
"valuerange":
[{"varname":"T1.ws_regler_ein","set":1,"min":-10,"max":30,"unit":"cm","multi":1,"text":"WS Regler EIN","bgcolor":"#FF0000"},
{"varname":"T1.ws_regler_aus","set":1,"min":-10,"max":30,"unit":"cm","multi":1,"text":"WS Regler AUS","bgcolor":"#033dfc"},
{"varname":"T1.stell_regler_EIN","set":3,"min":-10,"max":30,"unit":"cm","multi":1,"text":"Stell.Regler EIN","bgcolor":"blue"}];

*/

// Initialisieren der Variablen
$message = "";
$show_form = true;
$switch = 0;
$value = 0;

// später wird Name mit übergeben //
	$name = "Funktionstest Eingabe";

	// öffne Datenbank
	$db_link = open_database();
	
	if ($db_link === false) { return false; }

	try
	{
		$sql = "SELECT * FROM writecommands WHERE name ='".$name."'";
		$db_result = mysqli_query($db_link, $sql);

		if ($db_result->num_rows > 0)
		{ $writecommand = mysqli_fetch_all($db_result, MYSQLI_ASSOC); }
		else
		{ $writecommand = [ "name" => "Name not correct", "valuerange" => "" ]; }

//########################################################################################################
// eigentlich erst wichtig, wenn das passwort richtig ist
	
//		$sql = "SELECT * FROM datapoints WHERE plcvarname ='".$name."'";
//		$db_result = mysqli_query($db_link, $sql);
		
//		if ($db_result->num_rows > 0)
//		{ $datapoint = mysqli_fetch_all($db_result, MYSQLI_ASSOC); }
//		else
//		{ echo "no datapoint found with name: '".$name."'";	}
//	}
//	catch(PDOException $e) { echo "database error: " . $e->getMessage(); }
	
//	$db_link->close();

	$name = $writecommand[0]['name'];
	$type = $writecommand[0]['type'];
	$headline = $writecommand[0]['headline'];
	$group = $writecommand[0]['group'];
	$role = $writecommand[0]['role'];
	$passwd = $writecommand[0]['passwd'];
	$valueRange = $writecommand[0]['valuerange'];
	$valueRangeArray = json_decode($valueRange);
	
// prüfe welche Schreibbefehl es ist (switch wegen Erweiterungen)
	switch (strtolower($type))
	{
		case "switch":
			$switch = true;
			break;
		case "value":
			$value = true;
			break;
	} 

// überprüfe ob Daten empfangen wurden
	if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['action'])) 
	{
		$inputpwd = $_POST['password'] ?? '';
	
		// Passwort prüfen	
		if ($passwd === $inputpwd)
		{   // passwort "OK"
			$message = "SUCCESS"; 
			$show_form = false;

			$i=0;
		
			foreach ($_POST as $key => $value) 
			{
				$receiveArray[$i] = htmlspecialchars($key);
				$i++;
				$receiveArray[$i] = htmlspecialchars($value);
				$i++;
			}
	
			$datatosave = "$receiveArray[4] = $receiveArray[5]"; 
		}
		else
		{ $show_form = true; }	
	}

//########################################################################################################
?>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Eingabefeld</title>
    <style>
        .modal { padding: 20px; border-radius: 8px; text-align: center; }
   
        #finish_OK { background: #00FF00; }
        #form-container { background: #D3D3D3; }
        
        .value_ranges { margin-inline:auto; border-spacing: 2px; border: 2px solid gray;
						td { padding: 3px; border: 1px solid black"; }
					  }
		.headframe { margin:0; width: 100vw; height: 100vh; justify-content: center; align-items: center; }
    </style>
</head>

<body class="headframe">

<?php if ($message === "SUCCESS"): ?>
	<div class="modal" id="finish_OK">
		<h2>Daten erfolgreich gespeichert!</h2>
			<?php print_r($_POST) ?>
			<h1><?= $datatosave ?></h1>
<!--		<script>setTimeout(function(){ window.close(); }, 2000);</script>  -->
		<button onclick="window.close();">Beenden</button>
	</div>
	<script>resize();</script> 
<?php endif; ?>


<?php if ($show_form === true): ?>
<div id="overlay" class="<?= $show_form ?>">    
    <div class="modal" id="form-container">
        <h2><?= $headline ?></h2>
		<form method="POST" id="secure-form">
			<input type="hidden" name="action" value="submit">
            <label for="password">Passwort: </label><input type="password" id="password" name="password" minlength="4" maxlength="10" required><br><br>
			<br><br>
			
			<!-- wenn value ausgewählt wurde, muss ein Eingabefeld für Zahlen eingeblendet werden -->
			<?php if ($value): ?>		
				<label for="<?=$valueRangeArray[0]->varname?>">Eingabe (<?=$valueRangeArray[0]->unit?>)<br>min. <?= $valueRangeArray[0]->min ?> / max. <?= $valueRangeArray[0]->max ?></label>
				<input type="text" id="<?=$valueRangeArray[0]->varname?>" name="<?=$valueRangeArray[0]->varname?>" required>
			<!-- <input type="text" id="data" name="data" required min="<?= $valueRangeArray[0]->min ?>" max="<?= $valueRangeArray[0]->max ?>"> -->
				<br><br>
			<?php endif; ?>
               
            <!-- wenn switch ausgewählt wurde, muessen select Felder her -->
			<?php 
				if ($switch) { renderSwitchRange($valueRangeArray); }
			?>
			              
            <br><br>
            <button type="submit">Senden</button>
            <button type="button" onclick="cancelAction()">Abbrechen</button>
        </form>
        <hr style="width: 50%;">
        <p id="timer-text">Timout: <span id="seconds">30</span>s</p>
        <?php if ($message === "WRONG_PASSWORD"): ?>
            <p style="color: red;">falsches Passwort!</p>
        <?php endif; ?>
    </div>
<?php endif; ?>

<script>
	
    let timeLeft = 30;
    const timerSpan = document.getElementById('seconds');
    const overlay = document.getElementById('overlay');

    const countdown = setInterval(() => {
        timeLeft--;
        timerSpan.innerText = timeLeft;
        if (timeLeft <= 0) {
            clearInterval(countdown);
            cancelAction();
        }
    }, 1000);
    
	// Timer bei Mausbewegung zurücksetzen (optional)
	window.onmousemove = () => timeLeft = 30;

	window.onload = resize();

//########################################################################################################
function resize() 
{
		// Ermittelt die benötigte Breite und Höhe des Inhalts
		// scrollWidth/Height erfassen den gesamten Inhalt, auch wenn er versteckt ist
		let contentWidth = document.documentElement.scrollWidth;
		let contentHeight = document.documentElement.scrollHeight;

		// Optional: Puffer für Browser-Rahmen/Scrollbars hinzufügen
		window.resizeTo(contentWidth + 50, contentHeight + 200);
}
//########################################################################################################

function cancelAction()
{
	window.close();
}
//########################################################################################################

function singleSelect(actbox)
{
	const checkboxes = document.querySelectorAll('.single-select');
	checkboxes.forEach((item) => {
        if (item !== actbox) item.checked = false; // Alle anderen abwählen
    });
}
//########################################################################################################

</script>
</body>
</html>

<?php
function renderSwitchRange($valuerangearray) 
{
?>
<table class="value_ranges">
<?php
  for ($i=0; $i < count($valuerangearray); $i++):
    $id = $valuerangearray[$i]->varname;
    $text = $valuerangearray[$i]->text;
    $set = $valuerangearray[$i]->set;
?>
    <tr style="background-color:<?= $valuerangearray[$i]->bgcolor ?>">
      <td>
        <input class="single-select" type="checkbox" id="<?= $id ?>" name="<?= $id ?>" value="<?= $set ?>" <?= $i==0 ? "checked" : "" ?>  onclick="singleSelect(this)" />
      </td>
      <td>
        <label for="<?= $id ?>"><?= $text ?></label>
      </td>
	</tr>	
<?php
   endfor;
?>
  </table>
<?php
}

Ich nutze jetzt bei Auswahl "switch" eine/mehrere checkboxen bei denen ich per JS eine Singleauswahl erzwinge.

Als name und id übergebe immer den varnamen z.B. "T1.ws_regler_ein", was zu meinem nächsten Problem führt.

Ich nehme den $_POST Rückgabewert, lese Schlüssel und Wert aus.

foreach ($_POST as $key => $value) 
			{
				$receiveArray[$i] = htmlspecialchars($key);
				$i++;
				$receiveArray[$i] = htmlspecialchars($value);
				$i++;
			}
	
			$datatosave = "$receiveArray[4] = $receiveArray[5]"; 

Somit erhalte ich bei [4] + [5] den Namen und Wert der ausgewählten Checkbox ... leider aber verändert.

Ich trage als Name und id "T1.ws_regler_ein" erhalte aber von POST => "T1_ws_regler_ein" ... warum, es ist doch alles text/string? ... kann ich dies irgendwie verhindern, ohne tricksen zu müssen? (Punkt in Raute und später wieder zurück wandeln)

Noch ein kleines Problem, beim ersten Aufruf des php-scriptes zeigt er im Browser-Debugger einen Fehler an, da das Array bzw. die Variable "$_SERVER["REQUEST_METHOD"]" noch nicht existiert. Wie könnte ich dies vermeiden.

Vielen Dank !!