ProHoster > Blog > Tsamaiso > Ho khutsufatsa likhokahano ntle le mafura (F3)

Ho khutsufatsa likhokahano ntle le mafura (F3)

Ho khutsufatsa likhokahano ntle le mafura (F3)

Ha ho na lihlong ho khutsufatsa lihokelo ho 13, ho joalo? Motho ea qalang, eseng ea qalang feela, o lokela ho leka ho ngola Link Tamer ea hae ha a ntse a ithuta moralo o mocha. E leng seo ke se entseng. Nka re'ng - bootstrap ea bohlano, moralo o tlaase oa mafura le karoloana ea moea.

mona moemeli, le mona khoutu. Bakeng sa babadi ba kang nna 😉

Moralo, ho joalo?

Ehlile ha se Laravel le tse ling - kajeno re tla etsa ka 65 kilobytes FatFreeFramework. Haeba u tloaelane le Python Flask, u tla ba le maikutlo a hore sena se se se entsoe kae-kae:

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

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

Ho lokile, lebala. Khoasolla .zip ho tsoa sebakeng sa marang-rang, e e phutholle foldareng, eo ka nako e tšoanang e bulang ho Favorite Code Editor. Hlakileng Index.php le ho tlosa tsohle ho tloha /ui.

Ntho e 'ngoe le e' ngoe mona e bonolo haholo - ka foldareng ui Re na le Maikutlo kaofela, kapa, ho e beha ka mokhoa o bonolo, litempele tsa HTML tse ntlafalitsoeng tseo re tla li bontša mosebelisi ha a fihlella URL e itseng.

Mona ke skeleton ea "kopo" ea rona:

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

Ke phetho seo o hlokang ho se tseba ho qala. Ha re qaleng ho khouta!

[bakeng sa ntshetsopele ke ne ke sebelisa sebakeng seo XAMPP ho Windows le VS Code, sengoloa se ngotsoeng ka Noushen]

Homepage

Ha re qaleng ka leqephe la sehlooho. Hoa utloahala, ho joalo?

//Файл: index.php

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

Hona joale o hloka ho ngola template ena. Bakeng sa ho nolofatsa ke sebelisitse bootstrap v5 alfa.

Se ke oa lebala ho etsa litempele tsohle ka har'a foldara ui, ho seng joalo bona hana e bonahalang ho moralo

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

Ke tsohle, leqephe la rona la mantlha le se le ntse le sebetsa. Foromo e romella kopo ea POST e nang le sehokelo se hlokang ho khutsufatsoa.
Joale ho tla karolo e monate (eseng).

Ho sebetsa le database

Ha re theheng database - MySQL. Haeba u kentse PhpMyAdmin, joale theha database e ncha "linker"'me u tsamaise SQL ena:

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

Re tla ba le masimo a 3 bakeng sa sehokelo ka seng:

  1. Khoutu ke litlhaku tse 4 tse sa reroang ka mor'a sebaka seo ho tsamaisoa ho tla etsahala ka sona, joalo ka mohlala.com/ABC1
  2. Khokahanyo - Ha e khutsufatsoe sehokelo.
  3. Hits - palo ea ho tobetsa sehokelong se khutsufalitsoeng.

Ke tla u bolella ka bokhutšoanyane molao-motheo oa ho sebetsa le database, ntle le mafura.

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

Ha re qaleng ho khutsufatsa.

E sebetsa sehokelo se secha

Etsa Pono e ncha ho index, e tla sebetsana le kopo ho tsoa foromong e leqepheng la sehlooho.

Taba ea pele, ha re theheng sets'oants'o se secha, empa se ts'oana haholo le template ea pele (home.htm) - "newLink.htm".
Ha re le moo re tla bonts'a sehokelo se seng se khutsufalitsoe le palo ea ho tobetsa ho sona (ho bona "lipalo-palo" tsena hape, o hloka ho khutsufatsa sehokelo se tšoanang hape - aterese e tla lula e tšoana).
Ho hlahisa sephetho, re tla sebelisa leqheka la "variable pass":

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

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

Lenane ke lena 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="/st/">Главная</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="/st/" 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>

Re ngola tsela ka boeona.

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

        }
);

E lokile! Ha e le hantle, e ne e le bonolo.

E tsamaisa hape

Ho na le ho se hokae ho etsoa:

  1. Fumana parameter ho tsoa ho URL
  2. Sheba boteng ba eona ho database
  3. Fumana sehokelo se lumellanang ho tsoa ho database
  4. Tsamaisa mosebelisi hape
  5. Moputso!

Re tsoela pele ho ngola khoutu ka mor'a Tsela ea ho qetela.

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

E ka 'na eaba u hlokometse seo ka hare le tseleng newLink, 'me tseleng e ka holimo ho tla hlalosoa ntho e tšoanang - ka mor'a tsohle khoutu e ka bapisa "newLink" (ha e khone, jenereithara e na le litlhaku tse kholo feela), empa kaha e hlalosoa pele, e tla etsoa pele.

$f3→ matha()!

Re leboha ho bala!
Ke tla thaba ha o ka ngola maikutlo 'me oa ntokisoa haeba ho na le phoso.

'Me e le mosebetsi oa sekolo kapa bopaki ba botsoa ba mongoli ('na), ke siea lethathamo la se ka etsoang. Ho molemo ho ithuta ka ho etsa!

  • Ha e le hantle, sena ha se khonehe, empa ha ho etsoa $g_khouto e ka etsahala hape, kahoo ke fana ka tlhahiso ea hore u ngole tšebetso e tla hlahloba sena.
  • U ka boela ua etsa lipalo-palo tse tloaelehileng 'me ua li bontša ka mor'a hore u fetohele ho /@code/stats
  • Thibela ho theoa ha likhokahano tsa tšebeletso ea ho khutsufatsa sehokelo ka boyona, etsa lethathamo la lisebelisoa tse "sireletsoang" ho khutsufatsa.

  • Ke khothaletsa ka matla hore le nthong e nyane joalo, o kenye netefatso ka lehlakoreng la seva, ka liphoso tse lumellanang tse bonts'itsoeng, ha oa lokela ho itšetleha ka ho eketsa tšobotsi e hlokahalang le ho thaepa = "url" lebaleng la ho kenya.
    RedComrade

  • Sisinya maikutlong...

    Ho buisana)

Source: www.habr.com

Eketsa ka tlhaloso