ProHoster > Blog > Administrim > Shkurtojmë lidhjet pa yndyrë (F3)

Shkurtojmë lidhjet pa yndyrë (F3)

Shkurtojmë lidhjet pa yndyrë (F3)

Të shkurtojmë lidhjet për 13 vjet nuk është turp, apo? Një fillestar, madje dhe ndonjëherë një jo-fillestar, shfrytëzon mundësinë të krijojë Ujësjellësin e lidhjeve të tij, duke studiuar ndonjë kornizë të re. Kështu, unë kam fillsuar. Çfarë të them — vërtet një Bootstrap i pestë, një kornizë e thatë dhe një copë shpirt.

Ja demo, dhe këtu kod. Për lexues të tillë si unë 😉

Kornizë, apo jo?

Sigurisht që nuk është Laravel dhe të ngjashme — sot do të bëjmë me 65 kilobajtë FatFreeFramework. Nëse e njihni Python Flask, do të keni ndjesinë se diku e keni parë këtë:

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

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

Mire, harroje. Shkarkojmë .zip nga faqja zyrtare, e zbërthejmë në dosjen, e cila për këtë çast hapet në Editorin tuaj të Kodit të Preferuar. Pastroni index.php dhe fshini gjithçka nga /ui.

Këtu gjithçka është tejet e thjeshtë — në dosjen ui kemi të gjitha Pamjet, dhe për ta thënë në mënyrë të thjeshtë — ëngjillë të përmirësuara HTML, të cilat do t'i tregojmë përdoruesit kur të hyjë në një URL të caktuar.

Këtu është skeleti i 'aplikacionit' tonë:

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

// Të gjithë kodin tjetër do ta shkruajmë këtu

$f3->run();

Këtu është gjithçka që duhet të dini për të filluar. Le të fillojmë me kodin!

[për zhvillim kam përdorur lokal XAMPP në Windows dhe VS Code, artikulli është shkruar në Notion]

Homepage

Të fillojmë me faqen kryesore. Logjikisht, apo jo?

//Файл: index.php

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

Tani duhet të shkruajmë këtë të njëjtë model. Për thjeshtësinë kam përdorur bootstrap v5 alpha.

Mos harroni të krijoni të gjitha modelet në dosjen ui, ndryshe ato nuk do të nuk i shohin kornizës

<!-- Файл: 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>Shkruajmë (kod), shkurtojmë (linket)!</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="#">Kryesore</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Artikull në Habrë</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Krijuesi</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Linket e shkurtra janë këtu.</h1>

        <!-- Будем отправлять данные POST-запросом на /newLink -->
        <form class="mt-5 mb-3" action="/sq/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">Vendos linkun:</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">Shkurto!</button>
                </div>
            </div>
        <input type="hidden" name="trp-form-language" value="sq"/></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">Bërë me <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="me dashuri">, <a href="https://v5.getbootstrap.com/">Bootstrapin e pestë</a>    dhe <a href="https://fatfreeframework.com/">pa yndyrë</a></footer>
        </div>
    </body>
</html>

Këtu është dhe gjithçka, faqja jonë kryesore tashmë funksionon. Forma dërgon një kërkesë POST me lidhjen që duhet të shkurtosh.
Tani është pjesa më interesante (jo).

Puna me DB

Të krijojmë DB — MySQL. Nëse keni instaluar PhpMyAdmin, krijoni një DB të re 'linker', dhe pastaj ekzekutoni këtë 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`);

Ne do të kemi 3 fusha për çdo lidhje:

  1. Code — këto janë 4 karaktere rastësore pas domainit, me të cilat do të bëhet ridrejtimi, si example.com/ABC1
  2. Link — lidhja origjinale. Hits — numri i klikuar i lidhjes së shkurtuar.
  3. Në mënyrë të shpejtë do të përshkruaj funksionimin me DB, pa yndyrë.

Кратко расскажу принцип работы с БД, без жира.

set('result', $db->exec('SELECT * FROM wherever')); 
// ato do të jenë të arritshme në shabllone, si 

// Ose mund të përdorni SQL Mapper-in e ndërtuar:
$row = new DBSQLMapper($db, 'links');

$row->load(array('link="https://habrahabr.ru"')); // tani nga ky objekt janë të arritshme të gjitha kolonat e rreshtit, ku lidhja është në Habr:
$row_value = $row->somerow; // Ja si

// Natyrisht, mund të ndryshoni vlerat:
$row->link = 'https://habr.com';
$row->save(); // ndryshimet duhen ruajtur, çfarë mendonit

// më shumë informacion rreth punës me DB është i disponueshëm këtu: https://a.nikonovs.ru/MPHR E rekomandoj të lexoni, ndonjëherë me ndihmën e përkthyesit, të ndërtuar në shfletues.
?>

Të fillojmë me Shkurtimin.

Përpunimi i një lidhjeje të re

Krijojmë një Vështrim të ri në index, e cila do të trajtojë kërkesën nga forma në faqen kryesore.

Së pari, do të krijojmë një shabllon të ri, por shumë të ngjashëm me të parin (home.htm) — "newLink.htm".
Atje do të nxjerrim lidhjen e shkurtuar dhe numrin e kalimeve për të (nëse dëshironi të shihni përsëri këtë "statistikë", duhet të shkurtni përsëri këtë lidhje — adresa do të mbetet e njëjtë).
Për të nxjerrë do të përdorim një truk me "kalimin e variablave":

set('link', $shorted_link);
$view = new View;
echo $view->render('newLink.htm');
// tani në shabllon mund të përdorni:

Ja dhe listing-u 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>Shkruajmë (kod), shkurtojmë (linket)!</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="/sq/">Kryesore</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Artikull në Habrë</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Krijuesi</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Linket e shkurtra janë këtu.</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">I shkurtuar:</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">Kjo lidhje u hap: ``</p>
        <input type="hidden" name="trp-form-language" value="sq"/></form>

        <a href="/sq/" class="mt-3 mb-5 btn btn-primary btn-lg">Kthehu në kryefaqe</a>

        <footer class="m-2">Bërë me <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="me dashuri">, <a href="https://v5.getbootstrap.com/">Bootstrapin e pestë</a>    dhe <a href="https://fatfreeframework.com/">pa yndyrë</a></footer>
        </div>
    </body>
</html>

Shkruajmë rrugën vetë.

$f3->route('GET|POST /newLink', // ne do të përpunojmë sowohl POST dhe GET
    function($f3) {

            $db = new DBSQL( // Këtu lidhemi me DB-në e re në çdo Rute
                'mysql:host=localhost;port=3306;dbname=linker',
                'root',
                ''
            );

            // një funksion i shkëlqyer për gjenerimin e karaktereve të rastësishme:
            $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; // nëse linku përsëritet, atëherë tregojmë kodin e vjetër
            }

            $short_link = 'https://'. $_SERVER['HTTP_HOST'] . '/' . $g_code; // grumbullojmë linkun përfundimtar

            // parametrat nga $_POST mund të merren me anë të $f3->get('POST'), mbështetet nota pikësore (ndreqni nëse po flas gabim): parametri "link" mund të merret kështu:
            $link = $f3->get('POST.link');

            if ( !empty($f3->get('POST')) ) { // Shfaqim HTML, vetëm nëse POST-i nuk është bosh.

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

            } else { // përndryshe - ridrejtojmë në kryefaqe
                $f3->$f3->reroute('/');
            }

        }
);

Kot! Në të vërtetë, ishte e thjeshtë.

Ridrejtimi

Këtu është detyra e mbetur:

  1. Merrni parametrin nga URL
  2. Kontrolloni praninë e tij në DB
  3. Merrni linkun përkatës nga DB
  4. Ridrejtoni përdoruesin
  5. Fitim!

Vazhdojmë të shkruajmë kodin pas Rrugës së kaluar.

$f3->route('GET /@code', // Specify the parameter after "@", it will go to 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 we can get the link from the DB - we get it, increase the hits count 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 the route newLink, and in the route above, one and the same is defined — after all, code it may coincide with "newLink" (it cannot, in the generator only uppercase letters), but since it is defined first, it will execute first.

$f3->run()!

Faleminderit që e lexuat!
I would be happy if you write a comment and correct me if something is wrong.

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

  • Of course, this is unlikely, but during generation $g_code may repeat, so I suggest you write a function that will check this.
  • You can also make proper statistics and display it on transitions to /@code/stats
  • Prohibit creating links to the link shortening service itself, create a list of "protected" resources from shortening

  • I strongly recommend even in such a small matter to validate input on the server side, with corresponding error outputs; don't rely on just adding the required attribute and type="url" to the input field.
    RedComrade

  • Suggest in the comments...

    In touch)

Burimi: habr.com

Blini hosting të besueshëm për faqe interneti me mbrojtje nga DDoS, serverë VPS VDS 🔥 Blini hosting të besueshëm për faqe interneti me mbrojtje nga DDoS, serverë VPS VDS | ProHoster