2 opties die ik zo snel kan bedenken.
Let op, ik typ dit uit het hoofd dus mogelijk enkele foutjes.
Heb er voldoende error checking in proberen bouwen, maar mogelijk ben ik wat vergeten.
Het is ook maar bedoeld als voorbeeld.
Optie 1: puur PHP
Voordeel: enkel PHP (geen JavaScript nodig)
Nadeel: pagina wordt herladen na button click (trager en hoger resource usage)
index.php
<?php
$output= "";
$source = isset($_REQUEST["source"]) ? $_REQUEST["source"] : "";
if (isset($_REQUEST["encode"]) { // Encode button is clicked
$output = base64_encode($source);
} elseif (isset($_REQUEST["decode"]) { // Decode button is clicked
$output = base64_decode($source);
}
?>
<form method="POST">
<label for="source">Input:</label>
<textarea id="source" name="source">
<?php echo htmlspecialchars($source); ?>
</textarea>
<input type="submit" id="encode" name="encode" value="Encoderen" />
<input type="submit" id="decode" name="decode" value="Decoderen" />
<label for="output">Output:</label>
<textarea id="output" name="output">
<?php echo htmlspecialchars($output); ?>
</textarea>
</form>
Optie 2: AJAX
Voordeel: snel en resourcevriendelijk, geen page reload, directe interactie
Nadeel: JavaScript vereist in browser (tegenwoordig ondersteunt echter elke browser dit)
base64coder.php
<?php
header('Content-Type: application/json');
$out = array(
"ok" => false
);
$action = $_REQUEST["action"];
$source = $_REQUEST["source"];
if ($action == "encode") { // Encode requested
$out["output"] = base64_encode($source);
$out["ok"] = true;
} elseif (isset($_REQUEST["decode"]) { // Decode requested
$out["output"] = base64_decode($source);
$out["ok"] = true;
}
echo json_encode($out);
?>
index.html
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function() {
$("#encode, #decode").on("click", function() {
var $btn = $(this);
var action = $btnId.attr("id");
var source = $("#source").val();
$.ajax({
url: 'base64coder.php',
type: 'POST',
dataType: 'json',
data: {
action: action,
source: source,
},
success: function(data) {
if (data && data.ok) {
$("#output").val(data.output);
} else {
alert("Er ging iets mis bij AJAX request (success).");
console.log("success data received", data);
}
},
error: function(data) {
alert("Er ging iets mis bij AJAX request (error).");
console.log("error data received", data);
}
});
});
});
</script>
<form method="POST">
<label for="source">Input:</label>
<textarea id="source" name="source"></textarea>
<input type="submit" id="encode" name="encode" value="Encoderen" />
<input type="submit" id="decode" name="decode" value="Decoderen" />
<label for="output">Output:</label>
<textarea id="output" name="output"></textarea>
</form>