ProHoster > Blogi > Haldamine > Lühenenud lingid ilma üleliigsuseta (F3)

Lühenenud lingid ilma üleliigsuseta (F3)

Lühenenud lingid ilma üleliigsuseta (F3)

Linkide lühendamine 13 aastat pole ju häbi, eks? Algajale, ja mitte ainult algajale, tasub proovida kirjutada oma Linkide Tõukerull, õppides samas mõnda uut raamistiku. Just sellega ma tegelegi. Mida öelda — viies Bootstrap, lahjendatud raamistik ja natuke hinge.

Siin demo, aga koodi. Selliste lugejate jaoks nagu mina 😉

Raamistik, eks?

Muidugi mitte Laravel ja selle sarnased — täna jääme 65 kilobaiti kokku. FatFreeFramework. Kui olete tuttav Python Flaskiga, siis tekib tunne, et see on kuskil juba olnud:

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

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

Olgu, unustage. Laadige alla .zip ametlikult kodulehelt, pakendage lahti kausta, mis just selle hetkest avaneb teie Lemmik Koodiredaktoris. Puhastage index.php ja kustutage kõik sellest /ui.

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

Siin on meie "rakenduse" karkass:

<?php
//Fail: index.php

// Alustame raamistiku
$f3=require('lib/base.php');
$f3->set('DEBUG', 1);
if ((float)PCRE_VERSION<8.0)
    trigger_error('PCRE versioon on aegunud');
$f3->config('config.ini');

// KÕIK ÜLEJÄÄNUD KOOD KIRJUTAME SIIN

$f3->run();

See ongi kõik, mida peate alguseks teadma. Asume kodeerimisega!

[arendamiseks kasutasin kohaliku XAMPP Windowsil ja VS Code'i, artikkel on kirjutatud Notionis]

Koduleht

Alustame pea lehega. Loogiline, eks?

//Файл: index.php

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

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

Ärge unustage luua kõik mallid kaustas ui, vastasel juhul ei kuvatakse ole nad 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 (lingid)!</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 Habr</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Loja</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">Tehtud koos <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äete, meie pea leht juba töötab. Vorm saatab POST-päringuga lingi, mida tuleb lühendada.
Nüüd kõige huvitavam (ei).

Töötamine BDs

Loome DB — MySQL. Kui teil on installitud PhpMyAdmin, siis looge uus DB "linker", ja seejärel 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`);

Meil on igal lingil 3 põldu:

  1. Code — need on juhuslikud 4 tähte pärast domeeni, mille alusel toimub ümbersuunamine, kujul example.com/ABC1
  2. Link — Lühendamata link.
  3. Hits — lühendatud lingi külastuste arv.

Lühidalt tutvustan andmebaasi töötamise põhimõtteid, ilma lisarohenduseta.

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

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

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

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

// Rohkem teavet andmebaasidega töötamise kohta on saadaval siin: https://a.nikonovs.ru/MPHR Soovitan tungivalt lugeda, kuigi vähemalt brauseri sisseehitatud tõlkija abil.
?>

Alustame linkide lühendamist.

Uue lingi töötlemine

Loome uue vaate index'is, mis käsitleb taotlust vormist peamiseks leheks.

Esiteks loome uue, kuid väga sarnase esimese (home.htm) malliga — "newLink.htm".
Seal kuvame juba lühendatud lingi ja klikkide arvu sellel (et uuesti "statistikat" näha, tuleb sama link uuesti lühendada — aadress jääb samaks).
Kuvamiseks kasutame "muutujate ülekande" trikki:

set('link', $shorted_link);
$view = new View;
echo $view->render('newLink.htm');
// nüüd saab mallis kasutada:

Ja siin on loetelu 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 (lingid)!</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 Habr</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Loja</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 AVALEHELE</a>

        <footer class="m-2">Tehtud koos <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 POST kui GET
    function($f3) {

            $db = new DBSQL( // Andmebaasi ühendamine on uus igas ruteerimises
                'mysql:host=localhost;port=3306;dbname=linker',
                'root',
                ''
            );

            // suurepärane funktsioon juhuslike symbolite 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, siis näitame vana koodi
            }

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

            // postituse parameetrid on saadaval $f3->get('POST') kaudu, toetatakse punktmärgendit (parandage, kui nimetan valesti): parameeter "link" on võimalik saada nii: 
            $link = $f3->get('POST.link');

            if ( !empty($f3->get('POST')) ) { // Väljastame HTML, 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 { // muidu - suunamine peamisele
                $f3->$f3->reroute('/');
            }

        }
);

Valmis! Tegelikult oli see lihtne.

Suunamine

Töö on jäänud veel teha:

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

Jätkame koodi kirjutamist pärast eelmist ruteerimist.

$f3->route('GET /@code', // specify the parameter after "@", it will go into PARAMS
    function($f3) {

        // again define $db
        $db = new DBSQL(
            'mysql:host=localhost;port=3306;dbname=linker',
            'root',
            ''
        );

        $code = $f3->get('PARAMS.code'); // get the parameter

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

        // if it is possible to get the link from the DB - get it, increase the number of transitions and redirect
        if ($link->load(array('code="'.$code.'"', 'link=?'))) {
            $link->hits++;
            $link->save();

            $f3->reroute($link->link);
        } else {
            $f3->reroute('/'); // if such a link does not exist - welcome to the main page
        }
    }
);

You may have noticed that in both the route newLink, and in the above route, it will be defined the same — after all, code it can coincide with "newLink" (it cannot, in the generator only uppercase letters), but since it is defined first, it will execute first.

$f3→run()!

Aitäh lugemise eest!
I would be happy if you wrote a comment, and corrected me if something is wrong.

And as a homework assignment or proof of the author's laziness (myself), I leave a list of what can be done. After all, it's better to learn through practice!

  • This is certainly unlikely, but during generation $g_code may repeat, so I suggest you write a function that checks for this.
  • You can also create proper statistics and display it for transitions to /@code/stats
  • Prohibit creating links to the shortening service itself, create a list of "protected" resources that are exempt from shortening

  • I strongly recommend even in such a small matter to validate input on the server side, with output of appropriate errors, do not rely on just adding a required attribute and type="url" to the input field
    RedComrade

  • Suggest in the comments…

    In touch)

Allikas: habr.com

Osta usaldusväärne hostimine veebilehtede jaoks DDoS-i kaitsega, VPS VDS serverid 🔥 Osta usaldusväärne hostimine veebilehtede jaoks DDoS-i kaitsega, VPS VDS serverid | ProHoster