ProHoster > Blog > Administrasyon an > Mantèg lyen san grès (F3)

Mantèg lyen san grès (F3)

Mantèg lyen san grès (F3)

Pa gen okenn wont nan mantèg lyen nan 13, dwa? Yon debutan, epi li pa sèlman yon debutan, ta dwe eseye ekri pwòp Link Tamer li pandan y ap aprann kèk nouvo fondasyon. Ki sa mwen te fè. Kisa mwen ka di - senkyèm bootstrap la, yon fondasyon ki pa gen anpil grès ak yon moso nanm.

Isit la Demo, ak isit la kòd. Pou lektè tankou mwen 😉

Kad, dwa?

Natirèlman pa Laravel ak tankou - jodi a nou pral fè fè ak 65 kilobytes FatFreeFramework. Si ou abitye ak Python Flask, ou pral santi ke sa a te deja fè yon kote:

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

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

Oke, bliye li. Telechaje .zip soti nan offsite, depake li nan yon katab, ki nan menm moman an ouvè nan Editè Kòd Favorite ou. Klè index.php epi retire tout bagay nan /ui.

Tout bagay isit la trè senp - nan katab la ui Nou gen tout View, oswa, pou mete li tou senpleman, modènize modèl HTML ke nou pral montre itilizatè a lè yo vizite yon URL espesifik.

Men kilè eskèlèt "aplikasyon" nou an:

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

Se tout sa ou bezwen konnen pou kòmanse. Ann kòmanse kode!

[pou devlopman mwen te itilize lokal XAMPP sou Windows ak VS Kòd, atik ekri nan Noushen]

Akèy

Ann kòmanse ak paj prensipal la. Lojik, pa vre?

//Файл: index.php

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

Koulye a, ou bezwen ekri modèl sa a anpil. Pou senplisite mwen te itilize bootstrap v5 alpfa.

Pa bliye kreye tout modèl nan katab la ui, sinon yo pa pral vizib nan kad la

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

Se tout, paj prensipal nou an deja ap travay. Fòm nan voye yon demann POST ak yon lyen ki bezwen vin pi kout.
Koulye a, vini pati nan plezi (pa).

Travay ak baz done a

Ann kreye yon baz done - MySQL. Si w gen PhpMyAdmin enstale, Lè sa a, kreye yon nouvo baz done "Lyen" ak Lè sa a, kouri SQL sa a:

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

Nou pral gen 3 jaden pou chak lyen:

  1. Kòd se yon karaktè o aza 4 apre domèn nan ki redireksyon pral rive, tankou egzanp.com/ABC1
  2. Link - Pa vin pi kout lyen.
  3. Hits - kantite klik sou lyen ki pi kout la.

Mwen pral yon ti tan di ou prensip la nan travay ak yon baz done, san grès.

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

Ann kòmanse diminye.

Pwosesis yon nouvo lyen

Kreye yon nouvo View nan endèks, ki pral trete demann lan nan fòm nan paj prensipal la.

Premyèman, ann kreye yon nouvo, men trè menm jan ak premye (home.htm) modèl la - "newLink.htm".
La nou pral montre lyen ki deja vin pi kout la ak kantite klik sou li (pou wè "estatistik" sa yo ankò, ou bezwen vin pi kout lyen an ankò - adrès la ap rete menm).
Pou pwodwi pwodiksyon an, nou pral sèvi ak trik "pase varyab la":

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

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

Ak isit la se lis la 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="/ht/">Главная</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="/ht/" 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>

Nou ekri wout la li menm.

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

        }
);

Pare! Aktyèlman, li te senp.

Redireksyon

Genyen jis yon ti kras kite fè:

  1. Jwenn paramèt nan URL
  2. Tcheke prezans li nan baz done a
  3. Jwenn lyen ki koresponn lan nan baz done a
  4. Redireksyon itilizatè
  5. Pwofi!

Nou kontinye ekri kòd apre dènye wout la.

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

Ou ka remake sa nan ak nan wout la nouvoLyen, ak nan wout ki pi wo a pral menm bagay la dwe defini - apre tout Kòd ka matche ak "newLink" (li pa kapab, dèlko a gen sèlman lèt majiskil), men kòm li defini an premye, li pral egzekite an premye.

$f3→kouri()!

Mèsi pou lekti!
Mwen pral kontan si ou ekri yon kòmantè epi korije m 'si gen yon bagay ki mal.

Epi kòm devwa oswa prèv parès otè a (mwen), mwen kite yon lis sa ki ka fè. Li pi bon pou aprann nan fè!

  • Sa a se nan kou fasil, men lè génération $g_code ka rive ankò, kidonk mwen sijere ou ekri yon fonksyon ki pral tcheke pou sa a.
  • Ou kapab tou fè estatistik nòmal epi montre yo apre ou fin chanje a /@code/stats
  • Entèdi kreyasyon lyen nan sèvis la mantèg lyen tèt li, kreye yon lis resous "pwoteje" kont mantèg.

  • Mwen rekòmande fòtman ke menm nan yon ti pwoblèm konsa, ou fè validation opinyon sou bò sèvè a, ak erè ki koresponn yo parèt, ou pa ta dwe konte sou ajoute atribi ki nesesè yo ak kalite = "url" nan jaden an opinyon.
    RedCamrade

  • Sijere nan kòmantè yo...

    An kontak)

Sous: www.habr.com

Add nouvo kòmantè