LINKTEXTIn este tutorial crearemos una aplicación simple con PHP y jQuery que permite a los usuarios escribir notas. Las notas se guardarán en archivos de texto sin formato en el servidor. Demuestra cómo leer y escribir archivos en PHP, cómo cambiar el tamaño de un área de texto con jQuery, según el texto que contiene, y cómo crear una interacción AJAX simple.
¡Obtenga una copia de la demostración desde el botón de arriba y siga leyendo!
El HTML
Para comenzar, necesitamos crear un documento HTML5 normal. He incluido solo las partes importantes a continuación, pero puedes ver el resto en index.php . Tenga en cuenta que he colocado el código PHP en el mismo archivo para simplificar.
index.php
<div id="pad">
<h2>Note</h2>
<textarea id="note"><?php echo $note_content ?></textarea>
</div> ¡Ese es todo el marcado que necesitamos para la nota! Por supuesto, lo diseñaremos mucho con CSS en unos minutos. También incluí la biblioteca jQuery más abajo en la página (antes de la etiqueta del cuerpo de cierre) junto con nuestro script.js archivo, pero no lo mostraré aquí. Lo importante es la declaración de eco de PHP dentro del área de texto. Imprime la última nota guardada del usuario.
El PHP
El código PHP del ejemplo es sencillo. Lo que hace es leer y presentar el contenido de la nota en la carga de la página, y escribir en ella cuando jQuery envía una solicitud AJAX. Esto hará que se anule el archivo de notas.
index.php
$note_name = 'note.txt';
$uniqueNotePerIP = true;
if($uniqueNotePerIP){
// Use the user's IP as the name of the note.
// This is useful when you have many people
// using the app simultaneously.
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
$note_name = 'notes/'.md5($_SERVER['HTTP_X_FORWARDED_FOR']).'.txt';
}
else{
$note_name = 'notes/'.md5($_SERVER['REMOTE_ADDR']).'.txt';
}
}
if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
// This is an AJAX request
if(isset($_POST['note'])){
// Write the file to disk
file_put_contents($note_name, $_POST['note']);
echo '{"saved":1}';
}
exit;
}
$note_content = '';
if( file_exists($note_name) ){
$note_content = htmlspecialchars( file_get_contents($note_name) );
} Observe el $uniqueNotePerIP variable. Estoy usando esto en la demostración para que cada usuario obtenga una nota única. Esta configuración hará que cada nota se guarde con la dirección IP del visitante como nombre. Puede establecerlo en falso, si desea que todos compartan una sola nota, pero tenga en cuenta que si dos personas editan la nota simultáneamente, la que guarde la última la anulará y, en casos excepcionales, la nota en sí misma puede corromperse.
A continuación, ¡el código jQuery!
JQuery
El trabajo de jQuery en esta aplicación sería escuchar los cambios en el área de texto y enviarlos con una publicación de AJAX. solicite volver a index.php, donde el texto se escribe en un archivo.
El enfoque habitual sería vincular un controlador a la pulsación de tecla evento, pero en ciertos casos esto no será suficiente ya que el usuario puede simplemente pegar texto en el área de texto, elegir una sugerencia de autocorrección por parte de su navegador o deshacer un cambio. Afortunadamente para nosotros, hay otro evento que maneja todos estos casos. Es la entrada evento, que es compatible con todos los navegadores modernos (lea más aquí). Puedes ver el código a continuación.
activos/js/script.js
$(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');
// The input event is triggered on key press-es,
// cut/paste and even on undo/redo.
note.on('input',function(e){
// Clearing the timeout prevents
// saving on every key press
clearTimeout(saveTimer);
saveTimer = setTimeout(ajaxSaveNote, 2000);
// Count the number of new lines
newLines = note.val().match(countLinesRegex);
if(!newLines){
newLines = [];
}
// Increase the height of the note (if needed)
newHeight = Math.max((newLines.length + 1)*lineHeight, minHeight);
// This will increase/decrease the height only once per change
if(newHeight != lastHeight){
note.height(newHeight);
lastHeight = newHeight;
}
}).trigger('input'); // This line will resize the note on page load
function ajaxSaveNote(){
// Trigger an AJAX POST request to save the note
$.post('index.php', { 'note' : note.val() });
}
}); Otra cosa útil que hace el código anterior es contar el número de líneas nuevas en el texto y ampliar el área de texto automáticamente, según el valor de line-height Propiedad CSS.
Y aquí está el CSS.
El CSS
En esta sección diseñaremos los tres elementos que ve en la parte HTML del tutorial. Cada uno de los tres elementos que ve allí tiene un estilo y se le agrega una imagen de fondo. Para la parte inferior del bloc de notas, estoy usando un :después elemento. Cuando jQuery cambia el tamaño del área de texto, la parte inferior se empuja automáticamente hacia abajo.
activos/css/estilos.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;
} Además, he incluido la fuente Courgette de Google Web Fonts, que podéis ver referenciada en la #nota bloquear.
¡Listo!
Espero que te haya gustado este sencillo ejemplo y estés lleno de ideas para mejorar. Si necesita admitir versiones anteriores de IE que no tienen la entrada evento, le sugiero que cambie el código para que la solicitud de AJAX se envíe automáticamente con un tiempo de espera cada 5 o 10 segundos.