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  Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

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  Apa itu RPL? Beberapa Hal Yang Perlu Diketahui Tentang Jurusan RPL

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!

Blog Post Ranking 10

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...

Proses Komunikasi: Encoding dan Decoding

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

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...

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...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Layout adalah : 4 Prinsip Dasar Desain Layout

Desain layout adalah salah satu bagian dari seni kita semua tahu,  untuk bisa menampilkan seni dengan baik, kita harus...

Apa Itu Cache Memory? Pengertian dan Fungsinya

Apa itu cache memory? Orang yang setiap hari berinteraksi dengan internet, istilah cache tentu saja bukan lagi istilah yang...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya