Saltar al contenido

Crud PHP – SQL Server con Ajax, JQuery, MVC y POO

crud-php-sql-server

Hola amigos buenos días, el día de hoy les mostrare como hacer un crud en PHP con SQL Server para ello utilizaremos JQuery, Ajax, POO y MVC.
Esto mejora la interacción del usuario, la eficiencia de la aplicación, la reutilización y la estructura del código, lo que facilita el mantenimiento y la escalabilidad del sistema por si quisieras hacer de este CRUD algo mas grande.

Decidí hacer este articulo ya que en mi trabajo utilizo mucho SQL Server y ya existen varios módulos hechos en PHP para manipular la base de datos, sin embargo me he dado cuenta de que en internet no hay muchos proyectos de PHP con SQL Server.

Conectar PHP con SQL Server

Lo primero que debes de tener es una conexión entre PHP y SQL Server, es decir debes tener instalados los drivers que permiten que PHP pueda manipular datos almacenados en SQL Server.

Si aun no tienes esta parte o no sabes como realizar la conexión puedes leer mi anterior articulo donde te muestro como conectar PHP con SQL Server paso a paso, además de que usaremos la conexión de ese articulo para realizar el CRUD el día de hoy.

La base de datos

Para realizar las operaciones de un CRUD necesitamos tener una base de datos y al menos una tabla con datos, en este caso te dejo muestro como crear la base de datos, la tabla e insertar registros en la tabla.

Primero crearemos la base de datos llamada Registros y lo haremos desde la interfaz grafica.
Damos click a la carpeta Databases->New Database en el explorador de objetos y le asignamos el nombre Registros.

Creando base de datos desde la interfaz grafica

Si estas utilizando algún usuario en especifico asegúrate de darle permisos necesarios para interactuar con la base de datos que acabas de crear.

Una vez creada la base de datos ejecuta el siguiente script para hacer el volcado de datos, (Asegúrate de que tu base de datos se llame Registros, o edita el script de acuerdo al nombre de tu base de datos)

Patrón MVC, JQuery, Ajax, SweetAlert2, Datatables

A continuación te doy una breve introducción de las tecnologías que utilizaremos para realizar el CRUD.

MVC (Modelo-Vista-Controlador) Es un patrón de arquitectura de software utilizado para implementar interfaces de usuario, datos y lógica de control. El modelo maneja los datos y la lógica del negocio, la vista se encarga del diseño y la presentación al usuario, y por ultimo el controlador se encarga de enrutar comandos a los modelos y las vistas.

JQuery es una biblioteca de JavaScript sumamente útil en el desarrollo web ya que permite la manipulación completa del DOM, manejo de eventos animaciones y solicitudes Ajax.

Ajax (Asynchronous JavaScript and XML) es una librería que permite que un usuario interactúe con una aplicación web realizando solicitudes y recibiendo respuestas del servidor de forma asíncrona, es decir, sin la necesidad de recargar la pagina.

SweetAlert2 es una biblioteca de JavaScript que se utiliza para crear bonitos y personalizados cuadros de dialogo (pop-ups) en las paginas web.

DataTables es una biblioteca de JavaScript que facilita la manipulación, ordenamiento, búsqueda y paginación de grandes conjuntos de datos en tablas HTML.

Podemos realizar el CRUD solamente con PHP, SQL Server y HTML sin utilizar ninguna tecnología enlistada anteriormente pero obtendríamos un CRUD bastante básico, no seria dinámico y afectaría la experiencia de usuario.


Es por eso que utilizaremos todas estas tecnologías para hacer un CRUD que sea mantenible y escalable por si quisieras utilizarlo en alguna aplicación web tuya.

Estructura MVC de nuestro proyecto

Aqui te explicare la estructura MVC de nuestro proyecto, igual al final te dejare un link para que descargues el proyecto completo,

Igual te recomiendo leer el articulo para comprender el funcionamiento de cada archivo.

Directorio del crud MVC

Nuestro proyecto se conforma por 5 carpetas que son: configuración, controlador, modelo, vista y scripts.


En la carpeta configuración tenemos dos archivos PHP llamados global.php y Conexion.php que es donde declaramos nuestras variables de conexión a la base de datos y creamos la conexión utilizando PDO

En la carpeta controlador tenemos a usuarios.php que es la clase encargada de comunicar la vista con el modelo y de enrutar comandos.

En la carpeta modelo tenemos el archivo usuarios.php que es la clase que se encarga de interactuar con la base de datos, ahi se hacen todas las consultas y procedimientos

Dentro de la carpeta vista tenemos a usuarios.html que es donde esta maquetada toda la interfaz de usuario y tambien tenemos una carpeta llamada scripts que contiene un archivo llamado usuarios.js en donde hacemos uso de JavaScript, JQuery, Ajax y Sweetalert2 para manipular el DOM de la pagina html

Fuera de todas estas carpetas tenemos un archivo llamado index.php que es al que ingresamos por defecto, este archivo solo nos redirecciona a la pagina html que se encuentra en la carpeta vista.

Archivos de conexión a la base de datos.

En nuestro archivo global.php definimos las credenciales de la base de datos, modifícalas de acuerdo a las tuyas.

Despues tenemos nuestro archivo Conexion.php

En este archivo incluimos las credenciales mediante el archivo global.php

Después utilizando PDO realizamos la conexión a la base de datos. Si configuramos bien todo desde un inicio la conexión será exitosa.

Index.php

En la carpeta raíz de nuestro proyecto vamos a tener un archivo llamado index.php al cual entrara por defecto, index.php nos redirigirá a la carpeta vistas al archivo llamado vista_usuarios.html

Vista de usuario

En el archivo html solo tenemos la estructura de la pagina además de las librerías que utilizaremos para el funcionamiento de la misma (Bootstrap, DataTables, JQuery, Sweetalert2)

Observa que en la ultima linea hacemos referencia al archivo usuarios.js que es donde le daremos la funcionalidad a la página.

Archivo Js para las solicitudes al controlador

En este archivos hacemos uso de JavaScript y JQuery para manipular las solicitudes y respuestas, así como las alertas y actualización del DOM, además tenemos los métodos de crear, mostrar, actualizar y eliminar que se comunican con el controlador para manipular la información

controlador_usuarios.php

En este archivos procesamos las solicitudes mediante ($_REQUEST[‘opcion’]) y con un switch redirigimos a la función correcta.

Dichas funciones se encargan de solicitar la información al modelo, después de que el modelo les devuelva la información la procesan y posteriormente la devuelven al archivo .Js en formato Json para que esta sea renderizada en la vista por medio de JQuery.

modelo_usuarios.php

En el modelo realizamos todas las consultas a la base de datos, aquí mismo incluimos el archivo de conexión para poder realizar dichas consultas, cada método de la clase usuarios es consumido desde el controlador, este solicita los datos a la base de datos y los retorna.

Te dejo el enlace del repositorio alojado en mi Github, eres libre de clonarlo y hacerle las modificaciones que gustes.

Link del repositorio: https://github.com/Codigoroot/crudPHP-SQLServer/tree/main

Gracias por leer este artículo y esperamos que encuentres útil esta información. Si tienes preguntas o sugerencias adicionales, no dudes en comentar. ¡Nos encantará escuchar de ti!
Hasta la próxima oportunidad, ¡nos despedimos!

Puedes apoyar el blog de diferentes maneras:
Suscribiéndote al Blog.
Apoyando mi trabajo..
Invitándome un café.☕
Seguirme en redes sociales.
o compartir mi contenido en redes sociales. ⬇️

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *