Hoʻopōkole i nā loulou me ka momona ʻole (F3)

Hoʻopōkole i nā loulou me ka momona ʻole (F3)

ʻAʻohe hilahila i ka pōkole ʻana i nā loulou ma 13, ʻeā? ʻO ka mea hoʻomaka, ʻaʻole wale ka mea hoʻomaka, e hoʻāʻo e kākau i kāna Link Tamer ponoʻī i ke aʻo ʻana i kekahi ʻano hana hou. ʻO ia kaʻu i hana ai. He aha kaʻu e ʻōlelo ai - ʻo ka bootstrap ʻelima, kahi ʻāpana momona haʻahaʻa a me kahi ʻāpana ʻuhane.

ʻaneʻi demoa aneʻi wae helu. No ka poʻe heluhelu e like me aʻu 😉

Ke kuhi, pololei?

ʻAʻole ʻo Laravel a me nā mea like - i kēia lā e hana mākou me 65 kilobytes FatFreeFramework. Inā kamaʻāina ʻoe iā Python Flask, e loaʻa iā ʻoe ka manaʻo ua hana ʻia kēia ma kahi:

#роутинг во Фласке
@app.route('/')
def hello_world():
    return 'Hello, World!'
//роутинг в Обезжиренном
$f3->route('GET /',
    function() {
        echo 'Hello, world!';
    }
);

ʻAe, poina. Hoʻoiho .zip mai waho o ka pūnaewele, wehe iā ia i loko o kahi waihona, i ka manawa like e wehe ai i kāu Luna Hoʻoponopono Code punahele. Akaka index.php a wehe i na mea a pau mai /ui.

Maʻalahi loa nā mea a pau ma ʻaneʻi - ma ka waihona ui Loaʻa iā mākou nā manaʻo āpau, a i ʻole, i ka maʻalahi, hoʻonui ʻia nā template HTML a mākou e hōʻike ai i ka mea hoʻohana ke kipa lākou i kahi URL kikoʻī.

Eia ka iwi o kā mākou "noi":

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

ʻO ia wale nō kāu e ʻike ai e hoʻomaka ai. E hoʻomaka kākou i ka coding!

[no ka hoʻomohala ʻana ua hoʻohana au i ka ʻāina XAMPP ma Windows a me VS Code, ʻatikala i kākau ʻia ma Noushen]

Homepage

E hoʻomaka kākou me ka ʻaoʻao nui. Pono, pololei?

//Файл: index.php

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

I kēia manawa pono ʻoe e kākau i kēia maʻamau. No ka maʻalahi aʻu i hoʻohana ai bootstrap v5 alpfa.

Mai poina e hana i nā mamana a pau i loko o ka waihona ui, i ole ia lakou ʻaʻole ia ʻike ʻia i ke kāʻei

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

ʻO ia wale nō, ke hana nei kā mākou ʻaoʻao nui. Hoʻouna ka palapala i kahi noi POST me kahi loulou e pono e pōkole.
Ke hele mai nei ka ʻāpana leʻaleʻa (ʻaʻole).

Ke hana nei me ka waihona

E hana kākou i kahi waihona - MySQL. Inā loaʻa iā ʻoe ka PhpMyAdmin, a laila hana i kahi waihona hou "linker"a laila holo i kēia 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`);

E loaʻa iā mākou 3 mau kahua no kēlā me kēia loulou:

  1. ʻO ke code he 4 mau huaʻōlelo ma hope o ke kikowaena kahi e hoʻohuli ʻia ai, e like me example.com/ABC1
  2. loulou - ʻAʻole i pōkole loulou.
  3. Hits - ka helu o nā kaomi ma ka loulou pōkole.

E haʻi pōkole wau iā ʻoe i ke kumu o ka hana ʻana me kahi waihona, me ka momona ʻole.

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

E hoʻomaka kākou e pōkole.

Ke hana nei i kahi loulou hou

Hana i kahi Nānā hou i loko kuhikuhi, nāna e hoʻoponopono i ka noi mai ka palapala ma ka ʻaoʻao nui.

ʻO ka mua, e hana kāua i kahi hou, akā like loa me ka mua (home.htm) template - "newLink.htm".
Ma laila mākou e hōʻike ai i ka loulou i pōkole a me ka helu o nā kaomi ma luna o ia (e ʻike hou i kēia mau "statistics", pono ʻoe e hoʻopōkole i ka loulou like - e mau ana ka helu wahi).
No ka hana ʻana i ka hopena, e hoʻohana mākou i ka hoʻopunipuni "variable passing":

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

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

A eia ka papa inoa 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="/haw/">Главная</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="/haw/" 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>

Kākau mākou i ke ala ponoʻī.

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

        }
);

Mākaukau! ʻOiaʻiʻo, maʻalahi.

kuhikuhi hou

He wahi liʻiliʻi wale nō i koe e hana ai:

  1. E kiʻi i ka ʻāpana mai ka URL
  2. E nānā i kona noho ʻana ma ka waihona
  3. E kiʻi i ka loulou pili mai ka waihona
  4. Hoʻihoʻi hou i ka mea hoʻohana
  5. Kumakaʻa!

Hoʻomau mākou i ke kākau ʻana i ke code ma hope o ke ala hope.

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

Ua ʻike paha ʻoe i kēlā ma ke ala loulou hou, a ma ke ala ma luna e wehewehe ʻia ka mea like - ma hope o nā mea a pau Kanawai Hiki ke hoʻohālikelike me "newLink" (ʻaʻole hiki ke loaʻa i ka mīkini hana nā leka nui wale nō), akā no ka mea i wehewehe mua ʻia, e hoʻokō mua ʻia.

$f3→ holo()!

Mahalo no ka heluhelu ʻana!
E hauʻoli wau inā kākau ʻoe i kahi manaʻo a hoʻoponopono iaʻu inā hewa kekahi mea.

A ma ke ʻano he haʻawina home a i ʻole ka hōʻoia o ka palaualelo o ka mea kākau (ʻo wau), waiho wau i kahi papa inoa o nā mea hiki ke hana. ʻOi aku ka maikaʻi o ke aʻo ʻana ma ka hana ʻana!

  • ʻAʻole paha kēia, akā i ka wā e hana ai $g_code hiki ke hana hou, no laila ke manaʻo nei au e kākau i kahi hana e nānā ai i kēia.
  • Hiki iā ʻoe ke hana i nā helu maʻamau a hōʻike iā lākou ma hope o ka hoʻololi ʻana i /@code/stats
  • E pāpā i ka hana ʻana i nā loulou i ka lawelawe hoʻopōkole loulou iā ia iho, e hana i kahi papa inoa o nā kumuwaiwai "pale ʻia" mai ka pōkole.
  • Manaʻo ikaika wau ʻoiai i loko o kahi mea liʻiliʻi, hana ʻoe i ka hōʻoia hoʻokomo ma ka ʻaoʻao kikowaena, me nā hewa e pili ana i hōʻike ʻia, ʻaʻole pono ʻoe e hilinaʻi i ka hoʻohui ʻana i ke ʻano koi a me ke ʻano = "url" i ke kahua komo.
    RedComrade

  • Manaʻo ma nā manaʻo...

    pili)

Source: www.habr.com

Pākuʻi i ka manaʻo hoʻopuka