ProHoster > Blag > Riarachán > Naisc gan saill a ghiorrú (F3)

Naisc gan saill a ghiorrú (F3)

Naisc gan saill a ghiorrú (F3)

Níl aon náire ann naisc a ghiorrú ag 13, ceart? Ba chóir do thosaitheoirí, agus ní hamháin ina thosaitheoirí, iarracht a Link Tamer féin a scríobh agus é ag foghlaim creatlach éigin nua. Cé acu a rinne mé. Cad is féidir liom a rá - an cúigiú bootstrap, creat beagmhéathrais agus píosa anam.

Anseo taispeána, Ach код. Do léitheoirí cosúil liomsa 😉

Creat, ceart?

Ar ndóigh ní Laravel agus a leithéidí - inniu beimid ag déanamh le 65 cilibheart Fráma Saill saor in aisce,. Má tá tú eolach ar Python Flask, gheobhaidh tú an mothú go bhfuil sé seo déanta cheana féin áit éigin:

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

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

Ceart go leor, déan dearmad air. Íosluchtaigh .zip ón suíomh Gréasáin, é a dhíphacáil isteach i bhfillteán, a osclaíonn ag an am céanna i do Eagarthóir Cód Is Ansa leat. Glan index.php agus gach rud a bhaint as /ui.

Tá gach rud anseo thar a bheith simplí - san fhillteán ui Tá gach Radhairc againn, nó, chun é a chur go simplí, teimpléid HTML uasghrádaithe a thaispeánfaimid don úsáideoir nuair a fhaigheann siad rochtain ar URL ar leith.

Seo é creatlach ár “iarratais”:

<?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 uile ní mór duit fios a bheith agat le tosú. Cuirimis tús le códú!

[le haghaidh forbartha a d'úsáid mé áitiúil xampp ar Windows agus VS Code, alt scríofa i Noushen]

Leathanach baile

Cuirimis tús leis an bpríomhleathanach. Loighciúil, ceart?

//Файл: index.php

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

Anois ní mór duit an teimpléad seo a scríobh. Ar mhaithe le simplíocht a d'úsáid mé bootstrap v5 alpfa.

Ná déan dearmad gach teimpléad a chruthú san fhillteán ui, a mhalairt acu ní bheidh infheicthe don chreat

<!-- Файл: 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="/ga/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 go léir, tá ár bpríomhleathanach ag obair cheana féin. Seolann an fhoirm iarratas POST le nasc ar gá é a ghiorrú.
Anois tagann an chuid spraoi (ní).

Ag obair leis an mbunachar sonraí

Cruthaímid bunachar sonraí - MySQL. Má tá PhpMyAdmin suiteáilte agat, cruthaigh bunachar sonraí nua "Naisc" agus ansin rith 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`);

Beidh 3 réimse againn do gach nasc:

  1. Is cód randamach 4 carachtair tar éis an fhearainn trína dtarlóidh atreorú, cosúil le sampla.com/ABC1
  2. Nasc - Gan ghiorrú nasc.
  3. Hits - líon na cad a tharlaíonn ar an nasc giorraithe.

Inseoidh mé duit go hachomair an prionsabal oibriú le bunachar sonraí, gan saill.

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

A ligean ar tús a ghiorrú.

Nasc nua á phróiseáil

Cruthaigh Amharc nua i innéacs, a phróiseálfaidh an t-iarratas ón bhfoirm ar an bpríomhleathanach.

Ar dtús, déanaimis teimpléad nua a chruthú, ach an-chosúil leis an gcéad teimpléad (home.htm) - "newLink.htm".
Taispeánfaimid an nasc atá giorraithe cheana féin agus líon na gcliceanna air (chun na “staitisticí” seo a fheiceáil arís, ní mór duit an nasc céanna a ghiorrú arís - fanfaidh an seoladh mar a chéile).
Chun an t-aschur a tháirgeadh, úsáidfimid an cleas "pas inathraithe":

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

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

Agus seo é an liostú 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="/ga/">Главная</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="/ga/" 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>

Scríobhaimid an bealach fé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('/');
            }

        }
);

Réidh! I ndáiríre, bhí sé simplí.

atreorú

Níl ach beagán fágtha le déanamh:

  1. Faigh paraiméadar ó URL
  2. Seiceáil a láithreacht sa bhunachar sonraí
  3. Faigh an nasc comhfhreagrach ón mbunachar sonraí
  4. Atreorú úsáideoir
  5. Brabús!

Leanaimid de bheith ag scríobh cód tar éis an Bhealach deireanach.

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

Seans gur thug tú faoi deara é sin isteach agus sa bhealach Nasc nua, agus sa bhealach thuas saineofar an rud céanna - tar éis an tsaoil cód féadfaidh sé a bheith ag teacht le "newLink" (ní féidir leis, níl sa ghineadóir ach litreacha móra), ach ós rud é go bhfuil sé sainithe ar dtús, déanfar é ar dtús.

$f3 → rith()!

Go raibh maith agat as léamh!
Beidh áthas orm má scríobhann tú nóta tráchta agus ceartaigh mé má tá rud éigin mícheart.

Agus mar obair bhaile nó mar chruthúnas ar leisc an údair (mise), fágaim liosta de na rudaí is féidir a dhéanamh. Tá sé níos fearr a fhoghlaim trí dhéanamh!

  • Tá sé seo ar ndóigh nach dócha, ach nuair a ghiniúint $g_ cód seans go dtarlóidh sé arís, mar sin molaim duit feidhm a scríobh a sheiceálfaidh chuige seo.
  • Is féidir leat gnáthstaitisticí a dhéanamh freisin agus iad a thaispeáint tar éis athrú chuig /@ cód/stats
  • Cosc ar naisc a chruthú leis an tseirbhís ghiorrú naisc féin, cruthaigh liosta acmhainní “cosanta” ó ghiorrú

  • Molaim go láidir, fiú i gcás chomh beag, go ndéanann tú bailíochtú ionchuir ar thaobh an fhreastalaí, agus na hearráidí comhfhreagracha ar taispeáint, níor cheart duit brath ar an tréith riachtanach agus cineál = “url” a chur leis an réimse ionchuir
    Comortas Dearg

  • Mol sna tuairimí...

    I dteagmháil)

Foinse: will.com

Add a comment