Belajar Node.js episode lanjutan Part 4

Kau cantik hari ini…
dan aku suka..
Kau lain sekali…dan aku suka
..hari ini, kemarin, dan lusa tetep menarik kok πŸ™‚ .

Ya begitulah kira-kira apa yang saya rasa sama kamu mba, hehehe.
Namanya juga perasaan ya ga bisa dipaksain juga. Sedikit teringat nasihat temen, “Kamu boleh suka sama seseorang, tapi Hargailah juga perasaan orang yang kamu suka”. Hmm meski ketertarikan elu sampe ujung langit pun ya tetep kudu ng’hormati juga dia punya hatilah, kasarnya kek gitu deh :p . Toh saya juga gatau, saat ngejar-ngejar dia (jangan sampe khilaf aja πŸ˜€ ) gataunya dia udah punya seseorang yang disuka atau mungkin pacar. T____T hahahaa nasip kalo kek gitu mah.
Abis mau gimana lagi, saat ini ya susah juga ngilangin perasaan yang kek gini πŸ˜€ . Ya nunggu nasip aja, siapa tau beruntung ato malah buntung deh. Yang penting mah udah berusaha.

-_- itu diatas siapa yang galau terus sih, parah beud dah ahh, Blog saya jadi ajang curhat πŸ˜€ .
Kita lanjut belajar lagi aja yuk, siapa tau bisa lumer nih galaunya. Melanjuti episode-episode sebelumnya (kek sinetron aja yak) yang lumayan juga sih udah sampe episode 3 dan 4 saat ini, ya moga aja ampe jadi nih web pake node.js kita πŸ˜€ .

Di episode terakhir kalo ga salah kita udah ngebahas sedikit tentang controller dan pemanggilan view-nya. Nah gimana kalo kita coba acak-acak aja dibagian view-nya ini?? πŸ˜€ .

Hmm, okeh tulisan kali ini akan kita fokuskan dibagian viewnya aja yaa. Ada yang masih ingat kan dengan view yang kita pakai seperti apa?? kalo ga salah sih pake templating jade ato apalah itu istilahnya πŸ˜€ . Langkah awal ayo kita buka direktori views :
yo_express11
Bisa dilihat disana ada 3 file : error, index, dan layout. Ooo iya, jangan lupa dengan extensionnya(.jade), nah klao gitu kita mulai gugel aja si .jade itu sebenernya kek gimana sih.
Hahahaa gugel emang keren, baru bentaran aja udah nemu banyak nih tentang si .jade ini. Okeh kita cobain aja langsung kalo gitu.

Edit file index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}
  p Ini pesan saya -> " #{message} ", camkan itu hahahaaaaa.

kita ubah jadi gini :

extends layout

block content
  h1 Selamat datang
  p
    | Lorem ipsum blablla bla blaa
    | bllaa blaa blaa.
  p.
    blaa blaaa blaaa
    Lorem blaa blaaa blaaa.

Perhatikan tag (p) diatas, disana terlihat (titik) dan bukan pipe-line(|) seperti diatas hal itu berguna agar lebih cepat / untuk menyingkatnya, hehee kayak gitu kali maksudnya mah. Sok dicoba aja langsung :p .
Lanjutt, misal kita mau ngasih ID di salah satu tag itu :

h1#judul Selamat datang

Sekarang tag h1 tadi akan mempunyai ID : judul. Nah gimana kalo ada class ato attribut lainnya. Kira-kira kayak gini nih :

h1(id="judul", class="utama") Selamat datang

Lohh, terus kalo buat class gimana??
Hmmm maksudnya tag dengan satu attribut(class) aja gitu??, okehh :

p.page Ini contoh tag (p) dengan class page

Okehh sedikit paham nih kita, kayaknya kalo banyak attribut tinggal pake tanda kurung () dan kita kasih koma buat attribut lainnnya terus kalo cuman class doang tinggal panggil tag name terus kasih titik abis itu nama classnya deh. Hmm kayaknya makin seru ya, coba selanjutnya yuk.

form(name="login", action="", method="post")
    input(type="text", name="user")
    input(type="password", name="pass")
    input(type="submit", value="login")

ssstttt…sedikit bocoran nih, jangan lupa indentation-nya okehh πŸ˜€ .
Yang terakhir itu skrip untuk bikin form submit sederhana, untuk action nya nanti lagi yaa :p .
Gimana?? udah dicoba?? keren kan πŸ˜€ hahahaa.

Advertisements
This entry was posted in node.js and tagged , , , . Bookmark the permalink.

One Response to Belajar Node.js episode lanjutan Part 4

  1. Pingback: Belajar Node.js episode lanjutan Part 5 | just a fool

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