Eine Text-Sharing Webseite wie zB Pastebin mit Wordpress erstellen? (HTML)?

Wollte über Wordpress eine kleine Text-Sharing Webseite erstellen die ähnlich wie Wordpress aufgebaut ist. Sie soll sehr simpel sein. Könnte mir einer helfen/ Code zur Verfügung stellen? (Wenn möglich HTML)

LG

Answer 1

[regex9]

Im Grunde funktioniert so ein Sharing-Service doch folgendermaßen: Ein Text wird assoziativ zu einem Key gespeichert. Dieser Key muss eindeutig sein, damit sich verschiedene Texte nicht irgendwann einmal überschreiben.

Zum Speichern dieser Daten ist ein persistenter Datenträger notwendig, optimal wäre hier eine Datenbank (die man ja bei WordPress dann auch schon hat). In dieser wird eine simple Tabelle mit zwei Spalten angelegt: Key (varchar) und Value (varchar / text).

Nun sind verschiedene HTML-Dokumente notwendig, über die der Nutzer zum einen seinen Text eingeben kann und zum anderen, worüber dieser wieder aufrufbar ist.

<!-- relevant html code to save/add: -->
<form action="save.php" method="post">
  <textarea name="text"></textarea>
  <button>Save</button>
</form>

Die save.php würde sich nun den text-Parameter aus dem Request Header ziehen, den Wert validieren und, sollte dieser so passen, einen eindeutigen Key erstellen. Dies könnte bspw. eine GUID sein oder der aktuelle Timestamp kombiniert mit einer oder zwei Zufallszahlen. Lies dazu hier.

Dann wird eine Datenbankverbindung hergestellt und das Wertepaar in der Datenbank eingetragen (bzw. WordPress hat eine eigene Zugriffsstelle für die Datenbank, lies hier). Zudem muss noch die URL erstellt werden: Eine Konkatenation aus der Seite, die die Texte anzeigt und dem Key als URL-Parameter.

Beispiel:

https://www.your-domain.de?key=someGuid

Die URL wird dem Nutzer auf der Folgeseite ausgegeben, sodass er sie sich kopieren kann.

Wenn der Nutzer die URL via Browser anfordert, wird der Key aus der URL gelesen (siehe $_GET), validiert und dann an die Datenbank gegeben. Wenn diese einen Eintrag mit diesem Key findet, kann der Wert auf der Seite ausgegeben werden:

<!-- ... -->
<?php
  // get value by key from database ...

  if (!empty($value)): ?>
  <pre>
    <?= $value ?>
  </pre>
<?php endif; ?>

Soweit ein grober Ablauf. Bezüglich der Implementation in WordPress sowie den Themen PHP und SQL müsstest du dich folgend noch näher kundig machen. Hilfreich sind an dieser Stelle die offizielle PHP-Dokumentation, die MySQL-Referenz (oder W3Schools) sowie die WordPress-Dokumentation.

Answer 2

[RudiFiedler]

Anhand Deiner Fragestellung (Du bittest um HTML) interpretiere ich, dass Du php nicht kennst.

Wenn Du mit WordPress arbeiten willst, muss das ganze als Plugin eingerichtet werden. Nicht jeder, der php kann, kennt auch die Vorgaben für die Plugin-Programmierung.

Bei dieser Aufgabenstellung spielt zudem die Sicherheit eine enorm große Rolle, ein PHP-Anfänger ist dem erfahrungsgemäß nicht gewachsen. Für so ein Projekt brauchst Du jemand, der sich wirklich auskennt...

Woher ich das weiß: Berufserfahrung

Answer 3

[medmonk]

Wollte über Wordpress eine kleine Text-Sharing Webseite erstellen die ähnlich wie Wordpress aufgebaut ist.

Man muss das Rad nicht immer wieder neu erfinden und es vor allem am Anfang vielleicht allein in punkto Sicherheit besser ist, wenn du dein Projekt auf einem bereits bestehendem System wie WordPress aufsetzt.

Sie soll sehr simpel sein. Könnte mir einer helfen/ Code zur Verfügung stellen? (Wenn möglich HTML)

Damit allein wird das nichts, da HTML lediglich eine Auszeichnungssprache zum Strukturen von Texten und anderem multimedialem Content ist. Wenn man es wirklich extrem simpel halten möchte, etwas JavaScript und/oder ne Prise PHP benötigst.

In HTML einfach ein simples Formular mit Input-Feld und Submit-Button (btn mit type="button") erstellst. Mithilfe von JavaScript dann die eingegeben Daten des Users aus dem DOM ziehst und sie in einem Objekt oder Array organisierst. Anschließend nur noch ein JSON File generierst und mit POST an deinen Server schickst. Zu guter Letzt dann alles formatiert wieder ausgibst.

// jQuery
$(document).ready(function(){
 // submit user inputs
 $('#submit-form-input').click(function(e){
  // variables
  var jsonDB = {};
  var formInput = $('#form-input').serializeArray();
 // use JSON as database
 $.each(formInput, function(){
  if(jsonDB[this.name]){
   if(!jsonDB[this.name].push){
    jsonDB[this.name] = [jsonDB[this.name]];
   }
   jsonDB[this.name].push(this.value || '');
  }
  else {
   jsonDB[this.name] = this.value || '';
  }
 });

 // Ajax
 $.ajax({
  type : "POST",
  // process the user input on server-side! 
  url : "function.php",
  data : "formInput",
  dataType : 'json',
  contentType : "application/json",
 });
 e.preventDefaults();
});
});

Anhand deiner Fragestellung davon ausgehe, dass dir all das nicht viel sagen wird und du hier vermutlich nur Bahnhof verstehst. Das Snippet von mir auch nur ein relativ kleinen Teil abgedeckt hat. Mit anderen Worten gesagt, dich noch weit aus mehr erwartet.

Du solltest dich vorab beispielsweise erst mal mit PHP und Datenbank (MySQLi, MariaDB) um die eigentlich Userverwaltung kümmern. Dazu u.a. ein gescheites Login-System samt Registrierung auf die Beine stellst. Die gemachten Benutzereingaben entsprechend verarbeitest und sowohl client- als serverseitig validierst. Diese in eine Datenbank geschubst werden und wieder ausliest.

Wenn du dann eh schon mit PHP zu Gange bist, auch die Daten aus dem Formular gleich damit verarbeiten kannst. Das Ganze dann also nicht mithilfe von Javascript (jQuery) als JSON File an den Server übergibst, sondern dir direkt serverseitig die Eingaben des Users schnappst und in die Datenbank packst. Hier im Großen und Ganzen den Weg nur grob und stark vereinfacht skizziert habe.

Ich habe ja bereits zu beginn geschrieben das es eigentlich anfangs sinnvoller ist, wenn du erst einmal ein fertiges System wie WordPress als soliden Unterbau verwendest. Bevor du dich also an größere Projekte wagst, dir vorab in aller ruhe essentielles HTML und CSS Grundlagenwissen aneignest.

Wenn du beide wirklich verinnerlicht hast und noch mit Spaß und Interesse bei der Sache bist, dich langsam an die erste Programmiersprache herantastest. Beschäftige dich mit JavaScript und lerne Schritt für Schritt wie man Elemente im DOM manipuliert. Dann selber irgendwann eigene Funktionen wie z.B. Slideshow implementierst und dein Wissen mit der Zeit peu á peu erweiterst.

In diesem Sinne, viel Spaß und Erfolg dabei.

LG medmonk

Woher ich das weiß: Berufserfahrung

Answer 4

[xGlumi]

Hier mal, in schnellen 15 Minuten hingeklatschtes, Example.

<?php
    $user = "*******";
    $pw = "************************";
    $db = ""*******";";
    $host = "127.0.0.1";
    
    $con = mysqli_connect($host, $user, $pw, $db);
?>
<html>
<head>
</head>
<body>
    <?php
    if (isset($_POST["v"])){
        $content = base64_encode($_POST["v"]);
        $timestamp = time();
        $ip = $_SERVER['REMOTE_ADDR'];
        
        mysqli_query($con, "INSERT INTO paste (content, timestamp, ip) VALUES ('$content', '$timestamp', '$ip')");
        Header("Location: index.php?p=" . mysqli_insert_id($con));        
    }
    ?>    
<form action="" method="POST">
<textarea name="v" style="width: 50%;height: 30%;">
</textarea><br>
<input type="submit" name="Submit" value="Paste"/>
</form>


<?php
    if (isset($_GET["p"])){
        $pid = $_GET["p"];
        
        $query = mysqli_query($con, "SELECT * FROM paste WHERE pid = $pid LIMIT 1");
        if ($query && mysqli_num_rows($query) == 1){
            while ($row = mysqli_fetch_assoc($query)){
                echo "<pre>";
                
                echo base64_decode($row["content"]);
                
                echo "</pre>";
            }
        }
    }
?>
</pre>
</body>
</html>

Die hierfür genutzte MySQL-Datenbankstruktur ist folgende:

-- Exportiere Datenbank Struktur für pastes
CREATE DATABASE IF NOT EXISTS `pastes` /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci */;
USE `pastes`;

-- Exportiere Struktur von Tabelle pastes.paste
CREATE TABLE IF NOT EXISTS `paste` (
  `pid` int(11) NOT NULL AUTO_INCREMENT,
  `content` longblob NOT NULL,
  `timestamp` bigint(20) NOT NULL,
  `ip` varchar(50) NOT NULL,
  PRIMARY KEY (`pid`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

Solltest du soweit Ahnung "von der Materie" haben, dann ist das hier schon ein nettes Startgeschenk, bei dem du nun alles weitere problemlos erweitern kannst.
(Wichtig!!! Du musst den gesamten Code noch bezüglich Sicherheitschecks ergänzen. Diese Arbeit nehme ich dir nicht ab.)

P.S. Bitte keine Kommentare vonwegen:

• PDO > mysqli
• Bitte in verschiedene .php Dateien auslagern
• Da sind noch nicht alle Sicherheitsvorkehrungen drin getroffen
• Ich hätte aber in der DB-Struktur einen anderen Datentyp genommen
• etc. etc. etc.

Das ist ein 4free Code-Example (welches so funktioniert), in wenigen Minuten für einen fremden Menschen im Internet hingeschrieben.
Da darf und sollte man keine Ansprüche stellen.

MFG xGlumi

Woher ich das weiß: eigene Erfahrung

Comments

[medmonk]

Das ist ein 4free Code-Example (welches so funktioniert), in wenigen Minuten für einen fremden Menschen im Internet hingeschrieben. Da darf und sollte man keine Ansprüche stellen.

Allein das an dieser Stelle mal dick unterstreichen möchte. Ein "Mach mir mal für Lau" ist dreist. Ansprüche hingegen unverschämt und "by the way" immer das eigene Lernen im Vordergrund stehen sollte.

Lg medmonk

[regex9]

Ich erlaube es mir dennoch einmal, drei Fehler zu korrigieren:

• Doctype und title-Tag müssten ergänzt werden (da diese beiden Elemente für ein valides Dokument zwingend notwendig sind)
• Das action-Attribut sollte raus (da es keinen leeren Wert haben darf)
• Das letzte schließende pre-Tag müsste entfernt werden (da es keinen Partner hat)

[medmonk]

@regex9

Das letzte schließende  pre-Tag müsste entfernt werden (da es keinen Partner hat)

Das schließende pre-Tag sich vielleicht auf Parship verirrt hat. :P In diesem Sinne, Prost und schönes Wochenende.

[xGlumi]

@regex9

Ja, da hat sich wohl ein pre-Tag verirrt :D

Erst war es außerhalb der Schleife, und im gutefrage-Editor habe ich es dann in die Schleife reingeschoben (da ist mir wohl der End-Tag durch die Lappen gegangen) :D

@medmonk Danke, dir auch :)

MFG xGlumi

Answer 5

[MrCommandBlock]

mit nur HTML ist das nicht möglich...

Du brauchst eine Serverseitige Sprache sowie eine Datenbank.

HTML/CSS ist dann nur zum ansehen...