Aplicación de una agenda básica con PHP MySQL

Una manera sencilla de desarrollar una aplicación sencilla: una agenda básica.
 
La agenda básica desarrollada se acerca a una necesidad real: la misma que ofrece un desarrollo sencillo e explicativo con comentarios en cada fragmento de código en el archivo fuente. Hemos escogido trabajar con PHP y MySQL porque es el lenguaje perfecto para pequeñas y grandes aplicaciones web. Por el momento no tiene insertada librerías para una mejor interfaz, pero es de gran utilidad a la hora de presentarlo.

Nota: para ver una mejor interfaz de la aplicación podemos hacer uso de plugins u hojas de estilo (snippets de código CSS). A continuación les dejo los enlaces.

www.jqueryplugins.com (plugins Jquery).
css-tricks.com/snippets (fragmentos de código).

1.-Planteamiento del problema

En la agenda que desarrollaremos necesitamos agregar, eliminar y editar una cita, así como también la selección de la hora de dicha cita, y cómo para mover la cita a otro día, según sea la necesidad del usuario.

2.- Lógica de la aplicación agenda

Vamos a presentar en dos gráficos el funcionamiento de nuestra aplicación, lo cual nos dará un mejor entendimiento de lo que lograremos hacer.

3.-Diseñamos la base de datos

Después de haber planteado nuestro problema ya tenemos una idea de cómo seria nuestra base de datos, así pues manos a la obra, necesitaremos lo siguiente:

Nombre de la base de datos – agenda
Nombre de la tabla - citas
idcita – para incrementar el número de registros de las citas
horacita – para almacenar la hora en que se va a realizar la cita
diacita – el dia en se haga la cita
asuntocita – y el asunto de la cita, en tal caso la descripción de la misma.

Nota: la base creada la tengo en un archivo .sql para que sea de facilidad para que el que la quiera emplear, las ajuste a sus necesidades.

Estructura de nuestra agenda

Es importante conocer la estructura de nuestra aplicación para saber cuáles son los archivos que van a intervenir y cuáles son las hojas de estilo que utilizaremos, los plugins etc. En nuestro caso, tenemos un directorio sencillo, el cual podremos ver en el siguiente gráfico:

4.- Creación del index

El siguiente paso es empezar a crear el "index" de nuestra agenda. Primero incluimos el código que nos llevará a las otras páginas, según las acciones que realicemos en dichos botones.

<head>
<script language="javascript" type="text/javascript">
/* Las siguiente función de JavaScript envía el formulario a la página que corresponda al botón pulsado. */
function saltar(pagina){
document.formularioCitasPrincipal.action=pagina;
      document.formularioCitasPrincipal.submit();
}
/* Aquí termina la función de envío del formulario. */
</script>
   <title>Mini-agenda</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

En el siguiente fragmento incluimos las librerías, como la fecha y la conexión a nuestra base de datos, así como nuestra primera consulta.

El archivo inc es el que contendrá la codificación para mostrar la fecha actualizada en nuestra aplicación, quiero decir la hora en que se edite, modifique o elimine una cita. Y otro archivo que es el que indicamos qué base de datos usamos.

<body>
<?php
// Se incluye el miniscript que abre la base de datos.
include ("inc/fechas.php");
// Se incluye el miniscript de tratamiento de fechas
include ("inc/usarBD.php");
/* Se crea una consulta para recuperar todos los datos de las citas con fecha del día en curso.
La consulta de selección se crea de tal modo que ordene las citas por la hora. */
$consulta="SELECT * FROM citas WHERE diacita='".$fechaEnCurso."' ORDER BY horacita;";
/* Se ejecuta la consulta de selección.*/
$hacerConsulta=mysql_query($consulta, $conexion);
/* Se determina el número de registros recuperados por el cursor, porque si es 0 el
diseño de la página (parte HTML) es diferente que si hay registros. */
$numeroDeCitasDelDia=mysql_num_rows($hacerConsulta);
echo ("Citas del día: ".$numeroDeCitasDelDia.salto);
?>
AGENDA DEL DÍA:
<?php
/* Se muestra la fecha del día. */
echo ($diaActual." del ".$mesActual." de ".$annioActual);
   ?>

Creamos el campo de entrada de objetos un "texarea" donde digitaremos la descripción de nuestra de la cita para nuestra agenda.

<!-- El formulario no tiene valor en el parámetro action porque se le
asigna por una función javascript antes de enviarlo. La función que se ejecute
y, por tanto, el valor de este parámetro, depende del botón pulsado por el usuario.-->
<form action="" method="post" name="formularioCitasPrincipal" id="formularioCitasPrincipal">
<!-- El siguiente campo oculto almacena la fecha en curso, obtenida desde PHP.
Este dato se enviará a otros formularios y, a su vez, se rcuperará desde la
página de cambio de fecha actual. -->
<input type="hidden" name="fechaEnCurso" id="fechaEnCurso" value="<?php echo($fechaEnCurso); ?>">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr><th>CITAS</th></tr>
</table>

Por último, comprobaremos en una tabla el número de consulta que ha hecho el usuario y así poderlo mostrar OCN su respectiva fecha y hora de realización. Los botones que se crean como por ejemplo:

Eliminar cita
Agregar cita
Modificar cita

El siguiente fragmento de código lo explica fácilmente:

/* Se comprueba si hay citas en el cursor. Si es así, se dibujará una
tabla en la que se mostrarán las citas y unos botones de selección. */
if ($numeroDeCitasDelDia>0){
echo ("<table width='500' border='0' cellspacing='0' cellpadding='0'>");
while ($cita = mysql_fetch_array($hacerConsulta, MYSQL_ASSOC)) {
echo ("<tr><td>".$cita["horacita"]."</td>");
echo ("<td>".$cita["asuntocita"]."</td>");
/* Cada cita tiene asociado un botón de selección para si el usuario quiere
modificarla o borrarla. El valor del botón es el identificativo de la cita,
de modo que se usará en las correspondientes consultas de actualización o
eliminación en las páginas que proceda.*/
echo ("<td><input type='radio' id='citaSeleccionada' name='citaSeleccionada' value='".$cita["idcita"]."'>");
echo ("</td></tr>");
}
echo ("</table>");
/* Si existen citas se mostrarán los botones de borrar y modificar. */
echo ("<input name='borrarCita' type='button' id='borrarCita' value='Eliminar Cita' onClick='javascript:saltar("eliminarCita.php");'>".salto);
echo ("<input name='cambiarCita' type='button' id='cambiarCita' value='Modificar cita' onClick='javascript:saltar("cambiarCita.php");'>".salto);
}
/* En todo caso se mostrarán los botones de agregar cita y cambiar la fecha en curso. */
echo ("<input name='nuevaCita' type='button' id='nuevaCita' value='Agregar cita' onClick='javascript:saltar("agregarCita.php");'>".salto);
echo ("<input name='cambiarFecha' type='button' id='cambiarFecha' value='Otro día' onClick='javascript:saltar("cambiarFecha.php");'>".salto);
?>
</form>
</body>
</html>

Eso es todo por el momento en cuanto a nuestro index en los siguientes archivos como "eliminarcita.php" y demás explica línea por línea el código.

En este link vamos a ver los archivos del código fuente donde está alojada nuestra agenda:
Archivo de descarga
 

Autor

Brian Hernández

Brian Hernández entusiasta PHP teniendo como objetivo compartir conocimiento y empezando a introducirme en el desarrollo de apps multiplataforma.
Desarrollador de apps multiplataforma.

Compartir

Comentarios

Rubén

25/4/2013
Archivo .sql
¿Dónde puedo descargar el archivo .sql?

anthonyernestoruiz

26/4/2013
como mostrar los procesos de insert que han ejecutado en mi base de datos mysql
Buenos dias necesito que me ayuden, hacerca de una duda que tengo de como mostrar los procesos de inserciones que se estan ejecutando en mi base de datos mysql algo similar a lo que hace show process list, osea que me muestre los detalles de los insert que han echo los usuarios de mi web

Vimad

03/5/2013
Excelente
Que buen trabajo.
Muchas gracias por compartirlo.
Un saludo desde Colombia.

hevelmofrial

23/5/2013
fecha adelantada
hola con respecto a la fecha por ejemplo en el index muestra la fecha del 23 de 05 del 2013 siendo que debe mostrar la del 22 de 05 del 2013 mas o menos

AGENDA DEL DÍA: 23 del 05 de 2013
debe ser:
AGENDA DEL DÍA: 22 del 05 de 2013

como se puede corregir este dato?

muchas gracias por este articulo es en ralidad de mucha ayuda aprender de tus conocimientos de programacion web con php (y)

hevelmofrial

23/5/2013
duda aclarada
muchas gracias por este articulo (y)

Fernando

18/6/2013
Creditos
Excelente articulo, voy a utilizar el código, quien es la persona que hizo este articulo para poder darle los créditos que merece?

flor

19/7/2013
jk
hjjjklsedflñdsfkldsfkdsdsk

stick

05/8/2013
ENLACE DELOS ARCHIVOS
buenas noches amigos quisiera saber no entiendo la manera en que podria enlazar todos esos archivos para generar las imagenes mostradas al principio de la publicacion

Alex

21/12/2013
buen aporte
muy buen aporte

Rubens

27/12/2013
Buen Ejemplo
Gracias por tu aporte, me ayudará bastante.

fritx

31/12/2013
se ve bien
algo asi estaba buscando, lo bajaré y probaré, muchas gracias por la aportacion

carloncholinuxero

19/1/2014
Bravo !
Gracias por la información...a aprender

Ramiro Sanchez

07/3/2014
Agenda
Es un excelente ejemplo, desde hace mucho buscaba algo similar y me ayudara muchisimo, ya lo probe y es perfecto MIL GRACIAS!!! desde CALI - COLOMBIA!

wendy2013

28/4/2014
No puedo acceder al archivo
Hola buenas no puedo acceder al código fuente.Alguien me lo podría facilitar.Gracias!!!

Jesus Eduardo

05/6/2014
sql
Donde esta el .sql????

alfonso lima

17/7/2014
buen ejemplo
donde ver el archivo sql

David

25/11/2014
Excelente
Que depinga solo falta adornarlo pero eso es lo de menos

pitbulltroll

23/1/2015
Muy bueno,
solo falta hacer validaciones para que no encime o repita en la misma fecha y hora citas!

jeinz

16/4/2015
Onclick
Muy buen aporte pero la funcion onClick no me direcciona hacia la otra pagina?

manolo inoa

07/6/2015
me gusto el codigo
gracias muy bueno.
pero lo subí a mi servidor funciona pero quisiera si no es mucha molestia
que me dirija como puedo hacerle a dicho código un login y luego de hacer el pedido la
cita le envíe un correo a quien realizo el pedido y a quien se le hizo dicha solicitud par tener pendiente la cita.

gracias espero sea rápido ya que tengo un proyecto par entregar la próxima semana. gracias

Miguel

07/7/2015
Excelente
Muchas Gracias, excelente ayuda....muy agradecido.

Esteban

23/7/2015
3 Capas
Hola que tal amigo, para que este proyecto de la agenda funcione en 3 capas que es lo que tengo q hacer o modificar del código para implementarlo y si se puede hasta n capas???? AYUDA PORFAVOR GRAX

Michi

01/10/2015
donde esta SQL
donde puede descargar el SQL

Justo

08/3/2016
Asunto
Muy bueno, gracias por compartirlo. Saludos desde Lima-Perú.

jor

24/4/2016
donde puedo encontral el sql
donde puedo encontrar el sql

Fabian

08/7/2016
Super buena publicación
Estos aportes son los que hacen que php sea lo lo mejor, gracias

joel

13/7/2016
citas
en php como hago un registro de citas

dreMox

09/9/2016
base de datos
dentro de los archivos hay un crearbase.php este archivo lo ejecutas desde el navegador y desde el localhost, esto genera la base de datos.

Isa

11/11/2016
Pregunta
Hola, gracias por el aporte.....me preguntaba si se puede validar la fecha, es decir para que no permita insertar las dos citas a la misma hora el mismo dia.....por ejemplo si quiero una cita para hoy 11/11/16 a las 11:30.... que no se pueda insertar una cita a la misma hora por que esa ya estaria ocupada.

Argelis

28/11/2016
me sale Error
Fatal error: Uncaught Error: Call to undefined function mysql_connect() in C:xampphtdocsds7 uevaagendaincusarBD.php:2 Stack trace: #0 C:xampphtdocsds7 uevaagendaindex.php(20): include() #1 {main} thrown in C:xampphtdocsds7 uevaagendaincusarBD.php on line 2

Diego Olivares

14/12/2016
agenda simple
como lo puedo hacer para agregar validaciones para que no se agente la misma hora en un mismo dia y muestre solo lo que esta disponible?