I have literally tried every solution out there on the Internet and I still can't manage to figure out why my jQuery is not firing.
The main aim is to show a modal when clicking on the "addUser-div", but when I click the div nothing happens.
I used the EXACT SAME code on page that only has HTML ( no php ) and jQuery fires just fine, i just can't manage to find out what the problem is, this occurs with all the jQuery functions, thought i can see that my js is properly loaded to the page.
Here is the users.php code :
<?php
session_start();
if (isset($_SESSION['role']) && $_SESSION['role'] == 1) {
?>
<!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>
<link rel="stylesheet" type="text/css" media="screen" href="../css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../css/styles.css" />
<script type="text/javascript" src="../script/date_time.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script type="text/javascript">
$('.addUser-div').click(function() {
$('.modal').modal('show')
})
</script>
</head>
<title>Espace de Connexion</title>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark static-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../images/Logoestia.png" class="img-responsive" width="150" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item "><a class="nav-link" href="./panel.php">Tableau De Bord
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item "><a class="nav-link" href="./armoires.php">Gestion des Armoires
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item "><a class="nav-link" href="./outils.php">Gestion des Outils
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item active"><a class="nav-link" href="./users.php">Gestion Employés
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" href="../logout.php">Déconnexion
<span class="sr-only">(current)</span>
</a></li>
</ul>
</div>
</div>
</nav>
</head>
<body>
<h2 class="display-4">Gestion utilisateurs</h2>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="container">
<div class="row">
<INPUT type=button value="Retour " onClick="history.back();">
<div class="col-md-6 addUser-div" style="cursor: pointer;">
<div class="card-counter info">
<i class="fa fa-users"></i>
<span class="count-numbers">
<?php
session_start();
echo $_SESSION["userCount"];?>
</span>
<span class="count-name">Ajouter un Utilisateur</span>
</div>
</div>
<div class="col-md-6" style="cursor: pointer;" onclick="window.location='../panel/prep.jsp';">
<div class="card-counter danger">
<i class="fa fa-trash"></i> <span class="count-name">Supprimer
un utilisateur</span>
</div>
</div>
</div>
</div>
<div class="modal modal-dialog" id="infos">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ajouter un Utilisateur</h4>
</button>
</div>
<div class="modal-body">
<div style="display: flex; width: 100%;">
<form action="./CreaterUserServlet">
<div style="width: 100%;">
<p>Nom</p>
<input type="text" name="n" placeholder="Nom" required="required" />
</div>
<div style="width: 100%;">
<p>Login</p>
<input type="text" name="u" placeholder="Identifiant" required="required" />
</div>
<div style="width: 100%;">
<p>Mot de passe</p>
<input type="password" name="p" placeholder="Mot de Passe" required="required" />
</div>
<div style="width: 100%;">
<p>Role</p>
<select name="role-select">
<option value="">Veuillez choisir..</option>
<option value="1">ADMIN</option>
<option value="2">PREPARATEUR</option>
<option value="3">COMMERCIAL</option>
<option value="4">EXPEDITEUR</option>
</select>
</div>
<p>
<input type="submit" class="btn btn-primary btn-block btn-large" value="Ajouter">
</p>
</form>
</div>
</div>
</div>
</div>
<?php include 'usersTable.php';?>
</body>
<footer>
<p>M.Ramzi</p>
</footer>
</html>
<?php
}else {
header("location: ../index.php");
}
?>
You're trying to bind the click event to the div before the div exists in the DOM. Wrap the event listener in a document ready:
$(document).ready(function() {
$('.addUser-div').click(function() {
$('.modal').modal('show');
})
});
Also, you're loading the bootstrap library twice; that can't be good. Remove one of these lines:
<script src="../js/bootstrap.min.js"></script>
Related
I wonder if someone can help me to load a "maintanence" controller before the framwork connects to DB.
that will load tpl file.
For example, when the app is under construction and I want to turn the MySQL database off, but I want to show the people who get my web a page (tpl file that is loaded by controller) "we are under construction" page and all this by loading tpl files and not requiring PHP file.
OpenCart core makes the DB connection before any controller is loaded. So if you plan to turn to maintenance mode, before anything is displayed to the user, the DB connection is already established.
It is practically impossible to separate the DB from the core since it is so tightly coupled.
The only solution would be to create a index.html file as a copy of your maintenance mode html like Paul Feakins replied in comments.
here is a clean html you can use. should work for anyone.
in your root directory create index.html and paste this code:
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="ltr" lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="ltr" lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Maintenance</title>
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<link href="/image/catalog/cart.png" rel="icon" />
</head>
<body>
<nav id="top">
<div class="container"><div class="pull-left">
<form action="/index.html" method="post" enctype="multipart/form-data" id="form-currency">
<div class="btn-group">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown"> <strong>$</strong> <span class="hidden-xs hidden-sm hidden-md">Currency</span> <i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu">
<li>
<button class="currency-select btn btn-link btn-block" type="button" name="EUR">€ Euro</button>
</li>
<li>
<button class="currency-select btn btn-link btn-block" type="button" name="GBP">£ Pound Sterling</button>
</li>
<li>
<button class="currency-select btn btn-link btn-block" type="button" name="USD">$ US Dollar</button>
</li>
</ul>
</div>
<input type="hidden" name="code" value="" />
<input type="hidden" name="redirect" value="/index.html" />
</form>
</div>
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><i class="fa fa-phone"></i> <span class="hidden-xs hidden-sm hidden-md">123456789</span></li>
<li class="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">My Account</span> <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<li>Register</li>
<li>Login</li>
</ul>
</li>
<li><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">Wish List (0)</span></li>
<li><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Shopping Cart</span></li>
<li><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">Checkout</span></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="logo"> <h1>Your Store</h1>
</div>
</div>
<div class="col-sm-5"><div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
</span>
</div></div>
<div class="col-sm-3"><div id="cart" class="btn-group btn-block">
<button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
<ul class="dropdown-menu pull-right">
<li>
<p class="text-center">Your shopping cart is empty!</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs">Categories</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">Desktops
</li>
<li class="dropdown">Laptops & Notebooks
</li>
<li class="dropdown">Components
</li>
<li>Tablets</li>
<li>Software</li>
<li>Phones & PDAs</li>
<li>Cameras</li>
</ul>
</div>
</nav>
</div>
<div id="common-maintenance" class="container">
<div class="row">
<div class="col-12"><h1 style="text-align:center;">We are currently performing some scheduled maintenance. <br/>We will be back as soon as possible. Please check back soon.</h1></div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Information</h5>
<ul class="list-unstyled">
<li>About Us</li>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Customer Service</h5>
<ul class="list-unstyled">
<li>Contact Us</li>
<li>Returns</li>
<li>Site Map</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Extras</h5>
<ul class="list-unstyled">
<li>Brands</li>
<li>Gift Certificates</li>
<li>Affiliate</li>
<li>Specials</li>
</ul>
</div>
<div class="col-sm-3">
<h5>My Account</h5>
<ul class="list-unstyled">
<li>My Account</li>
<li>Order History</li>
<li>Wish List</li>
<li>Newsletter</li>
</ul>
</div>
</div>
<hr>
<p>Powered By OpenCart<br /> Your Store © 2019</p>
</div>
</footer>
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate#opencart.com
//-->
</body></html>
I have a navigation toggle it appears when screen is small after i included 1 php file which which is bootstrap modal, after including that my navigation toggle is not closing after opening.Im unable to close the navigation menu.
I have include both the files index as well as request which is data modal file
<?php require 'request.php';?>
<header class="navigation navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<a class="navbar-brand logo" href="index.html">
<img class="logo-white" src="images/logo1.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-white" style="float:right;font-size: 30px;color: white;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
<img class="logo-default" src="images/logo2.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-default" style="float:right;font-size: 30px;color: #000;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
</a>
<!-- /logo -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right">
<ul id="nav" class="nav navbar-nav menu">
<li>
<a href="index.html" >Home </span></a>
</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Mobile App Development</li>
<li>Web Development</li>
<li>Software Development</li>
<li>Software Consultancy</li>
<li>Software Testing and<br> Quality Assurance</li>
</ul>
</li>
<li>Technologies</li>
<li>About Us</li>
<li>Careers</li>
<li><button type="button" data-toggle="modal" data-target="#myModal">Request A Quote</button></li>
<li>Contact Us</li>
</li>
</ul>
</nav>
<!-- /main nav -->
</div>
</header>
<this is request.php>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request A Quote</h4>
</div>
<div class="panel-body">
<form id="reused_form">
<div class="form-group">
<input type="text" name="name" required class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<input type="email" name="email" required class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<input name="phone" class="form-control" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
</div>
<div class="form-group">
<button class="btn btn-raised btn-lg btn-warning" type="submit" style="
border: none;
padding: 15px 0;
width: 100%;
margin: 0;
background: #2b315d;
color: #fff;
border-radius: 0;
">Send</button>
</div>
</form>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h4>
Error
</h4>
Sorry there was an error sending your form.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think require.php breaks the html including head section again and opening and closing html and body tags.
Maybe this will work ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
<body>
<header class="navigation navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<a class="navbar-brand logo" href="index.html">
<img class="logo-white" src="images/logo1.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-white" style="float:right;font-size: 30px;color: white;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
<img class="logo-default" src="images/logo2.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-default" style="float:right;font-size: 30px;color: #000;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
</a>
<!-- /logo -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right">
<ul id="nav" class="nav navbar-nav menu">
<li>
<a href="index.html" >Home </span></a>
</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Mobile App Development</li>
<li>Web Development</li>
<li>Software Development</li>
<li>Software Consultancy</li>
<li>Software Testing and<br> Quality Assurance</li>
</ul>
</li>
<li>Technologies</li>
<li>About Us</li>
<li>Careers</li>
<li><button type="button" data-toggle="modal" data-target="#myModal">Request A Quote</button></li>
<li>Contact Us</li>
</li>
</ul>
</nav>
<!-- /main nav -->
</div>
</header>
<?php require 'request.php';?>
</body>
</html>
below request PHP
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request A Quote</h4>
</div>
<div class="panel-body">
<form id="reused_form">
<div class="form-group">
<input type="text" name="name" required class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<input type="email" name="email" required class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<input name="phone" class="form-control" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
</div>
<div class="form-group">
<button class="btn btn-raised btn-lg btn-warning" type="submit" style="
border: none;
padding: 15px 0;
width: 100%;
margin: 0;
background: #2b315d;
color: #fff;
border-radius: 0;
">Send</button>
</div>
</form>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h4>
Error
</h4>
Sorry there was an error sending your form.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This question already has answers here:
How to fix "Headers already sent" error in PHP
(11 answers)
Closed 4 years ago.
When I reload my website after uploading it on my webserver, following error is on my website:
Warning: session_start(): Cannot send session cache limiter - headers
already sent (output started at
/data/userfiles/websites/lagersystem/login.php:1) in
/data/userfiles/websites/lagersystem/login.php on line 36
I don´t know how to solve this.
This is my source code:
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="icon" type="favicon.gif" href="favicon.gif" sizes="256x256">
</head>
<body>
<div class="p-3 mb-2 bg-secondary text-white">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.php"><img src='favicon-64.gif'/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="add.php">Hinzufügen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.php">Admin</a>
</li>
</ul>
</div>
</nav>
</div>
<?php
session_start();
$pdo = new PDO('mysql:host=localhost;dbname=', '', '');
if(isset($_GET['login'])) {
$email = $_POST['email'];
$passwort = $_POST['passwort'];
$statement = $pdo->prepare("SELECT * FROM ls_users WHERE email = :email");
$result = $statement->execute(array('email' => $email));
$user = $statement->fetch();
//Überprüfung des Passworts
if ($user !== false && password_verify($passwort, $user['passwort'])) {
$_SESSION['userid'] = $user['id'];
die('<div class="text-center">Login erfolgreich. Weiter zu internen Bereich</div>');
} else {
$errorMessage = "E-Mail oder Passwort falsch!<br>";
}
}
?>
<?php
if(isset($errorMessage)) {
echo $errorMessage;
}
?>
<div class="row align-items-center justify-content-center">
<div class="text-center">
<form action="?login=1" method="post">
E-Mail:<br>
<input class="form-control" type="email" size="40" maxlength="250" name="email"><br><br>
Dein Passwort:<br>
<input class="form-control" type="password" size="40" maxlength="250" name="passwort"><br>
<input class="form-control" type="submit" value="Anmelden">
</form>
<br />
<br />
</div>
</div>
<div class="p-3 mb-2 bg-secondary text-white">
<div class="row">
<div class="col">
<div class="text-center">
Aktualisieren
</div>
</div>
<div class="col">
<div class="text-center">
Fehlermeldung
</div>
</div>
</div>
</div>
<div class="p-3 mb-2 bg-secondary text-white">
<footer class="mainfooter" role="contentinfo">
<div class="footer-top p-y-2">
<div class="container-fluid">
</div>
</div>
<div class="footer-middle">
<div class="container">
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col">
<!--Footer Bottom-->
<p class="text-center">© 2018 - All rights reserved.</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Thank you.
You have to start the file with
<?php
session_start();
The reason is that sessions work through cookies (if the client was never there, PHP sends a random number as a cookie. Then, whenever the client comes back, he sends that cookie and PHP can look up $_SESSION for that user).
The problem is that cookies have to be sent in the header, before any HTML goes through, so if you did something like:
<html> <?php session_start();?>
PHP would read your file, see that you wrote "", figure that there aren't any more headers needing to be written, and start with the rest. Then when it hits session_start, it can't go back anymore and gives you the error.
Like this:
<?php session_start();?>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="icon" type="favicon.gif" href="favicon.gif" sizes="256x256">
</head>
<body>
<div class="p-3 mb-2 bg-secondary text-white">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.php"><img src='favicon-64.gif'/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="add.php">Hinzufügen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.php">Admin</a>
</li>
</ul>
</div>
</nav>
</div>
<?php
$pdo = new PDO('mysql:host=localhost;dbname=', '', '');
if(isset($_GET['login'])) {
$email = $_POST['email'];
$passwort = $_POST['passwort'];
$statement = $pdo->prepare("SELECT * FROM ls_users WHERE email = :email");
$result = $statement->execute(array('email' => $email));
$user = $statement->fetch();
//Überprüfung des Passworts
if ($user !== false && password_verify($passwort, $user['passwort'])) {
$_SESSION['userid'] = $user['id'];
die('<div class="text-center">Login erfolgreich. Weiter zu internen Bereich</div>');
} else {
$errorMessage = "E-Mail oder Passwort falsch!<br>";
}
}
?>
<?php
if(isset($errorMessage)) {
echo $errorMessage;
}
?>
<div class="row align-items-center justify-content-center">
<div class="text-center">
<form action="?login=1" method="post">
E-Mail:<br>
<input class="form-control" type="email" size="40" maxlength="250" name="email"><br><br>
Dein Passwort:<br>
<input class="form-control" type="password" size="40" maxlength="250" name="passwort"><br>
<input class="form-control" type="submit" value="Anmelden">
</form>
<br />
<br />
</div>
</div>
<div class="p-3 mb-2 bg-secondary text-white">
<div class="row">
<div class="col">
<div class="text-center">
Aktualisieren
</div>
</div>
<div class="col">
<div class="text-center">
Fehlermeldung
</div>
</div>
</div>
</div>
<div class="p-3 mb-2 bg-secondary text-white">
<footer class="mainfooter" role="contentinfo">
<div class="footer-top p-y-2">
<div class="container-fluid">
</div>
</div>
<div class="footer-middle">
<div class="container">
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col">
<!--Footer Bottom-->
<p class="text-center">© 2018 - All rights reserved.</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to make a website with XAMP using PHP, MySQL and Bootstrap. I'm beginner in PHP so I take this code on website of developers and when I tried to run on localhost I typed my credentials and the index.php did a refresh only, not show nothing errors, just refresh. I researched on web for 5 days and nothing, here's my code:
index.php
<?php session_start(); ?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" action="validacao.php" method="post">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="txUsuario" class="sr-only">Email address</label>
<input type="text" name="usuario" id="txUsuario" class="form-control" placeholder="Email" required autofocus>
<label for="inputPassword" name="senha" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
validacao.php
<?php
// Verifica se houve POST e se o usuário ou a senha é(são) vazio(s)
if (!empty($_POST) AND (empty($_POST['usuario']) OR empty($_POST['senha']))) {
header("Location: index.php"); exit;
}
// Tenta se conectar ao servidor MySQL
mysql_connect('localhost', 'root', '') or trigger_error(mysql_error());
// Tenta se conectar a um banco de dados MySQL
mysql_select_db('wda_crud') or trigger_error(mysql_error());
$usuario = mysql_real_escape_string($_POST['usuario']);
$senha = mysql_real_escape_string($_POST['senha']);
// Validação do usuário/senha digitados
$sql = "SELECT `id`, `nome`, `nivel` FROM `usuarios` WHERE (`usuario` = '".$usuario ."') AND (`senha` = '".$senha ."') AND (`ativo` = 1) LIMIT 1";
$query = mysql_query($sql);
if (mysql_num_rows($query) != 1) {
// Mensagem de erro quando os dados são inválidos e/ou o usuário não foi encontrado
echo "Login inválido!"; exit;
} else {
// Salva os dados encontrados na variável $resultado
$resultado = mysql_fetch_assoc($query);
// Se a sessão não existir, inicia uma
if (!isset($_SESSION)) session_start();
// Salva os dados encontrados na sessão
$_SESSION['UsuarioID'] = $resultado['id'];
$_SESSION['UsuarioNome'] = $resultado['nome'];
$_SESSION['UsuarioNivel'] = $resultado['nivel'];
// Redireciona o visitante
header("Location: site.php"); exit;
}
?>
site.php
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><?php echo $_SESSION['UsuarioNome']; ?></a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
</nav>
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
<h1>Dashboard</h1>
<section class="row text-center placeholders">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<div class="text-muted">Something else</div>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</section>
<h2>Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Someone can tell me what is the error? It can be the XAMP?
Your error in this line
There is no name field in
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
you have put name field in label
<label for="inputPassword" name="senha" class="sr-only">Password</label>
change this two lines to
<input type="password" name="senha" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword" class="sr-only">Password</label>
The <input...> tags must have a name= attribute or they will not be sent from the HTML form to the PHP script by the browser.
So add a name= attribute to this <input>
<input type="password" name="senha" id="inputPassword" class="form-control" placeholder="Password" required>
^^^^^^^^^^^^
I am guessing its just a typo because you have a name="senha" attribute in the <label> and that is not necessary.
<label for="inputPassword" name="senha" class="sr-only">Password</label>
can be removed ^^^^^^^^^^^^
Note: You should always code your session_start(); at the top of your scripts right after the first <?php
I have this simple navbar:
<nav class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a id="header-logo" class="transition-100" href="<?php echo base_url(); ?>main">YoutubeParty</a>
</div>
<div class="navbar-nav navbar-right">
<ul>
<li>
<a id="header-add-button" class="button add-button header-button transition-100" href="<?php echo base_url(); ?>main/add"><span class="glyphicon glyphicon-plus"></span></a>
</li>
<li>
<a id="header-party-button" class="button party-button header-button transition-100" href="<?php echo base_url(); ?>main/party"><span class="glyphicon glyphicon-film"></span></a>
</li>
<li>
<a id="header-ranking-button" class="button ranking-button header-button transition-100" href="<?php echo base_url(); ?>main/ranking"><span class="glyphicon glyphicon-th-list"></span></a>
</li>
</ul>
</div>
</div>
</nav>
It works great on desktop but on mobile links are displayed below header.
Screenshot
And the buttons don't work. I can open links in the background, but when clicked, they don't direct to other pages.
EDIT: mobile source code
<!doctype html>
<html class="no-js" lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>YoutubeParty - najlepsze filmiki w sieci</title>
<meta name="description" content="Najlepsze filmy z youtube bez ruszania się z zakładki">
<meta name="keywords" content="youtube, filmiki, śmieszne, ciekawe, party, humor, video, wideo" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Oswald&subset=latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://youtubeparty.pl/css/normalize.css">
<link rel="stylesheet" href="http://youtubeparty.pl/css/bootstrap.min.css">
<link rel="stylesheet" href="http://youtubeparty.pl/css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://youtubeparty.pl/js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
</head>
<body>
<nav class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a id="header-logo" class="transition-100" href="http://youtubeparty.pl/main">YoutubeParty</a>
</div>
<div class="navbar-nav navbar-right">
<ul>
<li>
<a id="header-add-button" class="button add-button header-button transition-100" href="http://youtubeparty.pl/main/add">
<span class="glyphicon glyphicon-plus"></span>
</a>
</li>
<li>
<a id="header-party-button" class="button party-button header-button transition-100" href="http://youtubeparty.pl/main/party">
<span class="glyphicon glyphicon-film"></span>
</a>
</li>
<li>
<a id="header-ranking-button" class="button ranking-button header-button transition-100" href="http://youtubeparty.pl/main/ranking">
<span class="glyphicon glyphicon-th-list"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="add-container" class="container-fluid">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 min480-container" style="text-align: center;">
<h1 style="margin-bottom: 50px;">Dodaj filmik</h1>
<form action="http://youtubeparty.pl/main/addin" method="post" accept-charset="utf-8">
<input type="hidden" name="add_date" value="2014-08-30 10:34:27" />
<label for="yt_link">Link:</label>
<input type="text" name="yt_link" value="" class="transition-100" id="yt_link" required="required" maxlength="1024" />
<input type="submit" name="AddSubmit" value="Dodaj" class="button add-button transition-100" id="AddSubmit" />
</form>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div id="footer-container" class="min480-container">
<p> Copyright © 2014 <a style="text-decoration: none" class="transition-100" href="http://youtubeparty.pl/">YoutubeParty.pl</a>
</p>
<ul>
<li>
<a class="transition-100" href="http://youtubeparty.pl/main/contact">Kontakt</a>
</li>
<li>
<a class="transition-100" href="http://youtubeparty.pl/main/about">O stronie</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-54218399-1', 'auto'); ga('send', 'pageview'); function load() { gapi.client.load('youtube', 'v3', onYouTubeApiLoad); } function onYouTubeApiLoad() { gapi.client.setApiKey('AIzaSyCa5mbsirih865iJOhykaWfrPKAhjssD9A'); } </script>
Not sure about the display problem but I had the same problem with links not opening the new pages on mobile. I managed to get past that by adding this:
div.dropdown-backdrop {
z-index: -1;
}
I got there by reading this: Bootstrap github issue.