‫-: Di video ini dan
‫video berikutnya, bersama-sama kita akan membuat halaman detail tur.
‫Dan di
‫sepanjang jalan Anda akan mempelajari beberapa teknik
‫Pug lagi seperti conditional dan mixin.
‫Dan seperti yang
‫saya tunjukkan sebelumnya, seperti inilah tampilan halaman detail tur.
‫Dan itulah yang akan kita buat dalam
‫video ini dan video berikutnya.
‫Sekarang satu-satunya hal yang
‫akan kita tinggalkan
‫sebentar lagi sebenarnya adalah peta ini.
‫Baiklah, tapi segala sesuatu
‫yang lain akan kita bangun dalam kuliah alat ini.
‫Termasuk ulasan ini.
‫Baiklah.
‫Jadi sekarang kami memiliki ikhtisar kami dan
‫tentu saja kami
‫memiliki tombol-tombol ini dengan URL yang sudah dibuat.
‫Tetapi kemudian ketika kami mencoba mengakses halaman ini, kami
‫tentu saja mendapatkan kesalahan ini.
‫Baiklah.
‫Jadi mari kembali ke kode VS kita
‫dan saya sebenarnya ingin memulai ini
‫dengan tantangan kecil untuk Anda.
‫Jadi yang saya
‫ingin Anda lakukan adalah membuat rute untuk halaman
‫detail sesuai dengan URL yang baru saja kita buat sebelumnya.
‫Dan itu akan
‫mirip dengan apa yang sudah kita
‫miliki di sini tetapi Anda harus mengubahnya sedikit.
‫Oke.
‫Cukup itu,
‫saya juga ingin Anda membangun pengontrol ini.
‫Jadi dapatkan untuk itu.
‫Karena saat ini kita hanya
‫memiliki tempat seperti ini.
‫Jadi izinkan saya memberi Anda langkah-langkahnya di sini.
‫Dan seperti biasa,
‫pertama,
‫kita perlu mendapatkan datanya.
‫Kali ini untuk tur yang diminta.
‫Dan untuk itu,
‫perlu diingat bahwa kita sebenarnya membutuhkan ulasan di
‫sini dan juga pemandu wisata.
‫Oke.
‫Jadi, sekali
‫lagi mari kita lihat itu.
‫Jadi kami memiliki pemandu wisata ini di sini.
‫Benar, dan pada dasarnya mereka adalah kumpulan data yang terpisah.
‫Jadi pengguna.
‫Dan kemudian di sini kami juga memiliki ulasan.
‫Sekarang pemandu wisata ini
‫di sini, saya yakin mereka sebenarnya secara otomatis diisi
‫dalam sebuah model.
‫Jadi mari kita lihat itu dengan sangat cepat.
‫Jadi model
‫tur dan sebagainya,
‫ya.
‫Jadi
‫di sini, kami memiliki
‫pengisian otomatis ini setiap kali ada permintaan
‫pencarian tetapi hanya untuk panduan.
‫Dan jadi jangan lupa juga
‫mengisi ulasan.
‫Oke.
‫Kemudian setelah
‫itu, kita akan membuat
‫template tetapi itu akan kita lakukan bersama-sama, jadi saya
‫tidak perlu Anda melakukan bagian ini.
‫Dan akhirnya, saya
‫ingin Anda menyelesaikan bagian ini di sini juga.
‫Jadi
‫render template menggunakan data dari
‫langkah pertama lagi.
‫Baiklah.
‫Jadi itu sangat sederhana juga.
‫Jadi yang saya
‫ingin Anda lakukan adalah membuat rute
‫dan kemudian juga mendapatkan datanya.
‫Oke jadi jeda video di sini dan semoga berhasil.
‫Jadi saya harap Anda melakukannya
‫dan beri tahu saya, selesaikan di sini untuk Anda.
‫Dan kita akan mulai dengan rutenya.
‫Dan sekarang yang perlu kita tambahkan di sini hanyalah siput ini.
‫Dan tentu saja, kami melakukannya sebagai parameter URL.
‫Jadi seperti ini, menyebutnya siput.
‫Jadi sebelum kita menggunakan ID kan?
‫Jadi kami memilikinya
‫seperti ini dan sekarang sebut saja siput.
‫Baiklah.
‫Karena sekali
‫lagi, seperti itulah tampilan halaman ikhtisar.
‫Kami memiliki tur slash slug pada dasarnya.
‫Oke, dan itulah yang kemudian
‫akan kita gunakan untuk membuat tur di controller.
‫Jadi mari kita lakukan itu sekarang di sini.
‫Jadi const, tour
‫sama menunggu tour dan
‫findone.
‫Jadi kali ini kita tidak bisa menggunakan find by ID.
‫Nah karena, kita tidak
‫tahu ID dari tur tersebut.
‫Dan
‫sebagai gantinya, kami mencari dengan siput.
‫Dan siput
‫itu seperti yang saya
‫harap Anda tahu permintaannya. params
‫dot siput baik-baik saja.
‫Dan sekarang akhirnya, itu saja untuk
‫mengisi bidang array.
‫Baiklah.
‫Jadi jalur untuk mengisi adalah ulasan.
‫Dan sebenarnya kita tidak membutuhkan semua bidang di sini.
‫Jadi mari kita tentukan saja yang kita butuhkan.
‫Jadi, itu
‫hanya
‫review, rating, dan pengguna.
‫Karena
‫ingat yang sebenarnya kita
‫tampilkan jadi nama pengguna dan foto pengguna.
‫Dan tentu
‫saja, ulasan itu sendiri dan peringkatnya.
‫Oke.
‫Kemudian tentu
‫saja, itu mengeluh bahwa kami tidak menggunakan async.
‫Dan tentu saja aku tidak akan melupakan itu.
‫Tapi bagaimanapun ada
‫baiknya ES Line memperingatkan kita tentang kesalahan semacam ini.
‫Ini benar-benar menghilangkan banyak bug
‫dari pengembangan.
‫Oke.
‫Dan kemudian
‫di sini tentu saja kita akan meneruskan
‫variabel tur itu ke dalam template tur kita.
‫Jadi yang itu.
‫Berikan simpanan.
‫Tidak ada lagi kesalahan.
‫Dan bagian itu sebenarnya sekarang lengkap.
‫Jadi yang perlu
‫kita lakukan sekarang adalah melanjutkan dan membangun template kita.
‫Oke.
‫Jadi, kita
‫sudah harus memilikinya di sini.
‫Dan itulah data dev.
‫Jadi kami memiliki
‫banyak folder dan banyak data.
‫Dan itu bisa menjadi sedikit
‫membingungkan di beberapa titik.
‫Oke.
‫Jadi,
‫mari singkirkan konten placeholder ini di sini.
‫Dan sebelum kita melakukan
‫hal lain, mari kita lihat lagi file HTML aslinya.
‫Yang ada di folder
‫publik yang baru saja saya tutup.
‫Mari kita tutup semua ini di sini, karena
‫menurut saya ini sangat membingungkan.
‫Oke, model juga.
‫Jadi sekarang yang kita butuhkan adalah publik dan
‫kemudian tur. html.
‫Jadi header yang sudah kita miliki tentunya.
‫Dan kemudian di sini pergi semua konten.
‫Jadi,
‫semua bagian yang
‫kami miliki di halaman
‫ini tentu saja diterjemahkan di sini sebagai HTML.
‫Dan seperti
‫sebelumnya, saya sebenarnya sudah
‫membuat template Pug berdasarkan semua kode HTML ini.
‫Baiklah, kami tidak ingin menerjemahkan
‫ini secara manual bersama-sama.
‫Oke.
‫Jadi saya sudah memilikinya di sini di file template ini.
‫Tapi tentu
‫saja, sekali lagi, jika Anda
‫mau, Anda bisa menjeda
‫video sekarang dan menerjemahkannya sendiri juga.
‫Baiklah.
‫Tapi apa yang akan saya lakukan sekarang adalah
‫melanjutkan dan menyalin semua kode ini.
‫Yang masih banyak kode seperti yang Anda lihat.
‫Jadi mari salin semua ini dan masuk ke tur kami
‫dan tempel di sini.
‫Sekarang anotasi akan salah lagi.
‫Jadi mari kita salin, atau pilih yang baru saja kita tempel di sini.
‫Jadi semuanya kecuali baris pertama salah.
‫Tapi yang perlu kita lakukan di sini adalah menambahkan satu tab lagi.
‫Dan itu saja.
‫Jadi sekarang mereka semua berada di dalam blok konten ini pada
‫level yang sama.
‫Jadi bagian dan
‫bagian dan
‫pada dasarnya semua bagian sekarang berada
‫di level yang
‫sama, jadi mereka semua bersaudara.
‫Besar.
‫Jadi mari kita tutup semua ini yang
‫tidak lagi kita butuhkan.
‫Dan seperti sebelumnya,
‫kami sekarang memiliki halaman statis ini di
‫sini dengan semua data statis ini.
‫Yang kami tahu harus kami ganti.
‫Tetapi sebelum benar-benar melakukannya,
‫mari kita lihat apakah rute kita
‫sudah berfungsi.
‫Oke.
‫Jadi mari kita muat ulang
‫dan itu memberi kita kesalahan yang sama.
‫Dan saya rasa
‫itu karena di sini
‫kami memiliki tur dan bukan tur karena
‫saya pikir kami memilikinya di rute kami.
‫Benar jadi di sini kita memiliki tur.
‫Dan itu sebenarnya adalah cara yang masuk akal.
‫Jadi mari kita lanjutkan dan ubah itu di sini di
‫ikhtisar kami.
‫Oke dan jadi
‫di sini kami benar-benar ingin tur.
‫Karena sebenarnya,
‫kami sebenarnya hanya melihat satu tur
‫dan bukan beberapa tur.
‫Benar?
‫Jadi jika kita kembali ke ikhtisar
‫sekarang, kita memuatnya, dan sekarang membuka
‫The Forest Hiker, maka
‫Anda melihat bahwa itu akan menjadi tur.
‫Dan
‫tentu saja, kita mendapatkan HTML
‫untuk halaman yang baru saja kita buat.
‫Sekarang untuk beberapa alasan CSS tidak ada di sini.
‫Mari kita coba memuat ulang ini.
‫Nah, apa yang terjadi di sini?
‫Mari kita coba periksa ini.
‫Dan saya melihat kami memiliki beberapa kesalahan.
‫Jadi kita bisa klik itu.
‫Dan alasan CSS hilang, karena
‫malah mencoba memuat file di tempat
‫yang salah.
‫Jadi ia mencoba memuatnya di folder CSS di
‫dalam tur.
‫Tapi itu tentu saja tidak ada.
‫Dan itu karena
‫kita ada di sini di rute wisata ini, oke.
‫Jadi pada dasarnya kita
‫perlu memperbaiki cara kita mengimpor CSS di template dasar kita.
‫Ayo pergi kesana.
‫Dan di
‫sini sebenarnya, kita harus memiliki garis miring lagi.
‫Oke, dan sama sebenarnya di sini.
‫Dan itu
‫untuk alasan yang sama
‫persis seperti yang saya jelaskan kepada Anda sebelumnya dalam ikhtisar di sini.
‫Jadi kami memulai URL ini juga dengan garis miring.
‫Dan sekali lagi, itu akan dimulai
‫dari akar halaman.
‫Dan begitulah seharusnya bekerja.
‫Dan faktanya, hal yang sama berlaku untuk semua gambar di sini.
‫Jadi semua gambar juga
‫harus selalu dimulai relatif terhadap URL root.
‫Jadi mari kita tambahkan dengan sangat cepat di sini ke semua gambar ini.
‫Dan,
‫ya, itu saja.
‫Jadi itu semua dari mereka.
‫Jadi,
‫dengan itu kami telah
‫memperbaiki ikhtisar dan juga file dasar ini.
‫Jadi jika sekarang kita
‫memuat ulang, kita seharusnya mendapatkan akses ke CSS yang benar.
‫Dan memang, ini dia.
‫Hanya ada satu kesalahan lagi
‫yang ada di sini di gambar ini.
‫Dan
‫sekali lagi, itu karena mencoba
‫memuatnya di sini dari
‫tur dan bukan dari URL root.
‫Jadi, masalah
‫itu ada di sini di header.
‫Dan tentu
‫saja, di sini kita juga
‫perlu membuatnya relatif terhadap jalur root.
‫Mungkin sama di footer.
‫Dan ya.
‫Baiklah.
‫Hanya untuk mengkonfirmasi itu dengan cepat, ya
‫memang, ini dia.
‫Besar.
‫Jadi seperti yang saya
‫sebutkan tentu saja, ini memiliki semua
‫data statis tentang The Park Camper Tour yang
‫merupakan salah satu yang kami miliki di template.
‫Tapi kita melihat pejalan kaki hutan.
‫Jadi, sekarang mari kita mulai dengan memperbaiki template kita
‫dan pada dasarnya menggunakan data dinamis di sini.
‫Jadi, ingat bahwa variabel yang kita lewati di
‫sini disebut tour.
‫Benar?
‫Jadi ini disebut
‫tur dan itulah yang kami sebut di sini.
‫Jadi tur. nama, dan
‫juga sama di sini.
‫Dan sekarang Anda sudah tahu bahwa kita
‫perlu menggunakan string
‫template di sini karena kita sebenarnya ingin membuat string.
‫Jadi bernama. wisata.
‫Dan di sini jalan ini juga tidak benar.
‫Pertama-tama perlu string template dan kemudian
‫gambar kita, saya akan menulis
‫gambar slash
‫wisata slash nama gambar sampul.
‫Jadi titik tur, dan sekarang
‫saya tidak
‫ingat apakah itu gambar sampul, atau gambar sampul.
‫Jadi, ya.
‫Gambar sampul.
‫Oke.
‫Jadi mari kita cepat mencobanya.
‫Dan ingat, kita berada di The First Hiker.
‫Dan jadi itu sekarang harus namanya.
‫Dan kesalahan lain.
‫Jadi, dikatakan di sini, tidak dapat membaca tur
‫properti yang tidak ditentukan.
‫Jadi mari kita kembali dan
‫ya.
‫Jadi inilah kesalahan bodoh ini.
‫Jadi tentu saja tur. nama dan bukan nama.
‫wisata.
‫Jadi, apa yang saya pikirkan
‫di sana?
‫Mari kita muat ulang ini dan
‫sekarang memang, kita
‫mendapatkan The Forest Hiker dengan gambar sampul yang sangat bagus di latar belakang.
‫Besar.
‫Dan mari kita terus bergerak di sini.
‫Jadi buat string template lain.
‫Wisata.
‫Durasi, dan
‫kemudian jumlah hari.
‫Kemudian di bawah sini, kami memiliki lagi
‫lokasi awal.
‫Jadi, tur.
‫mulai lokasi. deskripsi, ingat.
‫Baiklah.
‫Sekarang di sini kita
‫memiliki kotak ikhtisar ini di sini.
‫Jadi ikhtisar detail kotak.
‫Dan seperti yang Anda lihat, kami
‫memiliki empat
‫kotak yang sama di sini di mana satu-satunya
‫yang berubah adalah nama ikon
‫ini, lalu tanggal dan tanggal berikutnya.
‫Oke, jadi di sini yang berubah bukan
‫tanggal
‫berikutnya, yang berubah adalah deskripsi kotak.
‫Jadi tanggal berikutnya,
‫kesulitan, peserta dan peringkat.
‫Baiklah.
‫Jadi pada
‫dasarnya, kode ini di
‫sini selalu sama hanya dengan tiga bagian yang berubah.
‫Jadi nama ikon, deskripsi dan
‫nilai deskripsi itu.
‫Jadi, karena kita tidak suka kode yang diulang-ulang,
‫kan?
‫Mari kita gunakan fitur lain dari Pug
‫yang belum kita gunakan yang
‫disebut mixin.
‫Jadi mixin pada dasarnya adalah
‫potongan kode yang dapat digunakan kembali tempat kita dapat meneruskan argumen.
‫Jadi agak mirip fungsi.
‫Dan juga persis seperti mixin di SAS.
‫Jadi itulah pra-prosesor CSS yang mungkin
‫sudah Anda kenal.
‫Jadi mari kita salin kode ini di sini untuk kotak ikhtisar ini.
‫Jadi menyalinnya.
‫Dan sekarang di
‫sini, dari blok ini, mari kita buat mixin baru.
‫Jadi kami menulis mixin dan
‫kemudian nama mixin, yang saya sebut kotak ikhtisar.
‫Dan kemudian sedikit seperti
‫fungsi, kita dapat menentukan beberapa argumen.
‫Jadi ingat bagaimana kita
‫memiliki deskripsi kotak, lalu kita memiliki nilai deskripsi itu dan
‫sebut saja teks di sini.
‫Dan kemudian juga, nama ikon.
‫Oke.
‫Jadi sekarang, mari salin
‫teks itu di sini dan tentu saja ini sekarang
‫mengacaukan pemformatan kita.
‫Ayo cepat perbaiki itu.
‫Dan sekarang, variabel-variabel ini di sini, mereka
‫benar-benar berfungsi
‫seperti semua variabel lain di Pug.
‫Jadi, di sini sekarang ini harus menjadi
‫teks.
‫Benar?
‫Dan ini di sini harus menjadi deskripsi.
‫Jadi deskripsi yang sama.
‫Nah di sini sebenarnya disebut label di CSS.
‫Jadi sebut saja label di sini juga.
‫Oke jadi label, teks dan ikon.
‫Jadi di sini kita juga perlu mengubah nama
‫ikon itu dan semua nama ikon ini selalu dimulai dengan
‫tanda hubung ikon.
‫Jadi yang benar-benar perlu kita
‫ganti hanyalah bagian ini.
‫Jadi mari kita buat lagi string template.
‫Dan kemudian singkirkan ini.
‫Dan ikon.
‫Oke dan sekarang kita bisa menggunakan ini.
‫Saya juga ingin mengatakan bahwa kami
‫juga dapat mengekspor
‫mixin ini ke file lain dan kemudian menyertakan file itu di sini.
‫Tapi saya pikir ini tidak masuk akal.
‫Dalam hal ini
‫karena sebenarnya tidak banyak kode.
‫Bagaimanapun, sekarang mari kita lanjutkan dan gunakan
‫mixin ini.
‫Jadi izinkan saya menyalin namanya saja.
‫Jadi di sini alih-alih kotak ikhtisar ini.
‫Dan untuk saat ini biarkan saya benar-benar hanya menduplikasinya di sini.
‫Oke, jadi kami menggunakan mixin ini
‫dengan menulis plus lalu seperti
‫fungsi biasa, kami memasukkan
‫argumen kosong ke dalamnya.
‫Jadi kotak ikhtisar pertama kami adalah tanggal berikutnya.
‫Kemudian untuk saat ini, hanya tanggal yang ada di sini.
‫Jadi saya hanya dapat menunjukkan kepada Anda bahwa itu benar-benar berfungsi.
‫Jadi 20 Agustus
‫21.
‫Dan kemudian
‫di sini, kalender.
‫Oke karena itulah nama ikon di sini.
‫Jadi sekarang kita harus
‫mendapatkan dua kotak.
‫Jadi yang ini dan
‫yang ini yang seharusnya terlihat persis sama.
‫Jadi mari kita cepat mengkonfirmasi itu.
‫Dan kemudian kita dapat melanjutkan untuk
‫benar-benar menggunakan mixin dengan benar.
‫Dan ya, jadi inilah dua kotak kami
‫yang persis sama.
‫Besar.
‫Jadi mari kita singkirkan yang pertama ini.
‫Dan tentu saja di sini kita menginginkan
‫kencan yang sebenarnya.
‫Oke.
‫Dan
‫begitulah, tambahkan tur. mulai, tanggal, nol.
‫Jadi mari kita lihat itu.
‫Dan ingat,
‫ini akan terlihat agak aneh.
‫Seperti yang dilakukan sebelumnya.
‫Oke.
‫Jadi mari kita maju dan memperbaikinya.
‫Jadi mari kita ambil itu dari sini.
‫Jadi yang kita butuhkan pada
‫dasarnya adalah ini.
‫Sekarang saya tidak
‫ingin membuat baris ini terlalu panjang
‫hanya dengan menempelkannya di sini.
‫Jadi mengapa
‫tidak membuat variabel skrip java baru untuk itu.
‫Jadi ingat kita perlu menggunakan sintaks ini
‫di sini untuk membuat kode
‫skrip java yang tidak akan menghasilkan output apa pun.
‫Dan sekali lagi kita
‫cukup menulis skrip java di sini.
‫Oke.
‫Dan sekarang di sini saya hanya akan menggunakan
‫tanggal itu.
‫Besar.
‫Dan sekarang mari kita gandakan ini di sini beberapa kali untuk
‫semua kotak yang kita miliki.
‫Jadi yang pertama adalah untuk kesulitan.
‫Dan ikonnya sedang tren.
‫Kemudian yang berikutnya adalah untuk peserta.
‫Dengan ikon pengguna.
‫Dan yang terakhir adalah penilaian.
‫Dan ikonnya adalah bintang.
‫Jadi di sini kami memiliki tanggal tetapi, di sini dalam
‫kesulitan kami sebenarnya memiliki tur. kesulitan.
‫Kemudian di sini untuk
‫para peserta kami menginginkan string ini.
‫Seperti 10 orang.
‫Jadi string
‫template mengatakan tur. campuran,
‫ukuran kelompok, dan kemudian orang.
‫Dan akhirnya kami ingin peringkat dan
‫kemudian dari lima.
‫Jadi tur,
‫dan saya tidak pernah
‫ingat apa yang saya sebut bidang ini.
‫Dan itu adalah peringkat rata-rata.
‫Baiklah.
‫Dan kemudian, dari
‫lima.
‫Oke.
‫Dan itu seharusnya.
‫Sekarang kita bisa menyingkirkan semua kode ini.
‫Dan cara ini terlihat jauh lebih bagus.
‫Dan
‫hanya untuk memastikan
‫itu berhasil, mari kita simpan
‫di sini, muat ulang, dan memang, kita mendapatkan
‫mudah, 25 orang, dan peringkat
‫lima dari lima.
‫Luar biasa.
‫Jadi kita sudah membahas
‫banyak hal, tapi mari kita bagi video ini menjadi dua dan
‫lanjutkan dengan sisa halaman di
‫halaman berikutnya.