Programare web

Carnet de notițe simplu cu Ajax și PHP

În acest tutorial vom face un app simplu cu PHP și Jquery ce permite userilor să-și lase notițe.Notițele vor fi salvate ca fișiere simple de text pe server.Tutorialul demonstrează cum poți citi și scrie notițe în PHP, cum să redimensionezi o textarea cu Jquery, în funcție de textul pe care îl conține și cum să creezi o interacțiune simplă cu userul utilizând Ajax.

HTML-ul

Pentru început avem nevoie de un fișier normal de HTML5.Aici veți vedea doar partea importantă, dar puteți vedea restul codului în index.php.După cum puteți intui, am adăugat PHP-ul în același fișier pentru simplitate.

index.php

[cc lang=”html” escaped=”true”]
<div id=”pad”>
<h2>Note</h2>
<textarea id=”note”><?php echo $continut_nota ?></textarea>
</div>
[/cc]
Cam de asta e nevoie în prima fază…e doar scheletul desigur.Deși trebuie să spun că o vom stila masiv în CSS.La sfârșitul articolului, dacă veți descărca filele veți vedea că există și Jquery, dar momentan cea mai importantă chestie este acel echo, care afișează nota lasată ultima oară.

PHP-ul

PHP-ul e relativ simplu.Tot ce face e să citească și să afișeze conținutul carnețelului atunci când se încarcă pagina și să o scrie când o cerere Ajax este trimisă via Jquery.Asta va cauza ca fila să se suprascrie.

index.php

[cc lang=”php”]

$nume_nota = ‘note.txt’;
$notaUnicaPerIp = true;

if($notaUnicaPerIp){

// Utilizeaza Ip-ul la user ca nume al notei
// Tactica asta e utila atunci cand sunt multi useri
// ce utilizeaza app-ul simultan

if(isset($_SERVER[‘HTTP_X_FORWARDED_FOR’])){
$nume_nota = ‘notes/’.$_SERVER[‘HTTP_X_FORWARDED_FOR’].’.txt’;
} else {
$nume_nota = ‘notes/’.$_SERVER[‘REMOTE_ADDR’].’.txt’;
}
}
if(isset($_SERVER[‘HTTP_X_REQUESTED_WITH’])){
// Asta-i un request Ajax

if(isset($_POST[‘note’])){
// Scrie fila pe disk
file_put_contents($note_name, $_POST[‘note’]);
echo ‘{“saved”:1}’;
}
exit;
}

$continut_nota = ”;

if( file_exists($nume_nota) ){
$continut_nota = htmlspecialchars( file_get_contents($nume_nota) );
}

?>
[/cc]
Fi atent un pic la variabila $notaUnicaPerIp.În scriptul de mai sus o utilizăm ca și nume al notiței.De aceea, fiecare user va avea o notiță personală.Poti, desigur să setezi variabila ca false, iar atunci toată lumea va folosi aceeași notă.Nu mi se pare totuși o idee bună, căci de exemplu dacă sunt 2 persoane ce scriu în același timp, persoana care va salva ultima își va vedea nota, iar în cazuri mai rare fila ar putea deveni coruptă.

Jquery

Treaba lui Jquery în această aplicație va fi să trimită orice modificare din textarea printr-un Ajax Post către index.php, unde textul e scris pe o filă.

Metoda clasică ar fi să lipim un handler event-ului keypress, dar în multe cazuri această abordare nu ar fi prea recomandată userul putând copia și lipi informții în textarea, să aleagă vreo sugestie de corectare al vreunui cuvânt sau să anuleze vreo modificare.Din fericire pentru noi, este alt event ce face toate astea pentru noi.Este event-ul input,    ce este suportat de toate browserele importante.Poți vedea codul mai jos.

js/script.js

[cc lang=”javascript”]
$(function(){

var note = $(‘#note’);

var saveTimer,
lineHeight = parseInt(note.css(‘line-height’)),
minHeight = parseInt(note.css(‘min-height’)),
lastHeight = minHeight,
newHeight = 0,
newLines = 0;

var countLinesRegex = new RegExp(‘\n’,’g’);

// Event-ul input este apasat atunci cand tastezi,
// tai sau lipesti si chiar la undo/redo

note.on(‘input’,function(e){

// Eliminand timeout previi salvarea la fiecare tastare

clearTimeout(saveTimer);
saveTimer = setTimeout(ajaxSaveNote, 2000);

// Numara numarul de noi linii
newLines = note.val().match(countLinesRegex);

if(!newLines){
newLines = [];
}

// Modifica inaltimea carnetelului (daca e necesar)
newHeight = Math.max((newLines.length + 1)*lineHeight, minHeight);

// Asta va creste/scadea inaltimea numai o data per schimbare
if(newHeight != lastHeight){
note.height(newHeight);
lastHeight = newHeight;
}
}).trigger(‘input’); // Aceasta linie va redimonsiona textarea la incarcarea paginii

function ajaxSaveNote(){

// Declanseaza un request Ajax Post pentru a salva notita
$.post(‘index.php’, { ‘note’ : note.val() });
}

});
[/cc]

Alt lucru folositor pe care codul de mai sus îl face e să numere numărul(sună groaznic) de noi linii de text, mărind sau micșorând textarea automat, în funcție de valoarea proprietății line-height din CSS.

CSS-ul

În această secțiune vom stila un pic elementele HTML.Fiecare din cele 3 elemente ce le poți vedea, sunt stilate și le-a fost adăugate câte-o imagine de fundal.Pentru partea de jos a carnețelului folosim elementul :after.Când textarea e redimensionată automat cu Jquery, partea de jos este împinsă și ea.
[cc lang=”css”]
#pad{
position:relative;
width: 374px;
margin: 180px auto 40px;
}

#note{
font: normal 15px ‘Courgette’, cursive;
line-height: 17px;
color:#444;
background: url(‘img/mid.png’) repeat-y;
display: block;
border: none;
width: 329px;
min-height: 170px;
overflow: hidden;
resize: none;
outline: 0px;
padding: 0 10px 0 35px;
}

#pad h2{
background: url(‘img/header.png’) no-repeat;
overflow: hidden;
text-indent: -9999px;
height: 69px;
position: relative;
}

#pad:after{
position:absolute;
content:”;
background:url(‘img/footer.png’) no-repeat;
width:100%;
height:40px;
}
[/cc]

În plus, am inclus și fontul Courgette, de la Google Web Fonts.Dacă sunt sugestii și îmbunătățiri nu uitați să le spuneți.

Descarcati

Write A Comment