Tutorial Laravel : View - Hallo sahabat Meta News, Pada Artikel yang anda baca kali ini dengan judul Tutorial Laravel : View, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Tutorial Laravel : View
link : Tutorial Laravel : View

Tutorial Laravel : View

Views : Pengenalan

Views adalah tampilan.User interface dari sebuah aplikasi website. Dari sebuah aplikasi sederhana hingga yang rumit, view digunakan untuk menampilkan sesuatu yang bisa dilihat oleh user.

Views : Response Aplikasi terhadap sebuah Request

View adalah tujuan akhir dari request. Saat user menuliskan sebuah url atau sebuah request ada sebuah harapan user akan menjumpai tampilan halaman yang diinginkan. Misalnya saat user mengklik "login" maka user mengharapkan akan melihat halaman login.
Untuk menampilkan halaman login kita bisa menggunakan HTML. Mudah bukan?  Tetapi apakah itu aman, mudah? Tidak! Website modern memiliki sekurang-kurangnya 2 elemen dalam satu halaman. Bayangkan jika anda memiliki sebuah halaman website yang memuat menu-menu di sidebar, form yang terdiri dari 15 field dan anda membuatnya dalam satu halaman? Tentu kita bisa membayangkan betapa penuh sesaknya kode yang kita tulis di halaman tersebut.

Aplikasi modern seperti Laravel menjawab tantangan tersebut dengan kemudahan. Oke mari kita lihat bagaimana sistem modern Laravel untuk menampilkan View.

Template Laravel : Blade

Di laravel kita bisa menyimpan (atau template yang akan diubah ke HTML di belakang layar) di luar logika aplikasi dan nantinya kita cukup memasukkan data yang diambil dari aplikasi. Lebih dari itu, kita juga bisa membuat elemen-elemen untuk satu atau lebih aplikasi - seperti header, footer, sidebar dan lainnya, sebagai template yang terpisah dan sewaktu-waktu bisa kita gunakan.
Laravel menggunakan template engine yang disebut "Blade". Template engine ini mirip dengan template engine PHP lainnya, seperti Twig atau Smarty namun mempunyai syntaks dan shorcut sendiri. Dengan blade memungkinkan kita menggabungkan beragam template dalam satu output HTML.

Konsep views dalam laravel memecahkan masalah dalam penggabungan dengan menyediakan metode yang memisahkan antara logika aplikasi dan skeleton (template) yang akan ditampilkan kepada user.

Membuat dan Mengatur Views

Membuat views dalam Laravel sangat mudah. Untuk memahami cara kerjanya, mari kita membuat sebuah aplikasi login.
Dalam Laravel, aplikasi untuk seluruh views disimpan di folder "app/views". Jadi, mari kita buat sebuah template baru dengan nama login.php dan disimpan di folder "app/views".
Copy paste kode berikut ini :

<form action="login" method="post">
  Username: <input type="text" name="username"><br>
  Password: <input type="password" name="password">
  <input type="submit" value="Login">
</form>

Kita sudah membuat template view, dan kita akan menggunakan metode Laravel untuk membuat template dari aplikasi. Metode untuk memberikan template view yang berada di folder "app/views" adalah :
“View::make(‘file’)” dimana “file” adalah nama file dari template yang akan kita tunjukan.

Catatan :
View::make membaca file sebagai .php atau "blade.php" sehingga kita tidak perlu menuliskan ekstensi file tersebut. cukup dengan login untuk nama file login.php

Kita akan mengubah kode route dari login sehingga akan mengarah ke "login.php"

Route::get('login', function()
{
   return View::make('login');
});

Sekarang jika anda mengakses login maka akan muncul form login yang telah kita buat.

Memisahkan Template Views di Folder

Jika aplikasi anda semakin besar, maka banyak template view yang akan kita gunakan. Aplikasi berukuran sedang rata-rata akan menggunakan 50-80 template view saat selesai. Laravel tidak melarang kita untuk menyimpan template view di selain folder "app/views". Misalnya jika kita ingin menyimpan seluruh template view yang berhubungan dengan registrasi member, login dan fungsi logout kita bisa membuat sebuah folder baru misalnya dengan nama "auth" dan meletakkan file login.php dan file lainnya di sana.

Jika struktur folder seperti gambar di atas maka kita harus menentukan template view dimana file tersebut ditempatkan. Dalam contoh di atas "register.blade.php" dan lain-lain berada di folder "auth" maka kita juga harus menuliskan folder tersebut dipisahkan dengan tanda titik dengan nama filenya.

Route::get('login', function()
{
  // menunjukkan file login.blade.php dari folder app/views/auth
  return View::make('auth.login');
});

Route::get('logout', function()
{
  // Display file logout.blade.php from app/views/auth folder
  return View::make('auth.logout');
});

Route::get('register', function()
{
  // Display file register.blade.php from app/views/auth folder
  return View::make('auth.register');
});

Dengan mengelompokkan template view memudahkan developer untuk melakukan perubahan jika kode aplikasi semakin banyak.
Dengan menggunakan template view kita bisa merasa nyaman dan membuat aplikasi merespon sebuah request dengan dokumen HTML lengkap.

Memasukkan Data ke Dalam Template View

Untuk halaman-halaman dinamis, kita perlu memasukkan data dari database atau sumber lain kemudian menampilkan data tersebut dalam bentuk HTML kepada user. Biasanya developer akan memasukkan query SQL langsung ke dalam kode aplikasi yang akan menghasilkan kode yang berantakan dan susah untuk dimaintain. Contohnya seperti kode di bawah ini

<?
$catId = (isset($_GET['catId']) && $_GET['catId'] > 0)? $_GET['catId'] : 0;
$sql = "SELECT * FROM tbl_orders, tbl_product, tbl_category
    WHERE tbl_orders.inquiry_pdid = tbl_product.pd_id AND tbl_product.cat_id = tbl_category.cat_id
    AND tbl_category.cat_parent_id = $catId 
    ORDER BY tbl_orders.inquiry_date DESC, tbl_category.cat_parent_id ASC";
$result = dbQuery($sql);
?>

<table width="100%" border="0" cellpadding="5" cellspacing="0" class="text">
  <tr id="listTableHeader">
    <td>Inquiry ID </td>
    <td>Batch ID</td>
    <td>Customer</td>
    <td>Brand</td>
    <td>Product</td>
    <td>Date</td>
  </tr>
  <?php if (dbNumRows($result) > 0) {
    while($row = dbFetchAssoc($result)) {
    extract($row);
  ?>
  <tr>
    <td><?php echo $inquiry_id; ?></td>
    <td><?php echo $inquiry_odid; ?></td>
    <td><?php echo $inquiry_batchall; ?></td>
    <td>
    <?php
      $sqlname = "SELECT cat_name FROM tbl_category WHERE cat_id = $cat_parent_id";
      $resultname = dbQuery($sqlname);
      $rowname = dbFetchAssoc($resultname);
      echo $rowname['cat_name'];
    ?> 
    </td>
    <td><?php echo $cat_name; ?></td>
    <td><?php echo $pd_name; ?></td>
    <td><?php echo formatDate($order_date); ?></td>
  </tr><?php } } ?>
</table>

Perhatikan bagaimana query SQL, paramater dan output HTML berada dalam satu file PHP yang membuat debugging dan modifikasi menjadi susah dikerjakan.
MVC frameworks seperti Laravel memecahkan masalah tersebut dengan memisahkan logika aplikasi dari output data (visual presentation). Laravel menyediakan beberapa cara untuk memasukkan data.

• Menggunakan metode argument "View::make"
• Menggunakan metode "with" yang ditambahkan ke "View::make"

Kedua metode tersebut memberikan hasil yang sama.

Menggunakan Metode argumen "View::make" untuk Memasukkan Data

Kita telah mengetahui bagaimana metode "View::make" untuk membuat template view yang diletakkan di folder "app/views". Seperti yang kita ketahui bahwa argumen pertama dari "View::make" adalah nama file dari template view tersebut (tanpa tambahan ekstensi "blade.php" atau ".php"). Salah satu cara untuk memasukkan data ke dalam template view adalah dengan menggunakan argumen kedua dari "View::make".
Argumen kedua dari "View::make" bisa berupa array data yang akan kita masukan ke dalam template view tersebut. Key dari array data tersebut akan menjadi variabel yang kemudian bisa kita tunjukkan dengan fungsi php echo.
Misalnya jika kita ingin menunjukkan hari dan jam kita harus membuat data tersebut tersedia di "View::make" dan kemudian menggunakan perintah echo PHP di template view untuk menunjukkan data tersebut.

Catatan :
Terlebih dahulu kita harus mengatur waktu (time zome) di app/config/app.php sebelum menuliskan kode berikut ini.

Menggunakan argumen kedua dari "View:make" untuk memasukkan data

// File app/routes.php
Route::get('login', function()
{
  // Membuat array data yang akan digunakan di template view
  $data = array('currentDateTime' => date('Y-m-d H:i:s'));
  // Memasukkan data array sebagai argumen kedua dari View::make
  return View::make('login', $data);
});

// File app/views/login.php
Current date and time: <br>

<?php  
  // Display the data in the view
  echo($currentDateTime);
?>

<form action="login" method="post">
  Username: <input type="text" name="username"><br>
  Password: <input type="password" name="password">
  <input type="submit" value="Login">
</form>

Buka halaman login dan lihatlah hasilnya.

Menggunakan With

Selain menggunakan metode argumen kedua seperti di atas, kita juga bisa menggunakan metode "with" di akhir "View::make" untuk memasukkan data ke view. Metode with menggunakan 2 argumen, yang pertama untuk memasukkan nama dari data yang akan dimasukkan dan yang kedua isi data itu sendiri.

Misalnya, anda ingin memasukkan dua variabel ke dalam view, misalnya tanggal dan waktu dan menampilkannya di view, yang pertama kita harus membuat variabel untuk tanggal dan waktu tersebut. Kemudian kita menambahkan metode with dengan dua nama variabel tersebut. Untuk lebih mudahnya silakan lihat kode berikut :

// File app/routes.php
Route::get('login', function()
{
  // Menyimpan tanggal sekarang
  $date = date('Y-m-d');
  // Menyimpan waktu sekarang
  $time = date('H:i:s');
  // Memasukkan tanggal dan waktu ke view
  return View::make('login')->with('date', $date)->with('time', $time);
});

// File app/views/login.php

// Menunjukkan tanggal sekarang dari route
Current date: <?php echo($date); ?> <br>
// Memasukkan waktu sekarang dari route
Current time <?php echo($time); ?>

<form action="login" method="post">
  Username: <input type="text" name="username"><br>
  Password: <input type="password" name="password">
  <input type="submit" value="Login">
</form>

Hasilnya akan sama dengan metode yang pertama

Blade Template Engine

Blade adalah engine template dalam Framework Laravel. Dengan Blade kita bisa mengatur output dengan mudah, looping data, menyisipkan view dan juga menggunakan statemen-statemen conditional, dan lain-lain. 
Secara internal, Blade akan mengubah file ditulis dengan syntax-syntax Blade khusus ke dalam PHP untuk menampilkan output yang diinginkan. Salah satu tujuan Blade Template Engine adalah agar template view mudah dibaca baik oleh developer maupun programmer lain dan juga untuk mempersingkat waktu.

Catatan :
Template views yang menggunakan Blade mempunyai ekstensi "blade.php"

Perbedaan Penggunaan PHP dan Blade template Engine dalam template view

PHP	Blade
Output data di template view	Output data di template view
<?php echo(date('Y')); ?>	{{ date('Y') }}
Looping Data	Looping Data
<?php foreach($users as $user){ ?> <p> <?php echo($userelname); ?><br> <?php echo($usereladdress); ?> </p> <?php } ?>	@foreach($users as $user) <p> {{ $userelname }}<br> {{ $usereladdress }} </p> @endforeach
Menggunakan Conditional Statement	Menggunakan Conditional Statement
<?php if($category == 'blog') { ?> ... <?php } else { ?> ... <?php } ?>	@if($category == 'blog') ... @else ... @endif

Blade template engine menyediakan para developer berbagai chorcuts yang memungkinkan untuk :

• Menghilangkan beberapa inkonsistensi dari PHP
• Menggunakan conditional statement dan loops
• Output dan escape data lebih tepat
• Memisahkan antara template view ke dalam layout dan section
• Menghasilkan banyak elemen HTML dengan kode minimum

Menghasilkan dan Menunjukkan Data

Blade sangat membantu dalam membuat kode PHP yang lebih baik. Dengan kode-kode dan shorcut yang simple, Blade menjadi alternatif PHP yang lebih baik, tetapi tidak seluruhnya mengganti kode PHP.
Untuk menunjukkan data string dalam Blade digunakan variable string di dalam dua kurung keriting {{ dan }}.
Misalnya kita ingin menunjukkan "Hello, John" dimana "John" adalah variable yang diambil dari route. Contoh di bawah ini menunjukan nama variabel, yang pertama menggunakan PHP murni dan yang lainnya menggunakan Blade.

// app/routes.php
Route::get('hello', function()
{
  $name = 'John';
  // Memasukkan nama variable ke view
  return View::make('hello')->with('name', $name);
});

// app/views/hello.blade.php

// Menunjukkan nama dengan echo PHP
Hello, <?php echo($name); ?>
<br>
// Menunjukkan nama dengan Blade
Hello, {{ $name }}

// Kedua metode di atas sama-sama menghasilkan :
Hello, John

Lebih mudah bukan?

Mengaburkan Data

Kadang kala kita harus memastikan bahwa variabel yang kita perlihatkan di browser dalam bentuk HTML untuk user. Bayangkan jika seandainya aplikasi anda berkenaan dengan data yang disimpan oleh user dalam database dan anda harus menunjukkan data tersebut kepada user lainnya. Jika kita menunjukkan data sebagaimana adanya, maka ada kemungkinan beberapa user yang nakal akan melakukan tindakan yang tidak kita inginkan. Untuk mengatasi hal ini, Laravel menyediakan sebuah cara untuk mengaburkan data sebelum data tersebut ditampilkan. Kita bisa menggunakan kurung keriting tiga kali {{{ dan }}} dan bukan dua kali.

Catatan :
Secara internal, Laravel menggunakan fungsi PHP htmlentities () saat kurung keriting tiga digunakan.
Lihat contoh berikut ini dimana HTML entities seperti karakter tanda kutip, kurang dari ("<"> dan lebih dari (">")  dikaburkan.

// app/routes.php
Route::get('hack', function()
{ // Create malicious Javascript
  $data = "<script>alert('My hack');</script>";
  return View::make('hack')->with('data', $data);
});

// app/views/hack.blade.php

// Escape the output before it is displayed
The data: {{{ $data }}}

// Result (the HTML characters are properly escaped):
The data: <script>alert('My hack');</script>

Demikianlah Artikel Tutorial Laravel : View

Sekianlah artikel Tutorial Laravel : View kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Tutorial Laravel : View dengan alamat link https://infoasikindo.blogspot.com/2015/01/tutorial-laravel-view.html

Tweet