code-boxx/0-PY-BOOKING.MD

## 0-PY-BOOKING.MD

      
    Raw
  

              0-PY-BOOKING.MD
            
          
    SIMPLE PYTHON FLASK ONLINE BOOKING

https://code-boxx.com/python-online-booking/
NOTES


Run unpack.bat (Windows) unpack.sh (Linux/Mac). This will automatically:

Create a static folder, move S1_booking.css and S1_booking.js inside.
Create a templates folder, move S1_booking.html and S2_thank.html inside.
Create a virtual environment - virtualenv venv
Activate the virtual environment - venv\scripts\activate (Windows) venv/bin/activate (Mac/Linux)
Install Flask pip install flask
Start the server python S3_server.py


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.

  
## S1_booking.css
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
#bookForm {
  border: 1px solid #e9e9e9;
  background: #f5f5f5;
  padding: 30px;
  max-width: 500px;
  margin: 0 auto;
}
#bookForm input, #bookForm label {
  display: block;
  width: 100%;
}
#bookForm input {
  padding: 10px;
  border: 1px solid #dfdfdf;
}
#bookForm label {
  padding: 10px 0;
  font-size: 14px;
  color: #686868;
}
#bookForm label:first-child { padding-top: 0; }
#bookForm input[type="submit"] {
  margin-top: 20px;
  border: 0;
  color: #fff;
  background: #cb1111;
  cursor: pointer;
}
#bookForm input[type="submit"]:disabled { background: #424242; }

## S1_booking.html
<!DOCTYPE html>
<html>
  <head>
    <title>Python Flask Booking</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="static/S1_booking.css">
    <script async src="static/S1_booking.js"></script>
  </head>
  <body>
    <!-- (A) BOOKING FORM -->
    <form id="bookForm" onsubmit="return book();">
      <label>Name</label>
      <input type="text" name="Name" required>

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

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

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

## S1_booking.js
// (A) SEND BOOKING REQUEST
function book () {
  // (A1) PREVENT MULTIPLE SUBMIT
  document.getElementById("bookGo").disabled = true;

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

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

// (B) ON PAGE LOAD
window.onload = () => {
  // (B1) MIN SELECTABLE DATE IS TODAY
  let datepick = document.getElementsByName("Date")[0];
  datepick.min = new Date().toISOString().split("T")[0];

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

## S2_thank.html
<!DOCTYPE html>
<html>
  <head>
    <title>JS Booking</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Thank You</h1>
    <p>We have received your reservation request</p>
  </body>
</html>

## S3_server.py
# (A) INIT
# (A1) LOAD REQUIRED PACKAGES
from flask import Flask, render_template, request, make_response
from werkzeug.datastructures import ImmutableMultiDict
import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

# (A2) FLASK INIT
app = Flask(__name__)
# app.debug = True

# (B) SETTINGS
HOST_NAME = "localhost"
HOST_PORT = 80
MAIL_FROM = "sys@site.com"
MAIL_TO = "admin@site.com"
MAIL_SUBJECT = "Booking Request"

# (C) ROUTES
# (C1) BOOKING PAGE
@app.route("/")
def index():
  return render_template("S1_booking.html")

# (C2) THANK YOU PAGE
@app.route("/thank")
def thank():
  return render_template("S2_thank.html")

# (C3) BOOKING ENDPOINT
@app.route("/book", methods=["POST"])
def foo():
  # (C3-1) EMAIL HEADERS
  mail = MIMEMultipart("alternative")
  mail["Subject"] = MAIL_SUBJECT
  mail["From"] = MAIL_FROM
  mail["To"] = MAIL_TO

  # (C3-2) EMAIL BODY (BOOKING DATA)
  data = dict(request.form)
  msg = "<html><head></head><body>"
  for key, value in data.items():
    msg += key + " : " + value + "<br>"
  msg += "</body></html>"
  mail.attach(MIMEText(msg, "html"))

  # (C3-3) SEND MAIL
  mailer = smtplib.SMTP("localhost")
  mailer.sendmail(MAIL_FROM, MAIL_TO, mail.as_string())
  mailer.quit()

  # (C3-4) HTTP RESPONSE
  res = make_response("OK", 200)
  return res

# (D) START!
if __name__ == "__main__":
  app.run(HOST_NAME, HOST_PORT)

## unpack.bat
md templates
md static
move S1_booking.html templates
move S2_thank.html templates
move S1_booking.css static
move S1_booking.js static
virtualenv venv
call venv\Scripts\activate
pip install flask
python S3_server.py

## unpack.sh
mkdir -m 777 templates
mkdir -m 777 static
mv ./S1_booking.html ./templates
mv ./S2_thank.html ./templates
mv ./S1_booking.css ./static
mv ./S1_booking.js ./static
virtualenv venv
source "venv/bin/activate"
pip install flask
python S3_server.py
	* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}
	#bookForm {
	border: 1px solid #e9e9e9;
	background: #f5f5f5;
	padding: 30px;
	max-width: 500px;
	margin: 0 auto;
	}
	#bookForm input, #bookForm label {
	display: block;
	width: 100%;
	}
	#bookForm input {
	padding: 10px;
	border: 1px solid #dfdfdf;
	}
	#bookForm label {
	padding: 10px 0;
	font-size: 14px;
	color: #686868;
	}
	#bookForm label:first-child { padding-top: 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>Python Flask Booking</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="static/S1_booking.css">
	<script async src="static/S1_booking.js"></script>
	</head>
	<body>
	<!-- (A) BOOKING FORM -->
	<form id="bookForm" onsubmit="return book();">
	<label>Name</label>
	<input type="text" name="Name" required>

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

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

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

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

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

	// (B) ON PAGE LOAD
	window.onload = () => {
	// (B1) MIN SELECTABLE DATE IS TODAY
	let datepick = document.getElementsByName("Date")[0];
	datepick.min = new Date().toISOString().split("T")[0];

	// (B2) ENABLE FORM
	document.getElementById("bookGo").disabled = false;
	};
	# (A) INIT
	# (A1) LOAD REQUIRED PACKAGES
	from flask import Flask, render_template, request, make_response
	from werkzeug.datastructures import ImmutableMultiDict
	import smtplib
	from email.mime.multipart import MIMEMultipart
	from email.mime.text import MIMEText

	# (A2) FLASK INIT
	app = Flask(__name__)
	# app.debug = True

	# (B) SETTINGS
	HOST_NAME = "localhost"
	HOST_PORT = 80
	MAIL_FROM = "sys@site.com"
	MAIL_TO = "admin@site.com"
	MAIL_SUBJECT = "Booking Request"

	# (C) ROUTES
	# (C1) BOOKING PAGE
	@app.route("/")
	def index():
	return render_template("S1_booking.html")

	# (C2) THANK YOU PAGE
	@app.route("/thank")
	def thank():
	return render_template("S2_thank.html")

	# (C3) BOOKING ENDPOINT
	@app.route("/book", methods=["POST"])
	def foo():
	# (C3-1) EMAIL HEADERS
	mail = MIMEMultipart("alternative")
	mail["Subject"] = MAIL_SUBJECT
	mail["From"] = MAIL_FROM
	mail["To"] = MAIL_TO

	# (C3-2) EMAIL BODY (BOOKING DATA)
	data = dict(request.form)
	msg = "<html><head></head><body>"
	for key, value in data.items():
	msg += key + " : " + value + "<br>"
	msg += "</body></html>"
	mail.attach(MIMEText(msg, "html"))

	# (C3-3) SEND MAIL
	mailer = smtplib.SMTP("localhost")
	mailer.sendmail(MAIL_FROM, MAIL_TO, mail.as_string())
	mailer.quit()

	# (C3-4) HTTP RESPONSE
	res = make_response("OK", 200)
	return res

	# (D) START!
	if __name__ == "__main__":
	app.run(HOST_NAME, HOST_PORT)
	md templates
	md static
	move S1_booking.html templates
	move S2_thank.html templates
	move S1_booking.css static
	move S1_booking.js static
	virtualenv venv
	call venv\Scripts\activate
	pip install flask
	python S3_server.py
	mkdir -m 777 templates
	mkdir -m 777 static
	mv ./S1_booking.html ./templates
	mv ./S2_thank.html ./templates
	mv ./S1_booking.css ./static
	mv ./S1_booking.js ./static
	virtualenv venv
	source "venv/bin/activate"
	pip install flask
	python S3_server.py