I try to create web site which will contain ads that users place on the site. I create a database with mongodb, one database contain a images and others database contain text, I create a “seacrets” page when a users login they can add images from computer and text and that will bi store in database. I managed to do it but i dont now how to present images and text from database in html card for each input individually.
This is my app.js
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require("mongoose");
const bcrypt = require("bcrypt");
const saltRounds = 10;
const multer = require("multer");
const app = express();
app.set('view engine', 'ejs');
app.use(express.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
mongoose.set('strictQuery', true);
const db1 = mongoose.createConnection("mongodb://127.0.0.1:27017/SiteofAds",);
const db2 = mongoose.createConnection("mongodb://127.0.0.1:27017/Images",{
useNewUrlParser: true,
useUnifiedTopology: true
});
const db3 = mongoose.createConnection("mongodb://127.0.0.1:27017/Content",);
const UsersSchema = new mongoose.Schema ({
email: String,
password: String,
});
const User = db1.model("User", UsersSchema);
const ImageSchema = new mongoose.Schema({
image: {
data:Buffer,
contentType:String
}
});
const Image = db2.model("Image", ImageSchema);
const storage = multer.memoryStorage()
const upload = multer({storage:storage})
const ContentSchema = new mongoose.Schema({
text: String
});
const Content = db3.model("Content", ContentSchema);
images= []
contents= []
app.get("/", async (req, res) =>{
const images = await Image.find().sort({_id:-1})
const contents = await Content.find().sort({_id:-1})
res.render("home", {images: images, contents: contents});
});
app.get("/login", function(req, res){
res.render("login");
});
app.get("/register", function(req, res){
res.render("register");
});
app.post("/register", function(req, res){
bcrypt.hash(req.body.password, saltRounds, function(err, hash) {
const newUser = new User({
email: req.body.username,
password: hash
});
newUser.save().then(function(){
res.render("secrets");
}).catch(function(error){
console.log(error);
});
});
});
app.post("/login", function(req, res){
const username = req.body.username;
const password = req.body.password;
User.findOne({email:username}).then(user => {
if (user) {
bcrypt.compare(password, user.password, function(err, result) {
if (result === true) {
res.render("secrets");
}
});
}
})
})
myTextArea = "";
img = "";
app.post("/secrets", upload.single("image"), async(req, res) =>{
const image = new Image({
image:{
data: req.file.buffer,
contentType: req.file.mimetype
}
})
const content = new Content({
text: req.body.myTextArea
})
await image.save();
await content.save();
res.render('home');
})
app.get("/contact", function(req, res){
res.render("contact");
});
app.get("/about", function(req, res){
res.render("about");
});
app.get("/proba", function(req, res){
res.render("proba");
});
app.listen(3000, function() {
console.log("Server started on port 3000");
});
this is my home.ejs
<%- include("partials/header") %>
<div class="grid">
<div class="grid-item">
<div class="card">
<img class="card-img" src="images/NoImage.jpg" alt="">
<div class="card-content">
<h1 class="card-header">No.1</h1>
<p slass="card-text">
Text
</p>
<button class="button2"> About</button>
</div>
</div>
</div>
</div>
I found how to pull out data from database with foreach, but i dont now how to data present in individually card.
I try this, but all data from database display on same space in one card. I try put this for loop outside car but i didn’t succed.
Can anyone help me or have any ideas, thanks
<div class="grid">
<div class="grid-item">
<div class="card">
<% if (images.length> 0) { %>
<% images.forEach((image)=> { %>
<div class="card">
<img
src="data:<%= image.image.contentType %>;base64,<%= image.image.data.toString('base64') %>" />
</div>
<% }); %>
<% } else { %>
<p>No images uploaded yet.</p>
<% } %>
<div class="card-content">
<h1 class="card-header">Oglas br.1</h1>
<p slass="card-text">
<% if (contents.length> 0) { %>
<% contents.forEach((content)=> { %>
<div>
<h2>
<%= content.text %>
</h2>
</div>
<% }); %>
<% } else { %>
<p>No content yet.</p>
<% } %>
<button class="button2"> Detalji</button>
</div>
</div>
</div>
</div>
To find a solution for problem.
