nexa form basics

Pengenalan NexaForm

NexaForm adalah komponen yang menyediakan cara mudah dan terstruktur untuk menangani form di NexaUI. Class ini menangani validasi input, upload file, dan pemrosesan form, sehingga mempermudah pengembang dalam membuat dan mengelola form.

Membuat Form

Untuk membuat form, gunakan method createForm() pada controller:


public function contact(): void
{
    // Membuat instance form
    $form = $this->createForm();
    
    // Konfigurasi form
    $form->fields([
        'name' => 'Name|3|Nama minimal 3 karakter',
        'email' => 'Email',
        'message' => 'Textarea|10|Pesan minimal 10 karakter'
    ])
    ->setSuccess('Pesan Anda telah terkirim!')
    ->setError('Terjadi kesalahan. Silakan periksa form Anda.');
    
    // Proses form jika disubmit
    if ($this->isPost()) {
        $result = $form->process();
        
        if ($result['success']) {
            // Kirim email atau simpan ke database
            $this->useModels('Contact', 'save', [$result['data']]);
            
            // Redirect atau render dengan pesan sukses
            $this->setFlash('success', 'Pesan Anda telah terkirim!');
            $this->redirect('/contact/thank-you');
            return;
        }
    }
    
    // Render form dengan data validasi
    $this->assignVars($form->Response());
    $this->render('contact/form');
}

Struktur NexaForm

NexaForm terdiri dari beberapa komponen utama:

Validation Rules - Aturan validasi untuk setiap field
File Handling - Penanganan upload file
Response Handling - Pemrosesan dan pengembalian response
Template Integration - Integrasi dengan template

Konfigurasi Form

NexaForm menyediakan beberapa method untuk konfigurasi:

fields(array $fields) - Menetapkan aturan validasi untuk field
setUpload(array $config) - Konfigurasi upload file
setSuccess(string $message) - Pesan sukses
setError(string $message) - Pesan error
setAjax(bool $enabled = true) - Mengaktifkan mode AJAX
setRedirect(string $url) - URL redirect setelah submit sukses


$form = $this->createForm();

$form->fields([
    'title' => 'Title|5|Judul harus minimal 5 karakter',
    'category' => 'Select|Kategori harus dipilih',
    'content' => 'Textarea|50|Konten minimal 50 karakter',
    'image' => 'FileOptional|jpg,png,gif|Gambar maksimal 2MB'
])
->setUpload([
    'dir' => 'uploads/articles',
    'allowed_types' => ['jpg', 'png', 'gif'],
    'max_size' => 2048, // 2MB
    'create_thumb' => true,
    'thumb_width' => 300,
    'thumb_height' => 200
])
->setSuccess('Artikel berhasil disimpan!')
->setError('Terjadi kesalahan dalam menyimpan artikel.')
->setAjax() // Aktifkan mode AJAX
->setRedirect('/articles');

Memproses Form

Method process() digunakan untuk memproses form submission:


// Proses form
$result = $form->process();

// Struktur result
// [
//     'success' => true/false,
//     'processed' => true/false,
//     'informasi' => 'data_dan_file'/'data'/'file'/'tidak_ada_input',
//     'message' => 'Pesan sukses atau error',
//     'errors' => [], // Array error jika gagal
//     'data' => [], // Data yang valid
//     'files' => [], // Informasi file yang diupload (jika ada)
// ]

if ($result['success']) {
    // Form berhasil divalidasi
    $data = $result['data'];
    
    // Jika ada file yang diupload
    if (isset($result['files'])) {
        $fileInfo = $result['files'];
        // $data sudah termasuk path file yang diupload
    }
    
    // Lakukan operasi dengan data
    $this->useModels('Article', 'save', [$data]);
} else {
    // Form gagal divalidasi
    $errors = $result['errors'];
}

Mendapatkan Response untuk Template

Method Response() digunakan untuk mendapatkan data yang diperlukan untuk template:


// Mendapatkan data untuk template
$templateData = $form->Response();

// Atau dengan data tambahan
$templateData = $form->Response([
    'categories' => $this->useModels('Category', 'getAll'),
    'tags' => $this->useModels('Tag', 'getAll')
]);

// Assign ke template
$this->assignVars($templateData);

Di template, data form tersedia sebagai variabel:


<form method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="title">Judul</label>
        <input type="text" name="title" id="title" value="{{title}}" class="form-control">
        {{#if errors_title}}
            <div class="error-message">{{errors_title}}</div>
        {{/if}}
    </div>
    
    <div class="form-group">
        <label for="category">Kategori</label>
        <select name="category" id="category" class="form-control">
            <option value="">-- Pilih Kategori --</option>
            {{#each categories}}
                <option value="{{id}}" {{#if (eq ../category id)}}selected{{/if}}>{{name}}</option>
            {{/each}}
        </select>
        {{#if errors_category}}
            <div class="error-message">{{errors_category}}</div>
        {{/if}}
    </div>
    
    <div class="form-group">
        <label for="content">Konten</label>
        <textarea name="content" id="content" class="form-control">{{content}}</textarea>
        {{#if errors_content}}
            <div class="error-message">{{errors_content}}</div>
        {{/if}}
    </div>
    
    <div class="form-group">
        <label for="image">Gambar</label>
        <input type="file" name="image" id="image" class="form-control-file">
        {{{image_info}}}
        {{#if errors_image}}
            <div class="error-message">{{errors_image}}</div>
        {{/if}}
    </div>
    
    <button type="submit" class="btn btn-primary">Simpan</button>
</form>

Temporary Data

NexaForm menyediakan method untuk menyimpan data sementara selama proses validasi:

setTempData($key, $value = null) - Menyimpan data sementara
getTempData($key = null, $default = null) - Mendapatkan data sementara


// Menyimpan data sementara
$form->setTempData('previous_category', $categoryId);

// Mendapatkan data sementara
$previousCategory = $form->getTempData('previous_category');

// Atau menyimpan multiple data
$form->setTempData([
    'previous_category' => $categoryId,
    'previous_tags' => $tags
]);

Best Practices

Berikut adalah beberapa praktik terbaik dalam menggunakan NexaForm:

Selalu validasi input user dengan aturan validasi yang sesuai
Gunakan mode AJAX untuk pengalaman user yang lebih baik
Pisahkan logika validasi dan pemrosesan data
Gunakan flash message untuk memberikan feedback ke user setelah redirect
Selalu sanitize data sebelum menyimpan ke database
Batasi ukuran dan tipe file yang dapat diupload
Gunakan CSRF protection untuk mencegah serangan CSRF

NexaForm Basics