ProHoster > Blogi > Haldamine > Shortening links without fluff (F3)

Shortening links without fluff (F3)

Shortening links without fluff (F3)

Linkide lühendamine 13 aastat pole piinlik, eks? Algajal, aga ka mitte ainult algajal, tasub proovida kirjutada oma Linkide Taltsutaja, õppides samas mõnda uut raamistikku. Just sellega ma tegingi. Mis ma oskan öelda — viies bootstrap, rasvavaba raamistik ja osa hingest.

Siin on demo, aga kood. Selliste lugejate jaoks nagu mina 😉

Raamistik, eks ole?

Muidugi mitte Laravel ja sarnased — täna saame hakkama 65 kilobaitidega FatFreeFramework. Kui oled tuttav Python Flaskiga, siis tekib tunne, et see on kusagil juba olnud:

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

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

Olgu, unustame. Laadime alla .zip ametlikult lehelt, pakkime lahti kausta, mis avatakse just nüüd sinu Lemmik Koodiredaktoris. Puhasta index.php ja eemalda kõik sellest /ui.

Siin on kõik äärmiselt lihtne — kaustas ui on meil kõik Vaated, ja lihtsustatult öeldes — täiustatud HTML mallid, mida me näitame kasutajale, kui ta külastab kindlat URL-i.

Siin on meie "rakenduse" karkass:

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

//KÕIK ÜKSIKUD KOODID KIRJUTAME SIIN

$f3->run();

Siin on kõik, mida tuleb alguseks teada. Alustame koodimist!

[arendamiseks kasutasin lokaalsed XAMPP Windowsil ja VS Code'i, artikkel on kirjutatud Nooshenes]

Esileht

Alustame esilehega. Loogiliselt, eks?

//Файл: index.php

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

Nüüd tuleb see mall kirjutada. Lihtsuse huvides kasutasin Bootstrap v5 alpha.

Ärge unustage luua kõik mallid kausta ui, vastasel juhul nad ei ole raamistikule

<!-- Файл: 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>Kirjutame (koodi), lühendame (linke)!</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="#">Avaleht</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Artikkel Habrus</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Loome</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Lühikesed lingid on juba siin.</h1>

        <!-- Будем отправлять данные POST-запросом на /newLink -->
        <form class="mt-5 mb-3" action="/et/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">Sisesta link:</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">Lühenda!</button>
                </div>
            </div>
        <input type="hidden" name="trp-form-language" value="et"/></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">Valmistatud <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="armastusega">, <a href="https://v5.getbootstrap.com/">viienda Bootstrap'iga</a>    ja <a href="https://fatfreeframework.com/">ilma rasvata</a></footer>
        </div>
    </body>
</html>

Nüüd on kõik, esileht on juba tööle pandud. Vorm saadab POST-päringuga lingi, mida tuleb lühendada.
Nüüd on kõige huvitavam (mitte).

Töö andmebaasiga

Loo andmebaas — MySQL. Kui teil on PhpMyAdmin installitud, looge uus andmebaas "linker", ja siis täitke see 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`);

Iga linki jaoks on meil 3 väljad:

  1. Code — need on juhuslikud 4 tähte pärast domeeni, mille järgi toimub suunamine, vormis example.com/ABC1
  2. Link — Mittekärbitud link.
  3. Hits — klikkide arv lühendatud lingil.

Räägin lühidalt andmebaasiga töötamise põhimõttest, ilma liigse infota.

set('result', $db->exec('SELECT * FROM wherever')); 
// need on mallides saadaval, nagu 

// Või saate kasutada sisseehitatud SQL Mapper'i:
$row = new DBSQLMapper($db, 'links');

$row->load(array('link="https://habrahabr.ru"')); // nüüd on sellest objektist ligipääsetavad kõik read, kus link on Habra:
$row_value = $row->somerow; // Nii on

// Loomulikult saab väärtusi muuta:
$row->link = 'https://habr.com';
$row->save(); // muudatused tuleb salvestada, mida te arvasite

// rohkem teavet andmebaasiga töötamise kohta on saadaval siin: https://a.nikonovs.ru/MPHR Soovitan tungivalt lugeda, vähemalt tõlkija kaudu, mis on brauserisse sisse ehitatud.
?>

Alustame lühendamist.

Uue lingi töötlemine

Loome uue vaate index’is, mis töötleb päringu peamise lehe vormist.

Esiteks loome uue, kuid väga sarnase esimesele (home.htm) mallile — "newLink.htm".
Siin kuvame lühendatud lingi ja selle järgi tehtud kliki arvu (kui soovite jälle seda "statistikat" näha, tuleb sama link veel kord lühendada — aadress jääb samaks).
Kasutame selleks "muutujate ülemineku" trikki:

set('link', $shorted_link);
$view = new View;
echo $view->render('newLink.htm');
//nüüd saab шаблонis kasutada:

Siin on nimekiri 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>Kirjutame (koodi), lühendame (linke)!</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="/et/">Avaleht</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Artikkel Habrus</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Loome</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Lühikesed lingid on juba siin.</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">Lühendatud:</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">Sellele lingile mindi: ``</p>
        <input type="hidden" name="trp-form-language" value="et"/></form>

        <a href="/et/" class="mt-3 mb-5 btn btn-primary btn-lg">TAGASI PEAMC PEREMEHELE</a>

        <footer class="m-2">Valmistatud <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="armastusega">, <a href="https://v5.getbootstrap.com/">viienda Bootstrap'iga</a>    ja <a href="https://fatfreeframework.com/">ilma rasvata</a></footer>
        </div>
    </body>
</html>

Kirjutame ise marsruudi.

$f3->route('GET|POST /newLink', ////me töötleme nii POSTi kui ka GETi
    function($f3) {

            $db = new DBSQL( ////Uus DB ühendamine igas Routingus
                'mysql:host=localhost;port=3306;dbname=linker',
                'root',
                ''
            );

            ////tohutu funktsioon juhuslike märkide genereerimiseks:
            $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; ////kui link kordub, näitame vana koodi
            }

            $short_link = 'https://'. $_SERVER['HTTP_HOST'] . '/' . $g_code; ////koondame lõpliku lingi

            ////$_POST parameetreid saab hankida $f3->get('POST') abil, toetatakse punktmärgistust (palun parandage, kui helistan valele): parameeter "link" saab olema: 
            $link = $f3->get('POST.link');

            if ( !empty($f3->get('POST')) ) { ////Konto HTML-i jagamiseks, ainult kui POST ei ole tühi.

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

            } else { ////vastasel juhul - suunamine peamisele lehele
                $f3->$f3->reroute('/');
            }

        }
);

Valmis! Tegelikult oli see lihtne.

Suunamine

Asi on jäänud väheks:

  1. Saada parameeter URL-st
  2. Kontrollida selle olemasolu andmebaasis
  3. Saada andmebaasist vastav link
  4. Suunata kasutaja
  5. Kasum!

Jätkame koodi kirjutamist pärast eelmist marsruuti.

$f3->route('GET /@code', // määrame parameetri pärast "@", see satub PARAMS
    function($f3) {

        // määrame $db uuesti
        $db = new DBSQL(
            'mysql:host=localhost;port=3306;dbname=linker',
            'root',
            ''
        );

        $code = $f3->get('PARAMS.code'); // saame parameetri

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

        // kui saame linki andmebaasist - saame selle, suurendame külastuste arvu ja suuname edasi
        if ($link->load(array('code="'.$code.'"', 'link=?'))) {
            $link->hits++;
            $link->save();

            $f3->reroute($link->link);
        } else {
            $f3->reroute('/'); // kui sellist linki ei ole - olete oodatud peamisele
        }
    }
);

Olete võinud tähele panna, et nii marsruudis newLink, ja ülaltoodud marsruudis määratakse sama — kuna code võib kattuda "newLink"-iga (see ei saa, genereerijal on ainult suured tähed), aga kuna see on esimesena määratud, täidetakse see ka esimesena.

$f3→run()!

Aitäh lugemise eest!
Mul oleks hea meel, kui kirjutaksite kommentaari ja parandaksite, kui midagi on valesti.

Kodus tööna või autori (minu) laiskuse tõendina jätan ülesande nimekirja, mida teha. Lõppude lõpuks on parem õppida praktikas!

  • See on muidugi ebatõenäoline, kuid genereerimisel $g_code võib korduda, nii et soovitan kirjutada funktsiooni, mis seda kontrollib.
  • Samuti võiks teha normaalse statistika ja kuvada seda üleminekute põhjal /@code/stats
  • Keelata linkide loomine teenusele lühendamise teenus, luua nimekiri "kaitstud" ressursidest, mis ei saa lühendatud

  • Soovitan tungivalt ka sellisel väiksel asjal sisendi valideerimist nii kliendi kui serveri küljelt, koos vastavate vigade esitamisega, ei tasu loota, et piisab required atribuudist ja type=„url” sisendi väljale lisamisest.
    RedComrade

  • Pakkuge kommentaarides...

    Olen kohal)

Allikas: habr.com

Osta usaldusväärne veebihosting DDoS kaitsega, VPS VDS serverid 🔥 Osta usaldusväärne veebihosting DDoS kaitsega, VPS VDS serverid | ProHoster