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')
Related
What i am trying to do is to submit my form but this form is not working.
If i run this code without extending my layout file its work but inside this code form is not working.
Can you check my code and tell my mistake.
Thanks in advance
Form.blade.php
#extends('layouts.login')
#section('title')
TSI(New Buyer)
#endsection
#section('page-header')
BUYER
#endsection
#section('breadcrumb1')
Marketing
#endsection
#section('breadcrumb2')
Add new buyer
#endsection
#section('content')
<form method="POST" action="{{route('inquiry.store')}}">
{{ csrf_field()}}
<input type="text" name="name">
<input type="submit" value="submit">
</form>
#endsection
Layout file that contain the master layout
login.blade.php
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
#include('include.head')
</head>
<body class="theme-blush">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="m-t-30"><img class="zmdi-hc-spin" src="{{asset('assets/images/loader.svg')}}" width="48" height="48" alt="Aero"></div>
<p>Please wait...</p>
</div>
</div>
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
#include('include.sidebar')
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<!-- Main Content -->
<section class="content">
<div class="body_scroll">
<div class="block-header">
<div class="row">
<div class="col-lg-7 col-md-6 col-sm-12">
<h2> #yield('page-header')</h2>
<ul class="breadcrumb">
<li class="breadcrumb-item"><i class="zmdi zmdi-home"></i> TSI</li>
<li class="breadcrumb-item">#yield('breadcrumb1')</li>
<li class="breadcrumb-item active">#yield('breadcrumb2')</li>
</ul>
<button class="btn btn-secondary btn-icon mobile_menu" type="button"><i class="zmdi zmdi-sort-amount-desc"></i></button>
</div>
<div class="col-lg-5 col-md-6 col-sm-12">
#yield('plus-btn')
</div>
</div>
</div>
<div class="container-fluid">
#yield('content')
</div>
</div>
</section>
#include('include.script')
</body>
</html>
<?php
// check for submit
if(filter_has_var(INPUT_POST, 'submit')){
echo 'Submitted';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Chad's Portfolio</title>
<link rel="stylesheet" type="text/css" href="mainstyles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"
crossorigin="anonymous">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<nav class="navbar sticky-top">
<h1>Contact</h1>
<ul class="nav justify-content-end">
</li>
<li class="nav-item">
<a class="nav-link" href="resume.html">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="skills.html">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li <li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</ul>
</nav>
<body>
<!-- banner container Class -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card mb-3">
<img class="card-img-top" style="height: 240px"; src="images/cards/tech-banner.jpg" alt="Card image cap">
</div>
</div> <!-- End of card Class -->
</div>
</div> <!-- End of banner container Class -->
<!-- Contact Form -->
<div class="container">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"
>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control"
value="">
</div> <!-- end of form group name -->
<div class="form-group">
<label>Email</label>
<input type="text" name="email" class="form-control"
value="">
</div> <!-- end of form group email -->
<div class="form-group">
<label>Message</label>
<textarea name="Message" class="form-control"></textarea>
</div> <!-- end of form group message -->
<br>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
</div> <!-- end of container -->
<!-- End Contact Form-->
<div class="footer"> <!-- footer Class -->
<div id="socMed"> <!-- fontAwesome Social Media icons div -->
<ul>
<li><i class="fab fa-facebook-f" aria-hidden="true"></i></li>
<li><i class="fab fa-linkedin-in" aria-hidden="true"></i></li>
<li><i class="fab fa-google-plus-g" aria-hidden="true"></i></li>
</ul>
</div> <!-- End of fontAwesome Social Media icons div -->
</div> <!-- End of for footer Class -->
<!-- End of Social Media icons ID -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
I have contact page in html and am using PHP. I have a form that takes user's Name, Email Address and Message. I have a bootstrap 4 type of form to take the values. I am right now using windows 10 using XAMPP with Apache Server MySQL running.
The actual problem that I have is when I try to echo results "Submitted" when clicking on my contact form submit button, resulting in Access forbidden "You don't have permission to access the requested object. It is eather read-protected or not readable by the server." Below that its Error 403 localhost Apache/2.4.33 (Win32) OpenSSL/1.1.0g PHP/7.2.4 message.
What do I do to ensure that permissions are set? I am new to XAMPP, please keep this in mind. Note I have the contact page saved as contact.html, does it require it to be contact.php instead to run the script?
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.
I'm creating a regitration page which includes php,html and css in bootstrap.Here is my php file.
<?php include "header.php"; ?>
<html>
<head></head>
<body>
<!--content-->
<div class=" container">
<div class=" register">
<h1>Register</h1>
<?php if(isset($_GET[ 'error'])) { echo '<font color="red">'.$_GET[ 'error']. '</font>'; echo '<br><br>'; } if(isset($_GET[ 'ok'])) { echo '<font color="blue">You are successfully Registered..</font>'; echo '<br><br>'; } ?>
<form action="process_register1.php" method="POST">
</div>
<div class="col-md-6 register-bottom-grid">
<h3>Personal infomation</h3>
<div>
<span>Full Name</span>
<input type="text" size="30" maxlength="30" name='fnm'>
</div>
<div>
<span>Username</span>
<input type="text" size="30" maxlength="30" name='unm'>
</div>
<div>
<span>Password</span>
<input type='password' name='pwd' size="30">
</div>
<div>
<span> Confirm password</span>
<input type='password' name='cpwd' size="30">
</div>
<div>
<span> Gender</span>
<input type="radio" value="Female" name="gender" id='f'>Female
<input type="radio" value="Male" name="gender" id='m'>Male
</div>
<div>
<span>E-mail address</span>
<input type='mail' name='mail' size="30">
</div>
<div>
<span> No contact</span>
<input type="text" name='contact' size="30">
</div>
<div>
<span> City</span>
<select style="width: 195px;" name="city">
<option>Tirana</option>
<option>Korca</option>
<option>Vlora</option>
<option>Kavaja</option>
</select>
</div>
<input type="submit" value="submit">
</div>
<div class="clearfix"></div>
</form>
</div>
</div>
</body>
</html>
Here is my header.php file:
<?php session_start(); require( 'config.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Online Shopping</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<!--//fonts-->
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>
$(document).ready(function() {
$(".memenu").memenu();
});
</script>
<script src="js/simpleCart.min.js">
</script>
</head>
<body>
<!--header-->
<div class="header">
<div class="header-top">
<div class="container">
<div class="search">
<form>
<input type="text" value="Search " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}">
<input type="submit" value="Go">
</form>
</div>
<div class="header-left">
<?php if(isset($_SESSION[ 'status'])) { echo '<ul><li>Logout</li></ul>'; } else { echo '<ul>
<li ><a href="login1.php" >Login</a></li>
<li><a href="register.php" >Register</a></li>
</ul>'; } ?>
<div class="cart box_1">
<a href="checkout.html">
<h3> <div class="total">
<span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div>
<img src="images/cart.png" alt=""/></h3>
</a>
<p>Empty Cart
</p>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="head-top">
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="">
</a>
</div>
<div>
<h1 class="title">Welcome
<?php
if(isset($_SESSION['status']))
{
echo $_SESSION['unm'];
}
else
{
echo 'Book Store';
}
?>
</div>
<div class=" h_menu4">
<ul class="memenu skyblue">
<li class="active grid"><a class="color8" href="index1.php">Home</a></li>
<li><a class="color1" href="#">Categories</a>
<div class="mepanel">
<div class="row">
<?php
$query="select * from category ";
$res=mysqli_query($conn,$query);
while($row=mysqli_fetch_assoc($res))
{
echo' <div class="col1">
<div class="h_nav">
<ul>';
echo '<li>
<a href="subcat.php?cat='.$row['cat_id'].'&catnm='.$row["cat_nm"].'">'.$row["cat_nm"].'
</a>
</li>';
}
echo' </ul>
</div>
</div>';
mysqli_close($conn);
?>
<li><a class="color6" href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
The problem is when I try to open the files from localhost only the header of the page appears so this is the result:
How is it possible that the form doesnt appear?
I assume, that your header.php begins a proper html page with doctype, <html> etc... but after
<?php include "header.php"; ?>
you start your html file again:
<html>
<head></head>
<body>
Make sure your markup is valid!
So it looks like your header file isn't a header, it's a complete HTML document. It opens the document (<html>) and then closes it (</html>). So it makes sense that any HTML you put after including the header won't get rendered - the browser will render the header and assume the document is complete.
Instead you header file should end where the markup for the header ends. Usually this is the opening tag for the container of your content.
Then when you include the header file, it will contain all the markup up to where your content begins, and in your form's file you can put the code for the form and it'll get rendered next.
In your case, try removing the </body> and </html> tags from the header file. That will likely work, though your markup will likely need to be updated to make the design coherent. Also, since those are being created by your header, remove the <html>, <head></head>, and <body> tags from your form's file.
You can also create a footer file that you can include after your form content, and it will close the container and the body and html tags.
Edit
May have scrolled to the end of the first code block when I saw the </body></html>, so you can probably disregard the advice to remove them from the header file - they appear to be there only in my imagination. Removing the opening <html>, <body>, and <head> tags from the from file should do the trick however.
I've below HTML code which I intend to use with index.php file but there seems a problem.
<!-- nav bar -->
<nav id="top">
<nav class="navbar navbar-xs navbar-custom">
<div class="container-fluid" >
<div class="nav pull-right">
<font face="bebas">
<ul class="list-inline">
<li> 123456789 </li>
<li class="dropdown"><i class="fa fa-user"></i> My Account <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> Wish List (0)</li>
<li><i class="fa fa-shopping-cart"></i> Shopping Cart</li>
<li><i class="fa fa-share"></i> Checkout</li>
</ul>
</div>
</div>
</nav>
</nav>
<!-- searchbar and logo -->
<header id="margin">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div id="logo">
<center> <span class="tab-space"></span> <img src="J:\lawn\home\artwork\lawn.png" height="42px" />
</div>
</div>
<div class="col-xs-5">
<div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Search" class="form-control" border-rad>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" style="border-radius: 0;">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
</font>
</header>
index.php
<!DOCTYPE html>
<html>
<head>
<title> experiment ground </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <meta name="viewport" content="width=device=width, initial-scale=1"> omitted to remove unresponsiveness of columns -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<?php include('includes\header.html'); ?>
</body>
</html>
i want an output like this but all i am getting is this.
is it a problem with using bootstrap or something else entirely.
my main purpose is to use include() feature of PHP to make my code minimal. is there any other way I can include headers or footers templates or codes to a PHP page?
thank you!
Link jQuery before you include Bootstrap
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
1) open your Developer Tools (F12)
2) refresh page
3) check "console" tab
I think, you'll find answers in console.
Anyway, change your paths to relative (assuming file index.php at one tree level with bootstrap directory):
href="bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
Instead of:
href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
And do it for all files, or just connect it from CDN - it will be great ;)
Call jquery.min.js before bootstrap.min.js
The script bootstrap.min.js uses jQuery plug-in in most actions.
Also, check if the files are actually in the path described. It is highly recommended that you call the files from the main project directory.