‫Instruktur: Sekarang mari kita isi setiap
‫elemen kartu dengan data yang benar untuk setiap tur.
‫Jadi, hanya sebagai rekap cepat.
‫Dalam video terakhir kami mulai dengan membuat elemen utama ini
‫dan di dalam elemen penampung div kemudian di dalam
‫penampung itu kami
‫menginginkan salah satu elemen kartu ini
‫untuk setiap tur yang datang dalam larik yang
‫kami berikan ke templat ini.
‫Dan untuk itu kita menggunakan array Pug yang
‫bekerja seperti ini.
‫Jadi, apa setiap kata kunci
‫di sini dan hasil dari melakukannya terlihat seperti ini, oke.
‫Jadi yang akan kita lakukan
‫sekarang adalah mengisi setiap kartu ini dengan data sebenarnya.
‫Dan mari kita mulai di sini dengan nama tur.
‫Jadi, ingat bagaimana kita menempatkan nilai variabel di
‫dalam satu elemen.
‫Nah, kita menggunakan equal dan kemudian dalam hal ini tour.
‫Jadi, nama
‫variabel dalam iterasi loop saat ini, benar.
‫Dan itu adalah dokumen tur dan kemudian nama titik, ingat.
‫Jadi, mari kita periksa di kompas dengan sangat cepat.
‫Jadi, di sini kami
‫memiliki empat tur
‫dan ini semua data yang akan kami perlukan sekarang, oke.
‫Dan dimulai dengan nama di sini, oke.
‫Jadi jika kita sekarang memuat ulang halaman kita, itu seharusnya
‫benar-benar tercermin di sini.
‫Dan di sinilah keajaiban dimulai dan berhasil.
‫Jadi ini adalah pertama kalinya kami
‫benar-benar melihat data dari database benar-benar ditampilkan
‫di situs web.
‫Jadi, di sini kami memiliki nama tur untuk
‫setiap tur dan lagi yang sekarang keluar dari database kami.
‫Jadi, fantastis itu sangat keren
‫dan sekarang mari kita lanjutkan membuat kartu ini.
‫Jadi, di sini tentang gambar sekarang.
‫Mari kita juga menempatkan teks alternatif untuk nama tur.
‫Sekarang kita tidak bisa begitu saja meletakkan nama titik tur di
‫sini karena kita berada di dalam
‫string dan itu tidak berfungsi.
‫Sekarang pada
‫saat yang sama jika
‫kita melakukannya seperti ini juga tidak akan berhasil karena di
‫sini Alt ini sebenarnya mengharapkan string, oke.
‫Jadi kita perlu beberapa kutipan di sini di sekitar variabel ini.
‫Dan cara termudah untuk melakukannya
‫adalah dengan benar-benar menggunakan string template ES6, oke.
‫Jadi, seperti ini dan lagi itu
‫karena ini sebenarnya di sini mengharapkan string masuk
‫dan dengan ini tentu saja kita membuat string.
‫Selanjutnya mari kita tentukan gambar di sini, oke.
‫Jadi, mari kita lihat kompas
‫lagi untuk melihat seperti apa gambar sampul itu.
‫Jadi kami memiliki properti yang disebut sampul gambar
‫dan kemudian di sini kami hanya memiliki nama gambar itu sendiri.
‫Jadi, bukan jalan menuju gambar. = dan
‫agar kita benar-benar harus menentukan secara manual, oke.
‫Jadi, yang penting di sini adalah yang
‫disebut sampul gambar.
‫Jadi mari kita singkirkan semua ini.
‫Mulailah dengan membuat string template dan
‫kemudian tur sampul gambar titik dan sekarang kita perlu
‫mencari tahu
‫seluruh jalur ke gambar itu, oke.
‫Dan seperti yang sudah kita ketahui, data gambar
‫ada di dalam folder publik.
‫Jadi, folder tempat semua aset statis
‫akan disajikan dan
‫di sini kita memiliki gambar.
‫Dan kemudian kami memiliki folder.
‫Satu untuk tur dan satu untuk pengguna, oke.
‫Jadi di dalam setiap tur
‫ini kami memiliki tiga foto dan satu foto sampul.
‫Jadi, itu akan terlihat seperti ini.
‫Dan jadi jalur di sini adalah image dot tour atau
‫slash tour lalu slash nama gambarnya, bagus.
‫Jadi itu seharusnya membuat seluruh
‫situs web terlihat lebih baik sekarang ya.
‫Sekarang itu benar-benar mulai hidup.
‫Jadi, itu fantastis.
‫Ini membuat saya merasa sangat hebat
‫setiap kali itu berhasil.
‫Bagaimanapun, sekarang mari kita urus sisa data
‫yang tentu saja
‫masih terlihat sama di semua kartu ini, oke.
‫Jadi sekarang mari kita gunakan data dalam koleksi kita
‫untuk membangun string ini di sini.
‫Jadi, Anda melihat bahwa ini sebenarnya adalah
‫kombinasi dari data yang berbeda.
‫Jadi, kita memiliki kesulitan dan durasi tur dan
‫sekarang mari kita buat string template.
‫Jadi, pada dasarnya tetapkan string template ini ke elemen ini.
‫Jadi kita mulai di sini dengan tingkat kesulitan
‫tour dot, ingat, lalu space dan durasi tour,
‫tour dot durasi day tour, oke.
‫Jadi, itulah terjemahan dari konten ini.
‫Kemudian selanjutnya yang kami miliki di sini adalah ringkasan tur, oke.
‫Jadi, ringkasan titik tur yang sama, oke.
‫Kemudian selanjutnya kita memiliki lokasi awal dan jadi tur
‫ini misalnya dimulai di
‫Banff Canada dan sekali lagi mari kita
‫lihat kompas di sini hanya
‫untuk melihat seperti apa datanya
‫atau sebenarnya kita tidak perlu selalu
‫bolak-balik untuk kompas.
‫Kita juga bisa membuka atau atau mengimpor data di sini.
‫Jadi, dalam tur kita cukup menggunakan data ini di
‫sini daripada selalu pergi ke kompas.
‫Jadi, sebelum kita menggunakan ringkasan sekarang
‫mari kita lanjutkan dan gunakan lokasi awal yang sebenarnya
‫ada di atas sini.
‫Jadi, sekarang kami ingin memulai deskripsi titik lokasi, oke.
‫Jadi, tur dot start lokasi dot description.
‫Jadi sekarang Anda
‫mulai melihat mengapa masuk akal untuk benar-benar
‫membuat semua data berbeda yang kami buat di sini.
‫Benar, selanjutnya kita akan menggunakan untuk memulai kencan
‫dan perlu diingat.
‫Bahwa ini adalah sebuah array, oke.
‫Karena sekarang yang kami inginkan dalam tinjauan
‫kami pada dasarnya adalah tanggal di mana tur berikutnya dimulai.
‫Nah, itulah yang dimaksud dengan ikon dengan kalender
‫dalam hal ini.
‫Jadi, pada dasarnya
‫itu adalah elemen pertama dari array tanggal mulai.
‫Jadi, mulai tanggal di posisi 0.
‫Selanjutnya kami memiliki data yang mengatakan berapa banyak pemberhentian yang
‫ada di tur ini.
‫Jadi pada dasarnya
‫itu berarti berapa banyak lokasi yang
‫kita miliki dan sekali lagi kita akan menggunakan lokasi
‫dan kali ini tidak memulai
‫lokasi tetapi benar-benar lokasi ini dan jadi
‫jika Anda ingin menentukan berapa banyak lokasi yang kita miliki.
‫Kalau begitu kita perlu menghitung panjang array ini, oke.
‫Dan sesederhana itu juga.
‫Jadi, samakan dan atur ke
‫string templat ini karena
‫kami juga ingin menambahkan perhentian ini dan lokasi titik tur
‫panjang titik perhentian dan akhirnya jumlah
‫orang yang menjadi bagian dari masing-masing grup.
‫Jadi, orang-orang yang dapat berpartisipasi dalam satu tur
‫dan itu disimpan
‫di tur tetapi ukuran grup maksimal, ingat.
‫Dan kemudian orang.
‫Bagus, jadi bagian itu sudah selesai sekarang
‫dan jadi mari kita kembali ke situs web kita
‫dan mengujinya.
‫Dan ya cantik setidaknya hampir cantik karena kencan ini
‫terlihat agak aneh di sini.
‫Jadi, kami benar-benar hanya ingin tanggal dua puluh satu Juni jadi kami tidak
‫perlu terlalu spesifik di
‫sini dalam ikhtisar ini, oke.
‫Jadi yang kita inginkan adalah terlihat seperti lagi Juni 2021 dan
‫sekarang semuanya berantakan dan jadi mari kita perbaiki
‫itu dan untungnya
‫itu sebenarnya sangat mudah dengan
‫JavaScript yang mencakup beberapa fungsi yang
‫sangat bagus untuk bekerja dengan tanggal.
‫Dan perlu diingat bahwa setiap tanggal mulai
‫di sini benar-benar adalah
‫objek tanggal atau database dan sekarang
‫kita dapat menggunakan fungsi seperti ini untuk string lokal, oke.
‫Jadi, pada dasarnya ini akan mengubah tanggal ini
‫menjadi string yang dapat dibaca
‫dan di sini kita sekarang dapat memberikan opsi untuk bahasa tersebut.
‫Dan itu adalah bahasa Inggris untuk AS
‫dan kemudian juga sebuah objek dengan beberapa opsi dan jadi
‫di sini kita sekarang dapat menentukan bahwa kita ingin
‫satu bulan menjadi panjang.
‫Jadi, bukan hanya singkatan seperti yang kami miliki
‫di sini.
‫jadi, satu April, satu
‫Agustus sekarang akan mencetaknya seperti ini.
‫Jadi, benar-benar nama seluruh bulan dan oke dan kemudian
‫juga mengatakan bahwa tahun harus numerik dan jika Anda ingin mempelajari
‫lebih lanjut tentang fungsi
‫ini di sini, silakan saja dan Google itu, oke.
‫Jadi, mari kita coba
‫lagi dan sekarang terlihat sangat bagus, mengagumkan.
‫Jadi, mari kita lanjutkan dan selesaikan bagian terakhir ini di
‫sini dengan detail harga dan peringkat.
‫Dan itu di bawah ini di footer kartu dan
‫jadi di sini itu hanya harganya.
‫Jadi, sama dengan membiarkannya begitu saja karena sekarang kita
‫masih membutuhkan string template karena
‫harganya bukan hanya angka ini tetapi sebenarnya kita membutuhkan
‫tanda dolar tambahan di sini untuk
‫harga dolar.
‫Jadi, yang ini, benar.
‫Selanjutnya kami memiliki peringkat rata-rata di sini.
‫Jadi, ini dia dan kita
‫sudah tahu bahwa ini disebut rating rata-rata titik tur.
‫Jadi, kami menggunakannya berkali-kali setidaknya saya percaya.
‫Mari kita konfirmasi jadi sebenarnya itu peringkat rata-rata dan
‫kemudian juga peringkat kuantitas.
‫Jadi, mari kita salin ini.
‫Jadi, peringkat rata-rata dan
‫sekarang di sini kami ingin kuantitas peringkat.
‫Baiklah, tapi tentu saja ini perlu string
‫template dan kemudian di
‫sini atur menjadi sama dan kemudian tentu saja interpolasi nama variabel
‫di sini dan sekarang akhirnya kita perlu
‫membangun URL ke halaman detail, oke.
‫Jadi, ingat bahwa ketika kita mengklik salah satu kartu.
‫Itu kemudian membawa kita ke halaman
‫detail dan tentu saja di sini kita sekarang perlu menentukan
‫tautan itu karena tentu saja itu akan tergantung pada setiap tur.
‫Jadi, kami ingin menautkan menjadi tur slash dan kemudian
‫ingat bagaimana saya sebutkan sebelumnya bahwa
‫untuk merender halaman ini, kami sebenarnya ingin
‫menanyakan tur dengan slug mereka dan
‫bukan dengan ID mereka.
‫Bagaimana kami melakukannya di API
‫oke, karena itu sebenarnya membuat URL terlihat jauh lebih bagus, oke.
‫Jadi mari kita gunakan itu di sini sekarang.
‫Jadi tur dot slug dan hanya untuk menjelaskan mengapa
‫kami memulai URL
‫ini di sini dengan garis miring.
‫Itu karena membangun URL seperti ini, jadi
‫memulai hanya dengan garis miring disebut URL relatif dan
‫apa yang
‫akan dilakukan adalah menambahkan bagian URL ini
‫setelah nama host.
‫Jadi, host itu sekarang satu sampai tujuh koma nol nol satu tapi itu tidak
‫perlu disebutkan di sini karena sekali
‫lagi ketika menulis URL relatif seperti ini, ia akan menambahkan
‫apa yang kita miliki di sini ke nama host itu, oke.
‫Jadi, mari kita muat ulang lagi dan kita
‫hampir selesai di sini belum
‫cukup siap.
‫Jadi, di sini Anda melihat tidak
‫terdefinisi dan jadi kami mungkin melakukan kesalahan di sana.
‫Dan Anda juga melihat bahwa tidak ada jarak
‫di sini antara harga dan
‫per orang dan juga di sini sama sekarang.
‫Jika Anda mengarahkan tombol ini ke
‫sini lalu ke bawah sana di sudut kiri.
‫Jadi, di sini Anda akan melihat URL yang baru
‫saja kita buat.
‫Benar-benar dapat mengkliknya
‫dan kemudian akan memberi kami
‫kesalahan ini karena tentu saja kami belum
‫menentukan rute ini tetapi Anda
‫melihat bahwa itu terlihat sangat bagus di sini dengan tur
‫menebas pejalan kaki hutan alih-alih memiliki ID yang terlihat jelek di sana, oke .
‫Tapi bagaimanapun, sekarang mari kita perbaiki yang tidak terdefinisi ini
‫di ruang yang hilang ini.
‫Jadi, mari kita lihat yang satu ini.
‫Yah, tampaknya benar sebenarnya peringkat, kuantitas, tetapi tentu
‫saja kami melewatkan titik tur ini, oke.
‫Anda mungkin sudah melihat yang itu.
‫Sekarang tentang ruang yang hilang itu.
‫Ada sesuatu yang baru yang perlu saya tunjukkan
‫tentang pug yang sebenarnya disebut jalur pipa
‫kosong atau jalur.
‫Jadi, setiap kali kita membutuhkan ruang
‫nyata antara dua elemen blok-sebaris yang
‫merupakan pita-pita ini, maka kita perlu membuat
‫ruang itu secara
‫manual menggunakan garis pipa ini di sini seperti ini, oke.
‫Dan hal yang sama di
‫sini karena jika tidak
‫seperti yang baru saja kita lihat,
‫itu hanya akan merekatkan semua elemen ini bersama-sama, baiklah.
‫Jadi, sekarang semua itu harus
‫diperbaiki dan ruang itu masih belum ada dan
‫itu sebenarnya karena kita melupakan sesuatu.
‫Jadi mari kita kembali
‫dan kita sebenarnya perlu menambahkan ruang
‫kosong itu secara manual di sini dan di sini.
‫Jadi, jalur pipa kosong di sini pada dasarnya,
‫menciptakan ruang bagi kita di mana kita kemudian dapat
‫membuat konten di luar
‫elemen dan pada dasarnya itulah ruang ini.
‫Jadi, ruang ini di sini yang baru saja kita taruh di sini.
‫Jadi, ruang kosong ini isinya yang tidak ada di
‫dalam salah satu dari dua elemen ini.
‫Dan sekali lagi untuk dapat melakukan itu untuk
‫itulah kita membutuhkan pipa ini.
‫Jadi, dua pipa ini.
‫Jadi, coba lagi dan sekarang
‫memang inilah ruang
‫yang baru saja kita buat, sempurna.
‫Dan dengan itu kami benar-benar menyelesaikan kuliah ini dan
‫situs web pertama yang tampak memukau ini atau
‫bagian dari situs web yang baru saja kami bangun bersama di sini.
‫Jadi, momen untuk menghargai betapa kerennya ini
‫sebenarnya dan juga bagaimana semua
‫kode yang kita tulis bersama ini benar-benar berfungsi, oke.
‫Dan kemudian setelah itu kembalilah
‫sehingga kita dapat membangun bersama-sama halaman ikhtisar tur.