PHP + jQuery Todo List

Náš to-do sa skladá z niekoľkých súborov:

• delete.php – maže poznámky
• process.php – vytvára poznámky, zobrazuje poznámky
• index.html – formulár, JavaScript

Poznámky budeme ukladať do MySQL databázy:

CREATE TABLE `notes`
(
`id` INT PRIMARY KEY AUTO INCREMENT NOT NULL,
`content` VARCHAR(500) NOT NULL
)

index.html bude (zatiaľ) obsahovať len formulár. V základnej podobe bude obsahovať len textareu (kde užívateľ vkladá svoje poznámky) a tlačidlo, ktoré potvrdí poznámku. Tieto informácie sú zasielané cez POST do súboru process.php.

process.php potom spracuje informácie, ktoré boli odoslané z formulára. Nám stačí vložiť obsah do databázy, pretože id pole má auto_increment. Zobrazíme to-do list v zozname. Pridáme odkaz na odstránenie poznámky.

<?php
// Pripojenie k databáze
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);

// Bol formulár odoslaný?
if($_POST['submit']){

// Zmapuje obsah, ktorý bol poslaný ako form premenná. Nieje nutné, ale udržiava čistotu.
$content = $_POST['content'];

// Vloženie obsahu do databázy
$ins = mysql_query("INSERT INTO `notes` (content) VALUES ('$content')");

// Presmerovanie užívateľa späť na index stránku
header("Location:index.php");
}

/* Nezávisle od toho, či bol formulár poslaný alebo nie, zobrazí posledné poznámky */

// Nájde všetky poznámky v databáze v zostupnom poradí (posledný príspevok je prvý).
$find = mysql_query("SELECT * FROM `notes` ORDER BY id DESC");

// Začiatok zoznamu
echo '
';

// Pokračuje cyklením cez všetky položky
while($row = mysql_fetch_array($find)){

// Pre každý, vyvola echo položky a pridá odkaz pre zmazanie položky s jeho id.
echo '
' . $row['content'] . ' 
';

}

// Koniec zoznamu
echo '
';

?>

delete.php nerobí nič viac ako mazanie poznámok. Použije id parameter, aby vyhľadal záznam v databáze. Po nájdení ho zmaže.

<?php

// Pripojenie k databáze
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);

//delete.php?id=IdOfPost
if($_GET['id']){

$id = $_GET['id'];

// Odstráni poznámku
$delete = mysql_query("DELETE FROM `notes` WHERE `id` = '$id'");

// Presmeruje užívateľa
header("Location:index.php");

}

?>

Náš to-do list je vlastne hotový ale je statický. Ďalšia časť pridá nášmu to-do dynamiku. Ak má užívateľ vypnutý JavaScript tak bude náš kód naďalej fungovať ale bez ďalších funkcií. Mi ostatný budeme mať rýchly a lepší to-do.

// Ak bolo kliknuté tlačidlo s id submit (submit tlačidlo)
$("#submit").click(function(){

// Načítanie obsahu textarea (obsah)
var formvalue = $("#content").val();

// Vytvorenie URL, ktoré budeme používať
var url = 'submit=1&content=' + formvalue;

// Použitie jQuery ajax funkcie pre poslanie
 $.ajax({
   type: "POST",
   url: "process.php",
   data: url,
   success: function(){

// Ak úspech, upozorní užívateľa, že bola pridaná položka
   $("ul").before("
Pridali ste: " + formvalue + "
");

   }
 });

// Vráti false aby sa po stlačení tlačidla zabránilo presmerovaniu
return false;

});

Url časť pletie niektorých ľudí. Čo robíme, je posielanie požiadavky process stránke, kde musíme zahrnúť nejaké dáta s touto požiadavkou. V process.php to bol riadok

if($_POST['submit']){ if ($ _POST ['submit']) { 

Skontrolujte, či if $_POST['submit'] nieje null (má hodnotu). Ak je null (nemá žiadnu hodnotu), to znamená, že formulár nebol odoslaný, zaslaním nejakej hodnoty, v našom prípade submit=1, hovoríme process.php stránke, že bolo kliknuté na tlačidlo, takže by malo spustiť zvyšok PHP skriptu. Zvyšok PHP skriptu volá obsah, ktorý posielame v url (content= ‘ + formvalue). Namiesto posielania čohokoľvek, potrebujeme iba poslať hodnotu z formuláru (obsah textarea – ktorý chce užívateľ poslať). Vrátením false na konci, zabránime tlačidlu vykonaniu svojej činnosti s action="process.php". Ak to spraví, znamená to, že stránka sa obnoví po odoslaní informácií, čo je presne to, čo nechceme.

Kód, ktorý obsluhuje mazanie poznámok je podobný.

// Skontroluje, či bolo kliknuté na odkaz (delete odkaz)
$("a").click(function(){

// Uloženie odkazu do premennej nazvanej element
var element = $(this);

// Nájdenie id odkazu, na ktorý bolo kliknuté
var noteid = element.attr("id");

// Vytvorenie url na odosielanie
var info = 'id=' + noteid;

 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   element.parent().eq(0).fadeOut("slow");
   }
 });

// Vráti false aby sa po stlačení tlačidla zabránilo presmerovaniu
return false;

});

Keď sme zobrazovali poznámky v process.php, vyvolali sme echo id, ktoré bolo v odkaze. Potom sme získali toto id pomocou element.attr("id") a vytvorili sme URL. Takže, keď je poslaná AJAX požiadavka, bude vyzerať asi takto: delete.php?id=POSTID. Ak je AJAX požiadavka úspešná, skryje položku v zozname.

element.parent().eq(0).fadeOut("slow");

V tomto kuse kódu vyberieme element (odkaz), na ktorý bolo kliknuté. Potom nájdeme jeho rodičov a vyberieme prvého pomocou eq(0). Takže prvý rodič, ktorý je v zozname položiek (<li><a href></a></li>) pomaly zmizne.

Tagy: php todo ajax