‫Instruktur: Dalam
‫video ini, kita akan membicarakan dan
‫menerapkan konsep yang disebut perutean.
‫Jadi saat ini, kode yang
‫kami tulis sama sekali tidak bereaksi terhadap URL yang kami minta.
‫Jadi katakanlah kita memiliki URL ini dan
‫mendapatkan respons ini, tetapi jika kita
‫memiliki produk, misalnya, kita mendapatkan respons yang sama persis, bukan?
‫Kalau kita lihat contoh,
‫tugas akhir, nah di sini misalnya
‫kita lihat Overview.
‫Jadi sekarang kita memiliki host, lalu port, dan /overview, dan
‫rutenya di sini adalah /overview, dan kemudian kita melihat halaman
‫ini.
‫Tapi sekarang, lihat apa yang terjadi.
‫Jadi sekarang kami memiliki produk.
‫Dan itulah mengapa kami mendapatkan halaman produk ini.
‫Dan kemudian kita kembali, kita kembali ke gambaran umum,
‫dan kita melihat lagi halaman yang kita miliki di awal.
‫Juga, jika kita tidak memiliki apa-apa,
‫maka kita masih melihat halaman yang sama ini.
‫Dan itu pada dasarnya adalah perutean.
‫Jadi, perutean pada dasarnya berarti menerapkan tindakan yang berbeda
‫untuk URL yang berbeda.
‫Oke, dan sekarang kita tidak memiliki hal seperti itu.
‫Jadi seperti yang saya katakan, apa pun URL yang kami
‫miliki, kami selalu mendapatkan respons yang sama.
‫Jadi sekarang kita harus menerapkan beberapa logika
‫yang mengubah itu.
‫Oke, dan sekali lagi, itu akan menjadi perutean.
‫Sekarang perutean sebenarnya bisa menjadi sangat sangat rumit dalam
‫aplikasi dunia nyata yang besar, dan dalam hal ini
‫kami menggunakan alat untuk itu seperti Express, jadi kami akan melakukannya
‫dalam proyek besar berikutnya dalam kursus ini
‫di mana kami menggunakan Express untuk melakukan semua ini.
‫Tapi untuk saat ini, karena kita baru
‫mulai belajar Node, kita ingin belajar
‫bagaimana melakukan semuanya dari awal tanpa ketergantungan ini, bukan?
‫Jadi mari kita terapkan perutean yang
‫sangat sederhana di server ini.
‫Sekarang langkah pertama
‫adalah benar-benar dapat menganalisis URL.
‫Dan untuk itu, kami menggunakan modul Node bawaan lainnya, yang
‫disebut URL.
‫Dan saya hanya menduplikasi
‫ini di sini, dan kemudian URL.
‫Dan sebagai sidenote, jadi saya memilih URL, dan kemudian
‫untuk memilih yang
‫berikutnya, saya hanya menekan Command + D di keyboard saya.
‫Oke, saya tahu bahwa seseorang mungkin akan bertanya di T&J
‫bagaimana saya
‫melakukan trik ini, dan itulah sebabnya saya membalasnya sekarang, dan
‫mengatakan cara kerjanya.
‫Bagaimanapun, pertama-tama, mari kita lihat
‫permintaannya. url.
‫Dan tentu saja, saya ingin konsol. log ini.
‫Jadi hentikan server dan jalankan lagi.
‫Dan ada alat bagi kita untuk melakukan ini secara otomatis.
‫Saya yakin beberapa dari Anda akan mengetahuinya.
‫Dan tentu saja, kita akan menggunakannya nanti,
‫tetapi untuk saat ini saya ingin terus melakukannya seperti ini.
‫Oke, jadi mari kita muat ulang ini.
‫Bekerja sama, dan di sini kita mendapatkan URL.
‫Oke, dan kami benar-benar mendapatkan dua dari mereka.
‫Dan ini berarti bahwa sebenarnya kita memiliki dua permintaan
‫dan sebenarnya, fungsi panggilan balik ini
‫dijalankan dua kali.
‫Jadi satu konsol. log hanya memiliki
‫garis miring, dan yang kedua memiliki /favicon.
‫Jadi saat kita
‫menggunakan browser, browser secara otomatis
‫melakukan request ke favicon website.
‫Baiklah, jadi dalam hal ini kita tidak memiliki
‫favicon, dan kita abaikan saja, oke?
‫Jadi ini tidak terlalu penting.
‫Sekarang katakanlah kita menulis /overview di sini.
‫Jadi mari kita lihat apa yang kita dapatkan.
‫Jadi kita mendapatkan /overview, dan /favicon, oke.
‫Jadi sekali lagi, yang penting adalah /overview.
‫Jadi untuk URL sederhana
‫seperti ini, sebenarnya kita tidak memerlukan modul URL,
‫tetapi kita akan membutuhkannya untuk hal-hal yang lebih kompleks.
‫Jadi katakanlah kita
‫memiliki, misalnya, menentukan ID 23, dan
‫beberapa parameter lain di sini.
‫Katakanlah ini adalah sesuatu seperti ini.
‫Dan saya yakin Anda telah melihat pola semacam ini di
‫URL tempat kami dapat menentukan parameter.
‫Jadi jika kita memiliki sesuatu seperti
‫ini, maka Anda melihat bahwa URL-nya adalah ini.
‫Dan apa yang modul URL akan
‫membantu kita lakukan adalah pada dasarnya mengurai parameter ini
‫dan nilainya menjadi objek yang diformat dengan baik, oke?
‫Jadi untuk saat ini
‫kita sebenarnya tidak akan menggunakan modul URL dulu.
‫Kita akan membutuhkannya nanti.
‫Jadi, sekarang mari kita benar-benar menerapkan perutean, dan ini
‫sangat sangat sederhana.
‫Jadi pada dasarnya yang kita butuhkan hanyalah pernyataan if else yang besar di sini.
‫Oke, jadi pertama-tama saya akan menyimpan req. url menjadi variabel,
‫oh, maaf,
‫menjadi variabel bernama pathName.
‫Oke, dan sekarang, berdasarkan nama jalur itu,
‫kami akan mengambil keputusan.
‫Jadi pada dasarnya, kirim kembali tanggapan yang berbeda.
‫Jadi, jika pathName sama dengan overview, atau /overview, maka
‫mari kita kirim sesuatu ke klien.
‫Dan katakan saja, ini adalah GAMBARANNYA.
‫Lain jika pathName sama dengan product, /product, well,
‫maka yang ingin kita lakukan hanyalah
‫mengirimkan ini PRODUCT.
‫Oke, sekarang jika kita berada di root situs.
‫Jadi pada dasarnya seperti ini, nah, kemudian kami
‫juga ingin menunjukkan gambarannya.
‫Jadi mari kita tambahkan itu di sini juga.
‫Jadi pathName sama dengan, dan slash.
‫Dan kemudian atau.
‫Jadi jika pathName adalah root atau /overview, kemudian dikirim
‫kembali sebagai OVERVIEW, atau
‫jika itu produk, maka kirim kembali PRODUCT.
‫Jadi hal yang sangat sederhana, dan mari kita uji sekarang.
‫Sebenarnya, kita hanya dapat memuat ulang, atau sebaliknya,
‫sebenarnya, kita harus menyelesaikan ini terlebih dahulu, dan memulai semuanya lagi.
‫Jadi sudah berfungsi, ini GAMBARANNYA.
‫Jika sekarang saya
‫mengatakan produk, maka ini adalah PRODUK, sempurna.
‫Sekarang hanya untuk memeriksa yang terakhir, ikhtisar
‫memberi kita TINJAUAN lagi.
‫Oke, sekarang katakanlah kita sebenarnya meminta sesuatu yang tidak
‫kita tangani.
‫Jadi sesuatu seperti ini.
‫Jadi, apa yang terjadi?
‫Seperti yang Anda lihat, roda ini
‫tidak benar-benar berhenti berputar.
‫Jadi itu mencoba mengirim kembali tanggapan, tetapi itu benar-benar tidak bisa.
‫Jadi server tidak tahu apa yang harus dilakukan dalam situasi
‫ini, karena kami tidak menambahkan fallback.
‫Jadi mari kita hentikan orang malang
‫ini di sini, dan pada dasarnya cukup tambahkan pernyataan lain di sini.
‫Jadi jika itu bukan root, bukan ikhtisar, bukan produk, yah, maka
‫kami ingin mengatakan bahwa halaman ini tidak dapat ditemukan.
‫Halaman tidak ditemukan.
‫Nah, berkali-kali ketika di situs web
‫Anda mencoba membuka halaman
‫yang tidak ditemukan, Anda melihat kesalahan 404, bukan?
‫Dan itu sebenarnya sesuatu yang disebut kode status HTTP.
‫Jadi karena kami mengirim kembali respons,
‫kami juga dapat menambahkan kode status ke respons.
‫Dan untuk itu, kita dapat menggunakan beberapa cara untuk melakukan itu, tetapi saya
‫akan menggunakan salah satu yang dapat
‫melakukan lebih dari sekadar kode
‫status, dan saya akan menunjukkan alasannya sebentar lagi.
‫Tapi untuk saat ini, saya hanya
‫mengatakan di sini, res. menulis kepala, dan kemudian 404, oke?
‫Mari kita uji itu sekarang.
‫Dan jadi apa yang terjadi di sini?
‫Ah, dalam hal ini
‫tidak terjadi apa-apa, karena saya tidak me-restart server.
‫Jadi, halaman tidak ditemukan.
‫Hebat, sekarang bagaimana dengan kode status 404?
‫Nah, kita bisa menekan Inspect di sini untuk membuka Dev Tools, atau
‫sebaliknya yang ingin saya lakukan adalah menekan Command + J,
‫dan itu akan membuka Dev Tools juga.
‫Di Windows mungkin Alt + Control
‫+ J, atau Anda bisa datang ke View, lalu
‫Developer, dan Developer Tools seperti ini, oke?
‫Kemudian buka tab Jaringan, tetapi sebenarnya
‫Anda sudah bisa melihatnya seperti di sini.
‫Jadi server merespons dengan kode status 404 tidak ditemukan.
‫Tetapi Anda juga dapat melihatnya di jaringan, dan hanya memuatnya kembali,
‫dan kemudian Anda melihat 404
‫di sini, dan teks merah untuk menunjukkan bahwa ada beberapa kesalahan.
‫Oke, sekarang hal lain yang bisa dilakukan oleh writeHead ini
‫adalah juga mengirim header.
‫Dan untuk mengirim header, kita perlu menentukan objek di sini, lalu
‫di sana kita meletakkan header yang ingin kita kirim.
‫Sekarang apa sebenarnya header itu?
‫Nah, header HTTP pada dasarnya adalah informasi tentang
‫respons yang kami kirimkan kembali.
‫Dan sekali lagi, Anda akan belajar lebih banyak
‫tentang ini di bagian selanjutnya dari kursus ini, oke?
‫Untuk saat ini, ketahuilah bahwa
‫ada banyak header standar berbeda yang dapat
‫kita tentukan untuk memberi tahu browser atau
‫klien apa pun yang menerima respons tentang respons itu sendiri.
‫Misalnya, salah satu tajuk standar
‫adalah untuk memberi tahu browser tentang jenis konten.
‫Jadi kita
‫bisa mengatakan Content-Type, dan mengaturnya ke teks/html.
‫Dan
‫seperti ini, browser sekarang mengharapkan beberapa HTML.
‫Jadi apa yang bisa kita
‫lakukan sekarang, misalnya di sini, adalah
‫melakukan elemen h1 untuk mengirim kembali HTML pada dasarnya.
‫Jadi, seperti ini.
‫Dan karena tajuk
‫ini di sini, browser sekarang sebenarnya mengharapkan HTML untuk masuk.
‫Kita juga bisa menentukan header buatan kita sendiri.
‫Jadi katakanlah my-own-header, hello-world, jadi
‫sesuatu seperti ini, oke?
‫Sekarang yang penting di sini
‫adalah bahwa header ini dan juga kode
‫status harus selalu disetel sebelum kami mengirimkan respons.
‫Oke, jadi kami tidak pernah bisa mengirim tajuk
‫setelah konten respons itu sendiri.
‫Jadi mari kita coba
‫lagi, atau sebenarnya, saya harus me-restart server.
‫Jadi mari kita coba lagi sekarang.
‫Dan memang, kami masih mendapatkan kesalahan kami,
‫tetapi sekarang terlihat berbeda.
‫Jadi sekarang kita sebenarnya memiliki elemen h1 di sini.
‫Dan jika kita juga pada tab Jaringan mengklik permintaan ini, mari
‫kita tingkatkan sedikit di sini.
‫Jadi saya tidak yakin
‫apakah Anda benar-benar dapat melihat ini, tetapi ketika kami mengklik permintaan
‫ini di sini, kami sebenarnya juga dapat melihat header respons.
‫Jadi di sini kita memiliki
‫tipe konten yang kita tentukan sebagai teks/html, dan
‫kemudian tajuk
‫lainnya, jadi tajuk saya sendiri disetel ke hello-world.
‫Dan sekali lagi, kita dapat menggunakan ini untuk mengirim
‫beberapa metadata tentang respons itu sendiri, oke?
‫Sekarang ada juga beberapa header permintaan, dan ini
‫disetel oleh browser secara otomatis, tetapi untuk saat
‫ini jangan khawatir tentang ini.
‫Yang penting kita tentukan bahwa konten yang
‫kita kirim adalah HTML, dan juga
‫misalnya kode status yang
‫kita kirim kembali adalah 404 tidak ditemukan, oke?
‫Sekarang, mari kita singkirkan ini.
‫Buka, dan sekarang Anda lihat,
‫kami memiliki status 200, yang berarti OK, dan
‫header lainnya ini, mereka benar-benar hilang.
‫Oke, jadi sekarang
‫respons ini tidak memiliki dua tajuk lainnya, kan?
‫Dan kita melihat 200
‫OK sekarang, dan ya, semuanya bekerja dengan baik sekarang.
‫Kami menerapkan perutean dasar, jadi untuk
‫nama jalur yang berbeda,
‫kami sekarang memiliki tindakan yang berbeda.
‫Satu hal terakhir yang ingin saya katakan tentang perutean adalah
‫bahwa rute yang kami definisikan di sini dalam kode
‫kami dan rute yang kami masukkan ke dalam URL di
‫browser tidak ada hubungannya dengan file dan
‫folder di sistem file proyek kami, oke ?
‫Jadi sebagai pemula Anda mungkin
‫berpikir bahwa jika kita membuka /templates misalnya, itu
‫akan membuka folder Templates yang kita miliki
‫di sistem file kita.
‫Tapi tentu saja tidak demikian.
‫Jadi jika kita ingin memiliki rute template,
‫maka kita harus
‫mendefinisikannya di router kita, pada dasarnya,
‫dan kemudian mengirim respons khusus hanya untuk rute itu.
‫Bagaimanapun, saya pikir ini cukup untuk satu video.
‫Sampai jumpa di yang berikutnya.