I have an admin page (admin.php) that I am setting up right now.
When the page is accessed initially, a login box comes up correctly where the user can hit a "Sign In" button.
When they hit the "Sign In" button, the login form gets submitted to a PHP page with this code (I don't have any authenticating going on right now - just starting to get this setup):
<?php
session_start();
$_SESSION['login_success'] = true;
header('Location:http://localhost/mbc/admin');
exit();
?>
Then, I'm expecting that the admin.php page will display the admin form but the page just shows up blank after the redirect. Below is the applicable parts of the admin.php page. Can any of you see what I'm doing wrong here such that the admin form is not displaying after the authentication is done?
<html>
<head>
<title>Welcome Home!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<style>
/* Mask for background, by default is not display */
#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
/* You can customize to your needs */
.login-popup{
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
img.btn_close { Position the close button
float: right;
margin: -28px -28px 0 0;
}
fieldset {
border:none;
}
form.signin .textbox label {
display:block;
padding-bottom:7px;
}
form.signin .textbox span {
display:block;
}
form.signin p, form.signin span {
color:#999;
font-size:11px;
line-height:18px;
}
form.signin .textbox input {
background:#666666;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
color:#fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font:13px Arial, Helvetica, sans-serif;
padding:6px 6px 4px;
width:200px;
}
form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
.button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background: -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color:#000;
border-width:1px;
border-radius:4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color:#333;
cursor:pointer;
display:inline-block;
padding:6px 6px 4px;
margin-top:10px;
font:12px;
width:214px;
}
.button:hover { background:#ddd; }
</style>
</head>
<body id="page1">
<?php
session_start();
if (isset($_SESSION['login_success'])) {
?>
<!-- Some HTML content should show up here but it isn't... -->
<?php } else { ?>
<!-- Login Dialog -->
<div id="login-box" class="login-popup">
Cancel
<form method="post" class="signin" action="admin_process_login.php">
<fieldset class="textbox">
<label class="username">
<span>Username</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button class="login" type="submit">Sign in</button>
</fieldset>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
//Getting the variable's value from a link
var loginBox = document.getElementById('login-box');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
// When clicking on the button close or the mask layer the popup closed
$('button.login').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
<?php } ?>
</body>
</html>
EDIT 2012-02-25 16:54EST
For some strange reason, this (and only this as far as I've tested so far) series of events makes the admin form come up correctly...
* Go to admin.php and click on "Sign In" button
* Go to "test" php page in browser (http://localhost/mbc/test)
Code for the test page:
<html>
<head>
<title>Testing</title>
</head>
<body>
<?php
session_start();
if (isset($_SESSION['login_success'])) { ?>
<H1>Login was a success</H1>
<?php } else { ?>
<H1>Login was a failure - next time it should work</H1>
<?php
$_SESSION['login_success'] = true;
}
?>
</body>
</html>
Go to admin page (http://localhost/mbc/admin) and now the admin form comes up fine.
The problem was actually in the jQuery button click code, specifically the "return false" portion:
// When clicking on the button close or the mask layer the popup closed
$('button.login').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
When I removed that code, the "$_SESSION['login_success'] = true;" occurred fine and the admin form portion came back successfully.
Turns out "return false" has some nasty side effects and should be used carefully. See
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ for more information on using "return false" correctly.
I don't have access to test it right now, but I think your problem is that it should be:
header('Location: http://localhost/mbc/admin');
Reference: http://php.net/manual/en/function.header.php
Both of the references show that a space after the ":" is needed before the URI.
There is nothing wrong with your code. You are simply expecting start_session() not to work and $_SESSION['login_success'] to be unset. I suggest you either use a php-framework or read a guide about sessions.
here, change like this and the form pops up:
<?php
//session_start(); // if you uncomment print_r will give you 1
if (isset($_SESSION['login_success'])) {
echo '<pre>';
print_r($_SESSION['login_success']);
?>
<!-- Some HTML content should show up here but it isn't... -->
empty statement</pre>
Related
I am writing a php file. It should read the username and password I enter and recored them to a txt file. It is only showing please enter username. It isn't showing my background colors either.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NewHW3</title>
</head>
<body>
<style scoped>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #333FFF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
<h1>User Login</h1>
<form method="post" action="863l.php">
Username: <input type="text" name="uname" placeholder="Username">
Password: <input type="password" name="password" placeholder="Password">
<input type="submit" name="login" value="Login">
</form>
</body>
</html>
That's the first code, it is supposed to display username and password. It seems to work but when I run it just says please enter username on the top.
<?php
$uname=$_POST['username'];
$password=$_POST['password'];
if ($uname==''){
echo "<script>alert('Please Enter Username');</script>";
exit();
}
if (!isset($_POST['username'])) ;{
}
if(!isset($_POST['password']));
$fp=fopen("863l.txt", "a");
$savestring="Username: ".$email."\n"."Password: ".$password."\n";
fwrite($fp, $savestring);
fclose($fp);
?>
The second code is supposed to record my input information into a txt file, it isn't doing that.
I didn't add the text file, bit it isnt recording to it either:
change this:
$uname=$_POST['username'];
to this:
$uname=$_POST['uname'];
because your input form like this
Username: <input type="text" name="uname" placeholder="Username">
When I try to display content from another blade template, it will only show certain data on the webpage. What I want is inside this page, the content from test.blade.php together with the button, when click will pop up a form(I don't want the test.blade.php content to be inside). But whenever I try to do it, only certain information is shown and when I view page source, all the data has already been loaded. I have asked this question before already and someone told me it was the fault of my css, but I when I try to look at it, I don't really see anything which is causing this to happen. Can someone help me please? Thanks in advance!
I will put the screenshot here first in the question.
This is what it is suppose to look like where it will have a scroll down bar, and below there should be a button for the popup form.
But this is what I am getting (I have checked that all the data are already loaded)
elements.css (here is the css that I used)
#abc {
width: 100%;
height: 100%;
opacity: .95;
top: 0;
left: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: auto;
}
img#close {
position: absolute;
right: -14px;
top: -14px;
cursor: pointer;
}
div#popupContact {
position: absolute;
left: 50%;
top: 17%;
margin-left: -202px;
font-family: 'Raleway', sans-serif;
}
form {
max-width: 300px;
min-width: 250px;
padding: 10px 50px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
background-color: #fff;
}
p {
margin-top: 30px;
}
h2 {
background-color: #FEFFED;
padding: 20px 35px;
margin: -10px -50px;
text-align: center;
border-radius: 10px 10px 0 0;
}
hr {
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
}
input[type=text] {
width: 82%;
padding: 10px;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
}
#name {
background-image: url(../images/name.jpg);
background-repeat: no-repeat;
background-position: 5px 7px;
}
#email {
background-image: url(../images/email.png);
background-repeat: no-repeat;
background-position: 5px 7px;
}
textarea {
background-image: url(../images/msg.png);
background-repeat: no-repeat;
background-position: 5px 7px;
width: 82%;
height: 95px;
padding: 10px;
resize: none;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
margin-bottom: 30px;
}
#submit {
text-decoration: none;
width: 100%;
text-align: center;
display: block;
background-color: #FFBC00;
color: #fff;
border: 1px solid #FFCB00;
padding: 10px 0;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
span {
color: red;
font-weight: 700;
}
button {
width: 10%;
height: 45px;
border-radius: 3px;
background-color: #cd853f;
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 18px;
cursor: pointer;
}
evaltest.blade.php
<html>
<head>
<title>Popup form </title>
<meta name="robots" content="noindex, nofollow">
<link href="{{ asset('css/elements.css') }}" rel="stylesheet">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43981329-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<!-- body starts here -->
<body id ="bdy" style="overflow:hidden;">
<div id="abc">
<!-- Popup div starts here -->
<div id="popupContact">
<!-- contact us form -->
<form class="form-horizontal" method="post" action="{{ url('/evaltest/'.$data0->id) }}">
{{ csrf_field() }}
<img id ="close" src="{{ URL::to('/image') }}/3.png" onclick ="div_hide()">
<input type="hidden" name="user_id" value="{{$data0->id}}">
<div class="form-group">
<label class="col-md-2"><b>Recommendation:</b></label>
<div class="col-md-6">
<input type="radio" id ="recommendation" name="recommendation" value="Yes"> Yes<br>
<input type="radio" id ="recommendation" name="recommendation" value="No"> No<br>
</div>
</div>
<div class="form-group">
<div class="col-md-6-offset-2">
<input id= "submit" type="submit" href="javascript: check_empty()" class="btn btn-primary" value="Save">
</div>
</div>
</form>
</div>
<!-- Popup Div Ends Here -->
// #include('test')
//it will show all data if I were to put here but I don't want to put it together with the popup form
</div>
<!-- Display Popup Button -->
//this will show a few info but no button
#include('test')
<h1>Click Button to Evaluate</h1>
<button id="popup" onclick="div_show()">Popup</button>
<script src="{{ asset('/js/my_js.js') }}"></script>
//this will show even lesser info but button is shown
//#include('test')
</body>
</html>
test.blade.php (there are more information inside but I only put some as an example of how I got the information)
<div class="container">
#foreach ($data as $object)
<b>Name: </b>{{ $object->Name }}<br><br>
<b>Alias: </b>{{ $object->Alias }}<br><br>
<b>Email: </b>{{$object->Email}}<br><br>
#endforeach
</div>
I have tried removing some of the things inside the css but nothing happen, I even try removing those with the position: fixed and also added .container but it still doesn't work.
myjs.js
// function to display popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
// function to hide popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
I have figured it out how to show my data is that I have to remove the style="overflow:hidden;" part so that it will work
I'm working on a custom PHP, modal login form. When I click the Login button, I receive the 404 resource not found, being my PHP file that handles the authentication.
The two files are here:
action_page.php
<?php
session_start();
$name = 'user1';
$pwd = 'home';
if(isset($_POST['submit'])){
// get vars
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $name and $password == $pwd){
redirect('http://www.mden.com');
} else {
redirect('http://www.youtube.com');
}
} else {
redirect('login.html');
}
?>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
background-color: rgb(0,0,0,0.4);
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5px auto;
border: 1px solid #888;
width: 20%;
}
/* The Close Button */
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: white;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
</style>
</head>
<body>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" method="post" action="/action_page.php">
<!-- No Avatar!!! -->
<!-- Login Info -->
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required><br /><br />
<label><b>Password</b></label>
<input type="text" placeholder="Enter Password" name="psw" required><br /><br />
<button name="do_login" type="submit">Login</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
The file path used in your form's action is correct?
Try remove the "/" from action="/action_page.php" if action_page.php stay on same directory.
I have two input fields 1. Name , 2. Telephone. All i want is (1. When I start typing name it must search from database for autocomplete Now when the Name is selected from search query i want Telephone input to be filled automatically on the basis on Name selected.
Currently I'm using typeahead.js to autocomplete the Name search.
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="typeahed.js"></script>
<style>
h1 {
font-size: 20px;
color: #111;
}
.content {
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
.tt-hint,
.Name {
border: 2px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
font-size: 24px;
height: 45px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 400px;
}
.tt-dropdown-menu {
width: 400px;
margin-top: 5px;
padding: 8px 12px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px 8px 8px 8px;
font-size: 18px;
color: #111;
background-color: #F1F1F1;
}
</style>
<script>
$(document).ready(function() {
$('input.Name').typeahead({
name: 'Name',
remote: 'city.php?query=%QUERY'
});
})
</script>
</head>
<body>
<div class="content">
<form>
<h1>Try it yourself</h1>
<input type="text" name="Name" size="30" class="Name" placeholder="Please Enter Name or ZIP code"> </input>
<input type="text" name="Telephone" size="30" class="Telephone" placeholder="Telephone"> </input>
</form>
</div>
</body>
</html>
My PHP Code :
//Not putting database connection part (Obviously i have connected it)
<?php
if (isset($_REQUEST['query'])) {
$query = $_REQUEST['query'];
$sql = mysqli_query ($conn,"SELECT Name,Telephone FROM customerdetails WHERE Name LIKE '%{$query}%'");
$array = array();
while ($row = mysqli_fetch_array($sql)) {
$shu[] = array (
'label' => $row['Name'],
'value' => $row['Name'],
);
}
echo json_encode ($shu);
}
?>
The script city.php have to return values for names and telephone number.
In your example you have twice $row['Name'].
You have to separate the values that the names are used for the original typeahead search (try template like here) and the telephone number is used when a name is selected.
Not used to typeahead but found this solution which looks solid to me to achive what you want.
$('input.Name').typeahead({
name: 'Name',
remote: 'city.php?query=%QUERY',
updater: function(item) {
// try to get telephone number out of "item" and set it to the telephone number field
return item;
}
});
What version of typeahead are you using? https://github.com/twitter/typeahead.js? Maybe you need to include the bloodhound suggestion module...
I have the following html/php code. On clicking any of the tabs link the content of the file is not getting loaded in the specific <div> tag.
PHP code :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul.tabs li { display: inline; }
ul.tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.4em 2.5em 0.3em 2.5em; border-radius : 5px 5px 0 0; }
ul.tabs li a:hover { background-color: #f1f0ee; }
ul.tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent {border: 1px solid #c9c3ba; border-top : none; padding: 0.5em; background-color: #f1f0ee; border-radius: 0 0 5px 5px}
div.tabContent.hide { display: none; }
.tabs a {
padding:5px 10px;
background:#D8D8D8;
color:#fff;
text-decoration:none;
}
.tabs a.active {
background:#f1f0ee ;
color:black ;
font-weight:bold;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class='tabs'>
<li><a href="#desktop" >Desktop</a></li>
<li>Laptop</li>
</ul>
<div class="tabContent" id="desktop">
</div>
<div class="tabContent" id="laptop">
</div>
</body>
</html>
jQuery code : Through this external jQuery file I want that whenever I click a link the required file gets loaded in the specific <div> tag.
$(document).ready(function() {
var hideid = "#laptop";
var showid = "#desktop";
$(hideid).hide();
$('a[href="' + showid + '"]').addClass("active");
$('a[href="#laptop').click(function() {
$(this).addClass('active');
$('#laptop').show('slow');
$('#desktop').hide('slow');
$('a[href="#desktop"]').removeClass("active");
$("#laptop").load("laptop.html");
});
$('a[href="#desktop').click(function() {
$("#desktop").load("/test.html");
$(this).addClass('active');
$('#desktop').show('slow');
$('#laptop').hide('slow');
$('a[href="#laptop"]').removeClass("active");
$("#desktop").load("desktop.html");
});
});
What is wrong in the code?
$('a[href="#desktop').click(function () {
Quotation mark is wrong.
Looks like the issue is with this line,
$("#desktop").load("/test.html");
if test.html is in same directory, try removing the /.