Indonesia

Tutorial Laravel

Panduan Laravel: Membangun Halaman Utama Pertama Anda

Pengenalan

Hai teman-teman pengembang web yang sedang belajar! Saya sangat gembira menjadi panduan Anda dalam perjalanan menarik ini ke dunia Laravel. Sebagai seseorang yang telah mengajar ilmu komputer lebih dari satu dekade, saya dapat mengatakan bahwa Laravel adalah salah satu kerangka kerja yang paling kuat dan menyenangkan untuk digunakan. Hari ini, kita akan membuat halaman utama pertama kita menggunakan Laravel. Jangan khawatir jika Anda belum pernah mengkode sebelumnya - kita akan mengambil langkah demi langkah, dan sebelum Anda tahu, Anda akan menciptakan halaman web yang indah seperti seorang ahli!

Laravel - Home

Apa Itu Laravel?

Sebelum kita memulai, mari kita bicarakan singkat apa sebenarnya Laravel. Bayangkan Anda membangun sebuah rumah. Laravel seperti sebuah kotak alat yang tepercaya, penuh dengan berbagai jenis alat yang membuat pekerjaan Anda lebih mudah dan cepat. Itu adalah kerangka kerja PHP yang membantu pengembang menciptakan aplikasi web tanpa perlu menciptakan ulang roda setiap kali. Itu seperti memiliki banyak komponen Lego yang sudah siap pakai dan Anda dapat menyusunnya untuk menciptakan sesuatu yang menakjubkan!

Prasyarat

Untuk mengikuti panduan ini, Anda akan memerlukan:

  1. Sebuah komputer ( tentu saja! )
  2. PHP terinstal di mesin Anda ( versi 7.3 atau lebih tinggi )
  3. Composer ( manajer dependensi PHP )
  4. Sebuah editor teks ( saya merekomendasikan Visual Studio Code, tapi gunakan yang Anda nyaman dengan )
  5. Semangat petualangan dan kesediaan untuk belajar!

Jangan khawatir jika Anda belum mengatur ini. Ada banyak panduan yang bagus di luar sana untuk membantu Anda menyiapkan lingkungan Anda.

Menyiapkan Laravel

Langkah 1: Menginstal Laravel

Pertama-tama, mari kita instal Laravel. Buka terminal Anda ( jangan khawatir, itu hanya cara teks untuk berbicara dengan komputer Anda ) dan ketik:

composer create-project --prefer-dist laravel/laravel my-first-laravel-project

Perintah ini memberitahu Composer untuk menciptakan proyek Laravel baru di folder my-first-laravel-project. Itu mungkin memakan beberapa menit, jadi mungkin ambilkan sebuah kopi atau tari sebentar sementara menunggu.

Langkah 2: Menavigasi ke Proyek Anda

Setelah itu selesai, mari kita pindah ke folder proyek baru kita:

cd my-first-laravel-project

Selamat! Anda sekarang berada di dalam proyek Laravel pertama Anda. Rasanya bagus, kan?

Membuat Halaman Utama Anda

Langkah 3: Mengerti Rute

Dalam Laravel, rute seperti receptionist aplikasi Anda. Mereka menentukan di mana pengunjung harus pergi saat mereka datang ke situs Anda. Mari kita buka file routes/web.php. Ini adalah tempat kita akan memberitahu Laravel apa yang harus dilakukan saat seseorang mengunjungi halaman utama kita.

Anda akan melihat sesuatu seperti ini:

Route::get('/', function () {
return view('welcome');
});

Ini adalah rute default Laravel. Itu mengatakan, "Saat seseorang mengunjungi root situs kita ('/'), tampilkan pandangan 'welcome'." Tetapi kita ingin membuat halaman utama kita sendiri, jadi mari kita ubahnya!

Langkah 4: Membuat Controller

Controller seperti manajer aplikasi Anda. Mereka menangani permintaan dan mengembalikan tanggapan. Mari kita buat satu untuk halaman utama kita:

php artisan make:controller HomeController

Perintah ini menciptakan file baru di app/Http/Controllers/HomeController.php. Buka file itu dan mari kita tambahkan method:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
public function index()
{
return view('home');
}
}

Method index ini akan bertanggung jawab untuk menampilkan halaman utama kita.

Langkah 5: Memperbarui Rute

Sekarang, mari kita perbarui file routes/web.php untuk menggunakan controller baru kita:

use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index']);

Ini memberitahu Laravel, "Saat seseorang mengunjungi '/', gunakan method index dari HomeController."

Langkah 6: Membuat Pandangan

Sekarang kita perlu membuat HTML nyata untuk halaman utama kita. Buat file baru di resources/views/home.blade.php dan tambahkan beberapa HTML:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selamat Datang di Situs Laravel Pertama Saya!</title>
</head>
<body>
<h1>Hallo, Dunia Laravel!</h1>
<pIni adalah halaman Laravel pertama saya. Waktu menarik!</p>
</body>
</html>

Langkah 7: Menjalankan Aplikasi Anda

Sekarang untuk momen kebenaran! Dalam terminal Anda, jalankan:

php artisan serve

Ini akan memulai server pengembangan. Buka browser Anda dan buka http://localhost:8000. Anda seharusnya melihat halaman utama baru Anda!

Menambahkan Beberapa Flair

Langkah 8: Menggunakan Template Blade

Laravel menggunakan mesin template yang disebut Blade. Itu seperti HTML dengan superpower. Mari kita perbarui home.blade.php kita untuk menggunakan beberapa fitur Blade:

@extends('layouts.app')

@section('content')
<h1>Selamat Datang di {{ config('app.name') }}!</h1>
<p+Waktu saat ini adalah {{ now() }}.</p>
@endsection

Sekarang buat file baru di resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', config('app.name'))</title>
</head>
<body>
@yield('content')
</body>
</html>

Ini menciptakan tata letak yang dapat digunakan kembali yang halaman utama kita (dan halaman lainnya di masa depan) dapat gunakan.

Kesimpulan

Dan itu saja! Anda telah menciptakan halaman utama Laravel pertama Anda. Kita telah meliputi banyak hal - dari menyiapkan Laravel hingga membuat rute, controller, dan pandangan. Ingat, belajar mengkode adalah perjalanan, bukan tujuan. Tetap latihan, terus eksplorasi, dan terutama, tetap bersenang-senang!

Berikut adalah tabel rujukan cepat konsep Laravel utama yang kita pelajari:

Konsep Deskripsi
Rute Menentukan URL dan bagaimana aplikasi merespon permintaan
Controller Menangani logika untuk merespon permintaan
Pandangan Mengandung HTML yang disajikan oleh aplikasi Anda
Blade Mesin template Laravel untuk menciptakan pandangan dinamis

Selamat coding, dan selamat datang ke dunia yang menakjubkan Laravel!

Credits: Image by storyset

 
Tutorial Selanjutnya:
Laravel - Tinjauan Umum