i need some help with my first CRUD project using Express, MySQL, and EJS for template engine. But somehow my Insert Query doesn’t work as the way i wanted. I don’t know what’s wrong with my code can someone help me
The middleware looks fine, it can retrieve data from the form input in views, when i run the MySQL query no error message is invoked but no data is inserted to the localhost database
const express = require("express");
const app = express();
const mysql = require("mysql");
const bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(
bodyParser.urlencoded({
extended: true,
})
);
app.set("view engine", "ejs");
const con = mysql.createConnection({
host: "localhost",
database: "DataUser",
user: "root",
password: "",
});
app.get("/", (req, res) => {
res.render("login");
});
app.post("/page-register", (req, res) => {
res.render("register");
});
con.connect((err, res) => {
if (err) {
throw err;
} else {
console.log("Terkoneksi dengan database");
}
//Menampilkan data di Page Home
app.post("/home", (req, res) => {
const sqlSelect = "SELECT * FROM Data";
con.query(sqlSelect, (err, result) => {
const user = JSON.parse(JSON.stringify(result));
if (err) {
throw err;
} else {
res.render("home", { user: user });
}
});
});
//Insert data dari Page Register
app.post("/register", (req, res) => {
const username = req.body.username;
const name = req.body.name;
const email = req.body.email;
const password = req.body.username;
const sqlInsert = `INSERT INTO tabel (Username, Name, Email, Password) VALUES ('${username}', '${name}', '${email}', '${password}')`;
con.query(sqlInsert, (err, result, field) => {
if (err) {
throw err;
} else {
console.log(username, name, email, password);
console.log("Berhasil menginputkan data");
res.end;
}
});
});
});
app.listen(8080, () => {
console.log("Server menerima data pada http://localhost:8080");
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
*,
html,
body {
margin: 0;
}
html,
body {
height: 100%;
}
.kontainer {
height: 100%;
padding: 10px;
width: 100%;
background-color: lightblue;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.kontainer .logo h1 {
font-size: 60px;
}
.kontainer .logo h3 {
font-size: 25px;
}
.form {
background-color: white;
padding: 30px;
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
}
.form a {
text-decoration: none;
text-align: center;
}
#Masuk {
font-size: large;
width: 100%;
}
#register {
height: 40px;
width: 140px;
}
hr {
color: black;
}
@media only screen and (max-width: 600px) {
.kontainer {
height: 100%;
padding: 10px;
width: 100%;
background-color: lightblue;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
}
.kontainer .logo h3 {
display: none;
}
.kontainer .logo h1 {
font-size: 50px;
}
}
.wrapper {
height: 100%;
width: 100%;
background-color: lightblue;
display: flex;
}
#regist-container {
background-color: white;
display: flex;
align-items: center;
}
.kon {
width: 100%;
}
#tombol-regist {
display: flex;
justify-content: space-evenly;
}
.wrapper .container .kon h1 {
text-align: center;
margin-bottom: 40px;
}
.tombol-submit {
display: flex;
justify-content: center;
}
#submitkan {
margin-bottom: 10px;
}
</style>
<title>Register</title>
</head>
<body>
<div class="wrapper">
<div class="container" id="regist-container">
<div class="kon">
<h1>Insert Your Data</h1>
<form action="http://localhost:8080/register" method="post">
<div class="mb-3 row">
<label for="Username" class="col-sm-2 col-form-label"
>Username</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
name="username"
id="Username"
required
/>
</div>
</div>
<div class="mb-3 row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input
type="text"
class="form-control"
name="name"
id="Name"
required
/>
</div>
</div>
<div class="mb-3 row">
<label for="Email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input
type="email"
class="form-control"
name="email"
id="Email"
required
/>
</div>
</div>
<div class="mb-3 row" style="margin-bottom: 40px">
<label for="Password" class="col-sm-2 col-form-label"
>Password</label
>
<div class="col-sm-10">
<input
type="password"
class="form-control"
name="password"
id="Password"
required
/>
</div>
</div>
<div class="tombol-submit" id="submitkan">
<form action="http://localhost:8080/register" method="post">
<button
type="submit"
class="btn btn-success"
id="tombol-register"
style="width: 100px"
>
Register
</button>
</form>
</div>
</form>
<form
action="http://localhost:8080"
method="get"
class="tombol-submit"
>
<button
type="submit"
class="btn btn-success"
id="tombol-back"
style="width: 100px"
>
Back
</button>
</form>
</div>
</div>
</div>
</body>
</html>