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

Buenos días a todos. Para empezar con mi blog, voy a hacer un tutorial en español, para crear un área de cliente de una cartera personal o portfolio, usando PHP y MySQL, aunque también veremos algo de HTML y JavaScript para los formularios y validaciones. El diseño corre de vuestra cuenta. En él, el cliente podrá inscribirse/iniciar sesión, ver su proyecto actual, enviar notas al diseñador, subir documentos, mirar facturas y más.

Un área de cliente no es algo muy común en las carteras, pero suele ser una gran adición a cualquier portfolio. Si estás cansado de usar 10 herramientas diferentes a través de la web para el control de tus clientes, esta es una solución para ponerlo todo en un solo lugar. En el tutorial de hoy, vamos a planear el proyecto, crearemos la base de datos MySQL y usaremos PHP para crear un formulario de inscripción del cliente. Para aquellos que ya conozcan PHP, esta parte será un poco básica, pero si tienen paciencia se hará más intensa.

Este tutorial se divide en varias partes, dejando espacio para el debate y adiciones según sea necesario.

Planificación de los comandos.

Con el fin de crear una planificación para la organización del guión, tenemos que presentar lo que el guión debe hacer:

  • Dejar que el cliente se registre/entre a su propia cuenta y perfil.
  • Crear un área de carga mutua para el cliente y diseñador para compartir documentos e imágenes.
  • Crear un “tablero de mensajes” para el cliente y el diseñador, para dejar notas entre ambas partes.
  • Añadir una sección para las facturas y procedimientos de pago.
  • Algún tipo de sistema de administración que permita al diseñador controlar clientes, su información y datos en el área de cliente.

Para organizarnos, echemos un vistazo a lo que vamos a necesitar para la estructura de directorios:

Estructura de directorios

Si la estructura anterior no tiene sentido, no te preocupes, vamos a trabajar a través de ella para explicarla. Ten en cuenta que esta estructura puede cambiar dependiendo de nuestras necesidades: esta es sólo para la organización inicial.

Viendo todo lo necesario para la funcionalidad de la secuencia de comandos, esta no va a ser una tarea fácil y rápida. Sin embargo, un script como este va a ser fácilmente personalizable para cada diseñador, y permitirá ahorrar incontables horas en la gestión de clientes.

Creando la base de datos MySQL

Crearemos una base de datos MySQL a través de phpMyAdmin. Echemos un vistazo a algunos de los datos que necesitaremos en la base de datos:

  • ID único (Para el perfil de cada cliente y sus distintos datos)
  • Nombre del cliente (Nombre de usuario)
  • Contraseña
  • Dirección de correo electrónico
  • Dirección de PayPal (vamos a asumir que el diseñador toma la información de Paypal para los pagos en este tutorial. Cambiar la información de pago, según sea necesario)

Eso nos dará un buen comienzo. Podremos añadir más campos después. Vamos a seguir adelante y formaremos la base de datos.

  1. Abre phpMyAdmin. Ve a “Bases de datos” en la parte superior y crea una nueva base de datos llamada “clientarea”. Creando la base de datos
  2. Esto llevará a una nueva área que permitirá crear algunas tablas dentro de la base de datos. Por ahora estamos creando una tabla para mantener a nuestros clientes, así que simplemente crearemos una nueva tabla y la llamaremos “clients”. La tabla recibe 5 campos de las 5 piezas de información que cada cliente tendrá en la base de datos: ID único, nombre, contraseña, correo electrónico y dirección de PayPal. El campo de contraseña lo estableceremos con una longitud de 32 caracteres. Más adelante veremos por qué.Campos a crear
  3. El siguiente paso será configurar los campos. A continuación se muestra una imagen de ellos, sus tipos y valores de longitud. Si lo desplazamos a la derecha, veremos que “client_id” se establece como clave primaria y autoincremental. Esto creará automáticamente identificadores únicos para los clientes.Clave primaria y A_I
  4. Vamos a insertar unos datos de ejemplo para probarlo. Vayamos a “SQL” en las pestañas superiores e insertaremos el siguiente código para crear un nuevo cliente.
INSERT INTO clients VALUES('', 'jotace_91', 'password', 'josecarlosnietoramos@hotmail.com', 'josecarlosnietoramos@hotmail.com');

Cuando hagamos clic en “Examinar” en la parte superior, podremos ver nuestros datos introducidos.

Eso debería ser todo por ahora en nuestra base de datos. El siguiente paso es crear un formulario de registro para trabajar con la base de datos e insertar automáticamente la información del cliente.

Crear un formulario de registro.

Vamos a crear un formulario de inscripción para la primera conexión del cliente a la base de datos, para enviar la información a la base de datos a través de un formulario HTML.

1. Para empezar, vamos a crear el formulario HTML básico, con el atributo de acción que conducirá a nuestra misma página PHP: “singup.php”. Creamos el archivo singup.php y lo abrimos con el bloc de notas, Notepad++, Dreamweaver o nuestro programa de edición preferido.

<html>formulario
<head>
<meta charset="ISO-8859-1" />
<title>Registrarse</title>
</head>
<body>
<?php
//Aquí nuestro código PHP
?>

<form action="singup.php" method="post">
 Nombre de usuario:<br />
 <input name="username" type="text" autofocus /><br />
 
 Contraseña:<br />
 <input id="pw" name="password" type="password" /><br /> 
 
 Repetir contraseña:<br /> 
 <input id="pw2" name="password" type="password" /><br />
 
 Email:<br />
 <input name="email" type="email" /><br />
 
 Dirección de Paypal:<br />
 <input name="paypal" type="email" /><br />
 
 <input type="submit" value="Registrarse" />
 </form>

</body>
</html>

2. Como te darás cuenta, estamos usando el método POST en el formulario. Para obtener más información sobre el método POST en PHP y otros usos de las variables predefinidas, echa un vistazo a las variables predefinidas en PHP.

3. A continuación, vamos a escribir el código PHP en el mismo archivo. Con ello nos ahorraremos tener distintos archivos para cada función y obtendremos una organización más limpia de nuestros documentos. Debajo se muestra el código básico para insertar de esta forma los datos en la base de datos. Tengamos en cuenta que no hemos hecho db.php todavía, y tenemos mucho más que añadir a este código. Los comentarios dentro del código explican lo que está pasando. (Colocar este código en un editor como Notepad++ colorearán este código para una compresión más fácil).

<?php
// Necesitaremos conectarnos a la base de datos
require('db.php');
// Si aún no se han introducido datos, se ignora el código PHP
// Y se carga el resto de la página.
if (!empty($_POST)) { 

// Guardamos los valores de los campos del formulario en variables.
$username = $_POST["username"];
$password = $_POST["password"];
$email = $_POST["email"];
$paypal = $_POST["paypal"]; 

// Creamos la consulta que nos insertará los datos
$result = "INSERT INTO clients (client_ID, username, password, email, paypal) VALUES ('', '$username', '$password', '$email', '$paypal')"; 
// Ejecutamos la consulta
$sql = mysql_query($result);
// Mostramos un mensaje de confirmación 
echo "Gracias por inscribirte.<br />"; 
echo "Ahora puedes <a href='login.php'>iniciar sesión</a>";
}
?>

3. Creamos un archivo “db.php” Vamos a conectarnos a la base de datos con él. En los comentarios del código veremos más de cerca cómo funciona.

< ?php
// Reemplaza estos parámetros con la información de tu BD.
// Uso mi propio servidor, por lo tanto mi nombre de usuario es root
// y no tengo contraseña. Esto será distinto en un servidor.
$conn = mysql_connect("localhost","root","");
// mysql_select_db es una función predefinida en MySQL
// contiene la llamada a la base de datos, para poder guardarla
// en nuestra variable $db
$db = mysql_select_db("clientarea", $conn);

// Cuando un archivo contiene solo PHP es una buena práctica
// no terminar el archivo con ”?>”

4. Con esto terminado, vamos a seguir adelante y finalmente probar nuestro formulario. Escribo Juan como nombre de usuario, “abc123” como contraseña y dos cuentas de correo electrónico para el email y el campo de PayPal.Datos insertados

Ahora que hemos creado con éxito nuestro formulario de registro, podemos continuar con nuestro script.

Terminando

Acabamos por ahora con esta primera parte del tutorial. En la segunda parte veremos algunos temas de seguridad (cifrado de contraseñas, prevención de ataques de inyección SQL), y explicaré cómo validar los campos de contraseña con un poco de JavaScript. Para cualquier duda o sugerencia, podéis escribirme en los comentarios y contestaré encantado.

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