[英]Change navbar in bootstrap if user login
I have a standard menu, including an option for "logging" in and "create user". 我有一个标准菜单,其中包括“登录”和“创建用户”的选项。 What I want is that when either you create a user or you loging the whole navbar menu to change, say, "My user's page" and "logout" instead, how can I do it? 我想要的是,当您创建用户或登录整个导航栏菜单进行更改时,例如说“我的用户页面”和“注销”,我该怎么做?
<div id="menu">
<nav class="navbar">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"> </span> Home</a></li>
<li><a href="#">Descuentos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories<span class="caret"/></a>
<ul class="dropdown-menu">
<li><a href="#">Cat A</a></li>
<li><a href="#" >Cat B</a></li>
<li><a href="#">Cat C</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
<ul class="dropdown-menu" role="menu">
<li>
<form class="form-horizontal" role="form" action="tienda.php" method="POST">
<div class="form-group">
<label class="control-label col-md-4" for="nombre">User:</label>
<div class="col-md-8">
<input type="text" class="form-control" name="loginUser" required>
</div>
<label class="control-label col-md-4" for="nombre">Pass:</label>
<div class="col-md-8">
<input type="password" class="form-control" name="loginPass" required> <br>
</div>
<div class="col-md-5"></div>
<button type="submit" class="btn btn-default col-md-5">Log In</button>
</div>
</form>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
Basically, change 基本上,改变
<ul class="nav navbar-nav navbar-right">
<li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
<ul class="dropdown-menu" role="menu">
<li>
<form class="form-horizontal" role="form" action="tienda.php" method="POST">
<div class="form-group">
<label class="control-label col-md-4" for="nombre">User:</label>
<div class="col-md-8">
<input type="text" class="form-control" name="loginUser" required>
</div>
<label class="control-label col-md-4" for="nombre">Pass:</label>
<div class="col-md-8">
<input type="password" class="form-control" name="loginPass" required> <br>
</div>
<div class="col-md-5"></div>
<button type="submit" class="btn btn-default col-md-5">Log In</button>
</div>
</form>
</li>
</ul>
</li>
</ul>
to this: 对此:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-user"></span>Nombre USUARIO</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Mi página</a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Carrito</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
What's the best way to do this? 最好的方法是什么?
This is how I usually do it: 这是我通常的做法:
<?php if($logged_id){ include 'menu_authenticated.php'; } else{ include 'menu_unauthenticated.php'; } ?>
And of course, those files will have their menus respectively //menu_unauthenticated.php 当然,这些文件将分别具有其菜单//menu_unauthenticated.php
<ul class="nav navbar-nav navbar-right"> <li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a> <ul class="dropdown-menu" role="menu"> <li> <form class="form-horizontal" role="form" action="tienda.php" method="POST"> <div class="form-group"> <label class="control-label col-md-4" for="nombre">User:</label> <div class="col-md-8"> <input type="text" class="form-control" name="loginUser" required> </div> <label class="control-label col-md-4" for="nombre">Pass:</label> <div class="col-md-8"> <input type="password" class="form-control" name="loginPass" required> <br> </div> <div class="col-md-5"></div> <button type="submit" class="btn btn-default col-md-5">Log In</button> </div> </form> </li> </ul> </li> </ul>
//menu_authenticated.php //menu_authenticated.php
<ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-user"></span>Nombre USUARIO</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Mi página</a></li> <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Carrito</a></li> </ul> </li> <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li> </ul>
Not saying this is 'the way' to do it. 并不是说这是“方法”。 But it's one option :) That option includes creating some PHP functions. 但这是一个选择:)该选择包括创建一些PHP函数。 One that outputs the 'logged out' meny, and one that outputs the 'logged in' meny. 一种输出“已注销”菜单,另一种输出“已登录”菜单。
And then simply instead of having the meny you would have this code: 然后,您只需拥有下面的代码,而不必花很多精力:
<?php
if($loggedIn)
renderLoggedInMeny();
else
renderLoggedOutMeny();
?>
These functions could look something like this: 这些功能可能看起来像这样:
function renderLoggedInMeny() {
echo <<<EOT
<ul class="nav navbar-nav navbar-right">
<li... [and so on]
EOT;
}
For the code below I'll pretend that you have a isLogged()
function that returns true if a user is logged in and false if he isn't. 对于下面的代码,我假设您有一个isLogged()
函数,如果用户已登录,则该函数返回true;否则,返回false。 This is what you could do in your navbar code : 这是您可以在导航栏中执行的操作:
<?php if(isLogged()): ?>
<li><a href="profile.php">Profile</a></li>
<li><a href="logout.php">Logout</a></li>
<?php else: ?>
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
<?php endif; ?>
Of course the code in between the PHP conditions can change, you can put your ul
elements directly instead of only the li
like I did - it's only for demonstration's purpose. 当然,PHP条件之间的代码可以更改,您可以直接放置ul
元素,而不是像我一样仅放置li
-仅用于演示目的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.