[Nodejs + Express] Make Simple Form

Berikut adalah contoh penerapan nodejs dengan menggunakan express untuk membuat simple form post dan get. Saya asumsikan anda semua sudah menginstall nodejs pada server anda. Pertama-tama untuk mengintegrasikan dengan express, install terlebih dahulu express pada server anda dengan cara memasukkan code berikut pada command  anda:

 
npm install express -g

Kemudian change your directory ke directory project anda. Lalu masukkan command berikut :

 
express -c stylus
npm install -d

Command di atas akan membuat sebuah aplikasi nodejs baru pada direktori anda. Bisa anda lihat pada direktori project anda telah ada beberapa new file and folder yang di create oleh command tadi. Perlu anda ketahui, express secara default akan menggunakan jade engine template. Jade sendiri adalah salah satu template engine yang berguna untuk mempermudah penulisan form html , for see more about jade you can see this link http://jade-lang.com/.

After that, di dalam directory anda bukalah file “app.js”. File ini adalah file yang menjadi induk dari aplikasi nodejs kita, jika anda familiar dengan PHP, app.js dapat diibaratkan sebagai “index.php”. Kemudian tambahkan code berikut tepat di atas code “http.createServer()” :

 
app.get('/formex', function(req, res) {
    res.render('form_ex', {  //akan memanggil form "form_ex" yang ada pada folder "view"
        title: 'This Is Sample Form'
    });
});

app.post('/formex', function(req, res) {
    res.render('form_result', { // akan memanggil form "form_result" yang ada pada folder "view"
        title: 'This Is Sample Form Result',
        textinsert : req.param('title')
    });
});

Kode diatas digunakan untuk menentukan apa yang harus dilakukan ketika pengguna me-request url tertentu. Pada kasus di atas adalah url “formex” baik ketika pertama kali mengakses atau saat terjadi POST request. Dapat anda lihat masing-masing request akan memanggil form tertentu dan melemparkan beberapa nilai yang dapat digunakan pada form.

Setelah kita membuat code diatas,  we need to write view code to show interface to user. Pada folder “view” buatlah sebuah file “form_ex.jade” dan masukkan code berikut :

 extends layout

block content
    h1= title
    div
        form( method="post")
            div
                div
                    span.label Enter Some Text Here :
                    input(type="text", name="title")
                div#editEmployeeSubmit
                    input(type="submit", value="Save")

kemudian buat juga file “form_result.jade” dan masukkan kode berikut :

 extends layout

block content
    h1= title
    div
    h2=textinsert

Selesai..

Sekarang untuk menjalankan aplikasi anda, pada command anda jalankan aplikasi anda dengan memasukkan command :

 
node app.js

Akan ada pesan pada port berapa aplikasi anda dijalankan. Secara default akan terdapat pada port 3000. Cobalah me-request url “formex” untuk melihat hasilnya, masukkan url berikut pada port anda “http://localhost:3000/formex”.

Selesai.. Selamat mencoba..

Happy coding..

2 Responses to [Nodejs + Express] Make Simple Form

  1. Sieska says:

    Selamat sore,

    Maaf mau minta tolong , kasusnya seperti ini :

    dalam view:

    echo CHtml::dropDownList(‘group_id’,”,$group_name,
    array(
    ‘prompt’ => ‘Please Select a Group (required)’,
    ‘value’ => ’0′,
    ‘ajax’ => array(
    ‘type’ => ‘POST’,
    ‘url’ => CController::createUrl(‘User/Index3′),
    ‘data’ => array(‘group_id’ => ‘js:this.value’),
    )
    ));

    dalam controller:

    $group_id = (int)$_POST[‘group_id’];

    Pesan error : Undefined index: group_id

    Kira-kira langkah apa yang harus saya perbaiki?
    Terima kasih, maaf merepotkan😉

  2. coba lihat contoh di controller hasil generate CRUD, bisa dilihat bagaimana cara mendefinisikan unutk menangkap $_POST. Taruhlah di dalam if($_POST[‘group_id’])

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: