‫Instruktur: Dalam
‫kuliah ini, kita akan mulai benar-benar membangun halaman tinjauan tur.
‫Dan ingat, seperti
‫inilah tampilan halaman ikhtisar sekarang.
‫Jadi itu tidak memiliki konten
‫nyata, dan itulah yang akan kami tambahkan dalam video ini.
‫Jadi kita di sini di rute root
‫ini, dan sekali lagi, di situlah gambarannya, oke?
‫Jadi di router
‫tampilan kami, tentu saja rute ini, oke?
‫Jadi pengontrol yang bertanggung
‫jawab untuk merender halaman ini adalah pengontrol getoverview, oke?
‫Jadi pertama-tama mari kita pergi ke sini, dan
‫menjelaskan langkah-langkah yang akan kita ambil
‫untuk merender halaman ini.
‫Jadi, hal pertama yang harus kita
‫lakukan adalah benar-benar mendapatkan semua data wisata dari
‫koleksi kita, bukan?
‫Jadi dapatkan
‫data tur dari koleksi.
‫Kemudian kedua, kita akan membuat template kita dan
‫tentunya kita tidak
‫akan melakukannya di sini dalam fungsi pengontrol ini.
‫Tapi, mari kita tetap menulisnya di sini.
‫Jadi, buat template, lalu render template itu, menggunakan
‫data tur dari langkah pertama.
‫Jadi, dimulai dengan langkah
‫pertama di sini, dapatkan data tur dari
‫koleksi, itu berarti tentu saja kita
‫harus benar-benar mengimpor model tur terlebih dahulu.
‫Jadi, itu adalah sesuatu yang sudah sering
‫kami lakukan sebelumnya.
‫Itu sebenarnya satu tingkat, dan
‫kemudian dalam model.
‫dan model wisata.
‫Dan kemudian kita
‫juga akan membutuhkan fungsi atau
‫catchAsync, karena
‫tentu saja get Overview ini akan menjadi fungsi asynchronous.
‫Baiklah, jadi mari kita tandai yang ini sebagai asinkron.
‫Kami sekarang juga membutuhkan next di sini untuk
‫membuat fungsi catchAsync benar-benar berfungsi.
‫Oke, jadi saya harap sekarang Anda benar-benar mulai melihat
‫nilai dari kami yang telah membangun
‫semua hal api dan
‫semua kode yang telah kami lakukan hingga saat ini, sehingga
‫yang perlu kami lakukan sekarang adalah benar-benar memasang semua ini potongan-potongan bersama-sama, oke?
‫Jadi, kita sudah tahu sekarang bagaimana melakukan semua hal ini.
‫Kami sudah memiliki model tur kami yang berfungsi dengan benar.
‫Jadi sekarang semua ini sangat mudah.
‫Jadi const wisata sama dengan menunggu.
‫Jadi sekali lagi, tidak ada yang baru saat ini.
‫Dan temukan, semuanya pada dasarnya, oke?
‫Dan sekarang apa yang sebenarnya akan kita
‫lakukan dengan data tur ini?
‫Nah, kita harus menempelkan semua data tur
‫ini ke dalam template, sehingga di sana kita benar-benar
‫dapat menggunakan dan menampilkannya di situs web, bukan?
‫Jadi, itu sebenarnya sangat mudah dilakukan.
‫Yang perlu kita lakukan adalah meletakkannya di
‫sini di objek yang akan ditempelkan ke template
‫ikhtisar dalam kasus ini, oke?
‫Jadi, sangat mudah, yang perlu kita katakan hanyalah tur.
‫Jadi, itu sama dengan tur sama dengan tur
‫dan sekali lagi Anda sudah tahu bahwa mulai dari ES
‫6 cukup seperti ini.
‫Bagus, jadi kapan pun sekarang ada
‫permintaan untuk halaman ikhtisar, jadi pada dasarnya beranda kami
‫dari situs web kami yang dirender secara dinamis, semua data
‫tur akan diambil dari database kami di sini
‫dan kemudian data itu akan ditempelkan ke template kami.
‫Jadi sekarang yang perlu
‫kita lakukan adalah benar-benar membangun template itu, bukan?
‫Jadi mari kita beralih ke ikhtisar. pesek
‫Di sini kita benar-benar dapat menyingkirkan placeholder h1 ini di sini.
‫Dan, sekarang saya ingin melihat
‫file html statis di sini lagi.
‫Jadi, itu ada di folder publik,
‫lalu ikhtisar. html, oke?
‫Jadi, kita sudah membuat header di
‫salah satu kuliah
‫sebelumnya dan sekarang saatnya membangun bagian itu di sini.
‫Sekarang, ketika kami pertama
‫kali membuat template, saya sebenarnya salah dalam file
‫html saya dan saya memiliki tinjauan kelas bagian,
‫tetapi dalam file starter Anda, Anda
‫seharusnya memiliki main ini dengan kelas main.
‫Dan, jadi saya percaya pada file
‫Anda sebenarnya ada teks kecil yang menjelaskan itu, oke?
‫Tapi, bagaimanapun, kami benar-benar menghapus bagian itu
‫dari template dasar kami.
‫Jadi, ingat, bahwa di
‫sini di konten kita sebenarnya tidak memiliki html.
‫Jadi elemen utama yang ada
‫di html sekarang, tidak bisa ditemukan.
‫Dan sekarang kita membutuhkan itu dalam tinjauan kita, oke?
‫Jadi, mari kita buat bagian html ini dalam ikhtisar karena setelah
‫itu kita memiliki semua kartu berulang ini.
‫Jadi, mari kita
‫lihat juga sebelum menyalin kodenya.
‫Jadi, Anda melihat bahwa kami memiliki
‫kartu-kartu ini di sini dan pada dasarnya, masing-masing kartu ini, jadi masing-masing
‫elemen di sini, adalah
‫apa yang saya sebut satu kartu.
‫Dan, pada dasarnya kita akan memiliki sembilan kartu.
‫Jadi, sembilan kartu ini di halaman ikhtisar ini.
‫Dan itu sembilan kartu karena saat ini kami
‫memiliki sembilan tur,
‫tetapi tentu saja, kartu ini bisa kurang atau lebih, bukan?
‫Tapi bagaimanapun, yang penting untuk dicatat
‫di sini adalah bahwa kartu-kartu ini
‫benar-benar berulang berulang-ulang.
‫Jadi kami memiliki elemen kartu besar ini di sini.
‫Jadi ada yang
‫pertama, dan kemudian ada banyak elemen berulang yang sama setelahnya.
‫Oke?
‫Jadi, sebenarnya saya melanjutkan dan membuat template pug untuk
‫kartu ini saja,
‫sehingga kita tidak perlu menulisnya secara manual
‫sekarang dan membuang banyak waktu untuk melakukannya, oke?
‫Jadi itu hanya akan membuat kursus tidak perlu panjang
‫dan jadi saya memutuskan untuk membuat template ini sebelumnya
‫untuk kita gunakan sekarang.
‫Sekarang tentu saja jika Anda ingin melatih keterampilan
‫pug Anda sedikit lebih banyak, maka jangan ragu untuk menjeda
‫video pada saat ini dan kemudian terjemahkan semua kode ini ke dalam pug.
‫Baiklah?
‫Dan setelah selesai, Anda bisa kembali.
‫Tapi sekarang saya benar-benar akan melanjutkan dan menggunakan template itu.
‫Dan itu di sini di data
‫dev dan kemudian template dan template kartu tur, oke?
‫Jadi itu seluruh kartu untuk
‫satu kartu, pada dasarnya diterjemahkan ke kode pug, oke?
‫Jadi mari
‫kita salin semua itu, taruh di sini di ikhtisar, oke?
‫Dan mari kita ingat, bahwa sebelum itu, kita
‫juga membutuhkan wadah utama dan kartu ini jadi mari
‫kita salin ini juga.
‫Jadi hanya di sini
‫sebagai referensi, sehingga kita sekarang dapat menulis main
‫main dan di sana kita memiliki dev yang disebut wadah kartu.
‫Oke?
‫Dan seperti namanya,
‫wadah itu akan berisi kartu.
‫Jadi sekarang mari kita indentasi ini, karena sekarang ini
‫tidak benar-benar berada di dalam wadah kartu.
‫Jadi sekarang ini akan berada di dalam main tapi bukan
‫itu yang kami inginkan.
‫Jadi, saya memilih semuanya dan menekan tab.
‫Saya menekan tab lagi, dan sekarang kita melihatnya
‫pada level yang benar.
‫Itu ada di dalam wadah kartu.
‫Namun sebenarnya masih belum 100% benar
‫karena elemen
‫ini juga harus berada di dalam elemen kartu.
‫Dan untuk beberapa alasan, menyalin template
‫ini dari satu file
‫ke file lainnya, agak mengacaukan kode ini.
‫Jadi berhati-hatilah saat Anda menempelkan kode
‫seperti ini.
‫Jadi dalam template asli kami, semuanya benar seperti yang
‫Anda lihat, tetapi kemudian ketika kami menyalinnya,
‫itu agak kacau.
‫Jadi, mari kita tutup itu.
‫Kita sebenarnya juga
‫bisa menutup ini, kita tidak membutuhkannya lagi,
‫dan sebenarnya, juga template dasar dan template tur.
‫Jadi kami hanya bekerja dengan ikhtisar sekarang.
‫Dan sekarang kami memiliki satu kartu ini di sini.
‫Dan sekarang seperti yang Anda lihat, itu juga kartu yang sepenuhnya statis.
‫Jadi belum menggunakan
‫data yang kita tempel ke template, kan?
‫Jadi ia memiliki gambar statis ini, ia memiliki semua teks ini di
‫sini, dan ia tidak menggunakan variabel sama sekali.
‫Oke, karena bagian itu, saya sebenarnya
‫ingin melakukannya bersama Anda.
‫Karena sebenarnya itu adalah bagian terpenting.
‫Jadi membuat semua template
‫ini tidak sulit dan yang
‫terpenting adalah bagaimana sebenarnya mengisinya dengan data, oke?
‫Dan itulah yang akan kita lakukan selanjutnya.
‫Tapi untuk sekarang
‫mari kita lihat seperti apa tampilannya sekarang.
‫Kemudian perlu diingat bahwa kita seharusnya hanya memiliki satu
‫kartu, dan bukan sembilan, oke?
‫Karena sekali lagi, kami hanya memiliki satu elemen kartu statis
‫saat ini.
‫Muat ulang ini, dan itu sepertinya tidak benar.
‫Jadi, mari kita coba mencari tahu apa yang terjadi di sini.
‫Jadi kami memiliki elemen utama kami seperti
‫yang kami buat, kemudian kami memiliki wadah kartu kami juga.
‫Tapi kemudian untuk beberapa
‫alasan, ada yang utama di sana lagi.
‫Umm ah oke, tentu saja saya harus menghapus elemen html
‫asli yang kita miliki di sana.
‫Jadi, mari kita coba lagi.
‫Dan sekarang, sekarang itu terlihat lebih baik, oke?
‫Sekarang gambar di sini
‫masih hilang tetapi tidak apa-apa untuk saat ini.
‫Yang penting kita
‫punya kartu yang terlihat bagus ini, oke?
‫Nah, masalahnya tentu kita
‫ingin memiliki satu kartu untuk setiap tur, bukan?
‫Jadi pada dasarnya, apa yang
‫ingin kita lakukan sekarang adalah mengulang array tour
‫yang kita tempelkan ke dalam template, bukan?
‫Jadi, pada dasarnya variabel wisata ini.
‫Dan perlu diingat, bahwa ini
‫adalah array karena berisi beberapa dokumen tur di dalamnya.
‫Jadi sekarang mari kita ulangi
‫array ini dan buat satu kartu untuk setiap dokumen tur, oke?
‫Dan untungnya, itu sangat mudah dilakukan
‫di pug karena pada dasarnya pug dilengkapi dengan loop bawaan, oke?
‫Jadi sekarang
‫kita bisa melakukan setiap tur dalam tur, oke?
‫Jadi tur di sini adalah variabel yang kita tempel dan
‫kemudian di setiap
‫iterasi variabel saat ini akan disebut tur.
‫Kita bisa menyebutnya x atau x y z atau apa
‫pun, tetapi masuk akal untuk menyebutnya tur, oke?
‫Jadi di setiap iterasi apa yang datang kemudian di
‫sana adalah apa yang akan dicetak pada dasarnya.
‫Jadi ini lagi perlu indentasi satu tingkat lagi.
‫Jadi pada dasarnya itu ada
‫di dalam deklarasi loop ini di sini.
‫Bagus, jadi mari kita lihat bagaimana tampilannya sekarang.
‫Jadi sekarang kita harus mendapatkan sembilan kartu yang identik.
‫Dan memang, itulah yang terjadi, oke?
‫Nah tentunya
‫data disini masih belum dibuat secara dinamis.
‫Dan itulah sebenarnya yang akan kami
‫perbaiki di video berikutnya.