Hello World Example di NexaUI Framework

Pengenalan

Tutorial ini akan memandu Anda membuat aplikasi "Hello World" sederhana menggunakan NexaUI Framework. Melalui contoh ini, Anda akan mempelajari konsep dasar framework seperti routing, controller, dan view.

Prasyarat

Sebelum memulai, pastikan Anda telah:

  • Menginstal NexaUI Framework
  • Mengonfigurasi web server
  • Mengatur file .env

Jika Anda belum melakukan langkah-langkah di atas, silakan lihat dokumentasi Instalasi dan Setup dan Konfigurasi Awal.

Langkah 1: Membuat Route

Pertama, kita perlu mendefinisikan route untuk aplikasi Hello World kita. Buka file routes/web.php dan tambahkan route berikut: 

// routes/web.php
$router->add('/hello', 'HelloController@index');
$router->add('/hello/{name}', 'HelloController@greet');

Route pertama akan menangani URL /hello dan route kedua akan menangani URL dengan parameter, seperti /hello/john.

Langkah 2: Membuat Controller

Selanjutnya, kita perlu membuat controller untuk menangani request. Buat file baru bernama controllers/HelloController.php dengan konten berikut: 

declare(strict_types=1);

namespace App\Controllers;

use App\System\NexaController;

class HelloController extends NexaController
{
    /**
     * Menampilkan halaman Hello World
     */
    public function index(): void
    {
        $data = [
            'title' => 'Hello World',
            'message' => 'Selamat datang di NexaUI Framework!'
        ];
        
        $this->render('hello/index', $data);
    }
    
    /**
     * Menyapa pengguna dengan nama
     */
    public function greet(?string $name = null): void
    {
        $name = $name ?? $this->getSlug(1) ?? 'Tamu';
        
        $data = [
            'title' => 'Hello ' . $name,
            'message' => 'Halo, ' . $name . '! Selamat datang di NexaUI Framework!'
        ];
        
        $this->render('hello/greet', $data);
    }
}

Controller ini memiliki dua method:

  • index() - Menampilkan halaman Hello World dasar
  • greet() - Menyapa pengguna dengan nama yang diberikan melalui parameter URL

Langkah 3: Membuat View

Sekarang kita perlu membuat template view untuk menampilkan output. Buat direktori templates/hello dan dua file view di dalamnya:

templates/hello/index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
    <link rel="stylesheet" href="http://www.tatiye.net/assets/css/style.css">
</head>
<body>
    <div class="container">
        <h1>{title}</h1>
        <p>{message}</p>
        <p>Cobalah <a href="http://www.tatiye.net/hello/YourName">menyapa dengan nama</a>.</p>
    </div>
</body>
</html>

templates/hello/greet.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
    <link rel="stylesheet" href="http://www.tatiye.net/assets/css/style.css">
</head>
<body>
    <div class="container">
        <h1>{title}</h1>
        <p>{message}</p>
        <p><a href="http://www.tatiye.net/hello">Kembali</a></p>
    </div>
</body>
</html>

Langkah 4: Menjalankan Aplikasi

Sekarang aplikasi Hello World kita siap dijalankan. Buka browser dan akses:

  • http://localhost/hello - Untuk melihat halaman Hello World dasar
  • http://localhost/hello/YourName - Untuk melihat halaman yang menyapa dengan nama Anda

Penjelasan Kode

Routing

Di NexaUI, routing didefinisikan di file routes/web.php. Setiap route menghubungkan URL dengan controller dan method yang akan menangani request. 

$router->add('/hello', 'HelloController@index');

Route ini mengarahkan URL /hello ke method index() di HelloController.

Controller

Controller bertanggung jawab untuk menangani request, memproses data, dan memilih view yang tepat. Semua controller di NexaUI harus meng-extend NexaController. 

class HelloController extends NexaController
{
    public function index(): void
    {
        $data = [
            'title' => 'Hello World',
            'message' => 'Selamat datang di NexaUI Framework!'
        ];
        
        $this->render('hello/index', $data);
    }
}

View

View berisi template HTML yang akan ditampilkan ke pengguna. NexaUI menggunakan template engine sederhana dengan placeholder dalam kurung kurawal {variable}. 

<h1>{title}</h1>
<p>{message}</p>

Placeholder ini akan digantikan dengan nilai yang diberikan dari controller.

URL Helper

NexaUI menyediakan helper http://www.tatiye.net/path untuk menghasilkan URL yang benar: 

<a href="http://www.tatiye.net/hello/YourName">menyapa dengan nama</a>

Langkah Selanjutnya

Selamat! Anda telah berhasil membuat aplikasi Hello World menggunakan NexaUI Framework. Untuk mempelajari lebih lanjut, Anda dapat: