Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)
Oct 9th, 2018

Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)

Category : Laravel, Tutorials | Posted by G-admin at at October 9th, 2018 06:25 am
178 | 0

Di artikel sebelumnya, kita sudah berhasil menampilkan output langsung dari halaman Controller (webController.php) namun hanya sebatas sebagai Debugger saja. Halaman Controller memang tidak di khususkan untuk di kostumisasi sebagai Front-End website, maka percuma saja kalian membuat template website sedemikian rupa karena halaman tersebut bukan merupakan bagian dari Front-End website. Untuk dapat melakukan kostumisasi halaman template untuk website dapat di lakukan di View yang mana ‘View’ ini merupakan istilah atau bagian dari Front-End website dengan Blade sebagai engine-nya.

Apa itu template Blade kalian bisa coba Googling sendiri atau bisa merujuk ke URL berikut :

Di dalam artikel ini penulis tidak membahas bagaimana cara meng-kostumisasi halaman template website di View karena pada dasarnya sama, malah tidak ada yang beda seperti kalian membuat halaman statis (HTML), bedanya kalau halaman statis ekstensinya berupa *.html (index.html, about.html, contact.html, dll.), maka di View ini kita harus menggunakan ekstensi *.blade.php (index.blade.php, about.blade.php, contact.blade.php, dll.) karena di View ini semua halaman template website menggunakan engine Blade.

Dengan menggunakan ekstensi *.blade.php sudah pasti isi halaman akan menjadi dinamis, jadi jika kalian ingin meng-update artikel suatu halaman tidak perlu hard-code atau ubah langsung kontennya di dalam skrip file yang bersangkutan.

Oh iya, artikel ini merupakan kelanjutan dari artikel-artikel sebelumnya yang penulis bagi menjadi beberapa bagian yaitu :

  1. Instalasi Laravel
  2. Routing & Controller
  3. View & Blade Template
  4. Model & Konfigurasi Database
  5. Form Input Data – CRUD
  6. Menampilkan Data – CRUD
  7. Update/Edit Data – CRUD
  8. Delete Data – CRUD

Jadi penulis ingatkan lagi, bagi kalian yang belum membaca artikel-artikel sebelumnya penulis sarankan untuk membaca artikel-artikel tersebut terlebih dahulu agar kalian tidak kebingungan mengikuti artikel kali ini.

 

Menampilkan Konten Ke Dalam View (Blade Template)

Pada artikel sebelumnya, kita berhasil menampilkan isi konten statis yang ada pada variabel $output dengan menggunakan fungsi dd(), untuk menyegarkan kalian kembali kurang lebih seperti ini isi kodenya :

public function about_us() {
$output = 'Ini adalah isi halaman About Us';
dd($output);
}

public function contact_us() {
$output = 'Tampilkan isi halaman Contact Us';
dd($output);
}

Nah, pada skrip tersebut, silahkan kalian ubah kode atau baris berikut :

dd($output);

Menjadi :

return view('index', array(
'content' => $output,
));

Penjelasan mudahnya dari skrip atau kode di atas kurang lebih sebagai berikut :

Fungsi view(argumen_1, argumen_2) pada skrip tersebut mengidentifikasikan folder \views yang terdapat di dalam folder \resources (C:\xampp\htdocs\project_laravel\resources\views). Di dalam fungsi view tersebut terdapat dua buah argumen yang harus kita isi, yaitu :

  • Argumen 1, berisi nama file yang akan berperan untuk menampilkan data atau konten secara dinamis yang akan di kirimkan oleh Argumen 2. Dalam kode tersebut, kita memasukan nama ‘index’ karena nanti kita akan membuat file Blade dengan nama index.blade.php.
  • Argumen 2, pada argumen ke dua ini harus berupa Array. Seperti terlihat pada kode tersebut, sementara kita hanya memasukan satu buah nilai atau value, yaitu ‘content’ sebagai Key-nya dan variable $output sebagai Value-nya. Key-nya ini yang nanti akan kita definisikan di dalam file Blade agar dapat menampilkan data atau konten dari variabel $output.

Sedangkan bagaimana cara untuk menampilkan konten-konten tersebut ke dalam View (Front-End), silahkan kalian ikuti langkah-langkah berikut ini :

  1. Buat file baru dengan nama ‘index.blade.php‘ di dalam folder \views (C:\xampp\htdocs\project_laravel\resources\views) dengan cara klik kanan di halaman kosong dari folder tersebut lalu pilih New > Text Document, selanjutnya silahkan kalian rename nama file yang baru menjadi ‘index.blade.php‘.
    INGAT, pastikan ekstensi filenya harus ‘.blade.php‘ dan nama file-nya sudah terdefinisi di dalam file Controller (webController.php) pada fungsi view() (Argumen 1).
  2. Setelah kalian berhasil membuat file Blade baru pada langkah nomor 1 di atas, selanjutnya silahkan kalian buka file tersebut lalu masukan skrip atau kode HTML standar. Untuk memudahkan kalian silahkan salin saja kode HTML berikut ke dalam file index.blade.php milik kalian.
    <!DOCTYPE html>
    <html>
      <head>
        <title>This is a title</title>
      </head>
      <body>
        <p>Hello world!</p>
      </body>
    </html>

    Seteleh kode HTML standar sudah selesai kalian salin, langkah selanjutnya ialah mengganti baris perintah atau kode berikut :

    <p>Hello world!</p>

    Menjadi :

    {{$content}}

    Mengapa harus {{$content}}?? Tanda ‘{{…}}‘ di sini merupakan sintak bawaan dari template Blade yang berfungsi untuk menampilkan data secara ter-sanitasi, jadi jika di dalam konten ada sintak-sintak atau kode HTML seperti <b>…</b>, <i>…</i>, <u>…</u>, dll. maka kode tersebut akan di filter sehingga browser yang kalian pakai tidak akan merender kode-kode tersebut, alhasil kode <b> yang berfungsi untuk membuat tulisan menjadi tebal akan di tampilkan secara normal, begitu pula untuk kode-kode HTML yang lain.
    Sedangkan jika kalian ingin agar template Blade tidak mem-filter kode-kode HTML dapat merubah sintak {{…}} menjadi ‘{!!…!!}‘, yang mana {!!…!!} merupakan kebalikan dari {{…}}.
    Selanjutnya terdapat variabel $content di dalam sintak {{…}} yang mana merupakan Key yang sudah kita definisikan sebelumnya di dalam Array (Argumen 2) yang terdapat di dalam file Controller (webController.php).

Setelah langkah-langkah di atas sudah selesai kalian lakukan, silahkan kalian buka web browser kalian lalu akses masing-masing permalink pada halaman About Us atau Contact Us.

http://localhost/project_laravel/public/about-us

atau

http://localhost/project_laravel/public/contact-us

Jika semua langkah-langkah yang kalian lakukan sudah benar, maka tampilan di web browser kalian kurang lebih sebagai berikut :

Sampai tahap ini kalian sudah berhasil menampilkan konten dinamis, dimana hanya dari satu halaman template Blade (index.blade.php), kalian dapat menampilkan konten-konten untuk halaman About Us dan Contact Us, bandingkan jika kalian membuat website HTML biasa dimana untuk tiap halaman kalian harus membuat file HTML-nya satu persatu.

Beberapa dari kalian pasti masih ada yang bertanya-tanya, ‘Kok udah di View tapi tampilannya masih biasa-biasa aja yah??

Untuk menjawab pertanyaan tersebut sudah jelas, hal tersebut di karenakan di dalam file index.blade.php yang kalian buat tadi belum ada elemen-elemen HTML-nya seperti Header, Body dan Footer website, namun begitu di sini kalian bebas membuat halaman template statis HTML-nya terlebih dahulu sesuai selera kalian masing-masing.

Dalam artikel kali ini, penulis akan menggunakan template statis sederhana dari artikel berikut :

Dan berikut adalah tampilan halaman website statis sederhana dari artikel tersebut :

Disini kita akan coba merubah template statis tersebut menjadi template dinamis dengan memanfaatkan engine Blade pada Laravel.

 

Konversi HTML Ke Template Blade

Untuk melakukan konversi template statis HTML biasa agar menjadi template Blade caranya sangat mudah, silahkan kalian ikuti langkah-langkah berikut :

  1. Silahkan kalian salin semua isi di dalam file index.html pada artikel Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML ke dalam file index.blade.php, namun pastikan di dalam file index.blade.php yang sudah kalian buat sebelumnya di kosongkan terlebih dahulu.
  2. Salin file layout.css pada artikel tersebut ke dalam folder \css yang terdapat di dalam \public (C:\xampp\htdocs\project_laravel\public).
    Perlu di ingat, semua file selain file dengan ekstensi *.blade.php di tempatkan di dalam folder \public.
  3. Setelah selesai, silahkan kalian ubah kode-kode pada baris berikut :
    <head>
    <!--Element-elemen tag <head> tulis disini-->
      <title>WEBSITE PERDANA SAYA</title>
      <link rel="stylesheet" href="layout.css" />
    </head>

    Menjadi :

    <head>
      <!--Element-elemen tag <head> tulis disini-->
      <title>WEBSITE PERDANA SAYA</title>
      <link rel="stylesheet" href="{{asset('css/layout.css')}}" />
    </head>

    Kode berikut :

    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">BLOGS</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">GALLERY</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>

    Menjadi :

    <ul>
      <li><a href="{{url('about-us')}}">ABOUT</a></li>
      <li><a href="{{url('contact-us')}}">CONTACT</a></li>
    </ul>

    Di sini kita merubah alamat URL bawaan dengan memasukan permalink dari halaman-halaman yang ada di dalam website dengan memanfaatkan fungsi {{url(‘PERMALINK’)}}, dengan merubah URL tersebut maka kalian secara otomatis dapat berinteraksi dengan website kalian hanya dengan meng-klik Link pada halaman website kalian, kalian juga bisa menambahkan permalink lain untuk halaman-halaman website kalian, namun perlu di perhatikan agar mendaftarkan pula permalinkpermalink tersebut ke dalam file Router (web.php) dan file Controller (webController.php) agar Laravel dapat menentukan halaman-halaman mana saja yang dapat di akses berdasarkan permalink yang kita berikan.

    Lalu yang terakhir ialah kode berikut :

    <div class="konten">
      <div class="padding_this">
        <h2>
          At vero eos et accusamus et iusto odio dignissimos
        </h2>
        <p>
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
        </p>
      </div>
    </div>

    Menjadi :

    <div class="konten">
      <div class="padding_this">
        <p>{{$content}}</p>
      </div>
    </div>

    Setelah selesai, silahkan kalian refresh kembali halaman web browser kalian, jika langkah-langkah yang kalian lakukan sudah benar maka kurang lebih tampilannya akan seperti berikut :

Sekian tutorial Laravel untuk hari ini, sampai sini silahkan kalian berkreasi dengan menggunakan template yang kalian miliki sendiri atau tetap memanfaatkan template yang sudah ada.

Sampai jumpa di tutorial berikutnya. Salam…

Share social media :



Your response about this article :


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Posts

Perbedaan Localhost Dan Web Hosting
Perbedaan Localhost Dan Web Hosting
Category : Others | September 17th, 2018
162 | 0

Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana suatu website bisa menampilkan konten-konten atau artikel seketika kita melakukan pencarian baik dengan menggunakan mesin pencari atau search engine seperti...

Continue reading
Membuat Efek Gradasi Warna Menggunakan CSS
Membuat Efek Gradasi Warna Menggunakan CSS
Category : Tutorials | September 4th, 2018
364 | 2

Pada tutorial kali ini kita akan mencoba membuat gradasi warna, apa itu gradasi warna bisa kalian lihat contohnya pada gambar-gambar berikut : Yup, seperti yang sudah kalian lihat pada gambar-gambar tersebut dimana pada tiap gambar memiliki lebih dar...

Continue reading
Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
Category : Tips & Tricks | August 14th, 2018
249 | 0

Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… Okey langsung saja, untuk artikel kali ini penulis ingin coba berbagi sedikit mengenai tips jika iklan adsense kamu ter-klik, mungkin lebih tepatnya ter-kl...

Continue reading
Tutorial : Cara Install Composer
Tutorial : Cara Install Composer
Category : Others | June 5th, 2018
367 | 0

Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby (bundler) yang menyediakan format standar untuk mengelola dependensi PHP dan library-library yang diperlukan. Sumber : Wikipedia Jadi secara garis besar, d...

Continue reading
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Category : Tips & Tricks | November 13th, 2017
690 | 0

Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tampilan bahwa domain kalian di blacklist atau di blokir oleh Google, alhasil tentunya website kalian tidak akan bisa di akses. Ada yang pernah ngalamin?? Bebe...

Continue reading
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Category : Tutorials | November 13th, 2017
1219 | 4

Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. Hehe… 😀 Ssetelah sekian lama ngga update akhirnya dapet kesempatan nyolong-nyolong waktu buat nge-update artikel Gaswad. Pada pembahasan artikel k...

Continue reading
Yang Baru Di Bootstrap 4
Yang Baru Di Bootstrap 4
Category : Others | October 31st, 2017
711 | 0

Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membuat Web Responsif Dengan Boostrap yang masih menggunakan versi 3, ehh… udah nongol aja ini adeknya yang versi 4. Yaaa’, sebenarnya sih’ ud...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
Category : Wordpress | October 24th, 2017
815 | 2

Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi kalian yang sudah tertinggal atau melewatkan artikel-artikel sebelumnya, maka silahkan kalian merujuk ke link berikut : Intro & Registering Template ...

Continue reading
Panduan SEO ala Google
Panduan SEO ala Google
Category : Tips & Tricks | October 24th, 2017
592 | 0

Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kalian, beberapa panduan dan tips berikut secara kebetulan merupakan salah satu yang  di referensikan oleh Google agar website kalian dapat dengan mudah di cr...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 4
Tutorial : Cara Membuat Template WordPress – Part 4
Category : Wordpress | October 20th, 2017
874 | 0

Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita buat sebelumnya, sesi ini merupakan sambungan dari artikel-artikel berikut : Intro & Registering Template – Part 1 Frontpage, Header & Footer ...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 3
Tutorial : Cara Membuat Template WordPress – Part 3
Category : Wordpress | October 20th, 2017
683 | 0

Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambung artikel sebelumnya. Pada sesi sebelumnya kita sudah berhasil membuat halaman Frontpage, Header dan Footer website, pada artikel kali ini kita akan coba m...

Continue reading
Cara Mendapatkan Uang Dengan Google Adsense
Cara Mendapatkan Uang Dengan Google Adsense
Category : Tutorials | October 16th, 2017
1293 | 2

Setelah beberapa waktu lalu di kantor penulis sempat heboh-hebohnya di karenakan fitur dari Google yang bernama Adsense ini, bagaimana tidak karena rekan-rekan penulis yang tadinya cuma browsing-browsing doang, youtube-an, download film, tidur, kesur...

Continue reading

Wordpress

  • Oct
    24
    2017
    Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
    Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi ...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 4
    Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 3
    Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambun...
    Read more
  • Oct
    13
    2017
    Tutorial : Cara Membuat Template WordPress – Part 2
    Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membah...
    Read more
  • Oct
    10
    2017
    11 Cara Meningkatkan Keamanan Pada WordPress
    Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website Word...
    Read more
  • More articles
Tips & Tricks

  • Nov
    02
    2018
    8 Tips Memilih Jasa Server Hosting Terbaik
    Pada artikel kali ini penulis ingin memberikan beberapa tips memilih server hosting terbaik. Ba...
    Read more
  • Oct
    18
    2018
    Syntax error or access violation: 1071 Specified key was too long
    Bagi kalian pengguna Framework Laravel, terutama Laravel mulai dari versi 5.4 keatas pasti pern...
    Read more
  • Aug
    14
    2018
    Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
    Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… ...
    Read more
  • Nov
    13
    2017
    Error Reported Attack Page! Waw… Domain Di Blacklist Google??
    Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tamp...
    Read more
  • Oct
    24
    2017
    Panduan SEO ala Google
    Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kali...
    Read more
  • More articles
Tutorials

  • Nov
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 6 (Menampilkan Data)
    Melanjutkan tutorial sebelumnya dimana kita sudah berhasil memasukan data ke dalam database mel...
    Read more
  • Nov
    01
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 5 (Form Input Data)
    Halo semua, kali ini penulis ingin melanjutkan tutorial cara Belajar Menggunakan Laravel, pada ...
    Read more
  • Oct
    18
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 4 (Model & Konfigurasi Database)
    Halo para pembaca Gaswad, menyambung artikel tutorial Belajar Menggunakan Laravel sebelumnya, k...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)
    Di artikel sebelumnya, kita sudah berhasil menampilkan output langsung dari halaman Controller ...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 2 (Routing & Controller)
    Pada artikel kali ini, kita akan belajar menggunakan Routing dan Controller dimana Routing dan ...
    Read more
  • More articles
Others

  • Sep
    17
    2018
    Perbedaan Localhost Dan Web Hosting
    Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana s...
    Read more
  • Jun
    05
    2018
    Tutorial : Cara Install Composer
    Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby ...
    Read more
  • Oct
    31
    2017
    Yang Baru Di Bootstrap 4
    Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membu...
    Read more
  • Oct
    09
    2017
    Pengertian Page View, Visitor Dan Bounce Rate
    Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template...
    Read more
  • Sep
    29
    2017
    ​Apa Itu Web Framework?
    Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awa...
    Read more
  • More articles
Page generated in : 810.21 ms