PHP Básico - Clase 4
Posteado el 18. Oct, 2013 por Frisley Velasquez in Php, PHP
En esta clase realizaremos a mas detalle el administrador de nuestro blog, nos dedicaremos a modificar el creador de posts, mejoras en administrador de posts, edición de posts y eliminación de los que no queremos.
Usaremos la ayuda de algunos plugins de jQuery, Bootstrap 3.0 y otras cosas que nos ayudarán a darle estilo y mejoras visuales a nuestro administrador de blog.
PASO 1: DESCARGAR jQuery, Bootstrap y jHTMLArea
PASO 2: descomprimirlos donde los descargaron
PASO 3: Nos metemos a la carpeta de bootstrap 3.0
PASO 4: Nos vamos a la carpeta de dist
PASO 5: Copiamos las carpetas css, fonts, js
PASO 6: Las pegamos en la carpeta de nuestro blog
PASO 7: nos metemos a la carpeta de jHtmlArea-0.7.5.ExamplePlusSource
PASO 8: nos metemos a la carpeta de style
PASO 9: copiamos todo lo que esta dentro y lo pegamos en nuestra
carpeta de css dentro de nuestro blog
PASO 10: Copiamos todos los jHTMLArea y el jQuery UI y lo pegamos
en la carpeta js en nuestro blog.
PASO 11:Copiamos las imagenes de la carpeta images a la carpeta images de nuestro blog.
- Descargar Bootstrap
- Descargar jQuery
- Descargar jHTMLArea
Administrador de posts
Como primer punto luego de bajar todos los archivos anteriores los colocaremos en nuestra carpeta de blog de la siguiente manera.
Vamos a modificar el archivo index.php para utilizar nuestros nuevos archivos descargados, agregaremos en el header lo siguiente:
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="../js/minified/themes/default.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="default.css">
<script src="../js/jquery-2.0.3.min.js"></script>
<script src="../js/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/minified/jquery.sceditor.bbcode.min.js"></script>
Luego de esto cambiaremos un poco la sintaxis de nuestro codigo interno y agregaremos algunos botones, campos y tablas para que quede mejor ordenada la información:
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Administrador Blog</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.php">Inicio</a></li>
<li><a href="post_crear.php">Crear Nuevo Post</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Cerrar Sesión</a></li>
</ul>
</div>
</div>
<div class="container theme-showcase">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Administrador del blog</h3>
<div style="float: right; margin-top:-20px"><button type="button" onclick="createPost()" class="btn btn-xs btn-success">Nuevo Post</button></div>
</div>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Titulo</th>
<th>Fecha</th>
<th>Estatus</th>
<th>Tipo</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_assoc($res)){
?>
<tr>
<td><?php echo $row['titulo'];?></td>
<td><?php echo $row['fecha_crea'];?></td>
<td><?php if($row['estatus'] == 'P'){ echo 'Publicado';}else{ echo 'Borrador'; }?></td>
<td><?php echo $row['tipo'];?></td>
<td>
<button type="button" onclick="editPost('<?php echo $row['id'];?>')" class="btn btn-xs btn-primary">Editar</button>
<button type="button" onclick="deletePost('<?php echo $row['id'];?>')" class="btn btn-xs btn-danger">Eliminar</button>
</td>
</tr>
<?php
} ?>
</tbody>
</table>
</div>
</div>
</body>
Si se dieron cuenta, cambiamos un poco el query para incluir 3 campos nuevos, el id, la fecha de creacion y la fecha de publicación, además usamos un if para poder mostrar el estatus de manera un poco más descriptiva.
Agregamos 3 botones, dos en cada fila y uno nuevo para crear un nuevo post desde el header de la pagina, cada botón tiene una llamada a una función de javascript al momento de darle click.
<script>
function createPost(){
window.location = 'http://127.0.0.1/blog/admin/post_crear.php';
}
function editPost(id){
window.location = 'http://127.0.0.1/blog/admin/post_editar.php?id='+id;
}
function deletePost(id){
var conf = confirm('Estas seguro de querer eliminar este post?');
if(conf)
{
$("#eliminarForm_"+id).submit();;
}
}
</script>
Este código va entre los tags de header de nuestra página, y cada uno solo redirecciona a la pagina correspondiente con el id sobre el que tiene que accionar.
Al finalizar nuestros cambios deberían tener algo similar a esto:
<?php
//Este archivo contendrá todo lo relacionado a la conexion de la base de datos;
//include_once('../includes/constantes.php');
$mysql_host = '127.0.0.1';
$mysql_user = 'root';
$mysql_password = '';
$mysql_base = 'curso_php';
$con = mysql_connect($mysql_host,$mysql_user,$mysql_password);
mysql_select_db($mysql_base);
$query = "SELECT titulo, contenido, id, fecha_crea, fecha_publica, estatus, tipo FROM posts WHERE tipo = 'post' ";
$res = mysql_query($query);
?>
<html>
<head>
<title>El blog de Frisley</title>
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="default.css">
<script src="../js/jquery-2.0.3.min.js"></script>
<script src="../js/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
function createPost(){
}
function editPost(id){
window.location = 'http://127.0.0.1/blog/admin/post_editar.php?id='+id;
}
function deletePost(id){
var conf = confirm('Estas seguro de querer eliminar este post?');
if(conf)
{
$("#eliminarForm_"+id).submit();
}
}
</script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Administrador Blog</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="../index.php">Ir al Blog</a></li>
<li><a href="index.php">Inicio</a></li>
<li><a href="post_crear.php">Crear Nuevo Post</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Cerrar Sesión</a></li>
</ul>
</div>
</div>
<div class="container theme-showcase">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Administrador del blog</h3>
<div style="float: right; margin-top:-20px"><button type="button" onclick="createPost()" class="btn btn-xs btn-success">Nuevo Post</button></div>
</div>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Titulo</th>
<th>Fecha</th>
<th>Estatus</th>
<th>Tipo</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_assoc($res)){
?>
<tr>
<td><?php echo $row['titulo'];?></td>
<td><?php echo $row['fecha_crea'];?></td>
<td><?php if($row['estatus'] == 'P'){ echo 'Publicado';}else{ echo 'Borrador'; }?></td>
<td><?php echo $row['tipo'];?></td>
<td>
<button style="float: left; margin-right: 10px;" type="button" onclick="editPost('<?php echo $row['id'];?>')" class="btn btn-xs btn-primary">Editar</button>
<form style="float: left" name="eliminarForm_<?php echo $row['id']; ?>" id="eliminarForm_<?php echo $row['id']; ?>" method="post" action="post_ax.php">
<input type="hidden" name="ax" value="eliminar" />
<input type="hidden" name="id" value="<?php echo $row['id']; ?>" />
<button type="button" onclick="deletePost('<?php echo $row['id'];?>')" class="btn btn-xs btn-danger">Eliminar</button>
</form>
</td>
</tr>
<?php
} ?>
</tbody>
</table>
</div>
</div>
</body>
</html>
<?php
mysql_close($con);
?>
Página de Creación de Posts
Para esta página que iniciamos en la clase anterior, la modificaremos para que quede mejor visualmente y tenga mas funcionalidad entre ello el subir una imagen o archivo adjunto al post.
iniciaremos agregando las mismas cabeceras del admin:
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="../js/minified/themes/default.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="default.css">
<script src="../js/jquery-2.0.3.min.js"></script>
<script src="../js/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/minified/jquery.sceditor.bbcode.min.js"></script>
Luego de esto cambiaremos un poco el orden del markup interno de la página para que quede de manera que bootstrap nos ayude a organizarlo.
<html>
<head>
<title>El blog de Frisley</title>
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="../css/jHtmlArea.css">
<link rel="stylesheet" href="default.css">
<script src="../js/jquery-2.0.3.min.js"></script>
<script src="../js/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jHtmlArea-0.7.5.js"></script>
<script>
$(function() {
$("textarea").htmlarea();
});
</script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Administrador Blog</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.php">Inicio</a></li>
<li><a href="post_crear.php">Crear Nuevo Post</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Cerrar Sesión</a></li>
</ul>
</div>
</div>
<div class="container theme-showcase">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Crear nuevo post</h3>
</div>
<div class="panel-body">
<div id="formularios">
<form action="post_ax.php" method="post" role="form" class="form-horizontal" enctype="multipart/form-data" >
<div class="form-group">
<label for="titulo" class="col-lg-2 control-label">Titulo:</label>
<div class="col-lg-10">
<input type="text" name="titulo" id="titulo" class="form-control" placeholder="Ingresar el titulo del post" />
</div>
</div>
<div class="form-group">
<label for="contenido" class="col-lg-2 control-label">Contenido:</label>
<div class="col-lg-10">
<textarea name="contenido" id="contenido" class="form-control" cols="30" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile" class="col-lg-2 control-label">Adjuntar un archivo</label>
<div class="col-lg-10">
<input type="hidden" name="MAX_FILE_SIZE" value="200000" />
<input name="file" type="file" id="exampleInputFile">
<p class="help-block">El archivo debe ser una imagen jpg, gif o png de no mas de 2MB.</p>
</div>
</div>
<div class="form-group">
<label for="estatus" class="col-lg-2 control-label">Estatus:</label>
<div class="col-lg-10">
<select name="estatus" id="estatus" class="form-control" >
<option value="B" selected="selected">Borrador</option>
<option value="P">Publicado</option>
</select>
</div>
</div>
<div class="form-group">
<label for="estatus" class="col-lg-2 control-label"></label>
<div class="col-lg-10">
<input type="hidden" name="ax" value="crear" />
<button type="submit" class="btn btn-success">Guardar</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Luego de modificar el markup para que quede asi como esta anteriormente descrito verán que se ordeno el formulario y la forma de envio, se agrego la forma de encriptar lo enviado para poder agregar una imagen al post (enctype=”multipart/form-data)”.
Página de edición de post:
se creará la pagina post_editar.php en la que se creara el formulario de edición del contenido ya ingresado. Tomaremos como modelo base el formulario de post_crear.php para que no empecemos de cero.
Luego de esto haremos una busqueda en la base de datos para el id que estamos enviando desde el administrador y asi poder tener la información de solo ese post.
<?php
//Este archivo contendrá todo lo relacionado a la conexion de la base de datos;
//include_once('../includes/constantes.php');
$mysql_host = '127.0.0.1';
$mysql_user = 'root';
$mysql_password = '';
$mysql_base = 'curso_php';
$post_id = $_GET['id'];
$con = mysql_connect($mysql_host,$mysql_user,$mysql_password);
mysql_select_db($mysql_base);
$query = "SELECT * FROM posts WHERE id = $post_id";
$res = mysql_query($query);
while($r = mysql_fetch_assoc($res)){
?>
<html>
<head>
<title>El blog de Frisley</title>
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="../css/jHtmlArea.css">
<link rel="stylesheet" href="default.css">
<script src="../js/jquery-2.0.3.min.js"></script>
<script src="../js/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jHtmlArea-0.7.5.js"></script>
<script>
$(function() {
$("textarea").htmlarea();
});
</script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Administrador Blog</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.php">Inicio</a></li>
<li><a href="post_crear.php">Crear Nuevo Post</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Cerrar Sesión</a></li>
</ul>
</div>
</div>
<div class="container theme-showcase">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Editar post</h3>
</div>
<div class="panel-body">
<div id="formularios">
<form action="post_ax.php" method="post" role="form" class="form-horizontal" enctype="multipart/form-data" >
<div class="form-group">
<label for="titulo" class="col-lg-2 control-label">Titulo:</label>
<div class="col-lg-10">
<input type="text" name="titulo" id="titulo" class="form-control" placeholder="Ingresar el titulo del post" value="<?php echo $r['titulo']; ?>" />
</div>
</div>
<div class="form-group">
<label for="contenido" class="col-lg-2 control-label">Contenido:</label>
<div class="col-lg-10">
<textarea name="contenido" id="contenido" class="form-control" cols="30" rows="10"><?php echo $r['contenido']; ?></textarea>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile" class="col-lg-2 control-label">Adjuntar un archivo</label>
<div class="col-lg-10">
<input type="hidden" name="MAX_FILE_SIZE" value="200000" />
<input name="file" type="file" id="exampleInputFile">
<p class="help-block">El archivo debe ser una imagen jpg, gif o png de no mas de 2MB.</p>
</div>
</div>
<div class="form-group">
<label for="estatus" class="col-lg-2 control-label">Estatus:</label>
<div class="col-lg-10">
<select name="estatus" id="estatus" class="form-control" >
<option value="B" <?php if($r['estatus'] == 'B'){ echo 'selected="selected"'; } ?>>Borrador</option>
<option value="P" <?php if($r['estatus'] == 'P'){ echo 'selected="selected"'; } ?>>Publicado</option>
</select>
</div>
</div>
<div class="form-group">
<label for="estatus" class="col-lg-2 control-label"></label>
<div class="col-lg-10">
<input type="hidden" name="ax" value="editar" />
<input type="hidden" name="id" value="<?php echo $post_id; ?>" />
<button type="submit" class="btn btn-success">Guardar Cambios</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<?php } ?>
Al tener esto ya incluido se darán cuenta que agregamos algunos campos nuevos como el input de id con el id del post que estamos editando, cambiamos el input ax a editar esto para poder modificar post_ax.php conforme a lo que necesitamos en cada paso de la creación, edición y eliminación de posts.
Eliminación de post:
Este es solo un botón que valida si quiere eliminar el post y esto luego si es aceptado envia un formulario para eliminar la información a post_ax.php y luego regresa al index de nuestro administrador.
Nuestro archivo post_ax.php quedará de esta manera luego de agregar las partes de editar y eliminar de nuestro administrador:
<?php
include_once('../includes/constantes.php');
if(isset($_POST['ax']) && $_POST['ax'] != '')
{
if($_POST['ax'] == 'crear'){
$con = mysql_connect(BD_SERVIDOR,BD_USUARIO,BD_PASSWORD);
mysql_select_db(BD_BASE);
$usuario_id = 1;
$titulo = $_POST['titulo'];
$contenido = $_POST['contenido'];
$estatus = $_POST['estatus'];
$tipo = 'post';
$fecha_crea = date('Y-m-d H:i:s');
//INSERTAR POST
$query = "INSERT INTO posts
(usuario_id, titulo, contenido, estatus, tipo, fecha_crea)
VALUES ('$usuario_id','$titulo','$contenido','$estatus','$tipo','$fecha_crea')";
$res = mysql_query($query);
$insertedid = mysql_insert_id($con);
//SUBIR IMAGEN
$uploaddir = '../uploads/';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);
$uploadtipo = $_FILES['file']['type'];
$uploadpeso = $_FILES['file']['size'];
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
$query2 = "INSERT INTO multimedia
(post_id, usuario_id, titulo, archivo, archivo_tipo, archivo_peso, estatus, fecha_crea)
VALUES ('$insertedid','$usuario_id','subido en post $insertedid','$uploadfile','$uploadtipo','$uploadpeso','A','$fecha_crea')";
$res2 = mysql_query($query2);
}
mysql_close($con);
header('location: index.php');
}
if($_POST['ax'] == 'editar'){
$con = mysql_connect(BD_SERVIDOR,BD_USUARIO,BD_PASSWORD);
mysql_select_db(BD_BASE);
$usuario_id = 1;
$titulo = $_POST['titulo'];
$contenido = $_POST['contenido'];
$estatus = $_POST['estatus'];
$id = $_POST['id'];
$tipo = 'post';
$fecha_crea = date('Y-m-d H:i:s');
$query = "UPDATE posts SET
usuario_id = 'usuario_id', titulo = '$titulo', contenido = '$contenido', estatus = '$estatus', tipo = '$tipo'
WHERE id = $id ";
$res = mysql_query($query);
//SUBIR IMAGEN
$uploaddir = '../uploads/';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);
$uploadtipo = $_FILES['file']['type'];
$uploadpeso = $_FILES['file']['size'];
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
$query2 = "INSERT INTO multimedia
(post_id, usuario_id, titulo, archivo, archivo_tipo, archivo_peso, estatus, fecha_crea)
VALUES ('$id','$usuario_id','subido en post $insertedid','$uploadfile','$uploadtipo','$uploadpeso','A','$fecha_crea')";
$res2 = mysql_query($query2);
}
mysql_close($con);
header('location: index.php');
}
if($_POST['ax'] == 'eliminar'){
$con = mysql_connect(BD_SERVIDOR,BD_USUARIO,BD_PASSWORD);
mysql_select_db(BD_BASE);
$id = $_POST['id'];
$query = "DELETE FROM posts WHERE id = $id ";
$res = mysql_query($query);
mysql_close($con);
header('location: index.php');
}
}else{
header('location: index.php');
}
?>
estos cambios y agregados nos permiten subir archivos, modificar y eliminar los post para tener ya algo mas presentable.
Bitacoras.com
18. Oct, 2013
Información Bitacoras.com
Valora en Bitacoras.com: En esta clase realizaremos a mas detalle el administrador de nuestro blog, nos dedicaremos a modificar el creador de posts, mejoras en administrador de posts, edición de posts y eliminación de los que no queremos. Usaremos …