ProHoster > Blog > administratë > Shkurtimi i lidhjeve pa yndyrë (F3)

Shkurtimi i lidhjeve pa yndyrë (F3)

Shkurtimi i lidhjeve pa yndyrë (F3)

Nuk ka turp të shkurtosh lidhjet në 13, apo jo? Një fillestar, dhe jo vetëm një fillestar, duhet të përpiqet të shkruajë lidhjen e tij Tamer ndërsa mëson një kornizë të re. Kjo është ajo që bëra. Çfarë mund të them - bootstrap i pestë, një kornizë me pak yndyrë dhe një copë shpirt.

Këtu demonstrim, Por kod. Për lexues si unë 😉

Korniza, apo jo?

Sigurisht jo Laravel dhe të ngjashme - sot do të mjaftohemi me 65 kilobajt FatFreeFramework. Nëse jeni njohur me Python Flask, do të keni ndjenjën se kjo tashmë është bërë diku:

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

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

Mirë, harrojeni. Shkarko .zip nga jashtë sajti, shpaketoni atë në një dosje, e cila në të njëjtin moment hapet në Redaktorin tuaj të Kodit të Preferuar. Qartë index.php dhe hiqni gjithçka nga /ui.

Gjithçka këtu është jashtëzakonisht e thjeshtë - në dosje ui Ne kemi të gjitha Views, ose, për ta thënë thjesht, modele të përmirësuara HTML që do t'i shfaqim përdoruesit kur ata të vizitojnë një URL specifike.

Këtu është skeleti i "aplikacionit" tonë:

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

Kjo është gjithçka që duhet të dini për të filluar. Le të fillojmë të kodojmë!

[për zhvillim kam përdorur lokale XAMPP në Windows dhe VS Code, artikull i shkruar në Noushen]

Faqe Hyrëse

Le të fillojmë me faqen kryesore. Logjike, apo jo?

//Файл: index.php

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

Tani ju duhet të shkruani pikërisht këtë shabllon. Për thjeshtësi kam përdorur bootstrap v5 alpfa.

Mos harroni të krijoni të gjitha shabllonet në dosje UI, përndryshe ata nuk do të dukshme për kornizën

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

Kjo është e gjitha, faqja jonë kryesore tashmë është duke punuar. Formulari dërgon një kërkesë POST me një lidhje që duhet të shkurtohet.
Tani vjen pjesa argëtuese (jo).

Puna me bazën e të dhënave

Le të krijojmë një bazë të dhënash - MySQL. Nëse keni të instaluar PhpMyAdmin, atëherë krijoni një bazë të dhënash të re "Lidhjet" dhe më pas ekzekutoni këtë 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`);

Do të kemi 3 fusha për secilën lidhje:

  1. Kodi është një 4 karaktere të rastësishme pas domenit përmes të cilit do të ndodhë ridrejtimi, si p.sh shembull.com/ABC1
  2. Lidhje - Jo i shkurtuar lidhja.
  3. Hitet - numri i klikimeve në lidhjen e shkurtuar.

Unë do t'ju tregoj shkurtimisht parimin e punës me një bazë të dhënash, pa yndyrë.

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

Le të fillojmë të shkurtojmë.

Po përpunohet një lidhje e re

Krijo një pamje të re në indeks, i cili do të përpunojë kërkesën nga formulari në faqen kryesore.

Së pari, le të krijojmë një model të ri, por shumë të ngjashëm me shabllonin e parë (home.htm) - "newLink.htm".
Atje do të shfaqim lidhjen tashmë të shkurtuar dhe numrin e klikimeve në të (për të parë përsëri këto "statistika", duhet të shkurtoni përsëri të njëjtën lidhje - adresa do të mbetet e njëjtë).
Për të prodhuar rezultatin, ne do të përdorim trukun e "kalimit të ndryshueshëm":

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

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

Dhe këtu është lista 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="/sq/">Главная</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="/sq/" 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>

Ne shkruajmë vetë rrugën.

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

        }
);

Gati! Në fakt, ishte e thjeshtë.

ridrejtoj

Mbetet edhe pak për të bërë:

  1. Merrni parametrin nga URL
  2. Kontrolloni praninë e tij në bazën e të dhënave
  3. Merrni lidhjen përkatëse nga baza e të dhënave
  4. Ridrejto përdoruesin
  5. Fitimi!

Ne vazhdojmë të shkruajmë kodin pas Rrugës së fundit.

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

Ju mund ta keni vënë re këtë brenda dhe gjatë rrugës lidhje e re, dhe në rrugën e mësipërme do të përcaktohet e njëjta gjë - në fund të fundit kod mund të përputhet me "newLink" (nuk mundet, gjeneratori përmban vetëm shkronja të mëdha), por duke qenë se është përcaktuar i pari, ai do të ekzekutohet i pari.

$f3→run()!

Faleminderit per leximin!
Do të jem i lumtur nëse shkruani një koment dhe më korrigjoni nëse diçka nuk shkon.

Dhe si detyrë shtëpie apo dëshmi e përtacisë së autorit (unë), lë një listë të asaj që mund të bëhet. Është më mirë të mësosh duke bërë!

  • Kjo sigurisht nuk ka gjasa, por kur gjenerohet $g_code mund të ndodhë përsëri, prandaj ju sugjeroj të shkruani një funksion që do ta kontrollojë këtë.
  • Ju gjithashtu mund të bëni statistika normale dhe t'i shfaqni ato pasi të kaloni te /@kodi/statistikat
  • Ndaloni krijimin e lidhjeve në vetë shërbimin e shkurtimit të lidhjeve, krijoni një listë të burimeve "të mbrojtura" nga shkurtimi

  • Unë rekomandoj fuqimisht që edhe në një çështje kaq të vogël, të bëni vërtetimin e hyrjes në anën e serverit, me gabimet përkatëse të shfaqura, nuk duhet të mbështeteni në shtimin e atributit dhe llojit të kërkuar = "url" në fushën e hyrjes.
    Shoku i Kuq

  • Sugjeroni në komente...

    Në kontakt)

Burimi: www.habr.com

Shto një koment