Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Pengantar untuk Ekspres

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Beberapa tahun yang lalu saya, seperti banyak orang, mulai mendengar lebih banyak lagi tentang Node.js. Saya telah membangun aplikasi server-side di ColdFusion selama lebih dari satu dekade tetapi selalu penasaran untuk melihat bagaimana platform lain bekerja dengan baik. Saya menikmati JavaScript pada klien dan menggunakannya di server tampak menarik. (Meski belum tentu baru. Saya cukup tua untuk mengingat ketika Netscape membebaskan SSJS di tahun 90-an.) Saya membaca beberapa tutorial, duduk dalam beberapa sesi, dan secara umum datang ... tidak terkesan.

Setiap kali saya membaca sesuatu tentang Node, akhirnya kembali ke kisah yang sama: membangun server web. Terus terang, itu tidak mengasyikkan. Bahkan kembali ketika saya pertama kali melakukan aplikasi web di skrip Perl CGI saya tidak perlu khawatir tentang itu. Saya dapat melihat potensi di penyedia API kecil dan ringan, tetapi akankah saya membuat situs sederhana di dalamnya? Tidak mungkin!

Tapi suatu hari aku beruntung. Saya memutuskan untuk duduk di satu presentasi Node lagi (terutama karena saya mengenal presenter dengan baik) dan selama presentasinya, pembicara mendemonstrasikan Express. Sebuah bola lampu mati. Inilah kerangka Node yang saya tunggu! Ya, secara teori, Anda masih membangun server web Anda sendiri, tetapi aspek tersebut diminimalkan dan Anda dapat berfokus pada logika dan konten situs Anda. Bahkan lebih baik, saya melihat bagaimana mengintegrasikan mesin templating memungkinkan untuk pengalaman jenis hampir ColdFusion (atau PHP). Dalam artikel ini, saya akan menunjukkan cara menginstal Express dan cara memulai membuat aplikasi web menggunakan kerangka kerja.


Pemasangan

Kemungkinan besar Anda sudah menjadi pengembang Node. Jika Anda baru ke platform, maka Anda mungkin masih kagum dengan kekuatan npm. Saya tahu saya. Seperti yang saya katakan, sebagian besar hidup saya, saya habiskan untuk melakukan ColdFusion. Ada kaya, jika tidak besar, ekosistem sumber terbuka untuk platform itu. Tetapi menemukan dan menginstal adalah urusan manual. Beberapa kali pertama saya menggunakan npm saya kagum. Terus terang, saya memiliki waktu yang sulit sekarang membayangkan menggunakan platform tanpa alat seperti npm. Mari kita mulai dengan file package.json di mana kita akan menambahkan ketergantungan Express.

Sekali lagi, ini harus cukup standar untuk pengembang Node. Mampir ke baris perintah dan jalankan:

Yang akan menginstal Express dan dependensinya.

Sebaliknya, Anda juga dapat menginstal Express sebagai alat baris perintah untuk dengan cepat menghasilkan aplikasi kerangka. Ini bisa dilakukan dengan menjalankan:

Setelah Anda selesai melakukannya, Anda dapat menjalankan perintah express pada baris perintah untuk menghasilkan aplikasi.


Langkah pertama

Mari kembali ke aplikasi yang kita buat dengan file package.json sebelumnya dan tambahkan file app.js. Minimal, aplikasi Anda akan membuat instance baru dari objek Express dan mulai mendengarkan pada port tertentu. Mari kita mulai dengan ini:

Secara pribadi, saya cenderung mengambil hal-hal yang cukup lambat ketika mempelajari kerangka kerja baru, jadi mungkin masuk akal untuk dengan cepat menjalankan node app hanya untuk memastikan tidak ada yang kacau.

Mendefinisikan Rute Kita

Sekarang mari kita coba menambahkan beberapa rute sederhana ke aplikasi. Aplikasi Express dapat menanggapi berbagai kata kerja HTTP sebagai metode API. Jadi sebagai contoh:

Mari buat contoh nyata dari ini dan tambahkan halaman beranda ke aplikasi:

Perhatikan bahwa Express menambahkan metode send() sederhana ke objek response. Ini mengaburkan beberapa kode boiler untuk menangani tanggapan. Jika Anda telah melakukan segalanya dengan benar, sekarang Anda dapat me-restart aplikasi Anda dan membuka browser Anda ke port 3000.

request.send() API juga secara cerdas menangani berbagai jenis data. Bayangkan Anda ingin menambahkan API berbasis JSON sederhana ke situs Anda. Dengan hanya mengembalikan objek alih-alih string, Express akan menangani konversi hasil ke JSON serta pengaturan header respons yang sesuai.

Seperti yang dapat Anda bayangkan, pada titik ini, membangun aplikasi akan terdiri dari menambahkan lebih banyak rute untuk menangani apa pun kebutuhan Anda. Mari membangun situs statis yang sangat sederhana yang menggunakan apa yang telah kita pelajari sejauh ini.


Aplikasi Blog Generik 9000

Untuk situs pertama kita, kita akan membangun sebuah blog. Ya, ini tidak terlalu baru atau menarik, tetapi juga sesuatu yang dipahami oleh setiap orang secara konseptual. Anda dapat menemukan kode sumber lengkap untuk aplikasi ini di unduhan terlampir di folder blog1. Kita akan melewatkan file package.json karena sama persis, kecuali untuk nama. Sebagai gantinya, mari kita lihat app.js.

Salah satu hal pertama yang akan Anda perhatikan adalah kita telah beralih dari send api ke sendfile. Meskipun kita dapat menanamkan string HTML yang besar ke dalam file app.js kita, itu akan menjadi berantakan dengan sangat cepat. Kita punya tiga rute untuk aplikasi ini. Satu untuk halaman beranda, satu untuk halaman "About", dan satu untuk artikel. Biasanya halaman artikel akan mewakili satu entri blog, tetapi untuk saat ini, kita menjaga hal-hal sederhana.

Menambahkan dalam HTML

HTML untuk halaman kita juga agak sederhana. Inilah halaman beranda:

Perhatikan belum ada yang istimewa di sini. Ini adalah HTML statis biasa yang akan dikembalikan oleh aplikasi Express sebagaimana adanya. Baik laman About dan Artikel sama di luar perubahan pada judul dan nilai h1.

Sekali lagi, nyalakan ini di baris perintah dan buka browser Anda. (Ngomong-ngomong, salah satu kesalahan umum yang saya buat ketika belajar Node pertama adalah lupa untuk mematikan demo saya sebelumnya. Jika Anda masih menjalankan aplikasi terakhir, itu akan menahan port 3000. Baik mematikannya atau menggunakan port lain untuk aplikasi ini.) Anda harus dapat menelusuri aplikasi sederhana ini dalam beberapa klik mudah.

Sekarang mari kita bergerak dari statis ke dinamis.

Dari Statis ke Dinamis

Express mendukung berbagai mesin templating. Mesin template seperti banyak hal di dunia teknologi - satu langkah lebih rendah dari agama dan politik. Baris perintah ekspres dapat menambahkan dukungan untuk Jade, EJS, JSHTML, dan Hogan. Menurut dokumentasi Express, setiap mesin templating yang sesuai dengan tanda tangan tertentu akan bekerja dengannya. Mereka juga merekomendasikan memeriksa pustaka consolidate.js untuk daftar mesin template yang didukung.

Secara pribadi, saya penggemar berat Handlebars (handlebarsjs.com). Saya telah menggunakannya di banyak aplikasi sisi klien dan itu cocok alami untuk saya gunakan di sisi server. Untuk menggunakan Handlebars Anda perlu menginstal pustaka wrapper yang disebut hbs. Mari tambahkan ini ke aplikasi kita.

Sekarang mari perbarui app.js kita untuk menggunakan mesin ini:

Kita telah melakukan beberapa hal penting di sini. Untuk menggunakan Handlebars, kita memuat di (melalui require) pustaka wrapper HBS. Kita kemudian harus memberi tahu Express untuk menggunakannya. Secara default, Handlebars akan bekerja dengan file yang berisi ekstensi yang sesuai dengan mesin tertentu. Dalam kasus kita, something.hbs. Namun, kita dapat memberi tahu Express untuk memperlakukan file HTML sebagai dinamis dengan menggunakan arahan "view engine", Anda lihat di atas. Ini tidak diperlukan, tetapi saya lebih suka bekerja dengan file HTML. Editor saya kemudian dapat memberikan petunjuk kode dan penyorotan sintaks yang lebih baik. Sebenarnya pemuatan mesin ini kemudian dilakukan melalui app.engine.

Akhirnya, semua rute beralih menggunakan metode render baru. Ekspres secara default menggunakan folder tampilan, jadi kita bisa membiarkannya. Karena Express juga tahu ekstensi yang kami sukai, kami juga dapat melupakannya. Pada dasarnya, res.render ('something') sama dengan memberitahu Express untuk mencari views/something.html, menguraikannya berdasarkan aturan mesin templating kita, dan mengembalikannya ke browser.

Anda dapat menemukan contoh ini di folder blog2, dalam kode sumber terlampir. Seperti yang saya katakan sebelumnya, saya suka mengambil langkah-langkah kecil, jadi meskipun kita tidak benar-benar melakukan sesuatu yang dinamis, saya sarankan untuk mengaktifkan ini di baris perintah dan memastikan Anda masih dapat menelusuri situs.

Menampilkan Entri Blog di Halaman Utama

Mengingat bahwa kita sekarang mendukung template dinamis, mari kita benar-benar membuatnya dinamis. Karena kita sedang membangun blog, kita harus menambahkan dukungan untuk mencantumkan satu set entri blog di halaman beranda dan memungkinkan Anda untuk menautkan ke mesin blog tertentu. Sementara kita bisa menjalankan koneksi ke MySQL atau Mongo, mari kita buat satu set data statis serta perpustakaan wrapper sederhana untuk itu. Ini adalah file blog.js yang menyediakan baik untuk mendapatkan satu set entri maupun hanya satu.

Biasanya, kita juga memiliki metode untuk menambahkan, mengedit, dan menghapus, tetapi untuk sekarang ini sudah cukup. Mari sekarang lihat file app.js yang diperbarui yang menggunakan mesin ini.

Mari kita bahas pembaruan satu per satu. (Versi ini dapat ditemukan di folder blog3.) Pertama, kita memuat di mesin kita menggunakan panggilan cepat membutuhkan. Ini memberi kita kemampuan untuk memanggilnya dan mendapatkan entri. Anda mungkin akan melihat baris baru memanggil bodyParser, tetapi abaikan itu untuk saat ini.

Di router beranda kita, kita telah mengirimkan argumen kedua ke render API. Argumennya adalah objek dengan dua kunci, title dan entries. Nilai untuk judul hanya berupa string, tetapi entri akan memanggil API blogEngine kita. Di sinilah hal-hal menjadi menarik. Data apa pun yang kita berikan di sini akan tersedia untuk template kita. Bergantung pada bahasa template Anda, hal-hal khusus dalam cara Anda menggunakannya dapat berubah, tetapi mari kita lihat halaman beranda.

Jika Anda belum pernah menggunakan Handlebars sebelumnya, Anda mungkin masih bisa menebak dengan baik apa yang terjadi di sini. Arahan #each akan diulang melalui array. Di dalam blok, saya telah menggunakan kombinasi token Handlebar yang mengarahkan kembali ke data blog saya serta HTML untuk membuat daftar entri blog yang sederhana. Berasal dari latar belakang ColdFusion, ini sangat akrab.

Membuat Layout

Saya yakin Anda juga bertanya-tanya di mana sisa HTML pergi. Ketika menggunakan mesin templating di Express Anda mendapatkan dukungan tata letak otomatis. Itu berarti saya dapat membuat layout generik dengan desain situs saya dan Express akan meng-inject output halaman tertentu di dalamnya. Berdasarkan konvensi, ini disebut layout.something. Di mana "something" adalah ekstensi tertentu yang Anda gunakan. Karena kita menggunakan HTML, ini hanya akan menjadi layout.html:

Sangat apik, kan? Halaman Tentang tidak menarik sehingga kita akan melewatkannya, tetapi periksa rute artikel. Sekarang termasuk token, :id, di URL. Express memungkinkan kita untuk membuat URL dinamis yang kemudian dapat memetakan untuk meminta argumen. Anda akan melihat bahwa kembali di halaman depan, kita mendefinisikan tautan yang tampak seperti ini: /article/{{id}}.

Kita akan, secara teori, menambahkan satu rute untuk setiap entri blog yang kita miliki, tetapi jauh lebih baik untuk membuat rute abstrak yang akan cocok dengan permintaan apa pun dari formulir khusus tersebut. Untuk mendapatkan akses ke nilai ini, kita juga menambahkan bagian lain, garis bodyParser yang kita definisikan sebelumnya. (Fitur khusus ini berasal dari kerangka Connect dan benar-benar memberikan sedikit bantuan kepada Anda dalam mendukung string kueri dan bentuk badan. Hampir setiap aplikasi Express ingin memasukkan ini.)

Menampilkan Artikel Perorangan

Karena kita mendapatkan akses ke nilai dinamis di bagian akhir URL, kita dapat meneruskannya ke objek blogEngine dan menggunakan hasilnya sebagai argumen untuk tampilan.

Ini file article.html:

Sekarang kita punya aplikasi yang benar-benar dinamis, tetapi jelek. Ini adalah beranda baru kita:

express-blog3-home

Dan inilah salah satu entri blog tertentu:

express-blog3-article

Letakkan Beberapa Lipstik pada Babi Itu!

Mari menambahkan beberapa gaya dasar ke aplikasi kita untuk membuatnya sedikit lebih cantik. Express menyediakan cara sederhana untuk menambahkan dukungan untuk sumber daya statis seperti gambar, pustaka JavaScript, dan lembar gaya. Dengan hanya mendefinisikan folder statis, setiap permintaan akan untuk file akan diperiksa terhadap folder tertentu sebelum dibandingkan dengan rute. Berikut ini contoh dari versi final mesin blog kita (yang dapat ditemukan di folder blog4):

Pada titik ini, jika Anda meminta /foo.css, dan file foo.css ada di folder public, itu akan dikembalikan. Karena keahlian desain saya sama bagusnya dengan pengembang mana pun, saya mengambil jalan keluar yang mudah dan mengambil salinan Bootstrap (http://twitter.github.io/bootstrap/). Saya menjatuhkannya dan salinan jQuery, ke folder publik saya.

Lalu dalam layout.html saya, saya bisa merujuk ke sumber daya ini. Berikut ini salah satu contoh penautan di bootstrap.css:

Express sekarang akan secara otomatis memeriksa file ini di dalam folder public. Anda dapat memiliki beberapa folder statis seperti ini dan bahkan dapat mengatur awalan URL khusus untuknya. Hasilnya - menakjubkan. (Ok, dibandingkan dengan versi pertama, ini adalah peningkatan besar!)

Halaman Depan

express-blog4-home

Dan Artikel:

express-blog4-article

Apa selanjutnya?

Ingin belajar lebih banyak? Berikut ini beberapa tautan yang mungkin bisa membantu.

  • Tentunya pemberhentian pertama Anda seharusnya ke beranda Ekspres.
  • Anda dapat bergabung dengan Google group untuk berbicara dengan pengembang lain.
  • Jika Anda ingin benar-benar hip, bergabunglah dengan saluran IRC: #express.
  • Akhirnya, Anda dapat melihat sejumlah contoh di GitHub.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.