ProHoster > Blog > Rianachd > A’ giorrachadh cheanglaichean gun gheir (F3)

A’ giorrachadh cheanglaichean gun gheir (F3)

A’ giorrachadh cheanglaichean gun gheir (F3)

Chan eil nàire ann ceanglaichean a ghiorrachadh aig 13, ceart? Bu chòir do neach-tòiseachaidh, agus chan e a-mhàin neach-tòiseachaidh, feuchainn ris an Link Tamer aige fhèin a sgrìobhadh fhad ‘s a tha e ag ionnsachadh frèam ùr. Dè a rinn mi. Dè as urrainn dhomh a ràdh - an còigeamh bootstrap, frèam le geir ìosal agus pìos anam.

an seo demoagus, an-seo còd. Do luchd-leughaidh mar mise 😉

Frèam, ceart?

Gu dearbh chan e Laravel agus an leithid - an-diugh nì sinn le 65 kilobytes Frèam saor ' s an asgaidh fate. Ma tha thu eòlach air Python Flask, gheibh thu faireachdainn gu bheil seo air a dhèanamh an àiteigin mu thràth:

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

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

Ceart gu leòr, dìochuimhnich e. Luchdaich sìos .zip bhon làrach-lìn, dì-phacaich e ann am pasgan, a dh’ fhosglas aig an aon àm anns an deasaiche còd as fheàrr leat. Soilleir index.php agus thoir air falbh a h-uile càil /ui.

Tha a h-uile dad an seo gu math sìmplidh - anns a 'phasgan ui Tha a h-uile sealladh againn, no, airson a chuir gu sìmplidh, teamplaidean HTML leasaichte a sheallas sinn don neach-cleachdaidh nuair a gheibh iad cothrom air URL sònraichte.

Seo cnàimhneach an “tagradh” againn:

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

Sin a h-uile rud a dh'fheumas tu a bhith eòlach airson tòiseachadh. Feuch an tòisich sinn air còdadh!

[airson leasachadh chleachd mi ionadail XAMPP air Windows agus VS Code, artaigil sgrìobhte ann an Noushen]

Duilleag-dachaigh

Feuch an tòisich sinn leis a’ phrìomh dhuilleag. Loidsigeach, ceart?

//Файл: index.php

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

A-nis feumaidh tu an dearbh teamplaid seo a sgrìobhadh. Airson sìmplidheachd chleachd mi Bootstrap v5 alpfa.

Na dìochuimhnich na teamplaidean gu lèir a chruthachadh sa phasgan ui, air dhòigh eile iad cha dèan ri fhaicinn don fhrèam

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

Sin uile, tha ar prìomh dhuilleag ag obair mu thràth. Bidh am foirm a’ cur iarrtas POST le ceangal a dh’ fheumar a ghiorrachadh.
A-nis thig am pàirt spòrsail (chan eil).

Ag obair leis an stòr-dàta

Cruthaichidh sinn stòr-dàta - MySQL. Ma tha PhpMyAdmin agad air a chuir a-steach, cruthaich stòr-dàta ùr "ceangal" agus an uairsin ruith an SQL seo:

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

Bidh 3 raointean againn airson gach ceangal:

  1. Is e còd air thuaiream 4 caractaran às deidh an àrainn tro bheil ath-stiùireadh a’ tachairt, mar eisimpleir.com/ABC1
  2. Ceangal - Gun ghiorrachadh ceangal.
  3. Hits - an àireamh de chlican air a 'cheangal giorraichte.

Innsidh mi dhut gu h-aithghearr am prionnsapal a bhith ag obair le stòr-dàta, gun geir.

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

Feuch an tòisich sinn air an giorrachadh.

A’ làimhseachadh ceangal ùr

Cruthaich sealladh ùr ann an clàr-amais, a làimhsicheas an t-iarrtas bhon fhoirm air a’ phrìomh dhuilleig.

An toiseach, cruthaichidh sinn teamplaid ùr, ach glè choltach ris a’ chiad teamplaid (home.htm) - “newLink.htm".
An sin seallaidh sinn an ceangal a tha air a ghiorrachadh mar-thà agus an àireamh de chlican air (gus na “staitistigean" sin fhaicinn a-rithist, feumaidh tu an aon cheangal a ghiorrachadh a-rithist - fuirichidh an seòladh mar a tha e).
Gus an toradh a thoirt gu buil, cleachdaidh sinn an cleas “caochlaideach seachad”:

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

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

Agus seo an clàr 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="/gd/">Главная</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="/gd/" 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>

Bidh sinn a’ sgrìobhadh an t-slighe fhèin.

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

        }
);

Deiseil! Gu fìrinneach, bha e sìmplidh.

Ath-stiùireadh

Chan eil ach beagan air fhàgail ri dhèanamh:

  1. Faigh paramadair bhon URL
  2. Thoir sùil air a làthaireachd anns an stòr-dàta
  3. Faigh an ceangal iomchaidh bhon stòr-dàta
  4. Ath-stiùireadh neach-cleachdaidh
  5. Prothaid!

Leanaidh sinn oirnn a’ sgrìobhadh còd às deidh an t-Slighe mu dheireadh.

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

Is dòcha gu bheil thu air mothachadh a dhèanamh air sin a-staigh agus air an t-slighe Ceangal ùr, agus anns an t-slighe gu h-àrd thèid an aon rud a mhìneachadh - às deidh a h-uile càil code faodaidh e a bhith co-ionnan ri “newLink” (chan urrainn, chan eil anns a’ ghineadair ach litrichean mòra), ach leis gu bheil e air a mhìneachadh an toiseach, thèid a chuir gu bàs an toiseach.

$f3 → ruith()!

Tapadh leibh airson an leughadh!
Bidh mi toilichte ma sgrìobhas tu beachd agus ma chuireas tu ceart mi ma tha rudeigin ceàrr.

Agus mar obair-dachaigh neo dearbhadh air leisg an ùghdair (mise), fàgaidh mi liosta de na ghabhas dèanamh. Tha e nas fheàrr ionnsachadh le bhith a 'dèanamh!

  • Tha seo gu dearbh eu-coltach, ach nuair a ghineadh $g_còd Faodaidh seo tachairt a-rithist, mar sin tha mi a’ moladh dhut gnìomh a sgrìobhadh a nì sgrùdadh airson seo.
  • Faodaidh tu cuideachd staitistig àbhaisteach a dhèanamh agus an taisbeanadh às deidh dhut atharrachadh gu /@còd/stats
  • Cuir casg air cruthachadh cheanglaichean ris an t-seirbheis giorrachadh ceangail fhèin, cruthaich liosta de ghoireasan “air an dìon” bho ghiorrachadh

  • Tha mi a’ moladh gu làidir, eadhon ann an cùis cho beag, gun dèan thu dearbhadh cuir a-steach air taobh an fhrithealaiche, leis na mearachdan co-fhreagarrach air an taisbeanadh, cha bu chòir dhut a bhith an urra ri bhith a ’cur a’ fheart riatanach agus seòrsa = “url” ris an raon cuir a-steach
    Comraid Dheirg

  • Molaibh anns na beachdan ...

    Ann an conaltradh)

Source: www.habr.com

Cuir beachd ann