ProHoster > Blog > Administrimi > Shkurtëzojmë lidhjet pa yndyrë (F3)

Shkurtëzojmë lidhjet pa yndyrë (F3)

Shkurtëzojmë lidhjet pa yndyrë (F3)

Nuk është turp të shkurtohen lidhjet në 13 vjet, apo jo? Një fillestar, dhe jo vetëm ai, duhet të provojë të shkruajë vetë Ujkun e Lidhjeve ndërsa mëson ndonjë kuadër të ri. Kështu që fillova. Çfarë të them — Bootstrap i pestë, një kuadër i lehtë dhe një copë shpirt.

Këtu është demo, kështu që kod. Për lexues të tillë si unë 😉

Kuadri, apo jo?

Sigurisht që nuk është Laravel dhe të ngjashme - sot do t’i përballojmë 65 kilobajtët. FatFreeFramework. Nëse je i njohur me Python Flask, do të ndihesh si të kishe qenë që andej:

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

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

Mirë, harroje. Shkarko .zip nga faqja zyrtare, ç'ka del në një dosje, e cila hapet menjëherë në Editorin tënd të Preferuar të Kodit. Pastroni index.php dhe fshini gjithçka nga /ui.

Këtu gjithçka është shumë e thjeshtë - në dosjen ui kemi të gjithë Pamjet, dhe nëse e thjeshtojmë - template të përmirësuara HTML, të cilat do t’i tregojmë përdoruesit kur ai hyn në një URL të caktuar.

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

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

// TË GJITHA KODET E TJERA DO TË SHKRUHEN KËTU

$f3->run();

Kjo është e gjitha që duhet të dish për të filluar. Të fillojmë me kodimin!

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

Faqja kryesore

Le 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 ta shkruajmë këtë template. Për thjeshtësi kam përdorur bootstrap v5 alpha.

Mos harro të krijosh të gjitha template në dosjen ui, ndryshe ato nuk do të do të duken për kuadrin

<!-- Файл: 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="#">Kreu</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Artikulli 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>Link të shkurtra tashmë 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">Fut 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">Shkurt!</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>

Kjo është gjithçka, kemi tashmë faqen kryesore në funksion. Forma dërgon një kërkesë POST me lidhjen që duhet shkurtohet.
Tani vjen pjesa më interesante (jo).

Puna me DB

Le të krijojmë BD-në - MySQL. Nëse ke instaluar PhpMyAdmin, krijo një BD të re "linker" dhe pastaj ekzekuto 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`);

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

  1. Code - këto janë 4 karaktere të rastësishme pas domenit, mbi të cilat do të bëhet ridrejtimi, si example.com/ABC1
  2. Link - Lidhja e pa shkurtuar. Hits - numri i kalimeve në lidhjen e shkurtruar.
  3. Të flasim shkurt për parimin e punës me BD-në, pa shtesë.

set('result', $db->exec('SELECT * FROM wherever')); //ato do të jenë në dispozicion në template, si//Ose mund të përdorësh SQL Mapper-in e ndërtuar: $row = new DBSQLMapper($db, 'links');$row->load(array('link="https://habrahabr.ru"')); // tani nga ky objekt janë të gjitha kolonat e rreshtit, ku lidhja është në Habr: $row_value = $row->somerow; // kështu// Natyrisht mund të ndryshosh vlerat: $row->link = 'https://habr.com'; $row->save(); // ndërrimet duhet të ruhen, çfarë mendove// më shumë informacione për punën me BD-në mund të gjesh këtu: https://a.nikonovs.ru/MPHR E rekomandoj të lexohet, ndoshta me ndihmën e përkthyesit të ndërtuar në shfletues. ?>

set('result', $db->exec('SELECT * FROM wherever')); 
// ato do të jenë të aksesueshme 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ë aksesueshme 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 duhet të ruhen, çfarë keni menduar

// më shumë informacion rreth punës me bazat e të dhënave është e disponueshme këtu: https://a.nikonovs.ru/MPHR Këshilloj të lexoni, edhe me ndihmën e përkthyesit të integruar në shfletues.
?>

Le të fillojmë me Shkurtimin.

Përpunimi i një lidhjeje të re.

Krijojmë një Pamje të re në index’e, e cila do të përpunojë kërkesën nga forma në faqen kryesore.

Së pari krijojmë një të ri, por shumë të ngjashëm me të parin (home.htm) template - "newLink.htm".
Aty ne do të tregojmë tashmë lidhjen e shkurtuar dhe numrin e kalimeve për të (për të parë këtë "statistikë" përsëri, duhet ta shkurtojmë përsëri këtë lidhje - adresa do të mbetet e njëjtë).
Për shfaqjen do të përdorim një mashtrim me "kalimin e variablave":

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

Ja rendisti 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/">Kreu</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Artikulli 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>Link të shkurtra tashmë 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">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">Për këtë lidhje kaluan: ``</p>
        <input type="hidden" name="trp-form-language" value="sq"/></form>

        <a href="/sq/" class="mt-3 mb-5 btn btn-primary btn-lg">KTHEHUNI NË FAKULTETIN KRYESOR</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>

Përgatitim vetë rrugën.

$f3->route('GET|POST /newLink',  // do_handle both POST and GET
    function($f3) {

            $db = new DBSQL(  //New DB connection in each Route
                'mysql:host=localhost;port=3306;dbname=linker',
                'root',
                ''
            );

            //great function to generate random characters:
            $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;  //if link is duplicated, show the old code
            }

            $short_link = 'https://'. $_SERVER['HTTP_HOST'] . '/' . $g_code;  //build the final link

            //Get parameters from $_POST using $f3->get('POST'), dot notation supported (correct me if I'm wrong): parameter "link" can be retrieved as: 
            $link = $f3->get('POST.link');

            if ( !empty($f3->get('POST')) ) {  //Provide HTML only if POST is not empty.

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

            } else {  //otherwise - redirect to the main page
                $f3->$f3->reroute('/');
            }

        }
);

Këtu! Në të vërtetë, ishte e thjeshtë.

Ridrejtimi

Pjesa e mbetur është e vogël:

  1. Merrni parametrin nga URL
  2. Kontrolloni nëse ekziston në Baza e të Dhënave
  3. Merrni lidhjen përkatëse nga Baza e të Dhënave
  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 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 we can get the link from the DB - we get it, increase the number of hits and redirect
        if ($link->load(array('code="'.$code.'"', 'link=?'))) {
            $link->hits++;
            $link->save();

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

Mund të keni vënë re se në rrugën newLink, dhe në rrugën më lart, do të përcaktohet e njëjta - pasi kode mund të përputhet me "newLink" (nuk mundet, në gjenerator janë vetëm shkronja të mëdha), por pasi ai është përcaktuar i pari, ai do të ekzekutohet i pari.

$f3→run()!

Faleminderit për leximin!
Do të gëzohem nëse shkruani një komentar dhe më korrigjoni nëse diçka nuk shkon.

Dhe si detyrë shtëpie ose si dëshmi e lenes së autorit (më), po lë një listë se çfarë mund të bëni. Në fund të fundit, më mirë të mësoni në praktike!

  • Kjo në të vërtetë është e pakontrollueshme, por gjatë gjenerimit $g_code mund të përsëritet, kështu që ju rekomandoj të shkruani një funksion që e kontrollon këtë.
  • Gjithashtu, mund të bëni statistikë të duhur dhe ta tregoni atë për çdo kalim në /@code/stats
  • Ndalo krijimin e lidhjeve për shërbimin e shkurtimeve të lidhjeve, krijoni një listë "të mbrojtura" nga shkurtimi i burimeve

  • Rrekohet fort që edhe në një punë të vogël të bëni validimin e inputit edhe nga ana e serverit, me tregimin e gabimeve përkatëse, nuk duhej të mbështeteshit në shtimin e atributit required dhe tipin type=«url» te fusha e inputit
    RedComrade

  • Propozoni në komente...

    Me kontakte)

Burimi: habr.com

Bleni hostim të besueshëm për faqe me mbrojtje nga DDoS, serverë VPS VDS 🔥 Bleni hostim të besueshëm për faqe me mbrojtje nga DDoS, serverë VPS VDS | ProHoster