PROYECTO EN NODEJS Y EXPRESS

Crear una carpeta para el proyecto y abrirlo en visual code.

Abrir la terminal de visual code Control+Shif+P luego escribir terminal
Creamos el archivo package.json con el comando npm init - -yes
Instalamos el Framework Express , también el motor de plantillas handlebars y un manejador
de sesiones , y una manejador de mysql y un manejador de sesión en mysql, un módulo
llamado Morgan que permite mostrar en consola las peticiones que van llegando al servidor,
usaremos bcryptjs para cifrar las claves, Passport es un módulo para la autenticación, timeago
controla las fechas y horas,para enviar mensajes entre vistas usaremos connect-flash , para
validar los datos q se envían se usara express-validator ,todo esto con el comando
npm install express express-handlebars express-session mysql express-mysql-session morgan
bcryptjs passport passport-local timeago.js connect-flash express-validator
npm install express-handlebars express-session morgan bcryptjs passport passport-local
timeago.js connect-flash express-validator
(si falla el commando se debe limpiar la cache de npm, npm cache clean)
crear una carpeta para separar la codificación de los modulos mkdir src y luego dentro de ella
crear las siguientes carpetas mkdir lib public routers views, detro de la carpeta src crearemos
también 3 archivo index.js, database.js y keys.js
instalamos el módulo nodemon en modalidad desarrollo npn install nodemon –D
vista del directorio del proyecto
en el archivo index.js definimos la configuración inicial de express

const express = require('express');

const morgan = require('morgan');
//inicializamos express en app
const app = express();

//setting
app.set('port',process.env.PORT || 4000);

//middleware (es una funcion que se ejecuta cada vez que se envia una peticion al
servidor)
app.use(morgan('dev'));

//Global Variables

//Routes

//Public

//Starting The Server

app.listen(app.get('port'), () => {
console.log('Server on port',app.get('port'));
});

En el archivo package.json configuramos nodemon a nuestro index.js

"scripts": {
"dev": "nodemon src/index.js"
},

Ahora en la carpeta de routes creamos el archivo index.js y le damos los siguientes parámetros
básicos

const express = require('express');

//creamos el objeto tipo Router
const router = express.Router();

router.get('/',(req,res) => {
res.send('Hello World')
});

//exportamos el objeto
module.exports = router;

en el archivo principal de index.js hacemos el llamado de esta nueva ruta

//Routes
app.use(require('./routes/index.js'));

ya podemos probar la web applicacion en el navegador y ver el hello world

ahora establecemos y configuramos el motor de vistas Handlebars

const exphbs= require('express-handlebars');
const path =require('path');

//definimos las rutas de nuestras carpetas para poder llamarlas. carpeta views
app.set('views',path.join(__dirname,'views'));
//configuramos el motor de plantillas handlbars, le llamaremos hbs
app.engine('.hbs', exphbs({
defaultLayout:'main', //definimos el nombre de la plantilla principal
layoutDir: path.join(app.get('views'), 'layouts'), //definimos la ruta de la
carpeta layout
partialDir: path.join(app.get('views'),'partial'),// definimos la ruta de la
carpeta parcial
extname: '.hbs', // establecemos la extension de los archivos de vistas
(.hbs)
helpers: require('./lib/handlebars') // establcemos el archivo habdlebars.js
en lib para las funciones js
}));
//asignamos el motor de vistas
app.set('view engine', '.hbs');

para lo anterior se deben crear las siguientes carpetas:

layouts en la carpeta views
partials en la carpeta views
también se deben crear dos archivos
main.hbs en la carpeta layouts
handlebars.js en la carpeta lib
Codigo para permitir enviar archivos por formularios en url, en la sección
midleware
app.use(express.urlencoded({extended:false})); //permitimos envio de url simples
app.use(express.json());//permitimos envios de json por url

Configuraremos 2 archivos de rutas mas

//Routes
app.use(require('./routes/index.js'));
app.use(require('./routes/authentications'));// para las rutas de login, logout,
app.use('/links',require('./routes/link'));// para los enlaces generales, con
prefijo /links

para lo anterior debemos de crear los archivos js en la carpeta de routes

authentications.js y link.js
estos dos archivos no pueden estar vacíos, deben tener al menos el siguiente
código de un objeto en cada uno
const express = require('express');
//creamos el objeto tipo Router
const router = express.Router();

//exportamos el objeto
module.exports = router;

ahora establecemos la ruta de la carpeta public

//Public
//establecemos la ruta de la carpeta public
app.use(express.static(path.join(__dirname,'public')));
Establecemos la conexion a la bas de datos. Archivo database.js
const mysql = require('mysql');//importamos elobjeto mysql
const {promisify} = require('util')//importamos el objeti promisify para crear
promesas
//obtenemos el objeto database del archivo keys
const {database} = require('./keys');
//metodo createpool permite crear un hilo de conexion a la base de datos
const pool = mysql.createPool(database);
//establecemos la conexion con la base de datos, buscamos errores
pool.getConnection((err,connection) => {
if (err){
if (err.code === 'PROTOCOL_CONNECTION_LOST'){
console.error('DATABASE CONNECTION WAS CLOSED');
}
if (err.code === 'ER_CON_COUNT_ERROR'){
console.error('DATABASE HAS TO MANY CONNECTIONS');
}
if (err.code === 'ECONNREFUSED'){
console.error('DATABASE CONNECTION WAS REFUSED');
}
}
if (connection) connection.release();
console.log('DATABASE IS CONNECTED');
return;
});
//usamos promisif para poderusar promesas en el objeto pool
pool.query = promisify(pool.query);
module.exports = pool;//exportamos el objeto pool

el archivo keys contien el objeto databse

module.exports={
//creamos el objeto database
database: {
host: 'localhost',
user: 'root',
password: '',
databse: 'db_links'
}
}
Definimos una ruta /add en el archivo link.js
//definimo una ruta para add
router.get('/add',(req,res) => {
res.render('links/add'); //renderiza la vista add.hbs

});
//exportamos el objeto
module.exports = router;

ahora creamos una carpeta en la sección de views llamada links y ahí creamos el
primer archivo add.hbs
ahora debemos crear la carpeta layouts en la carpeta views, y dentro de layouts
un archivo llamado main.hbs (es la template principal), en este archivo ira el
código base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=links Apps, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Links App</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">

</head>
<body>
{{!-- inicio de la seccion que si va cambiar --}}
{{{ body }}}
{{!-- final de la seccion que si va cambiar --}}
<script src="https://kit.fontawesome.com/3762dfca53.js"></script>
</body>
</html>

Cramos una carpeta llamada css en la carpeta de public y despues creamos un

archivo style.css para los estilos personalizado
En el archivo add creamos un formulario.
<div class="container p-4">

<div class="row">

<div class="col-md-4 mx-auto">

<div class="card">

<div class="card-boy">

<form action="/links/add" method="POST">

<div class="form-group">

<input type="text" class="form-control" name="titulo" placeholder="title" autofocus>

</div>

<div class="form-group">

<input type="url" name="url" class="form-control" placeholder="URL">

</div>

<div class="form-group">

<textarea name="description" rows="2" class="form-control" placeholder="description"></textarea>

</div>

<div class="form-group">

<button class="btn btn-success btn-block">

Save

</button>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

Ahora creamos la ruta que recibirá la petición post, esto en el archivo link.js
//definimos una ruta post para add
router.post('/add',(req,res) => {
//
});

Ahora crearemos una navegación. Para ello creamos una carpeta llamada
partials en la carpeta views y dentro de ella un archivo llamado navigation.hbs y
pegamos una navegación de bootstrap
<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>

Y en el archivo main.hbs de los layouts llamamos este partial de la siguiente

manera
{{!--llamada del partial navigation--}}
{{> navigation}}
{{!-- inicio de la seccion que si va cambiar --}}
{{{ body }}}
{{!-- final de la seccion que si va cambiar --}}
Terminamos de escribir el método /add en la ruta post add
//definimos una ruta post para add
router.post('/add',async (req,res) => {
//console.log(req.body);
const {title, url, description } = req.body;
const newLink = {
title,
url,
description
};
await pool.query('INSERT INTO links SET ?', [newLink]);
res.send('recibido');
});