ProHoster > blog > Utawala > Kufupisha viungo bila mafuta (F3)

Kufupisha viungo bila mafuta (F3)

Kufupisha viungo bila mafuta (F3)

Hakuna aibu katika kufupisha viungo kwa 13, sawa? Anayeanza, na sio tu anayeanza, anapaswa kujaribu kuandika Kiungo chake cha Tamer huku akijifunza mfumo mpya. Ambayo ndio nilifanya. Ninaweza kusema nini - bootstrap ya tano, mfumo wa mafuta ya chini na kipande cha roho.

Hapa demona hapa code. Kwa wasomaji kama mimi 😉

Mfumo, sawa?

Kwa kweli sio Laravel na kadhalika - leo tutafanya na kilobytes 65 FatFreeFramework. Ikiwa unafahamu Flask ya Python, utapata hisia kwamba hii tayari imefanywa mahali fulani:

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

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

Sawa, sahau. Pakua .zip kutoka nje ya tovuti, ipakue kwenye folda, ambayo wakati huo huo hufungua katika Kihariri chako cha Msimbo Unachopenda. Wazi index.php na uondoe kila kitu kutoka /ui.

Kila kitu hapa ni rahisi sana - kwenye folda ui Tuna Mionekano yote, au, ili kuiweka kwa urahisi, violezo vya HTML vilivyoboreshwa ambavyo tutaonyesha kwa mtumiaji anapotembelea URL mahususi.

Hapa kuna mifupa ya "maombi" yetu:

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

Hayo tu ndiyo unayohitaji kujua ili kuanza. Wacha tuanze kuweka msimbo!

[kwa maendeleo nilitumia mtaa XAMPP kwenye Windows na VS Code, makala iliyoandikwa katika Noushen]

Homepage

Wacha tuanze na ukurasa kuu. Mantiki, sawa?

//Файл: index.php

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

Sasa unahitaji kuandika template hii sana. Kwa unyenyekevu nilitumia bootstrap v5 alfa.

Usisahau kuunda violezo vyote kwenye folda ui, vinginevyo wao hataki inayoonekana kwa mfumo

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

Hiyo yote, ukurasa wetu kuu tayari unafanya kazi. Fomu hutuma ombi la POST iliyo na kiungo kinachohitaji kufupishwa.
Sasa inakuja sehemu ya kufurahisha (sio).

Kufanya kazi na hifadhidata

Wacha tuunde hifadhidata - MySQL. Ikiwa umesakinisha PhpMyAdmin, basi unda hifadhidata mpya "Viungo" na kisha endesha SQL hii:

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

Tutakuwa na sehemu 3 kwa kila kiungo:

  1. Msimbo ni herufi 4 bila mpangilio baada ya kikoa ambacho uelekezaji upya utatokea, kama example.com/ABC1
  2. Kiungo - Haijafupishwa kiungo.
  3. Hits - idadi ya kubofya kwenye kiungo kilichofupishwa.

Nitakuambia kwa ufupi kanuni ya kufanya kazi na hifadhidata, bila mafuta.

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

Hebu tuanze kufupisha.

Inachakata kiungo kipya

Unda Mwonekano mpya ndani index, ambayo itashughulikia ombi kutoka kwa fomu kwenye ukurasa kuu.

Kwanza, wacha tuunde kiolezo kipya, lakini kinachofanana sana na kiolezo cha kwanza (home.htm) - "newLink.htm".
Huko tutaonyesha kiunga kilichofupishwa tayari na idadi ya kubofya juu yake (ili kuona "takwimu" hizi tena, unahitaji kufupisha kiunga sawa tena - anwani itabaki sawa).
Ili kutoa matokeo, tutatumia hila ya "kupitisha kigezo":

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

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

Na hapa kuna orodha 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="/sw/">Главная</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="/sw/" 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>

Tunaandika njia yenyewe.

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

        }
);

Tayari! Kwa kweli, ilikuwa rahisi.

Inaelekeza kwingine

Bado kidogo tu kufanya:

  1. Pata kigezo kutoka kwa URL
  2. Angalia uwepo wake kwenye hifadhidata
  3. Pata kiunga kinacholingana kutoka kwa hifadhidata
  4. Elekeza mtumiaji kwingine
  5. Faida!

Tunaendelea kuandika msimbo baada ya Njia ya mwisho.

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

Huenda umeona hilo ndani na katika njia Kiungo kipya, na katika njia ya juu ya kitu kimoja kitafafanuliwa - baada ya yote kificho inaweza kufanana na "newLink" (haiwezi, jenereta ina herufi kubwa tu), lakini kwa kuwa imefafanuliwa kwanza, itatekelezwa kwanza.

$f3→kimbia()!

Asante kwa kusoma!
Nitafurahi ikiwa utaandika maoni na unisahihishe ikiwa kuna kitu kibaya.

Na kama kazi ya nyumbani au uthibitisho wa uvivu wa mwandishi (mimi), ninaacha orodha ya kile kinachoweza kufanywa. Ni bora kujifunza kwa kufanya!

  • Hii ni kweli haiwezekani, lakini wakati wa kuzalisha $g_code inaweza kutokea tena, kwa hivyo ninapendekeza uandike kazi ambayo itaangalia hii.
  • Unaweza pia kufanya takwimu za kawaida na kuzionyesha baada ya kubadili /@code/takwimu
  • Kataza uundaji wa viungo kwa huduma ya kufupisha kiunga yenyewe, tengeneza orodha ya rasilimali "zinazolindwa" kutokana na kufupisha.

  • Ninapendekeza sana kwamba hata katika jambo dogo kama hilo, ufanye uthibitishaji wa pembejeo kwenye upande wa seva, na makosa yanayolingana yanaonyeshwa, haupaswi kutegemea kuongeza sifa inayohitajika na chapa = "url" kwenye uwanja wa kuingiza.
    RedComrade

  • Pendekeza kwenye maoni...

    Kuwasiliana)

Chanzo: mapenzi.com

Kuongeza maoni