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 lo conoce es una aplicación en la que 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.
Características:
- Un sistema de registro de usuarios que gestiona dos tipos de usuarios: Administración 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 NINGÚN correo.
- 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
- Ellos no puedo publicar una publicación. Toda la publicación de publicaciones la realiza el usuario administrador.
- Administración:
- 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 varios a varios 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 usando 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:
- administración: Retendrá 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
- estático: Mantenga 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 © <?php echo date('Y'); ?></p>
</div>
<!-- // footer -->
</div>
<!-- // container -->
</body>
</html>Entre las etiquetas
, 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
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?
El estático La carpeta como se indicó anteriormente contendrá, entre otras cosas, el estilo del sitio. Cree 3 subcarpetas dentro de la carpeta estática: css, imagenes, js. En la subcarpeta css que acaba de crear, cree un archivo llamado public_styling.css.
Abierto 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. ¡Estupendo!
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 el incluye o Exigir palabras clave.
Como ya habrás adivinado, es hora de hacer uso de nuestra incluye carpeta que creamos 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 inclusiones, cree 3 archivos a saber head_section.php, navbar.php y footer.php.
.png.2018-02-18.1518947179.png)
Ve a la index.php archivo, seleccione la parte del código desde la primera línea hasta e incluyendo el «UTF-8«> etiqueta directamente encima de las etiquetas