send huge html mail by phpmailer - php

//send email
$to = $_POST['email'];
$subject = "Registration Confirmation";
$url="localhost/activate.php?x=$id&y=$activasion";
define('URL',"$url");
$body="<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* FONTS */
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px){
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
We are thrilled to have you here! Get ready to dive into your new account.
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#FFA73B" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
<a href="localhost" target="_blank">
<img alt="Logo" src="logo.png">
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#FFA73B" align="center" style="padding: 0px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
<h1 style="font-size: 48px; font-weight: 400; margin: 0;">Welcome!</h1>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">We are excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#FFA73B">Confirm Account</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">"If that does not work, copy and paste the following link in your browser:"</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">URL</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">If you have any questions, just reply to this email—we are always happy to help out.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">Cheers,<br>The Edutheon Team</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td bgcolor="#FFECD1" align="center" style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<h2 style="font-size: 20px; font-weight: 400; color: #111111; margin: 0;">Need more help?</h2>
<p style="margin: 0;">We’re here, ready to talk</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>"";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
$mail = new Mail();
$mail->isHTML(True)
$mail->setFrom(SITEEMAIL);
$mail->addAddress($to);
$mail->subject($subject);
$mail->body($body);
$mail->send();
how to do I send this email with phpmailer whenever i try to send it always return an error and i cannot use get_file_contents() because it contains variables dependent on variables please answer Thanks I think this problem arises due to "/' used in the html Using this code on xampp server and the it working on text email and not on the html plz help i need to complete my project.

You're using double quotation marks the define the $body variable, then using them throughout the value you set it to, causing the string reading to break.
I think reading this answer would help you a lot.
Literally replacing all " with \" inside the string should work (though if you have any legitimate uses of variables inside which I missed, I did not see them). Here would be the corrected code:
$body = <!DOCTYPE html>
html>
<head>
<title></title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
<style type=\"text/css\">
/* FONTS */
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px){
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*=\"margin: 16px 0;\"] { margin: 0 !important; }
</style>
</head>
<body style=\"background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;\">
<div style=\"display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;\">
We are thrilled to have you here! Get ready to dive into your new account.
</div>
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">
<tr>
<td bgcolor=\"#FFA73B\" align=\"center\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td align=\"center\" valign=\"top\" style=\"padding: 40px 10px 40px 10px;\">
<a href=\"localhost\" target=\"_blank\">
<img alt=\"Logo\" src=\"logo.png\">
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor=\"#FFA73B\" align=\"center\" style=\"padding: 0px 10px 0px 10px;\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td bgcolor=\"#ffffff\" align=\"center\" valign=\"top\" style=\"padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;\">
<h1 style=\"font-size: 48px; font-weight: 400; margin: 0;\">Welcome!</h1>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor=\"#f4f4f4\" align=\"center\" style=\"padding: 0px 10px 0px 10px;\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato\", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">We are excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\">
<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td bgcolor=\"#ffffff\" align=\"center\" style=\"padding: 20px 30px 60px 30px;\">
<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td align=\"center\" style=\"border-radius: 3px;\" bgcolor=\"#FFA73B\">Confirm Account</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 0px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">\"If that does not work, copy and paste the following link in your browser:\"</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 20px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">URL</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">If you have any questions, just reply to this email—we are always happy to help out.</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">Cheers,<br>The Edutheon Team</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor=\"#f4f4f4\" align=\"center\" style=\"padding: 30px 10px 0px 10px;\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td bgcolor=\"#FFECD1\" align=\"center\" style=\"padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<h2 style=\"font-size: 20px; font-weight: 400; color: #111111; margin: 0;\">Need more help?</h2>
<p style=\"margin: 0;\">We’re here, ready to talk</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>";

Related

How to build HTML element based on MySQL results

Problem
I am constructing an HTML email to send which includes products in our database.
I have all the moving parts, I believe, to complete the task but just not sure how to piece it together.
The HTML template
$template = file_get_contents("notify.html");
Template Tags
{{TITLE}}
{{PRICE}}
{{LOCATION}}
{{MILES}}
The element I want to loop
NOTE: This first element is inside the template. I can remove it if we need to, though.
$div = <<<EOF
<!-- START LOOP HERE -->
<div style="background-color:transparent;">
<div class="block-grid four-up no-stack" style="Margin: 0 auto; min-width: 320px; max-width: 650px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #FFFFFF;">
<div style="border-collapse: collapse;display: table;width: 100%;background-color:#FFFFFF;">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:650px"><tr class="layout-full-width" style="background-color:#FFFFFF"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="162" style="background-color:#FFFFFF;width:162px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
<div class="col num3" style="max-width: 320px; min-width: 162px; display: table-cell; vertical-align: top; width: 162px;">
<div style="width:100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<!--<![endif]-->
<div align="center" class="img-container center fixedwidth" style="padding-right: 0px;padding-left: 0px;">
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="center"><![endif]--><img align="center" alt="Image" border="0" class="center fixedwidth" src="images/2.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 130px; display: block;" title="Image" width="130"/>
<!--[if mso]></td></tr></table><![endif]-->
</div>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td><td align="center" width="162" style="background-color:#FFFFFF;width:162px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 1px dotted #E8E8E8;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:30px; padding-bottom:35px;"><![endif]-->
<div class="col num3" style="max-width: 320px; min-width: 162px; display: table-cell; vertical-align: top; width: 161px;">
<div style="width:100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:1px dotted #E8E8E8; padding-top:30px; padding-bottom:35px; padding-right: 0px; padding-left: 0px;">
<!--<![endif]-->
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 0px; padding-top: 10px; padding-bottom: 5px; font-family: Tahoma, Verdana, sans-serif"><![endif]-->
<div style="color:#555555;font-family:Lato, Tahoma, Verdana, Segoe, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:5px;padding-left:0px;">
<div style="font-size: 12px; line-height: 1.2; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 16px; line-height: 1.2; text-align: left; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; word-break: break-word; mso-line-height-alt: 19px; margin: 0;"><span style="font-size: 16px; color: #2190e3;"><strong>{{TITLE}}</strong></span></p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 0px; padding-top: 0px; padding-bottom: 10px; font-family: Tahoma, Verdana, sans-serif"><![endif]-->
<div style="color:#555555;font-family:Lato, Tahoma, Verdana, Segoe, sans-serif;line-height:1.2;padding-top:0px;padding-right:10px;padding-bottom:10px;padding-left:0px;">
<div style="font-size: 12px; line-height: 1.2; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 14px; line-height: 1.2; text-align: left; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; word-break: break-word; mso-line-height-alt: 17px; margin: 0;">{{MILES}}</p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td><td align="center" width="162" style="background-color:#FFFFFF;width:162px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 1px dotted #E8E8E8;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:55px; padding-bottom:5px;"><![endif]-->
<div class="col num3" style="max-width: 320px; min-width: 162px; display: table-cell; vertical-align: top; width: 161px;">
<div style="width:100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:1px dotted #E8E8E8; padding-top:55px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<!--<![endif]-->
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 10px; font-family: Tahoma, Verdana, sans-serif"><![endif]-->
<div style="color:#555555;font-family:Lato, Tahoma, Verdana, Segoe, sans-serif;line-height:1.2;padding-top:0px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
<div style="font-size: 12px; line-height: 1.2; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 20px; line-height: 1.2; text-align: center; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; word-break: break-word; mso-line-height-alt: 24px; margin: 0;"><span style="font-size: 20px;"><strong>{{LOCATION}}</strong></span></p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" class="divider" role="presentation" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" valign="top" width="100%">
<tbody>
<tr style="vertical-align: top;" valign="top">
<td class="divider_inner" style="word-break: break-word; vertical-align: top; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;" valign="top"><table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content" height="30" role="presentation" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-top: 0px solid transparent; height: 30px; width: 100%;" valign="top" width="100%">
<tbody>
<tr style="vertical-align: top;" valign="top">
<td height="30" style="word-break: break-word; vertical-align: top; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" valign="top"><span></span></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td><td align="center" width="162" style="background-color:#FFFFFF;width:162px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:55px; padding-bottom:5px;"><![endif]-->
<div class="col num3" style="max-width: 320px; min-width: 162px; display: table-cell; vertical-align: top; width: 162px;">
<div style="width:100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:55px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<!--<![endif]-->
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 15px; padding-left: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Tahoma, Verdana, sans-serif"><![endif]-->
<div style="color:#555555;font-family:Lato, Tahoma, Verdana, Segoe, sans-serif;line-height:1.2;padding-top:0px;padding-right:15px;padding-bottom:0px;padding-left:0px;">
<div style="line-height: 1.2; font-size: 12px; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; color: #555555; mso-line-height-alt: 14px;">
<p style="line-height: 1.2; text-align: center; font-size: 20px; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; word-break: break-word; mso-line-height-alt: 24px; margin: 0;"><span style="font-size: 20px;"><span style="font-size: 20px;"><strong>{{PRICE}}</strong></span></span></p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
EOF;
A Simple template system
But I believe this will work on only one row (right?)
foreach($variables as $key => $value)
{
$template = str_replace('{{ '.$key.' }}', $value, $template);
}
MySQL Results
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * from";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
// $row['title']
// $row['price']
// $row['location']
// $row['miles']
}
} else {
echo "0 results";
}
So...
Given all that, how would I construct the HTML to loop over the results and include that DIV as many times as there are results?
Thank you for looking.
Ps. I did research this topic on SO , and found similar questions but none quite matched my criteria. Thanks again!
I believe something like that would work:
<?php
$template = file_get_contents("notify.html");
$html = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn)
{
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * from PRODUCT";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0)
{
// Add template into HTML with replaced variable for each row
while($row = mysqli_fetch_assoc($result))
{
$tmp_template = $template;
foreach($row as $key => $value)
{
$tmp_template = str_replace('{{ '.$key.' }}', $value, $template);
}
$html .= $tmp_template;
}
echo $html;
}
else
{
echo "0 results";
}
The only thing I added is the tmp_template variable. This variable is a copy of the original template where you will replace the variable from your query into it. After replacing all the variable with their value, you will at this tmp_template variable into a html variable. This html variable will be your final result that you will send by email. You could add a header before the loop and a footer after the loop into your html variable for the email.
PLEASE NOTE: I did not test this code, but it should be very close to what you need.

DomPDF - php splitting every table row in new page

I'm currently working on a project in which I've to create an invoice using domPDF. I found a template on github for nice invoice.
Now whenever I create a PDF it breaks every table row in new page and create a 5-6 pages PDF.
I've tried tweaking css of this template but no luck.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="https://www.sparksuite.com/images/logo.png" style="width:100%; max-width:300px;">
</td>
<td>
Invoice #: 123<br>
Created: January 1, 2015<br>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br>
12345 Sunny Road<br>
Sunnyville, CA 12345
</td>
<td>
Acme Corp.<br>
John Doe<br>
john#example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
Check #
</td>
</tr>
<tr class="details">
<td>
Check
</td>
<td>
1000
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price
</td>
</tr>
<tr class="item">
<td>
Website design
</td>
<td>
$300.00
</td>
</tr>
<tr class="item">
<td>
Hosting (3 months)
</td>
<td>
$75.00
</td>
</tr>
<tr class="item last">
<td>
Domain name (1 year)
</td>
<td>
$10.00
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: $385.00
</td>
</tr>
</table>
</div>
</body>
</html>
I want PDF output to be like this.

Loops, what and how to use? (for, while, and foreach)

What's up guys!
I have a problem and I can not think of a solution.
I need to make a report using DOMPDF.
In this report, i need to print some employee information. In each page it is necessary to have header for the signature of the person in charge.
I have a group of employees. They are divided by departments.
I need a "break the page" loop when I change the employee's department or when I print 15 employees. After that, the loop should print the rest of the employees and execute the same rules if you change the employee's department again or have already been printed 15 employees.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Relatório Geral</title>
<style>
body {
margin-top: -20px;
margin-left: -20px;
margin-right: -5px;
padding:0
}
.borda3 {
border:1px solid #999;
padding: 5px;
}
#borda2 td {
border: 1px solid #999;
border-collapse: collapse;
width: auto;
}
.centro {
text-align: center;
}
.tabela {
width: 100%;
}
span {
font-size: 100px;
}
td {
font-size: 11px;
}
html {
font-family: sans-serif;
}
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
text-align: center;
font-size: 9px;
}
#customers td {
text-align: left;
font-size: 10px;
}
#customers a {
font-size: 10px;
}
.nome{
width: 180px;
}
.matricula{
width: 15px;
}
.numeros{
width: 15px;
}
.logo{
padding-left: 50px;
}
.logo a strong{
font-size: 15px;
text-align: center;
}
.logo a{
font-size: 12px;
}
.assinatura{
font-size: 9px;
margin-left: 60px;
}
</style>
</head>
{{--beginning of the loop--}}
<body>
<table class="tabela borda3">
<tr>
<td width="40%" class="centro">
<table class="logo">
<tr>
<td>
<img style="margin-left:20px; margin-top: -20px;width:220px; height: 65px;" src="img/logo_sarh.jpg">
</td>
</tr>
<tr>
<td>
<label for=""><a><strong> </strong></a></label><br>
</td>
</tr>
<tr>
<td><a>Referência:</a></td>
</tr>
<tr>
<td><a>Período:</a></td>
</tr>
</table>
</td>
<td width="40%" class="centro">
<table class="assinatura">
<tr>
<td style="height: 30px; text-align: left"><label for="">Em: _____/ _____/___________</label></td>
</tr>
<tr>
<td style="padding-bottom: -20px; height: 50px; text-align: center">
<label for="">____________________________________________</label><br>
<label style="font-size: 10px" for=""> SUPERVISOR</label>
</td>
</tr>
<tr>
<td style="height: 30px; text-align: left"><label for="">VISTO</label></td>
</tr>
<tr>
<td style="padding-bottom: -10px; height: 50px; text-align: center">
<label for="">____________________________________________</label><br>
<label style="font-size: 10px" for=""> SECRETÁRIO(A)</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table id="customers">
<tr>
<th class="nome">Nome</th>
<th class="matricula">Matrícula</th>
<th class="numeros">Dias</th>
<th class="numeros">Faltas</th>
<th class="numeros">Vac</th>
<th class="numeros">LSV</th>
<th class="numeros">L M</th>
<th class="numeros">Aci. Trab</th>
<th class="numeros">Adi. Not</th>
<th class="numeros">H.E Normal D</th>
<th class="numeros">H.E Normal N</th>
<th class="numeros">H.E Dom/Fer. D</th>
<th class="numeros">H.E Dom/Fer. N</th>
<th class="numeros">Ins.</th>
</tr>
{{--beginning of the loop--}}
<tr>
<td style="height: 20px;"><a>Augusto Damasceno Pedrozo</a></td>
<td style="height: 20px;"><a>12345678</a></td>
<td style="height: 20px;"><a>30</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20</a></td>
</tr>
<tr>
<td style="height: 20px;" colspan="14">Observação:</td>
</tr>
{{--end of the loop--}}
</table>
</body>
{{--end of the loop--}}
</html>
Could anyone give me some direction to solve this?
I think you want something like this:
#foreach($customers as $customer)
#while ($loop->index <= 15)
<!-- build table row here -->
#endwhile
<!-- page break -->
#endforeach
in laravel there is a loop variable
this variable tracks the current index and some other things
you can check if the current index is smaller or equal to 15, perform page break, grab next, check if department is same as before, repeat
for the department changes you can set a variable which holds the current department and compare it in the loop like:
#if($current_dep !== $cust->department)
<!-- page break -->
#endif
don't forget to check for last record
#while(!$loop->last)
#endwhile
further information on the $loop variable: https://laravel.com/docs/5.7/blade#the-loop-variable

how to $_POST form attributes to another file

This is the thank you page I am trying to have someones name be displayed like "Thank you John, ..."
But i can't seem to have it post the name. my $first_name is in another php file
<?php include("email.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<base target="_blank">
<title>Mid-Night Designs</title>
<style type="text/css">
body *{font-family: 'Open Sans', Arial, sans-serif !important}
div, p, a, li, td { -webkit-text-size-adjust:none; }
*{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
td{word-break: break-word;}
a{word-break: break-word; text-decoration: none; color: inherit;}
body .ReadMsgBody
{width: 100%; background-color: #ffffff;}
body .ExternalClass
{width: 100%; background-color: #ffffff;}
body{width: 100%; height: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
html{ background-color:#ffffff; width: 100%;}
body p {padding: 0!important; margin-top: 0!important; margin-right: 0!important; margin-bottom: 0!important; margin-left: 0!important; }
body img {user-drag: none; -moz-user-select: none; -webkit-user-drag: none;}
body a.rotator img {-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; }
body a.rotator img:hover {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg); }
body .hover:hover {opacity:0.85;filter:alpha(opacity=85);}
body .jump:hover {opacity:0.75; filter:alpha(opacity=75); padding-top: 10px!important;}
body .logo img {width: 150px; height: auto;}
body .icon25 img {width: 25px; height: auto;}
body .icon18 img {width: 18px; height: auto;}
</style>
<style type="text/css">#media only screen and (max-width: 640px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 30px; padding-right: 30px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
<style type="text/css">#media only screen and (max-width: 479px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
</head>
<body style='margin: 0; padding: 0;'>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center">
<table class="full" align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center" class="pad20">
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #929292; font-weight: 400; font-size: 12px; line-height: 20px; text-align: center;">
<br>
</td>
</tr>
<tr>
<td width="100%" height="40" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" align="center" width="100%" class="logo" style="line-height: 1px; text-align: center;"></td>
</tr>
<tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-top-left-radius: 5px; border-top-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #111111; font-weight: 800; font-size: 30px; line-height: 36px; text-align: center; text-transform: uppercase;">
Thank you!
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 14px; text-align: center; line-height: 22px;" class="fullCenter">
<span style="color:#000000;"><span style="font-size:14px;"><strong>Thank you<?php echo $_POST['first_name'];?>
, for using our quote calculator. If you have any further questions feel free to contact us!</strong></span></span>
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td valign="top" width="100%">
<table width="75" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td valign="middle" align="center" width="30" class="fullCenter" style="line-height: 1px;"></td>
</tr>
</tbody></table>
<table width="15" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
<table width="350" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td width="100%" style="color: #111111; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 700; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Lorenzo Preciado
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 600; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px text-transform: uppercase;" class="fullCenter">
<span style="color:#000000;">Web Designer & Developer </span>
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Owner of Mid-Night Designs
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
+81 080-6499-4974 | help#mid-nightdesigns.com
</td>
</tr>
<tr>
<td width="100%" height="5" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" align="center" class="icon18">
<!-- Social Icons -->
<table width="120" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="buttonScale">
<tbody><tr>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td width="100%" valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile">
<tbody><tr>
<td align="center">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align: center;" class="fullCenter">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #d2d2d2; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
© Copyright - Mid-Nightd<span style="color:#FFFFFF;"></span>esigns.com
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
<br>
</td>
</tr>
<tr>
<td width="100%" height="50" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" height="1" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
This is the portion of the form
<label>
First Name
<input NAME="first_name" type="text" required="required" class="SV_validate" placeholder="First Name">
</label>
This is part of my email.php and it works, displaying the name in the email sent but doesn't work in the thank you.
$first_name = $_POST['first_name'];
PHP File that receives POST will be somewthing along the lines of
<?php
session_start();
$_SESSION['Name'] = $_POST['first_name'];
?>
Second File will be
<?php
session_start();
echo $_SESSION['Name'];
?>
Not recommended to do exactly that but that's the basis. You also can't set a session on the same page and call it on the same page.
Please check the simple scenario created for you, change the form action to thank-you.php file.
index.php
<form action="thank-you.php" method="post">
<input type="text" name="firstname">
<input type="text" name="email">
<input type="submit" name="contact" value="Contact">
</form>
thank-you.php
<?php
include_once('email.php');
$firstname = '';
if(isset($_POST['firstname'])) {
$firstname = $_POST['firstname'];
}
?>
<div class="message">Thank you for contacting - <?php echo $firstname;?></div>
email.php
<?php
if(isset($_POST['contact'])) {
$to = 'email#example.com';
$subject = 'Contact';
$message = 'Message';
if(mail($to,$subject,$message)) {
echo "mail sent";
}
}
?>

How to convert template from table to div [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I have tried in weeks to convert this template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<?php echo head();?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" class="background"<?php echo onload();?>>
<a name="top"></a>
<table border="0" align="center" cellpadding="7" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><table class="main" align="center" width="755" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header"colspan="2"><div class="sitetitle"></div></td>
</tr>
<tr>
<td valign="top" width="220"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table class="navigation" align="left" width="170" border="0" cellpadding="5" cellspacing="0">
<tr>
<td></td>
</tr>
<tr>
<td valign="top"> <?php echo toc();?> </td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo sitemaplink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo printlink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo mailformlink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo guestbooklink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo languagemenu();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo loginlink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo lastupdate();?></p></td>
</tr>
<tr>
<td class="eckenaviunten"></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td class="searchbox"><?php echo searchbox();?></td>
</tr>
</table></td>
</tr>
</table></td>
<td valign="top" width="550"> <table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="locator"><?php echo locator();?></div></td>
</tr>
</table>
<table align="center" width="550" border="0" cellpadding="5" cellspacing="0">
<tr>
<td class="eckeoben"></td>
</tr>
<tr>
<td class="content" valign="top"> <?php echo editmenu();?> <?php echo content();?>
<?php echo submenu();?></td>
</tr>
<tr>
<td class="eckeunten"></td>
</tr>
</table>
<br>
<br>
</td>
</tr>
<tr>
<td class="endline" colspan="2"><div align="center"><?php echo footer();?></div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
The CSS is:
.codeview {
background-color: #CCCCCC;
border: 1px solid #999999;
}
BODY,TD{
font-family:Verdana, Geneva, Arial, Helvetica;
font-size:8pt;
color:#000000;
}
H1,H2,H3{
font-size:13pt;
font-weight:bold;
margin-bottom:6px;
font-family: Arial, Helvetica, sans-serif;
}
H4{
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
background-image: url(images/infotable.png);
border: 1px solid #003399;
padding: 2px 4px;
font-weight: bold;
color: #003399;
}
ul.menulevel1,ul.menulevel2,ul.menulevel3,ul.sitemaplevel1,ul.sitemaplevel2,ul.sitemaplevel3,ul.submenu,ul.search{padding-left: 0;margin-left: 0;list-style: none;}
form{margin:0;}
IMG{border:0;}
li{line-height:1.5;}
.doc{padding-left: 15px;background-image: url(menu/doc.gif);background-repeat: no-repeat;}
.docs{padding-left:15px;background-image: url(menu/docs.gif);background-repeat:no-repeat;}
.sdoc{padding-left: 15px;background-image: url(menu/sdoc.gif);background-repeat: no-repeat;}
.sdocs{padding-left: 15px;background-image: url(menu/sdocs.gif);background-repeat: no-repeat;}
.sitemaplevel1 .doc{padding-left: 15px;background-image: url(menu2/doc.gif);background-repeat: no-repeat;}
.sitemaplevel1 .docs{padding-left:15px;background-image: url(menu2/docs.gif);background-repeat:no-repeat;}
.sitemaplevel1 .sdoc{padding-left: 15px;background-image: url(menu2/sdoc.gif);background-repeat: no-repeat;}
.sitemaplevel1 .sdocs{padding-left: 15px;background-image: url(menu2/sdocs.gif);background-repeat: no-repeat;}
.submenu .doc{padding-left: 15px;background-image: url(menu2/doc.gif);background-repeat: no-repeat;}
.submenu .docs{padding-left:15px;background-image: url(menu2/docs.gif);background-repeat:no-repeat;}
.submenu .sdoc{padding-left: 15px;background-image: url(menu2/sdoc.gif);background-repeat: no-repeat;}
.submenu .sdocs{padding-left: 15px;background-image: url(menu2/sdocs.gif);background-repeat: no-repeat;}
.search .doc{padding-left: 15px;background-image: url(menu2/doc.gif);background-repeat: no-repeat;}
.search .docs{padding-left:15px;background-image: url(menu2/docs.gif);background-repeat:no-repeat;}
.search .sdoc{padding-left: 15px;background-image: url(menu2/sdoc.gif);background-repeat: no-repeat;}
.search .sdocs{padding-left: 15px;background-image: url(menu2/sdocs.gif);background-repeat: no-repeat;}
a{text-decoration:none;font-weight:bold;}
a:link,a:visited{color:#1B366C;}
a:active,a:hover{color:#728DC3;}
.sitename{font-weight:normal;font-size:20pt;}
.menulevel1{font-size:8pt;color:#FCDE1C;}
.menulevel1 a{font-weight:normal;color:#FFFFFF;}
.menulevel1 a:link,.menulevel1 a:visited{color:#FFFFFF;}
.menulevel1 a:active,.menulevel1 a:hover{color:#FCDE1C;}
.sitemaplevel1,.sitemaplevel2,.sitemaplevel3{font-size:9pt;}
.sitemaplevel1 a,.sitemaplevel2 a,.sitemaplevel3 a{font-weight:normal;color:black;}
.sitemaplevel1 a:link,.sitemaplevel2 a:link,.sitemaplevel3 a:link,.sitemaplevel1 a:visited,.sitemaplevel2 a:visited,.sitemaplevel3 a:visited{color:black;}
.sitemaplevel1 a:active,.sitemaplevel2 a:active,.sitemaplevel3 a:active,.sitemaplevel1 a:hover,.sitemaplevel2 a:hover,.sitemaplevel3 a:hover{color:black;}
.submenu{
font-size:8pt;
color: #FFFFFF;
}
.submenu a{font-weight:normal;color:black;}
.submenu a:link,.submenu a:visited{color:black;}
.submenu a:active,.submenu a:hover{color:#1B366C;}
.search a{font-weight:normal;color:black;}
.search a:link,.search a:visited{color:black;}
.search a:active,.search a:hover{color:black;}
.locator{
font-size:8pt;
color:white;
margin-bottom: 13px;
background-image: url(images/pageico.png);
background-repeat: no-repeat;
text-indent: 20px;
height: 19px;
padding-top: 3px;
}
.locator a{font-weight:normal;text-decoration:underline}
.locator a:link,.locator a:visited,.locator a:active,.locator a:hover{color:white;}
.menu{font-weight:normal;font-size:7pt;color:white;}
.menu a{
color:white;
font-size: 7pt;
font-weight: normal;
text-decoration: underline;
}
.menu a:link,.menu a:visited,.menu a:active,.menu a:hover{color:white;}
.login{font-weight:bold;font-size:8pt;color:grey;}
.login a,.login a:link,.login a:visited,.login a:active,.login a:hover{color:gray;}
.navigator{font-weight:bold;font-size:10pt;color:white;}
.navigator a:link,.navigator a:visited{color:#c0c0c0;}
.navigator a:active,.navigator a:hover{color:white;}
.edit{
font-size:8pt;
color:black;
background-color:#FFFFFF;
background-image: url(images/edit.jpg);
background-repeat: no-repeat;
}
.edit a:link,.edit a:visited,.edit a:active,.edit a:hover{font-weight:normal;color:black;}
input,select{font-size:8pt;}
textarea{font-family:Verdana,Geneva,Arial,Helvetica;font-size:8pt;background-color:white;width:98%;}
.searchbox .text,.searchbox .submit{border:2px solid #c0c0c0;background-color:white;}
.background {
background-color: #FFFFFF;
background-image: url(images/cmsimpledebg.png);
background-attachment: fixed;
}
.main {
background-image: url(images/center.png);
border-bottom: 2px solid #103482;
}
.eckeoben {
background-color: #FFFFFF;
background-image: url(images/eckeoben.png);
background-repeat: no-repeat;
background-position: left;
height: 17px;
}
.eckeunten {
background-color: #FFFFFF;
background-image: url(images/eckeunten.png);
background-repeat: no-repeat;
background-position: left;
height: 17px;
}
.content {
background-color: #FFFFFF;
padding-left: 20px;
padding-right: 20px;
}
.eckenavioben {
background-color: #3C5A99;
background-image: url(images/eckenavioben.png);
background-repeat: no-repeat;
background-position: right;
height: 17px;
}
.eckenaviunten {
background-color: #3C5A99;
background-image: url(images/eckenaviunten.png);
background-repeat: no-repeat;
background-position: right;
height: 17px;
}
.navigation {
background-color: #3C5A99;
padding-left: 5px;
background-image: url(images/navigation.png);
background-repeat: no-repeat;
}
.searchbox .text {
border: 1px solid #D5DDED;
color: #FFFFFF;
background-image: url(images/textfield.png);
text-indent: 2px;
}
.searchbox .submit {
border: 1px solid #103482;
color: #FFFFFF;
background-image: url(images/submit.png);
}
.header {
background-image: url(images/header.png);
background-repeat: no-repeat;
height: 180px;
}
.endline {
background-color: #BAD5FF;
padding-top: 2px;
padding-bottom: 2px;
}
.sitetitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #008040;
text-align: left;
position: relative;
padding-left: 220px;
}
.borderheadline {
background-image: url(images/boderheadline.png);
}
.infotable {
background-color: #CCCCCC;
background-image: url(images/infotable.png);
background-repeat: repeat-x;
border: 1px solid #003399;
}
.codeview {
background-color: #CCCCCC;
padding: 3px;
border: 1px solid #999999;
width: 100%;
overflow: auto;
}
.warning {
color: #FF0000;
background-image: url(images/ausrufezeichen.png);
text-indent: 30px;
height: 35px;
background-repeat: no-repeat;
font-weight: bold;
padding-top: 10px;
}
Do you know a good tutorial on how to convert it from table to div?
Edit:
The template and screenshot of it can be found at: http://www.cmsimple-styles.com/cmsimplestyles/en/?Templates:Template_Downloads__1. The temple is called "cmsimple de". It's a little down the page :)
The CSS display property could help here?
<table> --> #topdiv { display:table; }
<tr> --> .row { display:table-row; }
<td> --> .cell { display:table-cell; }
It probably isn't the best way - is still is table design - but it should work reliably and all from css. (Never tried this personally, so not sure what other properties you'll need to set.)
replace 'table' 'tr' 'td' with div
set tr's width the same with table's width

Categories