Mengatasi 'Target class controller does not exist' di Laravel 8

Ada pembaharuan di laravel 8 dalam kita mendefinisikan rute, Laravel 8 dirilis kemarin dengan banyak fitur dan perubahan baru. Salah satu perubahan tersebut adalah penghapusan spasi nama rute, seperti yang tertulis di dokumentasi rilis laravel 8 mengenai Routing Namespace Update. Bahwa pada versi ini cara penulisan menggunakan sintaks callable PHP

Error tersebut terjadi karena tidak ditemukannya lokasi atau path dari Controller yang kita defisinikan pada route.

Masalahnya bukan karena kodenya rusak, tetapi 99,9%  dari versi sebelumnya  kita bisa mendefisinikan route seperti yang kita lakukan di versi sebelumnya namun tidak di laravel 8 tidak mendefinisikan namespace route ke kontroller secara otomatis. itu sebabnya kita mendapati problem atau error seperti Target class [xxxcontroller] does not exist.

Cara Mengatasi

Jika cara diatas terlalu rumit dan  jika  memiliki route banyak kita bisa memilih untuk menggunakan cara lainnya, yaitu dengan menambahkan namespace route.

 Diaravel 8 namespace route tidak disediakan secara otomatis, kita perlu menambahkannnya jika ingin seperti versi sebelumnya.  Buka RouteServiceProvider.php dan tambahkan properti $namespace seperti gambar dibawah

 $namespace di tambahkan setelah properti, bisa membuat route dengan format seperti sebelumnya. Contohnya seperti gambar dibawah 

Atau cara lain  dengan menambahkan path atau namespace pada action route seperti gambar dibawah

Read More

Convert Html Ke React

Berikut ini adalah Tutorial yang akan mengonversi/Convert halaman web HTML ke React js,  Jika Kalian sedang membangun aplikasi / satu halaman web baru dan membutuhkan cara tersrbut, tutorial ini cocok untuk kalian dalam mempelajari React.js.

Karena untuk membangun situs web tidak cukup dengan hanya mengetahui HTML, CSS, dan Javascript, perlu disebutkan bahwa  beberapa perusahaan telah memutuskan untuk beralih ke situs web dan mengkususkan  bagi para developer untuk bisa menggunakan beberapa library dan framework.

Di tutorial kali ini kita hanya membahas pada bagian navbar,  kita akan merubah bagian dari navbar tersebut Menjadi Part / bagian ok sebelum kita melakukan perubahan pertama-tama kita instal react router seperti gambar yang dibawah.

Dan di file index.js tambahkan import dari router 

Jadi disini kita akan membungkus app  kedalam browser router, setelah itu buat file header.js di folder parts

Di file header.js kita akan mengisikan fungsional component dan kita akan menerima sebuah props dan isikan script header html yang inggin diconvert

Karna kita menggunakan react maka kita harus merubah semua class pada script yang kita convert sebelumnya.

Untuk memanggil images kalian bisa tambahkan seperti dibawah 

Untuk menambahkan link dari navbar kita akan menggunakan router yang telah kita install sebelumnya, jadi komponen linknya kita pakai dari  react-router-dom. Untuk menerapkannya kita panggil link tersebut.

Dan masukkan img ke dalam link dan hrefnya diganti dengan to 

Untuk menampilkan header tersebut kita bisa tampilkan dengan cara seperti gambar dibawah.

maka hasilnya akan terlihat seperti gambar dibawah

Read More

Membuat Project Dengan Vue UI

VUE.JS

Pada tutorial kali ini kita akan membahas bagaimana cara  membuat project dengan menggunakan Vue UI, pertama buka command line dan ketikan VUE UI seperti gambar yang dibawah.

Setelah mengetikan comman Vue ui seperti gambar diatas maka akan muncul tampilan seperti dibawah, setelah muncul tampilan seperti dibawah maka selanjutnya isi nama project vue yang ingin dibuat.

Isi nama project , pilih package manager yang ingin digunakan, disini saya mengunakan npm dan isi bagian recommended git repository tapi bisa diabaikan.  lalu untuk preset kita akan pilih secara default dari bawaan VUE. UI  

Biasanya akan memerlukan waktu lama untuk membuat sebuah projeact Vue, setelah selesai maka akan keluar tampilan seperti gambar dibawah.

Selanjutnya kita  perlu menambahkan vue.router, vue router ini berfungsi untuk membuat halaman menjadi lebih dari satu karna untuk saat pertama kali kita membuat sebuah project baru divue maka hanya terdapat satu halaman, untuk mentesting atau menampilkan project yang kita buat maka bisa mengclick tombol.

Setelah menjalankan Run task maka tunggu serve untuk membuild setelah berhasil membuild maka click open App seperti gambar dibawah

Maka akan muncul tampilan seperti dibawah, tapi disini hanya ada single page.

Untuk menambahkan beberapa halaman kita perlu untuk menginstall vue router, untuk menambahkan rouver kalian bisa pergi ke pulgins dan click serach dan pilih  @vue/cli pulgin-router seperti gambar dibawah.

Tunggu beberapa saat dan setelah berhasil di install maka akan ada pemberitahuan seperti gambar dibawah, jadi kalian bisa langsung click finish.

Maka secara otomatis vue akan mengenerate halaman baru dan menambahkan beberapa component, ketika kita mendapatkan perubahan dibeberapa document maka akan langsung otomatis terupload kepada github maka akan ada beberapa pemberitahuan seperti apa saja yang telah dihapus, ditambahkan, diubah maka kita bisa melakukan perubahan terhadap github 

Setelah kembali pada VSC ( visual studio code ) kalian bisa melihat difile yang telah kalian buat sebelumnya terdapat perubahan ke versi terbaru atau perubahan di bagian router, nah untuk melihat perubahan yang telah dilakukan maka kalian bisa check halaman UI dibrowser maka akan tampil hasi seperti gambar maka kalian akan menemukan  dua halaman dari perubahan router yang kalian install sebelumnya.

Read More

Menampilkan Halaman Detail Dengan Laravel

Pada bagian Detail ini ada 2 yang kita tambahkan yaitu dibagian controllers dan dibagain bagian front-end di detail.blade.php, dibagian controllernya kita akan memanggi model dari TravelPackage.

Setelah itu kita akan menambahkan query Sqlnya dan parameter slug karna dibagian route / web.php kita sudah menambahkan slug

Jadi untuk memanggil bagian travel detailnya kita akan menggunakan Slug dibandingkan menggunakan ID karna dengan menggunakan Slug lebih enak dibaca untuk pengguna

Setelah itu tambahkan variable item dengan value TravelPackage dengan relasi galleries dengan kondisional slug =  $slug lalu kita akan panggil firstorfail / datanya yang pertama akan dipanggil dan gagalkan jika datanya tidak ditemukan, setelah itu masukkan item dengan $item kedalam view.

Setelah itu masukkan data yang dikirimkan dari controller tadi kedalam view detail.blade.php  sesuai dengan apa yang ingin ditampilkan. 

Untuk menampilkan data gallery yang pertama atau menampilkan gambar yang pertama kita akan menggunakan kondisional if  sebagai mencheck data pertama untuk gallery tersebut.

Dibagian src dan xoriginal untuk menampilkan gambar pertama

Hasil dari pemanggilan data tersebut bisa dilihat seperti gambar dibawah

Untuk menampilkan thumbnail /beberapa gambar yang ada dibawah gambar utama maka kita akan menggunakan foreach, jangan lupa pada saat memanggil imagenya dibungkus dengan munggunakan storage.

Dan untuk menampilkan deskripsi pada gallery kita bisa memanggil data seperti gambar yang dibawah.

Dan untuk menampilkan data yang lain bisa dipanggil dengan cara seperti yang dibawah.

Selenjutnya untuk menampilkan data yang ada di trip informasi, dibagian tanggal kita akan set dibagian table maka kita akan menampilkan dengan menggunakan format  carbon karbon ini sudah terinstal secara otomatis di laravel contohnya seperti gambar dibawah

Hasilnya seperti gambar dibawah

Di bagian tombol ayo berangkat kita akan tambahkan pengkondisian disini kita buat 2 kondisi  jika pengguna belum login maka kita akan mengarahkan pengguna ke halaman login dan jika pengguna sudah melakukan login maka kita akan mengarahkan pengguna ke bagian proses check out

Setelah itu kita siapkan routernya sebelum kita melakukan dibagian check out

Dibagian router kita tambahkan middleware didalamnya terdapa auth yang mencheck apakah user sudah melakukan login atau tidak dan verified untuk verifikasi dibagian verifikasi ini sudah menjadi default bawaan dari laravel

Penjelasan dari setiap router diatas

Route post yang diatas adalah halaman dari checkout dengan tambahan parameter Id, router ini berfungsi untuk memproses data dari checkout tersebut, saat user menekan tombol ayo berangkat maka akan diarahkan ke checkout proses dan data yang telah diinputkan itu  akan masuk ke halaman chekout controller index, jadi nanti user akan mendapatkan Id, id disini dari id transaction. 

Setelah melakukan checkout data tersebut akan tersedia dan akan mendapatkan Id juga tapi di route ini akan menggunakan Get 

Disini kita akan membutuhkan tambahan misalnya dalam satu acara travel kita membutuhkan 5 orang nah di website ini kita bisa mengundang /invite member yang pernah join, jadi fungsinya untuk menambah dari orang selain dari pengguna.

Selanjutnya checkout remove fungsinya hampir sama dengan checkout create tapi disini kebalikan dari checkout create dimana kita akan menghapus data yang tersedia.

Dan yang terakhir bagian dari checkout confirm  jadi jika user sudah yakin dengan data yang telah diinputkan maka tahap selanjutnya akan mengganti status itu menjadi sukses, karna sebenarnya data transaksi ini atau bisa dikatakan dengan data cart / keranjang belanja hanya saja disini beda di statusnya saja.

Read More