ProHoster > Блог > Gudanarwa > Gajerun hanyoyin haɗin gwiwa ba tare da mai ba (F3)

Gajerun hanyoyin haɗin gwiwa ba tare da mai ba (F3)

Gajerun hanyoyin haɗin gwiwa ba tare da mai ba (F3)

Babu kunya a rage hanyoyin haɗi a 13, daidai? Mafari, kuma ba mafari kaɗai ba, yakamata yayi ƙoƙarin rubuta nasa Link Tamer yayin koyon sabon tsarin. Abin da na yi ke nan. Abin da zan iya ce - na biyar bootstrap, a low-fat framework da wani yanki na rai.

a nan demo, kuma a nan lambar. Ga masu karatu kamar ni 😉

Tsarin, daidai?

Tabbas ba Laravel da makamantansu ba - a yau za mu yi da kilobytes 65 FatFreeFramework. Idan kun saba da Python Flask, za ku ji cewa an riga an yi wannan a wani wuri:

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

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

To, manta da shi. Zazzagewa .zip daga waje, zazzage shi cikin babban fayil, wanda a lokaci guda yana buɗewa a cikin Editan Lambobin da kuka fi so. Share index.php kuma cire komai daga /ui.

Komai anan abu ne mai sauqi qwarai – a cikin babban fayil ui Muna da duk Ra'ayoyi, ko, don sanya shi a sauƙaƙe, haɓaka samfuran HTML waɗanda za mu nuna wa mai amfani lokacin da suka ziyarci takamaiman URL.

Ga kwarangwal na “application” din mu:

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

Wannan shine abin da kuke buƙatar sani don farawa. Bari mu fara coding!

[don ci gaba na yi amfani da gida XAMPP a kan Windows da VS Code, labarin da aka rubuta a Noushen]

homepage

Bari mu fara da babban shafi. Hankali, dama?

//Файл: index.php

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

Yanzu kuna buƙatar rubuta wannan samfuri sosai. Don sauƙi na yi amfani da shi Takaddun shaida v5 Alfa.

Kar a manta da ƙirƙirar duk samfura a cikin babban fayil ɗin ui, in ba haka ba su ba zai bayyane ga tsarin

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

Shi ke nan, babban shafinmu ya riga ya fara aiki. Fom ɗin yana aika buƙatun POST tare da hanyar haɗin yanar gizon da ke buƙatar taƙaitawa.
Yanzu ya zo sashin nishaɗi (ba).

Aiki tare da database

Bari mu ƙirƙiri tushen bayanai - MySQL. Idan an shigar da PhpMyAdmin, sannan ƙirƙirar sabon bayanan bayanai "linker"Sa'an nan kuma gudanar da wannan 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`);

Za mu sami filayen 3 don kowane mahaɗin:

  1. Lambar bazuwar harufa 4 ce bayan yankin wanda ta inda za a sake jujjuyawa, kamar misali.com/ABC1
  2. mahada - Ba a gajarta ba mahada.
  3. Hits - adadin dannawa akan gajeriyar hanyar haɗin.

Zan gaya muku a takaice ka'idar aiki tare da bayanan bayanai, ba tare da mai ba.

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

Bari mu fara gajarta.

Ana aiwatar da sabon hanyar haɗin gwiwa

Ƙirƙiri sabon Duba a ciki index, wanda zai aiwatar da buƙatun daga fom ɗin da ke babban shafi.

Da farko, bari mu ƙirƙiri sabon, amma mai kama da na farko (home.htm) samfuri -"newLink.htm".
A can za mu nuna hanyar haɗin da aka riga aka gajarta da adadin dannawa (don sake ganin waɗannan "ƙididdiga", kuna buƙatar sake rage hanyar haɗin yanar gizon - adireshin zai kasance iri ɗaya).
Don samar da fitarwa, za mu yi amfani da dabarar "mai canzawa":

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

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

Kuma ga lissafin 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="/ha/">Главная</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="/ha/" 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>

Mukan rubuta hanyar da kanta.

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

        }
);

Shirya! A gaskiya, ya kasance mai sauƙi.

turawa

Akwai saura kaɗan a yi:

  1. Samo siga daga URL
  2. Duba kasancewar sa a cikin ma'ajin bayanai
  3. Samu hanyar haɗin da ta dace daga ma'ajin bayanai
  4. Mai amfani da turawa
  5. Riba!

Muna ci gaba da rubuta lamba bayan Hanya ta ƙarshe.

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

Wataƙila kun lura da hakan a cikin kuma a cikin hanya newlink, kuma a cikin hanyar da ke sama da abu guda za a bayyana - bayan duk code na iya daidaita "newLink" (ba zai iya ba, janareta ya ƙunshi manyan haruffa kawai), amma tunda an fara bayyana shi, za a fara aiwatar da shi.

$f3→ run()!

Na gode da karantawa!
Zan yi farin ciki idan ka rubuta sharhi kuma ka gyara ni idan wani abu ba daidai ba.

Kuma a matsayin aikin gida ko hujja na kasala na marubucin (ni), na bar jerin abubuwan da za a iya yi. Yana da kyau a koya ta yin!

  • Wannan ba shakka ba zai yuwu ba, amma lokacin samarwa $g_code na iya sake faruwa, don haka ina ba da shawarar ku rubuta aikin da zai bincika wannan.
  • Hakanan zaka iya yin kididdigar al'ada da nuna su bayan canzawa zuwa /@code/stats
  • Hana ƙirƙirar hanyoyin haɗi zuwa sabis ɗin gajeriyar hanyar haɗin yanar gizon kanta, ƙirƙirar jerin abubuwan da aka “kare” daga gajarta.

  • Ina ba da shawarar sosai cewa ko da a cikin irin wannan ƙaramin abu, kuna yin ingantaccen shigarwar a gefen uwar garken, tare da kurakurai masu dacewa da aka nuna, kada ku dogara da ƙara sifa da ake buƙata da nau'in = "url" zuwa filin shigarwa.
    RedComrade

  • Shawara a cikin sharhi...

    A tuntuɓar)

source: www.habr.com

Add a comment