Daar is geen skande om skakels op 13 te verkort nie, reg? 'n Beginner, en nie net 'n beginner nie, moet probeer om sy eie Link Tamer te skryf terwyl hy 'n nuwe raamwerk leer. Dit is wat ek gedoen het. Wat kan ek sê - die vyfde bootstrap, 'n lae-vet raamwerk en 'n stukkie siel.
Hier , en hier . Vir lesers soos ek 😉
Raamwerk, reg?
Natuurlik nie Laravel en dies meer nie - vandag sal ons klaarkom met 65 kilogrepe . As jy vertroud is met Python Flask, sal jy die gevoel kry dat dit reeds iewers gedoen is:
#роутинг во Фласке
@app.route('/')
def hello_world():
return 'Hello, World!'
//роутинг в Обезжиренном
$f3->route('GET /',
function() {
echo 'Hello, world!';
}
);Goed, vergeet dit. Aflaai , pak dit uit in 'n vouer, wat op dieselfde oomblik in jou gunstelingkode-redigeerder oopmaak. Duidelik index.php en verwyder alles van /ui.
Alles hier is uiters eenvoudig - in die gids ui Ons het alle aansigte, of, om dit eenvoudig te stel, opgegradeerde HTML-sjablone wat ons aan die gebruiker sal wys wanneer hulle 'n spesifieke URL besoek.
Hier is die skelet van ons "toepassing":
<?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();Dit is al wat jy moet weet om te begin. Kom ons begin kodering!
[vir ontwikkeling het ek plaaslik gebruik op Windows en VS-kode, ]tuisblad
Kom ons begin by die hoofblad. Logies, reg?
//Файл: index.php
$f3->route('GET /',
function($f3) { //чтобы использовать функции F3 передаем его в роут
$view = new View; // создаем вьюшку
echo $view->render('home.htm'); //рендерим шаблон
}
);Nou moet jy hierdie einste sjabloon skryf. Vir eenvoud het ek gebruik
Moenie vergeet om alle sjablone in die gids te skep nie huh, anders hulle sal nie sigbaar vir die raamwerk
<!-- Файл: 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="/af/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>Dit is al, ons hoofblad werk reeds. Die vorm stuur 'n POST-versoek met 'n skakel wat verkort moet word.
Nou kom die prettige deel (nie).
Werk met die databasis
Kom ons skep 'n databasis - MySQL. As jy PhpMyAdmin geïnstalleer het, skep dan 'n nuwe databasis "Skakels" en voer dan hierdie SQL uit:
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`);Ons sal 3 velde vir elke skakel hê:
- Kode is 'n ewekansige 4 karakters na die domein waardeur herleiding sal plaasvind, soos example.com/ABC1
- Skakel - Nie verkort nie skakel.
- Treffers - die aantal klikke op die verkorte skakel.
Ek sal jou kortliks vertel van die beginsel van werk met 'n databasis, sonder vet.
<?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 Настоятельно рекомендую прочитать, хотябы с помощью переводчика, встроенного в браузер.
?>Kom ons begin verkort.
Verwerk tans 'n nuwe skakel
Skep 'n nuwe aansig in indeks, wat die versoek vanaf die vorm op die hoofblad sal verwerk.
Kom ons skep eers 'n nuwe, maar baie soortgelyk aan die eerste (home.htm) sjabloon - "newLink.htm".
Daar sal ons die reeds verkorte skakel en die aantal klikke daarop vertoon (om hierdie "statistieke" weer te sien, moet jy dieselfde skakel weer verkort - die adres sal dieselfde bly).
Om die uitset te produseer, sal ons die truuk "veranderlike verbygaan" gebruik:
<?php
//Файл: нет (пример)
//устанавливаем переменную в index'е и рендерим шаблон
$f3->set('link', $shorted_link);
$view = new View;
echo $view->render('newLink.htm');
//теперь в шаблоне можно использовать:
<?= $link ?>En hier is die lys 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>Пишем (код), сокращаем (ссылки)!</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="/af/">Главная</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="/af/" 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>Ons skryf die roete self.
$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('/');
}
}
);Klaar! Eintlik was dit eenvoudig.
herlei
Daar is net 'n bietjie oor om te doen:
- Kry parameter vanaf URL
- Kontroleer die teenwoordigheid daarvan in die databasis
- Kry die ooreenstemmende skakel van die databasis
- Herlei gebruiker
- Wins!
Ons gaan voort om kode na die laaste roete te skryf.
$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('/'); //а если такой ссылки нет - милости просим на главную
}
}
);Jy het dit dalk in en in die roete opgemerk nuwe skakel, en in die roete hierbo sal dieselfde ding gedefinieer word - immers kan ooreenstem met "newLink" (dit kan nie, die kragopwekker bevat slegs hoofletters), maar aangesien dit eerste gedefinieer word, sal dit eerste uitgevoer word.
$f3→hardloop()!
Dankie vir die lees!
Ek sal bly wees as jy 'n opmerking skryf en my regstel as iets fout is.
En as huiswerk of bewys van die luiheid van die skrywer (ek), laat ek 'n lysie van wat gedoen kan word. Dit is beter om te leer deur te doen!
- Dit is natuurlik onwaarskynlik, maar wanneer genereer $g_kode kan weer gebeur, so ek stel voor dat jy 'n funksie skryf wat daarvoor sal kyk.
- Jy kan ook normale statistieke maak en dit vertoon nadat jy na oorgeskakel het /@kode/statistieke
- Verbied die skep van skakels na die skakelverkortingsdiens self, skep 'n lys van hulpbronne "beskerm" teen verkorting
-
Ek beveel sterk aan dat u, selfs in so 'n klein saak, invoervalidering aan die bedienerkant doen, met die ooreenstemmende foute vertoon, moet u nie staatmaak op die byvoeging van die vereiste kenmerk en tik = "url" by die invoerveld
-
Stel voor in die kommentaar...
In kontak)
Bron: will.com