DESARROLLO DE UN SISTEMA MVC EN PHP Y MYSQL 

Desarrollaremos un sistema modelo vista controlador básico, justo para entender ¿Cómo funciona este patrón de diseño de arquitectura de Software?.

Aquí tienes un link, si te interesa el curso MVC en PHP y MySQL para una tienda de artículos de cómputo 

Indice de contenidos

1. ¿Qué es una aplicación MVC?
2. Planteamiento del proyecto a desarrollar
   1. Requisitos 
   2. Funcionalidades
3. Base de datos
   1. Implementación de la BD
   2. Script SQL de la BD
4. Estructura de Archivos del proyecto
5. Implementando la configuración y el gestor de la BD
6. Desarrollando el Controlador
7. Diseñando las vistas y layouts
8. Conclusión final

¿Que es MVC?

Es un patrón de diseño o desarrollo de software, se emplea para separar la lógica de la vista, esto facilita la portabilidad de la aplicación y el mantenimiento mucho más organizado y ordenado.

Antes. El MVC separa tres aspectos fundamentales claramente marcados :

• El modelo (1) Los datos  lo que es la lógica de negocio de una aplicación
• La vista (2) La representación
• Y el controlador (3) módulo encargado de gestionar los eventos y las comunicaciones entre el modelo y la vista.

Plantemiento del proyecto a desarrollar

Este pequeño tutorial se trata de la implementación de un ejemplo práctico de un MVC en PHP - MYSQL para el backend y las vistas con HTML y CSS. Trabajaremos con una sola tabla integrando un CRUD  básico.

REQUISITOS PARA EMPEZAR A PROGRAMAR UN MVC

• Servidor local XAMPP - servicios de Apache y Mysql - PHP 8
• Editor de código puede ser Sublime Text o Visual Studio Code
• Un Navegador Google Chrome o firefox o Brave

FUNCIONALIDAD A IMPLEMENTAR

• Desarrollo de un CRUD con PHP y Mysql
  • Leer
  • Editar
  • Actualizar
  • Borrar

Diseño e implementación de la BASE DE DATOS

IMPLEMENTACIÓN DE LA BASE DE DATOS MYSQL

Y ¿cómo implementamos una base de datos?, pues debes seguir los siguientes pasos:

1. Levantar el servidor local Xampp,
2. Luego procedemos a crear la base de datos MYSQL en la dirección http://localhost/phpmyadmin con el nombre de "mvc"
3. y por último dentro de la BD crearemos una tabla llamada "productos" con tres campos
   • id .- con clave primaria y autoincrementable
   • nombre .- de tipo String varchar de 50
   • precio . campo con notación decimal

CÓDIGO MYSQL PARA EJECUTAR EN LA VENTANA DE SQL DE XAMPP

Este trozo de código Mysql permitirá crear una tabla con las configuraciones descritas anteriormente.

CREATE TABLE `productos` (
  `id` int(11) NOT NULL,
  `nombre` varchar(50) NOT NULL,
  `precio` decimal(7,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


ALTER TABLE `productos`
  ADD PRIMARY KEY (`id`);
ALTER TABLE `productos`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

Estructura de Archivos de un MVC

Este proyecto tendrá la siguiente estructura de archivos distribuidos de la siguiente manera

• controlador
  • index.php
• modelo
  • index.php
• vista
  • css
    • app.css
  • layout
    • header.php
    • footer.php
  • editar.php
  • actualizar.php
  • borrar.php
  • index.php
• index.php
• config.php

Empezando con el index y el gestor DB

Programación del Modelo

La finalidad del modelo es crear un enlace entre la base de datos mediante las consultas  Mysql, es decir recibe una solicitud de datos y este los retorna.

El archivo principal  y el config

El archivo principal index.php es:

<?php
require_once("config.php");
require_once("controlador/index.php");
if(isset($_GET['m'])):
    $metodo =   $_GET['m'];
    if(method_exists(modeloController,$metodo)):
        modeloController::{$metodo}();
    endif;
else:
    modeloController::index();
endif;
?>

El código de config.php, esta url debes de configurarla de acuerdo a tu proyecto.

config.php

define("urlsite",'http://localhost:8888/php/');

Entonces diremos que aqui se gestiona la conexión a la BD y los métodos de consulta, veamos el código:

modelo/index.php

<?php
class Modelo{
    private $Modelo;
    private $db;
    public function __construct(){
        $this->Modelo = array();
        $this->db=new PDO('mysql:host=localhost;dbname=mvc',"root","");
    }
    public function insertar($tabla, $data){
        $consulta="insert into ".$tabla." values(null,". $data .")";
        $resultado=$this->db->query($consulta);
        if ($resultado) {
            return true;
        }else {
            return false;
        }
     }
    public function mostrar($tabla,$condicion){
        $consul="select * from ".$tabla." where ".$condicion.";";
            $resu=$this->db->query($consul);
            while($filas = $resu->FETCHALL(PDO::FETCH_ASSOC)) {
                $this->personas[]=$filas;
            }
            return $this->personas;
        } 
    public function actualizar($tabla, $data, $condicion){       
        $consulta="update ".$tabla." set ". $data ." where ".$condicion;
        $resultado=$this->db->query($consulta);
        if ($resultado) {
            return true;
        }else {
            return false;
        }
     }
    public function eliminar($tabla, $condicion){
        $eli="delete from ".$tabla." where ".$condicion;
        $res=$this->db->query($eli);
        if ($res) {
            return true; 
        }else {
            return false;
        }
    }
}

Describiendo un poco vemos que el modelo realiza la conexión en el constructor, además de tener los métodos CRUD inserción, mostrar, actualizar y eliminar.

Programando el controlador 

Este gestiona las peticiones de la vista con el modelo 

controlador/index.php

<?php
require_once("modelo/index.php");
class modeloController{
	private $model;
	function __construct(){
        $this->model=new Modelo();
    }
    // MOSTRAR
    function index(){
    	$producto 	=	new Modelo();
		$dato=$producto->mostrar("productos","1");
		require_once("vista/index.php");
    }

    // INSERTAR
    function nuevo(){
    	require_once("vista/nuevo.php");	    	    	
    }
    function guardar(){
    	$nombre 	=	$_REQUEST['nombre'];
    	$precio 	=	$_REQUEST['precio'];
        $data       =   "'".$nombre."','".$precio."'";
    	$producto 	=	new Modelo();
		$dato 		=	$producto->insertar("productos",$data);
		header("location:".urlsite);
    }


    // ACTUALIZAR

    function editar(){
    	$id=$_REQUEST['id'];
    	$producto 	=	new Modelo();
    	$dato=$producto->mostrar("productos","id=".$id);    	
    	require_once("vista/editar.php");
    }
    function update(){
    	$id 		= 	$_REQUEST['id'];
    	$nombre 	=	$_REQUEST['nombre'];
    	$precio 	=	$_REQUEST['precio'];
        $data       =   "nombre='".$nombre."', precio=".$precio;
        $condicion  =   "id=".$id;
    	$producto 	=	new Modelo();
		$dato 		=	$producto->actualizar("productos",$data,$condicion);
        header("location:".urlsite);
	}

    // ELIMINAR

	function eliminar(){		
		$id 		= 	$_REQUEST['id'];    	
        $condicion  =   "id=".$id;
    	$producto 	=	new Modelo();        
		$dato 		=	$producto->eliminar("productos",$condicion);
		header("location:".urlsite);
	}
}

Vemos los métodos que  gestionarán la peticion de datos.

Diseño de las vistas y layouts de un MVC

Llegamos a la implementación de las vistas 

Vista index.php cuya función es mostrar la lista de registros de la tabla productos.

vistas/index.php

<?php require "layout/header.php" ?>
<a href="index.php?m=nuevo">NUEVO</a>
<table border="1">
	<tr>
		<td>Id</td>
		<td>Nombre</td>
		<td>Precio</td>
		<td>Acción</td>
	</tr>
	    <?php 
	    foreach ($dato as $key => $value)
	        foreach ($value as $va ):
	            echo "<tr><td>".$va['id']."</td><td>".$va['nombre']."</td><td>S./".$va['precio']."</td>";
	        	echo "<td><a href='index.php?m=editar&id=".$va['id']."'>ACTUALIZAR</a> <a href='index.php?m=eliminar&id=".$va['id']."'>ELIMINAR</a></td>";
	        	echo "</tr>";
	        endforeach;
	    ?>
</table>
<?php require "layout/footer.php" ?>

Vista vista/nuevo.php

<?php require "layout/header.php" ?>
<h1>NUEVO</h1>
<hr>
<form action="">
	<label for="">NOMBRE</label> <br>
	<input type="text" name="nombre"><br>
	<label for="">PRECIO</label><br>
	<input type="text" name="precio"><br>
	<input type="submit" name="btn">
	<input type="hidden" name="m" value="guardar">
</form>
<?php require "layout/footer.php" ?>

Vista vista/editar.php

<?php require "layout/header.php" ?>
<h1>NUEVO</h1>
<hr>
<form action="">
	<?php foreach ($dato as $value): ?>
		<?php  foreach ($value as $v ): ?>
		<label for="">NOMBRE</label> <br>
		<input type="text" name="nombre" value="<?php echo $v['nombre'] ?>"><br>
		<label for="">PRECIO</label><br>
		<input type="text" name="precio" value="<?php echo $v['precio'] ?>"><br>	
		<input type="hidden" name="id" value="<?php echo $v['id'] ?>">
		<input type="submit" name="btn" value="ACTUALIZAR">
		<?php endforeach ?>
	<?php endforeach ?>
	<input type="hidden" name="m" value="update">
</form>
<?php require "layout/footer.php" ?>

Las vistas Layouts header.php y footer.php

vista/header.php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="vista/css/estilos.css">
    <title>MVC</title>
</head>
<body>
	<div class="panel">
	<h1> SISTEMA DE PRODUCTOS</h1>

vista/footer.php

	</div>	
</body>
</html>

Y por último la hoja de estilos del proyecto vista/css/app.css

body{	background: green}
.panel{ background: white; margin: 0 auto; width: 800px; padding: 20px; box-shadow: 0px 0px 10px}
table{	width: 100%; border: 1px}
h1{ text-align: center; color: green }
a{ 
	background: #e6e6e6;
    color: green;
    text-decoration: none;
    padding: 5px 15px;
    border: 1px solid #c1c1c1;
    width: 100px;
    display: inline-block;
    text-align: center;
 }

Finalizando

Vemos que es un proyecto sencilo y muy básico con respecto a un Modelo Vista Controlador pero claramente nos va a servir para entender como funciona  este patrón de arquitectura de desarrollo de software, al cual podrás realizar las mejorar que veas por conveniente.

Hasta un próximo tutorial de programación en PHP con BD