I have been working on a simple website for a while, trying to learn PHP. I have made a simple php form, using bootstrap.
I use the GET method to get the text from the input into the url, and it shows up on the search.php url shown here:
URL
File Structure:
Screenshot of directories
For some reason, when i try to echo the value on the search.php page, the web page is blank. I have probably made a stupid error, so any help would be great!
index.php code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mc Report</title>
<meta name="description" content="Mc Report">
<meta name="author" content="Cre8tionz">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<script>
$(function(){
$(".dropdown-menu li a").click(function(){
$(".but:first-child").text($(this).text());
$(".but:first-child").val($(this).text());
});
});
</script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-lg-8 col-lg-offset-2">
<div class="main-logo">
<img src="img/logo.png"></img>
</div>
<div class="row">
**<form action="search.php" method="get" novalidate="novalidate">
<div class="col-lg-10">
<div class="input-group">
<input name="q" type="search" class="form-control" aria-label="..." placeholder="Search for a username">
<div class="input-group-btn">
<button type="button" class="but btn btn-default dropdown-toggle pull-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Catageory<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Mc-Market Username</li>
<li>Minecraft Username</li>
<li>Minecraft UUID</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="btn-group" role="group" aria-label="...">
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
</form>**
</div>
</div>
<footer>
<div class="footer">
<div class="container narrow row-fluid text-center navbar-fixed-bottom">
<div class="col-lg-4">
Mc Report
</div>
<div class="col-lg-4">
About
</div>
<div class="col-lg-4">
Copyright © 2016
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
search.php code:
<html>
<body>
<?php
if( $_GET["q"] ) {
print_r($_GET);
$searchquery = $_GET["q"];
echo $searchquery;
}
?>
</html>
</body>
Your URL is file:///...
Most likely you are opening your local files in a browser. The browser cannot execute PHP scripts, so it considers the whole PHP code between < and > as a long unknown tag. Tags are not displayed, so you see a blank page.
You need a webserver to execute PHP scripts.
The most simple way to run a webserver is to run php -S localhost:8001 in your project root (mcreport.net directory).
Then open http://localhost:8001/ in your browser.
Related
I have developed a website in php. The index.php is a login form. After logging in dashboard.php is coming. But when I press the back button in the browser it is redirecting to the login page. How to prevent it. If there is any solution please tell. Thanks in advance. The codes are given below:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body style="background-image: url('https://www.pixelstalk.net/wp-content/uploads/2016/05/HD-Black-Picture.jpg');">
<section id="login">
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 col1">
<div class="row">
<div class="col-sm-7 co2">
<h1 class="h1">Orbit Shifters Employee Site</h1>
<h2 class="h2">Login Here <i class="fas fa-long-arrow-alt-right"></i></h2>
</div>
<div class="col-sm-5 co1">
<form method="post" action="func.php">
<div>
<input type="text" name="username" class="i1" placeholder="Enter Your Username">
</div>
<div>
<input type="password" name="password" class="i1" placeholder="Enter Your Password">
</div>
<div>
<input type="submit" name="submit" class="btn btn1">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</section>
</body>
</html>
func.php
<?php
session_start();
$con=mysqli_connect("localhost","root","","login");
$connect = new PDO('mysql:host=localhost;dbname=login', 'root', '');
if(isset($_POST['submit'])){
$username=$_POST['username'];
$password=$_POST['password'];
$query="select * from signup where username='$username' and password='$password';";
$result=mysqli_query($con,$query);
$row=mysqli_fetch_assoc($result);
if(mysqli_num_rows($result)==1)
{
$_SESSION["username"] = $username;
$_SESSION['status']="Active";
header("Location:dashboard.php?name=".$row['name']);
exit;
}
else{
echo "<script>alert('Enter Correct Details!!')</script>";
echo "<script>window.open('index.php', '_self')</script>";
}
}
?>
dashboard.php
<?php
session_start();
if($_SESSION['status']!="Active")
{
header("location:index.php");
}
else{
$name=$_GET['name'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body style="background:url(https://i.pinimg.com/originals/e5/f3/af/e5f3af2b9186af6e86187c84f4ad930e.jpg);">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="dashboard.php?name=<?php echo $name; ?>">Dashboard</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="li1"><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</div>
</nav>
<section id="dashboard">
<div class="container">
<div class="row ro1">
<p class="p1"> Hello <?php echo $name; ?>, Welcome to Orbit Shifters EMployee Site.</p>
</div>
<div class="ro1">
<div class="col-sm-4 col2">
<button class="btn btn2">Project 1 <br>Report <br>Submission</button>
</div>
<div class="col-sm-4 col2">
<button class="btn btn2">Project 2 <br>Monthly Report <br>Submission</button>
</div>
<div class="col-sm-4 col2">
<button class="btn btn2">Project 3 <br>Feedback <br>Submission</button>
</div>
</div>
</div>
</section>
</body>
</html>
<?php
}
?>
logout.php
<?php
session_start();
session_destroy();
$_SESSION = array();
unset($_SESSION['username']);
unset($_SESSION['status']);
header("Location:index.php");
?>
I am not sure if I understand the problem correctly, but what if you add a check at the beginning of the index.php file that would redirect you to the dashboard if you are logged in ? Something like this
// index.php
<?php
session_start();
if (isset($_SESSION['status']) && $_SESSION['status'] === "Active") {
header("location: dashboard.php");
}
?>
<!DOCTYPE html>
<html>
<head>
...
this way, if you click back in the browser, you will still go to index.php, but then you will be redirected to the dashboard again if you are already logged in
I'm currently having some issues with creating a webpage that's only accessible once a user has logged in.
I've looked through various threads here, but to no avail. Any help with this would be greatly appreciated.
Here's my code:
login.php
<?php
Include('connect.php');
if (isset($_REQUEST['Submit']))
{
if($_REQUEST['user_id']=="" || $_REQUEST['password']=="")
{
echo " Field must be filled";
}
else
{
$sql1= "select * from student where email= '".$_REQUEST['user_id']."' && password ='".$_REQUEST['password']."'";
$result=mysql_query($sql1)
or exit("Sql Error".mysql_error());
$num_rows=mysql_num_rows($result);
if($num_rows>0)
{
session_start($_SESSION['Login']);
Echo "You have logged in successfully";
header("Location: statistics.html");
}
else
{
echo "Wrong username or password.";
}
}
}
?>
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PHP Login Form</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="row" style="margin-top:20px">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form name="form_login" method="post" action="login.php" role="form">
<fieldset>
<h2>Please Sign In</h2>
<hr class="colorgraph">
<div class="form-group">
<input name="user_id" type="text" id="user_id" class="form-control input-lg" placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
</div>
<span class="button-checkbox">
<button type="button" class="btn" data-color="info">Remember Me</button><!-- Additional Option -->
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<hr class="colorgraph">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" name="Submit" value="Login" class="btn btn-lg btn-success btn-block">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
And statistics.html (Page that should only be accessible when logged in)
<?php
include ("login.php")
session_start();
if(!isset($_SESSION['Login']))
{
header("Location:login.php");
die();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Personal Website</title>
<link rel="stylesheet" href="../../CSS/stylesheetmain.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>
<body>
<!--Navigation Bar-->
<div class="row">
<div class="darkgrey column col-md-8 col-md-offset-2 col-xs-12 col-s-12">
<nav class="navbar navbar-background-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><!--Reference: Bootstrap, 2015. getbootstrap.com. [Online] Available at: http://getbootstrap.com/ [Accessed 01 April 2015]-->
<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"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li><!--Edits made: Removed active button -->
<li>About Me</li>
<li>Blog</li>
<li>Contact Me</li>
<li>Login</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="row">
<div class="navbarbottom column col-md-8 col-md-offset-2 col-xs-12 col-s-12"></div>
</div>
<!--Page Title-->
<div class="row">
<div class="title mediumbluetext col-md-8 col-md-offset-2 col-xs-0 col-s-0">
<center><h1>Statistics</h1></center>
</div>
</div>
<!--Main Body-->
<div class="row">
<!--Left Column Spacer-->
<div class="maintextleftbackground column col-md-2 col-xs-0 col-s-0">
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-52f8f8c0164b330f" async="async"></script>
</div>
<!--Middle Column-->
<div class="maintext80 column col-md-8 col-xs-12 col-s-8 col-s-offset-2"><br>
<div id="main-chart-container"></div>
<div id="breakdown-chart-container"></div>
<div id="embed-api-auth-container"></div>
<div id="view-selector-container"></div>
</div>
<!--Right Column Spacer-->
<div class="maintextrightbackground column col-md-2 col-xs-0 col-s-0">
</div>
</div>
<!--Footer Bar-->
<div class="row">
<div class="darkgrey column col-md-8 col-md-offset-2 col-xs-12 col-s-12">
<nav class="navbar-background-color">
<div class="container-fluid">
<p class="navbar-text navbar-right">SiteMap</p>
</div>
</nav>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>
</body>
</html>
No matter what I try, I can't seem to get the code to work. The files are in the same directory as well.
Any help with this would be greatly appreciated.
A few things wrong here but you're on the right track.
You are VERY susceptible to SQL injection. Please read about it.
Your form uses POST so your PHP should use $_POST and not $_REQUEST
You cannot set a session variable by passing it through to session_start. You need to set the variable like so: $_SESSION['isLoggedIn'] = true.
You are echoing right before you issue a header command. You cannot output anything before redirecting.
I am trying to create a simple blog entry form where a user enters the title, blog entry and submits it. The form should then insert the 'blog entry' into MYSQL using the insert query.
I am getting NO errors.
When I submit form nothing is changed, the database has no new entry.
<?php
session_start();
date_default_timezone_set('America/Mexico_City');
if (!isset($_SESSION['usuario_usuario'])) {
header("Location: login");
} else {
include_once 'config.php';
$guardar_post = $conn -> prepare("INSERT into entries (post_title, post_content, created_at, updated_at) VALUES (:titulo_post, :contenido_post, :created_at, :updated_at);");
$guardar_post ->bindParam(":titulo_post", $titulo_post);
$guardar_post ->bindParam(":contenido_post", $contenido_post);
$guardar_post ->bindParam(":created_at", $created_at);
$guardar_post ->bindParam(":updated_at", $updated_at);
if (isset($_POST['enviar'])) {
$titulo_post = $_POST['titulo'];
$contenido_post = $_POST['editor1'];
$created_at = date("Y-m-d H:i:s");
$updated_at = date("Y-m-d H:i:s");
$guardar_post -> execute();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href=" bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href=" bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href=" dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href=" bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- CKEditor -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<?php include_once 'nav.php'; ?>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Nuevo Post</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Redactar nuevo post
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-10">
<form role="form">
<div class="form-group">
<label>Título</label>
<input class="form-control" name="titulo">
<p class="help-block">Entre el titulo del post.</p>
</div>
</form>
</div>
<div class="col-lg-10">
<div class="form-group">
<label>Text area</label>
<textarea name="editor1" id="editor1" class="form-control" rows="15"></textarea>
</div>
</div>
</div>
<div class="row">
<div class=" col-lg-5">
<p>
<button type="button" class="btn btn-outline btn-success" name="enviar">Enviar</button>
<button type="button" class="btn btn-outline btn-danger">Borrar</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src=" bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src=" bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src=" bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src=" dist/js/sb-admin-2.js"></script>
<!-- Replace the <textarea id="editor1"> with a CKEditor -->
<script>CKEDITOR.replace( 'editor1' );</script>
the config.php file is:
<?php
$base = "mysql:host=localhost;dbname=bworld";
try {
$conn = new PDO($base, 'diego', 'diego');
} catch (PDOException $e) { echo $e; }
Does anybody know what I'm doing wrong. I am new to PHP and I have no idea how to debug a problem when I'm getting no errors!
You have to put all your fields inside <form> tag including your submit button
I also added type="submit" to your Enviar button
<div id="wrapper">
<!-- Navigation -->
<?php include_once 'nav.php'; ?>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Nuevo Post</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Redactar nuevo post
</div>
<div class="panel-body">
<form role="form">
<div class="row">
<div class="col-lg-10">
<div class="form-group">
<label>Título</label>
<input class="form-control" name="titulo">
<p class="help-block">Entre el titulo del post.</p>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<label>Text area</label>
<textarea name="editor1" id="editor1" class="form-control" rows="15"></textarea>
</div>
</div>
</div>
<div class="row">
<div class=" col-lg-5">
<p>
<button type="button" class="btn btn-outline btn-success" name="enviar" type="submit">Enviar</button>
<button type="button" class="btn btn-outline btn-danger">Borrar</button>
</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
It was resolved with the method = post on the <form> tag
So, sef4eg was kind of right.
Here is the code:
<div class="panel-body">
<form role="form" action="" method="post">
<div class="row">
<div class="col-lg-10">
<div class="form-group">
<label for="titulo">Título</label>
<input id="titulo" class="form-control" name="titulo">
<p class="help-block">Entre el titulo del post.</p>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<label for="editor1">Text area</label>
<textarea name="editor1" id="editor1" class="form-control" rows="15"></textarea>
</div>
</div>
</div>
<div class="row">
<div class=" col-lg-5">
<p>
<button type="submit" class="btn btn-success btn-success" name="enviar">Enviar</button>
<button type="button" class="btn btn-outline btn-danger">Borrar</button>
</p>
</div>
</div>
</form>
</div>
i am new to php framework and bootstrap working on CodeIgnitor 3.0.
I have simple navigation bar for signup and login clicking on login redirects to another page where is another login button clicking on which should open the popup
login form but it's not working??
//my nav bar
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="robots" content="NOODP"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?= base_url();?>css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<style>
body {
padding-top: 0px;
}
#media (max-width: 1000px) {
body {
padding-top: 0px;
}
}
</style>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">SignUp</li>
<li>Login</li>
</ul>
</div>
</nav>
</div>
//login.php in views folder
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="robots" content="NOODP"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?= base_url();?>css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<div class="container">
<div class="row">
<a class="btn btn-primary" data-toggle="modal" href="#myModal" >Login</a>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p><button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
Register
</div>
</div>
</div>
</div>
What should i do if i want that login page to popup on homepage???
You have a couple of issues that you need to correct. To get the modal working you need to remove the hide class on the modal.
<div class="modal hide" id="myModal">
should be
<div class="modal" id="myModal">
Also, the hyperlink should have data-target (not href). So
<a class="btn btn-primary" data-toggle="modal" href="#myModal">Login</a>
should be
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</a>
These changes should get the modal running, but there are other corrections you need to do
In both your files you are loading bootstap, jquery and then bootstrap again. You only need to load bootstrap once and it should be after the jQuery, So
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
should be
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
Here is the complete //login.php that should work (I've added body and title tags for completeness and closed the html tag)
I've also replaced the script and css with CDN versions to take out any problems with your local js files. Do swap them back once you get it working.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
<meta name="robots" content="NOODP"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</a>
<div class="modal" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p>
<button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
Register
</div>
</div>
</div>
</div>
</body>
Here is my Code for the Layout Blade
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Smart Bus</title>
<!-- css section start -->
{{ HTML::style('assets/css/style.css') }}
<!-- js section start -->
</head>
<body>
<div class="main-total-container">
<div class="main-content-container home-main-container"> <!-- main content container start -->
<div class="login-tot-container"> <!-- login panel start -->
#yield('body')
<div class="shodow_box">
</div>
</div>
</div>
</div>
</body>
</html>
And here is the code for the Home :
#extends('layouts.loginlayout')
#section('body')
<div class="login-panel">
<div class="logo-login">
<img src="assets/images/logo.png" alt="MashaTaxi"/>
</div>
<div class="welcome-panel">
<h3>Welcome Masha Taxi</h3>
</div>
<div class="log-head-panel">
<h3>Login</h3>
</div>
<form action="#" method="post" enctype="multipart/form-data">
<ul>
<li><span class="icon username-icon"></span><input type="text" placeholder="Username" /></li>
<li><span class="icon password-icon"></span><input type="password" placeholder="Password" /></li>
<li>
<input type="submit" value="Submit"/>
</li>
<li>
Forgot password
</li>
</ul>
</form>
</div>
But whenever i use to see the pay, it blade appears wrongly. i mean it is not rendering properly.
So, when i see the page source it is displaying like this
<div class="login-panel">
<div class="logo-login">
<img src="assets/images/logo.png" alt="MashaTaxi"/>
</div>
<div class="welcome-panel">
<h3>Welcome Masha Taxi</h3>
</div>
<div class="log-head-panel">
<h3>Login</h3>
</div>
<form action="#" method="post" enctype="multipart/form-data">
<ul>
<li><span class="icon username-icon"></span><input type="text" placeholder="Username" /></li>
<li><span class="icon password-icon"></span><input type="password" placeholder="Password" /></li>
<li>
<input type="submit" value="Submit"/>
</li>
<li>
Forgot password
</li>
</ul>
</form>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Smart Bus</title>
<!-- css section start -->
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/masnataxi/assets/css/style.css">
<!-- js section start -->
</head>
<body>
<div class="main-total-container">
<div class="main-content-container home-main-container"> <!-- main content container start -->
<div class="login-tot-container"> <!-- login panel start -->
<div class="shodow_box">
</div>
</div>
</div>
</div>
</body>
</html>
What is the mistake i am doing while using the blade layout
I am using the
#extends('layouts.loginlayout')
#section('body')
in proper way also i #yield('body') in the proper position.
What is the mistake i am doing and how can i fix this ?
Update :
For better understanding
The HTML Tag should display first, then the body then the HTML Should end
You forgot to #stop for #section('body')