ProHoster > Blog > Adminisztráció > Linkek rövidítése zsír nélkül (F3)

Linkek rövidítése zsír nélkül (F3)

Linkek rövidítése zsír nélkül (F3)

Nem szégyen 13 év alatt linkeket rövidíteni, igaz? Egy kezdőnek, de nem csak neki, érdemes kipróbálnia saját Linkszelídítőjének megírását, miközben valamilyen új keretrendszert tanul. Én éppen ezt csinálom. Mit is mondhatnék – az ötödik bootstrap, zsírmentes keretrendszer és egy darabka a lelkemből.

Íme demóból, de a kódot. Az ilyen olvasók számára, mint én 😉

Keretrendszer, nem igaz?

Természetesen nem Laravel és társai – ma 65 kilobájttal megleszünk. FatFreeFramework. Ha ismered a Python Flask-t, akkor az az érzésed lesz, mintha ezt már valahol láttad volna:

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

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

Rendben, felejtsd el. Töltsük le .zip a hivatalos weboldalról., bontsd ki abba mappába, ami éppen most nyílik meg a Kedvenc Kód Szerkesztődben. Tisztítsd meg index.php -t, és törölj mindent belőle. /ui.

Itt minden rendkívül egyszerű – a mappában ui minden nézetünk van, vagy ha egyszerűbben akarjuk mondani – felturbózott HTML sablonok, amelyeket meg fogunk mutatni a felhasználónak, amikor egy adott URL-re lép.

Itt van az "alkalmazásunk" vázlata:

set('DEBUG', 1);
if ((float)PCRE_VERSIONconfig('config.ini');

// MINDEN MÁS KÓDOT ITT FOGUNK ÍRNI

$f3->run();

Ennyi az, amit tudni érdemes a kezdethez. Kezdjünk el kódolni!

[a fejlesztéshez lokális XAMPP -ot használtam Windows-on és VS Code-ot, a cikket Notion-ban írtam.]

Főoldal

Kezdjünk a főoldallal. Logikus, igaz?

//Файл: index.php

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

Most el kell készíteni ezt a sablont. Az egyszerűség kedvéért Bootstrap v5 alpha-t használtam. Ne felejts el minden sablont a

ui mappában létrehozni, különben nem nem fognak látható a keretrendszer számára.

<!-- Файл: 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>Kódot írunk, linkeket rövidítünk!</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="#">Főoldal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Cikk a Habr-on</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Létrehozó</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Rövid linkek már itt vannak.</h1>

        <!-- Будем отправлять данные POST-запросом на /newLink -->
        <form class="mt-5 mb-3" action="/hu/newLink/" method="POST" data-trp-original-action="/newLink/">
            <div class="row justify-content-center">
                <div class="col-auto">
                <label for="inputLink" class="col-form-label">Írd be a linket:</label>
                </div>
                <div class="col-auto">
                <input required placeholder="LETS_ENCRYPT_STAGING" 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">Rövidítés!</button>
                </div>
            </div>
        <input type="hidden" name="trp-form-language" value="hu"/></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">Készült a <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="szeretettel">, <a href="https://v5.getbootstrap.com/">ötödik Bootstrap-tel</a>    és <a href="https://fatfreeframework.com/">zsír nélkül</a></footer>
        </div>
    </body>
</html>

Ennyi, már működik a főoldalunk. Az űrlap POST-kéréssel küldi el a linket, amit rövidíteni kell.
Most következik a legizgalmasabb rész (nem).

Munka az adatbázissal

Hozzunk létre egy adatbázist – MySQL. Ha telepítve van a PhpMyAdmin, hozz létre egy új adatbázist "linker", majd futtasd ezt az SQL-t:

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

Mindegyik linknél 3 mezőnk lesz:

  1. Code – ez 4 véletlenszerű karakter a domain után, amin keresztül a továbbítás történik, például example.com/ABC1
  2. Link – A nem rövidített link.
  3. Hits – a rövidített linkre történt kattintások száma.

Röviden elmondom, hogyan működik az adatbázissal való munka, zsír nélkül.

set('result', $db->exec('SELECT * FROM wherever')); 
//ezek elérhetők lesznek a sablonokban, mint 

//Vagy használhatjuk a beépített SQL Mapper-t:
$row = new DBSQLMapper($db, 'links');

$row->load(array('link="https://habrahabr.ru"')); //most már ebből az objektumból elérhető az összes oszlop a sorban, ahol a hivatkozás a Habr-ra mutat:
$row_value = $row->somerow; //Így néz ki

//Természetesen a értékek módosíthatók:
$row->link = 'https://habr.com';
$row->save(); //a változtatásokat menteni kell, mit gondoltál?

//Több információ az adatbázis munkájáról itt található: https://a.nikonovs.ru/MPHR Ajánlom, hogy olvasd el, akár a böngésző beépített fordítójával.
?>

Kezdjük el a rövidítést.

Új hivatkozás feldolgozása

Új nézet létrehozása a index-ben, amely feldolgozza a főoldal űrlapjából érkező kérést.

Először készítünk egy új, de nagyon hasonló sablont az elsőhöz (home.htm) — "newLink.htm".
Itt fogjuk megjeleníteni a már lerövidített hivatkozást és az átkattintások számát (hogy újra láthassuk ezt a "statisztikát", megint le kell rövidíteni ezt a hivatkozást — a cím ugyanaz marad).
A megjelenítéshez használjuk a "változó átadás" trükköt:

set('link', $shorted_link);
$view = new View;
echo $view->render('newLink.htm');
//most a sablonban használható:

Itt van a listing 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>Kódot írunk, linkeket rövidítünk!</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="/hu/">Főoldal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Cikk a Habr-on</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Létrehozó</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Rövid linkek már itt vannak.</h1>

        <!-- Убираем из формы функционал формы и выводим переменные -->
        <form class="mt-5 mb-3" action="">
            <div class="row justify-content-center">
                <div class="col-auto">
                    <label for="inputLink" class="col-form-label">Rövidítve:</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">Erre a linkre kattintottak: ``</p>
        <input type="hidden" name="trp-form-language" value="hu"/></form>

        <a href="/hu/" class="mt-3 mb-5 btn btn-primary btn-lg">VISSZA A FŐOLDALRA</a>

        <footer class="m-2">Készült a <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="szeretettel">, <a href="https://v5.getbootstrap.com/">ötödik Bootstrap-tel</a>    és <a href="https://fatfreeframework.com/">zsír nélkül</a></footer>
        </div>
    </body>
</html>

Megírjuk a route-ot.

$f3->route('GET|POST /newLink', //itt fogjuk kezelni a POST és GET 
    function($f3) {

            $db = new DBSQL( //Új adatbázis csatlakozás minden route-nál
                'mysql:host=localhost;port=3306;dbname=linker',
                'root',
                ''
            );

            //kiváló véletlenszám-generáló funkció:
            $permitted_chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            function generate_string($input, $strength = 4) {
                $input_length = strlen($input);
                $random_string = '';
                for($i = 0; $i 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; //ha a link ismétlődik, akkor a régi kódot mutatjuk
            }

            $short_link = 'https://'. $_SERVER['HTTP_HOST'] . '/' . $g_code; //összeállítjuk a végső linket

            //az $_POST-ból paramétereket kaphatunk $f3->get('POST') segítségével, támogatja a pontozott jelölést (javítsd ki, ha tévedek): a "link" paraméter így érhető el: 
            $link = $f3->get('POST.link');

            if ( !empty($f3->get('POST')) ) { //HTML-t adunk ki, csak ha a POST nem üres.

            $f3->set('link', $short_link);
            $f3->set('hits', $check->hits);
            $view = new View;
            echo $view->render('newLink.htm');

            } else { //ellenkező esetben - átirányítás a főoldalra
                $f3->$f3->reroute('/');
            }

        }
);

Kész! Valójában ez egyszerű volt.

Átirányítás

Már csak annyi maradt:

  1. Paraméter megszerzése az URL-ből
  2. Ellenőrizni a meglétét az adatbázisban
  3. Megszerezni a megfelelő linket az adatbázisból
  4. Átirányítani a felhasználót
  5. Profit!

Folytatjuk a kód írását az előző route után.

$f3->route('GET /@code', //paraméter megadása az "@" után, be fog kerülni a PARAMS
    function($f3) {

        //újra definiáljuk a $db-t
        $db = new DBSQL(
            'mysql:host=localhost;port=3306;dbname=linker',
            'root',
            ''
        );

        $code = $f3->get('PARAMS.code'); //megkapjuk a paramétert

        $link = new DBSQLMapper($db,'links'); 

        //ha sikerül hivatkozni az adatbázisból - megkapjuk, növeljük a látogatások számát és átirányítunk
        if ($link->load(array('code="'.$code.'"', 'link=?'))) {
            $link->hits++;
            $link->save();

            $f3->reroute($link->link);
        } else {
            $f3->reroute('/'); //ha ilyen link nem létezik - szeretettel várunk a főoldalon
        }
    }
);

Már észrevehették, hogy a route-ban is newLink, és a fenti route-ban is ugyanaz fog meghatározódni — hiszen kód össze lehet illeszkedni a "newLink"-kel (nem lehet, a generátorban csak nagybetűk vannak), de mivel először ő lett definiálva, így ő fog elsőként végrehajtódni.

$f3→run()!

Köszönöm a figyelmet!
Örömmel várom, ha ír egy megjegyzést, és javít, ha valami nem stimmel.

A házi feladat vagy az író (az én) lustaságának bizonyítékaként egy listát hagyok, hogy mit lehetne tenni. Hiszen jobb a gyakorlaton tanulni!

  • Ez természetesen valószínűtlen, de a generálás során $g_code megismétlődhet, ezért javaslom, hogy írjon egy függvényt, ami ezt ellenőrzi.
  • Még rendes statisztikát is lehet csinálni, és megjeleníteni azt a linkeken történő átmenetkor /@code/stats
  • Tilos linkeket létrehozni a linkcsökkentő szolgáltatásra, készíteni kell egy listát az "védett" forrásokról, amelyeket nem lehet lerövidíteni

  • Határozottan javaslom, hogy még egy ilyen kis dolognál is végezzen validációt a bemeneten a szerveroldalon, megfelelő hibák megjelenítésével, nem szabad csupán a required attribútum és a type="url" hozzáadására támaszkodni a bemeneti mezőhöz
    RedComrade

  • Ajánlja megjegyzésben…

    Kéznél vagyok)

Forrás: habr.com

Megbízható hosting vásárlása weboldalak számára, DDoS védelemmel, VPS VDS szerverek. 🔥 Megbízható webtárhely vásárlása DDoS védelemmel, VPS VDS szerverek | ProHoster