Dalam pengembangan web, menampilkan data dari server pada halaman web sangat penting untuk menciptakan pengalaman pengguna yang interaktif dan dinamis. Di sinilah Template Engine datang Express.js untuk menyelamatkan. A Template Engine adalah alat yang memungkinkan Anda membuat template HTML dinamis dengan menyuntikkan data dari server ke dalam kode HTML.
Mengapa Menggunakan Template Engine ?
Template Engine membantu memisahkan markup HTML dari data yang berasal dari server. Ini memungkinkan Anda mengelola kode HTML dengan lebih mudah tanpa harus menyematkan data ke setiap baris kode. Sebagai gantinya, Anda akan membuat "placeholder" atau "tag" di dalam kode HTML, yang Template Engine nantinya akan diisi dengan data sisi server.
Menggunakan Template Engine di Express.js
Express.js mendukung berbagai template engine, seperti Pug(sebelumnya dikenal sebagai Jade) dan EJS(JavaScript Tertanam). Di bawah ini adalah contoh penggunaan Pug dan EJS di Express.js:
Menggunakan Pug Template Engine
Instal Pug: Anda perlu menginstal pug
paket melalui npm.
Configure Template Engine: Dalam file konfigurasi aplikasi Anda(misalnya, app.js
), tentukan Pug sebagai template engine.
Buat Template Pug: Buat file Pug di views
direktori. Misalnya, buat index.pug
file:
Penanganan Rute dan Rendering Data: Dalam penanganan rute, Anda dapat meneruskan data ke template engine penggunaan res.render()
.
Menggunakan EJS Template Engine
Instal EJS: Instal ejs
paket melalui npm.
Configure Template Engine: Tetapkan EJS sebagai dalam template engine konfigurasi aplikasi Anda.
Buat Template EJS: Buat file EJS di views
direktori. Misalnya, buat index.ejs
file:
Penanganan Rute dan Rendering Data: Dalam penanganan rute, berikan data ke template engine penggunaan res.render()
.
Kesimpulan
Menggunakan Template Engine in Express.js memungkinkan Anda membuat halaman web dinamis dan menampilkan informasi dari server di browser pengguna. Dengan memanfaatkan Pug, EJS, atau lainnya template engine, Anda dapat membuat halaman web yang interaktif dan fleksibel yang memberikan pengalaman pengguna yang lebih baik dan mengoptimalkan pengelolaan kode dan data HTML.