problem in flash message
Tags: node, javascript, express
Published: 2021-06-22 12:32:16

my main app.js
require('dotenv').config();
const express = require('express');
const engine = require('ejs-mate');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const favicon = require('serve-favicon');
const bodyParser = require('body-parser');
const passport = require('passport');
const User = require('./models/user');
const session = require('express-session');
const mongoose = require('mongoose');
const methodOveride = require('method-override');

//configur passport and session
app.use(session({
  secret: 'syukri',
  resave: false,
  saveUninitialized: true,
  }));

app.use(passport.initialize());
app.use(passport.session());

passport.use(User.createStrategy());
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());


// set local variables middleware
app.use(function(req, res, next) {
  // set default page title
  res.locals.title = 'Sistem Siswa';
  // set success flash message
  res.locals.success = req.session.success || '';
  delete req.session.success;
  // set error flash message
  res.locals.error = req.session.error || '';
  delete req.session.error;
  // continue on to next function in middleware chain
  next();
});

the flash-message.ejs file

<% if(success && success.length) { %>
	<h1 style="color: green;"><%= success %></h1>
<% } %>

<% if(error && error.length) { %>
	<h1 style="color: red;"><%= error %></h1>
<% } %>


the show.ejs file

<% layout('layouts/post-show-layout') -%>

<h1><%= post.title %></h1>
<div>Price: <%= post.price %></div>
<div><%= post.description %></div>
<div><%= post.location %></div>
<div>
	<% post.images.forEach(function(image) { %>
	<img src="<%= image.url %>" alt="Surf board image" width="200px">
	<% }); %>
</div>
<div id='map'></div>
<div>
	<a href="/posts/<%= post.id %>/edit">
		<button>Edit</button>
	</a>
</div>
<div>
	<form action="/posts/<%= post.id %>?_method=DELETE" method="POST">
		<input type="submit" value="Delete">
	</form>
</div>

the show-post-layout.ejs file
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.css' rel='stylesheet' />
    <link rel="stylesheet" href="/stylesheets/post-show.css">
</head>
<body>
    <% include ../partial/navbar %>
    <% include ../partial/flash-message %>
    <%- body -%>
    <script>
        var post = <%- JSON.stringify(post) %>;
    </script>
   <script src="/javascripts/post_show.js"></script>
</body>
</html>

the controller post.js file
// Posts Create
	async postsCreate(req, res, next) {
		req.body.post.images = [];
		for(const file of req.files) {
			let image = await cloudinary.uploader.upload(file.path);
			req.body.post.images.push({
				url: image.secure_url,
				public_id: image.public_id
			})
		}
		let response = await geocodingClient
		  .forwardGeocode({
		    query: req.body.post.location,
		    limit: 1
		  }). send();
		  req.body.post.coordinates = response.body.features[0].geometry.coordinates;
		  let post = await Post.create(req.body.post);
		  req.session.success = 'Post created successfully!';
		res.redirect(`/posts/${post.id}`);
		},