<?php include('_header.php'); ?>
<?php
// if you need the user's information, just put them into the $_SESSION variable and output them here
echo WORDING_YOU_ARE_LOGGED_IN_AS . $_SESSION['user_name'] . "<br />";
//echo WORDING_PROFILE_PICTURE . '<br/><img src="' . $login->user_gravatar_image_url . '" />;
echo WORDING_PROFILE_PICTURE . '<br/>' . $login->user_gravatar_image_tag;
?>
<div>
<?php echo WORDING_LOGOUT; ?>
<?php echo WORDING_EDIT_USER_DATA; ?>
</div>
<?php include('_footer.php'); ?>
After logging in when it displays the "you are logged in" it is in the top left corner of my page and I need it in the top right corner.
I have tried multiple methods and none of them seem to solve my issue
here is the _header.php file, I have tried finding the "your logged in" section but unable to locate it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php-login-advanced</title>
<style type="text/css">
/* just for the demo */
body {
font-family: Arial, sans-serif;
font-size: 12px;
margin: 10px;
}
label {
position: relative;
vertical-align: middle;
bottom: 1px;
}
input[type=text]
{ position: absolute;
display: block;
top: 45px;
right: 30px;
}
input[type=password]
{ position: absolute;
display: block;
top: 80px;
right: 30px;
}
input[type=submit]
{ position: absolute;
display: block;
top: 115px;
right: 30px;
}
input[type=email] {
top: 30px;
right: 25px;
display: block;
margin-bottom: 15px;
}
input[type=checkbox] {
margin-bottom: 15px;
}
</style>
</head>
<body>
<?php
// show potential errors / feedback (from login object)
if (isset($login)) {
if ($login->errors) {
foreach ($login->errors as $error) {
echo $error;
}
}
if ($login->messages) {
foreach ($login->messages as $message) {
echo $message;
}
}
}
?>
<?php
// show potential errors / feedback (from registration object)
if (isset($registration)) {
if ($registration->errors) {
foreach ($registration->errors as $error) {
echo $error;
}
}
if ($registration->messages) {
foreach ($registration->messages as $message) {
echo $message;
}
}
}
?>
Add style="float:right;" to the div
Or better put this in a separate CSS file, in a CSS class declaration, and add the class to you div.
It would be something like
<div class="pull-right">
Add in the head of your HTML file :
<link rel="stylesheet" type="text/css" href="mycss.css" />
And in the mycss.css file:
.pull-right {
float:right;
}
Related
I am currently making a bio section for a website and so far I have a way to "edit the profile". What I want to happen is the text that is inserted be saved into a file I have already created. Here's the current code that I have with their according names.
Profile Editing Page (editprofile.php)
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
$username = $_SESSION['username'];
$file = "extra/" . $username . ".png";
if (!file_exists($file))
$file = 'extra/defaultProfile.png';
?>
<html>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Downloads</li>
<li>Chat</li>
<li>Profile</li>
<li class="logout">Logout</li>
</ul>
</nav>
</div>
</header>
<body>
<div class="profileimg">
<img src=<?php echo $file; ?> width="125" height="125">
</div>
<div class="profilename">
<p style="position: absolute; top: 8px; left: 130px; color: white; font-size: 30px;"><?php echo $username ?></p>
</div>
<div class="biotext">
<textarea style="position: absolute; top: 75px; left: 132.5px; width: 450px; height: 87px;"></textarea>
</div>
</body>
<footer>
<div class="status">Currently logged in as <?php echo $username ?></div>
</footer>
</html>
The Display Profile Page (profile.php)
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
$username = $_SESSION['username'];
$file = "extra/" . $username . ".png";
if (!file_exists($file))
$file = 'extra/defaultProfile.png';
?>
<html>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Downloads</li>
<li>Chat</li>
<li>Profile</li>
<li class="logout">Logout</li>
</ul>
</nav>
</div>
</header>
<body>
<div class="profileimg">
<img src=<?php echo $file; ?> width="125" height="125">
</div>
<div class="profilename">
<p style="position: absolute; top: 8px; left: 130px; color: white; font-size: 30px;"><?php echo $username ?></p>
</div>
<div class="biotext">
<iframe width=25% height=9.5% src="getbio.php" background-color='white' style=" position: absolute; top: 75px; left: 132.5px;"></iframe>
</div>
<p>Edit Your Profile</p>
</body>
<footer>
<div class="status">Currently logged in as <?php echo $username ?></div>
</footer>
</html>
The Part to get the bio text from a file (getbio.php)
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
$username = $_SESSION['username'];
$bioFile = "bio/" . $username . ".txt";
if (!file_exists($bioFile))
$bioFile = 'bio/defaultBio.txt';
?>
<style>body {background-color: #f1f1f1;}
</style><body><?php echo nl2br( file_get_contents($bioFile) );
?></body>
CSS (main.css)
body {
margin: 0;
background: #222;
font-family: arial;
font-weight: 500;
}
.container {
width: 100%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
float: left;
width: 100%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav li:hover {
color: #000;
}
nav li::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav li:hover::before {
width: 100%;
}
.logout {
float: right;
margin-right: 50px;
}
.status {
position: absolute;
bottom: 5px;
right: 5px;
color: green;
}
.download {
display: inline-block;
text-decoration: none;
list-style: none;
}
.download a{
color: lime;
text-decoration:none;
padding-left: 50px;
}
.download a:hover{
color: green;
text-decoration:none;
}
.download li {
display: inline;
float: right;
padding-top: 17.5px;
}
The CSS is just for good viewing of the website and the other parts are for reference. I'm not sure how to save the text from the textarea (part of the editprofile.php) to files inside a folder called /bio. If anyone can help me, I'd be really thankful.
What is missing from your code is a way to send the data entered on the edit page to the server for processing and saving. Obviously, you cannot open a file that has not been created.
The html element used to send data to a server is <form> which interacts with editing (input) elements such as <textarea>.
I suggest some learning on your part. Here is one place to start.
I'm having some problems with my login feature using php with multiple users, I'm not using a database as this is a school assignment.
So the assignment is as follows "create an associative array with usernames as keys and encrypted passwords using password_hash. Once the user has logged in it shall print out the users name." We got a template that we should use, I will paste all the necessary code. So the problem I am having is, that when I try to log in as a user it keeps redirecting me so that I get the "too many redirects" error.
login.php
<?php
session_start();
if(isset($_POST['password'],$_POST['username'])){
include("pwd.php");
include("user.php");
$key = $_POST['username'];
if(isset($user[$key])){
$_SESSION['inloggad'] = true; // Användaren har anget rätt uppgifter.
$_SESSION['user'] = $_POST['username'];
}
}
if(isset($_SESSION['inloggad'])){
header("Location: index.php");
}
else{
echo "<h1>Vänligen logga in!</h1>";
}
?>
login.html
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" >
<title>Sessioner</title>
</head>
<body>
<form method="post" action="login.php">
Username: <input type="username" name="username" size="20" /><br />
<br>
Password: <input type="password" name="password" size="20" /><br />
<input type="submit" value="Logga in" name="login"/>
</form>
</body>
</html>
user.php
<?php
$user['admin'] = '$2y$10$9NyoNcqG9sh0KOrVnUXLr.KscgDy0L1S0klYXK67oxVBVsElbbGja';
$user['hank'] = '$2y$10$tQNcTINMIcotw0IczQ1nTuOVRIpbuqh5M/k.mLpz7ZiZl8q2WA0Cy';
$user['elias'] = '$2y$10$tQNcTINMIcotw0IczQ1nTuOVRIpbuqh5M/k.mLpz7ZiZl8q2WA0Cy';
?>
start.php
<h1>Välkommen</h1>
<?php
include("login.php");
if(isset($_POST['password'],$_POST['username'])){
echo '<h1>' . $_POST['username'] . '</h1>';
}
?>
index.php
<?php session_start(); ?>
<!doctype html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<title>Länka in med PHP</title>
<link href="css/styleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<?php include("header.php"); ?>
</header><!-- header -->
<section id="leftColumn">
<nav>
<?php
if(isset($_SESSION['inloggad'])){
include("meny.php");
}else{
include("login.html");
}
?>
</nav>
<aside>
<?php include("aside.php"); ?>
</aside>
</section><!-- End leftColumn -->
<main>
<section>
<!-- Lägg in innehållet här -->
<?php
$page = "start";
if(isset($_GET['page']))
$page = $_GET['page'];
switch($page){
case 'blogg': include('blogg.php');
break;
case 'bilder': include('bilder.php');
break;
case 'kontakt': include('kontakt.php');
break;
case 'klotter': include('klotter.php');
break;
default: include('start.php');
}
?>
</section>
</main><!-- End main -->
<footer>
<?php include('footer.php'); ?>
</footer><!-- End footer -->
</div><!-- End wrapper -->
</body>
</html>
styleSheet.css
#CHARSET "UTF-8";
* {
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
}
body{
font-size: 100%;
}
p {
font-size: 0.8em;
margin-bottom: 10px;
margin-top: 5px;
margin-right: 10px;
text-align: justify;
}
/* Wrapper */
#wrapper {
width: 800px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
border: 2px solid rgba(0,0,0,0.8);
}
/* End wrapper */
/* Header */
header {
text-align:center;
height: 60px;
background-image: url("../bilder/bgImg.png");
color: white;
}
header h1{
font-family: Arial;
font-size: 1.9em;
padding-top: 0.25em;
}
header time{
float: right;
margin-right: 2em;
font-size: 0.8em;
}
/* End header */
nav{
border-radius: 5px; /* CSS3 */
border: 1px solid #999;
padding: 4px;
margin-bottom:5px;
}
nav ul {
list-style:none;
}
nav li{
margin-top: 5px;
border: 1px solid #000;
}
nav li a{
display:block;
font-size: 0.8em;
text-decoration: none;
color: #aa0000;
padding-left: 15px;
background-color:#FFC;
}
nav li a:hover, #leftColumn li a:active, #leftColumn li a:focus{
background-color: gray;
color: #ffffff;
}
aside {
-moz-border-radius: 5px; /* Ger rundade hörn i Firefox */
border-radius: 5px; /* CSS3 */
border: 1px solid #999;
padding: 4px;
margin-bottom:5px;
}
aside p {
font-size: 0.8em;
}
/* leftColumn */
#leftColumn {
float: left;
width: 180px;
margin: 8px;
}
#leftColumn h1 {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
/* End leftColumn */
/* Main */
main {
margin-top: 8px;
margin-left:200px;
}
main h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
}
main h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
main section{
float:right;
width: 99%;
}
form label,a{
font-size: 0.8em;
}
/* End content */
/* Footer */
footer {
height: 30px;
background-image: url("../bilder/bgImg.png");
color: white;
font-size: 0.75em;
clear:both;
}
footer #footerRight{
float:right;
padding: 5px;
}
footer #footerLeft{
float:left;
padding: 5px;
}
/* End footer */
the rest of the template is not really necessary for me to paste as it's just html code for the website, I just linked the css code if you want to check what the page looks like yourself. If you need any more information that I might have forgotten to write please notify me.
I know there's a problem with me using include("login.php") in the start.php, I just don't know how to solve it as I need the information submitted in the login form. The page controller is stating that start.php is the default page the template uses in the section.
EDIT: sorry I was not clear about this part. it only happens once I enter the correct details, for example, admin:12345.
EDIT 2:
new start.php code
<?php
include("login.php");
if(isset($_SESSION['user'])){
echo '<h1>Välkommen</h1>' . '<h1>' . $_SESSION['user'] . '</h1>';
}
?>
Full login.php I'm using:
<?php
session_start();
if (isset($_POST['password'], $_POST['username'])) {
include("pwd.php");
include("user.php");
$key = $_POST['username'];
if (isset($user[$key])) {
$_SESSION['inloggad'] = true; // Användaren har anget rätt uppgifter.
$_SESSION['user'] = $_POST['username'];
}
if (isset($_SESSION['inloggad']) && ($_SESSION['inloggad'] === TRUE)) {
header("Location: index.php");
} else {
echo "<h1>Vänligen logga in!</h1>";
}
}
In the index.php file there is a line default: include('start.php'); that can cause this page to redirect to itself because file start.php includes file login.php which has header("Location: index.php"). The same problem would apply in case any other included file on this page lead to inclusion of header("Location: index.php")
Okay so I have found after some long research a code that I will include here that adds prev/next url at bottom of page. What I am doing is making a portfolio that in the future I will add pages and remove, so I needed a php code that would run pages using the footer.php and go to next in line. Example it would show page1.php, page2.php, page3.php, page4.php and so on. That all works great in the code I have. What I would like now is to put a variable name on each page of what that portfolio piece will be then have it echo next to the previous and next button. I can get it to work, but it shows the existing name on each prev/next button.
If I am not making sense just tell me and I will explain it differently. I hope someone can help, been trying to get my portfolio done for some time now! :)
Here is my header.php
<html>
<head>
<title>PAGINATION TEST</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<nav>
<div id="nav_menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
<body>
Here is my page1.php
<?php //THIS IS THE PREVIOUS/NEXT LINK TITLE FOR EACH PORTFOLIO PAGE
session_start();
$_SESSION['link-title'] = "wonder woman";
?>
<?php include('header.php') ?>
<div id="main_body">
PAGE 1
</div>
<?php include('footer.php') ?>
Here is my footer.php
<?php
session_start(); //this NEEDS to be at top of the page before any output etc
?>
<?php
$pinfo = pathinfo($_SERVER["SCRIPT_FILENAME"]);
$reqpath = dirname($_SERVER["REQUEST_URI"]);
$linkname = ($_SESSION['link-title']);
if(preg_match("/(.*?)(\d+)\.php/", $pinfo["basename"], $matches)) {
$fnbase = $matches[1];
$fndir = $pinfo["dirname"];
$linkTitle = $linkname;
$current = intval($matches[2]);
$next = $current + 1;
$prior = $current - 1;
$next_file = $fndir . DIRECTORY_SEPARATOR . $fnbase . $next . ".php";
$prior_file = $fndir . DIRECTORY_SEPARATOR . $fnbase . $prior . ".php";
$next_link = $linkTitle . $next;
$prev_link = $linkTitle . $prior;
if(!file_exists($next_file)) $next_file = false;
if(!file_exists($prior_file)) $prior_file = false;
if($prior_file) {
$link = $reqpath . DIRECTORY_SEPARATOR . basename($prior_file);
// echo "Prior";
}
if($prior_file && $next_file) {
// echo " / ";
}
if($next_file) {
$link = $reqpath . DIRECTORY_SEPARATOR . basename($next_file);
// echo "Next";
}
if($prev_link) {
$prevTitle = $prev_link;
}
if($next_link) {
$Title = $next_link;
}
}
?>
<div id="pagination_container">
<div id="previous_link">
<!-- PREVIOUS -->
<?php if($prior_file) {
$link = $reqpath . DIRECTORY_SEPARATOR . basename($prior_file);
echo "PREVIOUS";
// echo $_SESSION['link-title'];
echo $prevTitle;
}
?>
</div>
<div id="next_link">
<!-- NEXT -->
<?php if($next_file) {
$link = $reqpath . DIRECTORY_SEPARATOR . basename($next_file);
echo $Title;
// echo $_SESSION['link-title'];
echo "NEXT";
}
?>
</div>
</div>
<div id="footer">
copyright blah blah
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
here is my css
body,html {
padding: 0;
margin: 0;
overflow-x: hidden;
}
#nav_menu {
background-color: pink;
width: 100%;
height: 80px;
}
#nav_menu ul {
text-align: right;
}
#nav_menu li {
list-style-type: none;
display: inline-block;
padding-right: 20px;
padding-top: 30px;
}
#main_body {
width: 100%;
background-color: #dbdbdb;
height: 400px;
padding: 20px;
color: #333333;
}
#pagination_container {
width: 100%;
background-color: pink;
display: flex;
}
#previous_link {
width: 50%;
background-color: purple;
color: white;
display: flex;
float: left;
text-align: left;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 20px;
}
#previous_link:hover {
color: white;
transition: 0.5s all;
}
#previous_link:link {
color: white;
text-decoration: none;
}
#next_link {
width: 50%;
background-color: purple;
color: white;
text-align: right;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 20px;
border-left: 1px solid #dbdbdb;
}
#next_link a:visited {
color: white;
}
#next_link a:link {
color: white;
text-decoration: none;
}
#next_link a:hover {
color: blue;
transition: 0.5s all;
}
#next_link:hover {
background-color: pink;
transition: 0.5s all;
}
#footer {
text-align: center;
padding-top: 20px;
}
Here is page2.php for example of how it works now
<?php //THIS IS THE PREVIOUS/NEXT LINK TITLE FOR EACH PORTFOLIO PAGE
session_start();
$_SESSION['link-title'] = "superman";
?>
<?php include('header.php') ?>
<div id="main_body">
PAGE 2
</div>
<?php include('footer.php') ?>
I have a map on a page where I have an image that I can move from X to Y as a still png image.
I would like to change this to having the still image become an animated image and then return to a still image.
This is what I have now in my CSS file and in my PHP file. How can I change the CSS or PHP file so that I don't see all the images? I want to create a 'walking' motion (maybe by showing one image after the other? then hiding the prior shown image?)
div.animate-stills
{
width: 13px;
height: 30px;
position: absolute;
-webkit-animation: mymove 5s 1;
animation: mymove 5s 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<head>
<link rel="stylesheet" href="vault/style_animate.css">
<?php /* my php here */ ?>
<style>
/* ANY DIRECTION */
#-webkit-keyframes mymove
{
from {top: <?php echo "$playerlocation_y"; ?>px; left: <?php echo "$playerlocation_x"; ?>px;}
to {top: <?php echo "$move_y"; ?>px; left: <?php echo "$move_x"; ?>px;}
}
#keyframes mymove
{
from{top: <?php echo "$playerlocation_y"; ?>px; left: <?php echo "$playerlocation_x"; ?>px;}
to{top: <?php echo "$move_y"; ?>px; left: <?php echo "$move_x"; ?>px;}
}
</style>
</head>
<body>
<?php /* my php here */
echo '<div class="animate-stills" syle="position: absolute; top: ' . $playerlocation_y . 'px; left: ' . $playerlocation_x . 'px; background-image: url(' . $img_1 . '),url(' . $img_2 . '),url(' . $img_3 . '),url(' . $img_4 . '),url(' . $img_5 . '),url(' . $img_6 . '),url(' . $img_7 . '),url(' . $img_8 . '); background-size: contain; background-position: center center; width: 13px; height: 30px;"></div>';
?>
</body>
I have simplified the php so you can make some sense of it. all the $variables are declared and or taken from the database.
HTML outputs the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SKULLS AND BONES</title>
<link rel="stylesheet" href="vault/style.css">
<link rel="stylesheet" href="vault/style_animate.css">
<link rel="stylesheet" href="vault/style_hex50.css">
<link rel="icon" href="favicon.ico" />
<!-- <script src="script.js"></script> -->
<style>
/* ANY DIRECTION */
/* Chrome,Safari,Opera */
#-webkit-keyframes mymove
{
from {top: 86px; left: 232px;}
to {top: 86px; left: 284px;}
}
/* Default syntax */
#keyframes mymove
{
from {top: 86px; left: 232px;}
to {top: 86px; left: 284px;}
}
</style>
</head>
<body>
<div class="animate-stills" style="position: absolute; top: 86px; left: 232px; background-image: url(vault/images/alpha/player_male_1.png), url(vault/images/alpha/test_male02.png), url(vault/images/alpha/test_male03.png), url(vault/images/alpha/test_male04.png), url(vault/images/alpha/test_male05.png), url(vault/images/alpha/test_male06.png), url(vault/images/alpha/test_male07.png), url(vault/images/alpha/test_male08.png); background-size: contain; background-position: center center; width: 32px; height: 32px;"></div>
</body>
</html>
I have shortened the output for better reading.
After a long time of fiddling arround and searching google more on the subject I found some solution. I had to make a few changes. Here is the CSS file.
div.animate-movement
{
background: url(images/alpha/MaleWalkingSheet128x30.png);
width: 16px;
height: 30px;
transform: translate3d(0,0,0);
-webkit-animation: mymove 2.1s steps(8) 3;
animation: mymove 2.1s steps(8) 3;
}
And here is some of the output from the php in the html file. I have placed this in the php file because the values are always changing.
/* ANY DIRECTION */
/* Chrome,Safari,Opera */
#-webkit-keyframes mymove
{
from {top: 209px; left: 206px;}
to {top: 250px; left: 232px;}
from {background-position: 0px; }
to {background-position: -128px; }
}
/* Default syntax */
#keyframes mymove
{
from {top: 209px; left: 206px;}
to {top: 250px; left: 232px;}
from {background-position: 0px; }
to {background-position: -128px; }
}
<div class="animate-movement"></div>
The only problem I now seem to have with this is that it sometimes looks like the image is 'warping' backward to where it was before ending the animation. I searched google for this and therefore I added: transform: translate3d(0,0,0); to the css file. apparantly that turns the animation over to the GPU?
The animation sometimes 'warps' any way to fix this?
The user arrives on the following php script and it sets if the email has been confirmed or not.
At the moment the only thing the user can seen in the browser is a very simple message printed by the php echo.
I would like it to look visually more interesting. Get this echo to be part of a properly styled HTML page with header, font styles, signature, images...
What would be the best approach for that having in mind my script has breakpoints? As I never did that before, not sure what would be the best start point to focus the effort on.
Bellow are my code updates based on the answers. Hope that helps other
users that are new to php.
<?php
require("../db/MySQLDAO.php");
require ("../Classes/EmailConfirmation.php");
$config = parse_ini_file('../db/SwiftApp.ini');
//host access data
$dbhost = trim($config["dbhost"]);
$dbuser = trim($config["dbuser"]);
$dbpassword = trim($config["dbpassword"]);
$dbname = trim($config["dbname"]);
// receive token data
$emailToken = htmlentities($_GET["token"]);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title here</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary {
text-decoration: none;
color: #FFF;
background-color: #aaa;
border: solid #aaa;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container p {
font-size: 12px;
color: #666;
}
table.footer-wrap a {
color: #999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #d63480;
margin: 40px 0 10px;
line-height: 1.2;
font-weight: 200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important; /* makes it centered */
clear: both!important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<!-- content -->
<div class="content">
<table>
<tr>
<td>
<h1>Title</h1>
<table>
<tr>
<td class="padding">
<p>
<?php
if(empty($emailToken)) {
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>Unfortunately your email validation token has expired.</p>";
echo "<p>Please get in contact with us at <a href=mailto:></a></p>";
}
else{
//open server connection
$dao = new MySQLDAO($dbhost, $dbuser, $dbpassword, $dbname);
$dao->openConnection();
//creates user
$user_id = $dao->getUserIdWithToken($emailToken);
if(empty($user_id))
{
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>We could not find an user associated with the email you provided.</p>";
echo "<p>Please get in contact with us at <a href></a></p>";
}
else{
$result = $dao->setEmailConfirmedStatus(1, $user_id);
if($result)
{
echo "<h2>Thank you! Your email is now confirmed!<h2>";
$dao->deleteUsedToken($emailToken);
}
}
$dao->closeConnection();
}
?>
</p>
</td>
</tr>
</table>
<p class="padding"></p>
<p>Thanks,</p>
<p>Title team</p>
<p class="padding"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
</tr>
</table>
<!-- /body -->
</body>
</html>
Use HTML to structure your content and CSS to format your content.
You can echo HTML and CSS right along with your string.
Those links should get you going in the right direction.
Update to accommodate comment
There are many methods, but a simple example that might work for your case is something like this:
Instead of echoing right there in your if statement, replace it with an include or require.
Lets call that file template.php. This file does not need to start with <?php and end with ?>. PHP can punch in and out with HTML. So template.php might look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta charset="UTF-8">
<title></title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="some_style"><?php
echo 'something';
?></div>
<div class="some_style2"><?php
echo $some_var;
?></div>
</body>
</html>
Also if this is going to be sent in an email, CSS is not really supported in email, so you will need to keep the styling to what you can do with simple HTML tags and images.
Change your echo to:
echo '<div id="message">User with this email token is not found</div>';
Then style #message with css
Hope that helps!
urgh.. uglyness html in php. There are ways in which you can include html within the script without echoing it out.
There is the old way.
// out of php
?>
<div>
<?php echo $content; ?>
</div>
<?
// back in.
Or you can look into php/html short hand. Your code will benefit from it because it will be somewhat cleaner to read,
The main reason though, dont make php parse html unless you have to.
PHP
echo "<p id='token_message'>User with this email token is not found</p>";
CSS
#token_message {
/* Styling Here */
}