Div class inside echo PHP - php

I try to put div class in the echo but it does not work really well. The coding is for to change the login button to the username button after user login. The username button will have the drop-down which is the div class. Other things are work well in this coding except for the div class drop-down. Is there another way to put the div class in the echo? Any thought??
This is before login
What I expected after Login
What I get after Login
Below is my coding:
<div class="header-right">
<?php
if (isset($_SESSION['login_user'])) {
echo '<a class="active" ><img src="image/user.png" width="22" height="22"> '.$login_session.' <img src="image/drop.png" width="20" height="20" > </a>';
echo '<div class="box dropdown">
<ul>
<a "">edit</a>
<a "">delete</a>
<a id="logout" href="logout.php">Log Out</a>
</ul>
</div>';
} else {
echo '<a class="active" href="login.php"><img src="image/lock.png" width="20" height="20"> Login</a>' ;
}
?>
</div>

I use another way to write down this. Let me know if you have any question. I fixed some attribute missing into your anchors <a> and list some <li> elements into your <ul> element as well.
<div class="header-right">
<?php if (isset($_SESSION['login_user'])) { ?>
<a class="active" >
<img src="image/user.png" width="22" height="22">
<?= $login_session ?>
<img src="image/drop.png" width="20" height="20" >
</a>
<div class="box dropdown">
<ul>
<li>edit</li>
<li>delete</li>
<li><a id="logout" href="logout.php">Log Out</a></li>
</ul>
</div>
<?php } else { ?>
<a class="active" href="login.php"><img src="image/lock.png" width="20" height="20"> Login</a>
<?php } ?>
</div>

You may put your code in the way like below and I found out your <ul> is missing <li>.
<div class="header-right">
<?php if(isset($_SESSION['login_user'])): ?>
<!-- Login User (HTML) -->
<?php else: ?>
<!-- Not Login User (HTML) -->
<?php endif; ?>
</div>

<?php if (isset($_SESSION['login_user'])) { ?>
<a class="active" >
<img src="image/user.png" width="22" height="22">
<?php $login_session ?>
<img src="image/drop.png" width="20" height="20" >
</a>
<div class="box dropdown">
<ul>
<li>edit</li>
<li>delete</li>
<li><a id="logout" href="logout.php">Log Out</a></li>
</ul>
</div>
<?php } else { ?>
<a class="active" href="login.php"><img src="image/lock.png" width="20" height="20"> Login</a>
<?php } ?>
</div>

Related

Trying to make a bootstrap carousel slide dynamic with a database using php

The below html just shows the images one by one down the page and not in a slideshow. I've put the images in the database giving each one their own column. Is this wrong? How can I make the images be a slideshow. Thanks for helping.
<div id="lodgeGallery" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#lodgeGalleryl" data-slide-to="0" class="active"></li>
<li data-target="#lodgeGalleryl" data-slide-to="1"></li>
<li data-target="#lodgeGalleryl" data-slide-to="2"></li>
<li data-target="#lodgeGalleryl" data-slide-to="3"></li>
<li data-target="#lodgeGalleryl" data-slide-to="4"></li>
<li data-target="#lodgeGalleryl" data-slide-to="5"></li>
<li data-target="#lodgeGalleryl" data-slide-to="6"></li>
<li data-target="#lodgeGalleryl" data-slide-to="7"></li>
<li data-target="#lodgeGalleryl" data-slide-to="8"></li>
<li data-target="#lodgeGalleryl" data-slide-to="9"></li>
<li data-target="#lodgeGalleryl" data-slide-to="10"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<?php
//<img src="img/img1.jpg" alt="">
echo "<img src='img/$galleryImg1'";
?>
</div>
<div class="item">
<?php
//<img src="img/img2.JPG" alt="">
echo "<img src='img/$galleryImg2'";
?>
</div>
<div class="item">
<?php
//<img src="img/img3.png" alt="">
echo "<img src='img/$galleryImg3'";
?>
</div>
<div class="item">
<?php
//<img src="img/img4.png" alt="">
echo "<img src='img/$galleryImg4'";
?>
</div>
<div class="item">
<?php
//<img src="img/img5.jpg" alt="">
echo "<img src='img/$galleryImg5' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img6.jpg" alt="">
echo "<img src='img/$galleryImg6' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img7.jpg" alt="">
echo "<img src='img/$galleryImg7' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img8.jpg" alt="">
echo "<img src='img/$galleryImg8'";
?>
</div>
<div class="item">
<?php
//<img src="img/img9.jpg" alt="">
echo "<img src='img/$galleryImg9' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img10.JPG" alt="">
echo "<img src='img/$galleryImg10' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img11.jpg" alt="">
echo "<img src='img/$galleryImg11' ";
?>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#lodgeGallery" role="button" data- slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#lodgeGallery" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Seeing your code, i think you have ne error in the syntax of how you echo the image from server.
It should be
"<img src ='img/'.$galleryImg1.'"
For pulling the images from a database:
2 columns: RowID & ImageURL
select RowID, Image URL from db
$sql = ("SELECT RowID,ImageURL FROM db.dbo.table");
$res = odbc_exec($dbConn,$sql);
while ($images = odbc_fetch_array($res)){
echo "<img src="img/".$images."'/>";
}

how to set html layout in loop

I want to set a html layout view in a loop for multiple categories. My html code is here...there were many of categories came from (wp-admin) woocommerce. Given code is layout of how to show my categories in home.php so i want to add more categories in home.php through loop.Thanks
My html code is So far...
<div class="selected-products-wrapper clearfix">
<div class="category-list">
<span class="category-main" style="background-color: #5D973E">
<div class="category-main_logo">
<img src="" alt="" class="v-middle"></div>
<span class="category-main-title">
<a href="<?php
echo get_term_link($cat->slug, 'product_cat');
?>">
<?php echo $cat->name; ?></a></span>
<div class="category-main-yakataheader"><img src=""></div>
</span>
<ul class="sub-category-list">
<li><?php echo $sub_category ->name; ?></li>
</ul>
View all
</div>
<div class="images-list">
<a href="" class="large-img">
<img src="" alt="Confectionery"
class="v-middle lazy-img" height="351" width="290">
</a>
<span class="small-img-block">
<a href="">
<img src="" alt="Fruits & Veggies"
class="v-middle lazy-img" height="175" width="171">
</a>
<a href="">
<img src="" alt="Noodles"
class="v-middle lazy-img" height="175" width="171">
</a>
</span>
<span class="center_img-block">
<a href="">
<img src="" alt="Oats"
class="v-middle lazy-img" height="175" width="344">
</a>
<a href="">
<img src="" alt="Ofada"
class="v-middle lazy-img" height="175" width="344">
</a>
</span>
<span class="small-img-block last-img-block">
<a href="">
<img src="" alt="Cooking Oils"
class="v-middle lazy-img" height="175" width="171">
</a>
<a href="">
<img src="" alt="Seasoning"
class="v-middle lazy-img" height="175" width="171">
</a>
</span>
</div>
<div class="alt-images-block">
Fruits & Veggies
Noodles
Cooking Oils
Seasoning
</div>
</div>
you need to create a custom php function with the data you want repeat.
e.g.
<?php
function repeat_category(){ ?>
//your html code you want to repeat goes here.
<?php } ?>
Then you can just use
<?php
repeat_category();
?>
Wherever you want your html code to appear.

Yii2 Display Recently Added Members

I have a "Latest Staff Members" panel where it should display my recently added users. All I have is a static display of these users:
<div class="box box-danger <?= !User::isBizAdmin() ? 'hidden' : '' ?>">
<div class="box-header with-border">
<h3 class="box-title">Latest Staff Members</h3>
<div class="box-tools pull-right">
<span class="label label-danger">8 New Members</span>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body no-padding">
<ul class="users-list clearfix">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/frank_man-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Alexander Pierce</a>
<span class="users-list-date">Today</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/Ben_man-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Norman</a>
<span class="users-list-date">Yesterday</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/iri_girl_face-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Jane</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/Jay_man-128.png" alt="User Image"/>
<a class="users-list-name" href="#">John</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/Fred_man-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Alexander</a>
<span class="users-list-date">13 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/michela_face_young-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Sarah</a>
<span class="users-list-date">14 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/carla_girl-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Nora</a>
<span class="users-list-date">15 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/hena_woman_face-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Nadia</a>
<span class="users-list-date">15 Jan</span>
</li>
</ul><!-- /.users-list -->
</div><!-- /.box-body -->
<div class="box-footer text-center">
View All Users
</div><!-- /.box-footer -->
</div>
Something like that. Now, in the user table in my database, I added a date_added column and I manually put dates in row.
Do I loop the data? Or use a widget? I don't know how else I should implement this.
EDIT
My controller:
public function actionIndex()
{
if(Yii::$app->user->isGuest){
return $this->render('../site/index');
}
else{
$latestStaffMembers = User::find()->orderBy(['date_added' => SORT_DESC])->limit(8);
return $this->render('dashboard', [
'latestStaffMembers' => $latestStaffMembers,
]);
}
}
In my view:
<?php foreach ($latestStaffMembers as $user) { ?>
<li>
<img src="<?php echo $user->avatar; ?>" alt="User Image"/>
<?= $user->username ?>
<span ><?= $user->date_added ?></span>
</li>
<?php } ?>
Then I get this error:
Trying to get property of non-object
I tried var-dumping $user and it says null.
I'm not sure if this is what you want. I hope it helps somehow.
In your controller action:
$latestStaffMembers = User::find()->orderBy(['date_added' => SORT_DESC])->limit(8)->all();
return $this->render('some-view-file', [
'latestStaffMembers' => $latestStaffMembers,
]);
In your view:
<?php foreach ($latestStaffMembers as $user) { ?>
<li>
<img src="<?= $user->imagePath ?>" alt="User Image"/>
<a class="users-list-name" href="#"><?= $user->name ?></a>
<span class="users-list-date"><?= Yii::$app->formatter->asDate($user->dateAdded, 'd m'); ?></span>
</li>
<?php } ?>
Btw: I saw !User::isBizAdmin() in your code. Is it yours? I would not just hide the list if it is important that only admins may see that. Just don't print it if user is not admin.

Bootstrap 3 dropdown button height and search

I'm having a little problem with bootstrap 3. I tried for the whole day to solve and searched everything in internet even used FireBug but didn't help.
The button of dropdown is higher than the menu and its going outside the menu.
<ul class="nav navbar-nav navbar-right">
<?php if(!is_array(session( 'thisUser'))): ?>
<span class="glyphicon glyphicon-user"></span> <?php echo T('Register') ?>
<span class="glyphicon glyphicon-log-in"></span> <?php echo T('Login') ?>
<?php else: ?>
<li class="dropdown">
<a class="dropdown-toggle text-notransform" data-toggle="dropdown" href="#">
<img src="<?php echo URL(session_get('preferences', 'avatar')) ?>" width="24px">
<?php echo session_get('thisUser', 'username') ?> <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="navbar-login">
<div class="row">
<div class="col-lg-4">
<p class="text-center">
<img src="<?php echo URL(session_get('preferences', 'avatar')) ?>" width="200px">
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong><?php echo session_get('thisUser', 'username') ?></strong>
</p>
<p class="text-left small">
<?php echo session_get( 'thisUser', 'email') ?>
</p>
<br />
<p class="text-left">
<a href="<?php echo URL(T('setting-slug', 'settings')) ?>" class="btn btn-primary btn-block btn-sm">
<?php echo T( 'Settings') ?>
</a>
<?php echo event( 'user_menu', '') ?>
</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
<a href="<?php echo URL('logout') ?>" class="btn btn-danger btn-block">
<?php echo T( 'Logout') ?>
</a>
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<?php endif; ?>
</ul>
My second problem is with the bootstrap search I want the button search to be next to the search text not bellow it. The code is PHP function:
function search_box($a){
$return .= Form::open(array('method'=>'GET', 'action'=>URL(T('directory'))));
$return .= Form::input('q', R('q'), array('class'=>'form-control input-md', 'style'=>'margin-bottom:5px','placeholder'=>T('Type smth to search')));
$return .= '<button type="submit" class="btn btn-block btn-md btn-primary"><i class="icon-find"></i> '.T('Search').'</button>';
$return .= Form::close();
$return .= '<div class="clearfix"><br /></div>';
return $return;
}
(For image of the search is the same as the above link)
Can someone tell me how to fix this. Thanks in advance.
On your searchbox($a) function, try removing btn-md class from button.

How to integrate PHP code into HTML Carousel code?

Can anybody help with the below please. Im having a bit of difficulty getting my head around how to get it to work.
The code is for a thumbnail carousel.
Here is the HTML
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three">
</div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four">
</div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five">
</div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--thumbnails-->
<div class="row hidden-xs" id="slider-thumbs">
<ul class="hide-bullets">
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/170x100&text=one">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-1">
<img src="http://placehold.it/170x100&text=two">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-2">
<img src="http://placehold.it/170x100&text=three">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-3">
<img src="http://placehold.it/170x100&text=four">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-4">
<img src="http://placehold.it/170x100&text=five">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-5">
<img src="http://placehold.it/170x100&text=six">
</a>
</li>
</ul>
</div>
The above code works fine, however I am trying to integrate the below PHP code so that the slider has dynamic images with thumbnails.
Here is the PHP code to display the images:
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
}
}
?>
If anyone could help or point me in the right direction, it would be appreciated!
Try this. Note where code starts and ends i didn't copy all of your block:
<div class="carousel-inner">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $key => $image) {
$active = $key == 0 ? 'active' : '';
echo '<div class="<?php echo $active;?> item" data-slide-number="<?php echo $key; ?>">';
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
echo '</div>'; }
}
?>
</div>
Explanation. Showing the images is not only to print img src=..., so you have to see what html block to put in the foreach loop so it be showed as the html you posted. $key is the index that you need to mark the slides. $active shows which slide is active, so you need to set it only ones (in our case when $key is 0)
Cheers.

Categories