Belajar laravel : Cara menampilkan Semua Data Pada Laravel 5.3 Untuk Pemula

Hallo teman-teman, melanjutkan Tutorial CRUD di Laravel 5.3 pada artikel sebelumnya, maka kali ini kita akan melakukan persiapannya terlebih dahulu. O iya, buat teman-teman yang mendownload project dari github, maka teman-teman perlu menginstal Laravel ke dalam project tersebut dan membuat databasenya agar dapat digunakan. Jika lupa bagaimana melakukan migrate dapat membaca tutorial Belajar Laravel : Mengenal Migrations Pada Laravel 5.3 untuk pemula.

Untuk proses install Laravelnya dapat dengan mengetikan perintah di bawah ini pada project teman-teman :

composer install

1	composer install

Pada tutorial sebelumnya, kita sudah membuat beberapa file, kali ini kita akan membuat layout yaitu table, form untuk insert data, dan form untuk edit data. Silakan teman-teman buka projectnya, kemudian buka file web.php dan tambahkan beberapa route seperti di bawah ini :

// code lain
Route::group(['prefix' => 'kendaraan'], function(){
	Route::get('/', 'KendaraanController@index');
	Route::get('/create', 'KendaraanController@create');
	Route::post('/store', 'KendaraanController@store');
	Route::get('/show/{id}', 'KendaraanController@show');
	Route::post('/update/{id}', 'KendaraanController@update');
	Route::post('/destroy/{id}', 'KendaraanController@destroy');
});
// code lain

// code lain

Route::group(['prefix' => 'kendaraan'], function(){

Route::get('/', 'KendaraanController@index');

Route::get('/create', 'KendaraanController@create');

Route::post('/store', 'KendaraanController@store');

Route::get('/show/{id}', 'KendaraanController@show');

Route::post('/update/{id}', 'KendaraanController@update');

Route::post('/destroy/{id}', 'KendaraanController@destroy');

});

// code lain

kemudian buka file KendaraanController.php kita akan membuat method untuk menampilkan data kendaraan ke dalam sebuah table. Maka dari itu buat satu buah method seperti di bawah ini :

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class KendaraanController extends Controller
{
    public function index()
    {
    	$kendaraans = \App\Kendaraan::all(); // mengambil semua data kendaraan
    	return view('crud.kendaraan.view', compact('kendaraans')); // melempar data ke view
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class KendaraanController extends Controller

{

public function index()

{

$kendaraans = \App\Kendaraan::all(); // mengambil semua data kendaraan

return view('crud.kendaraan.view', compact('kendaraans')); // melempar data ke view

}

Karena pada tutorial sebelumnya kita belum membuat template layouts, maka kita kita ubah saja app.blade.php yang pernah kita buat pada tutorial Sistem Templating pada Laravel 5.3 untuk pemula menjadi sperti di bawah ini untuk kita jadikan layouts utama :

<!DOCTYPE html>
<html>
	<head>
		<title>Material Design for Bootstrap temporary development test case</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- Mobile support -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- Material Design fonts -->
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<!-- Bootstrap -->
		<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
		<!-- Bootstrap Material Design -->
		<link href="{{ asset('bootstrap-material-design-master/dist/css/bootstrap-material-design.css') }}" rel="stylesheet">
		<link href="{{ asset('bootstrap-material-design-master/dist/css/ripples.min.css') }}" rel="stylesheet">
		<!-- Dropdown.js -->
		<link href="//cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
		<!-- Page style -->
		<link href="{{ asset('bootstrap-material-design-master/index.css') }}" rel="stylesheet">
		<!-- jQuery -->
		<a href="//code.jquery.com/jquery-1.10.2.min.js">//code.jquery.com/jquery-1.10.2.min.js</a>
	</head>
	<body>
		<!--
		Test case
		-->
		<div class="navbar navbar-info">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="javascript:void(0)">ONPHPID</a>
				</div>
				<div class="navbar-collapse collapse navbar-warning-collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a href="javascript:void(0)">Active</a></li>
						<li><a href="javascript:void(0)">Link</a></li>
						<li class="dropdown">
							<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
							<b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="javascript:void(0)">Action</a></li>
								<li><a href="javascript:void(0)">Another action</a></li>
								<li><a href="javascript:void(0)">Something else here</a></li>
								<li class="divider"></li>
								<li class="dropdown-header">Dropdown header</li>
								<li><a href="javascript:void(0)">Separated link</a></li>
								<li><a href="javascript:void(0)">One more separated link</a></li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-left">
						<div class="form-group">
							<input type="text" class="form-control col-md-8" placeholder="Search">
						</div>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="javascript:void(0)">Link</a></li>
						<li class="dropdown">
							<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
							<b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="javascript:void(0)">Action</a></li>
								<li><a href="javascript:void(0)">Another action</a></li>
								<li><a href="javascript:void(0)">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="javascript:void(0)">Separated link</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container">
			@yield('content') // untuk menampung content
		</div>
		<!--
		Scripts
		-->
		<!-- Twitter Bootstrap -->
		<a href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js">//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js</a>
		<!-- Material Design for Bootstrap -->
		<a href="http://%20asset('bootstrap-material-design-master/dist/js/material.js')%20">http://%20asset('bootstrap-material-design-master/dist/js/material.js')%20</a>
		<a href="http://%20asset('bootstrap-material-design-master/dist/js/ripples.min.js')%20">http://%20asset('bootstrap-material-design-master/dist/js/ripples.min.js')%20</a>
		  $.material.init();
		<!-- Sliders -->
		<a href="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js">//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js</a>
		<!-- Dropdown.js -->
		<a href="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js">https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js</a>
		$("#dropdown-menu select").dropdown();
	</body>
</html>

100

<!DOCTYPE html>

<html>

<head>

<title>Material Design for Bootstrap temporary development test case</title>

<a href="//code.jquery.com/jquery-1.10.2.min.js">//code.jquery.com/jquery-1.10.2.min.js</a>

</head>

<body>

<!--

Test case

-->

</button>

<a class="navbar-brand" href="javascript:void(0)">ONPHPID</a>

</div>

<li class="active"><a href="javascript:void(0)">Active</a></li>

<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown

<li><a href="javascript:void(0)">Action</a></li>

<li><a href="javascript:void(0)">Another action</a></li>

<li><a href="javascript:void(0)">Something else here</a></li>

<li class="dropdown-header">Dropdown header</li>

<li><a href="javascript:void(0)">Separated link</a></li>

<li><a href="javascript:void(0)">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</form>

<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown

<li><a href="javascript:void(0)">Action</a></li>

<li><a href="javascript:void(0)">Another action</a></li>

<li><a href="javascript:void(0)">Something else here</a></li>

<li><a href="javascript:void(0)">Separated link</a></li>

</ul>

</li>

</ul>

</div>

@yield('content') // untuk menampung content

</div>

<!--

Scripts

-->

<a href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js">//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js</a>

<a href="http://%20asset('bootstrap-material-design-master/dist/js/material.js')%20">http://%20asset('bootstrap-material-design-master/dist/js/material.js')%20</a>

<a href="http://%20asset('bootstrap-material-design-master/dist/js/ripples.min.js')%20">http://%20asset('bootstrap-material-design-master/dist/js/ripples.min.js')%20</a>

$.material.init();

<a href="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js">//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js</a>

<a href="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js">https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js</a>

$("#dropdown-menu select").dropdown();

</body>

</html>

coba teman-teman perhatikan line 79 ya, kita akan menampung contentnya di bagian itu.

Jika sudah mari kita buat layout di view.blade.php yang berada di resources/view/crud/kendaraan, kemudian buat menjadi seperti di bawah ini :

@extends('layouts.app')
@section('content')
<div class="panel panel-info">
	<div class="panel-heading">
		<center>
		<h1>
		CRUD Laravel 5.3
		</h1>
		</center>
	</div>
	<div class="panel-body">
		<a href="{{ URL('kendaraan/create') }}" class="btn btn-raised btn-primary pull-right">Tambah</a>
		{{-- part alert --}}
			{{-- Kita cek, jika sessionnya ada maka tampilkan alertnya, jika tidak ada maka tidak ditampilkan alertnya --}}
		@if (Session::has('after_update'))
			<div class="row">
				<div class="col-md-12">
					<div class="alert alert-dismissible alert-{{ Session::get('after_update.alert') }}">
					  <button type="button" class="close" data-dismiss="alert">×</button>
					  <strong>{{ Session::get('after_update.title') }}</strong>
					  <a href="javascript:void(0)" class="alert-link">{{ Session::get('after_update.text-1') }}</a> {{ Session::get('after_update.text-2') }}
					</div>
				</div>
			</div>
		@endif
		{{-- end part alert --}}
		<table class="table table-bordered table-hover ">
			<thead>
				<tr>
					<th>#</th>
					<th>Nama Kendaraan</th>
					<th>Jenis Kendaraan</th>
					<th>Buatan</th>
					<th>Pemilik</th>
					<th>Aksi</th>
				</tr>
			</thead>
			<tbody>
				@php(
					$no = 1 {{-- buat nomor urut --}}
					)
				{{-- loop all kendaraan --}}
				@foreach ($kendaraans as $kendaraan)
					<tr>
						<td>{{ $no++ }}</td>
						<td>{{ $kendaraan->nama_kendaraan }}</td>
						<td>{{ $kendaraan->jenis_kendaraan }}</td>
						<td>{{ $kendaraan->buatan }}</td>
						<td>{{ $kendaraan->user->name }}</td>
						<td>
							<center>
								<a href="{{ URL('kendaraan/show') }}/{{ $kendaraan->id }}" class="btn btn-sm btn-raised btn-info">Edit</a>
								<a href="{{ URL('kendaraan/destroy') }}/{{ $kendaraan->id }}" class="btn btn-sm btn-raised btn-danger">Hapus</a>
							</center>
						</td>
					</tr>
				@endforeach
				{{-- // end loop --}}
			</tbody>
		</table>
	</div>
</div>
@stop

@extends('layouts.app')

@section('content')

<h1>

CRUD Laravel 5.3

</h1>

</center>

</div>

<a href="{{ URL('kendaraan/create') }}" class="btn btn-raised btn-primary pull-right">Tambah</a>

{{-- Kita cek, jika sessionnya ada maka tampilkan alertnya, jika tidak ada maka tidak ditampilkan alertnya --}}

@if (Session::has('after_update'))

<strong>{{ Session::get('after_update.title') }}</strong>

<a href="javascript:void(0)" class="alert-link">{{ Session::get('after_update.text-1') }}</a> {{ Session::get('after_update.text-2') }}

</div>

@endif

<thead>

<tr>

<th>Nama Kendaraan</th>

<th>Jenis Kendaraan</th>

<th>Buatan</th>

<th>Pemilik</th>

</tr>

</thead>

<tbody>

@php(

$no = 1 {{-- buat nomor urut --}}

)

@foreach ($kendaraans as $kendaraan)

<tr>

<td>{{ $kendaraan->nama_kendaraan }}</td>

<td>{{ $kendaraan->jenis_kendaraan }}</td>

<td>{{ $kendaraan->buatan }}</td>

<td>{{ $kendaraan->user->name }}</td>

<td>

<a href="{{ URL('kendaraan/show') }}/{{ $kendaraan->id }}" class="btn btn-sm btn-raised btn-info">Edit</a>

<a href="{{ URL('kendaraan/destroy') }}/{{ $kendaraan->id }}" class="btn btn-sm btn-raised btn-danger">Hapus</a>

</center>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

@stop

setelah itu kita buka di browser dengan url localhost:8000/kendaraan, jika tidak ada kesalahan maka akan tampil seperti gambar di bawah ini :

semua kendaraan dan pemiliknya berhasil kita tampilkan, jika belum paham teman-teman dapat mendownload projectnya di sini untuk di pelajari sendiri. Pada tutorial selanjutnya kita akan melakukan insert data ke dalam tabel kendaraans di artikel Cara Insert Data atau Create Data pada Laravel 5.3, maka dari itu ikuti terus step by step belajar Laravel 5.3 nya.

Sekian dulu tutorial Belajar laravel : Cara menampilkan Semua Data Pada Laravel 5.3 Untuk Pemula. Jika ada hal yang kurang jelas atau ingin ditanyakan dapat melalui komentar. JANGAN LUPA like FANSPAGE ONPHPID untuk update informasi dan Subscribe Channel ONPHPID Tutorial. Selamat Belajar…