Deprecated: preg_match_all(): Passing null to parameter #2 ($subject) of type string is deprecated in /home/oaznojmo.eu/web/oaznojmo.eu/public_html/plugins/content/jcodesyntaxhighlighter/jcodesyntaxhighlighter.php on line 21
- Základní údaje
- Kategorie: JavaScript
- Zobrazení: 775
Tato jednoduchá ochrana spočívá v tom, že se do formuláře vloží neviditelné pole, které je pak porovnáváno s výsledkem a to za pomoci JavaScriptu a PHP. Normální návštěvníci tak nemusí vyplňovat žádné bezpečnostní pole, protože je skryto JavaScriptem. Roboti rozesílající spam však většinou nemají JavaScript povolen (spuštěn), proto se jim nepodaří data z formuláře odeslat. Nejprve do formuláře vložíme klasické formulářové pole (input) typ text a celé jej "obalíme" nějakým prvkem s ID, např. odstavec s ID "spamprotirobotum":
<p id="spamprotirobotum">
<input type="text" name="robot" value="" id="protirobotum">
</p>Dále musíme vložit na konec stránky tento JavaScript, který má dvě části. Jedna vloží do hodnoty pole formuláře např. číslo. V tomto případě je ještě navíc lehce ztíženo čtení o prvek násobení (konkrétně 6x20, což dává ve výsledku 120):
<script>
/* vložíme do políčka číslo */
document.getElementById("protirobotum").value = 6 * 20;
/* a poté políčko zneviditelníme */
document.getElementById("spamprotirobotum").style.display = "none";
</script>Nakonec vložíme zaslanou hodnotu do proměnné a necháme ji zkontrolovat podmínkou. Pokud je pravdivá, vykoná se vyhodnocení dat formuláře:
$robot = $_POST['robot']; //do proměnné uložíme obsah políčka
if($robot == 120){
//sem vložíte celý Váš PHP skript a pokud podmínka nebude splněna, nic se neprovede.
}Celý soubor s formulářem může vypadat např. takto:
<!DOCTYPE html>
<html lang='cs'>
<head>
<title>Ochrana proti SPAMu</title>
<meta charset='utf-8'>
</head>
<body>
<h1>Ukázka ochrany formuláře proti SPAMu</h1>
<form action="vysledek.php" method="post">
<p>Vaše jméno:<br>
<input type="text" name="jmeno">
</p>
<p>Příspěvek:<br>
<textarea name="prispevek" cols="40" rows="3"></textarea>
</p>
<!-- vložíme ochranné pole, které je při zobrazení v prohlížeči skryto -->
<p id="spamprotirobotum">Ochrana proti spamu. Napište číslo stodvacet:
<input type="text" name="robot" value="" id="protirobotum">
</p>
<input type="submit">
</form>
<script>
/* vložíme do políčka číslo */
document.getElementById("protirobotum").value = 6 * 20;
/* a poté políčko zneviditelníme */
document.getElementById("spamprotirobotum").style.display = "none";
</script>
</body>
</html>Soubor s výsledkem může vypadat např. takto:
<?php
$robot = $_POST['robot']; //do proměnné uložíme obsah pole s id robot
if($robot == 120)
{
//sem vložíte vše, co se má ukázat, když je podmínka splněna.
echo "Zadali jste správně bezpečnostní otázku. Bude tedy zobrazen následující kód...";
echo "<p>Vytvořil: ".$_POST['jmeno']."<br><p>Příspěvek: ".$_POST['prispevek']."</p><hr>";
}
else
echo "Nebyl zadán správně bezpečnostní kód!";
?>Tady je malá ukázka. Zdroj: https://mujskript.cz/php
- Základní údaje
- Kategorie: JavaScript
- Zobrazení: 554
Pokud potřebujeme filtrovat data v obsáhlé tabulce, lze to vytvořit např. za pomoci JavaScriptu (zdroj: w3schools.com). Nejprve je potřeba vložit před tabulku textové pole pro zadání několika klíčových písmen pro hledání:
<input type="text"
id="myInput"
onkeyup="myFunction()"
placeholder="Hledat ve sloupci Jméno.."
title="Napište prvních pár písmen hledaného slova">Důležité jsou především parametry id a onkeyup, které jsou navázány na následný kód. Nyní vytvoříme tabulku, které přidělíme id "myTable", které bylo použito v předchozí části.
<table id="myTable">
<tr class="header">
<th style="width:60%;">Jméno</th>
<th style="width:40%;">Stát</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>Dále si do stránky vložíme JavaScript, nejlépe těsně před tag /body. Opět si všimněte názvu funkce myFunkcion, dále parametru input ("myInput") a parametru table ("myTable"). Tyto názvy samozřejmě můžeme přejmenovat podle libosti, ale vždy ve všech třech částech kódu.
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
// číslo udává sloupec filtrace (nula je první sloupec)
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>Důležitý je také parametr v cyklu for, kde je v závorce "0". To je první sloupec tabulky. Pokud chceme filtrovat data v jiném sloupci, musíme si spočítat, kolikátý je v pořadí a to včetně "nuly". Posledním krokem je vytvoření CSS stylu, buď v hlavičce dokumentu nebo v externím souboru. Modifikace je samozřejmě závislá na ostatním vzhledu webové stránky, případně napojení na nějaký framework apod.
<style>
* {
box-sizing: border-box;
}
#myInput {
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 12px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>Výsledek je možné si vyzkoušet v tomto demu.