junio 13, 2009 4

Envio de correo usando PHPMailer

By in Librerías, PHP

Es relativamente fácil enviar correo con PHP usando la función mail(). Pero en algunas ocasiones querremos hacer algo más complejo pero de forma que nos cueste menos trabajo, y de paso que nuestro código quede más legible.

Para ello podemos hacer uso de la clase PHPMailer. Lo primero que tenemos que hacer es incluir la clase PHPMailer. Acto seguido creamos una instancia de la clase. A continuación vamos a ver cuales son:

Nombre Descripción Valor por defecto
AltBody Texto alternativo. Para los mensajes en solo texto. “”
Body Cuerpo del email. Puede ir en formato HTML. “”
CharSet Conjunto de caracteres del correo. iso-8859-1
ConfirmReadingTo Dirección a la que se enviará una confirmación de lectura del correo. “”
ErrorInfo Información sobre el último error producido. “”
From Dirección de origen del mensaje. root@localhost
FromName Nombre del emisor del mensaje. Root User
Host Servidor SMTP a través del cual se enviará el correo. localhost
Mailer Método mediante el cual se enviará el correo. Puede ser mail, sendmail o smtp. mail
Password Contraseña del servidor SMTP “”
PluginDir Directorio donde se encuentran los plugins. Por ejemplo el de envio por SMTP. “”
Port Puerto del servidor SMTP. 25
Priority Prioridad del email. (1 = Alta, 3 = Normal, 5 = Baja) 3
ReplyTo Direcciones a las que responder el correo. array()
SMTPAuth Establece si hay o no autenticación SMTP. false
Subject Asunto del correo. “”
Timeout Tiempo de espera antes de producirse un error den TimeOut 10
Username Usuario del servidor SMTP “”
WordWrap Ancho máximo del mensaje. 0

Ahora veamos los principales métodos:

Nombre Retorno Parámetros Descripción
AddAddress void $address: dirección de correo.
$name: nombre del destinatario. Este parámetro es opcional.
Añade una dirección de destino para el correo.
AddAttachment bool $path: Ruta del archivo.
$name: Nombre del archivo.
$encoding: Tipo de codificación. Por defecto base64.
$type: Tipo MIME del archivo. Por defecto application/octet-stream.
Añade un archivo adjunto al mensaje.
AddBCC void $address: Dirección que queremos añadir.
$name: Nombre del destinatario. Este parámetro es opcional.
Añade una dirección BCC.
AddCC void $address: Dirección que queremos añadir.
$name: Nombre del destinatario. Este parámetro es opcional.
Añade una dirección como CC.
AddReplyTo void $address: Dirección que queremos añadir.
$name: Nombre del destinatario. Este parámetro es opcional.
Añade una dirección para el Reply To.
IsHTML void $bool: indica si el mesaje es en formato HTML Establece un mensaje como HTML.
Send bool Envía el mensaje. Devuelve true si se envía correctamente. En caso de devolver false podemos consultar la propiedad ErrorInfo para saber que error ha ocurrido.

Después de esto vamos a ver un pequeño ejemplo:

<?
	include("class.phpmailer.php");

	//Creamos la instancia de la clase PHPMAiler
	$mail = new phpmailer();

	//El método que usaremos es por SMTP
	$mail->Mailer = "smtp";

	// Los datos necesarios para enviar mediante SMTP
	$mail->Host = "smtp.nuestrohost.com";
	$mail->SMTPAuth = true;
	$mail->Username = "cuenta@nuestrohost.com";
	$mail->Password = "password";

	// Asignamos el From y el FromName para que el destinatario sepa quien
	// envía el correo
	$mail->From = "cuenta@nuestrohost.com";
	$mail->FromName = "Manuel Carrascosa de la Blanca";

	//Añadimos la dirección del destinatario
	$mail->AddAddress("direccion@hostdestino.com");

	//Asignamos el subject, el cuerpo del mensaje y el correo alternativo
	$mail->Subject = "Ejemplo de PHPMailer";
	$mail->Body = "<p>Esto es un <strong>ejemplo</strong> de correo.</p>";
	$mail->AltBody = "Esto es un ejemplo de correo.";

	//Si al enviar el correo devuelve true es que todo ha ido bien.
	if($mail->Send())
	{
		//Sacamos un mensaje de que todo ha ido correctamente.
   		echo "Mensaje enviado correctamente.";
	}
	else
	{
		//Sacamos un mensaje con el error.
		echo "Ocurrió un error al enviar el correo electrónico.";
		echo "<br/><strong>Información:</strong><br/>".$mail->ErrorInfo;
	}
?>

El código es autoexplicativo, pero si tenéis alguna duda se puede preguntar en los comentarios sin problema alguno.

Normalmente suelo recomendar consultar la documentación de las librerías que comento en el blog. Esta vez no va a ser menos y la podéis consultar en la web de PHPMailer. Hay que ir al siguiente menú: Products > PHPMailer > support – x, donde la x es un tema documentado, como los métodos, las propiedades o un tutorial.

En este caso no se adjunta archivo con el código del ejemplo, ya que no funcionaría directamente al tener que configurar bien los datos del emisor y el receptor y los datos del servidor SMTP. Pero tenéis la opción de copiar y pegar y colocar los datos de acuerdo con vuestras necesidades.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,

junio 12, 2009 2

Tutorial de TinyMCE. Parte II.

By in JavaScript, Librerías

En la anterior parte del tutorial vimos como crear un editor sencillo con TinyMCE. Hoy vamos a ver algunas opciones más avanzadas, como los plugins o como tener distintos editores en una misma página.

Veamos el tercer ejemplo:

ejemploTinyMCE_3.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tercer ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_3.js"></script>
<style>
#editor { width: 500px; height: 350px;}
</style>
</head>
<body onload="cargarTinyMCE();">
<h1>Tercer ejemplo con TinyMCE</h1>
<textarea id="editor"></textarea>
</body>
</html>

Es prácticamente idéntico al segundo ejemplo, con la salvedad de que se le ha añadido la propiedad id al tag textarea. Esto lo hacemos porque ahora vamos a seleccionar un textarea en concreto para que sea nuestro editor.

ejemploTinyMCE_3.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "exact",
		elements: "editor",
		theme : "advanced",
		plugins: "fullscreen, advlink, advimage",
		theme_advanced_buttons1 : "bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull ",
		theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo",
		theme_advanced_buttons3 : "image, link, fullscreen",
		theme_advanced_toolbar_location: "top",
		theme_advanced_toolbar_align: "left"	});
  }

Ahora aparecen varias cosas nuevas. Aparecen dos opciones nuevas, elements y plugins. En este caso la opción mode tiene el valor exact, en lugar de textareas como tenía en los otros ejemplos. Bien, el modo exact le dice a TinyMCE que solo los textareas con los ids que aparecen en la opción elements serán nuestros editores WYSIWYG. Luego en la opción elements le hemos puesto solo editor. De esta forma solo el textarea con el id editor será transformado en un campo de texto enriquecido con las opciones indicadas. La opción elements puede contener varios ids separados por comas, de esta forma se aplicará a todos los textarea que tengan un id que aparezca en la lista.

La siguiente opción que vemos es plugins. Esta opción nos permite incluir plugins que añaden funcionalidades extra a nuestro editor. En este caso hemos añadido los plugins fullscreen, que permite que el editor ocupe toda el area del navegador; advlink, que nos presenta un dialogo avanzado para insertar enlaces y advimage que proporciona un dialogo más completo para incrustar imágenes. En la opción theme_advanced_buttons3 añadimos los botones image, link y fullscreen para poder ver las nuevas funcionalidades del editor.

Este debería de quedar tal que así:

Tercer ejemplo con TinyMCE

Tercer ejemplo con TinyMCE

Para poder tener varios editores tenemos que tener varias llamadas a la función tinyMCE.init. Vamos a verlo con un ejemplo en el que tendremos un editor con dos barras y otro con una barra. Veamos el código:

ejemploTinyMCE_4.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Cuarto ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_4.js"></script>
<style>
#editor { width: 400px; height: 300px;}
#sencillo { width: 300px; height: 250px;}
</style>
</head>
<body onload="cargarTinyMCE();">
<h1>Cuarto ejemplo con TinyMCE</h1>
<textarea id="editor"></textarea><br/>
<textarea id="sencillo"></textarea>
</body>
</html>

Como se puede ver en la página hay dos textareas, uno con el id editor y otro con id sencillo.

ejemploTinyMCE_4.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "exact",
		elements: "editor",
		theme : "advanced",
		plugins: "fullscreen, advlink, advimage",
		theme_advanced_buttons1 : "bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull ",
		theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo",
		theme_advanced_buttons3 : "image, link, fullscreen",
		theme_advanced_toolbar_location: "top",
		theme_advanced_toolbar_align: "left"
	});

	tinyMCE.init({
		mode : "exact",
		elements: "sencillo",
		theme : "advanced",
		theme_advanced_buttons1 : "bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull ",
		theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo",
		theme_advanced_buttons3 : "",
		theme_advanced_toolbar_location: "top",
		theme_advanced_toolbar_align: "left"
	});
  }

Ahora para que aparezcan dos editores distintos tenemos que hacer dos llamadas a tinyMCE.init, una por cada configuración que queramos, indicándole a que textarea, o a que textareas si tuviéramos varios con la misma configuración. Esto quedaría de la siguiente forma.

Cuarto ejemplo con TinyMCE

Cuarto ejemplo con TinyMCE

Como es habitual recomiendo consultar la documentación, de donde salen muchas ideas interesantes.

Y para finalizar los archivos con los ejemplo del tutorial (no incluye tinyMCE, que ya estaba en los ejemplos de la primera parte):

Ejemplos del tutorial de TinyMCE Parte II

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

junio 11, 2009 1

Breve tutorial de AJAX con jQuery

By in JavaScript, Librerías

Hace unos días se explicaba como utilizar AJAX con Prototype. Hoy le toca el turno a jQuery. Vamos a verlo con un pequeño ejemplo idéntico al que hicimos para Prototype.

ejemploAJAXconjQuery.html:

<html>
<head>
<title>Ejemplo de AJAX con jQuery</title>
<script src="./jquery.js" type="text/javascript"></script>
<script src="./ejemploAJAXconjQuery.js" type="text/javascript"></script>
</head>
<body>
<div>
  <ul>
    <li><a href="javascript:ejemploAJAX(1);">Obtener texto 1.</a></li>
    <li><a href="javascript:ejemploAJAX(2);">Obtener texto 2.</a></li>
    <li><a href="javascript:ejemploAJAX(3);">Obtener texto 3.</a></li>
  </ul>
</div>
<div id="resultado">
</div>
</body>
</html>

Con estro creamos una lista con tres enlaces. Al hacer click sobre cada uno de ellos se llama a la función ejemploAJAX y le pasamos un valor numérico. En la cuarta linea podemos observar como se añade el archivo jquery.js. Este es el archivo que contiene la librería.

Veamos ahora nuestra función ejemploAJAX:

ejemploAJAXconjQuery.js:

function ejemploAJAX(textID)
{
	var params = "textid=" + textID;
	$.ajax({
		type: "get",
		url: "ejemploAJAXconjQuery.php",
		data: params,
		success: function(respuesta) {
			$('#resultado').html(respuesta);
		}
	}
	);
}

Como se puede apreciar se crea una variable llamada params con los parámetros que tendrá la llamada al script que nos devolverá el resultado. Con $.ajax accedemos a la función encargada de realizar el manejo AJAX. A esta función se le pasan varios parámetros para controlar a donde debemos ir a por la información y como realizar la petición. En este caso le pasamos cuatro parámetros, que son el tipo (type), en este caso le indicamos que use el método get, la url del script, los parámetros y la función que se ejecutará cuando la petición se haya realizado correctamente. Como se puede apreciar los parámetros van encerrados entre los corchetes { y } y en el formato parámetro : valor, y separadas por comas.

La función que se ejecuta cuando se realiza correctamente la petición se define, en este caso, en el propio valor del parámetro success. Esta función recibe un parámetro (html) que es la respuesta de nuestro script. En el cuerpo de la función lo único que hacemos es seleccionar el elemento cuyo id es resultado. Para eso usamos la función $ y le pasamos ‘#resultado’ para acceder al elemento. Llamamos al método html pasándole el parámetro respuesta para hacer que el contenido de ese elemento sea la respuesta de nuestro script.

Vamos a ver ahora el script que nos da la respuesta. Un script muy sencillo, pero útil para un ejemplo.

ejemploAJAXconjQuery.php:

<?php

switch($_GET['textid'])
{
	case 1:
		echo "Texto de ejmplo uno.";
		break;
	case 2:
		echo "Texto de ejmplo dos.";
		break;
	case 3:
		echo "Texto de ejmplo tres.";
		break;
}
?>

Simplemente en función de la variable textid, el parámetro que le pasamos, nos devuelve un texto u otro. Como se puede ver es idéntico al script del tutorial de Prototype.

En este caso, al ser un ejemplo, el texto devuelto es muy simple, pero podríamos haber devuelto la información en formato XML o JSON para luego procesarlo mediante JavaScript en nuestra página.

Con esto termina este tutorial sobre AJAX y jQuery. Es recomendable tener siempre a mano la documentación de jQuery, donde se pueden var algunos ejemplos y donde vienen explicados todas las funciones, métodos, etc, de la librería.

Y como siempre los ficheros con el ejemplo:

Ejemplo de AJAX con jQuery

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,

junio 10, 2009 7

Tutorial de TinyMCE. Parte I

By in JavaScript, Librerías

Hace poco daba por aquí una breve descripción de TinyMCE. Vamos a ver ahora un breve tutorial sobre este excelente editor WYSIWYG.

Para empezar veamos un ejemplo básico:

ejemploTinyMCE_1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Primer ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_1.js"></script>
</head>
<body onload="cargarTinyMCE();">
<h1>Primer ejemplo con TinyMCE</h1>
<textarea></textarea>
</body>
</html>

En el head de la página cargamos dos scripts, el primero es el script de TinyMCE y el segundo es un script propio donde tenemos una función (cargarTinyMCE) que se encarga de que aparezca el editor. En el evento onload  de la página llamamos a esta función. Como se puede ver en el body aparece un encabezado con el título y un textarea.

El código de la función cargaTinyMCE es:

ejemploTinyMCE_1.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "textareas",
		theme : "simple"
	});
  }

Con este pequeño trozo de código hacemos que aparezca el editor. Este editor se vería de la siguiente forma:

Primer Ejemplo con TinyMCE

Primer Ejemplo con TinyMCE

Vamos ahora a tocar un poco el código de la función para que varie un poco el aspecto. En este ejemplo no incluyo el archivo HTML porque es muy parecido al primero (aunque si se incluye en el ZIP).

ejemploTinyMCE_2.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		theme_advanced_buttons1 : "bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull ",
		theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo",
		theme_advanced_buttons3 : "",
		theme_advanced_toolbar_location: "top",
		theme_advanced_toolbar_align: "left"
	});
  }

En este caso la opción theme tiene el valor advanced, de esta forma podemos adaptar el editor a nuestras necesidades. Lo siguiente que vemos es que se han añadido las opciones theme_advanced_buttons1, theme_advanced_button2 y theme_advanced_buttons3 (theme_advanced_buttons<1-n>). Con estas opciones podemos indicar que botones van a aparecer en cada una de las barras. Si dejamos esta opcion vacia, como en el ejemplo con theme_advanced_buttons3, no aparece la barra. En la documentación de TinyMCE están los botones que tenemos disponibles.

Tenemos también las opciones theme_advanced_toolbar_location y theme_advanced_toolbar_align. Con la primera indicamos la posicion de la barra, en nuestro caso arriba (top), y la alineación de esta, en este ejemplo a la izquierda (left).

El editor quedaría:

Segundo ejemplo con TinyMCE

Segundo ejemplo con TinyMCE

Bien, esto es todo de momento. No viene mal echarle un ojo a la documentación de TinyMCE, donde se puede consultar mucha información sobre este editor.

Y como siempre el zip con los ejemplos de este tutorial (incluye el editor TinyMCE):

Ejemplos del tutorial de TinyMCE Parte I

Y la página de TinyMCE (enlace).

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

junio 9, 2009 0

Trabajando en la plantilla del blog

By in General

Estoy trabajando estos días en modificar la plantilla del blog, principalmente realizando la traducción de este al castellano. Si se observan cosas raras no se preocupen.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: