Belajar Dasar Express.Js

express.js merupakan framework yang digunakan untuk membuat wesite minimalis dengan memiliki banyak sekali methode dan plugin yang memudahkan untuk web aplication dan Api dengan menggunakan Node Js yang mana dalam pencarian sebuah ckonten video, teks dan lainnnya yang dibundling dan ditampilkan dalam tampilan yang mana express sebagai backend

Kenapa kita menggunakan exprees?

keunggulannya untuk menjalankan sebuah server yang mana digunakan untuk request didalamnya mencari data apa yang dicari oleh klein dan mengurai data parsing dari header, body dan lainnya secara spesifik mengambil mana yang akan digunakan untuk mencocokan ke suatu route tertentu dan mengumpulkan informasi dalam http response untuk ditampilkan, baik code, header dan data lain yang dikirimkan ke server

Express sebagai framework ini memiliki perbedaan dengan library yang mana librari ini seperti halnya cdn bootstrap yang dimasukkan kedalam html atau library lain yang ada dalam html yang bebas digunakan mau digunakan atau tidak sesuai dengan flow aplikasi yang diinginkan berbeda dengan framework yang mana posisinya diatur sesuai dengan aplikasi dan memiliki standar khusus untuk memanfaatkan aplikasi atau fungsi yang sudah dibuatkan atau diracikan yang mudah digunakan dan sudah digunakan.

Membuat aplikasi dengan express JS yaitu dengan menginstall frameworknya dengan cara membuka server terminal dengan mengetikkan: npm install express –save kemudian anda buka visual studio codenya.exit jika menggunakan npm terbaru nggak perlu lagi menggunakan save yaitu dengan menggunakan: npm i express

setelah itu silahkan buka visual codenya dan new terminal pada bagian sisi atasnya
Jangan lupa untuk membuat folder dengan perintah:

 mkdir first-express

Kemudian berpindah ke direktorinya atau foldernya dengan perintah:

cd first-express/

dan setelah itu ketikan perintah:

npm init -y

supaya inputannya diiyakan aja ketika digunakan secara default

perintah:

npm i express

di dalam folder yang sama jika sudah selesai silahkan dibuat dengan entry pointnya dengan membuat perintah:

touch index.js

untuk memakainya menggunakan sebuah objek yang mana express ini adalah framework berbasis beckend yang mana framework ini menunggu request yang datang di dalam domain yang harus mendefiniskan port ketika belum ada domain dengan localhost.

const express = require("express");
const app = express();

Aplikasi framework ini menggunakan listen untuk basis web dengan port 8080. Karena basisnya server maka ditulis dengan cara sebagai berikut

append.listen(8080,()=>{
console.log ('Server is running on http://localhost:8080');

})

ketika dituliskan atau diketikkan perintah node index.js maka akan ada pesan eror Cannot GET /

agar tidak terjadi eror seperti ini, maka anda bisa gunakan app dengan perintah request saat akan memanggil localhost port 8080 dan setiap perubahan anda harus menjalankan nodenya kembali dengan perintah node index.js

dengan mengetikan perintah:

app.use(() => {
console.log ('we got request');

})

jika anda menggunakan ip, anda bisa menuliskan listennya dengan ip atau domain anda.

Mengenal Object Request dan Response?

untuk membuat objek anda bisa menuliskannya didalam app.use yang digunakan sebelumnya sebagai contoh seperti berikut untuk object (req,res)

app.use((req,res) => {
console.log ('we got request');
console.dir (req)

})

maka akan muncul beberapa informasi, maka akan terlihat beberapa methode dan propertinya anda bisa melakukan sending dengan format html akan di respons sesuai dengan html dan bisa juga object seperti dibawah ini

res.send (' <h1> Hello World</h1>'); // ini contoh untuk html
res.send ({message: 'hello world'}); // ini contoh untuk respons object

Anda juga bisa menampilkan string biasa dengan cara

res.send ('ini adalah string biasa');

Membuat Route Untuk Menentukan Response Tertentu

Setelah membahas response dan request yang dikirimkan ke client, dan request tersebut masih di halaman yang umum belum spesifik di path mana sehingga perlu adanya membuat route yang dipilih saat user akan memilih halaman tertentu atau path mana yang akan dipilih sehingga dapat menampilkan halaman tertentu

Untuk membuat request kita dapat menginstal di visual code plugin thunder client yang dibutuhkan untuk membuat beberapa request dengan contoh sebagai berikut

Ketika akan mengakses halaman cat di dalam port 8080, kita ingin mengirimkan string kita membutuhkan object request dan respont yang dikirimkan dengan menggunakan res.send, contoh halaman cat itu seperti http://localhost:8080/cats

app.get ('/cats', (req,res) => {
res.send ('this is cat page')

})

contoh lainnya jika kita akan membuat halaman about dengan menambah object maka bisa menggunakan app get dengan arrow function sehingga kita tidak bakal salah routing ketika membuat sesuatu yang baru tersebut.

app.get ('/about',(req, res) => {

res.send (' this is about page')
})

Begitu pula jika kita ingin meroute halaman homenya kita bisa dapat menggunakan

app.get('/', (req, res) => {
res.send( 'this is homepage');
});

Jika anda mengetikkan url yang tidak ada pada sebuah website anda bisa menggunakan bintang pada responsnya dengan menuliskannya sebagai berikut NB jangan sampai ditaruh dipaling atas karena akan di override atau ditimpa semua halamannya.

app.get('*', (req, res) => {
res.send('halaman tidak ditemuka');
});

Route parameter di Express.js

Secara sederhana kita sudah mempelajari route, kita akan coba membuat rote dengan methode lain seperti post dengan menggunakan thunder client dengan contoh seperti sebuah website yang dibuat blog dibelakangnya seperti url // domain.com/blog/judul-berita

dengan url yang selalu dinamis dengan awalan yang sama dengan url blog yang membedakan dengan url yang berbeda atau membuat parameter setelah blog tersebut yang seolah-olah yang diketikan adalah variabel adalah suatu nilai sesuai dengan request dengan contoh menggunakan (:)

app.get ('/blog/:judul'(req,res) => {

});

semantar itu kita bisa melihat di console kita dengan menambah console lognya

app.get ('/blog/:judul'(req,res) => {

console.log (req.params);

});

object params disini ditujukan ke paramater yang ada di object judul dengan titik dua tersebut, ketika dijalankan ulang dan di refres maka akan ada object judul sesuai dengan yang diketikan diatas pada url seperti contohnyua

domain.com/blog/judul-berita-baru

kemudian kita juga bisa lakukan distruct dengan mengambil object yang akan diambil langsung dari request params dengan menambahkan constan terlebih dahulu dan juga kita bisa meresponskan sennya di dalamnya dengan cara berikut untuk nilai yang ada

app.get ('/blog/:judul'(req,res) => {
const {judul} = req.params;
res.send('kita akan melihat postingan dengan judul: ${judul}');
});

Mendapat nilai dari query string

Mengambil data dari query string, biasa diawali dengan tanda tanya yang ada disitus tanda tanya pada mesin pencarian yang ada di url contohnya website yang menggunakan php yang dibelakangnya menggunakan tanda tanya. Anda bisa menggunakan method get dengan query string yang mana ada object query data yang mana akan membaca nilai query string yang akan diisikan yang dapat anda coba di thunder client yang sudah anda instal dan hasilnya bisa anda lihat di console log

app.get ('/search',(req,res) => {
console.log (req.query);
});

Dan hal ini juga dapat dilakukan di dalam distruct menabahkan keyword dalam distruct dengan mengmabil properti q dari request query dan mencoba mengirimkan responnya dengan nilai h1 dengan string search keyword dengan q variabel diatas. Anda bisa ubah dengan search dan tambahkan keywordnya ‘node js’ atau ‘javascript’

app.get ('/search',(req,res) => {
const {q} = req.query;
res.send ('<h1> Search Keywordnya ${q}</h1>)
});

kita juga bisa menambahkan pengkodisian jika tidak ada respons qnya amaka akan menambahkan respons eror gak ada nilai q maka tidak ada data yang dicari

app.get ('/search',(req,res) => {
const {q} = req.query;
if(!q)
res.send ('<h1> Tidak ada data yang dicari</h1>')
});

Otomatis Restar Project Node Js Dengan Nodemon

Bila ada perubahan pada kodingan yang ada maka kita harus melakukan perubahan di terminalnya dengan perintah node index.js Kita bisa memanfaatkan sebuah tool yang bernama nodemon sehingga dapat secara otomatis menjalankan ulang project node js setiap ada perubahan di kodingan yang telah kita rubah dengan melakukan penginstallan yang ada di mesin dengan melakukan perintah install di terminal dengan perintah

npm i -g nodemon

Dan untuk menjalankan nodemon ini dengan menggantikan perintah node menjadi nodemon seperti berikut

nodemon index.js

Anda cukup melakukan refresh pada browser sehingga nodemon akan langsung melakukan restarting dan starting dengan sendirinya sehingga dapat menjalankan ulang pada project yang anda miliki saat ini

Penutup

Demikianlah dasar-dasar dalam mempelajari express.js yang dapat anda pelajari, dan doa kan kami dikemudian hari bisa memberikan tutorialnya dalam bentuk video sehingga anda dapat belajar gratis di portal kami ini.