Cara menggunakan compact in javascript

Skip to content

  • TENTANG KAMI
    • AKREDITASI A PROGRAM STUDI
    • TENTANG UC
      • AKREDITASI UC
      • VISI, MISI, dan BUDAYA IPE
    • PROFIL PROGRAM STUDI
    • DOSEN & STAFF
    • VISI, MISI, DAN TUJUAN
    • KURIKULUM
      • PROFIL PROFESSIONAL MANDIRI
      • CAPAIAN PEMBELAJARAN LULUSAN
      • MATA KULIAH
    • FASILITAS
    • KERJASAMA
      • APPLE DEVELOPER ACADEMY @UC
      • UC METRODATA ACADEMY
      • TELKOM INDONESIA
      • PT HUAWEI TECH INVESTMENT
      • PERUSAHAAN TEMPAT MAGANG
    • HUBUNGI KAMI
  • ARTIKEL
    • BERITA
      • INFORMATIKA UC di MEDIA
      • KEGIATAN
      • PRESTASI
    • ARTIKEL BLOG
      • MATERI BELAJAR
      • TIP & TRIK
    • AGENDA KEGIATAN
    • INSTAGRAM GALLERY
    • JURNAL INFORMATIKA dan SISTEM INFORMASI (JUISI)
    • SNAPTI
      • PROCEEDING SNAPTI 2015
      • Proceeding SNAPTI 2016
  • PROFILES
    • ALUMNI
      • ENTREPRENEURS
      • INTRAPRENEURS
      • POSTGRADUATES
    • STUDENTS PORTFOLIO
      • ENTREPRENEURSHIP
      • FINAL PROJECT
      • CLASS PROJECT
        • MULTIMEDIA
      • RESEARCH PROJECT
  • REGISTRASI
    • BIAYA KULIAH
    • PANDUAN PENDAFTARAN
    • BEASISWA
  • Cara menggunakan compact in javascript
    Indonesia

Laravel View dan Blade (Belajar Laravel #5)

  • View Larger Image
    Cara menggunakan compact in javascript

Laravel View dan Blade (Belajar Laravel #5)

Laravel View dan Blade merupakan salah fitur dari Laravel yang memudahkan pengembang web untuk memisahkan tampilan dengan logic. Artikel ini akan membahas tentang View dan pemanfaatan Blade, sebuah fitur Laravel untuk memudahkan dalam menampikan data maupun informasi pada halaman web.

Penjelasan Laravel View dan Blade

Views adalah representasi visual dari suatu halaman web yang pada umumnya bertugas untuk menampilkan data yang diterima oleh Controller dari Model.  Dalam hal ini Views adalah bagian dari sistem Laravel di mana HTML dihasilkan dan kemudian ditampilkan di layar pengguna. Penggunaan Views sangat membantu pengembangan web khususnya untuk merawat dan memberikan tambahan fungsi, karena memisahkan logic atau program utama dengan bagian tampilan.

Blade adalah fitur yang disediakan Laravel untuk proses templating sederhana namun sangat bermanfaat dalam proses pengembangan tampilan halaman web. Tidak seperti fitur templating PHP populer lainnya, Blade tidak membatasi pemrogram untuk menggunakan kode PHP biasa dalam membuat kode untuk tampilan. Semua tampilan Blade dikompilasi ke dalam kode PHP biasa dan kemudian disimpan dalam cache hingga diubah, yang berarti Blade pada dasarnya tidak menambahkan beban atau overhead pada saat aplikasi dijalankan.

File tampilan blade menggunakan ekstensi file .blade.php dan biasanya disimpan di direktori resources / views. Dalam hal ini Blade pada Laravel menggunakan basis template inheritance dan sections.

Salah satu fungsi dari Laravel Blade templating adalah penggunaan layout, agar tampilan yang berulang misalnya header, footer, sidebar dan sebagainya tidak perlu dibuat berkali-kali sehingga rawan inkonsistensi. Pada umumnya layout ditempatkan dalam sebuah folder yang bernama layout dalam folder views, namun demikian programmer tidak dibatasi apabila ingin menggunakan nama lain.

Tutorial Halaman Web dengan Laravel View dan Blade

Pada tutorial ini akan dibuat tampilan dari halaman web dengan memanfaatkan CSS dan framework CSS Boostrap agar menghasilkan tampilan yang lebih professional.

Menggunakan Template di View

Buat sebuah file home.blade.php dan letakkan dalam folder view. Pada file ini akan dibuat sebuah halaman sederhana, dengan memanfaatkan bootstrap. Misalnya dengan menggunakan Jumbotron pada contoh ini:

https://getbootstrap.com/docs/4.2/components/jumbotron/

Cara menggunakan compact in javascript

Bootstrap Jumbotron

Silahkan salin code Jumbotron dan sisipkan dalam View, seperti terlihat di gambar berikut ini:

Cara menggunakan compact in javascript

Jumbotron Code

Memanfaatkan Parameter Config

Ikuti langkat berikut untuk melakukan konfigurasi sistem pada Laravel:

  • Buka .env file
  • Ganti APP_NAME dengan Portfolio
  • Akses APP_NAME dari Home dengan menggunakan perintah:
       

Dengan parameter ke-2 sebagai default value:

  Code yang dibuat akan terlihat seperti gambar berikut ini:

Cara menggunakan compact in javascript

.env App Name

Berikut adalah tampilan yang dihasilkan:

Cara menggunakan compact in javascript

Tampilan halaman dengan App Name

Penggunaan Bootstrap

  • Laravel menggabungkan Bootstrap css dalam project yang di-generate.
  • Bootstrap css tersedia dalam file /public/css/app.css
  • Untuk menambahkan Bootstrap dalam web yang dibuat, pada halaman html bagian dapat ditambahkan:

Cara menggunakan compact in javascript

Tampilan Home dengan Bootstrap CSS

Apabila dicermati, maka kode sumber dari halaman ini akan tampil sebagai berikut:

Cara menggunakan compact in javascript

Source Code View dengan Jumbotron

Mendefinisikan Blade

Potongan program berikut dalam file app.blade.php yang disimpan dalam sebuah folder baru dalam folders Views yang diberi nama Layouts.

Berikut adalah penjelasan dari potongan program tersebut:

  • Blade merupakan pengaturan tampilan dengan menggunakan HTML markup, dengan penambahan beberapa directive dari Laravel.
  • Pada contoh sebelumnya terlihat directive pada bagian @section dan @yield
  • Directive @section mendefinisikan sebuah bagian (section) dari isi halaman web
  • Directive @yield digunakan untuk menampilkan isi dari bagian tersebut.

Menggunakan Blade

Berikut adalah contoh penggunaan Blade Template:

Berikut adalah penjelasan dari potongan program tersebut:

  • View yang extend sebuah Blade layout akan mengganti setiap bagian (section) dari layout. Content yang dituliskan pada layout dapat disertakan dengan menggunakan directive @parent dalam section.
  • Pada penggunaan @yield, default value dapat diatur atau dikirimkan dengan menuliskannya di argument kedua, contohnya:
    @yield(‘section’, ‘Default Content’)

Jadi manakah yang sebaiknya dipergunakan, Yield atau Section?

  • Pada contoh sebelumnya terlihat penggunaan @yield dan @section yang serupa.
  • Intinya untuk hal sederhana gunakan @yield, sedangkan untuk kebutuhan yang lebih advanced bisa digunakan @section… @show.
  • Karena semua yang bisa dilakukan dengan @yield bisa dilakukan dengan @section… @show, namun tidak sebaliknya.

Menampilkan Blade

Blade views yang telah dibuat dapat ditampilkan dengan perintah view yang dapat diakses secara global.

Layout

  • Buat sebuah folder layouts di dalam folder views
  • Buat sebuah file bernama app.blade.php dalam folder tersebut
  • Copy paste struktur utama dari halaman home.blade.php yang dibuat ke file tersebut.

Cara menggunakan compact in javascript

Folder Layout Dalam Views

Cara menggunakan compact in javascript

Isi File app.blade.php

Silahkan mengganti bagian isi dari container dengan code menggunakan @yield seperti tampak pada gambar berikut:

Cara menggunakan compact in javascript

File App dengan menggunakan @yield

Silahkan mengubah isi dari home.blade.php dengan kode seperti terlihat pada gambar:

Cara menggunakan compact in javascript

Extends Blade

Mengirimkan Value ke Blade

Berikut adalah beberapa cara untuk mengirimkan Value ke Blade:

  • Menggunakan compact(‘namavariabel’)

    Cara menggunakan compact in javascript

    Blade Menggunakan Compact

  • Menggunakan ->width(‘namavar’, ‘vardikirim’). Parameter pertama adalah nama variabel untuk menerima di dalam blade, parameter kedua adalah variable dari value yang akan dikirimkan.

    Cara menggunakan compact in javascript

    Blade menggunakan With

  • Menggunakan ->width(‘namavar’, ‘var_array_dikirim’). Parameter pertama adalah nama variabel untuk menerima di dalam blade, parameter kedua adalah variable dari value yang akan dikirimkan berupa array.

    Cara menggunakan compact in javascript

    Blade Menggunakan With dengan 2 Parameter

Menerima Multi Value dari Blade

Berikut adalah potongan program yang dipergunakan untuk mengambil muti value yang dikirimkan menggunakan Blade.

Cara menggunakan compact in javascript

Mendapatkan Multi Value dengan Blade

Latihan

Silahkan mengerjakan view untuk halaman website portfolio yang terdiri dari halaman:

  • home
  • about
  • education
  • projects

Silahkan mengubah berbagai view yang ada pada project dengan memanfaatkan fitur Blade Templating.

Baca Juga:

  • Laravel Routing (Belajar Laravel #4)

  • Membuat Laravel Project Baru (Belajar Laravel #3)
  • Kebutuhan Server dan Perangkat Lunak (Belajar Laravel #2)

  • Web Development Framework (Belajar Laravel #1)

Written by: SEW 20190922

Terkait

Share This Story, Choose Your Platform!

About the Author: SEW

Stephanus Eko Wahyudi adalah dosen Teknik Informatika Universitas Ciputra yang juga bertugas menjadi Head of Department (Kaprodi) di departemen yang sama. Pendidikan sarjana ditempuhnya di bidang Teknik Informatika, sedangkan pasca-sarjana sebagai Master of Multimedia di Monash University Melbourne. Adapun bidang minat riset dan pengembangan adalah di bidang teknologi web based applications, mobile applications, multimedia applications, serta technopreneurship. Saat ini menempuh S3 di bidang Manajemen Teknologi Informasi di Institut Teknologi Sepuluh Nopember (ITS) Surabaya.

2 Comments

  1. terimakasih tutorialnya. Saat kami sedang mengembangkan portal jual beli properti yg dulu kami bangun menggunakan wordpress.

  2. mantap, terima kasih informasinya,

Page load link

Cara menggunakan compact in javascript

Go to Top