Beiträge von Stef

Stef · 29. Mai 2021

Hey Michael,

ich habe es mir nochmal angeschaut.

Hinter dem Listenelement wird das Bild eingebunden und das Listelement wird blau. Wenn ich nun auf die Unterpunkte gehe wird das Listenelement weiß, dabei wird es auch noch leicht animiert.

Von diesem Effekt sehe ich nichts in der Browserkonsole in den CSS Styles. Daher gehe ich nun mal davon aus, dass dieser Effekt durch JavaScript erzeugt wird.

Schöne Grüße,
Stef

Stef · 29. Mai 2021

Guten Tag zusammen,

ich konnte mit Hilfe eurer Tipps und Empfehlungen die Verschlüsselung nun erweitern. Neben Kleinbuchstaben können nun auch Großbuchstaben und 26 Sonderzeichen (inklusive Zahlen) verschlüsselt werden.

Während der Implementierung der weiteren Zeichen stand ich vor kleineren Herausforderungen zu denen ich bisher noch keine optimale Lösung, sondern eher eine Übergangslösung gefunden habe.

Beim Erstellen des Sonderzeichen-Arrays musste ich 3 Elemente löschen. Nun ist zwischen de Arrayelementen, vor und nach den drei gelöschten Elementen, der Array-Key um den Wert drei unterschiedlich. Also:

Code

array(
.....
22 => "#",
25 => ",",
....
)

Ich brauche das Array jedoch mit fortlaufenden Keys ohne eine Lücke.

Meine Frage dazu ist: Wie kann ich nach dem Löschen von Array Keys die dahinterliegenden Array Keys durch die gelöschten Array Keys ersetzen, damit keine Lücke entsteht?

Dazu habe ich noch keine Lösung gefunden.

Bei meinem Lösungsweg habe ich aus dem Array eine Zeichenkette erstellt und dann diese nochmal am Seperator gesplittet damit die Array Keys nun fortlaufend ohne Lücke sind. Nun ist es so, dass ich die Array Keys von 1-26 und nicht von 0-25 brauche. Nun stand ich vor dem Problem, wie ich die Array Keys um eins hochzählen kann. Da fand ich nur einen Umweg über eine for-Schleife in der ich das Array nochmal komplett neu erstellt habe.

Meine Frage dazu ist: Gibt es eine Funktion mit der ich alle Array Keys um 1 hochzählen kann?

Nun möchte ich auch nochmal den Code mit euch teilen:

PHP: index.php

<?php
session_start();
require "Caeser.php";
$caeser = new Caeser();
$cipherText;
$plainText;
$error = null;
if(isset($_POST["verschluesseln"])){
if(!empty($_POST["plainText"])){
$cipherText = $caeser->encrypt(trim($_POST["plainText"]));
$_SESSION["cipherText"] = $cipherText;
}else{
$error = "Bitte geben Sie den zu verschlüsselnden Text ein!";
}
}
if(isset($_POST["entschluesseln"]) && isset($_SESSION["cipherText"])){
$plainText = $caeser->decrypt($_SESSION["cipherText"]);
}
$cipherOutput = !empty($cipherText) ? "Der verschlüsselte Text lautet: <strong>" . $cipherText . "</strong>" : null;
$decryptedOutput = !empty($plainText) ? "Der entschlüsselte Text lautet: <strong>" . $plainText . "</strong>" : null;
?>
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Cäser Verschlüsselung</title>
<style>
form{
margin-bottom: 1em;
}
textarea{
display: block;
}
</style>
</head>
<body>
<h1>Cäser Verschlüsselung</h1>
<form class="" method="post">
<label for="plainText">Gebe hier deinen Klartext ein:</label>
<textarea name="plainText" id="plainText" rows="10" cols="35"></textarea>
<input type="submit" name="verschluesseln" value="Klartext verschlüsseln">
<input type="submit" name="entschluesseln" value="Generierten Ciphertext entschlüsseln">
</form>
<?= $cipherOutput ?? $decryptedOutput; ?>
<?= $error; ?>
</body>
</html>

Alles anzeigen

PHP: Caeser.php

<?php
/*
Caeser Verschlüsselung (Ersetzungschiffre)
Jeder Buchstabe wird durch einen anderen Buchstaben ersetzt
Was brauchen wir dafür?
1. Schlüsselraum das Alphabets: 26
2. Key, um wie viel Stellen die Buchstaben verschoben werden sollen (k)
3. Position des jeweiligen Buchstabens im Alphabet (p)
Verschlüsseln = p + k mod 26
Entschlüsseln = p - k mod 26
Verschlüsselt & Entschlüsselt:
- Groß- und Kleinbuchstaben
- Zahlen
- Folgende Zeichen:
# $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : = ?
*/
class Caeser{
private $keyRoom = 26;
private $key = 3;
private $letterPosition;
private $lowercaseAlphabet = [];
private $uppercaseAplhapet = [];
private $moreChars = [];
private $cipherText = "";
private $decryptedText = "";
public function __construct(){
$this->generateAlphabetWithLowercaseLetters();
$this->generateAlphabetWithUppercaseLetters();
$this->generateMoreExtraChars();
}
protected function generateAlphabetWithLowercaseLetters(){
for($i = 1, $char = "a"; $i <= $this->keyRoom; $i++){
$this->lowercaseAlphabet[$char] = $i;
$char++;
}
}
protected function generateAlphabetWithUppercaseLetters(){
for($i = 1, $char = "A"; $i <= $this->keyRoom; $i++){
$this->uppercaseAplhapet[$char] = $i;
$char++;
}
}
protected function generateMoreExtraChars(){
$chars = array_diff(range("#","?"), array("<", ">", ";"));
$chars = implode("|", $chars);
$chars = explode("|", $chars);
for($i = 1; $i <= 26; $i++){
$this->moreChars[$chars[$i - 1]] = $i;
}
}
public function encrypt($plainText){
if(isset($plainText)){
$lettersArray = str_split($plainText);
foreach ($lettersArray as $letter) {
$letterTyp = null;
$i = 0;
if(array_key_exists($letter, $this->moreChars)){
$alphabet = $this->moreChars;
}else{
$alphabet = ctype_upper($letter) ? $this->uppercaseAplhapet : $this->lowercaseAlphabet;
}
if(array_key_exists($letter, $alphabet)){
$newPosition = ($alphabet[$letter] + $this->key) % $this->keyRoom;
if($newPosition === 0){
$newPosition = 26;
}
}else{
$newPosition = 0;
$letterTyp = $letter;
}
foreach ($alphabet as $cipherKey => $value) {
if($value === $newPosition){
$this->cipherText .= $cipherKey;
}else{
if($i < 1){
$this->cipherText .= $letterTyp;
$i++;
}
}
}
}
return $this->cipherText;
}
}
public function decrypt($cipherText){
if($cipherText){
$lettersArray = str_split($cipherText);
foreach ($lettersArray as $letter) {
$letterTyp = null;
$i = 0;
if(array_key_exists($letter, $this->moreChars)){
$alphabet = $this->moreChars;
}else{
$alphabet = ctype_upper($letter) ? $this->uppercaseAplhapet : $this->lowercaseAlphabet;
}
if(array_key_exists($letter, $alphabet)){
if(($alphabet[$letter] - $this->key) < 0){
$result = $alphabet[$letter] - $this->key;
$result += $this->keyRoom;
$oldPosition = $result % $this->keyRoom;
if($oldPosition == 0){
$oldPosition = 26;
}
}else{
$oldPosition = ($alphabet[$letter] - $this->key) % $this->keyRoom;
}
}else{
$oldPosition = 0;
$letterTyp = $letter;
}
foreach ($alphabet as $plainKey => $value) {
if($value === $oldPosition){
$this->decryptedText .= $plainKey;
}else{
if($i < 1){
$this->decryptedText .= $letterTyp;
$i++;
}
}
}
}
return $this->decryptedText;
}
}
}

Alles anzeigen

Schöne Grüße,
Stef

Stef · 28. Mai 2021

Hey Hessi,

ich habe mir deine Seite angeschaut und auch den Menüpunkt herausfiltern können, der beim hovern aktiviert wird.

Du findest diese Daten im beigefügten Bild.

Schöne Grüße,
Stef

Stef · 28. Mai 2021

Hey zusammen,

ich teste gerade die Fetch API mit JavaScript aus über die ich asynchron Daten vom Server lade. Um genau zu sein eine JSON-Datei welche ich dann in einer Tabelle darstelle.

Nun ist es so, dass außerhalb der for-Schleife beim console.log die Daten aus der JSON-Datei ausgegeben werden. Beim Zweiten console.log innerhalb der for-Schleife wird kein Wert mehr in der Konsole ausgegeben, als wäre die Variable data nie vorhanden.

Ich verstehe nicht wie das sein kann. Hat jemand von euch eine Idee?

JavaScript

"use strict";
document.addEventListener("DOMContentLoaded", async(event) => {
let config = {
method: "GET",
headers: {
"Accept": "application/json"
}
};
let response = await fetch("data.json", config);
let data = await response.json();
console.log(data); // this get output in the console
let table = document.createElement("table");
for(let i = 0; i < data.length; i++){
let person = data[i];
console.log(data); // this don't get output in the console
let tr = document.createElement("tr");
tr.innerHTML = `
<td>${person.name}</td>
<td>${person.age}</td>
<td>${person.email}</td>
`;
table.appendChild(tr);
}
document.getElementById("container").appendChild(table);
});

Alles anzeigen

Schöne Grüße,
Stef

Stef · 28. Mai 2021

Hey Carl,

wenn du eine Sprungmarke klickst, wird an die URL ein Wert mit einem # drangehongen. Es besteht die Möglichkeit über JavaScript den Wert auszulesen und dann dementsprechend über die Video API den Standard-Player des Browser zu steuern, wie z.B. starten oder pausieren. Wenn du einen anderen Player nutzt musst du schauen ob dieser eine API bereitstellt über die du diesen steuern kannst.

Bezüglich den Untertiteln kann ich dir nicht weiterhelfen. Da kenne ich mich nicht aus. Ich habe dazu aber dies hier gefunden, was dir weiterhelfen kann: https://www.socialmediaexamine…rt-files-video-subtitles/.

Schöne Grüße,
Stef

Stef · 28. Mai 2021

Hey,

jonas3344 schrieb:

Das ist natürlich ein sehr, sehr theoretisches Problem.

Ich kenne mich da zu wenig aus um dies beurteilen zu können. Ich denke, wenn mehrere tausend, bzw. zehntausend Personen gleichzeitig online sind, soetwas dann doch ein Vorteil bietet.

Vielen Dank für deine umfangreiche Antwort cottton Diese hilft mir sehr weiter. Ich brauche jetzt erstmal ein wenig Zeit um mir das Ganze anzuschauen. Ich melde mich sobald ich weiter bin oder Fragen aufkommen, bei denen ich nicht weiterkomme.

Schöne Grüße,

Stef

Stef · 28. Mai 2021

Hey,

vielen Dank für eure Antworten.

Ich habe durch diese jetzt viele neue Ideen, die ich jetzt nach und nach austesten werde

Ich melde mich wieder sobald ich den Code aktualisiert habe oder nicht weiter komme.

Schöne Grüße,
Stef

Stef · 23. Mai 2021

Guten Morgen

okay. Danke dir

Einfach zum Lernen wie ich diese entwickeln kann. Diese bietet wie ich gelesen habe auch Vorteile, wenn es ziemlich viele Nutzer gibt, die diesen Prozess nutzen. Denn dann werden die ganzen Daten serverseitig gespeichert und irgendwann ist der Server von den ganzen Daten überfüllt und überlastet.

Da kommt dann die Token basierte Authentifizierung ins Spiel, mit der ich dies verhindern kann. Denn dort werden die Logindaten lokal abgespeichert.

Schöne Grüße,
Stef

Stef · 21. Mai 2021

Hey Jonas,

danke dir für deine Antwort

So wie ich es gerade verstanden habe bringen JWT nur etwas, wenn die Applikation clientseitig läuft? Denn dort besteht ja die Möglichkeit ohne Cookie oder Session so etwas lokal abzuspeichern. Serverseitig dagegen habe ich nur die Session oder den Cookie. Wenn ich es mit diesen mache ist es dann eine Session basierte Authentifizierung, die ich aber nicht implementieren möchte.

Liege ich da soweit richtig?

Schöne Grüße,
Stef

Stef · 21. Mai 2021

Hey,

ich probiere mich zur Zeit mit der Token basierten Authentifizierung eines Nutzers bei einem Login aus. Dabei bin ich auf JSON Web Token (JWT) gestoßen.

Dafür nutze ich die Bibliothek ReallySimpleJWT.

Wichtig: Ich habe jetzt einfach mal zügig ein Login erstellt, welches nur zur Realisierung der Token basierten Authentifizierung dient und manche Sicherheitsaspekte nicht beachtet !

Ich dachte mir dabei, wie bei Cookies, einfach den Token zu erstellen. Dann wird der Token wohl automatisch lokal auf dem PC des Nutzers abgespeichert. Mit der Funktion getToken kann ich dann auf anderen Seiten auf diesen zugreifen. Da habe ich mich aber geirrt und weiß da gerade nicht weiter, wie ich auf den Token von anderen Seiten aus zugreifen kann.

So sieht der PHP-Code in der Login-Seite aus:

PHP

<?php
require "vendor/autoload.php";
use ReallySimpleJWT\Tokens;
$tokens = new Tokens();
if(isset($_POST["login"])){
$username = filter_var(trim($_POST["username"])) ?? null;
$password = $_POST["password"] ?? null;
if(!$username || !$password){
$error = "<p>The Username or Password are incorrect</p>";
}else{
if($password == "sec!ReT423*&"){
$userId = 12;
$expiration = time() + 3600;
$issuer = 'localhost';
$token = $tokens->create('id', $userId, $password, $expiration, $issuer);
header("Location: start.php");
exit;
}
}
}

Alles anzeigen

Auf der start.php möchte ich dann auf den abgespeicherten Token des Nutzers zugreifen. Leider finde ich da bisher keine Möglichkeit, da ohne diesen kaum eine Funktion aufgeruft werden kann.

Hat jemand von euch damit Erfahrungen und weiß, wie ich dies lösen kann? Darüber wäre ich sehr dankbar.

Schöne Grüße,
Stef

Stef · 21. Mai 2021

Hey cottton,

herzlichen dank dir für dein Feedback zu meinem Code.

Aus diesem konnte ich jetzt viel hilfreiches herauspicken und auch neues lernen.

Danke!

Eine Frage habe ich dazu noch, bei der ich bisher überhaupt nicht weiterkomme. Meine Verschlüsselung gibt immer nur Kleinbuchstaben aus, da ich in dem Array Alphabet nur Kleinbuchstaben stehen habe und daher nur mit Kleinbuchstaben arbeiten kann. Wie kann ich es nun so lösen, dass dabei auch die Groß- und Kleinschreibung beachtet wird, sodass beim verschlüsseln und entschlüsseln der Text so ausgegeben wird, wie er eingegeben wurde?

Hast du da für mich Tipps oder auch Denkanstöße?

Schöne Grüße,
Stef

Stef · 10. Mai 2021

Hey zusammen,

ich habe in der letzten Stunde in PHP die Cäser-Verschlüsselung durch Transposition entwickelt. Ich nutze zum Teil redunanten Code und habe auch ein paar notwendige Verzweigungen drin. Ich finde, dass man diesen Code noch deutlich komprimieren kann nur komme zur Zeit nicht drauf wie.

Nun möchte ich einfach mal euer Feedback zu diesem Anwendungscode hören. Was findet ihr gut? Was findet ihr nicht gut? Was kann ich besser machen? Wie kann ich den Code komprimieren?

PHP

<?php
session_start();
/*
Caeser Verschlüsselung (Ersetzungschiffre)
Jeder Buchstabe wird durch einen anderen Buchstaben ersetzt
Was brauchen wir dafür?
1. Schlüsselraum das Alphabets: 26
2. Key, um wie viel Stellen die Buchstaben verschoben werden sollen (k)
3. Position des jeweiligen Buchstabens im Alphabet (p)
Verschlüsseln = p + k mod 26
Entschlüsseln = p - k mod 26
*/
$alphabet = [
"a" => 1,
"b" => 2,
"c" => 3,
"d" => 4,
"e" => 5,
"f" => 6,
"g" => 7,
"h" => 8,
"i" => 9,
"j" => 10,
"k" => 11,
"l" => 12,
"m" => 13,
"n" => 14,
"o" => 15,
"p" => 16,
"q" => 17,
"r" => 18,
"s" => 19,
"t" => 20,
"u" => 21,
"v" => 22,
"w" => 23,
"x" => 24,
"y" => 25,
"z" => 26
];
$keyRoom = count($alphabet);
$key = 3;
$decryptedText = null;
$cipherText = null;
if(isset($_POST["verschluesseln"])){
$plainText = $_POST["plainText"] ?? null;
if($plainText){
$plainTextArray = str_split(strtolower($plainText));
$output = "<strong>Der verschlüsselte Text lautet:</strong> ";
foreach ($plainTextArray as $letter) {
$letterTyp = null;
$i = 0;
if(array_key_exists($letter, $alphabet)){
$newPosition = ($alphabet[$letter] + $key) % $keyRoom;
if($newPosition === 0){
$newPosition = 26;
}
}else{
$newPosition = 0;
$letterTyp = $letter;
}
foreach ($alphabet as $cipherKey => $value) {
if($value === $newPosition){
$cipherText .= $cipherKey;
}else{
if($i < 1){
$cipherText .= $letterTyp;
$i++;
}
}
}
}
$output .= $cipherText;
$_SESSION["cipherText"] = $cipherText;
}
}else if(isset($_POST["entschluesseln"]) && isset($_SESSION["cipherText"])){
$cipherTextArray = str_split($_SESSION["cipherText"]);
$output = "<strong>Der entschlüsselte Text lautet:</strong> ";
foreach ($cipherTextArray as $letter) {
$letterTyp = null;
$i = 0;
if(array_key_exists($letter, $alphabet)){
if(($alphabet[$letter] - $key) < 0){
$result = $alphabet[$letter] - $key;
$result += $keyRoom;
$oldPosition = $result % $keyRoom;
}else{
$oldPosition = (abs($alphabet[$letter] - $key)) % $keyRoom;
}
}else{
$oldPosition = 0;
$letterTyp = $letter;
}
foreach ($alphabet as $plainKey => $value) {
if($value === $oldPosition){
$decryptedText .= $plainKey;
}else{
if($i < 1){
$decryptedText .= $letterTyp;
$i++;
}
}
}
}
$output .= $decryptedText;
}
?>
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Cäser Verschlüsselung</title>
<style>
form{
margin-bottom: 1em;
}
textarea{
display: block;
}
</style>
</head>
<body>
<h1>Cäser Verschlüsselung</h1>
<form class="" method="post">
<label for="plainText">Gebe hier deinen Klartext ein:</label>
<textarea name="plainText" id="plainText" rows="10" cols="35"></textarea>
<input type="submit" name="verschluesseln" value="Klartext verschlüsseln">
<input type="submit" name="entschluesseln" value="Generieter Ciphertext entschlüsseln">
</form>
<?= $output ?? null; ?>
</body>
</html>

Alles anzeigen

Ich würde mich sehr über euer Feedback freuen.

Schöne Grüße,
Stef

Stef · 10. Mai 2021

Hey dettec61,

wenn du so etwas entwickeln & bereitstellen möchtest, empfehle ich dir, wie du sicher schon weist, die Themen, die du dafür benötigst, erstmals zu erlernen. Es wird dir hier niemand eine Lösung präsentieren.

Ich teile hier mit dir Links zu Ressorucen, mit denen du dein Ziel auf rein serverseitiger Basis mit der Datenbank erreichen kannst:

SQLite - Daten einfügen, updaten und löschen (nur die SQL-Anweisungen, denn du steuerst die Datenbank über deinen Webserver an)
Verbindung zur SQLite Datenbank herstellen und weitere Punkte wie Daten einfügen, auslesen & Datenbankverbindung schließen

Mit diesen beiden Quellen hast du das serverseitige Ziel erreicht. Dann musst du lediglich die Daten über PHP dann noch in den entsprechenden Sektionen ausgeben und mit CSS designen.

Schöne Grüße,
Stef

Stef · 7. Mai 2021

Hey Brainstuff,

die einfachste Variante für mich wäre eine Lösung mit JavaScript.

Dort reagierst du dann auf den Klick, erfasst den Wert des Buttons, speicherst diesen als Browser-Session ab und stellst dementsprechend dann die Hintergrundfarben deiner Webseite da. So ist auch gewährleistet, das die Webseite im Darkmode dargestellt wird, wenn der Nutzer auf weiteren Seiten deiner Webseite unterwegs ist.

CSS kann sich nichts merken. Somit müsste der Seitenbesucher immer wieder den Darkmode einstellen.

Schöne Grüße,
Stef

Stef · 25. April 2021

Hey,

ich möchte noch an m.scatellos Satz mit den Cookies anknüpfen.

Ein Cookie Banner sowie die Erfüllung der DSGVO ist erst dann Pflicht, wenn du personenbezogene Daten erfasst. Ansonsten kannst du diesen weglassen. Dazu gibt es noch essentielle Cookies, die benötigt werden, damit deine Webseite läuft. Dazu zählt zum Beispiel die Erfassung der Sprache.

Schöne Grüße,
Stef

Stef · 23. April 2021

Thema geschlossen. Crossposting verboten

Stef · 23. April 2021

Hi Nico,

zu deinen Fragen:

Nein. Es gibt Anwendungen, die man dann serverseitig nochmal überprüfen sollte, wie z.B. ein Kontakt- oder Kaufformular.
Eine serverseitige Programmiersprache: Meine Empfehlung PHP (da gibt es auch schon fertige Forensoftwares). Zusätzlich ist es definitiv notwendig sich auch mit dem Thema Sicherheit auseinanderzusetzen um auch eine sichere Anwendung entwickeln zu können.
Deine Webseite sollte auch ohne den JS-Animationen funktioniern. Wenn der Seitenbesucher ohne deine JS-Animation die Navigation nicht mehr bedienen kann, musst du daran dringend was ändern.

Schöne Grüße

Stef · 16. April 2021

Hey rakete,

möchtest du mit uns noch deine Lösung teilen? Danke dir schonmal im voraus.

Schöne Grüße,
Stef

Stef · 7. April 2021

Hi,

brainstuff : Bitte nutze die Code Tags für deinen Code. Diese findest du in der Navigation des Textfeldes (</>). Danke!

Stef · 2. April 2021

Hey Zolf,

da gibt es viele Möglichkeiten.

Was ich dir dort empfehlen kann ist, dem div eine ID mitzugeben. Diese kannst du dann über CSS ansprechen und dieser dann individuelle Formatierungen zuweisen.

Nähere Infos findest du hier: https://www.html-seminar.de/class_und_id.htm

Schöne Grüße

Beiträge von Stef

Erledigt: Newbee: Wie finde ich Pseudoklasse heraus?

Codefeedback: Wie findet ihr diesen?

Erledigt: Newbee: Wie finde ich Pseudoklasse heraus?

Fetch API - Daten werden nicht gefunden

Video - Kapitel oder Sprungmarken

Token basierte Authentifizierung des Nutzers

Codefeedback: Wie findet ihr diesen?

Token basierte Authentifizierung des Nutzers

Token basierte Authentifizierung des Nutzers

Token basierte Authentifizierung des Nutzers

Codefeedback: Wie findet ihr diesen?

Codefeedback: Wie findet ihr diesen?

Wochentagsabfrage mit Infos in eine Lite-SQL Datenbank (Textdatei) speichern und abfragen.

Night Shift

websites umzug von strato oder nicht, und anderes

Anfänger Frage CSS-ID

Javascript und IT_Sicherheit

[GELÖST] "Link-Generator"

Ich suche ein Responsives vertikales Akkordeon für Bilder

Gleichnamige CSS-Class unterschiedlich formatieren