Post Top Ad

Your Ad Spot

jueves, 7 de mayo de 2020

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

Estoy emocionado de llevarte a través de este tutorial largamente esperado, finalmente. Le mostraré cómo crear una aplicación de blog completa desde cero utilizando la base de datos PHP y MySQL. Un blog, tal como lo conoce, es una aplicación donde algunos usuarios (usuarios administradores) pueden crear, editar, actualizar y publicar artículos para que estén disponibles en el público para leer y tal vez comentar. 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 comentar sobre ellos.

caracteristicas:

  • Un sistema de registro de usuarios que gestiona dos tipos de usuarios: Admin 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 registrados 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 otros usuarios administradores
    • Autor:
      • Puede crear, ver, actualizar y eliminar solo publicaciones creadas por ellos mismos
      • No pueden publicar una publicación. Toda publicación de publicaciones es realizada por 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, autor y 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.
Curso recomendado: PHP Beginner To Master - Proyecto CMS

Implementación

De acuerdo, 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 en su interior: admin, incluye y static.
Las 3 carpetas tendrán los siguientes contenidos:
  • admin: retendrá archivos para el área de administración de back-end. Archivos relacionados con la creación, visualización, actualización y eliminación de publicaciones, temas, usuarios.
  • incluye: contendrá archivos que contengan partes de código que se incluirán en una o más páginas. Por ejemplo, archivos para mostrar 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 establecida en  contenedor que envuelve toda nuestra aplicación, incluidas 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 bien como te hubiera gustado, ¿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 un estilo predeterminado para el sitio seguido de un estilo para la barra de navegación y el del pie de página.
Vuelva a cargar la página en el navegador. Nuestra página simple ahora tiene una bonita barra de navegación con un logotipo, algunas fuentes hermosas y, si te desplazas hacia abajo, nuestro pie de página se esconde en algún lugar en la parte inferior. ¡Excelente!
Sin embargo, nuestra página 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 de 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 el mismo código en esas ubicaciones, pero con la ventaja de que evita la repetición del 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 de 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 hacia abajo e incluya la etiqueta <meta charset = "UTF-8 "> directamente encima de sus etiquetas <title> y córtela. Ahora dirígete al archivo recién creado complete-blog-php / includes / head_section.php y pega 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 las otras para fines de optimización del motor 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 de inclusión . 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 de la etiqueta <div> de 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 include para 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 que incluye:
<!-- navbar is up here... -->

<!-- banner -->
<?php include('includes/banner.php') ?>
DESCARGUE esta imagen , cámbiele el nombre a banner.jpg y colóquela en su carpeta completa-blog- php / static / images / . Es la imagen de fondo del banner.
Una vez que haya hecho eso, agregue este código CSS en su archivo public_styling.css ; es el estilo para el 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%;
}
Recargue la página ahora.
Si hiciste todo correctamente, tendrás un hermoso banner con la imagen banner.jpg en el fondo, un formulario de inicio de sesión a la derecha y una cita inspiradora junto con un botón 'Únete 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, en el 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 utiliza 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 Se utiliza para formar enlaces a CSS, imágenes, javascript. http : // localhost complete blog php .
Espero haber explicado esas dos variables lo suficientemente bien. Si no entendió, solo quédese, podría resolverlo 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 en nuestro código donde incluimos otros segmentos de código para que ahora usen la variable ROOT_PATH al señalar 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 más adelante algunos archivos se mueven a otros directorios, es posible que no necesitemos actualizar los archivos incluidos. 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. Todavía no hemos creado una base de datos y si hace clic en el botón unirse a nosotros, recibirá un error que dice "archivo no encontrado". El inicio de sesión del usuario aún no se ha implementado también. Todo esto se tratará 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

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas