added in backend for contact and ajax request
This commit is contained in:
parent
540d9872c7
commit
4e7eaa4990
@ -49,10 +49,10 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
|||||||
$json = json_encode($result);
|
$json = json_encode($result);
|
||||||
|
|
||||||
$response->getBody()->write($json);
|
$response->getBody()->write($json);
|
||||||
//if it is an error give a 403 code since it can't find the data
|
//if it is an error give a 404 code since it can't find the data
|
||||||
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.
|
//use content type json to indicate json data on frontend.
|
||||||
@ -63,19 +63,191 @@ $app->get('/projectData', function (Request $request, Response $response)
|
|||||||
{
|
{
|
||||||
global $projectData;
|
global $projectData;
|
||||||
|
|
||||||
$result= $projectData->getProjectData();
|
$result = $projectData->getProjectData();
|
||||||
|
|
||||||
$json = json_encode($result);
|
$json = json_encode($result);
|
||||||
|
|
||||||
$response->getBody()->write($json);
|
$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.
|
//use content type json to indicate json data on frontend.
|
||||||
return $response->withHeader("Content-Type", "application/json");
|
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();
|
$app->run();
|
||||||
|
|||||||
@ -25,7 +25,7 @@ class timelineData
|
|||||||
}
|
}
|
||||||
else
|
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
|
else
|
||||||
{
|
{
|
||||||
return array(array("errorMessage" => "Error, work data not found"));
|
return array("errorMessage" => "Error, work data not found");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -212,4 +212,84 @@ document.addEventListener('DOMContentLoaded', () =>
|
|||||||
|
|
||||||
// get projectData
|
// get projectData
|
||||||
getProjectData();
|
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