Malay

Tutorial Laravel

Panduan Laravel: Membangun Halaman Utama Pertama Anda

Pengenalan

Hai sana, para pengembang web yang sedang berkembang! Saya sangat gembira untuk menjadi panduan Anda dalam perjalanan menarik ini ke dunia Laravel. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa katakan bahwa Laravel adalah salah satu kerangka kerja yang paling kuat dan menyenangkan untuk bekerja dengannya. Hari ini, kita akan membuat halaman utama pertama kita menggunakan Laravel. Jangan khawatir jika Anda belum pernah mengoding 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 adalah seperti kotak alat yang andal, penuh dengan berbagai jenis alat yang membuat pekerjaan Anda mudah dan cepat. Itu adalah kerangka kerja PHP yang membantu pengembang membuat aplikasi web tanpa perlu menciptakan ulang roda setiap kali. Itu seperti memiliki banyak komponen Lego yang sudah siap dipasang 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 apa yang Anda nyaman dengan )
  5. Rasa petualangan dan keinginan 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 takut, 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 membuat proyek Laravel baru di folder my-first-laravel-project. Ini mungkin memakan waktu beberapa menit, jadi mungkin grab a coffee atau tari sedikit saat 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 proyek Laravel pertama Anda. Rasanya bagus, kan?

Membuat Halaman Utama Anda

Langkah 3: Mengerti Rute

Dalam Laravel, rute seperti receptionis 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, "Ketika seseorang mengunjungi root website kita ('/'), tampilkan pandangan 'welcome'." Tetapi kita ingin membuat halaman utama kita sendiri, jadi mari kita ubahnya!

Langkah 4: Membuat Controller

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

php artisan make:controller HomeController

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

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

Metode 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, "Ketika seseorang mengunjungi '/', gunakan metode 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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My First Laravel Site!</title>
</head>
<body>
<h1>Hello, Laravel World!</h1>
<p>This is my very first Laravel home page. Exciting times!</p>
</body>
</html>

Langkah 7: Menjalankan Aplikasi Anda

Sekarang untuk momen kebenaran! Dalam terminal Anda, jalankan:

php artisan serve

Ini 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 superpowers. Mari kita perbarui home.blade.php untuk menggunakan beberapa fitur Blade:

@extends('layouts.app')

@section('content')
<h1>Welcome to {{ config('app.name') }}!</h1>
<p>The current time is {{ now() }}.</p>
@endsection

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

<!DOCTYPE html>
<html lang="en">
<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 membuat layout yang dapat digunakan kembali bagi halaman utama kita (dan halaman lainnya di masa depan).

Kesimpulan

Dan begitu saja! Anda telah membuat halaman utama Laravel pertama Anda. Kita telah meliputi banyak hal - dari menyiapkan Laravel hingga membuat rute, controller, dan pandangan. Ingat, belajar mengoding adalah perjalanan, bukan tujuan. Terus latih, terus jelajahi, dan terutama, terus bersenang-senang!

Berikut adalah tabel rujukan cepat dari konsep Laravel utama yang kita cover:

Konsep Deskripsi
Rute Definisikan URL dan bagaimana aplikasi merespon permintaan
Controllers Handle logika untuk merespon permintaan
Views Mengandung HTML yang disajikan oleh aplikasi Anda
Blade Mesin template Laravel untuk membuat pandangan dinamis

Selamat mengoding, dan selamat datang ke dunia menakjubkan Laravel!

Credits: Image by storyset

 
Tutorial Seterusnya:
Laravel - ringsum