» » Cara Menggunakan Laravel UI pada Laravel 9
Edit

Cara Menggunakan Laravel UI pada Laravel 9

 Apa itu Laravel UI? Dari dokumentasi resminya dibagian About kita akan menemukan tulisan "Laravel UI utilities and presets". Lalu untuk apa sebenarnya LAravel UI ini? Dari dokumentasi pada bagian Introduction terdapat:

This legacy package is a very simple authentication scaffolding built on the Bootstrap CSS framework. While it continues to work with the latest version of Laravel, you should consider using Laravel Breeze for new projects. Or, for something more robust, consider Laravel Jetstream.

Disebutkan bahwa package ini merupakan sebuah perancah otentikasi sederhana yang dibuat dengan CSS Framework yaitu Bootstrap. Sekarang Laravel UI sudah release di versi v3.4.6 pada 24 Mei 2022, yang awal releasenya di versi v1.0.0 pada 14 Agustus 2019.

Lalu apa yang akan kita pelajari?

Kali ini kita akan mempelajari cara menggunakan Laravel UI di Laravel versi 9 lebih tepatnya untuk bagian fungsi Autentikasi Login Register.

Oke, sebelum kita mulai ada yang perlu dipersiapkan terlebih dahulu:

  • Kita harus mempunyai Browser, disini saya akan menggunakan Google Chrome
  • Kita harus mempunyai device berupa Laptop atau PC
  • Sudah menginstal XAMPP atau Laragon atau semacamnya
  • Sudah mengintsal Text Editor seperti Sublime Text, VS Code atau lainnya (Pilih salah satu saja)
  • Terhubung ke Internet (Hanya untuk proses installnya saja)
  • Menggunkan PHP >= 8.0
  • Sudah menginstall Composer
  • Sudah mengintsall Node JS

Jika kita sudah mempersiapkan apa yang harus kita persiapkan seperti yang sudah di jelaskan diatas, baru kita mulai. Lets Go..

Mengintsall Laravel 9 Via Composer

  1. Disini kita akan menginstall via composer, buka CMD lalu masuk ke lalu masuk ke dalam folder htdocs (Menggunakan XAMPP) C:\xampp\hdtocs lalu ketikan perintah sebagai berikut composer create-project laravel/laravel example-app ganti example-app nya dengan belajar-laravel-ui atau sesuai keinginan masing-masing (bebas). Lalu klik Enter dan proses install akan dimulai kemudian tunggu hingga proses installnya selesai

image.png

image.png

  1. Masuk ke folder yang sudah kita buat dengan perintah cd nama_folder. Berarti kita masuk ke folder belajar-laravel-ui, bagi yang nama foldernya beda disesuaikan saja. Kemudian klik Enter.

image.png

  1. Buka Code Editor dengan perintah code . lalu Enter, maka akan otomatis membuka folder tersebut di software VS Code.

image.png

image.png

  1. Kembali lagi ke CMD lalu kita jalankan folder laravel tersebut tersebut dengan perintah php artisan serve, lalu klik Enter

image.png

  1. Buka Browser Chrome lalu ketikan di address bar http://127.0.0.1:8000/ , lalu Enter

image.png

  1. Jika sudah muncul seperti di gambar langkah yang ke-5 maka proses intall laravel 9 nya sudah berhasil bisa melanjutkan untuk install laravel ui 😃

Menginstall Laravel UI 🔥

  1. Kembali ke CMD masih di direktori yang sebelumnya, jika srtisan serve masih berjalan maka kita hentikan terlebih dahulu dengan menekan CSTL + C dan jika sudah ketikan perintah composer require laravel/ui, kemudian klik Enter, dan tunggu hingga prosesnya selesai

image.png

image.png

  1. Jika sudah, kembali lagi ke CMD lalu kita akan meng generate basic scaffolding, karena saya akan menggunkan Bootstrap makan kita ketikan php artisan ui bootstrap, lalu Enter

image.png

  1. Di langkah ke-2 ada perintah untuk menjalankan npm install && npm run dev namun di biarkan saja dahulu karena kita akan meng generate login / registration scaffolding 😅 , kembali ke CMD masih di direktori yang sama kita ketikan php artisan ui bootstrap --auth lalu tekan Enter.

image.png

  1. Kita kembali ke VS Code maka sudah ada folder baru di dalam folder Controllersyaitu folder Auth yang berisi 6 file

image.png

Dan pada folder views juga terdapat folder baru yaitu auth dan layouts

image.png

dan masih ada folder dan file didalamya

image.png

  1. Kemudian kembali ke CMD lalu ketikan php artisan serve lagi dan kembali ke browser maka kan ada probahan di tampilannya di pojok kanan atas layar, seperti berikut

image.png

Jika kita klik salah satu atau keduanya maka akan menampilkan halaman login jika klik login dan halaman register jika kita klik register

image.png

image.png

Namun disini kita mendapati halaman login dan registernya dengan keadaan belum ada styling nya sehingga tampilannya tidak menarik dan rapi 😟

  1. Oleh karena itu kita di rekomentasikan oleh Laravel UI nya untuk menjalan perintah npm install && npm run dev, agar tampilannya lebih rapi. Oke mari kita coba 😛

image.png

  1. Setelah langkah ke-6 selesai kita kembali ke CMD lalu ketikan php artisan serve lalu buka browser kemudian refresh halamannya dulu dan taraa sekarang sudah cukup rapi dan oke bilan di pandang 😋

image.png

image.png

  1. Jika terjadi error pada saat menjalankan npm install && npm run dev jalankan perintah npm cache clear --force dan jalankan perintah npm install dan npm run dev secara terpisah

image.png

  1. Untuk bisa melakukan register dan login pertama kita harus menjalankan apche dan mysql dengan mengklik button start (bagi yang menggunkan XAMPP). Mari kita jalankan XAMPP nya hingga muncul kurang lebih seperti di gambar di bawah

image.png

  1. Lalu buka .env di text editor lalu cari bagian DB dan ubah value DBDATABASE, DBUSERNAME dan DB_PASSWORD (bagi yang menggunkan mysql xampp) menjadi seperti berikut atau disesuaikan sesuai config masing2

image.png

  1. Buka phpmyadmin dengan ketikan

image.png

atau klik button admin di bagain mysql

image.png

  1. Jika sudah terbuka phpmyadmin nya, langkah selanjutnya kita klik new

image.png

lalu create database, pastikan nama database nya sama seperti value DB_DATABASE yang berada di file .env dan klik button create

image.png

  1. Sekarang buka kembali CMD dan jalankan perintah php artisan migrate

image.png

  1. Kita kembali ke phpmyadmin dan sekarang sudah ada table nya yang sudah disediakan oleh migration

image.png

  1. Jalankan kembali php artisan serve dan buka browser, pergi ke halaman register dan refresh terlebih dahulu. Isi form registernya dan klik button register

image.png

Jika berhasil melakukan register maka kita akan di bawa ke halaman dashboard

image.png

Dan sekarang kita sudah punya 1 data di table users

image.png

  1. Mari kita coba login dengan data yang sudah kita buat sebelumnya apakah berhasil. Pertama kita klik logout

image.png

  1. Pergi ke halaman login dan isi formnya, lau klik button login

image.png

Dan kita sudah berhasil login

image.png

Nah sekarang kita sudah menyelesaikan login dan register dengan Laravel UI ☺️ Untuk sekarang sampai sini dulu dan nantinya pasti akan diupdate. Ditunggu ya.. 😄

Kesimpulan

Kita sudah mempelajari hal-hal berikut:

  • Menginstall Laravel Via Composer ✔️
  • Menginstall Laravel UI versi terbaru ✔️
  • Memjalakan beberapa perintah php artisan ✔️
  • Membuat Database di Localhost PHPMyAdmin ✔️

 Apa itu Laravel UI? Dari dokumentasi resminya dibagian About kita akan menemukan tulisan "Laravel UI utilities and presets". Lalu untuk apa sebenarnya LAravel UI ini? Dari dokumentasi pada bagian Introduction terdapat:

This legacy package is a very simple authentication scaffolding built on the Bootstrap CSS framework. While it continues to work with the latest version of Laravel, you should consider using Laravel Breeze for new projects. Or, for something more robust, consider Laravel Jetstream.

Disebutkan bahwa package ini merupakan sebuah perancah otentikasi sederhana yang dibuat dengan CSS Framework yaitu Bootstrap. Sekarang Laravel UI sudah release di versi v3.4.6 pada 24 Mei 2022, yang awal releasenya di versi v1.0.0 pada 14 Agustus 2019.

Lalu apa yang akan kita pelajari?

Kali ini kita akan mempelajari cara menggunakan Laravel UI di Laravel versi 9 lebih tepatnya untuk bagian fungsi Autentikasi Login Register.

Oke, sebelum kita mulai ada yang perlu dipersiapkan terlebih dahulu:

  • Kita harus mempunyai Browser, disini saya akan menggunakan Google Chrome
  • Kita harus mempunyai device berupa Laptop atau PC
  • Sudah menginstal XAMPP atau Laragon atau semacamnya
  • Sudah mengintsal Text Editor seperti Sublime Text, VS Code atau lainnya (Pilih salah satu saja)
  • Terhubung ke Internet (Hanya untuk proses installnya saja)
  • Menggunkan PHP >= 8.0
  • Sudah menginstall Composer
  • Sudah mengintsall Node JS

Jika kita sudah mempersiapkan apa yang harus kita persiapkan seperti yang sudah di jelaskan diatas, baru kita mulai. Lets Go..

Mengintsall Laravel 9 Via Composer

  1. Disini kita akan menginstall via composer, buka CMD lalu masuk ke lalu masuk ke dalam folder htdocs (Menggunakan XAMPP) C:\xampp\hdtocs lalu ketikan perintah sebagai berikut composer create-project laravel/laravel example-app ganti example-app nya dengan belajar-laravel-ui atau sesuai keinginan masing-masing (bebas). Lalu klik Enter dan proses install akan dimulai kemudian tunggu hingga proses installnya selesai

image.png

image.png

  1. Masuk ke folder yang sudah kita buat dengan perintah cd nama_folder. Berarti kita masuk ke folder belajar-laravel-ui, bagi yang nama foldernya beda disesuaikan saja. Kemudian klik Enter.

image.png

  1. Buka Code Editor dengan perintah code . lalu Enter, maka akan otomatis membuka folder tersebut di software VS Code.

image.png

image.png

  1. Kembali lagi ke CMD lalu kita jalankan folder laravel tersebut tersebut dengan perintah php artisan serve, lalu klik Enter

image.png

  1. Buka Browser Chrome lalu ketikan di address bar http://127.0.0.1:8000/ , lalu Enter

image.png

  1. Jika sudah muncul seperti di gambar langkah yang ke-5 maka proses intall laravel 9 nya sudah berhasil bisa melanjutkan untuk install laravel ui 😃

Menginstall Laravel UI 🔥

  1. Kembali ke CMD masih di direktori yang sebelumnya, jika srtisan serve masih berjalan maka kita hentikan terlebih dahulu dengan menekan CSTL + C dan jika sudah ketikan perintah composer require laravel/ui, kemudian klik Enter, dan tunggu hingga prosesnya selesai

image.png

image.png

  1. Jika sudah, kembali lagi ke CMD lalu kita akan meng generate basic scaffolding, karena saya akan menggunkan Bootstrap makan kita ketikan php artisan ui bootstrap, lalu Enter

image.png

  1. Di langkah ke-2 ada perintah untuk menjalankan npm install && npm run dev namun di biarkan saja dahulu karena kita akan meng generate login / registration scaffolding 😅 , kembali ke CMD masih di direktori yang sama kita ketikan php artisan ui bootstrap --auth lalu tekan Enter.

image.png

  1. Kita kembali ke VS Code maka sudah ada folder baru di dalam folder Controllersyaitu folder Auth yang berisi 6 file

image.png

Dan pada folder views juga terdapat folder baru yaitu auth dan layouts

image.png

dan masih ada folder dan file didalamya

image.png

  1. Kemudian kembali ke CMD lalu ketikan php artisan serve lagi dan kembali ke browser maka kan ada probahan di tampilannya di pojok kanan atas layar, seperti berikut

image.png

Jika kita klik salah satu atau keduanya maka akan menampilkan halaman login jika klik login dan halaman register jika kita klik register

image.png

image.png

Namun disini kita mendapati halaman login dan registernya dengan keadaan belum ada styling nya sehingga tampilannya tidak menarik dan rapi 😟

  1. Oleh karena itu kita di rekomentasikan oleh Laravel UI nya untuk menjalan perintah npm install && npm run dev, agar tampilannya lebih rapi. Oke mari kita coba 😛

image.png

  1. Setelah langkah ke-6 selesai kita kembali ke CMD lalu ketikan php artisan serve lalu buka browser kemudian refresh halamannya dulu dan taraa sekarang sudah cukup rapi dan oke bilan di pandang 😋

image.png

image.png

  1. Jika terjadi error pada saat menjalankan npm install && npm run dev jalankan perintah npm cache clear --force dan jalankan perintah npm install dan npm run dev secara terpisah

image.png

  1. Untuk bisa melakukan register dan login pertama kita harus menjalankan apche dan mysql dengan mengklik button start (bagi yang menggunkan XAMPP). Mari kita jalankan XAMPP nya hingga muncul kurang lebih seperti di gambar di bawah

image.png

  1. Lalu buka .env di text editor lalu cari bagian DB dan ubah value DBDATABASE, DBUSERNAME dan DB_PASSWORD (bagi yang menggunkan mysql xampp) menjadi seperti berikut atau disesuaikan sesuai config masing2

image.png

  1. Buka phpmyadmin dengan ketikan

image.png

atau klik button admin di bagain mysql

image.png

  1. Jika sudah terbuka phpmyadmin nya, langkah selanjutnya kita klik new

image.png

lalu create database, pastikan nama database nya sama seperti value DB_DATABASE yang berada di file .env dan klik button create

image.png

  1. Sekarang buka kembali CMD dan jalankan perintah php artisan migrate

image.png

  1. Kita kembali ke phpmyadmin dan sekarang sudah ada table nya yang sudah disediakan oleh migration

image.png

  1. Jalankan kembali php artisan serve dan buka browser, pergi ke halaman register dan refresh terlebih dahulu. Isi form registernya dan klik button register

image.png

Jika berhasil melakukan register maka kita akan di bawa ke halaman dashboard

image.png

Dan sekarang kita sudah punya 1 data di table users

image.png

  1. Mari kita coba login dengan data yang sudah kita buat sebelumnya apakah berhasil. Pertama kita klik logout

image.png

  1. Pergi ke halaman login dan isi formnya, lau klik button login

image.png

Dan kita sudah berhasil login

image.png

Nah sekarang kita sudah menyelesaikan login dan register dengan Laravel UI ☺️ Untuk sekarang sampai sini dulu dan nantinya pasti akan diupdate. Ditunggu ya.. 😄

Kesimpulan

Kita sudah mempelajari hal-hal berikut:

  • Menginstall Laravel Via Composer ✔️
  • Menginstall Laravel UI versi terbaru ✔️
  • Memjalakan beberapa perintah php artisan ✔️
  • Membuat Database di Localhost PHPMyAdmin ✔️

0 Response to "Cara Menggunakan Laravel UI pada Laravel 9"

Post a Comment

Subscribe to: Post Comments (Atom)