Creando un área de cliente para portfolios con PHP y MySQL – Quinta parte

Esta parte cubre la pizarra: la página donde el cliente y el administrador podrán enviar mensajes de ida y vuelta, en un área organizada para la comunicación efectiva. ¡Es hora de tirar los mensajes de correo electrónico desorganizados!

Empecemos.

Lo que haremos

A continuación veremos un ejemplo de lo que haremos en el tutorial de hoy. Ten en cuenta que no vamos a diseñarlo en absoluto, y que la imagen de abajo representa algo que se hace con un arcordeónJQuery, que no se va a hacer en éste tutorial.

Aun así, deberemos ser capaces de completar un sistema de caja con mensajes básicos que se integre con nuestra área de cliente actual que hemos creado. Veremos cómo crear la estructura básica y, a continuación, te dejo hacer toda la funcionalidad y estilos.

Ejemplo

Creando un plan

Primero vamos a crear un plan o flujo de trabajo, para entender cómo va a funcionar y evitar errores por el camino. Una vez comience la lluvia de ideas, te darás cuenta de que va a ser muy similar a nuestra página “documents.php”, excepto que se irán sumando elementos y visualización de datos en forma de texto, en lugar de archivos.

  1. Mostraremos un formulario simple donde el cliente pueda añadir un mensaje.
  2. Este formulario será procesado mediante el envío de mensajes de usuario en la base de datos. En la base de datos, crearemos otra tabla para nuestro tablero en el que colocaremos todos los mensajes.
  3. Al colocar el mensaje del cliente en nuestra nueva tabla de la base de datos, también colocaremos el ID del cliente para que podamos separar los mensajes de unos clientes de los otros que puedan estar en la tabla.
  4. A continuación, se recupera la información de la BD, mostrando así el tablero en la página. Podemos recuperar la información de la misma manera que en la página de documentos, haciendo una lista de todos los mensajes con el mismo ID que el ID de nuestros clientes.

Aún no cubriremos las funciones de administración. Estamos sentando la base para el área de administración.

Crear la tabla en la base de datos.

Vamos a crear la tabla en la base de datos para mantener todas las notas. Necesitaremos incluir tres campos:

  1. El ID del cliente. Lo utilizaremos para saber a qué cliente pertenece cada nota.
  2. El mensaje. Es evidente que necesitamos guardar el mensaje para mostrarlo cuando sea necesario.
  3. La fecha. Tendremos que prestar atención a la fecha en que el mensaje se envió. No sólo mostraremos la fecha en que fue publicada, sino que organizaremos los mensajes por orden cronológico.

Así que vamos a crear nuestra tabla. Al igual que otras veces, lo voy a poner paso a paso, con imágenes incluidas.

  1. Inicia sesión en phpMyAdmin y ve a la base de datos ClientArea.
  2. Veremos las dos tablas que hemos creado en tutoriales anteriores: la de clientes y la de archivos subidos. Vamos a crear otra tabla llamada “noteboard”. Ya hemos determinado antes cuántos campos queremos incluir en la tabla, así que pondremos “3” en el número de campos.
  3. Ahora vamos a llenar los campos para satisfacer nuestras necesidades.

Tenemos nuestro client_ID que mantendrá el ID de nuestros clientes para poder hacerlo coincidir con las notas correctas en la base de datos. Tenemos un campo para la fecha, que la vamos a insertar automáticamente en la base de datos con PHP, y por último, un tercer campo que contiene el mensaje. Toma nota de los tipos de los campos y la longitud/valores de cada uno. Para la fecha, pondremos un tipo de fecha, para que la formatee automáticamente a la hora de almacenarla. El mensaje es un VARCHAR básico, y hemos establecido un límite de 500 caracteres.

Tablas

Campos

  1. Guardamos nuestros cambios para realizar la creación de nuestra nueva tabla.

Crear la página y el formulario HTML

Vamos a estructurar la página básica para ver cómo se organizan las cosas. Crearemos un formulario HTML básico, preparando todo para que funcione nuestro código.

Creamos una nueva página, a la que llamaré “noteboard.php”. Antes de nada, echemos un vistazo a la estructura de la página básica a continuación. Nos daremos cuenta que es casi idéntica a nuestra página documents.php.

<?php
// El código para procesar los mensajes irá aquí.
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Portfolio - Area de cliente - Note Board</title>
</head>
<body>

<!--
Nuestro formulario irá aquí. Redireccionamos a la misma página para procesar los mensajes, asi que el código PHP irá al inicio.
-->

</body>
</html>

Es una estructura bastante básica. Una página general de XHTML 1.0 estricta, que incluirá un formulario HTML. El formulario dará lugar a la misma página, y ya que el nombre de la página termina con una extensión PHP, podemos incluir código PHP al inicio para procesar cualquier información enviada al servidor (a través del formulario).

Si no hay información que procesar (el formulario no se ha usado), se ignorará el código PHP.

Para nuestro formulario HTML, sólo tendremos un área de texto y un botón enviar. Simple, ¿verdad?

<form action="noteboard.php" method="post">
<h3>Mensaje:</h3><br />
<textarea name="message" cols="30" rows="10"></textarea><br />
<input type="submit" value="Enviar" />

Como siempre, usamos el método POST para transferir nuestros datos al servidor. Enviamos los datos a “noteboard.php”, la mismapágina.

<?php
    // El código para procesar los mensajes irá aquí.
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Portfolio - Area de cliente - Note Board</title>
 </head>
 <body>
 <form action="noteboard.php" method="post">
 <h3>Mensaje:</h3><br />
 <textarea name="message" cols="30" rows="10"></textarea><br />
 <input type="submit" value="Enviar" />
 </body>
</html>

Nota: He colocado el formulario en la estructura de la página anterior.

Introducir las notas de clientes en la tabla.

Recuerda, en este apartado podemos hacer referencia a gran parte de nuestro script de nuestra página documents.php. Echemos un vistazo a la primera parte de la página:

<?php
session_start();
if(!isset($_SESSION['username'])){
header( 'Location: loginform.html' );
}
require('db.php'); // Connect to the database since we'll be needing it later.
// Where the file is going to be placed
$target_path = "uploads/";
// Get's the client_ID
$client_ID = mysql_query("SELECT 'client_ID'FROM 'clients'WHERE username='".$_SESSION['username']."'");
if(!empty($_FILES)){
// Add the original filename to our target path.
// Result is "uploads/filename.extension"
$target_path = $target_path .basename( $_FILES['uploadedfile']['name']);
if((!$_FILES["uploadedfile"]["type"] == "image/gif")
  ||(!$_FILES["uploadedfile"]["type"] == "image/png")
  ||(!$_FILES["uploadedfile"]["type"] == "image/jpeg") // "jpeg" for Firefox
  ||(!$_FILES["uploadedfile"]["type"] == "image/pjpeg") // "jpeg" for IE
  ||(!$_FILES["uploadedfile"]["type"] == "text/css")
  ||(!$_FILES["uploadedfile"]["type"] == "text/html")
  ||(!$_FILES["uploadedfile"]["type"] == "text/javascript")
  ||(!$_FILES["uploadedfile"]["type"] == "application/msword")
  ||(!$_FILES["uploadedfile"]["type"] == "application/pdf")
&&(!$_FILES["file"]["size"] < 100000)){
echo "The file is not of the right type or size. It should be a.gif, .png, .jpeg/.jpg, .css, .html, .javascript, .doc, or .pdf and under 100kb.";
echo "
If you need to send me a file different from these specification, feel free toemail it to me at you@domain.com. These specifications are for the website's safety.";
}else{
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
mysql_query("INSERT INTO uploads(ID, URL) VALUES ('$client_ID', '$target_path')");
} else{
echo "There was an error uploading the file, please try again!";
}
}
}
...
?>

El script continúa un poco, pero he resaltado arriba en naranja las cosas básicas que necesitaremos para el noteboard. En primer lugar, vemos si el cliente está conectado, conectamos a la base de datos, e iniciamos la sesión.

Entonces, podemos obtener el client_ID. Si lo prefieres, puedes volver al formulario de acceso y establecer client_ID como una variable de sesión. Dependiendo de cómo sea usado nuestro script, puede ser más eficiente de esa manera. Se hizo de esta manera en el tutorial, para mostrar cómo podríamos llamar algunos datos más tarde que no estaban originalmente en las variables de sesión.

La última línea que destaca en color naranja es la de insertar los datos en la tabla, que se establece en el formulario desde la misma página.

Para personalizar esto a nuestra noteboard, vamos a poner todo lo que necesitamos en el lugar correcto y a unirlo con nuestra tabla. El código en realidad no es muy largo, pero hay un montón de comentarios para mayor claridad:

<?php
// Start the session
session_start();
// Check to see if the user is logged in
// If they're not, they are redirected and code further down
// the page won't be processed.
if(!isset($_SESSION['username'])){
header( 'Location: loginform.html' );
}
// Connect to the database
require('db.php');
// Get the client's ID and save it in the variable $client_ID
// Run the query to select the data
$client_ID = mysql_query("SELECT client_ID FROM clients WHERE username='".$_SESSION['username']."'")or die(mysql_error());
// Put that data into an array we can work with
$client_ID = mysql_fetch_array($client_ID);

// Select the client ID field from our array, and
// replace it into our original variable once again,
// "$client_ID" for ease of use
$client_ID = $client_ID['client_ID'];
// Insert our data into our newly created table
mysql_query("INSERT INTO noteboard(client_ID, date, message) VALUES('$client_ID', CURDATE(), '$_POST[message]')");
?>

Ponemos el código en nuestro archivo noteboard.php y probamos si funciona.

Cuando lo pongamos a prueba, el formulario se enviará pero no veremos nada desde noteboard.php. En lugar de eso, deberemos ir a phpMyAdmin para ver si funciona. Entra en la base de datos clientarea, y a continuación en la tabla “noteboard” para ver si se ha introducido alguna información.

Asegúrate de que el client_ID, la fecha y el mensaje son correctos. Si lo son, entonces ha funcionado y podemos proceder a mostrar las notas en la página.

Llamar a las notas de los clientes de la tabla.

El último paso es hacer una lista de las notas de los clientes. Esto debería ser muy similar a nuestra página documents.php donde veíamos los documentos cargados anteriormente. Para hacer una lista de todas las notas, seleccionamos todas las notas de nuestra tabla donde el “client_ID” coincide con el ID del cliente actual.

// Displays all current notes
$getNotes = mysql_query("SELECT * FROM noteboard WHERE client_ID='".$client_ID."'");
while($row = mysql_fetch_array($getNotes, MYSQL_ASSOC)){
echo "Publicado por".$_SESSION['username']." en ".$row['date']."<br /><p>".$row['message']."</p><hr />";
}

Crea unos mensajes de prueba para ver si esto funciona. Es posible que desees juguetear con el código HTML alrededor para asegurarte de que está libre de errores y se ve aceptable.

Una última cosa: Si queremos organizar nuestras notas por fecha, lo podemos hacer fácilmente con un fragmento de código. Agregamos lo siguiente en naranja a nuestro script:

// Displaysallcurrent notes
$getNotes = mysql_query("SELECT * FROM noteboard WHERE client_ID='".$client_ID."' ORDER BY date");

Esto ordenará automáticamente los datos por fecha, y los mostrará en ese orden.

Nuestro script final (noteboard.php)

<?php
session_start();
if(!isset($_SESSION['username'])){
header( 'Location: loginform.html' );
}
require('db.php');
$client_ID = mysql_query("SELECT client_ID FROM clients WHERE username='".$_SESSION['username']."'")or die(mysql_error());
$client_ID = mysql_fetch_array($client_ID);
$client_ID = $client_ID['client_ID'];
mysql_query("
INSERT INTO noteboard(client_ID, date, message)
VALUES('$client_ID', CURDATE(), '$_POST[message]')
");
// Displays all current notes
$getNotes = mysql_query("SELECT * FROM noteboard WHERE client_ID='".$client_ID."' ORDER BY date");
while($row = mysql_fetch_array($getNotes, MYSQL_ASSOC)){
echo "Posted by " . $_SESSION['username'] . " on " . $row['date'] . "<br /><p>"
. $row['message'] . "</p><hr />";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Portfolio - Area de cliente - Note Board</title>
</head>
<body>
<form action="noteboard.php" method="post">
<h3>Message:</h3><br />
<textarea name="message" cols="30" rows="10"></textarea><br />
<input type="submit" value="Submit" />
</body>
</html>

Terminando

Este tutorial es una revisión en su mayor parte de la página documents. Es muy similar, y con él podemos ver lo fácil que es alojar datos en línea y mostrarlos de acuerdo a las necesidades. Esto debería ser todo por parte del cliente, y finalmente veremos el área de administración.

La importancia de terminar arriba el lado del cliente es que ahora podemos planificar mejor el área de administración, porque ya sabemos exactamente qué tenemos que conseguir.

Anuncios

Ayúdame a mejorar. Deja un comentario:

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s