Programando Clon MVC y WebApi en PHP (Parte 1)


Como muchos desarrolladores .NET saben el MVC de Visual Studio tiene un patron bastante organizado, lo suficientemente organizado como para copiarlo a PHP y tratar de organizar nuestro código de una manera más comoda, en las entradas anteriores vimos como crear un patron de este tipo con Visual Studio, ahora, haremos lo mismo pero para nuestros compañeros desarrolladores en PHP 😉 que tambien es uno de mis lenguajes favoritos.

Comenzaremos creando nuestro “Esqueleto” de aplicación dentro de una carpeta StudenWeb que debe quedar como la siguiente:

Explicación de las carpetas:

Controllers : Es una carpeta reservada para hacer llamadas post internas dentro de las vistas un ejemplo de esto es la subida de archivos, muestra de imagenes protegidas entre otras cosas.

css : Guardará todos los archivos de Estilos de html.

fonts : Donde se guardan los archivos de tipografias e iconos.

Helpers : Funciones que podriamos utilizar dentro de nuestro sistema.

img : Archivos y Carpetas de Imagenes necesrios para nuestras vistas.

js : Archivos de JavaScritp.

Views : Archivos PHP con el código minimo, y en su mayor parte html.

service : Archivo donde crearemos nuestro webApi

A partir de aquí buscaremos una plantilla Bootstrap, como muchos de los lectores de este blog saben no soy muy afecto a crear diseños web, podemos descargarlo de la siguiente ruta https://startbootstrap.com/template-overviews/sb-admin/ (Es de mis favoritos), ahora veremos como integrar nuestro diseño de bootstrap a nuestro cascaron en PHP, analicemos las carpetas que tiene nuestra plantilla:

Bien, podemos encontrar dentro de las carpetas que nos interesan css, fonts-awesome, fonts, js, estas carpetas deben ser copiadas a nuestro proyecto de MVC lo haremos de la siguiente manera:

  1. Todo el contenido de la carpeta css será copiado a la carpeta css de nuestra solucion.
  2. Todo el contenido de la carpeta js será copiado a la carpeta js de nuestra solución.
  3. En cuanto a la carpeta fonts-awesome encontraremos las siguientes carpetas css, less, scss y fonts.
    1. Tomaremos el contenido de css que esta dentro de la carpeta fonts y será copiado a nuestra carpeta css.
    2. Tomaremos el contenido de la carpeta fonts y lo pasaremos a nuestra carpeta fonts

 

Una vez realizados estos pasos crearemos nuestro arbol en la carpeta de vistas, ya que es necesario que tengamos nuestra iformación de los php con contenido de html dentro de carpetas el arbol de archivos es el siguiente:

  • Views
    • Home
    • Shared

Despues de esto en nuestra carpeta raiz, crearemos un index.php, en el cual pondremos nuestro siguiente código:

<?php 
error_reporting(5); 
include('Views/Shared/_Layout.php'); ?>

 

Este codigo nos permite evitar los multiples notices que nos mostrará el wamp e incluir el archivo _Layout.php, el cual debe contener la información del index.hml de nuestro template que acabamos de bajar:

La imagen anteroir contiene el codigo recortado y colapsado para que se pueda apreciar mejor, no agregaremos la información tal como esta haremos unos pequeños cambios, que son en las siguientes lineas:

 

Cambio 1

<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Será cambiado por:

<link href="css/font-awesome.css" rel="stylesheet" type="text/css">

Cambio 2

Se quitará el contenido dentro de la etiqueta <div class=”container-fluid”> (Guardalo en un notepad que lo usaremos despues)

Cambio 3

Se tomarán las referencias a los JavaScripts y se pasarán después de las referencias css, como se ve en la siguiente imagen:

Una vez realizado esto copiaremos nuestro código a nuestro archivo _Layout.php. Una vez copiado crearemos dentro de la etiqueta <div class=”container-fluid”> un switch como el siguiente

 

<?php 
switch ($_GET["Source"]) { 
case "Students": include('Views/Student/Student.php'); break; 
default: include('Views/Home/Dashboard.php'); break; 
} 
?>

Finalizando estos cambios el sistema ya se encuentra funcional, para finalizar vamos a crear un archivo en la ruta Views/Home/ que se llamará Dashboard.php en el cual agregaremos el contenido que anteriormente se encontraba dentro de

que debio ser guardado en algún notepad en el cambio 2.

Una vez hecho esto nuestro esqueleto PHP de MVC con webApi esta terminado y para poder visualizar que mejor que meterlo en el wamp para verlo funcionando:

Con este cambio finalizamos esta entrega, ya tenemos nuestro esqueleto MVC con Bootstrap, y en la proxima entrega veremos como configurar el webApi, esta información tambien es explicada en mi libro que sera puesto a la venta en Amazon en un par de meses.

Download

Anuncios

Acerca de Francisco Castán

Creador, Diseñador, Investigador y Programador de Software Lenguajes Preferidos: C/C++, C#, Java, PHP, Python, PERL, Shell, JavaScript

Publicado el 24/04/2017 en JavaScript, JQuery, JSON, PHP y etiquetado en , , , , , . Guarda el enlace permanente. 1 comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: