ProHoster > Blog > Administratioun > Verkierzungslinks ouni Fett (F3)

Verkierzungslinks ouni Fett (F3)

Verkierzungslinks ouni Fett (F3)

Et ass keng Schimmt fir Linken op 13 ze verkierzen, richteg? En Ufänger, an net nëmmen en Ufänger, soll probéieren säin eegene Link Tamer ze schreiwen, während en neie Kader léiert. Wat ech gemaach hunn. Wat kann ech soen - de fënneften Bootstrap, e fettarme Kader an e Stéck Séil.

hei Demo, an hei code. Fir Lieser wéi ech 😉

Kader, richteg?

Natierlech net Laravel an dergläiche - haut maache mir et mat 65 Kilobytes FatFreeFramework. Wann Dir mat Python Flask vertraut sidd, kritt Dir d'Gefill datt dëst schonn iergendwou gemaach gouf:

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

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

Okay, vergiess et. Download .zip aus offsite, packt et an en Dossier, deen gläichzäiteg an Ärem Favorite Code Editor opmaacht. Kloer index.php an ewechzehuelen alles aus /ui.

Alles hei ass extrem einfach - am Dossier ui Mir hunn all Views, oder, fir et einfach ze soen, upgraded HTML Templates déi mir dem Benotzer weisen wa se op eng spezifesch URL kommen.

Hei ass de Skelett vun eiser "Applikatioun":

<?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();

Dat ass alles wat Dir wësse musst fir unzefänken. Loosst eis ufänken ze codéieren!

[fir Entwécklung benotzt ech lokal XAMPP op Windows a VS Code, Artikel geschriwwen an Noushen]

Homepage

Loosst d'mat der Haaptsäit ufänken. Logesch, richteg?

//Файл: index.php

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

Elo musst Dir dës ganz Schabloun schreiwen. Fir Einfachheet hunn ech benotzt bootstrap v5 alpfa.

Vergiesst net all Templates am Dossier ze kreéieren ui, soss si wäert net siichtbar fir de Kader

<!-- Файл: 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="/lb/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>

Dat ass alles, eis Haaptsäit funktionnéiert schonn. De Formulaire schéckt eng POST Ufro mat engem Link dee verkierzt muss ginn.
Elo kënnt de Spaass Deel (net).

Schafft mat der Datebank

Loosst eis eng Datebank erstellen - MySQL. Wann Dir PhpMyAdmin installéiert hutt, erstellt dann eng nei Datebank "Linker" an dann dës SQL lafen:

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`);

Mir wäerten 3 Felder fir all Link hunn:

  1. Code ass eng zoufälleg 4 Zeechen no der Domain duerch déi Viruleedung geschitt, wéi example.com/ABC1
  2. Link - Net verkierzt de Link.
  3. Hits - d'Zuel vun de Klicks op de verkierzte Link.

Ech soen Iech kuerz de Prinzip fir mat enger Datebank ze schaffen, ouni 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 Настоятельно рекомендую прочитать, хотябы с помощью переводчика, встроенного в браузер.
?>

Loosst eis ufänken ze verkierzen.

Veraarbechtung vun engem neie Link

Erstellt eng nei Vue an Index, déi d'Ufro aus dem Formulaire op der Haaptsäit veraarbecht.

Als éischt, loosst eis eng nei, awer ganz ähnlech wéi déi éischt (home.htm) Schabloun erstellen - "neiLink.htm".
Do wäerte mir de scho verkierzte Link an d'Zuel vun de Klicks op et weisen (fir dës "Statistiken" erëm ze gesinn, musst Dir dee selwechte Link nach eng Kéier verkierzen - d'Adress bleift d'selwecht).
Fir d'Ausgab ze produzéieren, benotze mir den Trick "Variabel Passéieren":

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

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

An hei ass d'Lëscht 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="/lb/">Главная</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="/lb/" 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>

Mir schreiwen de Wee selwer.

$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('/');
            }

        }
);

Fäerdeg! Eigentlech war et einfach.

Viruleedung

Et bleift just e bëssen ze maachen:

  1. Kritt Parameter vun URL
  2. Kontrolléiert seng Präsenz an der Datebank
  3. Kritt de entspriechende Link aus der Datebank
  4. Redirect Benotzer
  5. Gewënn!

Mir schreiwen weider Code no der leschter 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('/'); //а если такой ссылки нет - милости просим на главную
        }
    }
);

Dir hutt dat vläicht an der Streck gemierkt neiLink, an an der Streck uewen wäert déi selwecht Saach definéiert ginn - no all Code kann mat "newLink" passen (et kann net, de Generator enthält nëmmen grouss Buschtawen), awer well et als éischt definéiert ass, gëtt et als éischt ausgefouert.

$f3→run()!

Merci fir d'Liesen!
Ech wäert frou sinn wann Dir e Kommentar schreift a mech korrigéiert wann eppes falsch ass.

An als Hausaufgaben oder Beweis vun der Laziness vum Auteur (ech) loossen ech eng Lëscht vun deem wat gemaach ka ginn. Et ass besser ze léieren duerch ze maachen!

  • Dëst ass natierlech onwahrscheinlech, awer wann Dir generéiert $g_code kann erëm geschéien, also ech proposéieren Iech eng Funktioun ze schreiwen, déi dëst iwwerpréift.
  • Dir kënnt och normal Statistike maachen an se weisen nodeems Dir wiesselt /@code/statistik
  • Verbitt d'Schafe vu Linken op de Link Ofkierzungsservice selwer, erstellt eng Lëscht vu Ressourcen "geschützt" vu Verkierzung

  • Ech recommandéieren staark datt Dir och an esou enger klenger Saach Input Validatioun op der Server Säit maacht, mat de entspriechende Feeler ugewisen, sollt Dir net op d'Addéieren vum erfuerderlechen Attribut an Typ = "URL" an d'Inputfeld setzen
    RedComrade

  • Proposéiert an de Kommentaren ...

    Kontakt)

Source: will.com

Setzt e Commentaire