Hey,
ich wollte mal ein Tutorial zu nem Textgenerator welcher auf PHP basiert machen.
Was brauchen wir alles?
- Funktion welche den vorgegebenen Beispieltext verkürzt
- Funktion welche den vorgegebenen Beispieltext erweitert
- Den Wert aus dem input feld
- clipboard.js, mit der wird dann das kopieren des Textes erfolgen
Funktion dieser Anwendung:
- Gibt einen Beispieltext aus der so viele Zeichen wie gewünscht hat
- Man kann den Beispieltext in die Zwischenlage sofort kopieren und den dann weiterverwenden.
Als erstes brauchen wir das HTML. In diesem erstellen wir ein Formular, ein HTML-Element in welchem der generierte Text angezeigt wird und einen Button für das zwischenspeichern. Die Verlinkung zu clipboard darf auch nicht fehlen. Download Link: https://github.com/zenorocha/clipboard.js/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Textgenerator</title>
<script src="clipboard/dist/clipboard.min.js"></script>
<style>
article#showText{
border: 1px solid black;
overflow-y: scroll;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<header>
<h1>Textgenerator erstellt von Stef</h1>
</header>
<main>
<section>
<form method="post">
<label for="stringLength"><input type="text" name="stringLength" id="stringLength"></label>
<button name="generateText">Text generieren</button>
</form>
</section>
<section>
<article id="showText" readonly>
</article>
<button name="safeText" id="safeButton">Text in Zwischenablage kopieren</button>
</section>
</main>
</body>
</html>Wenn wir das HTML erstellt haben wenden wir uns PHP zu. Mit PHP möchten wir erstmal überprüfen, ob das Formular abgesendet wurde. Wenn ja wird der gesendete Input im POST-Kanal einer Variable zugeordnet, in diesem Fall der Variable strLength. Da strLength ein string ist und wir eine Ganzzahl (int) zur Überprüfung brauchen müssen wir die Variable zu einem int umwandeln. Darüberhinaus brauchen wir einen Beispieltext, welchen wir für die Textgenerierung brauchen.
<?php
if(isset($_POST["generateText"])){
$exampleText = "Stef is going and scripting a new Textgenerator for himself. He is doing great Job He is helping bla bla bla";
$strLength = filter_var($_POST["stringLength"], FILTER_SANITIZE_NUMBER_INT);
$strLength = (int) $strLength; // -> string zu einem int umwandeln
}Nun müssen wir überprüfen ob der Wert der Variable strLength kleiner oder gleich der Anzahl der Zeichen im Beispieltext ist. Dies erfolgt mit dem Operator <=. Wenn dies der Fall ist wird von dem Beispieltext Buchstaben abgetrennt. Darüberhinaus müssen wir überprüfen, ob der Wert von strLength größer als die Anzahl der Zeichen im Beispieltext ist. Dies erfolt mit dem Operator >. Wenn dies der Fall ist werden die noch benötigten Zeichen an den Beispieltext angebunden. Es gibt für das 1ste die Funktion substr() und fürs 2.te die Funtkion str_pad(). Um die ganzen Zeichen des Beispieltextes zu ermitteln verwenden wir die Funktion strlen()
if($strLength <= strlen($exampleText)){
$newText = substr($exampleText, 0 , $strLength); // falls exampleText größer als strLength ist wird vom example Text ein Teil abgeschnitten
} else if($strLength > strlen($exampleText)){
$newText = str_pad($exampleText, $strLength, $exampleText , STR_PAD_RIGHT); // fügt Text an example Text hinzu
}Nun haben wir die Überprüfung erledigt und der fertige Beispieltext steht nun in der variable newText drin. Im nächsten Schritt überprüfen wird ob diese Variable auch vorhanden ist und wenn ja lassen wir sie in einem article augeben.
<article id="showText" placeholder="Generate Text...." readonly>
<?php
if(isset($newText)){
echo $newText;
}
?>
</article>Nun kommen wir dazu, wie man den Text in die Zwischenablage kopiert. Dazu verwende ich clipboard.js. Wir müssen die Klasse instanzieren. Dann geben wir dem button ein data-clipboard-text attribut in dem wird nun die Variable newText ausgegebn. Darüberhinaus prüfen wir dann ob der Vorgang erfolgreich war.
window.onload = function(){
var clipboard = new Clipboard('#safeButton');
clipboard.on('success', function(e) {
alert("Text wurde in Zwischenablage kopiert");
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error("Fehler aufgetreten" + e);
});
}<button name="safeText" id="safeButton" data-clipboard-text="<?php if(isset($newText)) echo $newText; ?>">Text in Zwischenablage kopieren</button>Nun ist der Textgenerator für einfache Zwecke schon fertig.
Hier ist nochmal der gesamte Code zur Veranschaulichung:
<?php
if(isset($_POST["generateText"])){
$exampleText = "Stef is going and scripting a new Textgenerator for himself. He is doing great Job He is helping bla bla bla";
$strLength = filter_var($_POST["stringLength"], FILTER_SANITIZE_NUMBER_INT);
$strLength = (int) $strLength;
// var_dump(strlen($exampleText)); int(59)
if($strLength <= strlen($exampleText)){
$newText = substr($exampleText, 0 , -$strLength); // falls exampleText größer als strLength ist wird vom example Text ein Teil abgeschnitten
} else if($strLength > strlen($exampleText)){
$newText = str_pad($exampleText, $strLength, $exampleText , STR_PAD_RIGHT); // fügt Text an example Text hinzu
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Textgenerator</title>
<script src="clipboard/dist/clipboard.min.js"></script>
<script>
window.onload = function(){
var clipboard = new Clipboard('#safeButton');
clipboard.on('success', function(e) {
alert("Text wurde in Zwischenablage kopiert");
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error("Fehler aufgetreten" + e)
});
}
</script>
<style>
article#showText{
border: 1px solid black;
overflow-y: scroll;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<header>
<h1>Textgenerator erstellt von Stef</h1>
</header>
<main>
<section>
<form method="post">
<label for="stringLength"><input type="text" name="stringLength" id="stringLength"></label>
<button name="generateText">Text generieren</button>
</form>
</section>
<section>
<article id="showText" readonly>
<?php
if(isset($newText)){
echo $newText;
}
?>
</article>
<button name="safeText" id="safeButton" data-clipboard-text="<?php if(isset($newText)) echo $newText; ?>">Text in Zwischenablage kopieren</button>
</section>
</main>
</body>
</html>Grüße,
Stef
