GhazaliTajuddin.com

Another Kuantan Blogger

laravel

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>

 

Tutorial hasilkan fail PDF dengan LARAVEL menggunakan DOMPDF

by Leave a Comment

Kita akan menggunakan DOMPDF

https://github.com/barryvdh/laravel-dompdf

Execute command berikut

composer require barryvdh/laravel-dompdf

Buka file config/app.php dan tambah skrip berikut pada bahagian ServiceProvider

Barryvdh\DomPDF\ServiceProvider::class,

 

Untuk menjadikan code lebih kemas (panggil nama PDF::blabla… ) tambah facade berikut juga pada config/app.php

'PDF' => Barryvdh\DomPDF\Facade::class,

Try test add code berikut dalam controller

public function GeneratePDF()
{

$distributors = Distributor::all();
$pdf = \PDF::loadView('pdf.distributor', compact('distributors'));
return $pdf->download('index.pdf');

}

 

Laravel Pagination

by Leave a Comment

Kadangkala kita memerlukan fungsi pagination bagi memberi paparan rekod dengan lebih baik.

Pada Controller tambah code berikut

$parcels = Parcel::paginate(5);

Pada View tabah code berikut selepas looping foreach() rekod untuk masukkan pautan link pagination

<div class="pagination pull-right">{{ $parcels->links() }}</div>

Source:

  • https://laravel.com/docs/5.3/pagination
  • http://tutsnare.com/how-to-create-pagination-in-laravel/
  • https://www.abit.bt/abit-blogs/simple-laravel-paginated-sortable-table/

 

 

Kelebihan Laravel Relationship Eloquent

by Leave a Comment

Antara sebab aku nak belajar sangat menggunakan framework ni adalah disebabkan oleh ia menyediakan teknik query atau capaian data yang memudahkan sesetengah kerja yang remeh temeh:

Cth

Table

Filem(id, title, content, status_id )
Status(id, nama)

Dalam coding biasa, bila nak papar maklumat filem dan juga status, kita terpaksa buat  query seperti berikut:

select title, content, status
from filem
join status
   on filem.status_id = status.id

Mudah sahaja, tetapi, dalam laravel kita boleh skip, dan menjadikan coding kita lebih kemas. Cuma kena setup dulu relationship between model (belongsTo(), hasMany(), hasOne(), dll).

Lihat sample dibawah.

Model class Filem

public function getStatus()
{
return $this->belongsTo('App\Status', 'status_id');
}
Model class Status

public function Filem()
{
return $this->hasMany('App\Status', 'status_id');
}

Dalam view hanya masukkan kod berikut untuk dapatkan status

{{$parcel->getDistributor->nama}}

 

Install composer on Mac OSX

by Leave a Comment

Buka Terminal dan execute command berikut

curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin --filename=composer

Set permission utk directori .composer/ dalam home

drwxr-xr-x    3 root        staff      102 Oct  1 10:50 .composer

Guna command berikut

sudo chown -R $USER $HOME/.composer

Install Laravel

composer global require "laravel/installer=~1.1"

 

 

Laravel migration untuk tukar table column field type

by Leave a Comment

Run command berikut

php artisan make:migration tukar_field_type_table_parcel

Edit file migration TukarFieldTypeTableParcel.php seperti berikut

Function Up()

public function up()
{
//
Schema::table('parcels', function(Blueprint $table)
{

$table->integer('courier')->unsigned()->change();
$table->foreign('courier')->references('id')->on('couriers');

$table->integer('distributor')->unsigned()->change();
$table->foreign('distributor')->references('id')->on('distributors');
});
}

Function Down()

public function down()
{
//

Schema::table('parcels', function(Blueprint $table)
{

$table->dropForeign('parcels_courier_foreign');
$table->dropForeign('parcels_distributor_foreign');

});

}

*Unsigned() – Bertujuan memastikan nilai integer berkenaan bukan negative

*Sila pastikan type untuk setiap foreginer field dan reference field adalah sama.