Html link <a> not wrapping <div> element properly - php

I am currently writing a php website where I encountered a problem where the html link will not wrap div element properly. I have not found an answer to my problem yet, so I appreciate if someone can help me.
This is the php code I had written:
ECHO '<a target="_blank" href="' . $row["link"] . '">';
ECHO '<div class="header-box">';
ECHO '<div class="detail">';
ECHO '<p class="title">' . $row["title"] . '</p>';
$user_data = get_user_data($row["owner_id"]);
ECHO '<p class="author">This article is shared by <a class="user" href="./member.php?action=profile&id='.$user_data["id"].'">' . $user_data["firstname"] . " " . $user_data["lastname"] . '</a> on '.date("d F Y", strtotime($row["posted"])).'.</p>';
ECHO '</div>';
ECHO '<div class="good">';
ECHO '<p id="number">'.$row["good"].'</p>';
ECHO '<p id="icon"><i class="fa fa-thumbs-o-up"></i>Useful</p>';
ECHO '</div>';
ECHO '<div class="bad">';
ECHO '<p id="number">'.$row["bad"].'</p>';
ECHO '<p id="icon"><i class="fa fa-thumbs-o-down"></i>Not Useful</p>';
ECHO '</div>';
ECHO '</div>';
ECHO '</a>';
However, the outcome of the php code in browser are as followed:
<div class="header-box">
<a target="_blank" href="http://designinstruct.com/tools-basics/5-easy-steps-optimize-your-images-photoshop/"></a>
<div class="detail">
<a target="_blank" href="http://designinstruct.com/tools-basics/5-easy-steps-optimize-your-images-photoshop/">
<p class="title">5 Easy Steps to Optimize Your Images in Photoshop</p>
</a>
<p class="author"><a target="_blank" href="http://designinstruct.com/tools-basics/5-easy-steps-optimize-your-images-photoshop/">This article is shared by </a><a class="user" href="./member.php?action=profile&id=2">demoname demo</a> on 01 January 1970.</p>
</div>
<div class="good"><p id="number">1</p><p id="icon"><i class="fa fa-thumbs-o-up"></i>Useful</p></div>
<div class="bad"><p id="number">2333</p><p id="icon"><i class="fa fa-thumbs-o-down"></i>Not Useful</p>
</div></div>
I am getting a little bit frustrated trying to fix the problem because I can't figure out what is going wrong? The other part of code written with html link wrapping the div are working fine. Can anyone help me out? Thanks.

So the question was solved by Rick Hitchcock for pointing out my nesting issue.
So the answer is not nesting an tag within another tag.

After seeing the refactored code, I realized you have a link inside another link. The browser doesn't know what to do with this, so it closes them both down as small as they can.
Try using html inside your .php file, and just using tags where you have to use php. For Example:
close the php with a ?>, then open it each time you need it by wrapping your code in
<?php //php code goes here ?>
Here's your code refactored:
<a target="_blank" href="<?php echo $row["link"] ?>">
<div class="header-box">
<div class="detail">
<p class="title"><?php echo $row["title"] ?></p>
<?php $user_data = get_user_data($row["owner_id"]); ?>
<p class="author">This article is shared by <a class="user" href="./member.php?action=profile&id=<?php echo $user_data["id"] ?>"><?php echo $user_data["firstname"] ?> <?php echo $user_data["lastname"] ?></a> on <?php echo date("d F Y", strtotime($row["posted"])) ?></p>
</div>
<div class="good">
<p id="number"><?php echo $row["good"] ?></p>
<p id="icon"><i class="fa fa-thumbs-o-up"></i>Useful</p>
</div>
<div class="bad">
<p id="number"><?php echo $row["bad"] ?></p>
<p id="icon"><i class="fa fa-thumbs-o-down"></i>Not Useful</p>
</div>
</div>
</a>

Why are you using pure PHP for this? Its not necessary?

Related

HTML inside PHP not working

I have been trying to put HTML inside PHP for a while, but I could never get it to work. Instead I have had to use this
<?php //code in here
while($record = mysql_fetch_array($myData)){
?>
//HTML code
<?php
}
?>
and it has worked for a while, but now I'm implementing a search function to the page, and I need all HTML to be dynamically generated, or the page will be displayed twice. Therefore, i'm in need of some help. This is the old-new code I have at the moment.
<?php
$sql = "SELECT * FROM `LISTINGS` ORDER BY YA DESC $limit";
$myData = mysql_query($sql,$con);
while($record = mysql_fetch_array($myData)){
//this is what i have manage to get done
echo '<div class="cards-row">';
echo '<div class="card-row">';
echo '<div class="card-row-inner">';
echo '<div class="card-row-image" data-background-image="http://domains/$record["IMAGENAME"].jpg">';
echo '</div>';
echo '<div class="card-row-body">';
echo '<h2 class="card-row-title">';
echo '<a href="http://domain/listing-detail.php?ID='; $record['ID']echo'">'
echo '</a>';
echo '</h2>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
?>
Static/dynamic code
<div class="card-row">
<div class="card-row-inner">
<div class="card-row-image" data-background-image="http://www.domain/<?php echo $record['IMAGENAME'];?>.jpg" width="150" height="180" ">
</div><!-- /.card-row-image -->
<div class="card-row-body">
<h2 class="card-row-title">
<a href="http://www.domain/listing-detail.php?ID=<?php echo $record['ID'];?>"> <?php custom_echo ($record['TITLE'], 80); ?><?php if($record['STREET']===' '){ echo "Not provided" ;}?>
</a>
</h2>
<div class="card-row-content"><?php custom_echo ($record['DESCRIPTION'], 250); ?><?php if($record['STREET']===' '){ echo "Not provided" ;}?></div><!-- /.card-row-content -->
</div><!-- /.card-row-body -->
<div class="card-row-properties">
<dl>
<dd></dd><dt>Visit Website</dt>
<dd></dd><dt>More Info</dt>
<dd>Added</dd><dt><?php echo $record['YA'];?>/<?php echo $record['MU'];?>/<?php echo $record['DU'];?></dt>
<dd>Viewed</dd><dt>Visited</dt>
</dl>
</div><!-- /.card-row-properties -->
</div><!-- /.card-row-inner -->
</div><!-- /.card-row -->
</div><!-- /.cards-row -->
<br/>
<?php
}
?>
My goal is to put all the code above inside
while($record = mysql_fetch_array($myData)){
Although this is not the best way when it comes to readability and maintainability, the way I usually process HTML with PHP is by echoing it.
echo "<div style=\"color:red\">test</div>";
If I need to add PHP content then
$myVar = "test";
echo "<div style=\"color:red\">" . $myVar . "</div>";
And if I already have some HTML code I'd like to escape, I can easily do so using Notepad++'s replace all function by replacing " with \"
You have an error in line 15
echo '<a href="http://domain/listing-detail.php?ID='; $record['ID']echo'">'
Change it to:
echo '<a href="http://domain/listing-detail.php?ID='.$record['ID'].'">';
Also, are you saving it in ".php" extension?.
After the last echo, you forget a '}'.
Finally, remove your mysql_ function and use mysqli_ or PDO, if you're on PHP7.

Output HTML tags in PHP

The below code outputs the correct result:
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Messages</li>
<li>Logout</li>
<li>Send Friend Requests</li>
<li>Accept Friend Requests</li>
</ul>
</div>
</div>
<div class="callout large primary">
<div class="row column text-center">
<h1>Home Page</h1>
<h2 class="subheader">View Neighborhood, Block, and Friend Messages</h2>
</div>
</div>
But, when I copy these tags in the PHP tags and place echo in front of each line as shown below, the output is incorrect.
echo '<div class="top-bar">';
echo '<div class="top-bar-left">';
echo '<ul class="menu">';
echo '<li class="menu-text">Messages</li>';
echo '<li>Logout</li>';
echo '<li>Send Friend Requests</li>';
echo '<li>Accept Friend Requests</li>';
echo '</ul>';
echo '</div>';
echo '</div>';
I see you are new into PHP.
This should work, but the PHP code will only run if you open the tags, like this:
<?php
echo '<div class="top-bar">';
echo '<div class="top-bar-left">';
echo '<ul class="menu">';
echo '<li class="menu-text">Messages</li>';
echo '<li>Logout</li>';
echo '<li>Send Friend Requests</li>';
echo '<li>Accept Friend Requests</li>';
echo '</ul>';
echo '</div>';
echo '</div>';
?>
Remember that the file extension must be PHP or your web server won't recognize it as a PHP program.
echo '
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Messages</li>
<li>Logout</li>
<li>Send Friend Requests</li>
<li>Accept Friend Requests</li>
</ul>
</div>
</div>';
That is a lot cleaner.
Also, is the file you are using a .php or .html file? If you use .html, it will never work!

Too many PHP if/else statements for logged/not-logged-in users on web pages

So I have a lot of dynamic PHP webpages in my current project and am wondering how to deal with logged in/not logged in users. Various components throughout the pages are switched for logged in users. Some are entire divs, some just a couple words here and there. Some pages may ultimately have 10+ components like this.
I have previously read that having PHP sprinkled throughout a page can degrade performance, as well as echoing HTML in php, both of which are frequent in my project because of this issue.
I am wondering if there is some trick here to avoiding this?
Here is one example, which shows that some of the lengthiness of some embedded HTML scripts:
<?php
if (isset($_SESSION['sess_username']) and $_SESSION['sess_username'] != '') {
echo '<div class="logged-user">';
echo '<div class="btn-group">';
echo '<a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown">';
echo '<img src="assets/img/user-avatar.png" alt="User Avatar" />';
echo '<span class="name">' . $sess_username . '</span>';
echo '<span class="caret"></span>';
echo '</a>';
echo '<ul class="dropdown-menu" role="menu">';
echo '<li>';
echo '<a href="#">';
echo '<i class="fa fa-user"></i>';
echo '<span class="text">Profile</span>';
echo '</a>';
echo '</li>';
echo '<li>';
echo '<a href="#">';
echo '<i class="fa fa-cog"></i>';
echo '<span class="text">Settings</span>';
echo '</a>';
echo '</li>';
echo '<li>';
echo '<a href="#">';
echo '<i class="fa fa-power-off"></i>';
echo '<span class="text">Logout</span>';
echo '</a>';
echo '</li>';
echo '</ul>';
echo '</div>';
echo '</div>';
} else {
echo '<p><span>Log In</span></li></p>';
}
?>
One option I thought of as far as performance would be essentially having code for two pages, and just running an if/else at the top of the page, and then direct the user to the proper page. This would avoid having as many if/else statements throughout the page, although it wouldn't necessarily reduce the amount of PHP sprinkled in the page.
Sincere thanks for any help!
Also, if anyone knows how to easily format code to pull-left in SO, I would love to know. I am sure it looks pretty crappy in my posts.
You can just close the PHP tags like so:
<?php if (isset($_SESSION['sess_username']) and $_SESSION['sess_username'] != ''): ?>
<div class="logged-user">
.. more html ..
</div>
<?php endif; ?>
First, you don't need to echo the html.
<?php if (isset($_SESSION['sess_username']) and $_SESSION['sess_username'] != '') { ?>
<div class="logged-user">
<div class="btn-group">
<a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
<img src="assets/img/user-avatar.png" alt="User Avatar" />
<span class="name"><?php echo $sess_username;?></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="fa fa-user"></i>
<span class="text">Profile</span>
</a>
</li> ... </ul>
</div>
</div>
<?php } else { ?>
<p><span>Log In</span></li></p>
<?php } ?>
Second, if you have several pages with several content areas accessible only to logged in users, can you redesign the site and simply load a logged in version of the page with the proper components? Another option might be to set an html class as a variable.
Ex:
if (isset($_SESSION['sess_username']) and $_SESSION['sess_username'] != '') {
//user is logged in, set authorized variable:
$component_authorized = 'show';
} else {
$component_authorized = 'hide';
}
..
<div id="some_content">
<div id="everyone_see_content">...</div>
<div id="only_auth_user" class="<?php echo $component_authorized;?>"><!-- Auth User content --></div>
<div class="other_stuff">
<!--everyone sees here-->
<ul class="my_class <?php $component_authorized; ?>">
<!-- Only Auth User Sees this list-->
</ul>
</div>
Then just make sure your css has the .hide {display: none;}
The last recommendation is some java use which is a bit lengthy and unnecessary in my opinion.

Best practice when echo repeated code

I have a question that bothers me for a long time. Lets say i have a code with several nested div's and span's. All these compose a square with an image inside.
echo '<div> <div> <div> <div> <span> <img src='.$image.'> </span></div></div></div>';
Only that this code has about 15 rows.
From what i know when echo-ing the results from db in that form i put in the loop the whole html code. It looks clumsy this way.
It is there a better practice ?
foreach ($query->result() as $row)
{
$row->address_link=strtolower($row->network);
echo '<li class="col-md-3 isotope-item '.$row->network.'">';
echo '<div class="portfolio-item img-thumbnail">';
echo '<table border="0"><tr>';
echo '<a href="order/'.$row->address_link.'/'.$row->value.'" class="thumb-info">';
echo '<img alt="" class="img-responsive" src="img/'.$row->address_link.'.png">';
echo '<span class="thumb-info-title">';
echo '<span class="thumb-info-inner">'.$row->value.' Euro</span>';
echo '</span>';
echo '<span class="thumb-info-action">';
echo '<span title="Universal" href="order/'.$row->address_link.'/'.$row->value.'" class="thumb-info-action-icon"><i class="icon icon-link"></i></span>';
echo '</span>';
echo '</a>';
echo '</div>';
echo '</tr><tr>';
echo '<span class="thumb-info-type">'.$row->value*$row->rate.' Eur</span>';
echo '</tr></table>';
echo '</li>';
}
If you are new to php you can define a function for this:
function wrapImage($src){
return '<div> <div> <div> <div> <span> <img src='.$src.'> </span></div></div></div>';
}
And just use echo wrapImage($src) where you need it with different params.
EDIT: consider following way of presenting the data:
<?php
$query = 'select * from Unicorns';
foreach ($query->result() as $row){
$row->address_link=strtolower($row->network);
?>
<!-- html -->
<li class="col-md-3 isotope-item <?php echo $row->network; ?>">
<div class="portfolio-item img-thumbnail">
<table border="0"><tr>
<a href="order/<?php echo $row->address_link.'/'.$row->value; ?>" class="thumb-info">
<img alt="" class="img-responsive" src="img/'.$row->address_link.'.png">
<span class="thumb-info-title">
<span class="thumb-info-inner"><?php echo $row->value; ?> Euro</span>
</span>
<span class="thumb-info-action">
<span title="Universal" href="order/<?php echo $row->address_link.'/'.$row->value ?>" class="thumb-info-action-icon"><i class="icon icon-link"></i></span>
</span>
</a>
</div>
</tr><tr>
<span class="thumb-info-type"><?php echo ($row->value*$row->rate); ?> Eur</span>
</tr></table>
</li>
<!-- /html -->
<?php } ?>
It is called spaghetti code .. and it is NOT the best practice but is better then your example in case the HTML is more then the PHP data.
first of all, dont use echo in loops (optimalization), store your output in variable and print it only once.
Repeated code can be stored inside function
function square($image){
return '<div> <div> <div> <div> <span> <img src='.$image.'> </span></div></div></div>';
}
$output = '';
while ($loop){
$output .= square($image);
}
echo $output

Syntax help with echo html and variables

I have this code (see below) that I'm having trouble echoing the variables out. On the 5th line is an echo, within that echo is a load of html (which I've escaped the quotation marks) and a load of variables. I can't get the variables to echo out within the main echo.
Update:
Also within there is an onclick that needs to be taken into account.
<?php
if(
in_array("Branding", get_field('categories')) && $grid_title == "Branding"
){
echo "
<div class=\"grid-box\" onclick=\"location.href='<?php echo get_page_link($post->ID) ?>';\" style=\"cursor: pointer;\">
<div class=\"phase-1\">
<img class=\"grid-image\" src=\"<?php echo $fields->thumb_image; ?>\" alt=\"<?php echo $fields->company_name; ?>\" height=\"152\" width=\"210\" />
<div class=\"grid-heading\">
<h2><?php echo $fields->company_name; ?></h2>
<h3><?php echo implode(', ',get_field('categories'));?></h3>
</div>
</div>
<div class=\"phase-2\">
<div class=\"grid-info\">
<h4><?php echo $fields->project_name; ?></h4>
<p><?php echo $fields->description; ?></p>
</div>
<div class=\"grid-heading-hover\">
<h2><?php echo $fields->company_name; ?></h2>
<h3><?php echo implode(', ',get_field('categories'));?></h3>
</div>
</div>
</div>
";
}
?>
You can't use echo within an echo, you just need to concatenate your strings properly like so:
$Content = "
<div class=\"grid-box\" onclick=\"location.href='" . get_page_link($post->ID). "';\" style=\"cursor: pointer;\">
<div class=\"phase-1\">
<img class=\"grid-image\" src=\"" . $fields->thumb_image . "\" alt=\"" . $fields->company_name. "\" height=\"152\" width=\"210\" />
<div class=\"grid-heading\">
<h2> " . $fields->company_name . "</h2>
<h3>" . implode(', ',get_field('categories')) . "</h3>
</div>
</div>
<div class=\"phase-2\">
<div class=\"grid-info\">
<h4>" . $fields->project_name . "</h4>
<p>" . $fields->description . "</p>
</div>
<div class=\"grid-heading-hover\">
<h2>" . $fields->company_name . "</h2>
<h3>" . implode(', ',get_field('categories')). "</h3>
</div>
</div>
</div>";
echo $Content;
You seem to have a little misunderstanding here.
In PHP you can output HTML either by
writing simple HTML outside <?php...?>, and possibly inserting some PHP code inside
using something like echo / print to output a PHP string which includes HTML
But you cannot mix up the two.
So this is not good:
echo "... src=\"<?php echo $fields->thumb_image; ?>\" ...";
Because this is a string, and in a string you can not open a <?php section. You should do something like this instead:
echo "... src=\"{$fields->thumb_image}\" ...";
which is one of the cool ways to insert PHP variables inside a string.
Something like this
echo " ... <?php ... ?> ...";
will not work.
Instead you could "break in and out" of php, like:
...
?>
<div class="grid-box" onclick="location.href='<?php echo get_page_link($post->ID) ?>';" style="cursor: pointer;">
<div class="phase-1"> ... <?php
Or use s/printf
printf(
'<div class="grid-box" onclick="location.href='%s';" style="cursor: pointer;">',
get_page_link($post->ID)
);
Or use string concatenation:
echo "html ...", get_page_link($post->ID), "some more html...";
Or use some kind of templating code.
Just close the php tag after the if and open it before the closing semi-colon.
if(
in_array("Branding", get_field('categories')) && $grid_title == "Branding"
){
?>
<div class="grid-box" onclick="location.href='<?php echo get_page_link($post->ID) ?>';" style="cursor: pointer;">
<div class="phase-1">
<img class="grid-image" src="<?php echo $fields->thumb_image; ?>" alt="<?php echo $fields->company_name; ?>" height="152" width="210" />
<div class="grid-heading">
<h2><?php echo $fields->company_name; ?></h2>
<h3><?php echo implode(', ',get_field('categories'));?></h3>
</div>
</div>
<div class="phase-2">
<div class="grid-info">
<h4><?php echo $fields->project_name; ?></h4>
<p><?php echo $fields->description; ?></p>
</div>
<div class="grid-heading-hover">
<h2><?php echo $fields->company_name; ?></h2>
<h3><?php echo implode(', ',get_field('categories'));?></h3>
</div>
</div>
</div>
<?php
}
?>

Categories