1 00:00:01,130 --> 00:00:03,650 ‫Instruktur: Sekarang mari kita isi setiap 2 00:00:03,650 --> 00:00:06,583 ‫elemen kartu dengan data yang benar untuk setiap tur. 3 00:00:08,210 --> 00:00:09,870 ‫Jadi, hanya sebagai rekap cepat. 4 00:00:09,870 --> 00:00:13,690 ‫Dalam video terakhir kami mulai dengan membuat elemen utama ini 5 00:00:13,690 --> 00:00:17,220 ‫dan di dalam elemen penampung div kemudian di dalam 6 00:00:17,220 --> 00:00:19,070 ‫penampung itu kami 7 00:00:19,070 --> 00:00:21,670 ‫menginginkan salah satu elemen kartu ini 8 00:00:21,670 --> 00:00:24,740 ‫untuk setiap tur yang datang dalam larik yang 9 00:00:24,740 --> 00:00:26,850 ‫kami berikan ke templat ini. 10 00:00:26,850 --> 00:00:29,720 ‫Dan untuk itu kita menggunakan array Pug yang 11 00:00:29,720 --> 00:00:30,930 ‫bekerja seperti ini. 12 00:00:30,930 --> 00:00:33,270 ‫Jadi, apa setiap kata kunci 13 00:00:33,270 --> 00:00:37,580 ‫di sini dan hasil dari melakukannya terlihat seperti ini, oke. 14 00:00:37,580 --> 00:00:40,010 ‫Jadi yang akan kita lakukan 15 00:00:40,010 --> 00:00:43,773 ‫sekarang adalah mengisi setiap kartu ini dengan data sebenarnya. 16 00:00:45,610 --> 00:00:48,223 ‫Dan mari kita mulai di sini dengan nama tur. 17 00:00:49,940 --> 00:00:52,760 ‫Jadi, ingat bagaimana kita menempatkan nilai variabel di 18 00:00:52,760 --> 00:00:53,983 ‫dalam satu elemen. 19 00:00:55,200 --> 00:00:58,970 ‫Nah, kita menggunakan equal dan kemudian dalam hal ini tour. 20 00:00:58,970 --> 00:01:00,310 ‫Jadi, nama 21 00:01:00,310 --> 00:01:03,370 ‫variabel dalam iterasi loop saat ini, benar. 22 00:01:03,370 --> 00:01:08,270 ‫Dan itu adalah dokumen tur dan kemudian nama titik, ingat. 23 00:01:08,270 --> 00:01:11,300 ‫Jadi, mari kita periksa di kompas dengan sangat cepat. 24 00:01:11,300 --> 00:01:12,900 ‫Jadi, di sini kami 25 00:01:12,900 --> 00:01:14,283 ‫memiliki empat tur 26 00:01:14,283 --> 00:01:17,680 ‫dan ini semua data yang akan kami perlukan sekarang, oke. 27 00:01:17,680 --> 00:01:21,080 ‫Dan dimulai dengan nama di sini, oke. 28 00:01:21,080 --> 00:01:23,930 ‫Jadi jika kita sekarang memuat ulang halaman kita, itu seharusnya 29 00:01:23,930 --> 00:01:25,203 ‫benar-benar tercermin di sini. 30 00:01:26,670 --> 00:01:30,350 ‫Dan di sinilah keajaiban dimulai dan berhasil. 31 00:01:30,350 --> 00:01:32,740 ‫Jadi ini adalah pertama kalinya kami 32 00:01:32,740 --> 00:01:35,470 ‫benar-benar melihat data dari database benar-benar ditampilkan 33 00:01:35,470 --> 00:01:37,240 ‫di situs web. 34 00:01:37,240 --> 00:01:41,490 ‫Jadi, di sini kami memiliki nama tur untuk 35 00:01:41,490 --> 00:01:46,170 ‫setiap tur dan lagi yang sekarang keluar dari database kami. 36 00:01:46,170 --> 00:01:49,270 ‫Jadi, fantastis itu sangat keren 37 00:01:49,270 --> 00:01:53,240 ‫dan sekarang mari kita lanjutkan membuat kartu ini. 38 00:01:53,240 --> 00:01:55,460 ‫Jadi, di sini tentang gambar sekarang. 39 00:01:55,460 --> 00:01:59,600 ‫Mari kita juga menempatkan teks alternatif untuk nama tur. 40 00:01:59,600 --> 00:02:02,530 ‫Sekarang kita tidak bisa begitu saja meletakkan nama titik tur di 41 00:02:03,490 --> 00:02:05,190 ‫sini karena kita berada di dalam 42 00:02:05,190 --> 00:02:06,770 ‫string dan itu tidak berfungsi. 43 00:02:06,770 --> 00:02:07,730 ‫Sekarang pada 44 00:02:07,730 --> 00:02:09,570 ‫saat yang sama jika 45 00:02:09,570 --> 00:02:13,270 ‫kita melakukannya seperti ini juga tidak akan berhasil karena di 46 00:02:13,270 --> 00:02:16,220 ‫sini Alt ini sebenarnya mengharapkan string, oke. 47 00:02:16,220 --> 00:02:19,350 ‫Jadi kita perlu beberapa kutipan di sini di sekitar variabel ini. 48 00:02:19,350 --> 00:02:21,230 ‫Dan cara termudah untuk melakukannya 49 00:02:21,230 --> 00:02:24,093 ‫adalah dengan benar-benar menggunakan string template ES6, oke. 50 00:02:27,700 --> 00:02:30,840 ‫Jadi, seperti ini dan lagi itu 51 00:02:30,840 --> 00:02:34,620 ‫karena ini sebenarnya di sini mengharapkan string masuk 52 00:02:34,620 --> 00:02:38,320 ‫dan dengan ini tentu saja kita membuat string. 53 00:02:38,320 --> 00:02:42,450 ‫Selanjutnya mari kita tentukan gambar di sini, oke. 54 00:02:42,450 --> 00:02:45,720 ‫Jadi, mari kita lihat kompas 55 00:02:45,720 --> 00:02:49,827 ‫lagi untuk melihat seperti apa gambar sampul itu. 56 00:02:49,827 --> 00:02:52,550 ‫Jadi kami memiliki properti yang disebut sampul gambar 57 00:02:52,550 --> 00:02:55,960 ‫dan kemudian di sini kami hanya memiliki nama gambar itu sendiri. 58 00:02:55,960 --> 00:02:57,760 ‫Jadi, bukan jalan menuju gambar. = dan 59 00:02:57,760 --> 00:03:01,200 ‫agar kita benar-benar harus menentukan secara manual, oke. 60 00:03:01,200 --> 00:03:03,300 ‫Jadi, yang penting di sini adalah yang 61 00:03:03,300 --> 00:03:04,603 ‫disebut sampul gambar. 62 00:03:05,700 --> 00:03:07,500 ‫Jadi mari kita singkirkan semua ini. 63 00:03:08,740 --> 00:03:11,730 ‫Mulailah dengan membuat string template dan 64 00:03:11,730 --> 00:03:16,170 ‫kemudian tur sampul gambar titik dan sekarang kita perlu 65 00:03:17,160 --> 00:03:18,480 ‫mencari tahu 66 00:03:18,480 --> 00:03:21,700 ‫seluruh jalur ke gambar itu, oke. 67 00:03:21,700 --> 00:03:24,480 ‫Dan seperti yang sudah kita ketahui, data gambar 68 00:03:24,480 --> 00:03:26,430 ‫ada di dalam folder publik. 69 00:03:26,430 --> 00:03:28,820 ‫Jadi, folder tempat semua aset statis 70 00:03:28,820 --> 00:03:30,400 ‫akan disajikan dan 71 00:03:30,400 --> 00:03:32,790 ‫di sini kita memiliki gambar. 72 00:03:32,790 --> 00:03:34,130 ‫Dan kemudian kami memiliki folder. 73 00:03:34,130 --> 00:03:37,833 ‫Satu untuk tur dan satu untuk pengguna, oke. 74 00:03:39,197 --> 00:03:41,700 ‫Jadi di dalam setiap tur 75 00:03:41,700 --> 00:03:45,423 ‫ini kami memiliki tiga foto dan satu foto sampul. 76 00:03:46,330 --> 00:03:49,120 ‫Jadi, itu akan terlihat seperti ini. 77 00:03:49,120 --> 00:03:54,120 ‫Dan jadi jalur di sini adalah image dot tour atau 78 00:03:56,230 --> 00:03:59,863 ‫slash tour lalu slash nama gambarnya, bagus. 79 00:04:00,750 --> 00:04:04,270 ‫Jadi itu seharusnya membuat seluruh 80 00:04:04,270 --> 00:04:08,560 ‫situs web terlihat lebih baik sekarang ya. 81 00:04:08,560 --> 00:04:11,770 ‫Sekarang itu benar-benar mulai hidup. 82 00:04:11,770 --> 00:04:13,730 ‫Jadi, itu fantastis. 83 00:04:13,730 --> 00:04:15,460 ‫Ini membuat saya merasa sangat hebat 84 00:04:15,460 --> 00:04:16,993 ‫setiap kali itu berhasil. 85 00:04:18,090 --> 00:04:21,260 ‫Bagaimanapun, sekarang mari kita urus sisa data 86 00:04:21,260 --> 00:04:23,010 ‫yang tentu saja 87 00:04:23,010 --> 00:04:26,680 ‫masih terlihat sama di semua kartu ini, oke. 88 00:04:26,680 --> 00:04:29,550 ‫Jadi sekarang mari kita gunakan data dalam koleksi kita 89 00:04:29,550 --> 00:04:31,600 ‫untuk membangun string ini di sini. 90 00:04:31,600 --> 00:04:33,550 ‫Jadi, Anda melihat bahwa ini sebenarnya adalah 91 00:04:33,550 --> 00:04:35,010 ‫kombinasi dari data yang berbeda. 92 00:04:35,010 --> 00:04:38,630 ‫Jadi, kita memiliki kesulitan dan durasi tur dan 93 00:04:38,630 --> 00:04:41,710 ‫sekarang mari kita buat string template. 94 00:04:41,710 --> 00:04:46,093 ‫Jadi, pada dasarnya tetapkan string template ini ke elemen ini. 95 00:04:48,100 --> 00:04:53,083 ‫Jadi kita mulai di sini dengan tingkat kesulitan 96 00:04:54,410 --> 00:04:59,410 ‫tour dot, ingat, lalu space dan durasi tour, 97 00:05:01,090 --> 00:05:05,763 ‫tour dot durasi day tour, oke. 98 00:05:10,400 --> 00:05:14,030 ‫Jadi, itulah terjemahan dari konten ini. 99 00:05:14,030 --> 00:05:18,413 ‫Kemudian selanjutnya yang kami miliki di sini adalah ringkasan tur, oke. 100 00:05:19,700 --> 00:05:24,700 ‫Jadi, ringkasan titik tur yang sama, oke. 101 00:05:26,520 --> 00:05:29,870 ‫Kemudian selanjutnya kita memiliki lokasi awal dan jadi tur 102 00:05:29,870 --> 00:05:31,720 ‫ini misalnya dimulai di 103 00:05:31,720 --> 00:05:34,470 ‫Banff Canada dan sekali lagi mari kita 104 00:05:34,470 --> 00:05:36,520 ‫lihat kompas di sini hanya 105 00:05:36,520 --> 00:05:38,520 ‫untuk melihat seperti apa datanya 106 00:05:38,520 --> 00:05:40,740 ‫atau sebenarnya kita tidak perlu selalu 107 00:05:40,740 --> 00:05:42,520 ‫bolak-balik untuk kompas. 108 00:05:42,520 --> 00:05:46,340 ‫Kita juga bisa membuka atau atau mengimpor data di sini. 109 00:05:49,170 --> 00:05:52,850 ‫Jadi, dalam tur kita cukup menggunakan data ini di 110 00:05:52,850 --> 00:05:55,980 ‫sini daripada selalu pergi ke kompas. 111 00:05:55,980 --> 00:05:57,810 ‫Jadi, sebelum kita menggunakan ringkasan sekarang 112 00:05:57,810 --> 00:06:00,400 ‫mari kita lanjutkan dan gunakan lokasi awal yang sebenarnya 113 00:06:01,600 --> 00:06:03,040 ‫ada di atas sini. 114 00:06:03,040 --> 00:06:07,083 ‫Jadi, sekarang kami ingin memulai deskripsi titik lokasi, oke. 115 00:06:09,570 --> 00:06:14,570 ‫Jadi, tur dot start lokasi dot description. 116 00:06:17,630 --> 00:06:19,090 ‫Jadi sekarang Anda 117 00:06:19,090 --> 00:06:21,480 ‫mulai melihat mengapa masuk akal untuk benar-benar 118 00:06:21,480 --> 00:06:24,450 ‫membuat semua data berbeda yang kami buat di sini. 119 00:06:24,450 --> 00:06:28,010 ‫Benar, selanjutnya kita akan menggunakan untuk memulai kencan 120 00:06:28,010 --> 00:06:29,520 ‫dan perlu diingat. 121 00:06:29,520 --> 00:06:32,010 ‫Bahwa ini adalah sebuah array, oke. 122 00:06:32,010 --> 00:06:34,900 ‫Karena sekarang yang kami inginkan dalam tinjauan 123 00:06:34,900 --> 00:06:38,680 ‫kami pada dasarnya adalah tanggal di mana tur berikutnya dimulai. 124 00:06:38,680 --> 00:06:41,710 ‫Nah, itulah yang dimaksud dengan ikon dengan kalender 125 00:06:41,710 --> 00:06:42,923 ‫dalam hal ini. 126 00:06:44,260 --> 00:06:46,470 ‫Jadi, pada dasarnya 127 00:06:46,470 --> 00:06:50,710 ‫itu adalah elemen pertama dari array tanggal mulai. 128 00:06:50,710 --> 00:06:55,680 ‫Jadi, mulai tanggal di posisi 0. 129 00:06:55,680 --> 00:06:59,960 ‫Selanjutnya kami memiliki data yang mengatakan berapa banyak pemberhentian yang 130 00:06:59,960 --> 00:07:02,320 ‫ada di tur ini. 131 00:07:02,320 --> 00:07:03,670 ‫Jadi pada dasarnya 132 00:07:03,670 --> 00:07:06,000 ‫itu berarti berapa banyak lokasi yang 133 00:07:06,000 --> 00:07:09,210 ‫kita miliki dan sekali lagi kita akan menggunakan lokasi 134 00:07:09,210 --> 00:07:11,120 ‫dan kali ini tidak memulai 135 00:07:11,120 --> 00:07:13,770 ‫lokasi tetapi benar-benar lokasi ini dan jadi 136 00:07:13,770 --> 00:07:17,350 ‫jika Anda ingin menentukan berapa banyak lokasi yang kita miliki. 137 00:07:17,350 --> 00:07:21,493 ‫Kalau begitu kita perlu menghitung panjang array ini, oke. 138 00:07:22,910 --> 00:07:24,560 ‫Dan sesederhana itu juga. 139 00:07:24,560 --> 00:07:27,370 ‫Jadi, samakan dan atur ke 140 00:07:27,370 --> 00:07:29,830 ‫string templat ini karena 141 00:07:31,840 --> 00:07:36,807 ‫kami juga ingin menambahkan perhentian ini dan lokasi titik tur 142 00:07:42,850 --> 00:07:45,740 ‫panjang titik perhentian dan akhirnya jumlah 143 00:07:45,740 --> 00:07:49,070 ‫orang yang menjadi bagian dari masing-masing grup. 144 00:07:49,070 --> 00:07:52,990 ‫Jadi, orang-orang yang dapat berpartisipasi dalam satu tur 145 00:07:52,990 --> 00:07:55,110 ‫dan itu disimpan 146 00:07:56,750 --> 00:08:00,053 ‫di tur tetapi ukuran grup maksimal, ingat. 147 00:08:02,440 --> 00:08:03,953 ‫Dan kemudian orang. 148 00:08:05,950 --> 00:08:08,990 ‫Bagus, jadi bagian itu sudah selesai sekarang 149 00:08:08,990 --> 00:08:12,550 ‫dan jadi mari kita kembali ke situs web kita 150 00:08:12,550 --> 00:08:13,743 ‫dan mengujinya. 151 00:08:15,270 --> 00:08:20,150 ‫Dan ya cantik setidaknya hampir cantik karena kencan ini 152 00:08:20,150 --> 00:08:23,030 ‫terlihat agak aneh di sini. 153 00:08:23,030 --> 00:08:28,030 ‫Jadi, kami benar-benar hanya ingin tanggal dua puluh satu Juni jadi kami tidak 154 00:08:28,500 --> 00:08:30,550 ‫perlu terlalu spesifik di 155 00:08:30,550 --> 00:08:32,630 ‫sini dalam ikhtisar ini, oke. 156 00:08:32,630 --> 00:08:37,630 ‫Jadi yang kita inginkan adalah terlihat seperti lagi Juni 2021 dan 157 00:08:38,200 --> 00:08:41,620 ‫sekarang semuanya berantakan dan jadi mari kita perbaiki 158 00:08:41,620 --> 00:08:43,560 ‫itu dan untungnya 159 00:08:43,560 --> 00:08:45,910 ‫itu sebenarnya sangat mudah dengan 160 00:08:45,910 --> 00:08:48,640 ‫JavaScript yang mencakup beberapa fungsi yang 161 00:08:48,640 --> 00:08:51,640 ‫sangat bagus untuk bekerja dengan tanggal. 162 00:08:51,640 --> 00:08:55,100 ‫Dan perlu diingat bahwa setiap tanggal mulai 163 00:08:55,100 --> 00:08:57,920 ‫di sini benar-benar adalah 164 00:08:57,920 --> 00:09:01,120 ‫objek tanggal atau database dan sekarang 165 00:09:01,120 --> 00:09:06,120 ‫kita dapat menggunakan fungsi seperti ini untuk string lokal, oke. 166 00:09:06,510 --> 00:09:09,260 ‫Jadi, pada dasarnya ini akan mengubah tanggal ini 167 00:09:09,260 --> 00:09:11,440 ‫menjadi string yang dapat dibaca 168 00:09:11,440 --> 00:09:15,580 ‫dan di sini kita sekarang dapat memberikan opsi untuk bahasa tersebut. 169 00:09:15,580 --> 00:09:18,080 ‫Dan itu adalah bahasa Inggris untuk AS 170 00:09:19,570 --> 00:09:22,580 ‫dan kemudian juga sebuah objek dengan beberapa opsi dan jadi 171 00:09:22,580 --> 00:09:25,481 ‫di sini kita sekarang dapat menentukan bahwa kita ingin 172 00:09:25,481 --> 00:09:27,093 ‫satu bulan menjadi panjang. 173 00:09:29,330 --> 00:09:31,870 ‫Jadi, bukan hanya singkatan seperti yang kami miliki 174 00:09:31,870 --> 00:09:32,940 ‫di sini. 175 00:09:32,940 --> 00:09:34,910 ‫jadi, satu April, satu 176 00:09:34,910 --> 00:09:36,970 ‫Agustus sekarang akan mencetaknya seperti ini. 177 00:09:36,970 --> 00:09:41,560 ‫Jadi, benar-benar nama seluruh bulan dan oke dan kemudian 178 00:09:41,560 --> 00:09:46,557 ‫juga mengatakan bahwa tahun harus numerik dan jika Anda ingin mempelajari 179 00:09:48,380 --> 00:09:50,757 ‫lebih lanjut tentang fungsi 180 00:09:50,757 --> 00:09:55,180 ‫ini di sini, silakan saja dan Google itu, oke. 181 00:09:55,180 --> 00:09:57,810 ‫Jadi, mari kita coba 182 00:09:59,550 --> 00:10:02,930 ‫lagi dan sekarang terlihat sangat bagus, mengagumkan. 183 00:10:02,930 --> 00:10:06,980 ‫Jadi, mari kita lanjutkan dan selesaikan bagian terakhir ini di 184 00:10:06,980 --> 00:10:09,723 ‫sini dengan detail harga dan peringkat. 185 00:10:11,640 --> 00:10:14,700 ‫Dan itu di bawah ini di footer kartu dan 186 00:10:14,700 --> 00:10:17,150 ‫jadi di sini itu hanya harganya. 187 00:10:17,150 --> 00:10:21,240 ‫Jadi, sama dengan membiarkannya begitu saja karena sekarang kita 188 00:10:21,240 --> 00:10:23,810 ‫masih membutuhkan string template karena 189 00:10:23,810 --> 00:10:27,910 ‫harganya bukan hanya angka ini tetapi sebenarnya kita membutuhkan 190 00:10:31,370 --> 00:10:34,120 ‫tanda dolar tambahan di sini untuk 191 00:10:34,120 --> 00:10:35,250 ‫harga dolar. 192 00:10:35,250 --> 00:10:36,433 ‫Jadi, yang ini, benar. 193 00:10:39,620 --> 00:10:42,410 ‫Selanjutnya kami memiliki peringkat rata-rata di sini. 194 00:10:42,410 --> 00:10:45,300 ‫Jadi, ini dia dan kita 195 00:10:45,300 --> 00:10:50,300 ‫sudah tahu bahwa ini disebut rating rata-rata titik tur. 196 00:10:51,020 --> 00:10:54,560 ‫Jadi, kami menggunakannya berkali-kali setidaknya saya percaya. 197 00:10:54,560 --> 00:10:59,240 ‫Mari kita konfirmasi jadi sebenarnya itu peringkat rata-rata dan 198 00:10:59,240 --> 00:11:01,490 ‫kemudian juga peringkat kuantitas. 199 00:11:01,490 --> 00:11:03,488 ‫Jadi, mari kita salin ini. 200 00:11:03,488 --> 00:11:05,890 ‫Jadi, peringkat rata-rata dan 201 00:11:05,890 --> 00:11:10,073 ‫sekarang di sini kami ingin kuantitas peringkat. 202 00:11:16,320 --> 00:11:19,270 ‫Baiklah, tapi tentu saja ini perlu string 203 00:11:23,390 --> 00:11:25,560 ‫template dan kemudian di 204 00:11:25,560 --> 00:11:30,450 ‫sini atur menjadi sama dan kemudian tentu saja interpolasi nama variabel 205 00:11:30,450 --> 00:11:33,490 ‫di sini dan sekarang akhirnya kita perlu 206 00:11:33,490 --> 00:11:36,220 ‫membangun URL ke halaman detail, oke. 207 00:11:36,220 --> 00:11:39,180 ‫Jadi, ingat bahwa ketika kita mengklik salah satu kartu. 208 00:11:39,180 --> 00:11:41,280 ‫Itu kemudian membawa kita ke halaman 209 00:11:41,280 --> 00:11:44,550 ‫detail dan tentu saja di sini kita sekarang perlu menentukan 210 00:11:45,410 --> 00:11:48,800 ‫tautan itu karena tentu saja itu akan tergantung pada setiap tur. 211 00:11:48,800 --> 00:11:52,380 ‫Jadi, kami ingin menautkan menjadi tur slash dan kemudian 212 00:11:52,380 --> 00:11:54,760 ‫ingat bagaimana saya sebutkan sebelumnya bahwa 213 00:11:54,760 --> 00:11:57,530 ‫untuk merender halaman ini, kami sebenarnya ingin 214 00:11:57,530 --> 00:12:00,050 ‫menanyakan tur dengan slug mereka dan 215 00:12:00,050 --> 00:12:01,870 ‫bukan dengan ID mereka. 216 00:12:01,870 --> 00:12:04,620 ‫Bagaimana kami melakukannya di API 217 00:12:04,620 --> 00:12:09,620 ‫oke, karena itu sebenarnya membuat URL terlihat jauh lebih bagus, oke. 218 00:12:09,920 --> 00:12:11,973 ‫Jadi mari kita gunakan itu di sini sekarang. 219 00:12:13,430 --> 00:12:18,130 ‫Jadi tur dot slug dan hanya untuk menjelaskan mengapa 220 00:12:18,130 --> 00:12:20,200 ‫kami memulai URL 221 00:12:20,200 --> 00:12:23,110 ‫ini di sini dengan garis miring. 222 00:12:23,110 --> 00:12:26,230 ‫Itu karena membangun URL seperti ini, jadi 223 00:12:26,230 --> 00:12:30,140 ‫memulai hanya dengan garis miring disebut URL relatif dan 224 00:12:30,140 --> 00:12:31,620 ‫apa yang 225 00:12:31,620 --> 00:12:35,020 ‫akan dilakukan adalah menambahkan bagian URL ini 226 00:12:35,020 --> 00:12:36,640 ‫setelah nama host. 227 00:12:36,640 --> 00:12:41,540 ‫Jadi, host itu sekarang satu sampai tujuh koma nol nol satu tapi itu tidak 228 00:12:41,540 --> 00:12:44,170 ‫perlu disebutkan di sini karena sekali 229 00:12:44,170 --> 00:12:47,710 ‫lagi ketika menulis URL relatif seperti ini, ia akan menambahkan 230 00:12:47,710 --> 00:12:51,663 ‫apa yang kita miliki di sini ke nama host itu, oke. 231 00:12:53,135 --> 00:12:56,490 ‫Jadi, mari kita muat ulang lagi dan kita 232 00:12:56,490 --> 00:12:58,930 ‫hampir selesai di sini belum 233 00:12:58,930 --> 00:13:00,250 ‫cukup siap. 234 00:13:00,250 --> 00:13:01,750 ‫Jadi, di sini Anda melihat tidak 235 00:13:01,750 --> 00:13:03,820 ‫terdefinisi dan jadi kami mungkin melakukan kesalahan di sana. 236 00:13:03,820 --> 00:13:06,490 ‫Dan Anda juga melihat bahwa tidak ada jarak 237 00:13:06,490 --> 00:13:08,650 ‫di sini antara harga dan 238 00:13:08,650 --> 00:13:11,440 ‫per orang dan juga di sini sama sekarang. 239 00:13:11,440 --> 00:13:13,360 ‫Jika Anda mengarahkan tombol ini ke 240 00:13:13,360 --> 00:13:15,550 ‫sini lalu ke bawah sana di sudut kiri. 241 00:13:15,550 --> 00:13:18,400 ‫Jadi, di sini Anda akan melihat URL yang baru 242 00:13:18,400 --> 00:13:19,780 ‫saja kita buat. 243 00:13:19,780 --> 00:13:21,040 ‫Benar-benar dapat mengkliknya 244 00:13:21,040 --> 00:13:23,010 ‫dan kemudian akan memberi kami 245 00:13:23,010 --> 00:13:25,470 ‫kesalahan ini karena tentu saja kami belum 246 00:13:25,470 --> 00:13:27,390 ‫menentukan rute ini tetapi Anda 247 00:13:27,390 --> 00:13:30,660 ‫melihat bahwa itu terlihat sangat bagus di sini dengan tur 248 00:13:30,660 --> 00:13:35,660 ‫menebas pejalan kaki hutan alih-alih memiliki ID yang terlihat jelek di sana, oke . 249 00:13:35,950 --> 00:13:38,270 ‫Tapi bagaimanapun, sekarang mari kita perbaiki yang tidak terdefinisi ini 250 00:13:38,270 --> 00:13:39,563 ‫di ruang yang hilang ini. 251 00:13:40,610 --> 00:13:44,550 ‫Jadi, mari kita lihat yang satu ini. 252 00:13:44,550 --> 00:13:49,270 ‫Yah, tampaknya benar sebenarnya peringkat, kuantitas, tetapi tentu 253 00:13:50,290 --> 00:13:54,690 ‫saja kami melewatkan titik tur ini, oke. 254 00:13:54,690 --> 00:13:57,770 ‫Anda mungkin sudah melihat yang itu. 255 00:13:57,770 --> 00:13:59,360 ‫Sekarang tentang ruang yang hilang itu. 256 00:13:59,360 --> 00:14:02,950 ‫Ada sesuatu yang baru yang perlu saya tunjukkan 257 00:14:02,950 --> 00:14:06,050 ‫tentang pug yang sebenarnya disebut jalur pipa 258 00:14:07,090 --> 00:14:08,950 ‫kosong atau jalur. 259 00:14:08,950 --> 00:14:11,080 ‫Jadi, setiap kali kita membutuhkan ruang 260 00:14:11,080 --> 00:14:13,220 ‫nyata antara dua elemen blok-sebaris yang 261 00:14:13,220 --> 00:14:15,610 ‫merupakan pita-pita ini, maka kita perlu membuat 262 00:14:15,610 --> 00:14:17,210 ‫ruang itu secara 263 00:14:17,210 --> 00:14:20,840 ‫manual menggunakan garis pipa ini di sini seperti ini, oke. 264 00:14:20,840 --> 00:14:23,180 ‫Dan hal yang sama di 265 00:14:23,180 --> 00:14:25,260 ‫sini karena jika tidak 266 00:14:25,260 --> 00:14:27,660 ‫seperti yang baru saja kita lihat, 267 00:14:27,660 --> 00:14:31,120 ‫itu hanya akan merekatkan semua elemen ini bersama-sama, baiklah. 268 00:14:31,120 --> 00:14:33,880 ‫Jadi, sekarang semua itu harus 269 00:14:33,880 --> 00:14:37,260 ‫diperbaiki dan ruang itu masih belum ada dan 270 00:14:37,260 --> 00:14:40,070 ‫itu sebenarnya karena kita melupakan sesuatu. 271 00:14:40,070 --> 00:14:41,750 ‫Jadi mari kita kembali 272 00:14:41,750 --> 00:14:44,080 ‫dan kita sebenarnya perlu menambahkan ruang 273 00:14:44,080 --> 00:14:47,600 ‫kosong itu secara manual di sini dan di sini. 274 00:14:47,600 --> 00:14:50,290 ‫Jadi, jalur pipa kosong di sini pada dasarnya, 275 00:14:50,290 --> 00:14:53,390 ‫menciptakan ruang bagi kita di mana kita kemudian dapat 276 00:14:53,390 --> 00:14:55,020 ‫membuat konten di luar 277 00:14:55,020 --> 00:14:57,690 ‫elemen dan pada dasarnya itulah ruang ini. 278 00:14:57,690 --> 00:14:59,930 ‫Jadi, ruang ini di sini yang baru saja kita taruh di sini. 279 00:14:59,930 --> 00:15:03,180 ‫Jadi, ruang kosong ini isinya yang tidak ada di 280 00:15:03,180 --> 00:15:05,830 ‫dalam salah satu dari dua elemen ini. 281 00:15:05,830 --> 00:15:08,690 ‫Dan sekali lagi untuk dapat melakukan itu untuk 282 00:15:08,690 --> 00:15:10,880 ‫itulah kita membutuhkan pipa ini. 283 00:15:10,880 --> 00:15:13,423 ‫Jadi, dua pipa ini. 284 00:15:14,960 --> 00:15:17,020 ‫Jadi, coba lagi dan sekarang 285 00:15:17,020 --> 00:15:18,870 ‫memang inilah ruang 286 00:15:18,870 --> 00:15:21,670 ‫yang baru saja kita buat, sempurna. 287 00:15:21,670 --> 00:15:25,010 ‫Dan dengan itu kami benar-benar menyelesaikan kuliah ini dan 288 00:15:25,010 --> 00:15:28,140 ‫situs web pertama yang tampak memukau ini atau 289 00:15:28,140 --> 00:15:32,110 ‫bagian dari situs web yang baru saja kami bangun bersama di sini. 290 00:15:32,110 --> 00:15:35,651 ‫Jadi, momen untuk menghargai betapa kerennya ini 291 00:15:35,651 --> 00:15:38,280 ‫sebenarnya dan juga bagaimana semua 292 00:15:38,280 --> 00:15:42,340 ‫kode yang kita tulis bersama ini benar-benar berfungsi, oke. 293 00:15:42,340 --> 00:15:44,560 ‫Dan kemudian setelah itu kembalilah 294 00:15:44,560 --> 00:15:47,693 ‫sehingga kita dapat membangun bersama-sama halaman ikhtisar tur.