I have a website where I want to setup multiple layouts.
auth layout : for (login, register etc) pages
dashboard layout: for authenticated users to show dashboard and all other pages related to it there.
I have tried to change root view in controller but it didn't work
Inertia::setRootView('dashboard');
dashboard.blade.php : it contains sidebar for logged in users and have different style theme
<!doctype html>
...
<div class="rt-wrapper">
#include('partials.sidebar')
<main id="rt-main" class="rt-main rt-haslayout">
<div class="rt-dashboard">
#inertia
</div>
</main>
</div>
...
</html>
auth.blade.php : it only contains login, register etc pages and no sidebar with different style theme.
<!doctype html>
...
<div class="rt-wrapper rt-wrappernopadding">
<div class="rt-loginpagewrapper">
#inertia
</div>
</div>
...
</html>
Related
Im with some doubts about how to strucure the views folder on laravel. For example a blog site where we have this structure in the homepage:
Header (where we have a menu with: a link to homepage, search bar to search for posts, sign in and login buttons)
Then a section with the last 5 posts.
Then a section with the most viewed posts.
And then a footer.
How we can structure this homepage in terms of views? For example maybe we can something like this:
-views
- layouts
- header.blade.php
- footer.blade.php
- posts
- lastposts.blade.php
- mostviewed.blade.php
- single.blade.php
- layout.blade.php
Do you think its ok? Because Im testing this and it is not working. For example in the layout.blade.php I have:
<!DOCTYPE html>
<html lang="en">
<head>
....
<link href="css/app.css" rel="stylesheet">
</head>
<body>
#include('layouts.nav')
#yield('lastposts')
#yield('mostviewed')
#include(layouts.footer')
</body>
</html>
And I get the header and the footer when I access the page corretly, but the both #yields dont show nothing.
In the lastposts.blade.php to show the last 5 posts I have:
#extends('layout')
#section('lastposts')
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
#endsection
I have the same logic for the mostviewed.blade.php, but again, the #yield('mostviewed') dont show nothing.
Do you know what is not corret?
Routes file:
Route::get('/', function () {
return view('layout');
}
I have just this route because I just have the homepage for now.
You created the wrong view. The parent view is layout, it doesn't know about mostviewed and lastposts. That's why you wrote #extends('layout'), that way when you create your content view, it will know that it has to extend stuff from layout.
Route::get('/', function () {
return view('posts.mostviewed');
}
I have a web site with a page having web form to enter data into mysql database.
Now requirement has changed and I need to convert the whole web site to laravel.
In current web page there is index.php which has a menu strip and a iframe. on clicking a menu item the linked page is opened in the Iframe.
Now How to achieve the same flexiblity using Laravel.
How to redirect/route the web form in the iframe.
Below is the index.php
<html>
<head>
<script type="text/javascript" src="JS/header.js"></script>
<link href="css/stylesheets.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menustrip">
<ul>
<li>Register</li>
<li>Search</li>
</ul>
</div>
<div class="iframe" style="position:fixed;top:62px; left:0; width:100%; height:100%;" >
<iframe name="main" id="main" src="" frameborder="0" width="99%" height="95%" align="left"><FONT FACE=ARIAL SIZE=3 COLOR="RED">Your Browser doesn't Support Required Component.</FONT></iframe>
</div>
</body>
</html>
You can use iframe in Laravel blade like this.
This is for local .html file(file in public dir)
<iframe src="{{URL::to('/')}}/your file path here" width="100%" height="600"></iframe>
This is for the online url
<iframe src="http://www.onlineicttutor.com/wp-content/uploads/2016/04/pdf-at-iframe.pdf" width="100%" height="300"></iframe>
I think that the OpenForm() functions just sets the src of the iframe to the register.php in first case and to search.php so instead of going to register.php or search.php you define these at the route file.
in Route.php define the register
Ex:
Route::get('register', function () {
//code to go here or use controllers
return view('register');
});
Then just set the src of the iframe to register and you will have the same approach as your site in core PHP.
I've a master layout like this:
<head>
#yield('styles')
</head>
<body>
#include('header')
<div class="container-fluid">
#yield('content')
</div>
#yield('scripts')
</body>
Now I've following structure in page content:
#section('content')
<div class="page-content">
#include('sidebarandfooter')
</div>
#endsection
#section('copyright')
#include('copyrightv2')
#endsection
Sidebarandfooter.blade.php have following:
...[CODE for sidebar]...
#yield('copyright')
It's should be called inside <div class="container-fluid"></div> as I've different class of div container for different pages.
I'm not able to yield the copyright part. I've different copyright section for different pages. Is it wrong, how can we execute such kind?
Unfortunattely it's imposible in way you declare it because this section:
#section('copyright')
#include('copyrightv2')
#endsection
been loaded before you call this: #include('sidebarandfooter') with copyright section inside.
What you can do is to pass a key as a parameter to view to the included page content partial like this:
#section('content')
<div class="page-content">
#include('sidebarandfooter', ['copyrightsView' => 'copyrightv2'])
</div>
#endsection
and then just call inside Sidebarandfooter.blade.php in the include:
...[CODE for sidebar]...
#include($copyrightsView)
change your master layout like
<head>
#yield('styles')
</head>
<body>
#include('header')
<div class="container-fluid">
#yield('content')
</div>
#yield('copyright')
#yield('scripts')
</body>
since i am not seeing a section for copyright in your master layout
I can't looking for solution or understanding solution when I try use blade (laravel 4.2) for use with several sections.
For normal use (home extendes layout) not problem.
views/home.blade.php
#extends('layout')
#section('content')
Show content of home page
#endsection
view/layout.blade.php
<html>
<!-- Code html such head, template header... -->
...
#yield('content')
<!-- Rest code html such footer -->
...
</body>
</html>
But when I like move Rest code (footer) to another template file footer.blade.php I don't understand and try several ways.
view/footer.blade.php
#extends('layout')
#section('footer')
<hr>
<footer>
<p>© Tamainout Hébergement SARL 2015</p>
</footer>
</div>
#endsection
and change views/home.blade.php
<html>
<!-- Code html such head, template header... -->
...
#yield('content')
#yield('footer')
<!-- Rest code html such footer -->
...
</body>
</html>
But file footer.blade.php it isn't processed by laravel.
Apreciate some help
NOTE: I put code on github, abkrim/blade (only files envolved)
I think you have a syntax error in the views/home.blade.php.
Try:
#yield('footer')
instead of
#yield(footer')
EDIT:
include footer.blade.php in the layout.blade.php and remove extends from footer.blade.php
views/home.blade.php:
#extends('layout')
#section('content')
Show content of home page
#endsection
views/footer.blade.php:
<hr>
<footer>
<p>© Tamainout Hébergement SARL 2015</p>
</footer>
</div>
views/layout.blade.php:
#yield('content')
#include('footer')
I have a maybe-noob question for those who know how works jQuery mobile in its core :)
I see on some websites an ajax-like navigation, but with an URL completely changed after load (I mean, no hash at the end).
For example : http://m.wengo.fr/accueil
=> click on any link, you'll see a loader, and after a little animation the new page is loaded ; but the URL has no hash, it's a real new URL.
Is the page really fully reloaded after a first ajax-load behind ?
I don't see how this magic is did on their framework...
Thanks ;)
--
Damien
This is a rather easy implementation.
Page changes should be handled programatically with changePage function (jQuery Mobile 1.4 and below) or pageContainer change (jQuery Mobile 1.4 and above).
Solution:
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
What you need is changeHash set to false.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#open-page', function(){
alert('sdfsd');
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
});
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a class="ui-btn-right" id="open-page">Next</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
Update:
Information you need has nothing to do with jQuery Mobile.
I showed you one solution which jQuery Mobile can actually do. But this solution will permanently show original HTML file name. This is because initial HTML page is loaded into the DOM and every other page is loaded into it. jQuery Mobile thus have full control over link name.
But this is not what mentioned page is using. It is using some kind of rewrite engine. By default, rewrite engine maps a URL to a filesystem path. However, it can also be used to redirect one URL to another URL (which is done here), or to invoke an internal proxy fetch. They are probably using Apache web server with mod_rewrite module turned on.