Como hacer un admin de blog con Seed php - parte 2

blog-post

En el post anterior te estuve mostrando como empecé a hacer un administrador de blog con Seed PHP. En el vimos como enviar peticiones GET con jQuery para recibirlos con Seed y devolver los datos de cada post. En este post te voy a mostrar como hacer peticiones DELETE para borrarlos.
Además hice un par de cambios en el código que te quería comentar porque me parecen importantes:

-Mejoré la categorización de los estilos: ahora están separados por partes del html como header, contenido, footer, y por otro lado utilidades generales como efectos y botones. Para ayudar la legibilidad usé comentarios que se extiendan a lo ancho de la pantalla en el comienzo y en el fin de cada componente:

/*********************** Iconos ***********************/

/********************* Fin Iconos *********************/

-Agregué la fuente font-family: "Open Sans"; en las vistas del blog y del admin. En el post que hable sobre google fonts te recomendé que no las uses desde la cdn, y en mi opinion es lo mejor. Sin embargo me dí cuenta que si las llamás de esta manera no tenés disponibles todos los font-weights. De todas maneras evaluando los pro y los contras, lo voy a dejar así.

-Simplifiqué el nombre de clases para su reuso y borré estilos que se aplicaban solo a casos particulares.
Por ejemplo iconos que antes estaban como .iconArticle dentro de la clase .createPost, ahora se llaman .icon-article y se pueden usar en cualquier ubicación.

Una cosa que tuve que tener en cuenta al hacer eso, es que las clases de utilidades y de componentes reusables tienen que ir en la parte superior del código por si después quiero pisarlas con un estilo para algún caso en partícular.

-Cambié los nombres de clases de estilo camel case a separado por guiones para mejorar la lectura: Por ejemplo .iconWrapper pasa a ser .icon-wrapper

-Desde javascript también cambié nombres de variables como $form_show_article por $form_article, y show_articleTpl por articleTpl. El nombre de la template show_article.tpl paso a ser article.tpl de esta manera sirven para los casos de crear,mostrar y modificar posts y no para un caso en particular.

-Cambié los nombres de algunas variables para que sean más cortos y descriptivos.

-Aunque todavía no la estoy usando, agregué la función titleToSlug

Mejorado estilo del botón de cancelar de acuerdo a lo que mostré en el post sobre optimización ux de botones

-Agregué comentarios a casi todo el código fuente.

Y esos son todos los cambios, ahora veamos un poco de código! La url donde se recibe la petición del borrado es adminDel:


//Función que maneja el admin DELETE post
$seed->on('/adminDel', function($params) use($seed) {
	//obtengo el parámetro id 
	//enviado por ajax
	$id = $params['id'];
	
	//borro el registro de la tabla post
	//y de social_media donde coincide
	//el id del primero con el campo post_id
	//del segundo
	$query = "DELETE posts, social_media
	FROM posts
	INNER JOIN social_media
	ON posts.ID = social_media.post_id 
	WHERE posts.id = $id";
	//si la consulta se ejecuta satisfactoriamente
	if(mysqli_query($seed->get('db'), $query)){
		//para enviar la respuesta al cliente paso un 
		//array a la función json_encode
		//donde devuelvo un código satisfactorio en el 
		//valor del indice res y un mensaje para mostrar
		//en el valor del indice msg
		echo json_encode(array(
			'res' => 'deleteOk',
			'msg' => 'El post se borro satisfactoriamente.',
		));
		//con la función exit() hago que no se muestre
		//nada más a continuación de la respuesta
		//para evitar errores al recibir el json
		exit();
	}else{
		//si se produjo un error al ejecutar la consulta
		//devuelvo un array notificandolo
		echo json_encode(array(
			'res' => 'deleteError',
			'msg' => 'Se produjo un error al borrar el post.',
		));
		exit();
	}
});

En el código javascript, modifiqué a la función manejadora de eventos del botón '.delete-wrapper a' para que obtenga el id del post a borrar y llame a la función deletePost()
Lo hice de esta manera por si más adelante quiero que se pueda borrar desde otro lado, como por ejemplo dentro del formulario donde se ven sus datos.


/* Borrar artículo */
$('.delete-wrapper a').on('click', function(e){
	//con el método preventDefault() llamado
	//desde el evento evito que se ejecute
	//la acción por defecto de un link
	e.preventDefault();
	
	//con $(this) hago referencia al link que
	//se clickeo y con el método .attr() 
	//obtengo el id guardado en su atributo data-id
	var id = $(this).attr('data-id');
	
	//ejecuto a la función para borrar el post
	//pasandole como parámetro su id
	deletePost(id);
});

Y el código de la función es:


var deletePost = function(id){
	//recupero la base url del admin que guarde en el atributo 
	//data-base-url del  en la vista
	var baseurl = $('body').attr('data-base-url');
	
	//creo un objeto clave : valor, para
	//pasarle enviar id como parámetro
	//por ajax
	var data = {
		'id':id,
	};
	//muestro una ventana de confirmación con el mensaje 
	//pasado por parámetro en la que si se hace
	//click en aceptar se envía un ajax con el id del
	//post para borrarlo
	if(window.confirm("Estas seguro que querés borrar el post?")){
		$.ajax({
			//url donde donde se va a enviar la petición
			'url' : baseurl + '/adminDel',
			//uso el type DELETE porque voy a
			//borrar un recurso del servidor
			'type' : 'DELETE',
			//voy a esperar una respuesta en formato json
			'dataType' : 'json',
			//como parámetros envío el objeto data
			'data' : data,
			//al recibir la respuesta del servidor se
			//ejecuta la función del parámetro success
			'success' : function(d){
				//uso console.log para debuggear la
				//respuesta que envía el servidor desde
				//la consola
				console.log('Respuesta post:');
				console.log(d);
				//si la respuesta devuelve un código exitoso
				if(d.res=='deleteOk'){
					//muestro el mensaje
					alert(d.msg);
					//busco el artículo concatenando #article- con
					//el id, y lo oculto con un efecto de deslizamiento
					//hacia arriba de 500 milisegundos que al finalizar
					//ejecuta una función anónima que lo borra
					$('#article-'+id).slideUp(500,function(){
						//con $(this) hago referencia al div contenedor
						//principal del artículo
						$(this).remove();
					});
				}else if(d.res=='deleteError'){
					//Si el código de respuesta es error
					//muestro un alert con el mensaje
					alert(d.msg);
				}
			},
		});
	}
};

Por último, dejo el link del código fuente completo para que pueda ver y probar.
Te mando un abrazo grande!