code-boxx/0-NODE-BOOKING.MD

## 0-NODE-BOOKING.MD

      
    Raw
  

              0-NODE-BOOKING.MD
            
          
    NODEJS BOOKING SYSTEM

https://code-boxx.com/javascript-booking-system/
NOTES


Install NodeJS if you have not already done so.
Change the email settings in 3-server.js to your own.
Run unpack.bat (Windows) unpack.sh (Linux/Mac). This will automatically:

Create a assets folder, move 1-booking.js and x-dummy.css inside.
Install required modules - npm i express nodemailer body-parser multer
Start the Express and Peer server - 3-server.js.


Access http://localhost/ in your browser.

LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-booking.html
<!DOCTYPE html>
<html>
  <head>
    <title>JS Booking</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/x-dummy.css">
    <script src="assets//1-booking.js"></script>
  </head>
  <body>
    <form id="bookForm" onsubmit="return book();">
      <label for="name">Name</label>
      <input type="text" name="name" required>

      <label for="email">Email</label>
      <input type="email" name="email" required>

      <label for="date">Date</label>
      <input type="date" name="date" required>

      <input type="submit" value="Go!" disabled id="bookGo">
    </form>
  </body>
</html>

## 1-booking.js
function book () {
  // (A) PREVENT MULTIPLE SUBMIT
  document.getElementById("bookGo").disabled = true;

  // (B) COLLECT FORM DATA
  let data = new FormData(document.getElementById("bookForm"));

  // (C) SEND!
  fetch("/book", { method:"POST", body:data })
  .then(res => {
    if (res.status==200) { location.href = "/thankyou"; }
    else { alert("Opps an error has occured."); }
  })
  .catch(err => {
    console.error(err);
    alert("Opps an error has occured.");
  });
  return false;
}

// (D) INIT
window.onload = () => {
  // (D1) MIN SELECTABLE DATE IS TODAY
  let datepick = document.getElementsByName("date")[0];
  datepick.min = new Date().toISOString().split("T")[0];

  // (D2) ENABLE FORM
  document.getElementById("bookGo").disabled = false;
};

## 2-thank-you.html
<!DOCTYPE html>
<html>
  <head>
    <title>JS Booking</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/x-dummy.css">
    </style>
  </head>
  <body>
    <h1>THANK YOU</h1>
    <p>We have received your booking request.</p>
  </body>
</html>

## 3-server.js
// (A) LOAD REQUIRED MODULES
// npm i express nodemailer body-parser multer
const express = require("express"),
      bodyParser = require("body-parser"),
      nodemailer = require("nodemailer"),
      multer = require("multer"),
      path = require("path");

// (B) SETTINGS - CHANGE TO YOUR OWN!
// https://nodemailer.com/
const portHTTP = 80,
      mailSet = {
        port : 25,
        host : "127.0.0.1",
        /* auth: {
          user: EMAIL/USER,
          pass: PASSWORD
        },*/
        tls: { rejectUnauthorized: false }
      },
      mailFrom = "sys@mail.com",
      mailAdmin = "manager@mail.com",
      mailSubject = "Reservation",
      mailTxt = "Booking request received.";

// (C) NODE MAILER & EXPRESS SERVER
const app = express(),
      forms = multer();
app.use("/assets", express.static(path.join(__dirname, "assets")));
app.use(forms.array());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const mailtransport = nodemailer.createTransport(mailSet);

// (D) EXPRESS HANDLERS
// (D1) HOME PAGE - BOOKING FORM
app.get("/", (req, res) => res.sendFile(path.join(__dirname, "1-booking.html")));

// (D2) SEND BOOKING REQUEST VIA EMAIL
app.post("/book", (req, res) => {
  // (D2-1) MAIL MESSAGE
  let msg = mailTxt + "<br>";
  for (const [k, v] of Object.entries(req.body)) { msg += `${k} : ${v}<br>`; }

  // (D2-2) SEND
  mailtransport.sendMail({
    from: mailFrom,
    to: mailAdmin,
    subject: mailSubject,
    html: `<p>${msg}</p>`
  }, (error, info) => {
    if (error) {
      console.log(error);
      res.sendStatus(500);
    } else {
      console.log(req.body);
      res.sendStatus(200);
    }
  });
});

// (D3) THANK YOU
app.get("/thankyou", (req, res) => res.sendFile(path.join(__dirname, "2-thank-you.html")));

// (E) START!
app.listen(portHTTP);

## unpack.bat
md assets
move x-dummy.css assets
move 1-booking.js assets
call npm i express nodemailer body-parser multer
node 3-server.js

## unpack.sh
mkdir -m 777 assets
mv ./x-dummy.css ./assets
mv ./1-booking.js ./assets
source "npm i express nodemailer body-parser multer"
node ./3-server.js

## x-dummy.css
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
#bookForm {
  background: #f7f7f7;
  padding: 20px;
  max-width: 500px;
}
#bookForm * {
  box-sizing: border-box;
}
#bookForm input, #bookForm label {
  display: block;
  width: 100%;
}
#bookForm input {
  padding: 10px;
}
#bookForm label {
  padding: 10px 0;
}
#bookForm input[type="submit"] {
  margin-top: 20px;
  border: 0;
  color: #fff;
  background: #cb1111;
  cursor: pointer;
}
#bookForm input[type="submit"]:disabled { background: #424242; }
	<!DOCTYPE html>
	<html>
	<head>
	<title>JS Booking</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="assets/x-dummy.css">
	<script src="assets//1-booking.js"></script>
	</head>
	<body>
	<form id="bookForm" onsubmit="return book();">
	<label for="name">Name</label>
	<input type="text" name="name" required>

	<label for="email">Email</label>
	<input type="email" name="email" required>

	<label for="date">Date</label>
	<input type="date" name="date" required>

	<input type="submit" value="Go!" disabled id="bookGo">
	</form>
	</body>
	</html>
	function book () {
	// (A) PREVENT MULTIPLE SUBMIT
	document.getElementById("bookGo").disabled = true;

	// (B) COLLECT FORM DATA
	let data = new FormData(document.getElementById("bookForm"));

	// (C) SEND!
	fetch("/book", { method:"POST", body:data })
	.then(res => {
	if (res.status==200) { location.href = "/thankyou"; }
	else { alert("Opps an error has occured."); }
	})
	.catch(err => {
	console.error(err);
	alert("Opps an error has occured.");
	});
	return false;
	}

	// (D) INIT
	window.onload = () => {
	// (D1) MIN SELECTABLE DATE IS TODAY
	let datepick = document.getElementsByName("date")[0];
	datepick.min = new Date().toISOString().split("T")[0];

	// (D2) ENABLE FORM
	document.getElementById("bookGo").disabled = false;
	};
	// (A) LOAD REQUIRED MODULES
	// npm i express nodemailer body-parser multer
	const express = require("express"),
	bodyParser = require("body-parser"),
	nodemailer = require("nodemailer"),
	multer = require("multer"),
	path = require("path");

	// (B) SETTINGS - CHANGE TO YOUR OWN!
	// https://nodemailer.com/
	const portHTTP = 80,
	mailSet = {
	port : 25,
	host : "127.0.0.1",
	/* auth: {
	user: EMAIL/USER,
	pass: PASSWORD
	},*/
	tls: { rejectUnauthorized: false }
	},
	mailFrom = "sys@mail.com",
	mailAdmin = "manager@mail.com",
	mailSubject = "Reservation",
	mailTxt = "Booking request received.";

	// (C) NODE MAILER & EXPRESS SERVER
	const app = express(),
	forms = multer();
	app.use("/assets", express.static(path.join(__dirname, "assets")));
	app.use(forms.array());
	app.use(bodyParser.json());
	app.use(bodyParser.urlencoded({ extended: true }));
	const mailtransport = nodemailer.createTransport(mailSet);

	// (D) EXPRESS HANDLERS
	// (D1) HOME PAGE - BOOKING FORM
	app.get("/", (req, res) => res.sendFile(path.join(__dirname, "1-booking.html")));

	// (D2) SEND BOOKING REQUEST VIA EMAIL
	app.post("/book", (req, res) => {
	// (D2-1) MAIL MESSAGE
	let msg = mailTxt + "<br>";
	for (const [k, v] of Object.entries(req.body)) { msg += `${k} : ${v}<br>`; }

	// (D2-2) SEND
	mailtransport.sendMail({
	from: mailFrom,
	to: mailAdmin,
	subject: mailSubject,
	html: `<p>${msg}</p>`
	}, (error, info) => {
	if (error) {
	console.log(error);
	res.sendStatus(500);
	} else {
	console.log(req.body);
	res.sendStatus(200);
	}
	});
	});

	// (D3) THANK YOU
	app.get("/thankyou", (req, res) => res.sendFile(path.join(__dirname, "2-thank-you.html")));

	// (E) START!
	app.listen(portHTTP);
	md assets
	move x-dummy.css assets
	move 1-booking.js assets
	call npm i express nodemailer body-parser multer
	node 3-server.js
	mkdir -m 777 assets
	mv ./x-dummy.css ./assets
	mv ./1-booking.js ./assets
	source "npm i express nodemailer body-parser multer"
	node ./3-server.js
	* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}
	#bookForm {
	background: #f7f7f7;
	padding: 20px;
	max-width: 500px;
	}
	#bookForm * {
	box-sizing: border-box;
	}
	#bookForm input, #bookForm label {
	display: block;
	width: 100%;
	}
	#bookForm input {
	padding: 10px;
	}
	#bookForm label {
	padding: 10px 0;
	}
	#bookForm input[type="submit"] {
	margin-top: 20px;
	border: 0;
	color: #fff;
	background: #cb1111;
	cursor: pointer;
	}
	#bookForm input[type="submit"]:disabled { background: #424242; }