Added in contact section #12
@ -49,10 +49,10 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
||||
$json = json_encode($result);
|
||||
|
||||
$response->getBody()->write($json);
|
||||
//if it is an error give a 403 code since it can't find the data
|
||||
if(array_key_exists("errorMessage", $result[0]))
|
||||
//if it is an error give a 404 code since it can't find the data
|
||||
if(array_key_exists("errorMessage", $result))
|
||||
{
|
||||
$response = $response->withStatus(403);
|
||||
$response = $response->withStatus(404);
|
||||
}
|
||||
|
||||
//use content type json to indicate json data on frontend.
|
||||
@ -69,13 +69,185 @@ $app->get('/projectData', function (Request $request, Response $response)
|
||||
|
||||
$response->getBody()->write($json);
|
||||
|
||||
if(array_key_exists("errorMessage", $result[0]))
|
||||
if(array_key_exists("errorMessage", $result))
|
||||
{
|
||||
$response = $response->withStatus(403);
|
||||
$response = $response->withStatus(404);
|
||||
}
|
||||
|
||||
//use content type json to indicate json data on frontend.
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
});
|
||||
|
||||
$app->post('/contact', function (Request $request, Response $response)
|
||||
{
|
||||
$data = $request->getParsedBody();
|
||||
if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
|
||||
{
|
||||
$response->getBody()->write(json_encode(array("errorMessage" => "Please fill out all the fields")));
|
||||
$response = $response->withStatus(400);
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
}
|
||||
|
||||
if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL))
|
||||
{
|
||||
$response->getBody()->write(json_encode(array("errorMessage" => "Email is not the correct format")));
|
||||
$response = $response->withStatus(400);
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
}
|
||||
|
||||
// email form filler/conatcter
|
||||
$headers1 = "From: noreply@rohitpai.tech\r\n";
|
||||
$headers1 .= "Reply-To: rohit@rohitpai.tech\r\n";
|
||||
$headers1 .= "MIME-Version: 1.0\r\n";
|
||||
$headers1 .= "Content-Type: text/html; charset=UTF-8\r\n";
|
||||
|
||||
$message1 = "
|
||||
<html>
|
||||
<head>
|
||||
<title>{$data['subject']}</title>
|
||||
<style>
|
||||
@import url(\"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap\");
|
||||
body {
|
||||
font-family: Noto Sans KR, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: var(--generalFS);
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color: hsla(79, 62%, 59%, 1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: hsla(0, 0%, 78%, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Thank you for filling out the form on my website, I will try to respond to your query as soon as I can.</p>
|
||||
<br>
|
||||
<p>Below is what you filled in for your record</p>
|
||||
<table>
|
||||
<thead>
|
||||
<th>Firstname</th>
|
||||
<th>Lastname</th>
|
||||
<th>Email</th>
|
||||
<th>Subject</th>
|
||||
<th>message</th>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>{$data['fName']}</td>
|
||||
<td>{$data['lName']}</td>
|
||||
<td><a href=\"mailto:{$data['email']}\">{$data['email']}</a></td>
|
||||
<td>{$data['subject']}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<hr>
|
||||
<p>Regards, <br> Rohit Pai <br> <a href=\"mailto:rohit@rohitpai.tech\">rohit@rohitpai.tech</a>
|
||||
</body>
|
||||
</html>
|
||||
";
|
||||
|
||||
mail($data["email"], $data["subject"], $message1, $headers1);
|
||||
|
||||
// email to me
|
||||
$headers2 = "From: noreply@rohitpai.tech\r\n";
|
||||
$headers2 .= "Reply-To: {$data['email']}\r\n";
|
||||
$headers2 .= "MIME-Version: 1.0\r\n";
|
||||
$headers2 .= "Content-Type: text/html; charset=UTF-8\r\n";
|
||||
|
||||
$message2 = "
|
||||
<html>
|
||||
<head>
|
||||
<title>{$data['subject']}</title>
|
||||
<style>
|
||||
@import url(\"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap\");
|
||||
body {
|
||||
font-family: Noto Sans KR, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: var(--generalFS);
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color: hsla(79, 62%, 59%, 1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: hsla(0, 0%, 78%, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>{data['fName']} {data['lName']} filled in the form on the website, here is what they sent.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<th>Firstname</th>
|
||||
<th>Lastname</th>
|
||||
<th>Email</th>
|
||||
<th>Subject</th>
|
||||
<th>message</th>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>{$data['fName']}</td>
|
||||
<td>{$data['lName']}</td>
|
||||
<td><a href=\"mailto:{$data['email']}\">{$data['email']}</a></td>
|
||||
<td>{$data['subject']}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
";
|
||||
|
||||
mail("rohit@rohitpai.tech", "{$data['fName']} {$data['lName']} filled in the form", $message2, $headers2);
|
||||
return $response->withStatus(201);
|
||||
});
|
||||
|
||||
$app->run();
|
||||
|
||||
@ -25,7 +25,7 @@ class timelineData
|
||||
}
|
||||
else
|
||||
{
|
||||
return array(array("errorMessage" => "Error, edu data not found"));
|
||||
return array("errorMessage" => "Error, edu data not found");
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ class timelineData
|
||||
}
|
||||
else
|
||||
{
|
||||
return array(array("errorMessage" => "Error, work data not found"));
|
||||
return array("errorMessage" => "Error, work data not found");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -213,3 +213,83 @@ document.addEventListener('DOMContentLoaded', () =>
|
||||
// get projectData
|
||||
getProjectData();
|
||||
});
|
||||
|
||||
// contact form
|
||||
document.querySelector("#contactForm").addEventListener("submit", e =>
|
||||
{
|
||||
e.preventDefault();
|
||||
let contactData = new FormData();
|
||||
contactData.append("fName", document.querySelector("#fName").value);
|
||||
contactData.append("lName", document.querySelector("#lName").value);
|
||||
contactData.append("email", document.querySelector("#email").value);
|
||||
contactData.append("subject", document.querySelector("#subject").value);
|
||||
contactData.append("message", document.querySelector("#message").value);
|
||||
|
||||
if (document.querySelector("#fName").value.length == 0)
|
||||
{
|
||||
document.querySelector("#fName").classList.add("invalid");
|
||||
// please fill out all the fields
|
||||
return;
|
||||
}
|
||||
else
|
||||
{
|
||||
document.querySelector("#fName").classList.remove("invalid");
|
||||
}
|
||||
|
||||
if (document.querySelector("#lName").value.length == 0)
|
||||
{
|
||||
document.querySelector("#lName").classList.add("invalid");
|
||||
// please fill out all the fields
|
||||
return;
|
||||
}
|
||||
else
|
||||
{
|
||||
document.querySelector("#lName").classList.remove("invalid");
|
||||
}
|
||||
|
||||
if (document.querySelector("#email").value.length == 0)
|
||||
{
|
||||
document.querySelector("#email").classList.add("invalid");
|
||||
// please fill out all the fields
|
||||
return;
|
||||
}
|
||||
else
|
||||
{
|
||||
document.querySelector("#email").classList.remove("invalid");
|
||||
}
|
||||
|
||||
if (document.querySelector("#subject").value.length == 0)
|
||||
{
|
||||
document.querySelector("#subject").classList.add("invalid");
|
||||
// please fill out all the fields
|
||||
return;
|
||||
}
|
||||
else
|
||||
{
|
||||
document.querySelector("#subject").classList.remove("invalid");
|
||||
}
|
||||
|
||||
if (document.querySelector("#message").value.length == 0)
|
||||
{
|
||||
document.querySelector("#message").classList.add("invalid");
|
||||
// please fill out all the fields
|
||||
return;
|
||||
}
|
||||
else
|
||||
{
|
||||
document.querySelector("#message").classList.remove("invalid");
|
||||
}
|
||||
|
||||
fetch("/api/contact",
|
||||
{
|
||||
method: "POST",
|
||||
body: contactData
|
||||
}).then(res =>
|
||||
{
|
||||
if(res.ok)
|
||||
{
|
||||
// show message box
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user