Página web de servicios online


Una web real, explicada paso a paso.

4.8 sobre 5 Total votos: 5

¿Cuántas veces habéis visto una web de servicios online y os habéis preguntado cómo se empieza, por dónde empiezo, cómo lo hago? Pues bien, en esta ocasión, este tutorial va dedicado a la construcción del servicio real (HaceYa.com) y del cual podéis ver el funcionamiento en dicho link.

Por supuesto, sólo podréis ver en dicho link la parte pública de la web, pero hay una parte privada que corresponde a los administradores que también se explica en los vídeos.

Este tutorial comienza desde cero, partiendo de dos plantillas gratuitas realizadas en Bootstrap 4, usaremos PHP 7 y MySQL 5.2, lo que asegura que esta web tardará muchos años en quedarse envejecida en cuanto a estructura de programación y desarrollo.

Es aconsejable al menos haber seguido las partes gratuitas de alguno de nuestros tutoriales, como el de Tienda Online 2017, aunque explicaremos también muchas cosas repetidas anteriormente, para que por fin podáis comprender entre varias explicaciones, el objeto de hacer las cosas de una determinada manera.

Puedes acceder al curso completo en la la página de suscripción donde verás los datos necesarios para inscribirte.

El objetivo de la web será crear un entorno donde por una parte, usuarios que busquen todo tipo de servicios online en una zona tendrán acceso a realizar propuestas para que otra parte de usuarios, esta vez, profesionales, puedan contactar con ellos para realizar dichos trabajos.

Algunos de los puntos que se desarrollan en el curso y se especifican en el temario:

  • Uso de las plantillas elegidas para el desarrollo
  • Creación de las plantillas para utilizarlas en Dreamweaver
  • Comprobación de existencia de e-mails al darse de alta.
  • Parte de Administración con plantilla separada de la parte pública
  • Envío de correos de aviso de comunicaciones a los usuarios
  • Script para subir imagen con barra de progreso
  • Diferentes niveles de acceso en función del usuario
  • Utilización de HTML5 para formularios
  • Ventanas flotantes para el acceso de usuario y para el alta del mismo.
  • Generación dinámica de formularios con campos variables en función de los datos introducidos en la base de datos
  • Protección del acceso a la administración por bloqueo de carpeta.
  • Generación de un servicio CRON o Tarea programada para el envío de notificaciones.
  • Generar la base de datos desde cero con un software gratuito.
  • Establecimiento de las relaciones entre los distintos campos de las tablas utilizadas para comprender el mecanismo de desarrollo.
  • Página de error que detecta accesos no deseados al sistema o prohibe el acceso a las mismas.
  • Validación de formularios con HTML5
  • Uso de Bootstrap 4 sobre PHP 7 y mySQL 5
  • Subir la página a un servidor remoto para publicarla, con su Base de datos, etc...

La Web final que queda después de todo el curso es la siguiente: haceya.com

Youtube

Curso Página Web de servicios online 2019


  • Curso disponible

    12 primeros capítulos de acceso gratuito.

Capítulo 1: Curso Página Web de servicios online 2019

Presentación del curso

Capítulo 2: Curso Página Web de servicios online 2019

Preparamos el entorno de trabajo y comenzamos a construir nuestra primera plantilla para que el proceso de desarrollo sea mucho más cómodo.

Capítulo 3: Curso Página Web de servicios online 2019

Finalizamos con la creación de la plantilla que usaremos en la parte visual de la página Web. Creamos una región editable que nos ayudará a clasificar las diferentes secciones de la Web.

Capítulo 4: Curso Página Web de servicios online 2019

Creamos nuestra primera página de plantilla. Creamos nuestra primera tabla de base de datos donde se guardarán los datos de usuario.

Capítulo 5: Curso Página Web de servicios online 2019

Creamos nuestra primera conexión a la base de datos y empezamos a manipular el formulario de acceso registrado de usuarios

Capítulo 6: Curso Página Web de servicios online 2019

Comenzamos con la creación de la página que logueará y dará acceso a nuestros usuarios al servicio como usuario logueado y le permitirá realizar acciones.

Capítulo 7: Curso Página Web de servicios online 2019

Finalizamos el procedimiento de acceso de usuario y comenzamos con el alta y registro de usuario que nos dará los datos para luego poder acceder como un usuario real al servicio.

Capítulo 8: Curso Página Web de servicios online 2019

Completamos el formulario de alta y empezamos con la consulta que nos introducirá los datos del nuevo usuario dentro de la base de datos.

Capítulo 9: Curso Página Web de servicios online 2019

Finalizamos el alta de usuario, codificando la contraseña con SHA256 para mayor seguridad. Comenzamos con la creación de la tabla en la que guardaremos todas las consultas que se realicen a la base de datos, lo que nos facilitará encontrar errores de desarrollo y de posterior funcionamiento de la página.

Capítulo 10: Curso Página Web de servicios online 2019

Creada la función que nos permitirá controlar todas las consultas que se hagan a la base de datos desde nuestra web.

Capítulo 11: Curso Página Web de servicios online 2019

Creamos la función para comprobar que el correo electrónico de un usuario nuevo no existe ya en la base de datos y evitamos duplicados. Gestionamos el menú superior para ocultar el botón de acceder cuando el usuario está logueado.

Capítulo 12: Curso Página Web de servicios online 2019

Creamos el logout del usuario, y ajustamos el menú a nuestras necesidades. Solventamos el error del espacio vacío en la parte superior de la web. Cambiamos las imágenes del slider.

Completamos los textos del menú y ajustamos el estilo. Creamos la tabla de categorías que dirigirá toda nuestra página web porque será donde las personas elijan el flujo de la información.

Preparamos la primera consulta a la base de datos para obtener las categorías principales en el buscador que habrá en la página principal

Utilizamos las ventajas de bootstrap para realizar un filtro sobre la información que pongamos en un campo. Organizamos los resultados para que todo se vea coherente y facilite el trabajo del usuario.

Creamos dos listas para los resultados y solucionamos el tema de los acentos, para que no sean determinantes a la hora de buscar una información

Arreglamos el diseño y la forma de mostrar la información en la página principal y comenzamos a definir los dos tipos de formulario que necesitaremos para que los usuarios puedan solicitar un servicio.

Creamos el formulario que nos servirá para actualizar la información de contacto del usuario y de la persona que ofrece sus servicios.

Mostramos las provincias para que pueda seleccionar varias de ellas a la hora de seleccionar de dónde quiere recibir trabajos el profesional, así como empezamos con la lista de las categorías sobre las que es especialista el usuario.

Comenzamos con la lista de categorías, donde el usuario podrá seleccionar todas aquellas en las que vaya a poder desempeñar un trabajo profesional. Usaremos parte de la programación de index.php para aprovechar información

Organizamos la forma de mostrar la información y distinguimos entre los dos formularios que tenemos en la misma página, porque la información será diferente para cada tipo de usuario.

Creamos la tabla que nos almacenará la información para cuando un usuario almacene la provincia donde quiere trabajar.

Procesamos la información de cada una de las provincias y eliminamos los datos anteriores que teníamos para disponer de la información justa en la tabla de la base de datos.

Procesamos la información de las categorías, que será muy similar a como hemos procedido con las provincias. Insertamos el código para subir una imagen del usuario con una barra de progreso.

Finalizamos el procedimiento para subir la imagen de logo de usuario, permitimos que se sobreescriba la imagen y le damos el nombre que nos viene bien para la base de datos.

Añadimos un campo de tipo textarea donde se mostrará la información de presentación de cada usuario que ofrezca trabajos. Creamos una página para el listado de resultados.

Creamos una página donde el usuario seleccionará la provincia para la que necesita el servicio. Será un form muy sencillo para que la navegación y usabilidad del sitio sean agradables.

Creamos la página final donde pediremos a través de un form los datos que necesitamos de la persona para crear una solicitud. Detectaremos si el usuario se ha logueado previamente y si no le invitaremos a hacerlo para poder tener sus datos de contacto.

Añadimos la tabla de solicitud para guardar los datos de las solicitudes que nos vayan entrando. Creamos algunos usuarios ofertantes, que nos servirán para mostrar los resultados previos de ellos mismos cuando se esté buscando un servicio.

Utilizamos MySQL Front para que nos ayude a hacer una consulta que relacionará 3 tablas de la base de datos para obtener los resultados relacionados con la provincia y la categoría de cada usuario.

Creamos la página individual donde se mostrarán todos los datos del profesional que estamos buscando, también irán aquí las valoraciones, comentarios, etc.

Comenzamos a desarrollar la plantilla de lo que será la página de administración. Utilizaremos las plantillas de Dreamweaver para acelerar la productividad del desarrollo.

Creamos la página principal basándonos en la plantilla y comenzamos con la página para gestionar los usuarios del sistema, tanto los que ofertan servicios, como los que los ofrecen.

Comenzamos con la paginación de los resultados de los usuarios en esta página, para verlo de una forma organizada y poder saltar por los grupos de usuario que determinemos.

Gestionamos los datos del usuario que queremos mostrar, la imagen, el nombre, etc. Creamos una función muy sencilla para mostrar la fecha en formato europeo, con la posibilidad de mostrar la hora también

Empezamos a crear el apartado para poder modificar los datos de usuario, especialmente el campo de si están activos o no, así como el campo donde los usuarios completan su texto de presentación.

Obtenemos los datos que necesitamos del usuario y creamos un formulario donde se nos permitirá modificar los datos como la presentación y el estado del usuario.

Hacemos un UPDATE para actualizar los datos en nuestra base de datos y le mostramos al usuario un aviso para que vea si necesita volver a un apartado o al otro en función de sus necesidades.

Iniciamos el formulario para buscar los datos dentro de los usuarios, nos servirá para el resto de páginas donde queramos utilizar este tipo de listados.

Arreglamos el buscador para que funcione como búsqueda sobre diferentes campos. Realizamos un pequeño truco para poder volver a la página donde estábamos dentro de los dos tipos de usuario. Colocamos el logo en la administración.

Volvemos al frontend para ocuparnos de registrar, mediante Ajax, y de forma muy sencilla, las visitas que se realicen a cada usuario que ofrece servicios. Este guardado de información será transparente al usuario.

Completamos el sencillo código en Ajax con PHP donde guardamos la información y el tipo de visita realizado.

Preparamos el entorno para que los usuarios profesionales reciban un correo electrónico con la propuesta que se ha enviado. Guardamos toda la información en tablas donde distinguiremos el estado.

Preparamos la tabla que almacenará la información de cada solicitud y guardará registro de los correos enviados. Generaremos un servicio CRON o tarea programada, que nos permitirá el envío de correos de forma automatizada.

Generamos dinámicamente el correo con los datos que se enviará a los usuarios profesionales que tengan las características adecuadas para recibir una nueva propuesta de trabajo de un usuario de la página.

Actualizamos los estados de las solicitudes enviadas y guardamos el correo que se enviará a los diferentes usuarios en la base de datos por si los queremos consultar en el futuro.

Preparamos la página donde se mostrarán los datos completos del solicitante en base al link generado para el correo electrónico.

Contrastamos la información del número de visitas que ha tenido una solicitud para saber si el usuario puede ver los datos de contacto o no, e indicárselo en su caso.

Construimos el área donde se verán las diferentes solicitudes y su estado, comenzamos con los usuarios que realizan las solicitudes y mostramos tablas con sus resultados.

Habilitamos la posibilidad de cambiar el estado de las solicitudes para que el usuario tenga total visibilidad para todas sus propuestas y preparamos la valoración de las mismas.

Utilizamos estrellas para valorar el trabajo que nos hayan realizado, además de un texto donde el usuario podrá introducir la información que necesite.

Ampliamos el formulario para indicar cuál ha sido el usuario asignado que estamos valorando. Añadimos campos en la base de datos para poder almacenar toda esta información

Insertamos en la base de datos la información de la valoración, que podrá ser consultada por otros usuarios.

Mostramos las valoraciones del usuario en los resultados de la búsqueda de profesionales. Ajustamos los valores y los parámetros que necesitemos para mostrar la información como queremos.

En la página de detalle, obtendremos la información de los comentarios realizados a cada uno de los profesionales, y nos quedará una página con información muy completa.

Procesamos los datos de cada comentario, incluidas las estrellas que se mostrarán de forma separada para proporcionar los datos de cada valoración

Finalizamos el asunto de las estrellas de valoración y comenzamos a crear URL amigables, o "SEO friendly" para las direcciones de nuestros profesionales.

Generamos el archivo htaccess para las URL amigables y comenzamos a subir a un servidor real toda la información que necesitamos para que la web funcione en un entorno público

Subimos finalmente la base de datos y configuramos los ficheros para adaptarlos al nuevo entorno de trabajo en real.

Solucionamos los problemas para el funcionamiento correcto en remoto. Creamos el CRON o la tarea programada para el envío automatizado de correos. Comenzamos con la notificación de las cookies.

Aclaramos mejor el tema de las cookies y comenzamos a construir la función que enviará los correos electrónicos con los diferentes avisos.

Finalizamos el tema de envíos de correos para que nos funcionen también dentro de la tarea programada que tenemos instalada.

Finalizamos la página de solicitudes para los profesionales, para que puedan ver los datos de las mismas y tener un almacén de ellas.

Páginas finales y finalización del curso, adaptación del menú según la página en la que estamos.

Suscripción

Tipo de acceso Qué incluye Precio
Acceso Online por tiempo ilimitado y ficheros con archivos utilizados.
  • Acceso online a los vídeos del tutorial al que te inscribes por tiempo indefinido
  • Descarga del código fuente
  • Recepción del acceso a los vídeos en 2-3 días
  • Respuesta preferente a dudas del tutorial durante 30 días
Ver
Descarga directa de vídeos con archivos utilizados El acceso en descarga incluye lo anterior y:
  • Descarga de los videos en calidad FullHD
  • Trabaja los tutoriales sin estar conectado a internet
Ver