Page layout issues with PHP , HTML, and CSS - php

For some reason my CSS is not formatting my div tags into the correct spots on the page. It works on all my other pages but this one has a lot more PHP in it than normal and I am wondering if that is the problem.
Page
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
require("protect/serverInfo.php");
$myusername=$_POST[Email];
$mypassword=$_POST[Password];
$result = mysql_query("SELECT * FROM Customers WHERE Email='$myusername' AND Password=$mypassword");
$count=mysql_num_rows($result);
if($count==1){
while($row = mysql_fetch_array($result)){
?>
<div class="wrapper">
<div class="customerHead">';
<h1>
<?php echo $row['Customer'] ?>
</h1>
</div>
<div class="customerInfoMain">
Company: <?php echo $row['Company'] ?><br />
State: <?php echo $row['State'] ?>
</div>
<div class="customerCards">';
<img src="<?php echo $row['imagePathFront'] ?>" width="400px" height="303px" align="center" alt="" />
<img src="<?php echo $row['imagePathBack'] ?>" width="400px" height="303px" align="center" alt="" />
</div>
<div class="customerComments">';
<h5>Changes Made:</h5><br /> <?php echo $row['Comments'] ?>
</div>
</div>
<?php
}
}
else {
echo "Wrong Username or Password";
}
?>
</body>
</html
>
CSS
.customerCards{
top: 150px;
position: relative;
width: 425px;
border: 3px;
border-style:solid;
border-color: black;
background-color: silver;
z-index:1;
}
.customerInfoMain{
top: 200px;
position: relative;
width: 200px;
left: 520px;
border: 3px;
border-style:solid;
border-color: black;
background-color: silver;
z-index:2;
}
.customerComments{
position: relative;
width: 200px;
left: 580px;
border: 3px;
border-style:solid;
border-color: black;
background-color: silver;
z-index:2;
}
.wrapper{
position: absolute;
left: 50%;
width: 900px;
margin-left: -475px;
}
Source after page load
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
Wrong Username or Password
</body>
</html>

its because your wrapper just starting if there is user..
But what happend if you put your wrapper around the PHP, like:
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<?php
require("protect/serverInfo.php");
$myusername=$_POST[Email];
$mypassword=$_POST[Password];
$result = mysql_query("SELECT * FROM Customers WHERE Email='$myusername' AND Password=$mypassword");
$count=mysql_num_rows($result);
if($count==1){
while($row = mysql_fetch_array($result)){
?>
<div class="customerHead">';
<h1>
<?php echo $row['Customer'] ?>
</h1>
</div>
<div class="customerInfoMain">
Company: <?php echo $row['Company'] ?><br />
State: <?php echo $row['State'] ?>
</div>
<div class="customerCards">';
<img src="<?php echo $row['imagePathFront'] ?>" width="400px" height="303px" align="center" alt="" />
<img src="<?php echo $row['imagePathBack'] ?>" width="400px" height="303px" align="center" alt="" />
</div>
<div class="customerComments">';
<h5>Changes Made:</h5><br /> <?php echo $row['Comments'] ?>
</div>
<?php
}
}
else {
echo "Wrong Username or Password";
}
?>
</div>
</body>
</html>
"Then you should have a little bit of the CSS action?"

Split the code by purpose functionality and calculations are not meant to be in the same place, html should be rendered last. Keeping on working like this will bring you a lot of trouble. Things should be done like this:
loginProcess.php contains:
if(isset($_SESSION["user"]) {
$row = $_SESSION["user"];
}
include("loginPage.php");
?>
and this is longinPage.php (you can include either of them in which on you want). Either include loginPage.php at the end of loginProcess.php or include loginProcess.php at the begining of loginPage.php
so loginPage.php contains
< !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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
< title>Untitled 1
< link href="stylesheet.css" rel="stylesheet" type="text/css" />
< /head>
< body>
if(isset($_SESSION['user'])) {
< div class="wrapper">
< div class="customerHead">';
<h1><!---you know the row from before---/>
<?php echo $row['Customer'] ?>
</h1>
</div>
<div class="customerInfoMain">
Company: <?php echo $row['Company'] ?><br />
State: <?php echo $row['State'] ?>
</div>
<div class="customerCards">';
<img src="<?php echo $row['imagePathFront'] ?>" width="400px" height="303px" align="center" alt="" />
< a href ="something/<?php echo $row['imagePathBack'] ?>" target="_blank">
< img src="" width="400px" height="303px" align="center" alt="" />
</div>
<div class="customerComments">';
<h5>Changes Made:</h5><br /> <?php echo $row['Comments'] ?>
</div>
</div>
<?php
}
}
else {?>
<form action="/loginProcess.php" (or loginPage.php if loginPage includes the loginProcess) method="POST">
<input type="text" name="Email" value=""/>
<input type="password" name="Password" value=""/>
<input type="submit" value="login"/>
</form>
<?php}?>
?>
first the login form will be shown and the user will input his credentials, those credentials will be checked and if they are ok the SESSION['user'] is set (remeber you need a session start for that) now as long as the session persists you will not need to request for login all the time. Anyway, if you do not want for some reason to fully separate Database Concerns/Process Concerns/Viewing Concerns, at leas you must separate the Process from the Viewing(Keeping Database concerns in the processing area). Checkout some frameworks online or try to find a way to write code with a little more care, otherwise you will keep on having useless problems that waste your time.

Related

Contenteditable div height limit

Hey guys I have problems with contenteditable height. With code like this:
function Preview() {
var x = document.getElementById("code").value;
document.getElementById("preview").innerHTML = x;
}
.preview{
text-align: left;
color: white;
margin-left: 10px;
max-height: 300px;
overflow: auto;
}
<section id="main">
<div id="gra">
<input type="hidden" id="current-code" name="current-code" />
<textarea id="code" name="code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Simple PHP File</title>
</head>
<body>
<h1><?php echo "Hello, world!"; ?></h1>
</body>
</html>
</textarea>
<div class="flex">
Preview
Reset
</div>
</div>
<div id="gra">
<div contenteditable="true" class="preview" id="preview">
</div>
</div>
</section>
When I enter code with more I can observe effect like this:
Anyone can help me with limit contenteditable height?
try this code
and also change color: red; instead of color:white because its not see anything on white screen
function Preview() {
var x = document.getElementById("code").value;
document.getElementById("preview").innerHTML = x;
}
function Reset() {
document.getElementById("preview").innerHTML = "";
}
.preview {
text-align: left;
color: red;
margin-left: 10px;
max-height: 300px;
overflow-y: scroll;
border: solid 1px #ddd;
}
<section id="main">
<div id="gra">
<input type="hidden" id="current-code" name="current-code" />
<textarea id="code" name="code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Simple PHP File</title>
</head>
<body>
<h1><?php echo "Hello, world!"; ?>you write php code hear so it will not print on html</h1>
</body>
</html>
</textarea>
<div class="flex">
Preview
Reset
</div>
</div>
<div id="gra">
<div contenteditable="true" class="preview" id="preview">
</div>
</div>
</section>

How to send and open a variable web address to a object tag on a separate page using PHP?

in my test page I have three links which assign a different web address to a variable called $link
.buttonpush {
height: 25px;
width: 200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333;
border: 2px solid #CCC;
}
.butdiv {
position: absolute;
left: 20px;
top: 30px;
}​
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="css/phptest.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="butdiv">
<div class="buttonpush"><a href="show.php
?link=http://www.google.co.uk/">Button one</a></div>
<div class="buttonpush"><a href="show.php
?link=http://www.blue-seahorse.com/">Button two</a></div>
<div class="buttonpush"><a href="show.php
?link=http://www.blue-seahorse.com/">Button three</a></div>
</div>
</body>
</html>
​
I need to make the result page display the required web site within the object tag
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show</title>
</head>
<body>
<?php
$link = $_GET['link'];
?>
<object data="echo htmlspecialchars '$link';" width="1000" height="720">
<embed src="echo htmlspecialchars '$link';" width="1000" height="720" /> Error: Embedded data could not be displayed.
</object>
</body>
</html>
Although the correct web address is passed to the show.php page, it doesn't display the webpage being called. I've used a similar code to pass specific variable strings to a form before, but I failed in my attempt to achieve this result.
Try :
<object data="<?php echo htmlspecialchars($link); ?>" width="1000" height="720">
<embed src="<?php echo htmlspecialchars($link); ?>" width="1000" height="720" /> Error: Embedded data could not be displayed.
</object>
In order to use php variable it has to be inside <?php ?>

Embarcadero RadPHP XE2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" DIR=ltr >
<head>
<title>MPage1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=320,user-scalable=yes,initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="/rpcl-bin/jquerymobile/js/base64.js"></script>
<script src="/rpcl-bin/jquerymobile/js/jquery-1.6.1.min.js"></script>
<script src="/rpcl-bin/jquerymobile/js/functions.js"></script>
<script>
jQuery(document).bind('mobileinit', function(){
jQuery.noConflict();
jQuery.extend(jQuery.mobile , {
loadingMessage: 'Loading',
pageLoadErrorMessage: 'Error Loading Page',
autoInitialize: true,
defaultTransition: 'slide'
});
});</script>
<script src="/rpcl-bin/jquerymobile/js/jquery.mobile-1.0b1.js"></script>
<link rel="stylesheet" href="/rpcl-bin/jquerymobile/css/jquery.general.css" />
</head>
<body style=" margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; " >
<div data-role="page" id="MPage1_page" >
<link rel="stylesheet" href="/unit1.php?header_file=css" />
<script src="/unit1.php?header_file=js"></script>
<form style="margin-bottom: 0" id="MPage1" name="MPage1" method="post" target="_self" action="/unit1.php"><input type="hidden" name="serverevent" value=""><input type="hidden" name="serverparams" value="">
<table width="320" style="height:480px" border="0" cellpadding="0" cellspacing="0" ><tr><td valign="top">
<div id="ComboBox1_outer" style="Z-INDEX: 0; LEFT: 66px; WIDTH: 185px; POSITION: absolute; TOP: 82px; HEIGHT: 18px">
<select name="ComboBox1" id="ComboBox1" size="1" style=" font-family: ; font-size: ; cursor: default;height:16px;width:185px;" tabindex="0" > <option value="0" >value0</option>
<option value="1" selected="selected" >value1</option>
</select>
</div>
</td></tr></table>
</form></div>
</body>
</html>
<!-- MPage1 end -->
I've installed RadPHP XE2 on Windows 7 machine.
I've created a new mobile application and added a combobox to the form. I added 2 items (value0, value1) to the combobox and set the item index to 0.
When I run the application this the selected value is displayed above the combobox. This happens in IE and Chrome (latest version) How do I remove this?
EDIT: I've attached the downloaded HTML. Strange. When I save it to a .html file and open it in a browser, the page displays correctly, but running it from the IDE, it doesn't

How can I get PHP INCLUDE working?

below is my code for php include. I guess I'm inputting the right code, but it just don't seem to abide:
Here is my headertop.php:
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>HOME</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation,
portfolio, thumbnails"/>
<link rel="shortcut icon" href="images/art_favicon.png" type="image/x-
icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<header>
<?php
<div id="headertop">
<div id="adams">
<p><span style="color: #F60;">A</span>ncajas <span style="color:
#F60;">D</span>igital <span style="color: #F60;">A</span>rts & <span style="color:
#F60;">M</span>edia <span style="color: #F60;">S</span>olutions</p>
</div>
</div>
?>
</header>
</head>
</html>'
And here is my index.php:
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>HOME</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation,
portfolio, thumbnails"/>
<link rel="shortcut icon" href="images/art_favicon.png" type="image/x-
icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
body{
background-image: url(images/graphy.png);
font-family:Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
</style>
</head>
<header>
<?php
include ('headertop.php');
?>
</header>
<body>
<div id="contents">
</div>
</body>
</html>'
And of course my CSS for the header part:
'#headertop{
width: 1050px;
height: auto;
background-color: #252525;
margin-left: auto;
margin-right: auto;
position: inherit;
border-top: solid #F60 2px;
margin-bottom: 0px;
/*border-bottom: solid #F60 1px;*/
}
#adams{
font-family:"Trajan Pro";
font-weight: 100;
font-size: 24px;
text-align: center;
color: #CCC;
padding-bottom: 6px;
margin-bottom: 17px;
}
header{
width: 1050px;
height: 300px;
/*background-image:url(../interactive/product_slideshow.swf);*/
/*background-color: #999;*/
margin-left: auto;
margin-right: auto;
}'
Thank you guys for the support.
This should be throwing somewhere an error:
<?php
<div id="headertop">
It is within your headertop.php. Furthermore, I recommend you to turn errors on while coding so this doesn't happen again.
You don't need to set up the full html in the file you're including, only the bit you want to include. Try changing headertop.php to this:
<div id="headertop">
<div id="adams">
<p>
<span style="color: #F60;">A</span>ncajas
<span style="color: #F60;">D</span>igital
<span style="color: #F60;">A</span>rts &
<span style="color: #F60;">M</span>edia
<span style="color: #F60;">S</span>olutions
</p>
</div>
</div>

is this code right? (PHP POST method using catpcha)

I am a very rookie php developer; and i decided create a user Login system.
For the system, i want use captcha system. My problem is that when i click the button "Send" i can't send the data of the form (two textbox: username and mail address).
For make it work; i created a method that recive the data of the form, this data is send like: method_name($POST["username"],$POST["mail"]);
i want to know if this is correct or it will have some security problem or maybe something else.
thanks.
pd: sorry for my english...is not good.
this is the index page
<?php
require_once('recaptchalib.php');
require_once('home.php');
$publickey = "foo";
$privatekey = "bar";
$error = null;
if ($_POST['action'] == "register") {
$re_ip = $_SERVER["REMOTE_ADDR"];
$re_challenge = $_POST["recaptcha_challenge_field"];
$re_response = $_POST["recaptcha_response_field"];
$resp = recaptcha_check_answer($privatekey, $re_ip, $re_challenge, $re_response);
if ($resp->is_valid) {
// procesar registro
hello($_POST["username"],$_POST["usermail"]);
exit;
} else {
$error = $resp->error;
}
}
?>
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>reCAPTCHA Demo</title>
<style type="text/css">
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
line-height: 18px;
}
.casilla {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333;
padding: 2px 4px;
width: 298px;
margin-left: 3px;
}
h3 {
color: #03C;
font-size: 16px;
}
</style>
<link rel="stylesheet" href="stylesheets/css3buttons.css" media="screen"/>
</head>
<body>
<h3>Registro</h3>
<form method="post">
<label for="username">Usuario</label><br />
<input name="username" type="text" class="casilla" id="username" /><br />
<label for="usermail">Email</label><br />
<input name="usermail" type="text" class="casilla" id="usermail" /><br />
<label for="usercheck">Verificación</label><br />
<?php echo recaptcha_get_html($publickey, $error); ?>
<input type="hidden" name="action" value="register" />
<button type="submit" name="btsend" value="Enviar">Iniciar Sesión</button>
</form>
</body>
</html>
**and this is other page**
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<?php
function hello($var1,$var2)
{
$mailFilter = "^(([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$";
echo"HELLO WORLD\n".$var1."---".$var2;
if (preg_match($mailFilter, $var2)) {
echo "A match was found.";
} else {
echo "correo valido.";
}
}
?>
</body>
</html>
If the form cannot be sent, then I would assume because the form declaration lacks the action= URL. Normally you would write:
<form method="POST" action="index.php">
The second thing is the email regex. It misses the typical valid characters, but also doesn't use correct PCRE delimiters. Rather use this instead of a manual preg_match $mailFilter:
if (filter_var($var2, FILTER_VALIDATE_EMAIL)) {

Categories