Laravel Sub-menu Within View - laravel
Hi I am very new to Laravel and MVC frameworks in general and am looking to create a list of links (in a view within a template) that links to some content. I am using this to display a list of nine people and to display their profile description when the link is clicked on. I have created a model of what the page looks like at http://i.imgur.com/8XhI2Ba.png. The portion that I am concerned with is in blue. Is there a way to route these links to something like /about/link2 or /about?link2 while maintaining the same exact page structure but modifying the ‘link content’ section (on the right of the link menu) to show the specific link's content? I would greatly appreciate it if someone could point me in the right direction, as I have literally no clue where to go with this!
There are a couple ways you can go about doing this.
Templates
Create your route.
Im assuming a lot about your app here but hopefully you get the picture. If you need help with anything in particular, be sure to update your question with the code youve tried so it will be easier to help you.
Route::get('about/{page}', function($page)
{
$profile = Profile::where('name', $page)->first();
return View::make('about')->with('profile', $profile);
});
Modify Template.blade.php
Put this line where you wish for About.blade.php to appear.
#yield('content')
Create your view which will extend your template
#extends('Template')
#section('content')
<h2>User Profile</h2>
<ul>
<li>Name: {{ $profile->name }}</li>
<li>Last Updated: {{ $profile->updated_at }}</li>
</ul>
#stop
AJAX
This solution will utilize AJAX to grab the data from the server and output it on the page.
Route for initial page view
Route::get('about', function($page)
{
$profiles = Profile::all();
return View::make('about')->with('profiles', $profiles);
});
Feel free to follow the same templating structure as before but this time we need to add some javascript into the template to handle the AJAX. Will also need to id everything which needs to be dynamically set so we can easily set it with jquery.
#extends('Template')
#section('content')
<h2>Links</h2>
#foreach($profiles as $profile)
{{ $profile->name }}
#endforeach
<h2>User Profile</h2>
<ul>
<li>Name: <span id="profile_name">{{ $profile->name }}</span></li>
<li>Last Updated: <span id="profile_updated_at">{{ $profile->updated_at }}</span></li>
</ul>
<script>
function setProfile(a)
{
$.ajax({
method: 'get',
url: 'getProfile',
dataType: 'json',
data: {
profile: $(a).data('id')
},
success: function(profile) {
$('#profile_name').html(profile.name);
$('#profile_updated_at').html(profile.updated_at);
},
error: function() {
alert('Error loading data.');
}
});
}
</script>
#stop
Route to handle the AJAX request
Route::get('getProfile', function()
{
$profile_id = Input::get('profile');
$profile = Profile::find($profile_id);
return $profile->toJson();
});
Now, the page should not have to reload and only the profile information should be updated.
Making some assumptions here as no code posted and assuming you're using the latest version of Laravel, Laravel 5.
Lets say you have a table in your database named users and you have a Model named Users (Laravel 5 comes with the Users model as default, see app/Users.php). The users will be the base of our data for the links.
Firstly, you want to register a route so you can access the page to view some information. You can do this in the routes file. The routes file can be found here: app/Http/routes.php.
To register a route add the following code:
Route::get('users', ['uses' => 'UserController#index']);
Now what this route does is whenever we hit the URL http://your-app-name/public/users (URL might be different depending on how you have your app set up, i.e. you may not have to include public) in our web browser it will respond by running the index method on the UserController.
To respond to that route you can set up your UserController as so:
<?php namespace App\Http\Controllers;
class UserController extends Controller {
public function index()
{
}
}
Controllers should be stored in app/Http/Controllers/.
Now lets flesh out the index method:
public function index()
{
// grab our users
$users = App\Users::all();
// return a view with the users data
return view('users.index')->with('users');
}
This grabs the users from the database and loads up a view passing the users data.
Here's what your view could look like:
<!DOCTYPE html>
<html>
<head>
<title>Users Page</title>
</head>
<body>
#foreach($users as $user)
<a href="{{ URL::route('user', ['id' => $user->id]) }}">
{{ $user->username }}
</a>
#endforeach
</body>
</html>
The view code will loop through each user from the $users data we passed to the view and create a link to their user page which is different for each user based on their id (their unique identifier in the DB)
Due to the way I've named it, this would be found in app/views/users/index.blade.php - if you save files ending in blade.php you can use Laravel's templating language, blade.
Now you need to finally set up another route to respond to a user page, for example http://your-app-name/public/user/22.
Route::get('user/{id}', ['uses' => 'UserController#show']);
Then add the show method to UserController
public function show($id)
{
// this will dump out the user information
return \App\User::find($id);
}
Hope that helps a little! Wrote most of it off the top of my head so let me know if you get any errors via comment.
This question is very bare, and it is difficult to actually help your situation without you showing any code. Just to point you in the right direction though, here is what you would need.
A Model called People, this is how you will access your data.
A controller. In this controller you will do the following
Get the ID of the profile you want from the functions parameters
Find that persons information e.g. People::find($person_id);
return the profile view with that persons data e.g. return view('profile')->with('person', $person);
In your view you can then use that data on that page e.g. {{ $person->name }}
For the page that needs to display the links to the people you would have a method in your controller which..
Get all the people data e.g. People::all();
Return a view with that data return view('all-people')->with('people', $people);
You will then need a route to access an individual person. The route will need to pass the persons ID into a controller method e.g.
Route::get('get-person/{id}',
[ 'as' => 'get-person',
'uses' => 'PeopleController#getPerson' ]);
You can then use this route in your view to get the links to each person
#foreach($people as $person)
{{$person->name}}
#endforeach
This would produce the list of links you want.
Related
how to display data based on specific id in laravel?
I am new to laravel. I want to send data as id of existing data. Id comes from products.blade I send via href tag as shown below to gallery page. I have tried to find a way through other sites but it still doesn't work <a class="btn btn-success" href="/dashboard/galleries/{{ $product->id }}"><i class="ri-image-add-line text-white"></i></a> then i create a route like this Route::resource('/dashboard/galleries', DashboardGalleryController::class)->middleware('admin')->shallow(); in the controller gallery, I made like this public function index($id) { $gallery = Gallery::where('products_id', $id)->get(); return view('dashboard.galleries.index', compact('gallery')); } then inside the gallery page, I want to display a table to add images based on that id. dashboard/galleries/index.blade.php <h1>{{ $gallery->id }}</h1> should i add data inside foreach or outside?
A restful resource controller sets up some default routes for you and even names them. and ur case the logic should be inside show() function not index() check this issue it will help u same issue solved here
How to use paths/urls/routes dynamically in vue.js/laravel components
i'm trying to write my own blog software based on vue.js/laravel for learning purposes. Background I'm asking myself how i write vue.js components in which the paths/urls are not hard coded. In the following example i have a post-listing component which lists all posts from the database. The json data is returned by a laravel api route (e.g. /api/posts) In the listing i use a link to a laravel view (e.g. /posts/{id}) which shows the actual body of a specific post with {id}. Example In laravel's api.php route file i can give a name to a specific route and use it with route('api.posts.index'). That's dynamic enough i guess? api.php Route::get('', 'Api\ApiPostsController#index')->name('api.posts.index'); index.blade.php <post-listing postsview="{{ route('web.posts.show') }}" postsapi="{{ route('api.posts.index') }}"></post-listing> PostListing.vue In my vue component i refer to these properties postsview and postsapi <template> <div> <h2 class="title is-2">Recent posts</h2> <ul> <li v-for="post in posts['data']" v-bind:key="post.id"> <a :href="postsview + '/' + post.slug" v-text="post.title"></a> </li> </ul> </div> </template> <script> export default { props: ["postsapi", "postsview"], data() { return { posts: [] }; }, methods: { getPosts() { axios.get(this.postsapi).then(response => (this.posts = response.data)); } }, mounted() { this.getPosts(); } }; </script> The question Is there a "best-practice" way or at least a better approach? Somehow i'm not happy with this solution, but lacking experience, i don't know where to begin. Thanks.
There are many ways to achive this, this are a few options that I know of. 1: Use blade to pass the route to the component <component route="{{ route('route_name') }}"></component> 2: You can save a global variable with all the routes you have defined. You can use Route::getRoutes() to get all the routes and add it to your window on your front end 3: Use a library, This library does exactly what you are looking for I think. https://github.com/tightenco/ziggy If find other options please let me know, this is a common issue for most laravel developers.
Laravel 5.6 dynamic pages from a database best practice
I am using/learning Laravel 5.6 and wondered if this is the best approach in trying to accomplish dynamic pages from a database. The approach I have taken works but I feel it could be improved especially with having to retrieve the pages for the navigation bar with every request. I have a route in web.php Route::get('/', 'PageController#index')->name('index'); Route::get('/{page}', 'PageController#show'); I then have my page controller with index and show functions. public function index() { $pages = Page::all(); $posts = Post::latest('created_at')->paginate(2); return view('index', compact('posts','pages')); } public function show($uri) { $pages = Page::all(); $page = Page::where('uri', $uri)->first(); return view('templates.page', compact('page','pages')); } Now in my header.blade.php I display the list of pages like this: #foreach($pages as $page) <li class="nav-item"> <a class="nav-link" href="/{{ $page->uri }}">{{ $page->title }}</a> </li> #endforeach Now my problem is with all the other controllers I have to get the page's information from the database everytime which seems inefficient. Any advice would be appreciated. Thank you in advance.
You can share your pages data with every view automatically by adding View::share('key', 'value');in the boot method of a service provider. Alternatively you can create a view composer.
one layout blade. yield title by <title>#yield('page-title')</title> then on view, //process title using php from DB then display using #section('page-title') {{$page_title}} #endsection
Losing the css properties - Laravel
I have a menu with vocals that redirect to the same page but showing different data thanks to the id passed through the anchor. I can print the ID in the blade but unfortunately I lose all the properties of the css. Why? Menù in app.blade.php: <li>Articoli <ul class="dropdown"> <li>Persone</li> <li>Business</li> <li>Mindset</li> </ul> </li> Route in web.php: Route::get('/articoli/{articolo}', 'ArticoloController#show'); Controller: public function show($id){ $articolo = Articolo::find($id); return view('articoli',['articolo'=>$articolo]); } Erros in the console: Failed to load resource: the server responded with a status of 404 (Not Found)
I am not sure if this will solve your issue, but from V 5.2 I believe, Laravel binds models to routes automaticly. That is if the route's parameter name matches the model name in lowercase. In your case '{articoli}' https://laravel.com/docs/5.2/routing#route-model-binding This could mean that your controller function is receiving a Eloquent Model instead of an ID. Typehinting like this avoids misunderstandings: public function show(Articoli $articoli) Also you won't have to find the model anymore. If you typehint a Model like so, and no model was bound to the route, a new Model will be inserted into the function. you can also try typehinting (int $id), but honestly I don't know why you wouldn't use this awesome feature
It's important to include files js and css with the correct syntax. Like this: <script src="{{ asset('js/jquery.js') }}"></script> And not: <script src="js/jquery.js"></script>
Laravel 4 - Update Div Using Ajax
I'm using Laravel 4 and am trying to update a (#articles) div with the new articles that are retrieved from an ajax request. When I inspect the page and view the Network section, I can see the POST requests being fired off and it's not showing any errors (eg, articles appear to be returned). However, unfortunately, the #articles div is not being updated with the new information. Yet, if I do a browser refresh, the new articles are displayed. Routes.php Route::any("/dashboard/latest_sa", [ "as" => "dashboard/latest_sa", "uses" => "DashboardController#latest_sa" ]); controllers/DashboardController.php Class DashboardController extends \BaseController { ... protected function latest_sa() { if( Request::ajax() ) { // called via ajax $articles = Articles::orderBy('published_at', 'desc')->paginate(20); return json_decode($articles); } else { // fresh page load $articles = Articles::orderBy('published_at', 'desc')->paginate(20); return $articles; } } ... } app/views/dashboard/default.blade.php ... #section("content") // defined in /public/js/main.js <script type="text/javascript"> callServer(); </script> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <h4>Latest Articles</h4> <div class="articles"> <ul> #foreach ($articles as $article) <li> <img src="{{ $article->user_image }}" alt="{{ $article->article_title }}" /> {{ $article->article_title }} <div class="details"> <span class="author">{{ $article->author_name }}</span> <span class="created">{{ Helpers::time_ago($article->published_at) }}</span> <span class="symbol">{{ $article->symbol_title }}</span> </div> </li> #endforeach </ul> </div> {{ $articles->links() }} </div> ... /public/js/main.js function callServer() { setInterval(function(){ $.ajax({ type: "POST", url: "dashboard/latest_sa", success:function(articles) { $(".articles").html(articles); } }); },5000); } JS is hardly my strong suit, so I'm not sure what I'm doing wrong here. And, for clarity sake, the reason why I'm trying to update all of the articles in the div is so that the Helpers::time_ago method also gets called, instead of just fetching the new articles. This way, it properly shows how long ago the article was published (eg, less than a minute ago, a minute ago, a hour ago, a day ago, etc) without refreshing the page. Essentially, I'm trying to kill two birds with one stone; update the div with the most recent articles, and update the remaining article's published_at attribute using my Helpers::time_ago method. If there is a more effective / efficient way of doing this, feel free to correct me. This seems rather crude, but since it's only for personal use and will never be used for commercial purposes, it suits my needs (not that that excuses bad code). Nonetheless, from my fairly basic understanding, the JS should be doing the following steps: 1) Fire a POST request off to the /dashboard/latest_sa route 2) Execute the DashboardController#latest_sa action 3) Return a DB collection of all $articles ordered by the latest published date, and paginated 4) Pass the $articles collection back to the JS success attribute (as articles) 5) Fire the anonymous function, with the articles collection as an argument 6) Update the corresponding inner HTML with the results from the articles collection The logic sounds right, so I'm pretty sure this is going to be a human error (98% of the time it is, after all. lol). Hopefully, someone here will be able to see the (probably glaring) problem in the logic and point me in the right direction. In the meantime, I'm going to keep toying around with it. I look forward to your thoughts, ideas, and suggestions. TIA. EDIT: Well, I found one of the problems; the articles div is a class, and in the JS I'm referring to it as an id. I fixed that, and now after the timeInterval, the article's div is "updated" but no results are being displayed (none, zippo, nadda). Yet, if I directly access the /dashboard/latest_sa URI I get the valid JSON response that I'm expecting. So, albeit I am closer, I am still missing something. EDIT 2: Okay, in the controller, I made some changes which can be seen above, where I am now doing a json_decode on the $articles, before returning them to be passed into the view. With that in place, the articles are showing back up again after the timeInterval has elapsed, however, the new articles and the published_at for the existing articles are not being updated. After reviewing Inspect -> Network, it shows that the server is responding with a 500 Internal Server Error from the ajax POST request. Hrm... Seems like I'm going in circles. Sounds like a good time to take a break and go for a walk. ;) EDIT 3: Well, I modified my Helpers class and added in the following method to check if the $article is a json object. public static function isJson($string) { json_decode($string); return (json_last_error() == JSON_ERROR_NONE); } app/views/dashboard/index.blade.php #foreach ($articles as $article) <?php if( Helpers::isJson($article) ) { $article = json_decode($article); // dd($article) // when uncommented it returns a valid PHP object } ?> <!-- Iterate over the article object and output the data as shown above... --> #endforeach As you can see, (for the time being) inside of my view's foreach($articles as $article), I run Helpers::isJson($article) as a test and decode the object if it is json. This has enabled me to get passed the 500 Internal Server Error message, populate the articles div with the results on the initial load, and after the ajax POST request is fired off, I'm getting back a server response of 200 OK according to Inspect -> Network. However, after it updates the div, it doesn't show any articles. Around, and around I go... I think it's time I take that break I keep murmuring about. ;) Any thoughts, suggestions and / or ideas are greatly welcomed and appreciated.
At first, you should know that, when you return a collection from the controller/route, the response automatically turns in to a json response so, you don't need to use json_decode() and it won't work, instead, you may try something like this (from your controller for ajax): $articles = Articles::orderBy('published_at', 'desc')->paginate(20); return View::make('defaultAjax')->with('articles', $articles); Since building the HTML in the client side using the json data received from server side would be tough for you so, you may return HTML from the server with the generated view instead of json, so you may try something like this in your success handler: success:function(articles) { $(".articles").html(articles); } Now create a view for ajax response without extending the template like this: //defaultAjax.blade.php used in the controller for ajax response <ul> #foreach ($articles as $article) <li> <img src="{{ $article->user_image }}" alt="{{ $article->article_title }}" /> {{ $article->article_title }} <div class="details"> <span class="author">{{ $article->author_name }}</span> <span class="created">{{ Helpers::time_ago($article->published_at) }}</span> <span class="symbol">{{ $article->symbol_title }}</span> </div> </li> #endforeach </ul> {{ $articles->links() }} Notice, there is no #extendds() or #section(), just plain partial view, so it'll be rendered without the template and you can insert the ul inside the .articles div. That's it.
$("#articles").html(articles); ->> $(".articles").html(articles);