ProHoster > blog > administrasi > Memperpendek tautan tanpa lemak (F3)

Memperpendek tautan tanpa lemak (F3)

Memperpendek tautan tanpa lemak (F3)

Tidak ada salahnya memperpendek link di angka 13 kan? Seorang pemula, dan bukan hanya pemula, harus mencoba menulis Link Tamernya sendiri sambil mempelajari beberapa kerangka kerja baru. Itulah yang saya lakukan. Apa yang bisa saya katakan - bootstrap kelima, kerangka rendah lemak dan sepotong jiwa.

di sini adalah demonstrasi, Tapi kode. Untuk pembaca seperti saya 😉

Kerangka kerja, bukan?

Tentu saja bukan Laravel dan sejenisnya - hari ini kita akan puas dengan 65 kilobyte Kerangka Kerja Bebas Lemak. Jika Anda familiar dengan Python Flask, Anda akan merasa bahwa hal ini telah dilakukan di suatu tempat:

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

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

Oke, lupakan saja. Unduh .zip dari luar lokasi, buka paketnya ke dalam folder, yang pada saat yang sama terbuka di Editor Kode Favorit Anda. Jernih index.php dan hapus semuanya /ui.

Semuanya di sini sangat sederhana - di dalam folder ui Kami memiliki semua Tampilan, atau, sederhananya, templat HTML yang ditingkatkan yang akan kami tampilkan kepada pengguna ketika mereka mengunjungi URL tertentu.

Berikut adalah kerangka "aplikasi" kami:

<?php
//Файл: index.php

// Kickstart the framework
$f3=require('lib/base.php');
$f3->set('DEBUG', 1);
if ((float)PCRE_VERSION<8.0)
    trigger_error('PCRE version is out of date');
$f3->config('config.ini');

//ВЕСЬ ОСТАЛЬНОЙ КОД БУДЕМ ПИСАТЬ ЗДЕСЬ

$f3->run();

Itu saja yang perlu Anda ketahui untuk memulai. Mari mulai membuat kode!

[untuk pengembangan saya menggunakan lokal XAMPP pada Windows dan Kode VS, artikel yang ditulis dalam Noushen]

Beranda

Mari kita mulai dengan halaman utama. Logis, bukan?

//Файл: index.php

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

Sekarang Anda perlu menulis template ini. Untuk kesederhanaan saya menggunakan bootstrap v5 alfa.

Jangan lupa untuk membuat semua template yang ada di folder tersebut kamu, jika tidak, mereka tidak akan terlihat pada kerangka

<!-- Файл: 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>Пишем (код), сокращаем (ссылки)!</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="#">Главная</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Статья на Хабре</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Создатель</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Короткие ссылки уже здесь.</h1>

        <!-- Будем отправлять данные POST-запросом на /newLink -->
        <form class="mt-5 mb-3" action="/id/newLink/" method="POST">
            <div class="row justify-content-center">
                <div class="col-auto">
                <label for="inputLink" class="col-form-label">Введи ссылку:</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">Сократить!</button>
                </div>
            </div>
        </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">Сделано с <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="любовью">, <a href="https://v5.getbootstrap.com/">пятым Bootstrap'ом</a>    и <a href="https://fatfreeframework.com/">без жира</a></footer>
        </div>
    </body>
</html>

Itu saja, halaman utama kami sudah berfungsi. Formulir mengirimkan permintaan POST dengan tautan yang perlu dipersingkat.
Sekarang sampai pada bagian yang menyenangkan (tidak).

Bekerja dengan basis data

Mari membuat database - MySQL. Jika sudah terinstal PhpMyAdmin, buatlah database baru"linker" lalu jalankan SQL ini:

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

Kami akan memiliki 3 bidang untuk setiap tautan:

  1. Kode adalah 4 karakter acak setelah domain yang akan dilalui pengalihan, misalnya contoh.com/ABC1
  2. Tautan - Tidak dipersingkat tautannya.
  3. Hits - jumlah klik pada tautan yang diperpendek.

Saya akan memberi tahu Anda secara singkat prinsip bekerja dengan database, tanpa lemak.

<?php
//сначала нужно подключиться к БД
$db = new DBSQL(
    'mysql:host=localhost;port=3306;dbname=linker',
    'root',
    ''
);

//Дальше есть два варианда работы с данными:

//Можно установить переменную в Фреймворк c помощью обычного SQL-запроса:
$f3->set('result', $db->exec('SELECT * FROM wherever')); 
//они будут доступны в шаблонах, как <?= $resul ? >

//А можно использовать встроенный SQL Mapper:
$row = new DBSQLMapper($db, 'links');

$row->load(array('link="https://habrahabr.ru"')); //теперь из этого объекта доступны все колонки строки, где ссылка на Хабр:
$row_value = $row->somerow; //Вот так

// Естесственно можно изменять значения:
$row->link = 'https://habr.com';
$row->save(); //изменения нужно сохранить, а что вы думали

// больше информации по работе с БД доступно здесь: https://a.nikonovs.ru/MPHR Настоятельно рекомендую прочитать, хотябы с помощью переводчика, встроенного в браузер.
?>

Mari kita mulai memperpendek.

Memproses tautan baru

Buat Tampilan baru di indeks, yang akan memproses permintaan dari formulir di halaman utama.

Pertama, mari kita buat template baru, namun sangat mirip dengan template pertama (home.htm) - "tautan baru.htm".
Di sana kami akan menampilkan tautan yang sudah diperpendek dan jumlah kliknya (untuk melihat "statistik" ini lagi, Anda perlu mempersingkat tautan yang sama lagi - alamatnya akan tetap sama).
Untuk menghasilkan output, kita akan menggunakan trik “pengoperan variabel”:

<?php
//Файл: нет (пример)

//устанавливаем переменную в index'е и рендерим шаблон
$f3->set('link', $shorted_link);
$view = new View;
echo $view->render('newLink.htm');
//теперь в шаблоне можно использовать:
<?= $link ?>

Dan inilah daftarnya Tautan baru.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>Пишем (код), сокращаем (ссылки)!</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="/id/">Главная</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Статья на Хабре</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nikonovs.ru">Создатель</a>
                </li>
            </ul>
        </nav>

        <div class="container">
        <h1>Короткие ссылки уже здесь.</h1>

        <!-- Убираем из формы функционал формы и выводим переменные -->
        <form class="mt-5 mb-3">
            <div class="row justify-content-center">
                <div class="col-auto">
                    <label for="inputLink" class="col-form-label">Сократили:</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">По этой ссылке перешли: `<?= $hits ?>`</p>
        </form>

        <a href="/id/" class="mt-3 mb-5 btn btn-primary btn-lg">ВЕРНУТЬСЯ НА ГЛАВНУЮ</a>

        <footer class="m-2">Сделано с <img width="20" height="20" src="https://image.flaticon.com/icons/svg/833/833472.svg" alt="любовью">, <a href="https://v5.getbootstrap.com/">пятым Bootstrap'ом</a>    и <a href="https://fatfreeframework.com/">без жира</a></footer>
        </div>
    </body>
</html>

Kami menulis rute itu sendiri.

$f3->route('GET|POST /newLink', //мы будем обрабатывать и POST и GET
    function($f3) {

            $db = new DBSQL( //Подключение к БД новое в каждом Роуте
                'mysql:host=localhost;port=3306;dbname=linker',
                'root',
                ''
            );

            //прекрасная функция генерации радомных символов:
            $permitted_chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            function generate_string($input, $strength = 4) {
                $input_length = strlen($input);
                $random_string = '';
                for($i = 0; $i < $strength; $i++) {
                    $random_character = $input[mt_rand(0, $input_length - 1)];
                    $random_string .= $random_character;
                }

                return $random_string;
            }

            //проверка на повторение link - нам же не нужно чтобы каждый раз генерировались новые ссылки. link - уникальный.
            $check = new DBSQLMapper($db,'links');
            $check->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; //если link повторяется, то показываем старый код
            }

            $short_link = 'https://'. $_SERVER['HTTP_HOST'] . '/' . $g_code; //собираем конечную ссылку

            //параметры из $_POST можно получить с помощью $f3->get('POST'), поддерживается точечная нотация (поправьте, если неправильно называю): параметр "link" можно получить так: 
            $link = $f3->get('POST.link');

            if ( !empty($f3->get('POST')) ) { //Выдаем HTML, только если POST не пустой.

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

            } else { //иначе - редирект на главную
                $f3->$f3->reroute('/');
            }

        }
);

Siap! Sebenarnya itu sederhana.

Mengarahkan kembali

Tinggal sedikit lagi yang harus dilakukan:

  1. Dapatkan parameter dari URL
  2. Periksa keberadaannya di database
  3. Dapatkan tautan yang sesuai dari database
  4. Arahkan ulang pengguna
  5. Profit!

Kami terus menulis kode setelah Route terakhir.

$f3->route('GET /@code', //указываем параметр после "@", он попадет в PARAMS
    function($f3) {

        //снова определяем $db
        $db = new DBSQL(
            'mysql:host=localhost;port=3306;dbname=linker',
            'root',
            ''
        );

        $code = $f3->get('PARAMS.code'); //получаем параметр

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

        //если получается получить ссылку из БД - получаем, увеличиваем количество переходов и перенаправляем
        if ($link->load(array('code="'.$code.'"', 'link=?'))) {
            $link->hits++;
            $link->save();

            $f3->reroute($link->link);
        } else {
            $f3->reroute('/'); //а если такой ссылки нет - милости просим на главную
        }
    }
);

Anda mungkin telah memperhatikan hal itu di dalam dan di rute Tautan baru, dan pada rute di atas hal yang sama akan ditentukan - lagipula kode mungkin cocok dengan "newLink" (tidak bisa, generator hanya berisi huruf besar), tetapi karena ditentukan terlebih dahulu, maka akan dieksekusi terlebih dahulu.

$f3→jalankan()!

Terima kasih sudah membaca!
Saya akan senang jika Anda menulis komentar dan mengoreksi saya jika ada yang salah.

Dan sebagai pekerjaan rumah atau bukti kemalasan penulis (saya), saya tinggalkan daftar apa yang bisa dilakukan. Lebih baik belajar sambil melakukan!

  • Ini tentu saja tidak mungkin terjadi, tetapi ketika menghasilkan $g_kode mungkin terjadi lagi, jadi saya sarankan Anda menulis fungsi yang akan memeriksa hal ini.
  • Anda juga dapat membuat statistik normal dan menampilkannya setelah beralih ke /@kode/statistik
  • Larang pembuatan tautan ke layanan pemendekan tautan itu sendiri, buat daftar sumber daya yang “dilindungi” dari pemendekan

  • Saya sangat menyarankan bahwa bahkan dalam masalah sekecil itu, Anda melakukan validasi input di sisi server, dengan kesalahan terkait yang ditampilkan, Anda tidak boleh mengandalkan penambahan atribut yang diperlukan dan mengetik = “url” ke kolom input
    Kamerad Merah

  • Sarankan di komentar...

    Berhubungan)

Sumber: www.habr.com

Tambah komentar