Media Pengembangan Web & App | by APPKEY

Pembuatan Website Laravel Yuk Belajar Membuat Route dan View di Laravel! |...

Yuk Belajar Membuat Route dan View di Laravel! | Seri Belajar Laravel

-

Hai! Kembali lagi di seri Laravel tutorial dari Appkey.id

Kali ini kita akan belajar tentang tutorial Laravel 2. Apa itu tutorial Laravel 2?

Tutorial Laravel 2 adalah belajar membuat route view Laravel. Seperti yang Anda sudah ketahui, Laravel adalah framework berbasis MVC (model view controller). Otomatis, Anda harus menguasai cara membuat route dan view untuk bisa menjalankan Laravel.

Sudah tidak sabar untuk berkenalan lebih lanjut seputar route view Laravel pada Laravel tutorial kali ini? Tanpa berbasa-basi lagi, yuk kita langsung mulai Laravel tutorial dengan konsep route view Laravel. Selamat membaca!

Laravel Tutorial : Konsep View dan Route Laravel

laravel-tutorial-1

Sebelum terjun ke praktek Laravel tutorial membuat route dan view, tentunya Anda harus memahami dengan betul konsep dari route dan view ini terlebih dahulu. Pemahaman yang benar dan tepat otomatis akan menghindarkan Anda dari error logika coding.

Perlu untuk Anda ketahui, error logika coding adalah jenis error yang paling sering menimpa programmer sekaligus paling susah untuk diperbaiki.

Tentunya Anda tidak ingin hal ini terjadi pada software yang sedang Anda buat, bukan?

Jadi, mari kita mulai Laravel tutorial kali ini dengan mengenal apa itu view dan route Laravel. Mengapa kedua elemen ini penting? View adalah elemen yang menampilkan hasil atau output proses data.

Sementara route Laravel berfungsi untuk menjalankan proses routing, alias penentuan jalur dari setiap request yang diinput oleh user agar bisa diproses secara tepat dan menghasilkan output.

Semisal Anda melakukan input request ‘dashboard’ ke aplikasi atau website. Mesin yang sudah di-routing tentunya sudah punya jalur untuk request penampilan ‘dashboard’, sehingga software bisa menampilkan output ‘dashboard’ beserta isinya (seperti menu, konten, tombol login, dan seterusnya) sesuai kehendak user.

Jadi, tugas Anda selaku programmer adalah melakukan pemetaan sendiri kemana arah atau alur yang harus diproses Laravel untuk sebuah request.

Route dibuat untuk menghandle aneka macam request dan task yang diinput oleh user. Ada beberapa macam http method route yang bisa Anda buat di Laravel, antara lain route Post, Get, Options, Delete, Patch, dan Put.

Sebagai catatan, method route Patch, Put dan Delete biasanya tidak disupport oleh form HTML. Sehingga untuk mengakalinya, Anda perlu melakukan method spoofing. Spoofing adalah metode penambahan suatu hidden field pada form. Saat membuat penambahan ini, Anda perlu memasukkan kode _method dan isikan metode route yang ingin di-spoof. Namun Anda harus menggunakan form method ‘Post’ agar bisa melakukan spoofing method route lainnya.

Contoh spoofing route Delete di Laravel:
<form action="/path/action" method="POST">

{{csrf_field()}}

<input type="hidden" name="_method" value="DELETE">

</form>
Alternatif lainnya, Anda juga bisa memakai helper untuk melakukan generate input method spoofing dengan kode: method_field(). Contoh pemakaian helper untuk spoofing route Delete di Laravel:

<?php {{ method_field('DELETE') }}

Berikutnya, kita akan melihat bagaimana Laravel tutorial membuat route dan view secara praktis. Yuk lanjutkan scrolling ke bagian selanjutnya!

Artikel Terkait  Looping Adalah Algoritma Perulangan: Berikut Contohnya

Step by Step Mudah Membuat View dan Route Website

laravel-tutorial-3

Membuat routing untuk perintah yang diinput oleh user bukanlah hal yang sulit. Kali ini, kami akan menjabarkan cara membuat route perintah pada website memakai Laravel, sehingga web bisa menampilkan output pengolahan data pada view secara rinci ke user.

Sebagai catatan, folder /route pada Laravel umumnya terdapat 4 file: channels.php, web.php, api.php dan console.php. Mengingat kita akan mencoba membuat beberapa route pada website, maka otomatis kita akan banyak memakai file web.php.

Yuk kita mulai tutorialnya:

Mengubah Tampilan Polos Web

Anggaplah praktek ini bertujuan untuk mengubah tampilan kosong (plain example) menjadi ucapan “Selamat Datang” saat user selesai me-loading website. Berikut caranya:

  1. Mula-mula buat project Laravel (create project) > buka composer > input kode:

composer create-project –prefer-dist laravel/laravel portfolio

  1. Pada file, cari struktur coding
    Route::get('/', function () {
    return view('plainexample');
    });

    3. Ubah struktur coding di atas menjadi berikut:
    Route::get('/', function () {
    return 'Selamat Datang!';
    });

  2. Selesai. Untuk mengecek, buka browser > input kode URL: http://localhost:8000 > tekan enter atau klik loading. Nantinya Anda akan menemukan tampilan / view tulisan ‘Selamat Datang!’ saat website selesai di download.

Mencoba Route GET

Selanjutnya adalah mencoba melakukan route get untuk menampilkan halaman-halaman pada website, seperti about, home page dan halaman menu khusus ‘daftar project’. Berikut caranya:

  1. Buka file: routes/web.php
  2. Hapus semua isinya.
  3. Coding ulang untuk ketiga halaman (about, home page, dan daftar project) dengan kode-kode berikut:

# routing untuk halaman about
Route::get('/about', function () {
return 'About Page';
});

# routing untuk halaman home page
Route::get('/', function () {
return 'Home Page';
});

# routing untuk halaman daftar project
Route::get('/projects', function () {
return 'List Projects';
});

4. Anda sudah punya 3 routing untuk home page, about dan halaman daftar project dengan metode get (perhatikan kembali, metode get terinput pada kode route::get).

  1. Untuk mengecek, buka browser > input kode URL ke browser > tekan enter. URL about = http://localhost:8000/about. URL home page = http://localhost:8000. URL daftar project = http://localhost:8000/projects.

Jika berhasil, maka Anda akan sukses mendapatkan view dalam bentuk sederhana atau response string (teks biasa). Namun proses routing sederhana sudah selesai dilakukan.

Jika Anda ingin melakukan editing atau kustomisasi tampilan halaman website memakai Laravel, maka Anda bisa memakai ekstensi file blade.php. File blade.php punya banyak helper untuk mempermudah proses kustomisasi tampilan halaman website ataupun aplikasi.

Artikel Terkait  MySQL Adalah ? | Pengertian, Fungsi dan Cara Kerjanya

Membuat Named Route (Nama untuk Route)

Contoh Laravel tutorial membuat route yang terakhir adalah membuat named route atau nama untuk route. Banyak programmer sering membuat named route ini dengan tujuan memudahkan proses linking atau redirecting route yang satu ke yang lain.

Sehingga, proses perpindahan view dapat menjadi lebih dinamis dan mudah di hadapan para user.

Memberikan nama pada routing juga akan mempermudah pekerjaan Anda untuk menghandle path URL. Saat Anda mengganti path URL di routing, Anda tidak perlu repot mengganti keseluruhan nama link di view semasih nama route tetap seperti sebelumnya.

Berikut adalah cara membuat named routing di Laravel:

  1. Buka file: /routes/web.php
  2. Ganti kode pada file menjadi:

# routing untuk halaman about
Route::get('/about', function () {
return view('about');
})->name('about');

# routing untuk halaman home page
Route::get('/', function () {
return view('home');
})->name('home');

# routing untuk halaman daftar project
Route::get('/projects', function () {
return view('projects');
})->name('projects');


    Lakukan generate URL dari route tersebut > panggil fungsi route > masukkan nama route (sebagai parameter) > gunakan kode: route(‘namahalaman’)

    Contoh:

    route(‘homepage’); # > mengembalikan https://localhost:8000
    route(‘about’); # > mengembalikan https://localhost:8000/about
    route(‘daftarproject’); # > mengembalikan https://localhost:8000/projects

    1. Gunakan route helper untuk mengubah metode input URL manual > buka kembali file /resources/views/home.blade.php > ubah kode navbar:
    2. <nav class=”navbar navbar-expand-lg navbar-light bg-light ml-auto”>

      <div class=”container”>
      <a class=”navbar-brand” href=”{{ route(‘home’) }}”>Example</a>
      <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” calibri-controls=”navbarSupportedContent” calibri-expanded=”false” calibri-label=”Toggle navigation”>
      <span class=”navbar-toggler-icon”></span>
      </button>
      <div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
      <ul class=”navbar-nav ml-auto”>
      <li class=”nav-item active”>
      <a class=”nav-link” href=”{{ route(‘home’) }}”>Home

      <span class=”sr-only”>(current)</span></a>
      </li>
      <li class=”nav-item”>
      <a class=”nav-link” href=”{{ route(‘about’) }}”>About</a>
      </li>
      <li class=”nav-item”>
      <a class=”nav-link” href=”{{ route(‘projects’) }}”>Projects</a>

      </li>
      </ul>
      </div>
      </div>

      </nav>

      5. Ulangi coding yang sama untuk kedua file lain. Jika sudah selesai, Anda bisa melakukan pengecekan ulang di browser seperti pada contoh sebelumnya.

      Demikianlah seri Laravel tutorial kali ini. Semoga artikel kali ini dapat membantu menambah pemahaman Anda, ya! Nantikan artikel seri belajar Laravel lainnya dan juga artikel menarik seputar dunia IT hanya dari Appkey. Sampai jumpa!


      Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
      PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

      Jasa Pembuatan Aplikasi

      Jasa Pembuatan Website

      Jasa Pembuatan Paket Aplikasi

      Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya