ProHoster > Blog > Идораи > Кӯтоҳ кардани пайвандҳо бидуни равған (F3)

Кӯтоҳ кардани пайвандҳо бидуни равған (F3)

Кӯтоҳ кардани пайвандҳо бидуни равған (F3)

Дар 13 кӯтоҳ кардани пайвандҳо шарм нест, дуруст? Оғози навкор, на танҳо шурӯъкунандагон, бояд кӯшиш кунад, ки Link Tamer-и худро ҳангоми омӯзиши чаҳорчӯбаи нав нависад. Он чизе ки ман кардам. Ман чӣ гуфта метавонам - бори панҷум, чаҳорчӯбаи камфарбеҳ ва як пораи рӯҳ.

дар ин ҷо намоишӣ, аммо код. Барои хонандагони мисли ман 😉

Чаҳорчӯба, дуруст?

Албатта, на Ларавел ва монанди инҳо - имрӯз мо бо 65 килобайт кор хоҳем кард FatFreeFramework. Агар шумо бо Python Flask шинос бошед, шумо эҳсос хоҳед кард, ки ин аллакай дар ҷое анҷом дода шудааст:

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

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

Хуб, фаромӯш. Зеркашӣ кунед .zip аз берун аз сайт, онро ба ҷузвдоне кушоед, ки дар ҳамон лаҳза дар Муҳаррири рамзи дӯстдоштаи шумо кушода мешавад. Тоза index.php ва ҳама чизро аз он хориҷ кунед /ui.

Дар ин ҷо ҳама чиз хеле оддӣ аст - дар папка ui Мо ҳама Намоишҳо дорем, ё ба ибораи оддӣ, қолибҳои HTML-и такмилдодашуда, ки мо ҳангоми дидани онҳо ба URL-и мушаххас ба корбар нишон медиҳем.

Ин аст скелети "ариза"-и мо:

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

Ин ҳама чизест, ки шумо барои оғоз кардан донед. Биёед ба рамзгузорӣ шурӯъ кунем!

[барои рушд ман маҳаллиро истифода кардам XAMPP дар Windows ва VS Code, мақолае, ки дар Нушен навишта шудааст]

Сафҳаи

Биёед бо саҳифаи асосӣ оғоз кунем. Мантиқӣ, дуруст?

//Файл: index.php

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

Акнун шумо бояд ин шаблонро нависед. Барои содда ман истифода кардам bootstrap v5 alpfa.

Фаромӯш накунед, ки ҳама қолабҳоро дар ҷузвдон эҷод кунед ui, дар акси ҳол онҳо нахоҳад кард ба чаҳорчӯба намоён аст

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

Ин ҳама, саҳифаи асосии мо аллакай кор мекунад. Формат дархости POST-ро бо истиноде мефиристад, ки бояд кӯтоҳ карда шавад.
Акнун қисми шавқовар меояд (не).

Кор бо базаи маълумот

Биёед пойгоҳи додаҳо - MySQL эҷод кунем. Агар шумо PhpMyAdmin насб карда бошед, пас базаи нав эҷод кунед "linker" ва он гоҳ ин 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`);

Мо барои ҳар як пайванд 3 майдон хоҳем дошт:

  1. Рамзи тасодуфӣ аст 4 аломат пас аз домен, ки тавассути он масир рух медиҳад, ба монанди example.com/ABC1
  2. Истинод - Кӯтоҳ карда нашудааст пайванд.
  3. Хитҳо - шумораи кликҳо дар истиноди кӯтоҳшуда.

Ман ба шумо мухтасар принципи кор бо махзани маълумот, бе чарбу накл мекунам.

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

Биёед ба кӯтоҳкунӣ оғоз кунем.

Коркарди пайванди нав

Дар Намоиши нав эҷод кунед индекс, ки дархостро аз формаи саҳифаи асосӣ коркард мекунад.

Аввалан, биёед як қолаби нав, вале хеле монанд ба аввалин (home.htm) эҷод кунем - "newLink.htm".
Дар он ҷо мо истиноди аллакай кӯтоҳшуда ва шумораи кликҳоро дар он нишон медиҳем (барои бори дигар дидани ин "омор" шумо бояд ҳамон истинодро дубора кӯтоҳ кунед - суроға бетағйир мемонад).
Барои истеҳсоли натиҷа, мо ҳиллаи "гузариши тағирёбанда" -ро истифода мебарем:

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

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

Ва ин ҷо рӯйхат аст 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="/tg/">Главная</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="/tg/" 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>

Мо худи маршрутро менависем.

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

        }
);

Тайёр! Дар асл, ин оддӣ буд.

Масир

Кори каме боқӣ мондааст:

  1. Параметрро аз URL гиред
  2. Мавҷудияти онро дар базаи маълумот санҷед
  3. Истиноди мувофиқро аз базаи маълумот гиред
  4. Истифодабарандаи масир
  5. Фоида!

Мо пас аз хатсайри охирин навиштани кодро идома медиҳем.

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

Шояд шумо инро дар роҳ ва дар масир пай бурда бошед пайванди нав, ва дар маршрути боло хамин чиз муайян карда мешавад — охир рамз метавонад ба "newLink" мувофиқат кунад (ин наметавонад, генератор танҳо ҳарфҳои калонро дар бар мегирад), аммо азбаски он аввал муайян карда мешавад, аввал иҷро мешавад.

$f3→ иҷро ()!

Ташаккур барои хондан!
Агар шумо як коментария нависед ва агар хато бошад маро ислоҳ кунед, ман шод мешавам.

Ва ҳамчун вазифаи хонагӣ ва ё далели танбалии муаллиф (ман) ман рӯйхатеро мегузорам, ки чӣ кор кардан мумкин аст. Беҳтар аст, ки бо кор омӯхтан!

  • Ин албатта аз эҳтимол дур аст, аммо ҳангоми тавлид $g_code метавонад такрор шавад, бинобар ин ман ба шумо тавсия медиҳам, ки функсияеро нависед, ки инро тафтиш кунад.
  • Шумо инчунин метавонед омори муқаррарӣ созед ва пас аз гузаштан ба онҳо намоиш диҳед /@code/stats
  • Эҷоди истинодҳо ба худи хидмати кӯтоҳкунии истинодро манъ кунед, рӯйхати захираҳоеро, ки аз кӯтоҳкунӣ “ҳифз шудаанд” эҷод кунед

  • Ман ба таври қатъӣ тавсия медиҳам, ки ҳатто дар чунин як масъалаи хурд, шумо санҷиши вурудро дар тарафи сервер иҷро кунед, бо хатогиҳои мувофиқ, шумо набояд ба илова кардани атрибути зарурӣ такя накунед ва ба майдони вуруд = "url" нависед.
    Рафик сурх

  • Дар шарҳҳо пешниҳод кунед ...

    Дар тамос)

Манбаъ: will.com

Илова Эзоҳ