Seri 4 Belajar Laravel 10 dari Nol || Refactoring Halaman Index dan About

Refactoring atau Pemurnian Halaman Index dan About

Sourcode dalam pembahasan sebelumnya dapat diperbaiki dan ditingkatkan lebih lanjut. Kita belum menentukan aturan untuk menuliskan kode pada elemen-elemen sebelumnya dengan demikian kita tahu bagaimana cara memperbaiki kode untuk membuatnya lebih bersih dan mudah dipelihara. Kita juga akan memberikan tips umum untuk menangani routes, controller, dan view. Ingatlah bahwa sebagian besar prinsip yang disajikan dalam pembahasan ini tidak hanya berlaku untuk proyek Laravel tetapi juga dapat diterapkan dalam kerangka MVC lainnya (seperti Django, Spring, Nest, Express, dan lainnya).

Refactoring adalah proses penting dalam pengembangan perangkat lunak yang bertujuan untuk meningkatkan struktur internal kode tanpa mengubah cara kerja eksternalnya.

Proses ini dilakukan untuk meningkatkan kualitas kode, membuatnya lebih efisien, mudah dibaca, dan dipelihara, serta mengurangi kompleksitas yang mungkin terjadi. Refactoring melibatkan serangkaian perubahan kecil seperti mengubah nama variabel agar lebih deskriptif, memecah metode panjang menjadi beberapa metode yang lebih kecil, atau mengatur ulang struktur kelas untuk meningkatkan keterbacaan dan pemeliharaan kode.

Salah satu manfaat utama dari refactoring adalah mengurangi "hutang teknis" atau technical debt, yang terjadi ketika solusi jangka pendek diterapkan selama pengembangan dan akhirnya mengakibatkan masalah yang harus diatasi di masa depan. Dengan melakukan refactoring secara teratur, developer dapat memastikan bahwa kode tetap bersih, efisien, dan siap untuk diadaptasi untuk perubahan di masa depan.

Manfaat Refactoring:

1. Meningkatkan efisiensi dan kemudahan pemeliharaan: Dengan membersihkan kode dari elemen yang tidak perlu, refactoring membuatnya lebih mudah dibaca dan dipelihara.

2. Memperbaiki performa: Kode yang lebih bersih dan terstruktur cenderung berjalan lebih efisien. Refactoring membantu dalam mengoptimalkan kinerja dengan menyederhanakan kode dan mengurangi ketergantungan.

3. Menyesuaikan dengan standar baru: Refactoring memungkinkan kode untuk tetap relevan dan sesuai dengan standar terbaru, seperti perubahan dalam branding atau terminologi.

4. Memudahkan ekstensibilitas dan integrasi: Kode yang bersih dan mudah dipahami juga memudahkan pengembangan fitur baru dan integrasi dengan aplikasi lain.

5. Meningkatkan pengalaman pengguna: Dengan kinerja yang lebih baik dan kemudahan pemeliharaan, refactoring secara tidak langsung berkontribusi pada peningkatan pengalaman pengguna.

6. Mengurangi risiko bug: Kode yang bersih dan terstruktur memiliki risiko lebih rendah untuk mengandung bug, sehingga memudahkan proses debugging.

Refactoring routes

pada pembahasan sebelumnya menunjukkan dua routes yang didefinisikan dengan pendekatan yang berbeda. Mari kita periksa yang pertama.

Ini adalah salah satu pendekatan terburuk yang dapat Anda terapkan (tidak peduli kerangka kerja yang Anda gunakan). Jika Anda meletakkan logika aplikasi di dalam file routes, Anda akan berakhir dengan ratusan atau ribuan baris kode di file-file tersebut seiring dengan evolusi proyek Anda, dan kemudahan pemeliharaan akan menjadi sulit. Jadi, Kita tidak merekomendasikan menggunakan strategi ini bahkan untuk proyek-proyek kecil. Strategi yang Kita rekomendasikan akan disajikan selanjutnya.

Sekarang, mari kita analisis yang kedua.

Ini terlihat lebih baik. routes Kita sekarang terhubung ke sebuah metode controller. Kita juga memberikan nama pada routes tersebut. Kita merekomendasikan kombinasi nama controller plus nama metode controller untuk menentukan nama rute.

Routes Baru

Mari kita perbaiki rute-rute kita. Di `routes/web.php`, hapus routes sebelumnya (`"/"`) dan gantikan dengan rute berikut :

oncode2

[code hl="1, 4, 7"] name("home.index"); Route::get('/about', [\App\Http\Controllers\HomeController::class, 'about'])->name("home.about"); [/code]

Sekarang, routes web terlihat lebih bersih dan konsisten.

Apakah Anda memeriksa routes-routes yang Kita tentukan dalam pembahasan sebelumnya?

Sekarang bayangkan bahwa ada anggota baru dalam proyek Anda. Dan anggota baru tersebut harus menyertakan routes baru dalam file `routes/web.php`.

Pendekatan apa yang akan digunakan anggota tersebut? Pendekatan pertama? Pendekatan kedua? Itu adalah masalah besar. Jadi, strategi yang baik adalah menggunakan pendekatan yang sama untuk semua routes seperti yang Kita lakukan dalam kode di atas. Sekarang anggota baru akan mereplikasi pendekatan ini. Anda juga dapat melengkapi ide ini dengan tips berikut.

TIPS: Sebagai pengembang perangkat lunak, strategi yang baik adalah membuat dokumen dengan aturan arsitektur dan membagikan dokumen tersebut kepada tim Anda (jika ada). Anda dapat membuat dokumen tersebut di wiki repositori proyek (jika ada). Dorong semua anggota untuk membaca dokumen tersebut. Aturan pertama yang dapat Anda sertakan dalam dokumen tersebut bisa menjadi: "Di dalam file routes, setiap URI hanya boleh terhubung ke metode-metode controller. Menaruh logika aplikasi di dalam file routes TIDAK diperbolehkan". Aturan-aturan sederhana ini akan menghemat banyak waktu dan sakit kepala. Kita selalu membuat dokumen seperti itu untuk semua proyek Kita.

Refactoring Controller

Controller Sebelumnya

Bab sebelumnya menunjukkan sebuah controller dengan dua metode yang menggunakan pendekatan yang berbeda. Mari kita periksa metode `about`.

Di sini Kita memiliki tiga masalah.

Penamaan variabel berantakan. Menggunakan nama seperti `data1` atau `data2` sangat buruk, itu tidak menggambarkan apa-apa. Sebagai gantinya, Kita dapat menggunakan `title` dan `subtitle`.
Kita memiliki banyak metode `with` yang berantai. Bayangkan jika Kita memiliki 20 variabel untuk dilewatkan ke tampilan. Kita tidak memiliki konsistensi. Kita mengirimkan setiap variabel ke tampilan satu per satu, tetapi Kita hanya melewati satu variabel array ke tampilan dalam metode `index`. Kita lebih memilih strategi metode `index` seperti yang akan Kita lihat selanjutnya.
Terakhir, Kita memiliki baris kosong sebelum akhir kurung kurawal. Kita perlu menentukan panduan gaya penulisan kode yang konsisten. Ini akan diselesaikan dalam bab berikutnya.

Sekarang, mari kita analisis metode index (yang diabaikan dalam bab sebelumnya).

Dalam kasus ini, Kita hanya mendefinisikan satu variabel bernama view Data yang berisi semua data yang dikirimkan ke tampilan /view. Variabel ini adalah array asosiatif. Dengan pendekatan ini, tidak masalah jika Kita melewatkan satu data ke tampilan atau puluhan. Dalam kedua kasus, Kita hanya melewatkan array asosiatif.

TIPS: Dalam dokumen aturan arsitektural Anda, Anda dapat menyertakan aturan baru yang menyatakan bahwa controller hanya boleh melewatkan array asosiatif yang disebut viewData ke tampilan. Laravel menyediakan banyak cara untuk melewatkan data tersebut ke tampilan, tidak masalah mana yang Anda pilih. Namun, penting untuk menyebutkan pendekatan yang dipilih dalam dokumen aturan agar digunakan secara konsisten oleh semua anggota tim melalui aplikasi.

Controller Baru

Mari kita refaktor controller kita. Di dalam app/Http/Controllers/HomeController.php

[code hl="1, 4, 7"] with("viewData", $viewData); } public function about() { $viewData = []; $viewData["title"] = "Tentang Kami - Toko Online"; $viewData["subtitle"] = "Tentang Kami"; $viewData["description"] = "Ini adalah halaman tentang ..."; $viewData["author"] = "Dikembangkan oleh: Nama Anda"; return view('home.about')->with("viewData", $viewData); } } [/code]

Sekarang, karena kita menggunakan strategi variabel tunggal, kedua metode tersebut konsisten. Kita menyarankan menyimpan tampilan mengikuti pendekatan berikut. Pertama, kita membuat subfolder dengan nama controller di dalam folder resources/views. Dalam kasus ini, subfolder tersebut disebut home. Dan jika sebuah metode controller menampilkan data, kita membuat file dengan nama metode controller di dalam subfolder controller tampilan. Jadi, kita memiliki file about.blade.php disimpan di dalam subfolder resources/views/home. Ini membuat lebih mudah untuk menemukan tampilan tertentu untuk metode controller tertentu.

Pemurnian Tampilan /view

Bab sebelumnya menunjukkan dua tampilan yang menampilkan data sedikit berbeda. Tampilan home/index tidak akan diubah karena menampilkan data menggunakan strategi viewData. Namun, kami perlu memodifikasi tampilan home/about agar sesuai dengan strategi variabel tunggal yang telah ditentukan sebelumnya.

Mari kita lihat tampilan about. Di resources/views/home/about.blade.php

Kita akan ubah menjadi:

[code hl="1, 4, 7"] @extends('layouts.app') @section('title', $viewData["title"]) @section('subtitle', $viewData["subtitle"]) @section('content')

@endsection [/code]

Seperti yang Anda lihat, Kita sekarang mengakses data melalui array asosiatif tunggal viewData. Kita akan menggunakan strategi ini di seluruh aplikasi, membuat tampilan kami lebih konsisten.

Diskusi Cepat: Data sebelumnya juga dapat ditempatkan langsung di atas tampilan sebelumnya. Kita maksudnya, Anda tidak perlu mendefinisikan teks-teks tersebut sebagai variabel di dalam controller dan mengirimkannya ke tampilan. Sebagai gantinya, Anda dapat menempatkan teks langsung di dalam tampilan seperti yang kami lakukan di tampilan welcome.blade.php Kita. Kita melakukannya dengan cara itu untuk mengilustrasikan dan menjelaskan beberapa elemen Laravel. Ada opsi yang lebih baik yang berada di luar cakupan buku ini (yang Kita lebih preferensikan). Opsi itu disebut Lokalisasi. Dalam Lokalisasi, Anda memindahkan teks-teks tersebut dari controller dan tampilan dan meletakkannya di dalam folder resources/lang. Lokalisasi bahkan memungkinkan Anda mengambil string dalam berbagai bahasa. Ini tidak sulit untuk diimplementasikan. Anda dapat menggunakan tautan ini untuk mendapatkan info lebih lanjut tentang itu https://laravel.com/docs/9.x/localization#introduction, mencari di Google, atau beri tahu kami jika Anda memerlukan contoh yang baik (gunakan zona diskusi repositori buku).

Memperbarui Tautan di Header

Sekarang bahwa kita memiliki rute, controller, dan tampilan yang sesuai, mari masukkan tautan di header. Di resources/views/layouts/app.blade.php, lakukan perubahan berikut

[code hl="1, 4, 7"] @yield('title', 'Toko Onlline')

@yield('subtitle', 'Toko Online Saya')

@yield('content')

[/code]

Kita menggunakan metode bantu rute di layout sebelumnya, yang menghasilkan URL untuk rute bernama tertentu. Kita menggunakan nama-nama rute yang didefinisikan untuk rute "/" (home.index) dan rute "/about" (home.about).

Menjalankan Aplikasi

Di Terminal, masuk ke direktori proyek, dan jalankan perintah berikut:

php artisan serve

Sekarang, Anda dapat menavigasi antara halaman Beranda dan halaman Tentang menggunakan tautan di bilah navigasi.

Jika anda melihat ada sedikit perubahan warna itu bukan masalah yang fondamental dalam pengkodean, dan jika anda merasa bosan dan ingin merubahnya tinggal anda edit file css yang ada di folder public/css/app.css

Semua kode pada seri ini ada pada https://github.com/idiarso/laravel-10.git