[PATCH v1 09/13] Create initial API integration

[Ammar Faizi <ammarfaizi2@gnuweeb.org>]

This connects the HTML form with the MySQL database via AJAX.

Co-authored-by: Muhammad Fitrah Pandjalu <pandjalu9j@gmail.com>
Signed-off-by: Muhammad Fitrah Pandjalu <pandjalu9j@gmail.com>
Co-authored-by: Taufiq Pohan <m.taufiq30s@hotmail.com>
Signed-off-by: Taufiq Pohan <m.taufiq30s@hotmail.com>
Signed-off-by: Ammar Faizi <ammarfaizi2@gnuweeb.org>
---
 public/api.php   | 100 ++++++++++++++++++++++++++++++++++++++++++++++-
 public/index.php |  51 ++++++++++++++++++------
 2 files changed, 136 insertions(+), 15 deletions(-)

diff --git a/public/api.php b/public/api.php
index 1a812a7..97d8e4d 100644
--- a/public/api.php
+++ b/public/api.php
@@ -2,5 +2,101 @@
 
 require __DIR__."/../helpers.php";
 
-$pdo = pdo();
-var_dump($pdo);
+date_default_timezone_set("UTC");
+
+function err_msg(int $code, string $msg): array
+{
+	return [
+		"code"  => $code,
+		"error" => $msg
+	];
+}
+
+if (!isset($_GET["action"]) || !is_string($_GET["action"])) {
+	$code = 400;
+	$msg = err_msg($code, "Missing \"action\" string parameter");
+	goto out;
+}
+
+function submit_attendance(): array
+{
+	if ($_SERVER["REQUEST_METHOD"] !== "POST")
+		return [405, err_msg(405, "Method not allowed!")];
+
+	$j = json_decode(file_get_contents("php://input"), true);
+	if (!is_array($j))
+		return [400, err_msg(400, "Invalid input request")];
+
+	if (!isset($j["full_name"]) || !is_string($j["full_name"]))
+		return [400, err_msg(400, "Missing \"full_name\" string argument!")];
+
+	if (!isset($j["city"]) || !is_integer($j["city"]))
+		return [400, err_msg(400, "Missing \"city\" integer argument!")];
+
+	if (!isset($j["phone_number"]) || !is_string($j["phone_number"]))
+		return [400, err_msg(400, "Missing \"phone_number\" string argument!")];
+
+	if (!isset($j["email"]) || !is_string($j["email"]))
+		return [400, err_msg(400, "Missing \"email\" string argument!")];
+
+	if (!isset($j["facebook_id"]))
+		return [400, err_msg(400, "Missing \"facebook_id\" argument!")];
+
+	if (!isset($j["twitter_username"]))
+		return [400, err_msg(400, "Missing \"twitter_username\" argument!")];
+
+	if (!isset($j["discord_username"]))
+		return [400, err_msg(400, "Missing \"discord_username\" argument!")];
+
+	if (!isset($j["github_username"]))
+		return [400, err_msg(400, "Missing \"github_username\" argument!")];
+
+	try {
+		$pdo = pdo();
+		$st = $pdo->prepare(<<<SQL
+			INSERT INTO `attendances`
+			(
+				`city_id`,
+				`full_name`,
+				`phone_number`,
+				`email`,
+				`facebook_id`,
+				`twitter_username`,
+				`discord_username`,
+				`github_username`,
+				`created_at`
+			) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?);
+		SQL);
+		$st->execute([
+			$j["city"],
+			$j["full_name"],
+			$j["phone_number"],
+			$j["email"],
+			$j["facebook_id"],
+			$j["twitter_username"],
+			$j["discord_username"],
+			$j["github_username"],
+			date("Y-m-d H:i:s")
+		]);
+		return [200, err_msg(200, "Success!")];
+	} catch (PDOException $e) {
+		return [500, err_msg(500, "Database error: ".$e->__toString())];
+	}
+}
+
+switch ($_GET["action"]) {
+case "submit_attendance":
+	[$code, $msg] = submit_attendance();
+	break;
+
+default:
+	$code = 400;
+	$msg = err_msg($code, "Invalid action {$_GET["action"]}");
+	break;
+}
+
+
+out:
+http_response_code($code);
+header("Content-Type: application/json");
+echo json_encode($msg, JSON_PRETTY_PRINT);
diff --git a/public/index.php b/public/index.php
index 8587c95..411f6df 100644
--- a/public/index.php
+++ b/public/index.php
@@ -9,41 +9,41 @@
 	<div class="container p-5">
 		<h1 class="text-center">VNL Member Attendance Form</h1>
 		<div>
-			<form>
+			<form method="POST" action="javascript:void(0);" id="attendance_form">
 				<div class="mb-3">
 					<label for="full_name" class="form-label">Full Name <span class="text-danger">*</span></label>
-					<input type="text" class="form-control" id="full_name"/>
+					<input type="text" name="full_name" class="form-control" id="full_name"/>
 				</div>
 				<div class="mb-3">
 					<label for="city" class="form-label">City  <span class="text-danger">*</span></label>
-					<select id="city" class="form-control"></select>
+					<select id="city" name="city" class="form-control"></select>
 				</div>
 				<div class="mb-3">
 					<label for="phone_number" class="form-label">Phone Number  <span class="text-danger">*</span></label>
-					<input type="text" class="form-control" id="phone_number"/>
+					<input type="text" name="phone_number" class="form-control" id="phone_number"/>
 				</div>
 				<div class="mb-3">
 					<label for="email" class="form-label">Email address  <span class="text-danger">*</span></label>
-					<input type="email" class="form-control" id="email"/>
+					<input type="email" name="email" class="form-control" id="email"/>
 				</div>
 				<div class="border container p-3 border-3 border-dark rounded-3">
 					<h4>Social Media Accounts</h4>
 					<p class="text-danger">Must be filled at least one!</p>
 					<div class="mb-3">
-						<label for="email" class="form-label">Facebook ID / Username</label>
-						<input type="email" class="form-control" id="facebook_link"/>
+						<label for="facebook_id" class="form-label">Facebook ID / Username</label>
+						<input type="text" name="facebook_id" class="form-control" id="facebook_id"/>
 					</div>
 					<div class="mb-3">
-						<label for="email" class="form-label">Twitter Username</label>
-						<input type="email" class="form-control" id="twitter_username" placeholder="@username"/>
+						<label for="twitter_username" class="form-label">Twitter Username</label>
+						<input type="text" name="twitter_username" class="form-control" id="twitter_username" placeholder="@username"/>
 					</div>
 					<div class="mb-3">
-						<label for="email" class="form-label">Discord Username</label>
-						<input type="email" class="form-control" id="discord_username" placeholder="username#1234"/>
+						<label for="discord_username" class="form-label">Discord Username</label>
+						<input type="text" name="discord_username" class="form-control" id="discord_username" placeholder="username#1234"/>
 					</div>
 					<div class="mb-3">
-						<label for="email" class="form-label">GitHub Username</label>
-						<input type="email" class="form-control" id="github_username" placeholder="@username"/>
+						<label for="github_username" class="form-label">GitHub Username</label>
+						<input type="text" name="github_username" class="form-control" id="github_username" placeholder="@username"/>
 					</div>
 				</div>
 				<button type="submit" class="btn btn-primary mt-3">Submit</button>
@@ -66,6 +66,31 @@
 			dataType: "json",
 			success: load_select2_city
 		});
+
+		let form = $("#attendance_form");
+		form.submit(function () {
+			let data = form.serializeArray();
+			let json = {};
+			let i;
+
+			for (i in data) {
+				let key = data[i].name;
+				let val = data[i].value;
+
+				if (key === "city")
+					val = parseInt(val);
+
+				json[key] = val;
+			}
+
+			$.post({
+				url: "api.php?action=submit_attendance",
+				data: JSON.stringify(json),
+				success: function () {
+					alert("success!");
+				}
+			});
+		});
 	</script>
 </body>
 </html>
-- 
Ammar Faizi