skip to Main Content

I want to hide login and sign up box and button after user login. I have tried but it won’t work. Here are my codes

header.php

<!DOCTYPE HTML>
<html>
<head>
<title>My Play a Entertainment Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<!--start-smoth-scrolling-->
</head>
  <body>

    <?php 
session_start();
if(!isset($_SESSION["sess_email"])){
?>

 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <div class="top-search">
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                    <input type="submit" value=" ">
                </form>
            </div>
            <div class="header-top-right">
                <div class="file">
                    <a href="upload.html">Upload</a>
                </div>  


    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <div class="top-search">
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                    <input type="submit" value=" ">
                </form>
            </div>
            <div class="header-top-right">
                <div class="file">
                    <a href="upload.html">Upload</a>
                </div>  
                <div class="signin">
                    <a href="#small-dialog2" class="play-icon popup-with-zoom-anim">Sign Up</a>
                    <!-- pop-up-box -->
                                    <script type="text/javascript" src="js/modernizr.custom.min.js"></script>    
                                    <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
                                    <script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
                                    <!--//pop-up-box -->
                                    <div id="small-dialog2" class="mfp-hide">
                                        <h3>Create Account</h3> 
                                        <div class="social-sits">
                                            <div class="facebook-button">
                                                <a href="#">Connect with Facebook</a>
                                            </div>
                                            <div class="chrome-button">
                                                <a href="#">Connect with Google</a>
                                            </div>
                                            <div class="button-bottom">
                                                <p>Already have an account? <a href="#small-dialog" class="play-icon popup-with-zoom-anim">Login</a></p>
                                            </div>
                                        </div>
                                        <div class="signup">

                                             <form action="addnewuser.php" " method="post">
                    <input type="text" name="username" class="email" placeholder="username" autocomplete="off"/>
          <input type="text" name="email" class="email" placeholder="Email" required="required" pattern="([w-.]+@([w-]+.)+[w-]{2,4})?" title="Enter a valid email"/>
            <input type="password" name="password" required="required" pattern=".{6,}" title="Minimum 6 characters required" autocomplete="off"/>
            <input type="text" name="mnumber" class="email" placeholder="Mobile Number" maxlength="10" pattern="[1-9]{1}d{9}" title="Enter a valid mobile number" />
            <br><input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
                                    <br>

            <input type="submit" value="Signup" name="submit" />
          </form>
                                        </div>
                                        <div class="clearfix"> </div>
                                    </div>          

                                    <script>
                                            $(document).ready(function() {
                                            $('.popup-with-zoom-anim').magnificPopup({
                                                type: 'inline',
                                                fixedContentPos: false,
                                                fixedBgPos: true,
                                                overflowY: 'auto',
                                                closeBtnInside: true,
                                                preloader: false,
                                                midClick: true,
                                                removalDelay: 300,
                                                mainClass: 'my-mfp-zoom-in'
                                            });

                                            });
                                    </script>   
                </div>
                <div class="signin">
                    <a href="#small-dialog" class="play-icon popup-with-zoom-anim">Sign In</a>
                    <div id="small-dialog" class="mfp-hide">
                        <h3>Login</h3>
                        <div class="social-sits">
                            <div class="facebook-button">
                                <a href="#">Connect with Facebook</a>
                            </div>
                            <div class="chrome-button">
                                <a href="#">Connect with Google</a>
                            </div>
                            <div class="button-bottom">
                                <p>New account? <a href="#small-dialog2" class="play-icon popup-with-zoom-anim">Signup</a></p>
                            </div>
                        </div>
                        <div class="signup">
                            <form action="login1.php" method="post">
            <input type="text" name="email" class="email" placeholder="Email" required="required" pattern="([w-.]+@([w-]+.)+[w-]{2,4})?" title="Enter a valid email"/>
            <input type="password" name="password" required="required" pattern=".{6,}" title="Minimum 6 characters required" autocomplete="off"/>
            <input type="submit" value="Login" name="submit" />
              </form>

                            <div class="forgot">
                                <a href="#">Forgot password ?</a>
                            </div>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <div class="clearfix"> </div>
      </div>
    </nav>

 <?php } else { ?>

 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <div class="top-search">
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                    <input type="submit" value=" ">
                </form>
            </div>
            <div class="header-top-right">
                <div class="file">
                    <a href="upload.html">Upload</a>
                </div>  

     <?=$_SESSION['sess_email'];?><a href="logout.php" title="Logout">Logout</a>


<?php
}
?>

index.php

<?php include 'includes/header.php';?>
<!-- /header -->

        <div class="col-sm-3 col-md-2 sidebar">
            <div class="top-navigation">
                <div class="t-menu">MENU</div>
                <div class="t-img">
                    <img src="images/lines.png" alt="" />
                </div>
                <div class="clearfix"> </div>
            </div>
                <div class="drop-navigation drop-navigation">
                  <ul class="nav nav-sidebar">
                    <li class="active"><a href="index.html" class="home-icon"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Home</a></li>
                    <li><a href="shows.html" class="user-icon"><span class="glyphicon glyphicon-home glyphicon-blackboard" aria-hidden="true"></span>TV Shows</a></li>
                    <li><a href="history.html" class="sub-icon"><span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>History</a></li>
                    <li><a href="#" class="menu1"><span class="glyphicon glyphicon-film" aria-hidden="true"></span>Movies<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
                        <ul class="cl-effect-2">
                            <li><a href="movies.html">English</a></li>                                             
                            <li><a href="movies.html">Chinese</a></li>
                            <li><a href="movies.html">Hindi</a></li> 
                        </ul>
                        <!-- script-for-menu -->
                        <script>
                            $( "li a.menu1" ).click(function() {
                            $( "ul.cl-effect-2" ).slideToggle( 300, function() {
                            // Animation complete.
                            });
                            });
                        </script>
                    <li><a href="#" class="menu"><span class="glyphicon glyphicon-film glyphicon-king" aria-hidden="true"></span>Sports<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
                        <ul class="cl-effect-1">
                            <li><a href="sports.html">Football</a></li>                                             
                            <li><a href="sports.html">Cricket</a></li>
                            <li><a href="sports.html">Tennis</a></li> 
                            <li><a href="sports.html">Shattil</a></li>  
                        </ul>
                        <!-- script-for-menu -->
                        <script>
                            $( "li a.menu" ).click(function() {
                            $( "ul.cl-effect-1" ).slideToggle( 300, function() {
                            // Animation complete.
                            });
                            });
                        </script>
                    <li><a href="movies.html" class="song-icon"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>Songs</a></li>
                    <li><a href="news.html" class="news-icon"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>News</a></li>
                  </ul>
                  <!-- script-for-menu -->
                        <script>
                            $( ".top-navigation" ).click(function() {
                            $( ".drop-navigation" ).slideToggle( 300, function() {
                            // Animation complete.
                            });
                            });
                        </script>
                    <div class="side-bottom">
                        <div class="side-bottom-icons">
                            <ul class="nav2">
                                <li><a href="#" class="facebook"> </a></li>
                                <li><a href="#" class="facebook twitter"> </a></li>
                                <li><a href="#" class="facebook chrome"> </a></li>
                                <li><a href="#" class="facebook dribbble"> </a></li>
                            </ul>
                        </div>

                        </div>
                    </div>
                </div>
        </div>


<?php include 'includes/footer.php';?>

login.php

<?php
if(isset($_POST["submit"])){

if(!empty($_POST['email']) && !empty($_POST['password'])) {
    $email=$_POST['email'];
    $password=$_POST['password'];

    $con=mysql_connect('localhost','root','') or die(mysql_error());
    mysql_select_db('site1') or die("cannot select DB");

    $query=mysql_query("SELECT * FROM user WHERE email='".$email."' AND password='".$password."'");

    $numrows=mysql_num_rows($query);
    if($numrows!=0)
    {
    while($row=mysql_fetch_assoc($query))
    {
    $dbemail=$row['email'];
    $dbpassword=$row['password'];
    }

    if($email == $dbemail && $password == $dbpassword)
    {
    session_start();
    $_SESSION['sess_email']=$email;



    /* Redirect browser */
    header("Location: index.php");
    }
    } else {
    echo "Invalid email or password!";
    }

} else {
    echo "All fields are required!";
}
}
?>

3

Answers


  1. There is something with your session_start(). These need to be on top of each file you are using the session handler. If you don’t put session_start() on top, the headers won’t be sent to the browser.

    So your files would look like:

    Header.php

    <?php
    session_start(); # This need to be on top, when using sessions!
    ?>
    <!DOCTYPE HTML>
    <html>
    <head>
    

    Login.php

    <?php
    session_start(); # This need to be on top, when using sessions!
    if(isset($_POST["submit"])){
    
    Login or Signup to reply.
  2. In headers.php check if $_SESSION[‘sess_email’] variable is not empty. If empty then display the login button.

    Login or Signup to reply.
  3. start at the top of your page with

    <?php
    session_start();
    //after you started the session create the rest of your page
    ?> 
    <!DOCTYPE HTML>
    <html>
    <head>
    

    then at login.php you , again, start with

    <?php
    session_start();
    

    at the top of your page

    then create a if statement:

    if(isset($_POST["submit"])){
    //disable the login / signup button(s) here
    //for example:
    $logged_in = true;
    } else $logged_in = false;
    

    then create a jQuery function like this:

    <script>
        var logged_in = '<?php echo $logged_in ; ?>';
            if(logged_in === "true") {             
                $(".signin").hide();
            } else {
                $(".signin").show();                            
            }
    </script>
    

    or in javascript

    <script>
        var logged_in = '<?php echo $logged_in ; ?>';
            if(logged_in === "true") {             
                document.getElementsByClassName("signin").style.visibility = "hidden";
            } else {
                document.getElementsByClassName("signin").style.visibility = "visible";
                }
    </script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search