ProHoster > Blog > Verwaltung > Glieder kürzen ohne Fett (F3)

Glieder kürzen ohne Fett (F3)

Glieder kürzen ohne Fett (F3)

Es ist keine Schande, Links auf 13 zu kürzen, oder? Ein Anfänger, und nicht nur ein Anfänger, sollte versuchen, seinen eigenen Link Tamer zu schreiben und dabei ein neues Framework zu erlernen. Das habe ich getan. Was soll ich sagen – der fünfte Bootstrap, ein fettarmes Gerüst und ein Stück Seele.

Hier Demo, Aber Code. Für Leser wie mich 😉

Rahmen, oder?

Natürlich nicht Laravel und Co. – heute begnügen wir uns mit 65 Kilobyte FatFreeFramework. Wenn Sie mit Python Flask vertraut sind, werden Sie das Gefühl haben, dass dies bereits irgendwo geschehen ist:

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

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

In Ordnung, vergiss es. Herunterladen .zip von Offsite, entpacken Sie es in einen Ordner, der sich gleichzeitig in Ihrem Lieblingscode-Editor öffnet. Klar index.php und alles entfernen /ui.

Hier ist alles ganz einfach – im Ordner ui Wir haben alle Ansichten oder, um es einfach auszudrücken, aktualisierte HTML-Vorlagen, die wir dem Benutzer anzeigen, wenn er eine bestimmte URL besucht.

Hier ist das Grundgerüst unserer „Bewerbung“:

<?php
//Файл: index.php

// Kickstart the framework
$f3=require('lib/base.php');
$f3->set('DEBUG', 1);
if ((float)PCRE_VERSION<8.0)
    trigger_error('PCRE version is out of date');
$f3->config('config.ini');

//ВЕСЬ ОСТАЛЬНОЙ КОД БУДЕМ ПИСАТЬ ЗДЕСЬ

$f3->run();

Das ist alles, was Sie wissen müssen, um loszulegen. Beginnen wir mit dem Codieren!

[Für die Entwicklung habe ich lokal verwendet XAMPP unter Windows und VS Code, Artikel geschrieben in Noushen]

Startseite

Beginnen wir mit der Hauptseite. Logisch, oder?

//Файл: index.php

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

Jetzt müssen Sie genau diese Vorlage schreiben. Der Einfachheit halber habe ich verwendet Bootstrap v5 Alpfa.

Vergessen Sie nicht, alle Vorlagen im Ordner zu erstellen huh, sonst sie wird nicht sichtbar für das Gerüst

<!-- Файл: 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>Пишем (код), сокращаем (ссылки)!</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="#">Главная</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Статья на Хабре</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Создатель</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Короткие ссылки уже здесь.</h1>

        <!-- Будем отправлять данные POST-запросом на /newLink -->
        <form class="mt-5 mb-3" action="/de/newLink/" method="POST">
            <div class="row justify-content-center">
                <div class="col-auto">
                <label for="inputLink" class="col-form-label">Введи ссылку:</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">Сократить!</button>
                </div>
            </div>
        </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">Сделано с <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="любовью">, <a href="https://v5.getbootstrap.com/">пятым Bootstrap'ом</a>    и <a href="https://fatfreeframework.com/">без жира</a></footer>
        </div>
    </body>
</html>

Das ist alles, unsere Hauptseite funktioniert bereits. Das Formular sendet eine POST-Anfrage mit einem Link, der gekürzt werden muss.
Jetzt kommt der lustige Teil (nicht).

Arbeiten mit der Datenbank

Lassen Sie uns eine Datenbank erstellen – MySQL. Wenn Sie PHPMyAdmin installiert haben, erstellen Sie eine neue Datenbank.Linker" und führen Sie dann dieses 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`);

Wir werden 3 Felder für jeden Link haben:

  1. Der Code besteht aus zufälligen 4 Zeichen nach der Domain, über die die Umleitung erfolgt, z. B example.com/ABC1
  2. Verknüpfung - Nicht gekürzt Referenz.
  3. Hits – die Anzahl der Klicks auf den verkürzten Link.

Ich erkläre Ihnen kurz das Prinzip der Arbeit mit einer Datenbank, ohne Fett.

<?php
//сначала нужно подключиться к БД
$db = new DBSQL(
    'mysql:host=localhost;port=3306;dbname=linker',
    'root',
    ''
);

//Дальше есть два варианда работы с данными:

//Можно установить переменную в Фреймворк c помощью обычного SQL-запроса:
$f3->set('result', $db->exec('SELECT * FROM wherever')); 
//они будут доступны в шаблонах, как <?= $resul ? >

//А можно использовать встроенный SQL Mapper:
$row = new DBSQLMapper($db, 'links');

$row->load(array('link="https://habrahabr.ru"')); //теперь из этого объекта доступны все колонки строки, где ссылка на Хабр:
$row_value = $row->somerow; //Вот так

// Естесственно можно изменять значения:
$row->link = 'https://habr.com';
$row->save(); //изменения нужно сохранить, а что вы думали

// больше информации по работе с БД доступно здесь: https://a.nikonovs.ru/MPHR Настоятельно рекомендую прочитать, хотябы с помощью переводчика, встроенного в браузер.
?>

Beginnen wir mit dem Kürzen.

Ein neuer Link wird bearbeitet

Erstellen Sie eine neue Ansicht in Index, das die Anfrage aus dem Formular auf der Hauptseite bearbeitet.

Lassen Sie uns zunächst eine neue Vorlage erstellen, die der ersten (home.htm) jedoch sehr ähnlich ist – „newLink.htm".
Dort zeigen wir den bereits gekürzten Link und die Anzahl der Klicks darauf an (um diese „Statistik“ wieder anzuzeigen, müssen Sie denselben Link erneut kürzen – die Adresse bleibt gleich).
Um die Ausgabe zu erzeugen, verwenden wir den Trick „Variablenübergabe“:

<?php
//Файл: нет (пример)

//устанавливаем переменную в index'е и рендерим шаблон
$f3->set('link', $shorted_link);
$view = new View;
echo $view->render('newLink.htm');
//теперь в шаблоне можно использовать:
<?= $link ?>

Und hier ist die Auflistung 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>Пишем (код), сокращаем (ссылки)!</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/">Главная</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Статья на Хабре</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Создатель</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Короткие ссылки уже здесь.</h1>

        <!-- Убираем из формы функционал формы и выводим переменные -->
        <form class="mt-5 mb-3">
            <div class="row justify-content-center">
                <div class="col-auto">
                    <label for="inputLink" class="col-form-label">Сократили:</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">По этой ссылке перешли: `<?= $hits ?>`</p>
        </form>

        <a href="/de/" class="mt-3 mb-5 btn btn-primary btn-lg">ВЕРНУТЬСЯ НА ГЛАВНУЮ</a>

        <footer class="m-2">Сделано с <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="любовью">, <a href="https://v5.getbootstrap.com/">пятым Bootstrap'ом</a>    и <a href="https://fatfreeframework.com/">без жира</a></footer>
        </div>
    </body>
</html>

Wir schreiben die Route selbst.

$f3->route('GET|POST /newLink', //мы будем обрабатывать и POST и GET
    function($f3) {

            $db = new DBSQL( //Подключение к БД новое в каждом Роуте
                'mysql:host=localhost;port=3306;dbname=linker',
                'root',
                ''
            );

            //прекрасная функция генерации радомных символов:
            $permitted_chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            function generate_string($input, $strength = 4) {
                $input_length = strlen($input);
                $random_string = '';
                for($i = 0; $i < $strength; $i++) {
                    $random_character = $input[mt_rand(0, $input_length - 1)];
                    $random_string .= $random_character;
                }

                return $random_string;
            }

            //проверка на повторение link - нам же не нужно чтобы каждый раз генерировались новые ссылки. link - уникальный.
            $check = new DBSQLMapper($db,'links');
            $check->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; //если link повторяется, то показываем старый код
            }

            $short_link = 'https://'. $_SERVER['HTTP_HOST'] . '/' . $g_code; //собираем конечную ссылку

            //параметры из $_POST можно получить с помощью $f3->get('POST'), поддерживается точечная нотация (поправьте, если неправильно называю): параметр "link" можно получить так: 
            $link = $f3->get('POST.link');

            if ( !empty($f3->get('POST')) ) { //Выдаем HTML, только если POST не пустой.

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

            } else { //иначе - редирект на главную
                $f3->$f3->reroute('/');
            }

        }
);

Bereit! Eigentlich war es einfach.

Umleiten

Es bleibt nur noch ein bisschen zu tun:

  1. Parameter von URL abrufen
  2. Überprüfen Sie, ob es in der Datenbank vorhanden ist
  3. Holen Sie sich den entsprechenden Link aus der Datenbank
  4. Benutzer umleiten
  5. Gewinn!

Wir schreiben weiterhin Code nach der letzten Route.

$f3->route('GET /@code', //указываем параметр после "@", он попадет в PARAMS
    function($f3) {

        //снова определяем $db
        $db = new DBSQL(
            'mysql:host=localhost;port=3306;dbname=linker',
            'root',
            ''
        );

        $code = $f3->get('PARAMS.code'); //получаем параметр

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

        //если получается получить ссылку из БД - получаем, увеличиваем количество переходов и перенаправляем
        if ($link->load(array('code="'.$code.'"', 'link=?'))) {
            $link->hits++;
            $link->save();

            $f3->reroute($link->link);
        } else {
            $f3->reroute('/'); //а если такой ссылки нет - милости просим на главную
        }
    }
);

Das ist euch vielleicht schon an und in der Route aufgefallen Neuer Link, und in der obigen Route wird schließlich dasselbe definiert Code kann mit „newLink“ übereinstimmen (kann nicht, der Generator enthält nur Großbuchstaben), aber da es zuerst definiert wird, wird es zuerst ausgeführt.

$f3→run()!

Danke fürs Lesen!
Ich freue mich, wenn Sie einen Kommentar schreiben und mich korrigieren, wenn etwas nicht stimmt.

Und als Hausaufgabe oder Beweis für die Faulheit des Autors (mir) hinterlasse ich eine Liste dessen, was getan werden kann. Es ist besser, durch Handeln zu lernen!

  • Das ist natürlich unwahrscheinlich, aber beim Generieren $g_code kann wieder passieren, daher schlage ich vor, dass Sie eine Funktion schreiben, die dies überprüft.
  • Sie können auch normale Statistiken erstellen und diese nach dem Wechsel anzeigen lassen /@code/stats
  • Verbieten Sie die Erstellung von Links zum Link-Kürzungsdienst selbst und erstellen Sie eine Liste von Ressourcen, die vor der Kürzung „geschützt“ sind

  • Ich empfehle dringend, dass Sie auch bei einer so kleinen Angelegenheit eine Eingabevalidierung auf der Serverseite durchführen und die entsprechenden Fehler anzeigen. Sie sollten sich nicht darauf verlassen, das erforderliche Attribut und den Typ = „url“ zum Eingabefeld hinzuzufügen
    Roter Kamerad

  • Schlagen Sie es in den Kommentaren vor...

    Im Kontakt)

Source: habr.com

Kommentar hinzufügen