ProHoster > Blog > Administration > Links ohne Übergewicht verkürzen (F3)

Links ohne Übergewicht verkürzen (F3)

Links ohne Übergewicht verkürzen (F3)

Es ist nicht peinlich, seit 13 Jahren Links zu verkürzen, oder? Auch für Anfänger lohnt es sich, einen eigenen Linkzähler zu schreiben und dabei ein neues Framework zu lernen. Genau das habe ich gemacht. Was soll ich sagen – das fünfte Bootstrap, ein leichtgewichtiges Framework und ein Stück meiner Seele.

Hier Demo, und hier ist Code. Für Leser wie mich 😉

Ein Framework, nicht wahr?

Natürlich nicht Laravel und ähnliche – heute kommen wir mit 65 Kilobyte aus. FatFreeFramework. Wenn Sie mit Python Flask vertraut sind, werden Sie das Gefühl haben, dass das alles schon einmal da war:

#роутинг во Фласке
@app.route('/')
def hello_world():
    return 'Hello, World!'

//роутинг в Обезжиренном
$f3->route('GET /',
    function() {
        echo 'Hello, world!';
    }
);

Okay, vergessen wir das. Laden Sie jetzt .zip von der offiziellen Seite herunter, entpacken Sie es in einen Ordner, der sich sofort in Ihrem Lieblings-Code-Editor öffnet. Leeren Sie index.php und löschen Sie alles aus /ui.

Hier ist alles ganz einfach – im Ordner ui haben wir alle Views, einfach gesagt – verbesserte HTML-Templates, die wir dem Benutzer anzeigen, wenn er eine bestimmte URL aufruft.

Hier ist der Grundriss unserer "Anwendung":

set('DEBUG', 1);
if ((float)PCRE_VERSIONconfig('config.ini');

// ALLE WEITEREN CODE HIER SCHREIBEN

$f3->run();

Das ist alles, was Sie zum Start wissen müssen. Lassen Sie uns mit dem Programmieren beginnen!

[für die Entwicklung habe ich lokal verwendet XAMPP auf Windows und VS Code, der Artikel wurde in Notion verfasst]

Startseite

Beginnen wir mit der Startseite. Macht Sinn, oder?

//Файл: index.php

$f3->route('GET /',
    function($f3) { //чтобы использовать функции F3 передаем его в роут
                $view = new View; // создаем вьюшку
        echo $view->render('home.htm'); //рендерим шаблон
    }
);

Jetzt müssen wir dieses Template schreiben. Zur Vereinfachung habe ich Bootstrap v5 alpha verwendet.

Vergessen Sie nicht, alle Templates im Ordner ui zu erstellen, sonst werden sie nicht vom Framework

<!-- Файл: ui/home.htm -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="<?php echo $ENCODING; ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Wir schreiben (Code), wir verkürzen (Links)!</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    </head>
    <body class="text-center bg-dark text-light"> <!-- темная тема ;) -->

        <!-- менюшка -->
        <nav class="m-2">
            <ul class="nav nav-pills justify-content-center">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Startseite</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Artikel auf Habr</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Ersteller</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Kurze Links sind jetzt hier.</h1>

        <!-- Будем отправлять данные POST-запросом на /newLink -->
        <form class="mt-5 mb-3" action="/de/newLink/" method="POST" data-trp-original-action="/newLink/">
            <div class="row justify-content-center">
                <div class="col-auto">
                <label for="inputLink" class="col-form-label">Link eingeben:</label>
                </div>
                <div class="col-auto">
                <input required placeholder="https://" type="url" name="link" id="inputLink" class="form-control mb-1" aria-describedby="inputLink">
                </div>
                <div class="col-auto">
                <button type="submit" class="btn btn-outline-primary">Verkürzen!</button>
                </div>
            </div>
        <input type="hidden" name="trp-form-language" value="de"/></form>

        <!-- немного -->
        <p class="text-left m-auto mb-5" style="max-width: 30rem;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis illum molestiae hic fugiat molestias nemo, architecto beatae repellat ullam exercitationem non ab, necessitatibus maxime quod iure ipsa quam quos! Reprehenderit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus eos sapiente voluptates veniam sequi delectus totam tenetur praesentium obcaecati. Repudiandae quisquam, ipsa ullam corrupti molestiae minima optio nihil est modi?</p>

        <footer class="m-2">Gemacht mit <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="mit Liebe">, <a href="https://v5.getbootstrap.com/">dem fünften Bootstrap</a>    und <a href="https://fatfreeframework.com/">ohne Schnickschnack</a></footer>
        </div>
    </body>
</html>

gesehen. So, die Startseite funktioniert bereits. Das Formular sendet einen POST-Request mit dem Link, der verkürzt werden muss.
Jetzt wird's interessant (nicht).

Arbeiten mit der DB

Lassen Sie uns eine DB erstellen – MySQL. Wenn Sie PhpMyAdmin installiert haben, erstellen Sie eine neue DB "linker", und führen Sie dann folgendes SQL aus:

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE TABLE IF NOT EXISTS `links` (
  `code` varchar(4) NOT NULL,
  `link` varchar(1000) NOT NULL,
  `hits` int(255) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `links`
  ADD UNIQUE KEY `code` (`code`);

Jeder Link wird 3 Felder haben:

  1. Code – das sind zufällige 4 Zeichen nach der Domain, die für die Weiterleitung verwendet werden, z.B. example.com/ABC1
  2. Link – der nicht verkürzte Link.
  3. Hits – die Anzahl der Zugriffe auf den verkürzten Link.

Ich werde kurz den Arbeitsprinzip mit der DB erklären, ohne Schnickschnack.

set('result', $db->exec('SELECT * FROM wherever')); 
//Sie werden in den Vorlagen wie  verfügbar sein

//Oder man kann den integrierten SQL Mapper verwenden:
$row = new DBSQLMapper($db, 'links');

$row->load(array('link="https://habrahabr.ru"')); //Jetzt sind alle Spalten der Zeile, wo der Link zu Habr ist, aus diesem Objekt verfügbar:
$row_value = $row->somerow; //So

//Natürlich kann man die Werte ändern:
$row->link = 'https://habr.com';
$row->save(); //Änderungen müssen gespeichert werden, was dachten Sie?

//Weitere Informationen zur Datenbanknutzung finden Sie hier: https://a.nikonovs.ru/MPHR Ich empfehle dringend, das zu lesen, auch wenn es nur mit Hilfe eines im Browser integrierten Übersetzers ist.
?>

Wir beginnen mit der Verkürzung.

Verarbeitung des neuen Links

Wir erstellen eine neue Ansicht in index’e, die die Anfrage aus dem Formular auf der Hauptseite verarbeitet.

Zuerst erstellen wir eine neue, aber sehr ähnliche Vorlage wie die erste (home.htm) — "newLink.htm".
Hier zeigen wir den bereits gekürzten Link und die Anzahl der Aufrufe an (um diese "Statistik" erneut zu sehen, müssen Sie denselben Link erneut kürzen — die Adresse bleibt gleich).
Für die Ausgabe verwenden wir einen Trick mit "Variablenübergaben":

set('link', $shorted_link);
$view = new View;
echo $view->render('newLink.htm');
// Jetzt kann die Variable in der Vorlage verwendet werden:

Und hier ist das Listing newLink.html:

<!-- Файл: newLink.htm -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="<?php echo $ENCODING; ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Wir schreiben (Code), wir verkürzen (Links)!</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    </head>
    <body class="text-center bg-dark text-light">
        <nav class="m-2">
            <ul class="nav nav-pills justify-content-center">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="/de/">Startseite</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Artikel auf Habr</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Ersteller</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Kurze Links sind jetzt hier.</h1>

        <!-- Убираем из формы функционал формы и выводим переменные -->
        <form class="mt-5 mb-3" action="">
            <div class="row justify-content-center">
                <div class="col-auto">
                    <label for="inputLink" class="col-form-label">Reduziert:</label>
                </div>
                <div class="col-auto">
                    <input disabled required type="url" name="link" id="inputLink" class="form-control disabled" aria-describedby="inputLink" value="<?= $link ?>">
                </div>
            </div>
            <p class="m-2 text-secondary">Über diesen Link besucht: ``</p>
        <input type="hidden" name="trp-form-language" value="de"/></form>

        <a href="/de/" class="mt-3 mb-5 btn btn-primary btn-lg">ZURÜCK ZUR STARTSEITE</a>

        <footer class="m-2">Gemacht mit <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="mit Liebe">, <a href="https://v5.getbootstrap.com/">dem fünften Bootstrap</a>    und <a href="https://fatfreeframework.com/">ohne Schnickschnack</a></footer>
        </div>
    </body>
</html>

Lassen Sie uns die Route erstellen.

$f3->route('GET|POST /newLink', // wir verarbeiten sowohl POST als auch GET
    function($f3) {

            $db = new DBSQL( // Neue Datenbankverbindung für jede Route
                'mysql:host=localhost;port=3306;dbname=linker',
                'root',
                ''
            );

            // Wundervolle Funktion zur Generierung zufälliger Zeichen:
            $permitted_chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            function generate_string($input, $strength = 4) {
                $input_length = strlen($input);
                $random_string = ''; 
                for($i = 0; $i load(array('link="'. $link .'"'));
            if ($check->dry()) {
                $g_code = generate_string($permitted_chars);
                $row = new DBSQLMapper($db,'links');
                $row->reset();
                $row->code = $g_code;
                $row->link = $link;
                $row->save();
            } else {
                $g_code = $check->code; // wenn der Link dupliziert wird, zeigen wir den alten Code an
            }

            $short_link = 'https://'. $_SERVER['HTTP_HOST'] . '/' . $g_code; // bauen den endgültigen Link zusammen

            // Parameter aus $_POST können mit $f3->get('POST') abgerufen werden, Punktnotation wird unterstützt (bitte korrigieren, falls ich das falsch nenne): Parameter "link" kann so abgerufen werden:
            $link = $f3->get('POST.link');

            if (!empty($f3->get('POST'))) { // HTML nur ausgeben, wenn POST nicht leer ist.

            $f3->set('link', $short_link);
            $f3->set('hits', $check->hits);
            $view = new View;
            echo $view->render('newLink.htm');

            } else { // andernfalls - Weiterleitung zur Hauptseite
                $f3->$f3->reroute('/');
            }

        }
);

Fertig! Eigentlich war das ganz einfach.

Weiterleitung

Es bleibt nur noch:

  1. Parameter aus der URL abrufen
  2. Seine Existenz in der Datenbank überprüfen
  3. Entsprechenden Link aus der Datenbank abrufen
  4. Benutzer weiterleiten
  5. Gewinn!

Wir setzen das Codieren nach dem letzten Route fort.

$f3->route('GET /@code', //Parameter nach "@" angeben, er wird in PARAMS gelangen
    function($f3) {

        //Neuen Datenbankzugriff definieren
        $db = new DBSQL(
            'mysql:host=localhost;port=3306;dbname=linker',
            'root',
            ''
        );

        $code = $f3->get('PARAMS.code'); //Parameter abrufen

        $link = new DBSQLMapper($db,'links'); 

        //Wenn es gelingt, den Link aus der Datenbank zu erhalten - holen wir ihn, erhöhen die Aufrufzahl und leiten weiter
        if ($link->load(array('code="'.$code.'"', 'link=?'))) {
            $link->hits++;
            $link->save();

            $f3->reroute($link->link);
        } else {
            $f3->reroute('/'); //Wenn es keinen solchen Link gibt - herzlich willkommen auf der Hauptseite
        }
    }
);

Sie haben vielleicht bemerkt, dass sowohl im Route newLink, als auch im oben genannten Route dasselbe definiert wird — denn code kann mit "newLink" übereinstimmen (kann nicht, im Generator sind nur Großbuchstaben erlaubt), aber da er zuerst definiert ist, wird er auch zuerst ausgeführt.

$f3→run()!

Vielen Dank für das Lesen!
Ich würde mich freuen, wenn Sie einen Kommentar hinterlassen und mich korrigieren, falls etwas nicht stimmt.

Und als Hausaufgabe oder als Beweis für meine Faulheit lasse ich eine Liste da, was man tun kann. Schließlich lernt man besser durch Praxis!

  • Das ist zwar eher unwahrscheinlich, aber bei der Generierung $g_code kann es sich wiederholen, daher schlage ich vor, eine Funktion zu schreiben, die das überprüft.
  • Außerdem kann man eine ordentliche Statistik erstellen und diese bei einem Wechsel auf /@code/stats
  • verhindern, dass Links zum Dienst selbst erstellt werden, und eine Liste "geschützter" Ressourcen anlegen, die nicht verkürzt werden können.

  • Ich empfehle dringend, auch bei so einem kleinen Projekt die Eingabevalidation serverseitig vorzunehmen und entsprechende Fehlermeldungen anzuzeigen; man sollte sich nicht nur auf das Hinzufügen des Attributes required und den Typ type="url" für das Eingabefeld verlassen.
    RedComrade

  • Machen Sie Vorschläge in den Kommentaren...

    Hier ist es)

Quelle: habr.com

Zuverlässiges Webhosting mit DDoS-Schutz, VPS- und VDS-Server kaufen 🔥 Zuverlässiges Webhosting mit DDoS-Schutz, VPS- und VDS-Server kaufen | ProHoster