Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo crear un blog en PHP y base de datos MySQL

 Estoy emocionado de llevarlos a través de este tutorial tan esperado, finalmente. Le mostraré cómo crear una aplicación de blog completa desde cero utilizando PHP y la base de datos MySQL. Un blog como usted lo conoce es una aplicación donde algunos usuarios (usuarios administradores) pueden crear, editar, actualizar y publicar artículos para que estén disponibles al público para leerlos y tal vez comentarlos. Los usuarios y el público pueden navegar a través de un catálogo de estos artículos y hacer clic en cualquiera para leer más sobre el artículo y comentarlo.

caracteristicas:

  • Un sistema de registro de usuarios que gestiona dos tipos de usuarios: administradores y  usuarios normales.
  • El blog tendrá un área de administración y un área pública separadas entre sí.
  • El área de administración será accesible solo para los usuarios administradores que hayan iniciado sesión y el área pública para los usuarios normales y el público en general
  • En la sección de administración, existen dos tipos de administradores: 
    • Administración:
      • Puede crear, ver, actualizar, publicar / anular la publicación y eliminar CUALQUIER publicación.
      • También puede crear, ver, actualizar y eliminar temas.
      • Un usuario administrador (y solo un usuario administrador) puede crear otro usuario administrador o autor
      • Puede ver, actualizar y eliminar a otros usuarios administradores
    • Autor:
      • Puede crear, ver, actualizar y eliminar solo publicaciones creadas por ellos mismos
      • No pueden publicar una publicación. Toda la publicación de publicaciones la realiza el usuario administrador.
  • Solo las publicaciones publicadas se muestran en el área pública para su visualización
  • Cada publicación se crea bajo un tema en particular
  • Existe una relación de muchos a muchos entre publicaciones y temas.
  • La página pública enumera las publicaciones; cada publicación se muestra con una imagen destacada, un autor y una fecha de creación.
  • El usuario puede navegar a través de todos los listados de publicaciones bajo un tema en particular haciendo clic en el tema
  • Cuando un usuario hace clic en una publicación, puede ver la publicación completa y comentar en la parte inferior de las publicaciones.
  • Se implementa un sistema de comentarios Disqus que permite a los usuarios comentar utilizando cuentas de redes sociales con plataformas como Facebook, GooglePlus, Twitter.

Implementación

Bien, de inmediato comencemos a codificar.

Llamaremos al proyecto complete-blog-php.  En el directorio de su servidor (htdocs o www), cree una carpeta llamada  complete-blog-php.  Abra esta carpeta en un editor de texto de su elección, por ejemplo, Sublime Text. Cree las siguientes subcarpetas dentro de él: admin, includes y static.

Las 3 carpetas contendrán los siguientes contenidos:

  • admin: contendrá archivos para el área administrativa de backend. Archivos relacionados con la creación, visualización, actualización y eliminación de publicaciones, temas y usuarios.
  • incluye: contendrá archivos que contengan fragmentos de código que se incluirán en una o más páginas. Por ejemplo, archivos para visualización de errores
  • static:  contiene archivos estáticos como imágenes, hojas de estilo CSS, Javascript.

En la carpeta raíz de la aplicación, cree un archivo llamado  index.php:

Ábrelo y pega este código en él:

<!DOCTYPE html>
<html>
<head>
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Averia+Serif+Libre|Noto+Serif|Tangerine" rel="stylesheet">
	<!-- Styling for public area -->
	<link rel="stylesheet" href="static/css/public_styling.css">
	<meta charset="UTF-8">
	<title>LifeBlog | Home </title>
</head>
<body>
	<!-- container - wraps whole page -->
	<div class="container">
		<!-- navbar -->
		<div class="navbar">
			<div class="logo_div">
				<a href="index.php"><h1>LifeBlog</h1></a>
			</div>
			<ul>
			  <li><a class="active" href="index.php">Home</a></li>
			  <li><a href="#news">News</a></li>
			  <li><a href="#contact">Contact</a></li>
			  <li><a href="#about">About</a></li>
			</ul>
		</div>
		<!-- // navbar -->

		<!-- Page content -->
		<div class="content">
			<h2 class="content-title">Recent Articles</h2>
			<hr>
			<!-- more content still to come here ... -->
		</div>
		<!-- // Page content -->

		<!-- footer -->
		<div class="footer">
			<p>MyViewers &copy; <?php echo date('Y'); ?></p>
		</div>
		<!-- // footer -->

	</div>
	<!-- // container -->
</body>
</html>

Entre las etiquetas <head> </head>, hemos incluido enlaces a algunas fuentes de Google. También hay un enlace a nuestro archivo de estilo public_styling.css, que crearemos en un minuto.

Observe también el elemento <div> con una clase configurada como  contenedor que envuelve toda nuestra aplicación, incluida la barra de navegación, el contenido de la página y las secciones de pie de página de la página.

Para ver esto en su navegador, vaya a  http : // localhost complete blog php index php .

No se ve tan genial como te hubiera encantado, ¿verdad? 

La carpeta estática como se indicó anteriormente contendrá, entre otras cosas, el estilo del sitio. Cree 3 subcarpetas dentro de la carpeta estática: css , images , js . En la subcarpeta css que acaba de crear, cree un archivo llamado public_styling.css .

Abra public_styling.css y agregue este código de estilo: 

/****************
*** DEFAULTS
*****************/
* { margin: 0px; padding: 0px; }

html { height: 100%; box-sizing: border-box; }
body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
}
/* HEADINGS DEFAULT */
h1, h2, h3, h4, h5, h6 { color: #444; font-family: 'Averia Serif Libre', cursive; }
a { text-decoration: none; }
ul, ol { margin-left: 40px; }
hr { margin: 10px 0px; opacity: .25; }

/* FORM DEFAULTS */
form h2 {
	margin: 25px auto;
	text-align: center;
	font-family: 'Averia Serif Libre', cursive;
}
form input {
	width: 100%;
	display: block;
	padding: 13px 13px;
	font-size: 1em;
	margin: 5px auto 10px;
	border-radius: 3px;
	box-sizing : border-box;
	background: transparent;
	border: 1px solid #3E606F;
}
form input:focus {
	outline: none;
}
/* BUTTON DEFAULT */
.btn {
	color: white;
	background: #4E6166;
	text-align: center;
	border: none;
	border-radius: 5px;
	display: block;
	letter-spacing: .1em;
	margin: 10px 0px;
	padding: 13px 20px;
	text-decoration: none;
}
.container {
	width: 80%;
	margin: 0px auto;
}
/* NAVBAR */
.navbar {
	margin: 0 auto;
    overflow: hidden;
	background-color: #3E606F;
    border-radius: 0px 0px 6px 6px;
}
.navbar ul {
    list-style-type: none;
    float: right;
}
.navbar ul li {
    float: left;
    font-family: 'Noto Serif', serif;
}
.navbar ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 20px 28px;
    text-decoration: none;
}
.navbar ul li a:hover {
	color: #B9E6F2;
    background-color: #334F5C;
}

/* LOGO */
.navbar .logo_div {
	float: left; 
	padding-top: 5px;
	padding-left: 40px;
}
.navbar .logo_div h1 {
	color: #B9E6F2;
	font-size: 3em;
	letter-spacing: 5px;
	font-weight: 100;
	font-family: 'Tangerine', cursive;
}

/* FOOTER */
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  color: white;
  background-color: #73707D;
  text-align: center;
  width: 80%;
  margin: 20px auto 0px;
  padding: 20px 0px;
}

Este código comienza con el estilo predeterminado para el sitio seguido por el estilo de la barra de navegación y el del pie de página.

Vuelve a cargar la página en el navegador. Nuestra página simple ahora tiene una barra de navegación de aspecto agradable con un logotipo, algunas fuentes hermosas y, si se desplaza hacia abajo, nuestro pie de página se esconde en algún lugar en la parte inferior. ¡Excelente!

Nuestra página, sin embargo, tiene algunos segmentos de código que se repetirán en muchas otras páginas del sitio web. Por ejemplo, la mayoría de las páginas necesitarán una barra de navegación y el pie de página, así como los enlaces al estilo y las fuentes que se encuentran en la sección del encabezado. En PHP, podemos escribir un fragmento de código en un archivo e incluirlo en una posición particular en varios otros archivos. Esto es lo mismo que escribir ese mismo código en esas ubicaciones pero con la ventaja de que evita la repetición de código. Hacemos esto usando las palabras clave include o require .

Como es posible que ya han adivinado, es el momento de hacer uso de nuestra incluye a la carpeta que hemos creado al principio. Las secciones que se repiten son la sección del encabezado, la barra de navegación y el pie de página. Entonces, en su carpeta de inclusión , cree 3 archivos, a saber  head_section.php , navbar.php y footer.php .

Vaya al archivo index.php , seleccione la parte del código desde la primera línea hasta e incluyendo la etiqueta <meta charset = "UTF-8 "> directamente encima de sus etiquetas <title> y córtela. Ahora diríjase al archivo recién creado complete-blog-php / includes / head_section.php y pegue el código en él. 

Entonces, el archivo head_section.php tiene el siguiente código:

<!DOCTYPE html>
<html>
<head>
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Averia+Serif+Libre|Noto+Serif|Tangerine" rel="stylesheet">
	<!-- Styling for public area -->
	<link rel="stylesheet" href="static/css/public_styling.css">
	<meta charset="UTF-8">

De vuelta en su archivo index.php , reemplace el código que acaba de cortar con la siguiente línea:

<?php require_once('includes/head_section.php') ?>

Tenga en cuenta que la línea que sigue inmediatamente a esta línea de inclusión es la etiqueta <title>. No incluimos la etiqueta <title> en el archivo head_section.php porque el título de cada página podría tener que ser diferente de los demás para fines de optimización de motores de búsqueda.

Ahora hagamos lo mismo con la sección de la barra de navegación y el pie de página. 

En su archivo index.php , seleccione y corte el código de la barra de navegación donde se indica con un comentario y péguelo dentro de navbar.php  en la carpeta incluye. Aquí está navbar.php después de pegar:

<div class="navbar">
	<div class="logo_div">
		<a href="index.php"><h1>LifeBlog</h1></a>
	</div>
	<ul>
	  <li><a class="active" href="index.php">Home</a></li>
	  <li><a href="#news">News</a></li>
	  <li><a href="#contact">Contact</a></li>
	  <li><a href="#about">About</a></li>
	</ul>
</div>

Luego, en lugar de la barra de navegación en su index.php , agregue esta línea:

<!-- navbar -->
<?php include('includes/navbar.php') ?>

En cuanto al pie de página, seleccione y corte el código desde la etiqueta <div> del pie de página de apertura hasta la última línea de la página, y péguelo en el archivo footer.php recién creado. Aquí está el archivo footer.php después de pegar:

		<div class="footer">
			<p>MyViewers &copy; <?php echo date('Y'); ?></p>
		</div>
	</div>
	<!-- // container -->
</body>
</html>

Luego reemplace esta sección en la página index.php con la inclusión de footer.php

<!-- footer -->
<?php include('includes/footer.php') ?>

Después de todo este reordenamiento, nuestro archivo index.php se ve así:

<?php require_once('includes/head_section.php') ?>
	<title>LifeBlog | Home </title>
</head>
<body>
	<!-- container - wraps whole page -->
	<div class="container">
		<!-- navbar -->
		<?php include('includes/navbar.php') ?>

		<!-- Page content -->
		<div class="content">
			<h2 class="content-title">Recent Articles</h2>
			<hr>
			<!-- more content still to come here ... -->
		</div>
		<!-- // Page content -->

		<!-- footer -->
		<?php include('includes/footer.php') ?>

Si vuelve a cargar la página, no se observará ningún cambio.

Ahora agreguemos un banner en la página de inicio inmediatamente debajo de la barra de navegación. Cree un nuevo archivo llamado banner.php en su carpeta complete-blog- php / includes y pegue este código en él:

<div class="banner">
	<div class="welcome_msg">
		<h1>Today's Inspiration</h1>
		<p> 
		    One day your life <br> 
		    will flash before your eyes. <br> 
		    Make sure it's worth watching. <br>
			<span>~ Gerard Way</span>
		</p>
		<a href="register.php" class="btn">Join us!</a>
	</div>
	<div class="login_div">
		<form action="index.php" method="post" >
			<h2>Login</h2>
			<input type="text" name="username" placeholder="Username">
			<input type="password" name="password"  placeholder="Password"> 
			<button class="btn" type="submit" name="login_btn">Sign in</button>
		</form>
	</div>
</div>

Incluya esto en su index.php inmediatamente debajo de la barra de navegación incluye:

<!-- navbar is up here... -->

<!-- banner -->
<?php include('includes/banner.php') ?>

POR FAVOR DESCARGUE esta imagen , cámbiele el nombre a banner.jpg y colóquela en su carpeta -blog- php / static / images / . Es la imagen de fondo del banner.

Una vez hecho esto, agregue este código CSS en su archivo public_styling.css ; es el estilo del banner:

/* BANNER: Welcome message; */
.banner {
	margin: 5px auto;
	min-height: 400px;
	color: white;
	border-radius: 5px;
	background-image: url('../images/banner.jpg');
	background-size: 100% 100%;
}
.banner .welcome_msg {
	width: 45%;
	float: left;
	padding: 20px;
}
.banner .welcome_msg h1 {
	color: #B9E6F2;
	margin: 25px 0px;
	font-size: 2.4em;
	font-family: 'Averia Serif Libre', cursive;
}
.banner .welcome_msg p {
	color: white;
	font-size: 1.5em;
	line-height: 1.8em;
    font-family: 'Noto Serif', serif;
}
.banner .welcome_msg p span {
	font-size: .81em; 
	color: #3E606F;
}
.banner .welcome_msg a {
	width: 30%;
	margin: 20px 0px;
	padding: 12px 15px;
	font-size: 1.2em;
	text-decoration: none;
}
.banner .welcome_msg a:hover {
	background: #374447;
}

/* BANNER: Login Form; */
.banner .login_div {
	width: 50%;
	float: left;
}
.banner .login_div form {
	margin-top: 40px;
}
.banner .login_div form h2 {
	color: white;
	margin-bottom: 20px;
    font-family: 'Noto Serif', serif;
}
.banner .login_div form input {
	width: 60%;
	color: white;
	border: 1px solid white;
	margin: 10px auto;
	letter-spacing: 1.3px;
    font-family: 'Noto Serif', serif;
}
.banner .login_div form button {
	display: block;
	background: #006384;
	margin-left: 20%;
}

Vuelva a cargar la página ahora.

Si hizo todo correctamente, tendrá un hermoso banner con la imagen banner.jpg en su fondo, un formulario de inicio de sesión a la derecha y una cita inspiradora junto con un botón 'Únase a nosotros' a la izquierda. ¡Frio!

Creemos un archivo para inicializar las variables globales de nuestra aplicación. En la carpeta raíz (complete-blog-php) de su aplicación, cree un archivo llamado config.php y pegue este código en él:

<?php 
	session_start();

	// connect to database
       // coming soon...

	define ('ROOT_PATH', realpath(dirname(__FILE__)));
	define('BASE_URL', 'http://localhost/complete-blog-php/');
?>

ROOT_PATH se establece en la dirección física con respecto al sistema operativo, al directorio actual en el que reside este archivo (config.php). En mi máquina, por ejemplo, ROOT_PATH tiene el valor  / opt / lampp htdocs / complete-blog- php / . Se usa para incluir archivos físicos como archivos de código fuente PHP (como los que acabamos de incluir), archivos físicos descargables como imágenes, archivos de video, archivos de audio, etc. Pero en este tutorial, lo usaremos solo para incluir archivos fuente PHP .

BASE_URL es simplemente una dirección web que establece una URL que apunta a la raíz de nuestro sitio web. En nuestro caso, su valor es http : // localhost complete blog php .  Se utiliza para formar enlaces a CSS, imágenes, javascript. 

Espero haber explicado estas dos variables lo suficientemente bien. Si no lo entendió, quédese, puede averiguarlo mientras usamos las variables.

Ahora incluyamos el archivo config.php recién creado como nuestra primera línea en index.php. Después de incluirlo, vamos a modificar los cuatro lugares de nuestro código donde incluimos otros segmentos de código para que ahora usen la variable ROOT_PATH para apuntar a esos archivos incluidos. Después de todos estos cambios, nuestro index.php se verá así:

<!-- The first include should be config.php -->
<?php require_once('config.php') ?>
<?php require_once( ROOT_PATH . '/includes/head_section.php') ?>
	<title>LifeBlog | Home </title>
</head>
<body>
	<!-- container - wraps whole page -->
	<div class="container">
		<!-- navbar -->
		<?php include( ROOT_PATH . '/includes/navbar.php') ?>
		<!-- // navbar -->

		<!-- banner -->
		<?php include( ROOT_PATH . '/includes/banner.php') ?>
		<!-- // banner -->

		<!-- Page content -->
		<div class="content">
			<h2 class="content-title">Recent Articles</h2>
			<hr>
			<!-- more content still to come here ... -->
		</div>
		<!-- // Page content -->

		<!-- footer -->
		<?php include( ROOT_PATH . '/includes/footer.php') ?>
		<!-- // footer -->

Esta forma de incluir archivos tiene la ventaja de que, si posteriormente algunos archivos se mueven a otros directorios, es posible que no necesitemos actualizar las inclusiones. Además, si decidimos cambiar la ruta al directorio raíz, solo lo haremos en un lugar, es decir, en el archivo config.php .

Hemos terminado con la configuración básica del área pública. Hasta ahora, la aplicación no es dinámica. Aún no hemos creado una base de datos y si hace clic en el botón unirse a nosotros, obtendrá un error que dice "archivo no encontrado". El inicio de sesión de usuario aún no se ha implementado. Todos estos se tratarán en las siguientes partes de este tutorial.

Espero que lo hayan disfrutado. Si te gustó esta publicación y quieres más, no olvides compartirla con tus amigos usando cualquiera de los enlaces de redes sociales a continuación. Gracias

Publicar un comentario

0 Comentarios