My objection is to create a full example out of the Laravel Toolbox Kit.
I want to establish a pageset of a Controller passing data to a blade site when a correctly routed address is called.
Here is my code:
routes.php
Route::get('/game/start', function () {
return view('start');
});
GameController.php
class GameController extends BaseController
{
use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
public function Start()
{
$file = fopen("levels.dat", "r");
if($file == false)
return view('start', ['levels' => "Couldn't open file"];
$filesize = filesize($file);
$filetext = fread($file, $filesize);
$fclose($file);
$levels = str_getcsv($filetext,",");
return view('start', ['levels' => $levels,
'levelsLength' => count($levels)]);
}
}
A game.blade.php. Here also the JS references are bleeding.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Conway's Game Of Life - Game</title>
<!-- CSS And JavaScript -->
<script type="text/javascript" src="/../../vendor/twitter/bootstrap/dist/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="/../../vendor/components/jquery/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/../../vendor/twitter/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<!-- Navbar Contents -->
</nav>
</div>
#yield('content')
</body>
</html>
Then start.blade.php
#extends('layouts.game')
#section('content')
<h2>#yield('Title')</h2>
<h3>#yield('Message')</h3>
<div id="first-col">
Please select the layout you want to play with.
<form id="layout-selector" method="POST">
<!-- Watch if this dropdownSelectList works -->
<label for="selectorDropDown"> Please select the layout you want to play with. </label>
<select name="dropDownList">
<!-- This {{$level}} is a string of the Name of the Level -->
#for($i = 0; $i < $levelsLength; $i++)
<option value="{{$levels[$i]}}">{{$levels[$i]}}</option>
#endfor
</select>
<input type="submit" action="public/game/level"/>
</form>
</div>
<div id="second-col">
<img id="lightUp" style="display:none" src="../img/lightUp30.png"/>
<img id="putOut" style="display:none" src="../img/putOut30.png" />
<canvas id="createCanvas" style="">
Sorry, your browser doesn't support Canvas! Try it in another type!
</canvas>
<script type="text/javascript" src="../js/startGameScript.js"></script>
</div>
#endsection
So I would like to have a working site,since now it doesn't render. Thanks for your appreciated time and help. Any further explanation for request!
You just can't #yield inside a #section
Replace this lines
<h2>#yield('Title')</h2>
<h3>#yield('Message')</h3>
with this
<h2>{{ $Title }}</h2>
<h3>{{ $Message }}</h3>
Assuming you have $Title & $Message in your blade template.
Now you can also extend a template
<!-- Stored in resources/views/layouts/master.blade.php -->
<html>
<head>
<title>App Name - #yield('title')</title>
</head>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
</html>
<!-- Stored in resources/views/child.blade.php -->
#extends('layouts.master')
#section('title', 'Page Title')
#section('sidebar')
#parent
<p>This is appended to the master sidebar.</p>
#endsection
#section('content')
<p>This is my body content.</p>
#endsection
In this example, the sidebar section is utilizing the #parent directive to append (rather than overwriting) content to the layout's sidebar. The #parent directive will be replaced by the content of the layout when the view is rendered.
More details can be found here https://laravel.com/docs/5.1/blade#template-inheritance
You will first have to fix this block:
<script type="text/javascript" src="/../../vendor/twitter/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/../../vendor/components/jquery/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/../../vendor/twitter/bootstrap/dist/css/bootstrap.min.css" />
Files inside laravel's vendor folder cannot be referenced from blade.
Link to hosted libraries instead:
Bootstrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
For latest versions:
https://www.bootstrapcdn.com/
https://developers.google.com/speed/libraries/
Related
I have an HTML file with HTML code. How can I change from the HTML file to a PHP file?
The following is the HTML code:
<html>
<head>
<title>Instascan – Demo</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
</head>
<body>
<div id="app">
<div class="sidebar">
<section class="scans">
<h2>Scans</h2>
<ul v-if="scans.length === 0">
<li class="empty">No scans yet</li>
</ul>
<transition-group name="scans" tag="ul">
<li v-for="scan in scans" :key="scan.date" :title="scan.content">{{ scan.content }}</li>
</transition-group>
</section>
</div>
<div class="preview-container">
<video id="preview"></video>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Change your HTML file extension. For example, index.html will be index.php.
Just change file extension .html to .php (index.html to index.php).
If you want to add any PHP code, you have to use the <?php and ?> tags.
In your case, just change the extension of your filename. Example: yourfilename.html to yourfilename.php.
I am currently creating my first website and i have some trouble, i want to include a page between a navbar and a vertical bar, and i want to change to page to include when a click on a button of my vertical bar. Here is a screen :
Screen of my Website
And here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Memeable | The 1# world meme generator</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap-social.css" rel="stylesheet">
</head>
<body>
<div >
<?php
include("head.php");
?>
</div>
</body>
Here is my head.php :
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Memeable</a>
</div>
</div>
</nav>
<div class="vertical-menu">
Premier
Deuxième
Troisième
Quatrième
</div>
I'm sure that the solution is easy but i don't see how to do.
Thank you for your help !
To show your content in your "content area" use include. You provide the file name you want to load as an argument. Use an array to specify all the valid files you want to use, then use a $_GET parameter to select the correct sub page to load.
<?php
$files = array();
$files['home'] = 'home.php';
$files['contact'] = 'contact.php';
$files['whatever'] = 'you_want.php';
?>
Then later at the location where you want the content to be displayed use the following code:
<?php
if (isset($_GET['nav'], $files[$_GET['nav']])) {
include $files[$_GET['nav']];
} else {
include $files['home']; // default page
}
?>
To "call" the right sub page add the ?nav=... query parameter to your URLs like
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
I have created a master.blade.php file as follow:
<!DOCTYPE html>
<html lang="en">
<head>
#include('layouts.head_files')
</head>
<body>
<!-- START MAIN WRAPPER -->
<div id="wrapper">
<!-- SEARCH FORM START -->
#yield('info_panel')
<!-- SEARCH FORM END -->
<!-- Start Page Content -->
<div class="recent-job">
<div class="container">
<div class="row">
<div class="col-md-12">
#yield('main_content')
<div class="spacer-2"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- End Page Content -->
</div>
<!-- END MAIN WRAPPER -->
#include('layouts.footer_files')
</body>
</html>
This is my footer_file.blade.php file
<script type="text/javascript">
$(document).ready(function(){
$('input.location').typeahead({
name: 'location',
local: ['London','Birmingham','Manchester', 'Liverpool']
});
});
</script>
<script src="<?=asset('assets');?>/bootstrap/js/bootstrap.min.js"></script>
<script src="<?=asset('assets');?>/js/jquery.easytabs.min.js" type="text/javascript"></script>
<script src="<?=asset('assets');?>/js/modernizr.custom.49511.js"></script>
<script type="text/javascript" src="<?=asset('assets');?>/jquery.min.js"></script>
<script type="text/javascript" src="<?=asset('assets');?>/js/typeheads.min.js"></script>
As you can see I have an array of some cities in a function in my footer_file files. I have hard coded it for now but I want to fetch the list of all cities from database and show it here. This footer is included in every page. I am finding it difficult to do it in Laravel. It was easy in Codeigniter. Can I access the database directly from my view? Please help.
Occasionally, you may need to share a piece of data with all views that are rendered by your application. You may do so using the view facade's share method. Typically, you should place calls to share within a service provider's boot method. You are free to add them to the AppServiceProvider or generate a separate service provider to house them.
public function boot()
{
$data = App\Model::get();
View::share('data', $data);
}
https://laravel.com/docs/5.4/views#sharing-data-with-all-views
Alternative to this solution is using view composer:
View::composer('layouts.footer_files', function ($view) {
....
});
I'm trying to set and return a layout that's attached to a controller. I can successfully set the content for #yeild('content') but I cannot both set and return the template. I can either return the template, with no content set, or I can return the set content, with no layout template.
master.blade.php
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
#yield('styles')
</head>
<body>
<div class="container">
<h1>Google Earth project!</h1>
Saucey sauce for laravel
<hr>
<h4>Content</h4>
#yield('content')
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
#yield('scripts')
</body>
</html>
HotspotController.php
...
public function show($uid, $lid, $hid)
{
// $this->layout->content = View::make('hotspot.profile');
$this->layout->content = 'a string';
return $this->layout;
}
....
There is apparently a difference between #yield('content') and {{ $content }}.
In order to accomplish what you're trying to accomplish you will have to use the latter way of declaring variable content on the blade template.
HotspotController.php
protected $layout = 'layouts.master';
...
public function show($uid, $lid, $hid)
{
$this->layout->content = View::make('hotspot.profile');
}
...
hotspot.profile.blade.php
I am a hotspot profile
master.blade.php
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
#yield('styles')
</head>
<body>
<div class="container">
<h1>Google Earth project!</h1>
Saucey sauce for laravel
<hr>
<h4>Content</h4>
{{ $content }}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
#yield('scripts')
</body>
</html>
Alternatively...
You can keep #yield('content') in your master template, but you will have to modify hotspot.profile.blade.php to incorporate #section('content') #stop. See hotspot.blade.php
master.blade.php
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
#yield('styles')
</head>
<body>
<div class="container">
<h1>Google Earth project!</h1>
Saucey sauce for laravel
<hr>
<h4>Content</h4>
#yield('content')
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
#yield('scripts')
</body>
</html>
hotspot.profile.blade.php
#section('content')
I am a hotspot profile
#stop
I would like to kindly ask you to help me understand how does the view part "see" the layout part in the zend framework.
In my way of thinking(and I'm thinking like a noob) there should be a root that directs the view (index.phtml) to the layout (designer.phtml) right?
Below is not my code, I'm just trying to make sense of it.
This is the view part of the code, the root of the file is /applications/xampp/xamppfiles/htdocs/mts/applications/modules/designer/views/scripts/index/ index.phtml
<div style="width:100%; margin-bottom:20px; margin-top:5px;">
<span style="padding-left:10px; font-size:18px;">Designer <img alt="(?)" src="/style/images/help-8.png"/></span>
</div>
<?= $this->leftmenu; ?>
<div id="picFrame" style="text-align: center"></div>
<div id="middle_admin_content">
<fieldset>
<legend id="bookTitleLegend">Please select a book first</legend>
<div id="fileBox"><div id="innerBox"></div></div>
<div id="uploadSuccess" class="statusBox" style="display: none; background-color: #D9F5CB"><span>File Uploaded Successfully</span></div>
<div id="uploadFailed" class="statusBox" style="display: none; background-color: #EBB9B9"><span>File Upload Failed</span></div>
<div id="aboutTheBook" style="display: none">
<form id="aboutTheBookForm" action="" method="post">
<textarea name="about_the_book" id="about_the_book" cols="60" rows="10"></textarea>
<input type="submit" value="Save Text" name="saveCoverText"/>
<input type="hidden" value="" name="bookid" id="bookidField"/>
</form>
</div>
</fieldset>
</div>
This is the layout part of the code, the root of the file is
/applications/xampp/xamppfiles/htdocs/mts/applications/layouts/scripts/designer.phtml
<?php echo $this->doctype() ?>
<html>
<head>
<title>InTech - Design</title>
<?php
echo $this->headTitle() . "\n";
echo $this->headMeta() . "\n";
?>
<?
echo $this->headStyle() . "\n";
echo $this->headLink() . "\n";
echo $this->headScript(). "\n";
?>
<?
/*
$jsContainer = $this->Minify_Container();
$jsContainer->appendFile('/js/jquery-1.4.2.min.js');
$jsContainer->appendFile('/js/jquery-ui-1.8.2.custom.min.js');
$jsContainer->appendFile('/js/jquery.autocomplete.js');
$jsContainer->appendFile('/js/jquery.bgiframe.min.js');
$jsContainer->appendFile('/js/jquery.idTabs.min.js');
$jsContainer->appendFile('/js/jquery/jquery.form.js');
$jsContainer->appendFile('/js/uploadify/jquery.uploadify.v2.1.4.min.js');
$jsContainer->appendFile('/js/designer/designer.js');
$jsContainer->appendFile('/js/scrollpane/jquery.jscrollpane.min.js');
$jsContainer->appendFile('/js/scrollpane/jquery.mousewheel.js');
echo $this->Minify($jsContainer, 'js');
$cssContainer = $this->Minify_Container();
$cssContainer->appendStylesheet('style/ui.all.css');
$cssContainer->appendStylesheet('js/jquery-ui-1.8.2.custom.css');
$cssContainer->appendStylesheet('style/site_css/designer_style.css');
$cssContainer->appendStylesheet('js/scrollpane/jquery.jscrollpane.css');
echo $this->Minify($this->headLink(), 'css');
echo $this->Minify($cssContainer, 'css');
*
*/
?>
<!-- MINIFIED ABOVE ------------------------->
<link rel="shortcut icon" href="/style/site_images/favicon.ico" type="image/x-icon" />
<link type="text/css" href="/style/ui.all.css" rel="stylesheet" />
<link type="text/css" href="/js/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<link type="text/css" href="/style/site_css/designer_style.css" rel="stylesheet" />
<link type="text/css" href="/js/scrollpane/jquery.jscrollpane.css" rel="stylesheet" />
<!--<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>-->
<script type="text/javascript" src="/assets/modules/manager/basic/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/assets/modules/manager/basic/js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="/js/jquery.idTabs.min.js"></script>
<!--<script type="text/javascript" src="/js/jquery/jquery.form.js"></script>-->
<script type="text/javascript" src="/js/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript" src="/js/designer/designer.js"></script>
<script type="text/javascript" src="/js/scrollpane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/js/scrollpane/jquery.mousewheel.js"></script>
<!-- -->
</head>
<body>
<div id="dialog" style="display:none; font-size:12px; background-color:#ffffff;">
<div id="dialog_left" style="float:left; width:150px">
</div>
<div id="dialog_right">
</div>
</div>
<div id="dialogDelete" style="display: none">Delete Item?</div>
<!-- HEADER SITE AREA :: START -->
<div id="header">
<?php
$front = Zend_Controller_Front::getInstance();
$module = $front->getRequest()->getModuleName();
echo $this->render('header-designer.phtml', array(
'authenticated' => $this->authenticated
));
?>
</div>
<!-- HEADER SITE AREA :: END -->
<!-- CONTENT :: START -->
<div id="contentAdmin">
<div id="helpDialog" style="display: none"></div>
<?php echo $this->layout()->content ?>
</div>
<!-- CONTENT :: END -->
<!-- FOOTER SITE AREA :: START -->
<div id="footer">
<?php echo $this->render('footer.phtml', array(
'authenticated' => $this->authenticated
)) ?>
</div>
<!-- FOOTER SITE AREA :: START -->
</body>
</html>
The specific mechanics of how all this implemented involves bootstrapping application resources and registering late-running front-controller plugins.
But the short answer is the "system" knows how to find/render the view-script associated to the requested action and how to find/render your layout script with the view-script content injected.
Remember, at some point, you bootstrapped a Layout resource, probably in configs/application.ini.
You also bootstrapped a View resource - either explicitly or implicitly - which knows how to render your headTitle(), headMeta(), headScript(), etc (all rendered using view-helpers), as well as the layout.
So, there's really no mystery that the "system" is aware of all this stuff.