GhazaliTajuddin.com

Another Kuantan Blogger

General

Laravel 5.3 Bootstraps Installation

by Leave a Comment

Sebenarnya tiada beza nak install Bootstrap dalam Laravel dengan dalam applikasi web html yang biasa kita buat. Begitu juga Laravel versi lain.

Apa yang penting kedudukan file berkenaan hendaklah betul.

Laravel menggunakan sistem template blade yang memudahkan kita untuk menguruskan coding templating applikasi.

Dalam sistem template blade biasanya kita akan create master layout. Master layout ni umpama blueprint layout kita la. Dimana kedudukan header, footer, sidebar, menu etc.

So biasanya kita akan ubah layout seperti berikut:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<!-- Latest compiled and minified JavaScript -->

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Contoh diatas menggunakan cdn Bootstrap dan jQuery.

Apa yang penting:

jQuery hendaklah dinyatakan terlebih dahulu berbanding bootstrap js. Mesti ikut susunan!

Contoh code penuh seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Styles 
<link href="/css/app.css" rel="stylesheet">

-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css">


<!-- Latest compiled and minified JavaScript -->

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">

<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>

<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
&nbsp;

</ul>

<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">

<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ url('/login') }}">Login</a></li>
<li><a href="{{ url('/register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>

<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>

<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>

</ul>
</li>
@endif

</ul>
</div>
</div>
</nav>

@yield('content')
</div>

<!-- Scripts

<script src="/js/app.js"></script>-->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>

 

Laravel Validation Form Request On Create And Update

by Leave a Comment

Bila kita request untuk submit form, kita boleh tetapkan rules bagi validate field yang telah diisi.

Kebiasannya begini

public function rules()
{
return [
//
'nama' => 'required|min:3',
];
}

Kita juga boleh buat begini

switch($this->method())
{
case 'GET':
case 'DELETE':
{
return [];
}
case 'POST':
{
return [
//
'nama' => 'required|min:3',
'kod' => 'required|min:3',
];
}
case 'PUT':
case 'PATCH':
{
return [
//
'nama' => 'required|min:3',
'kod' => 'required|min:3',
];
}
default:break;
}

 

Submit Form Data

by Leave a Comment

Dalam Laravel kita guna GET method untuk paparkan form

Route:get ('/courer/create',CouriersController@create');

Tetapi kita gunakan POST untuk submit data. Ia tidak disimpan dalam cache dan parameter tidak disimpan dalam History, lebih secure.

Tambah pada routes.php (web.php utk versi Laravel versi 5.3 keatas)

Route:post('/courier','CouriersController@store');

Untuk memastikan data yang disimpan dalam table, kita akan lakukan validation kepada store action dengan menggnakan CourierFormRequest.

Tambah pada CouriersController.php sebelum class CouriersController

use App\Http\Requests\CourierFormRequest;
class CouriersController extends Controller
{

Tambah pada CouriersControler.php method store

public function store(CourierFormRequest $request)
{
return $request->all();
}

What is TokenMismatchException?
For security purposes, Laravel now requires a token to be sent when using the POST method. If you
don’t send any token, it will throw an error.

Tambah code berikut pada form, dibawah tag <form> utk security

<input type="hidden" name="_token" value="{!! csrf_token() !!}">

Tambah code berikut untuk paparan error jika ada field yang tidak diisi.

@foreach ($errors->all() as $error)
<p class="alert alert-danger">{{ $error }}</p>
@endforeach

Tambah code berikut untuk paparan success jika berjaya.

@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif

Ringkasan:

  1. Edit Route
    • Gunakan method GET untuk paparan form (route.php)
    • Gunakan method POST untuk dapatkan data (route.php)
  2. Create Form Request
    • Gunakan FormRequest untuk validate data form (CourierFormRequest.php)
  3. Edit Controller
    • Tambah sebelum class use App\Http\Requests\TicketFormRequest;
    • Tambah method store()
  4. Edit view
    1. Tambah method post <form method=”post”>
    2. Tambah CSRF Token bawah tag <form> <input type=”hidden” name=”_token” value=”{!! csrf_token() !!}”>
    3. Tambah foreach semak error bawah tag <form> @foreach ($errors->all() as $error) <p class=”alert alert-danger”>{{ $error }}</p>
      @endforeach 
    4. Tambah foreach success jika berjaya bawah form tag @if (session(‘status’))
      <div class=”alert alert-success”>
      {{ session(‘status’) }}
      </div>
      @endif