Belajar View di Laravel dengan Template Admin LTE

-


View pada laravel adalah bagian yang menangani tamplilan pada halaman web. Laravel mengusung metode MVC (Model View Controller) yang memisahkan antara Model (database) View (tampilan) dan Controller (pengontrol). Di laravel, view dituslikan pada direktori resource/views dengan format.

namafile.blade.php

view di laravel memiliki keunggulan dari segi penulisan kode php. umumnya untuk tampilan dalam pemrogramman web menggunakan html. yang berarti php menjadi tamu di file tersebut. dan diharuskan untuk dibungkus dengan php buka <?php dan php tutup ?> yang membuat baris kode semakin banyak. di template engine blade kita tidak perlu menuliskan terlalu banyak kode php. syntax dari kode php yang di tuliskan di view pun tidak lagi sama dengan kode php umumnya. sehingga kita harus mengikuti format yang dibuat oleh laravel dalam template engine blade nya.

untuk membuat view kita tidak dibantu oleh commad line sehingga kita harus membuatnya sendiri dari editor. secara umum ada tiga langkah yang harus dilakukan untuk sampai ke view.

#langkah-langkah membuat view secara umum

silahkan ikuti langkah-langkah berikut.

1. Route yang dibutuhkan (web.php).

Route::get('/siswa', 'SiswaController@index');

2. Controller yang dibutuhkan (SiswaController.php).

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SiswaController extends Controller
{
    public function index(){
    $nama='Indah';
    $alamat='Medan';
    return view('siswa.siswa_index',['nama' => $nama]);
    }
}

siswa.siswa_index artinya siswa adalah nama folder pembungkusnya dan siswa_index adalah nama file dari siswa_index.blade.php. ['nama' => $nama] adalah data yang akan di passing ke view dalam bentuk array.

3. buat view nya (siswa_index.blade.php).

perhatikan susunan direktori berikut.

  • resources
    • views
      • siswa
        • siswa_index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Data Siswa</title>
</head>
<body>
<h1>Data Siswa</h1>
<div>
Nama: {{$nama}}
</div>
</body>
</html>
Pada contoh ini kita sudah melakukan passing data dari controller ke view berupa variabel $nama.

#Menyiapkan View Template Admin LTE di Laravel
Ditutorial sebelumnya kita sudah pernah menyusun template admin LTE untuk php native dan CodeIgniter. Konsep yang saya pakai sama untuk template laravel ini. dari contoh ini anda dapat mengembangkan penyusunan template yang lebih baik lagi. dan jangan berhenti belajar hal baru.



perhatikan gambar file master_tabel.blade.php di atas. fungsi include ditemplate engine konsepnya sama dengan kode php umumnya. yaitu memasukkan isi file lain ke dalam file yang memanggil. ditulis dengan @include('url')

hampir sama cara kerjanya dengan @include('url'), @yield('namabagian') juga memasukkan sebagian isi file dari tutrunan file tersebut (extends) yang ditandai dengan @section('namabagian').


section di atas akan dikirim masuk ke dalam yield sesuai dengan namanya (breadcrumb/content). terakhir semua hasilnya diambil kembali dengan peritah @extends('master_tabel'). lihat pemanggilannya di controller.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SiswaController extends Controller
{

    public function index(){
    $nama='Indah';
    $alamat='Medan';
    return view('siswa.siswa_index');
    }
}

dapat di lihat view yang dipanggil adalah siswa_index.blade.php, bukan master_tabel.blade.php. lihat hasil nya di bawah ini.


Silahkan download. Terima kasih.

Popular posts from this blog

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

-
Image
Link adalah bagian dari HTML yang fungsinya untuk menghubungkan satu halaman dengan halaman lain. Link juga bisa diartikan sebagai cara berpindah dari satu halaman ke halaman lain. 1. Link ke Halaman Lain Tag yang digunakan untuk membuat link adalah tag anchor atau tag <a> , yang berpasangan dengan </a> . Link biasanya menggunakan objek untuk di klik yang di letakkan diatara tag buka dan tag tutup. Teks Tombol (Button) Gambar Ketiga objek di atas sering dijadikan link, dan tidak ada kategori yang paling sering digunakan. Mimilih teks, tombol, atau gambar sebagai link sangat opsional atau tidak ada keharusan. Format link <a href="url" name="nama_link"> Objek Link </a> 1.1. Contoh Link Dengan Objek Teks <!--nama file link.html--> Untuk ke halaman selanjutnya <a href="link2.html">Klik disini</a> Teks klik disini jika di klik halaman akan berpindah ke link2.html. Pada conto
Read more

Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis

-
Image
Kali ini saya akan membuat tutorial bagaimana menggunakan template gratis sebagai template web dinamis. Pertama anda download terlebih dulu templatenya disini . Pada tutorial ini saya menggunakan template admin LTE 2. Pada template ini saya memecah bagian index.php dan menyatukan kembali dengan include, tujuannya agar template terbagi-bagi dan mudah dipahami. Selain itu, pembagian ini lah yang membuat web menjadi dinamis. Perlu diingat cara saya ini bukanlah cara satu-satu nya Cara Menggunakan template Admin LTE Sebagai Template Web Dinamis . Cara ini saya sharing karena menurut saya adalah cara yang cukup efisien dan mampu menangani semua halaman yang akan kita buat. Bagian terpenting nya adalah mampu menghasilkan program sesuai yang kita harapkan dengan cara yang lebih mudah dibuat. Pertama kita buat folder di htdocs template kemudian ekstrak file zip nya di folder tersebut. Selanjutnya buka folder template dan rename file index.html menjadi index.php  . Buka file
Read more

Cara Membuat Kalkulator Dengan Java Script

-
Image
Kali ini saya akan membagikan tutorial cara membuat kalkulator sederhana dengan java script. Kita ketahui java script adalah bahasa pemrograman klien. Artinya kode program dapat dilihat dari web browser. Kelebihan bahasa java script ini halaman tidak perlu reload. <!--nama file calc.php--> <!DOCTYPE html> <html> <head> <title>Calculator</title> <style type="text/css"> .tombol{ background-color: deepskyblue; } .tabel{ background-color: gold; margin: 10px; padding: 10px; } </style> </head> <body> <form name="calculator"> <table style="background-color: " class="tabel"> <caption>Calculator</caption> <tr> <td>Angka 1</td><td>:</td><td><input type="number" name="angka1"></td> </tr> <tr> <td>Angka 2</td&
Read more