‫Instruktur: Sekarang mari kita lakukan
‫bagian pertama dari membangun situs web peternakan simpul dinamis
‫hanya dengan membangun template
‫yang akan menyimpan data aktual.
‫Dan ingat bahwa tujuan kami adalah membangun
‫situs web dinamis semacam ini di mana kami memiliki gambaran umum
‫di mana kami memiliki semua
‫produk, dan kemudian setiap produk memiliki halaman detailnya seperti
‫yang saya tunjukkan sebelumnya.
‫Dan data ini di sini tentu saja dibaca dari file json,
‫jadi jika kita mengubah file json, misalnya, menghapus
‫salah satu produk ini kemudian memuat ulang halaman ini, maka
‫produk itu harus hilang dari sini.
‫Atau jika kami mengubah beberapa data ini di sini atau
‫namanya, maka, itu harus diperbarui di sini di situs.
‫Sekali lagi karena ini adalah situs web
‫dinamis yang dibangun dari data yang ada di file json.
‫Jadi seperti
‫yang saya sebutkan, langkah pertama adalah benar-benar
‫membuat template ini, satu untuk halaman
‫ikhtisar ini, dan satu lagi untuk halaman detail produk.
‫Dan kita akan mulai dengan halaman detail, dan
‫saya akan membuat
‫template ini berdasarkan data halaman web yang kita
‫miliki di sini di folder templates.
‫Jadi mari kita lihat mereka.
‫Jadi kami memiliki gambaran umum dan produk, dan sekali lagi,
‫kami akan mulai dengan produk. html.
‫Jadi kami memiliki nama produk di sini kemudian gambar
‫ini di sini yang sebenarnya adalah emoji, tetapi itu tidak terlalu penting.
‫Jadi, daripada harus meminta gambar asli
‫untuk semua produk yang berbeda ini, saya memilih
‫untuk menggunakan emoji saja.
‫Itu jauh lebih mudah.
‫Hal yang sama sebenarnya untuk gaya.
‫Jadi saya memiliki semua gaya CSS yang dimasukkan ke dalam halaman html
‫sehingga kita tidak perlu membuat banyak
‫permintaan untuk mendapatkan data yang berbeda ini, bukan?
‫Karena sebenarnya,
‫setiap file yang berbeda akan memicu permintaan yang berbeda, oke?
‫Ingat sebelumnya di mana kami memiliki permintaan
‫untuk ikon lima, kan?
‫Jadi kami melihat satu permintaan untuk root, jadi untuk halaman utama,
‫dan kemudian satu permintaan untuk gambar itu, dan artinya
‫setiap aset, jadi
‫setiap bagian yang merupakan bagian dari situs
‫web, akan
‫mendapatkan permintaannya sendiri, dan kami kemudian harus menangani
‫itu, dan kami tidak
‫ingin melakukan itu, jadi saya hanya memasukkan gaya ke dalam halaman html ini.
‫Baiklah, jadi inilah sekumpulan gaya, gaya, gaya, dan kemudian
‫di sini kita memiliki,
‫yah, nama produknya di suatu tempat.
‫Oh ya, ini dia nama produknya.
‫Ini adalah gambar produk, yang sekali
‫lagi hanya emoji, tetapi datang dari bidang gambar ini.
‫Jadi kami memiliki bidang ini yang disebut gambar.
‫Benar?
‫Lalu kita tahu dari mana asalnya, beberapa
‫bahan, dan harganya, dan juga deskripsinya di sini, oke?
‫Tetapi sekali lagi, semua ini berasal dari bidang yang berbeda ini.
‫Jadi mari kita lihat bidang yang kita miliki.
‫Jadi nama produk, gambar, dari, nutrisi, kuantitas, harga,
‫organik atau tidak, dan deskripsi.
‫Jadi apa yang akan kita lakukan sekarang
‫adalah pada dasarnya mengganti semua bagian yang ingin
‫kita tambahkan secara dinamis dengan
‫placeholder, dan kemudian dengan kode kita mengganti
‫placeholder itu dengan bagian data yang sebenarnya, oke?
‫Jadi mari kita mulai di sini dengan nama
‫produk, jadi saya akan
‫menghapusnya dan meletakkan placeholder di sini.
‫Dan saya dapat melakukan apa pun yang saya inginkan sebagai pengganti.
‫Saya hanya ingin pergi dalam kasus ini dengan sesuatu seperti ini.
‫Jadi...
‫Nama produk, lalu persentase, lalu kurung kurawal.
‫Jadi sekali lagi, ini bisa apa saja
‫yang kita inginkan,
‫tapi kita ingin menemukan sesuatu yang mungkin
‫tidak ada di halaman sehingga kita tidak mengganti
‫sesuatu yang salah jadi apapun yang sebenarnya tidak ingin kita ganti, oke?
‫Dan saya bisa meletakkan sesuatu seperti ini di sini, oke?
‫Dan kemudian ganti semua itu, tapi saya pikir, seperti
‫ini, terlihat bagus, dan mudah dikenali.
‫Jadi yang harus kita lakukan adalah melanjutkan
‫dan meletakkan ini semua di
‫sini, dan kemudian saya akan mengganti, tentu saja, nama-nama ini.
‫Jadi di sini kita memiliki nutrisi.
‫Di sini kita memiliki kuantitas.
‫Dan di sini saya memiliki harga.
‫Di bawah sini kami memiliki harga lagi, Anda tahu.
‫Dan harga hanya nomor, oke?
‫Tanda euro di sini hanya tinggal
‫di sana karena harga yang kami miliki sebenarnya hanya angka.
‫Mari kita lihat itu di sini di json.
‫Jadi kita hanya memiliki 6. 50 tetapi bukan mata uangnya.
‫Dan sebenarnya sama di sini, jadi mari kita ambil itu dan
‫salin di sini dengan sangat cepat, dan ya,
‫sebenarnya, saya lupa mengganti yang ini,
‫jadi ini dari.
‫Dan mari kita menulis dari, bukan dalam huruf besar, sehingga teks
‫ini sedikit lebih masuk akal.
‫Jadi misalnya dari Portugal atau dari Spanyol atau apalah.
‫Oh, apa itu di sini?
‫Oke, saya kira saya hanya menulis di tengah nama produk.
‫Jadi nutrisi.
‫Oke.
‫Oh, dan di sini kita punya, tentu saja, deskripsinya, jadi mari
‫kita ganti juga.
‫Oh, tentu saja saya harus mendapatkan yang
‫ini
‫kembali dan deskripsinya.
‫Selanjutnya kita memiliki gambar-gambar ini, jadi alpukatnya, dan jadi saya
‫menekan beberapa perintah V, menempelkannya di sini,
‫dan jadi saya bisa mengedit ini semua di sini pada
‫waktu yang sama.
‫Oke, lalu gambar dan, oh, sesuatu di sini di judul.
‫Kami juga ingin mengganti gambar di sini dan
‫nama produk juga.
‫Jadi.
‫Nama produk
‫di sini dan di
‫sini gambar sehingga yang satu ini juga akan diganti secara dinamis.
‫Baiklah, sekarang hanya satu hal lagi yang
‫sedikit lebih kompleks.
‫Dimana itu?
‫Baiklah, itu di sini.
‫Jadi beberapa produk organik, dan beberapa tidak.
‫Jadi ada kelas di CSS yang
‫akan ditambahkan ke semua elemen ini jika tidak organik, oke?
‫Jadi itulah kelas ini di sini.
‫Jadi bila tidak organik, maka tidak boleh ditampilkan, jadi lencana
‫organik ini ada di sini.
‫Dan hanya untuk menunjukkan kepada Anda apa
‫yang saya bicarakan, lencana organik adalah benda ini di sini, oke?
‫Jadi kami tidak ingin menampilkan
‫bahwa jika itu salah di json, jadi yang akan kami lakukan
‫di sini adalah menambahkan placeholder lain di sini
‫atau sebenarnya di dalam kelas, jadi
‫saya akan menyebut yang ini bukan organik
‫.
‫Dan Anda akan melihat alasannya nanti, oke?
‫Ketika kami mengganti ini, itu akan lebih masuk akal bagi Anda.
‫Baiklah, jadi saya pikir ini sudah selesai,
‫dan saya hanya menimpa semua yang kita miliki.
‫Jadi sekarang saya
‫sebut saja produk template ini, oke?
‫Jadi yang ini selesai.
‫Mari kita beralih ke yang berikutnya, ikhtisar.
‫Dan yang ini sebenarnya akan sedikit berbeda, dan
‫izinkan saya menunjukkan alasannya.
‫Jadi sekali lagi, kami memiliki semua SCC yang digariskan di
‫sini, dan sekarang kami memiliki wadah
‫kartu ini, dan kemudian untuk setiap produk, kami memiliki satu kartu.
‫Jadi masing-masing kartu di sini memiliki tag angka ini, kan?
‫Sekarang kita sebenarnya tidak tahu berapa
‫banyak dari kartu-kartu ini yang akan ada di sini dalam ikhtisar ini, bukan?
‫Bayangkan kita memiliki 10 produk di json.
‫Maka kita membutuhkan 10 kartu ini.
‫Tetapi bayangkan bahwa kita hanya memiliki satu atau dua.
‫Kalau begitu, kami tidak ingin semua 10 kartu tetapi hanya dua.
‫Jadi bagaimana kita akan melakukannya?
‫Nah, kita sebenarnya akan membuat template lain di mana hanya
‫ada satu kartu di sana, dan kemudian
‫kita akan memasukkan salah satu template
‫ini untuk setiap kartu yang
‫kita inginkan, jadi setiap produk dalam file json.
‫Baiklah, masuk akal?
‫Jadi mari kita sebut ini di sini gambaran umum template.
‫Dan saya akan melanjutkan dan membuat kartu template.
‫Jadi yang akan saya lakukan di sini adalah sekarang, seperti yang saya sebutkan,
‫sekarang kembali ke
‫atas, jadi saya lanjutkan dan ambil satu angka.
‫Itu terlalu banyak.
‫Dan tempel di sini.
‫Jadi turunkan ini sedikit.
‫Oke, jadi setiap kartu sekarang mendapatkan angkanya sendiri.
‫Oke, jadi sekarang yang akan saya lakukan
‫adalah menghapus semua kartu dari sini dan
‫membuat placeholder di sini juga.
‫Kartu produk.
‫Oke?
‫Jadi sekali lagi, nanti dalam kode
‫kita, kita akan membuat kartu sebanyak yang kita butuhkan di sini.
‫Misalnya, jika kami memiliki lima
‫produk, kami membuat lima kartu seperti ini.
‫Kami kemudian akan menggabungkannya menjadi satu
‫string dan kemudian mengganti kartu produk dengan
‫string yang berisi semua kartu yang berbeda ini, oke?
‫Jadi sebenarnya, kita sudah selesai dengan yang satu ini.
‫Oke?
‫Karena sebagian besar
‫hal terjadi di dalam kartu template.
‫Jadi tidak ada lagi yang bisa diganti di sini.
‫Saya datang ke sini untuk menyalin ini di
‫sini, dan sekarang sangat mudah bagi
‫kita untuk mengganti apa yang kita butuhkan di sini.
‫Jadi ini dia gambarnya, dan kami benar-benar memilikinya dua kali.
‫Oke, itu membuatnya terlihat sedikit lebih bagus.
‫Gambar, gambar, lalu di sini kita memiliki nama produk, ingat?
‫Di sini,
‫di tempat ini, kita akan memiliki lagi pengganti yang tidak organik, dan sekali lagi,
‫yang ini akan lebih masuk akal bagi Anda nanti.
‫Lebih organik, maka kuantitas di sini.
‫Kemudian harga.
‫Jadi kita juga perlu benar-benar membangun tautan di sini.
‫Jadi yang ini di sini,
‫jadi elemen A, jika Anda tidak terlalu familiar
‫dengan html, elemen A adalah untuk tautan.
‫Jadi izinkan saya menunjukkannya kepada Anda dalam contoh nyata.
‫Jadi ketika kita mengarahkan kursor ke link ini, di
‫bawah sana di sudut kiri bawah, jadi
‫di bawah sini, Anda akan melihat bahwa itu adalah produk slash
‫dan kemudian ID sama dengan nol.
‫Dan yang satu ini adalah ID sama dengan satu, ID sama dengan dua.
‫Oke, dan jika kita mengkliknya, kita melihatnya sebenarnya di sini.
‫Jadi slash product dan kemudian ID sama dengan nol,
‫dan ID ini di sini persis dengan ID yang kita miliki di json.
‫Oke, jadi yang ini di sini.
‫Jadi alpukatnya satu, keju kambingnya juga.
‫Maaf, alpukat tidak memiliki nol, tentu saja.
‫Brokoli memiliki dua dan seterusnya dan seterusnya.
‫Jadi di sini sebenarnya kita perlu membangun tautan.
‫Jadi produk, dan tentu saja, tidak dalam huruf besar.
‫Jadi produk, dan ID adalah
‫ID.
‫Oke?
‫Jadi kita harus mengganti placeholder ID ini di sini dengan
‫nomor yang benar.
‫Jadi nol, satu, dua, tiga, empat, lima, dan seterusnya dan seterusnya
‫tergantung berapa banyak produk yang ada.
‫Jadi misalkan kita punya keju di sini, oke?
‫Mari kita kembali ke sini.
‫Nah, maka gambarnya akan menjadi ini di sini,
‫nama produk akan menjadi ini, dan ID akan menjadi satu.
‫Oke, jadi ini di sini
‫kemudian akan diterjemahkan ke ID sama dengan satu dan handler kami di sini.
‫Jadi server handler di sini kemudian akan
‫mengurus halaman yang benar ketika ID produk adalah satu, oke?
‫Jadi logika itu belum diterapkan, tapi tentu saja,
‫kita akan melakukannya di beberapa kuliah berikutnya.
‫Jadi sekarang kita memiliki template yang benar-benar dibuat, jadi mari
‫kita beralih ke video berikutnya di mana
‫kita akan benar-benar mulai mengisi template dan mengirim
‫kembali halaman terakhir ke browser.