Como hacer un CRUD EN PHP Y MYSQL | BOOTSTRAP - MVC #01 - Interfaz
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
😀 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.
🛠️ 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.
✂️ 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
💡MySQL
💡Boostrap
💡VS Code
💡Apache
💡Modelo
💡Controlador
💡Index PHP
💡Formulario
💡Tablas
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.
Transcripts
[Música]
hola hola qué tal amigos cómo están a
partir de esta serie de vídeos vamos a
estar realizando un grupo en php y mysql
utilizando booster para poder facilitar
el proceso bien amigos dicho esto
comenzamos bien lo primero y lo primero
que voy a hacer por aquí es mostrarte la
base de datos por aquí tengo una base de
datos creada que dice cruz php ahí está
ahí por aquí tengo las tablitas uno que
dice persona y otro que dice usuario
nosotros vamos a utilizar solamente este
que dice persona bien y además por aquí
ya tengo dos registros creados por aquí
como puedes ver y eso es todo no y
además no te olvides que ya debes estar
corriendo por aquí lo que camps y los
servicios de apache y 1.050 bien tú
puedes utilizar cualquier otro servidor
no ya sea agua largo etcétera etcétera
vamos a cerrar y lo primero que vamos a
hacer es vamos a crear un proyecto desde
cero nos vamos a discos
ht docs y aquí dentro es donde puedes
crear tu proyecto no pero como yo lo
tengo un poco más ordenado lo voy a
crear aquí dentro de esta carpeta 15
proyectos php aquí tengo una carpetita
que dice creep php vamos a entrar y como
pueden ver no tenemos nada no está
totalmente vacío bien entonces vamos a
abrir esta carpeta con visual studio
code y yo ya lo tengo abierto por aquí
no lo primero que vamos a hacer es vamos
a crear dos carpetas uno que diga modelo
y otra carpeta que diga controlador y
por aquí en la carpeta principal vamos a
crear un archivo que diga index php aquí
dentro del index es lo que vamos a
trabajar aquí en el título vamos a
ponerle cruz en php y mysql
bien como te dije que vamos a utilizar
buscará por aquí vamos a incluir no para
ello nos vamos a google a ver nos vamos
a google y vamos a buscar por aquí
buscar ahí está buscamos y nos vamos a
esta primera opción no bien por aquí
como estás observando vamos a utilizar
bus trap en la versión 5.2 no que es la
última versión
bien nos vamos hasta abajo y aquí donde
dice incluir días cdn vamos a copiar
este primer código y vamos a copiarlo
dentro del hit aquí debajo del title
pegamos listo y también vamos a copiar
este script de aquí copiamos y lo vamos
a pegar aquí donde antes del body no
antes de cerrar el body perfecto ya lo
tenemos incluido para hacer la prueba
voy a mostrar por aquí un mensajito en
h1 que diga hola mundo
y ahí está ahora vamos a ejecutar
nuestro proyecto para ello vamos a abrir
una nueva pestaña y le decimos localhost
80 80 yo pongo 80 80 porque es el puerto
que estoy utilizando en apache no si tú
estás utilizando el puerto 80 nada más
no es necesario que lo pongas puedes
continuar a partir desde slack bien
entonces por aquí voy a poner la carpeta
todavía donde se encuentra mi proyecto
proyectos php como lo puedes ver aquí
proyectos php y recién ingresar a mi
proyecto no mi proyecto se llama cruz
php ingresamos y ahí como puedes ver ya
me muestra el mensajito de hola mundo
perfecto vamos a darle algunos estilos
por aquí para que se pueda ver mejor le
voy a dar una clase cuando nosotros
utilizamos bus trapusteros siempre va a
trabajar con clases no para dar estilos
simplemente vamos a agregar clases lo
voy a dar text center para poder
centrarlo y un poco de padding ahí está
vamos a actualizar y ahí está mira como
puedes ver ya tenemos centrado el texto
bien ahora lo que vamos a hacer
a dividir esta página en dos secciones
uno que va a ser por aquí de este tamaño
y otro que va a ser por aquí de este
tamaño bien aquí en este pequeño cuadro
es lo que vamos a mostrar nuestro
formulario aquí vamos a mostrar estas
cajitas de texto para ingresar el nombre
el apellido dni su fecha de nacimiento
su correo y así sucesivamente luego un
botón por aquí de registrar bien y aquí
en este segundo cuadro lo que vamos a
mostrar la tablita aquí va a ser la
tablita mira aquí se va a encontrar esa
tablita no aquí vamos a mostrar todo el
registro de personas bien amigos
entonces primeramente para agregar el
formulario por aquí voy a crear un nuevo
dip con la clase container
ahí está y además lo voy a dar una clase
aquí en vez de container lo voy a dar
container fluid y además otra clase que
diga raw y aquí dentro de éste el bip es
lo que voy a introducir ese formulario
no para poder facilitar el proceso nos
vamos a buscar nos vamos a la
documentación y aquí vamos a buscar
formularios por aquí se encuentran
formularios nos vamos a esta primera
opción y aquí escogemos lo que más nos
guste no yo voy a escoger esta primera
vamos a copiar y por aquí vamos a pegar
vamos a dar formato ahí está este
formulario lo voy a dar una clase que
diga col 4 para que sea un poco más
pequeño no vamos a volver actualizamos y
ahí está mira ya lo tenemos de este
tamaño y lo siguiente que vamos a hacer
es vamos a modificar estos textos no
aquí en vez que diga email address yo
voy a poner nombres o nombre de la
persona primero vamos a borrar estos dos
últimos nos quedamos sólo con la primera
vamos a eliminar este texto del dip y
aquí vamos a cambiar lo que diga nombre
de la zona
perfecto aquí en el input va a ser de
tipo text y aquí no va a tener ninguna y
en vez de esto vamos a ponerle una que
diga nombre perfecto vamos a copiar todo
esto control c control b 5 veces ahí
está ya lo tenemos y aquí va a ser
apellido no apellido y por aquí en la
ley también lo voy a dar apellido por
aquí el dni por aquí en el link también
viene por aquí vamos a poner fecha de
nacimiento
y por aquí también en el lay vamos a
ponerle fecha y aquí en el tipo vamos a
ponerle el 20 ya para que al input pueda
verse mucho mejor y por último por aquí
para el correo no perfecto aquí en ley
vamos a poner correo ahí está y aquí lo
puedes poner si deseas de tipo email
pero yo lo voy a dejar en texto y aquí
en el texto del botón y yo lo voy a dar
registrar ahí está aquí también lo voy a
dar un name que diga vitienes registrar
y además lo voy a dar un value que diga
ok y listo vamos a volver actualizamos y
ahí está no como lo puedes ver ya
tenemos el formulario todo listo para
poder registrar la persona bien por aquí
antes de este formulario vamos a agregar
un texto por aquí dentro del formulario
vamos a agregar un texto un h3 y lo voy
a poner registro de personas
ahí está lo voy a centrar este de aquí
contex centre y vamos a cambiar el color
a otro colorcito no
a este formulario vamos a darle un
padding de 3
vamos a actualizar y ahí está ya lo
tenemos -dijo- amigos ahora seguidamente
vamos a agregar por aquí otro cuadrito
para la tablita no bien vamos a volver y
debajo de este formulario ahí está aquí
pero dentro de este mismo dip vamos a
agregar un nuevo divx y lo voy a poner
una clase que diga con 8 perfecto y lo
voy a dar por aquí un padding de 4
perfecto y aquí dentro lo que voy a
realizar mi tablita no ya sabes para
facilitar el proceso nos vamos a buscar
por aquí vamos a buscar tablas aquí está
como puedes ver dice tables vamos a
entrar y por aquí tú escoges lo que más
te guste mira tenemos muchos ejemplos no
yo voy a escoger esta primera no que la
más básica y lo voy a copiar ahí esta
copiamos lo pegamos vamos a dar formato
vamos a actualizar
y ahí está no ya lo tenemos implementado
también la tablita bien ahora lo que
vamos a hacer es por aquí vamos a
modificar los encabezados porque estos
no son los encabezados que voy a
utilizar no yo necesito seis encabezados
uno que es para él y para el nombre
apellido dni fecha de nacimiento y
correo perfecto entonces vamos a volver
y modificar por aquí primero hay de
nombres apellidos fecha de nacimiento
vamos a copiar estos dos más vamos a
pegar y aquí va a ser para el dni y por
último creo que primero es el dni a ver
vamos a ver si primero es el dni luego
en fecha de nacimiento ahí está y por
último el correo vamos a verificar ahí
está no ya lo tenemos todo listo hay de
nombres apellidos dni fecha de
nacimiento y correo pero como aquí
puedes ver todavía nos falta agregar más
registros mira sólo tenemos cuatro
registros vamos a modificar eso por aquí
estos dos últimos vamos a eliminar
porque no nos interesa esta primera lo
vamos a eliminar y vamos a duplicar
estos tres ahí está ya lo tenemos vamos
a actualizar ya está no solo tenemos un
registro perfecto por aquí lo voy a dar
un colorcito a este encabezado para ello
nos vamos aquí a esta etiqueta y lo voy
a dar una clase que diga vejez de
background info un poco se les cita no
ahí está bien ahora seguidamente por
aquí me olvidé de agregar un campo más
no para el botoncito de eliminar y de
editar perfecto entonces por aquí voy a
agregar otro campo más pero un campo
vacío ya un campo vacío y por aquí
también voy a agregar otro campo que
diga te de ahí está ahí aquí dentro
vamos a agregar dos botoncitos hoja voy
a agregar la etiqueta a y aquí dentro
vamos a agregar un icono ya si quieres
tú lo puedes poner así editar y otro de
eliminar no vamos a ver ahí está vamos a
actualizar y ahí está no efectivamente
ya se mira este botoncito pero para que
se vea mucho mejor vamos a utilizar
para ello nos vamos a fondo son ahí está
si no sabes utilizar fondos son en la
última versión yo tengo un vídeo aquí en
mi canal que lo puedes ver para que
puedas entender lo que estoy haciendo no
vienen todos lo primero que tengo que
hacer es voy a lo que arme por aquí
tengo que lo que arme ahí está ahí por
aquí me voy a ir donde dice kits vamos a
abrir este equipo y vamos a copiar este
código ya vamos a pegarlo aquí después
de este código aquí debajo y listo ahora
sí podemos utilizar cualquier de los
iconos vamos a buscar un icono para
editar aquí siempre es recomendable
buscar en inglés vamos a buscar edit
vamos a seleccionar que sea gratuito y
voy a seleccionar esta primera copiamos
y lo voy a pegar aquí en vez de ese
texto lo pego el icono perfecto vamos a
buscar otro para eliminar delete y yo
voy a escoger digamos este de aquí
copiamos y lo pegamos aquí vamos a
verificar qué tal va quedando
actualizamos y ahí está mira ya tenemos
dos iconos por aquí para darle un poco
de más estilos vamos a estilos a esta
etiqueta a lo voy a dar una clase que
diga vete vete n small un botón pequeño
y por aquí ve tn danger perfecto aquí va
a ser de color naranja para yo le digo
warning vamos a actualizar ya está no
efectivamente ya tenemos dos botoncitos
uno para editar y otro para eliminar
perfecto amigos por el momento nos
quedamos hasta aquí para que el vídeo no
se pueda alargar mucho y nos vemos en el
siguiente capítulo chao chao
Browse More Related Video
Crear Base de Datos en Xampp con MySQL Paso a Paso
1. Conectar y Mostrar Datos con PHP y MySQL
PhpMyAdmin tutorial 2021
Como enlazar o conectar una Base de Datos desde Access 2010 a Visual Basic 6.0
Curso de Android con Java: Almacenamiento mediante la base de datos SQLite
Primer ETL Usando SQL Server Data Tools
5.0 / 5 (0 votes)