Como hacer un CRUD EN PHP Y MYSQL | BOOTSTRAP - MVC #01 - Interfaz

Informatica Studios

24 Jun 202211:50

Summary

TLDREste video tutorial presenta la creación de un proyecto en PHP y MySQL utilizando Bootstrap para agilizar el desarrollo. Se inicia mostrando una base de datos llamada 'cruz php' con dos tablas, pero se utiliza solo la 'persona'. Seguidamente, se crea un proyecto desde cero en la carpeta 'proyectos php', estructurado con carpetas para 'modelo' y 'controlador', y un archivo 'index.php'. Se incluyen Bootstrap y se muestra cómo personalizar un formulario y una tabla para la inserción y visualización de datos de personas, añadiendo estilos y botones para editar y eliminar registros.

Takeaways

😀 Se inicia una serie de videos sobre la creación de un proyecto en PHP y MySQL utilizando Bootstrap.
💾 Se muestra una base de datos llamada 'cruz php' con dos tablas, pero solo se utilizará la tabla 'persona'.
🛠 Se recomienda que se tenga corriendo el servidor Apache y MySQL para el desarrollo del proyecto.
📁 Se crea un nuevo proyecto en la carpeta 'proyectos php' dentro de 'htdocs' y se estructura con carpetas para 'modelo' y 'controlador'.
📝 Se crea un archivo 'index.php' y se incluyen las referencias a Bootstrap para facilitar el diseño y el estilo de la página.
🌐 Se realiza una prueba de funcionamiento mostrando un mensaje 'hola mundo' y se verifica en el navegador local.
🎨 Se agregan estilos para mejorar la presentación del texto y se divide la página en dos secciones, una para el formulario y otra para la tabla de datos.
📝 Se crea un formulario con campos para el nombre, apellido, DNI, fecha de nacimiento y correo electrónico, y se incluye un botón para registrar.
📊 Se implementa una tabla para mostrar los registros de personas, se personalizan los encabezados y se agrega un campo adicional para botones de acción.
✂️ Se agregan botones de edición y eliminación en la tabla, y se utilizan iconos de Font Awesome para mejorar la interfaz de usuario.
🔧 Se realizan ajustes finales de estilo y se planea continuar con más funcionalidades en el siguiente capítulo del tutorial.

Q & A

¿Qué tipo de proyecto se está creando en el script?
-Se está creando un proyecto desde cero utilizando PHP y MySQL, con Boostrap para facilitar el proceso de desarrollo web.
¿Cuál es el propósito de las carpetas 'modelo' y 'controlador' mencionadas en el script?
-Las carpetas 'modelo' y 'controlador' se utilizan para organizar el código del proyecto siguiendo el patrón de diseño MVC (Modelo-Vista-Controlador), donde el modelo gestiona los datos, el controlador maneja la lógica de negocio y la vista muestra la información al usuario.
¿Qué versión de Boostrap se recomienda usar según el script?
-Según el script, se recomienda usar Boostrap versión 5.2, que es la última versión en el momento de la grabación del video.
¿Cómo se incluye Boostrap en el proyecto?
-Para incluir Boostrap en el proyecto, se copian los enlaces de CDN correspondientes desde la documentación oficial de Boostrap y se pegan en el archivo HTML dentro de las etiquetas <head> y antes de cerrar la etiqueta </body>.
¿Qué significa el 'hola mundo' en el contexto del script?
-El 'hola mundo' es un mensaje simple que se muestra en una página web para probar que el proyecto se está ejecutando correctamente y que el servidor está funcionando adecuadamente.
¿Cómo se divide la página web en secciones según el script?
-La página web se divide en dos secciones principales: una para mostrar un formulario de registro y otra para mostrar una tabla con los registros de personas.
¿Cuáles son los campos del formulario de registro mencionados en el script?
-Los campos del formulario de registro incluyen nombre, apellido, DNI, fecha de nacimiento, correo y un botón para enviar la información.
¿Cómo se agregan estilos a la página web en el script?
-Se agregan estilos a la página web utilizando clases de Boostrap y personalizando ciertas propiedades CSS como 'text-center' para centrar el texto y 'padding' para dar espacio alrededor de los elementos.
¿Qué biblioteca de iconos se menciona para agregar íconos a los botones?
-Se menciona la biblioteca Font Awesome para agregar íconos a los botones de editar y eliminar en la tabla.
¿Cómo se implementa la tabla para mostrar los registros de personas?
-Se implementa la tabla copiando un código de ejemplo de la documentación de Boostrap y personalizando los encabezados y los registros para adaptarlos a los datos de las personas.
¿Cuál es la finalidad de los botones de editar y eliminar en la tabla?
-Los botones de editar y eliminar se utilizan para modificar y eliminar registros específicos de la tabla de personas,respectivamente, permitiendo la manipulación de los datos presentados.

Outlines

00:00

😀 Introducción al proyecto PHP y MySQL

El vídeo comienza con una introducción al proyecto de creación de un sitio web utilizando PHP y MySQL, con la ayuda de Bootstrap para facilitar el proceso. Se menciona que se trabajará con una base de datos llamada 'cruz php' que contiene dos tablas: 'persona' y 'usuario', aunque solo se utilizará la tabla 'persona'. Se muestran dos registros de ejemplo y se hace hincapié en la necesidad de tener los servicios de Apache y MySQL en funcionamiento. Se procede a crear un proyecto desde cero en la carpeta 'proyectos php', utilizando Visual Studio Code, y se crean carpetas para 'modelo' y 'controlador', así como un archivo 'index.php'. Se incluyen enlaces a Bootstrap y se muestra cómo agregar un mensaje 'Hola Mundo' para probar la configuración del proyecto.

05:03

🛠️ Configuración y estilos del formulario

En este párrafo, se describe cómo se configura y se estila un formulario en el proyecto. Se habla sobre la adición de clases para centrar el texto y agregar padding. Se divide la página en dos secciones, una para el formulario y otra para mostrar la tabla de registros. Se crea un nuevo 'div' con clases 'container fluid' y 'row' para incluir el formulario. Se utiliza la documentación de Bootstrap para copiar y pegar un formulario básico, y se personalizan los campos del formulario para incluir campos de nombre, apellido, DNI, fecha de nacimiento y correo. Se agrega un botón de registro y se centra el título del formulario. Se agrega otro 'div' para mostrar la tabla de registros y se personalizan los encabezados de la tabla para incluir los campos necesarios.

10:03

✂️ y 🖊️ Agregar botones de edición y eliminación

El vídeo continúa con la adición de funcionalidades de edición y eliminación en la tabla de registros. Se agrega un campo vacío en la tabla para incluir botones de acción. Se utilizan íconos de Font Awesome para los botones de edición y eliminación, buscando y copiando los íconos correspondientes. Se estilan los botones agregando clases para hacerlos pequeños y de color naranja para el botón de eliminar. Se actualiza la página para ver los cambios y se concluye el vídeo con la promesa de continuar en el siguiente capítulo.

Mindmap

Keywords

💡PHP

PHP es un lenguaje de programación de uso general, especialmente adecuado para el desarrollo web. En el guion del video, PHP se utiliza para crear aplicaciones web dinámicas que interactúan con bases de datos MySQL. Se menciona la creación de un proyecto desde cero utilizando PHP, lo que indica que es el núcleo del desarrollo del que se habla en el video.

💡MySQL

MySQL es un sistema de gestión de bases de datos relacional广泛用于 web y aplicaciones empresariales. En el script, MySQL se utiliza para almacenar y recuperar datos de las tablas 'persona' y 'usuario', mostrando cómo se puede integrar con PHP para construir aplicaciones web con capacidades de base de datos.

💡Boostrap

Boostrap es un framework de CSS con herramientas de diseño gráficas para desarrollo web responsivo. En el video, se utiliza Boostrap para facilitar el diseño y la maquetación de la interfaz de usuario, permitiendo que el creador del contenido se centre en la funcionalidad y la estructura sin tener que reinventar la rueda en el diseño.

💡VS Code

Visual Studio Code, comúnmente conocido como VS Code, es un editor de código fuente desarrollado por Microsoft. En el guion, VS Code se utiliza como el entorno de desarrollo integrado (IDE) para crear y editar los archivos del proyecto PHP, destacando su popularidad y funcionalidad en el desarrollo web.

💡Apache

Apache es un servidor web de código abierto muy utilizado que sirve páginas web y gestiona solicitudes HTTP. En el video, se menciona que Apache debe estar en ejecución para que el proyecto PHP se pueda ejecutar localmente, lo que indica su papel crucial en el hosting de aplicaciones web.

💡Modelo

En el contexto de la programación, un 'modelo' generalmente se refiere a una representación de los datos y la lógica de negocio en una aplicación. En el guion, se crea una carpeta 'modelo' para organizar el código relacionado con la manipulación y representación de los datos de la base de datos.

💡Controlador

Un 'controlador' en el patrón arquitectónico MVC (Modelo-Vista-Controlador) maneja la lógica de la aplicación y la interacción con el modelo y la vista. En el video, se crea una carpeta 'controlador' para agrupar el código que gestiona la lógica de negocio y la interacción con el usuario.

💡Index PHP

En programación web, 'index.php' suele ser el archivo inicial de una aplicación web, que sirve como punto de entrada para los usuarios. En el guion, se crea un archivo 'index.php' en el que se desarrolla la lógica y la presentación de la aplicación.

💡Formulario

Un 'formulario' es una parte de una página web que permite a los usuarios ingresar datos, generalmente para ser enviados al servidor para su procesamiento. En el video, se crea un formulario para que los usuarios puedan registrarse ingresando su nombre, apellido, DNI, fecha de nacimiento y correo electrónico.

💡Tablas

En un contexto de base de datos, una 'tabla' es una estructura que almacena conjuntos de datos en filas y columnas. En el guion, se menciona la creación de una tabla HTML para mostrar los registros de personas, lo que permite visualizar y manipular los datos almacenados en la base de datos MySQL.

Highlights

Inicio de la serie de videos sobre PHP y MySQL utilizando Boostrap para facilitar el proceso.

Creación de una base de datos llamada 'cruz php' con tablas 'persona' y 'usuario'.

Visualización de dos registros creados en la tabla 'persona'.

Requisito de tener corriendo los servicios de Apache y MySQL.

Creación de un proyecto desde cero en la carpeta '15 proyectos php'.

Uso de Visual Studio Code para abrir y editar el proyecto.

Creación de carpetas 'modelo' y 'controlador' para la estructura del proyecto.

Inclusión de Boostrap en el archivo 'index.php' para facilitar el diseño.

Implementación de un mensaje 'hola mundo' para probar la configuración.

Ejecución del proyecto localmente y visualización del mensaje en el navegador.

Adición de estilos CSS para mejorar la presentación del mensaje.

Diseño de la página en dos secciones: uno para el formulario y otro para la tabla de registros.

Creación y configuración de un formulario con campos para nombre, apellido, DNI, fecha de nacimiento y correo.

Uso de clases de Boostrap para dar estilo al formulario y centrar el texto.

Selección y copiado de un diseño de tabla de Boostrap para la lista de personas.

Modificación de los encabezados de la tabla para adaptarlos a los campos de la base de datos.

Eliminación de registros no necesarios y duplicación de los útiles en la tabla.

Adición de un campo vacío en la tabla para incluir botones de edición y eliminación.

Uso de Font Awesome para agregar iconos de edición y eliminación en la tabla.

Estilización de los botones de edición y eliminación con clases de Boostrap.

Finalización temporal del video con la estructura básica de la página completa.