🥇Saīsināšana bez taukiem (F3)

Nav kauna 13 gadu vecumā saīsināt saites, vai ne? Iesācējam, nevis tikai iesācējam, vajadzētu mēģināt uzrakstīt savu Link Tamer, vienlaikus apgūstot jaunu sistēmu. Tas ir tas, ko es izdarīju. Ko lai saka - piektais bootstrap, zema tauku satura karkass un dvēseles gabaliņš.

šeit ir demo, Bet kods. Tādiem lasītājiem kā es 😉

Ietvars, vai ne?

Protams, ne Laravel un tamlīdzīgi - šodien mēs iztiksim ar 65 kilobaitiem FatFreeFramework. Ja esat pazīstams ar Python Flask, jums radīsies sajūta, ka tas jau kaut kur ir izdarīts:

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

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

Labi, aizmirsti. Lejupielādēt .zip no ārpuses, izsaiņojiet to mapē, kas tajā pašā brīdī tiek atvērta jūsu iecienītāko kodu redaktorā. Skaidrs index.php un noņemiet visu no /ui.

Šeit viss ir ārkārtīgi vienkārši - mapē ui Mums ir visas Views jeb, vienkārši sakot, jauninātas HTML veidnes, kuras mēs parādīsim lietotājam, kad viņš apmeklēs konkrētu URL.

Šeit ir mūsu "lietojumprogrammas" skelets:

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

Tas ir viss, kas jums jāzina, lai sāktu darbu. Sāksim kodēt!

[attīstībai izmantoju vietējo XAMPP operētājsistēmā Windows un VS Code, raksts rakstīts Nušenā]

Mājaslapa

Sāksim ar galveno lapu. Loģiski, vai ne?

//Файл: index.php

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

Tagad jums ir jāuzraksta šī veidne. Vienkāršības labad es izmantoju bootstrap v5 alfa.

Neaizmirstiet izveidot visas mapē esošās veidnes ui, citādi viņi nebūs redzams ietvaram

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

Tas arī viss, mūsu galvenā lapa jau darbojas. Veidlapa nosūta POST pieprasījumu ar saiti, kas ir jāsaīsina.
Tagad nāk jautrā daļa (ne).

Darbs ar datu bāzi

Izveidosim datu bāzi – MySQL. Ja jums ir instalēts PhpMyAdmin, izveidojiet jaunu datu bāzi "Saites"un pēc tam palaidiet šo SQL:

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

Katrai saitei mums būs 3 lauki:

Kods ir nejauša 4 rakstzīmes aiz domēna, caur kuru notiks novirzīšana, piemēram example.com/ABC1
Saite - Nav saīsināts saite.
trāpījumi — klikšķu skaits uz saīsinātās saites.

Es īsi pastāstīšu par principu strādāt ar datu bāzi bez taukiem.

<?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 Настоятельно рекомендую прочитать, хотябы с помощью переводчика, встроенного в браузер.
?>

Sāksim saīsināt.

Notiek jaunas saites apstrāde

Izveidojiet jaunu skatu rādītājs, kas apstrādās pieprasījumu no veidlapas galvenajā lapā.

Vispirms izveidosim jaunu, bet ļoti līdzīgu pirmajai (home.htm) veidnei - "newLink.htm".
Tur mēs parādīsim jau saīsināto saiti un klikšķu skaitu uz tās (lai atkal redzētu šo “statistiku”, vēlreiz jāsaīsina tā pati saite - adrese paliks nemainīga).
Lai iegūtu produkciju, mēs izmantosim triku “mainīgā nodošana”.

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

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

Un šeit ir saraksts 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="/lv/">Главная</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="/lv/" 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>

Mēs rakstām pašu maršrutu.

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

        }
);

Gatavs! Patiesībā tas bija vienkārši.

novirzīt

Vēl tikai nedaudz atlicis izdarīt:

Iegūt parametru no URL
Pārbaudiet tā klātbūtni datu bāzē
Iegūstiet atbilstošo saiti no datu bāzes
Novirzīt lietotāju
Peļņa!

Mēs turpinām rakstīt kodu pēc pēdējā maršruta.

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

Jūs, iespējams, pamanījāt to maršrutā un maršrutā jauna saite, un maršrutā augšā tiks definēts tas pats - galu galā kods var atbilst "newLink" (tā nevar, ģenerators satur tikai lielos burtus), bet, tā kā tas ir definēts vispirms, tas tiks izpildīts vispirms.

$f3 → palaist()!

Paldies, ka izlasījāt!
Priecāšos, ja uzrakstīsit komentāru un labošu, ja kaut kas nav kārtībā.

Un kā mājasdarbu vai pierādījumu autora (es) slinkumam atstāju sarakstu, ko var darīt. Labāk ir mācīties darot!

Tas, protams, ir maz ticams, bet ģenerējot $g_code var atkārtoties, tāpēc iesaku uzrakstīt funkciju, kas to pārbaudīs.
Varat arī izveidot parasto statistiku un parādīt to pēc pārslēgšanās uz /@kods/statistika
Aizliegt izveidot saites uz pašu saišu saīsināšanas pakalpojumu, izveidot no saīsināšanas “aizsargāto” resursu sarakstu
Es ļoti iesaku pat tik mazā lietā veikt ievades validāciju servera pusē, parādoties atbilstošajām kļūdām, nepaļauties uz vajadzīgā atribūta pievienošanu un ievades laukam type = “url”
RedComrade
Iesaki komentāros...

Sazināties)

Avots: www.habr.com

Saīsināšanas saites bez taukiem (F3)