PHP Básico - Clase 4

Posteado el 18. Oct, 2013 por in Php, PHP

Descargar Código Completo

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.

 

Administrador de posts

Como primer punto luego de bajar todos los archivos anteriores los colocaremos en nuestra carpeta de blog de la siguiente manera.

Screen Shot 2013-10-18 at 6.23.17 PM

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:

Visual del Admin ya modificado

Visual del Admin ya modificado

<?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&oacute;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.


Tags:

Una respuesta para “PHP Básico - Clase 4”

  1. 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 …

Deja tu Comentario

Tutoriales en la web se reserva el derecho de moderación de los comentarios. Evita por favor utilizar palabras soeces, ataques directos e insultos, de lo contrario tu comentario será eliminado.

Hire PHP Developer India
Get Adobe Flash player