Template membuat web berputar. Sintesis data dan struktur menjadi konten. Ini adalah kekuatan super paling keren kami sebagai pengembang — ambil beberapa data, lalu buat itu berfungsi untuk kami, dalam presentasi apa pun yang kami butuhkan. Array objek bisa menjadi tabel, daftar kartu, bagan, atau apa pun yang menurut kami paling berguna bagi pengguna. Apakah datanya adalah posting blog kita sendiri dalam file Markdown, atau nilai tukar global saat itu juga, markup dan UX yang dihasilkan terserah kita sebagai pengembang front-end Show
PHP adalah bahasa yang luar biasa untuk templating, menyediakan banyak cara untuk menggabungkan data dengan markup. Mari masuk ke contoh penggunaan data untuk membuat formulir HTML di pos ini Ingin tangan Anda langsung kotor? Di PHP, kita dapat memasukkan variabel ke dalam literal string yang menggunakan tanda kutip ganda, jadi jika kita memiliki variabel 0, kita dapat menulis 1, dan mencetak 2 yang diharapkan. Untuk pembuatan templat yang lebih kompleks, kami selalu dapat menggabungkan string, seperti. _3Untuk anak-anak sekolah tua, ada 4. Untuk string multiline, Anda dapat menggunakan Heredoc (yang dimulai seperti 5). Dan, yang tak kalah pentingnya, kita bisa menaburkan variabel PHP di dalam HTML, seperti 6Semua opsi ini bagus, tetapi hal-hal bisa menjadi berantakan ketika banyak logika inline diperlukan. Jika kita perlu membangun string HTML majemuk, katakanlah formulir atau navigasi, kompleksitasnya berpotensi tidak terbatas, karena elemen HTML dapat bersarang di dalam satu sama lain Apa yang kami coba hindariSebelum kita melanjutkan dan melakukan hal yang ingin kita lakukan, ada baiknya meluangkan waktu sebentar untuk mempertimbangkan apa yang tidak ingin kita lakukan. Pertimbangkan petikan ringkasan berikut dari tulisan suci WordPress Core, 7, ayat 170-270 _Untuk membangun navigasi _8 dalam fungsi ini, kami menggunakan variabel, 9, yang merupakan string yang sangat panjang yang terus kami tambahkan. Jenis kode ini memiliki urutan operasi yang sangat spesifik dan terbatas. Jika kami ingin menambahkan atribut ke _0, kami harus memiliki akses ke 1 sebelum ini berjalan. Dan jika kita ingin membuat sarang 2 atau 3 di dalam 0, kita perlu membuat blok kode baru yang akan menggantikan bagian tengah baris 7 dengan sekitar 4-10 baris baru, tergantung pada apa sebenarnya yang kita inginkan . Sekarang bayangkan Anda perlu menambahkan 2 secara opsional, lalu menambahkan 3 secara opsional, baik di dalam 2 atau setelahnya. Itu saja adalah tiga pernyataan _8, membuat kodenya semakin tidak terbacaSangat mudah untuk berakhir dengan spageti string saat digabungkan seperti ini, yang menyenangkan untuk dikatakan sekaligus menyakitkan untuk mempertahankannya. Inti dari masalahnya adalah ketika kita mencoba bernalar tentang elemen HTML, kita tidak memikirkan tentang string. Kebetulan string adalah apa yang dikonsumsi browser dan keluaran PHP. Tapi model mental kita lebih seperti DOM — elemen disusun menjadi pohon, dan setiap node memiliki banyak potensi atribut, properti, dan turunan Bukankah lebih bagus jika ada cara yang terstruktur dan ekspresif untuk membangun pohon kita? Memasuki… Kelas $p->setAttribute('class', 'headline');_9PHP 5 menambahkan modul _0 ke dalam daftar tipe Not So Strictly Typed™. Titik masuk utamanya adalah kelas _9, yang sengaja mirip dengan JavaScript API Web 0. Jika Anda pernah menggunakan 3 atau, bagi kita pada usia tertentu, sintaks 4 jQuery, ini mungkin akan terasa cukup familiarKita mulai dengan menginisialisasi 9 baru
Sekarang kita dapat menambahkan _6 ke dalamnya
String _7 mewakili jenis elemen yang kita inginkan, jadi string valid lainnya adalah 8, 9 , dllSetelah kami memiliki elemen, kami dapat mengatur atributnya
Kita bisa menambahkan anak ke dalamnya
Dan terakhir, dapatkan string HTML lengkap sekaligus
Perhatikan bagaimana gaya pengkodean ini membuat kode kita tertata sesuai dengan model mental kita — sebuah dokumen memiliki elemen; . Seluruh bagian "HTML is just a string" muncul di bagian akhir, setelah struktur kita terpasang "Dokumen" di sini sedikit berbeda dari DOM yang sebenarnya, karena tidak perlu mewakili seluruh dokumen, hanya satu blok HTML. Faktanya, jika Anda perlu membuat dua elemen serupa, Anda dapat menyimpan string HTML menggunakan 0, memodifikasi "dokumen" DOM lagi, lalu menyimpan string HTML baru dengan memanggil 0 lagiMendapatkan data dan mengatur strukturKatakanlah kita perlu membuat formulir di server menggunakan data dari penyedia CRM dan markup kita sendiri. Tanggapan API dari CRM terlihat seperti ini
Contoh ini tidak menggunakan struktur data yang tepat dari CRM tertentu, tetapi lebih representatif Dan misalkan kita ingin markup kita terlihat seperti ini
Apa itu _2? . Selama inputnya kosong, itu cocok dengan 3, tetapi pengguna tidak melihat teks placeholder yang terlihat. Hal yang dapat Anda lakukan saat kami mengontrol markupSekarang kita tahu apa hasil yang kita inginkan, inilah rencana permainannya
Jadi, mari hentikan proses kita dan singkirkan beberapa hal teknis
Sejauh ini, kami telah mendapatkan data dan menguraikannya, menginisialisasi 9 kami dan menggemakan hasilnya. Apa yang ingin kita lakukan untuk setiap bidang?
Karena kita berada dalam satu lingkaran, dan PHP tidak memasukkan variabel dalam lingkaran, kita mengatur ulang elemen 8 pada setiap iterasi. Kemudian, jika bidang tersebut memiliki label, kami membuat elemen tersebut. Pada akhirnya, kami menambahkannya ke elemen wadahPerhatikan bahwa kita menetapkan kelas menggunakan metode 9. Berbeda dengan Web API, sayangnya tidak ada penyerahan khusus daftar kelas. Mereka hanyalah atribut lain. Jika kita memiliki logika kelas yang sangat kompleks, karena It's Just PHP™, kita dapat membuat larik dan kemudian meledakkannya 0Input tunggalKarena kita tahu bahwa API hanya akan mengembalikan jenis bidang tertentu, kita dapat mengganti jenis dan menulis kode khusus untuk masing-masing bidang _0Sekarang mari kita tangani area teks, kotak centang tunggal, dan bidang tersembunyi _1Perhatikan sesuatu yang baru yang kami lakukan untuk kotak centang dan kasing tersembunyi? . Untuk bidang kotak centang tunggal kami ingin memodifikasi kelas wadah, sehingga kami dapat menyelaraskan kotak centang dan label secara horizontal; Sekarang jika kita hanya merangkai string, tidak mungkin untuk mengubahnya pada saat ini. Kami harus menambahkan banyak pernyataan 8 tentang jenis elemen dan metadatanya di bagian atas blok. Atau, mungkin lebih buruk, kita memulai 5 lebih awal, lalu salin-tempel banyak kode umum di antara setiap cabangDan inilah keindahan nyata menggunakan pembuat seperti 9 — sampai kita mencapai 0 itu, semuanya masih dapat diedit, dan semuanya masih terstrukturElemen perulangan bersarangMari tambahkan logika untuk 8 elemen _2Oke, jadi ada banyak hal yang terjadi di sini, tetapi logika dasarnya sama. Setelah mengatur 8 luar, kami membuat array 0s untuk ditambahkan di dalamnyaKami juga melakukan tipuan khusus _8 di sini. Jika tidak ada opsi yang dipilih sebelumnya, kami menambahkan opsi placeholder kosong yang sudah dipilih, tetapi tidak dapat dipilih oleh pengguna. Tujuannya adalah untuk menempatkan _2 kita sebagai "placeholder" menggunakan CSS, tetapi teknik ini dapat berguna untuk semua jenis desain. Dengan menambahkannya ke _3 sebelum menambahkan opsi lain, kami memastikan itu adalah opsi pertama di markupSekarang mari kita tangani _4 tombol radio dan kotak centang _3Jadi, pertama-tama kami menentukan apakah set bidang harus untuk kotak centang atau tombol radio. Kemudian kami mengatur kelas container sesuai, dan membangun 4. Setelah itu, kita mengulangi pilihan yang tersedia dan membuat 6 untuk masing-masing pilihan dengan 1 dan 6Perhatikan kita menggunakan interpolasi string PHP biasa untuk menyetel kelas penampung pada baris 21 dan untuk membuat ID unik untuk setiap pilihan pada baris 30 FragmenSatu tipe terakhir yang harus kita tambahkan sedikit lebih rumit dari kelihatannya. Banyak formulir menyertakan bidang instruksi, yang bukan merupakan masukan tetapi hanya beberapa HTML yang perlu kita cetak di antara bidang lainnya Kita harus menggunakan metode _9 lainnya, 0. Ini memungkinkan kami untuk menambahkan HTML sewenang-wenang tanpa menggunakan penataan DOM _4Pada titik ini Anda mungkin bertanya-tanya bagaimana kami menemukan diri kami dengan objek yang disebut 3, yang sebenarnya mewakili elemen statis 2. Tujuannya adalah untuk menggunakan nama variabel umum untuk setiap iterasi loop bidang, sehingga pada akhirnya kita selalu dapat menambahkannya menggunakan 3 terlepas dari jenis bidang sebenarnya. Jadi, ya, menamai sesuatu itu sulitValidasiAPI yang kami gunakan dengan ramah memberikan pesan validasi individual untuk setiap bidang yang diperlukan. Jika ada kesalahan pengiriman, kami dapat menampilkan kesalahan sebaris dengan bidang, daripada pesan umum "oops, your bad" di bagian bawah Mari tambahkan teks validasi ke setiap elemen _5Hanya itu yang diperlukan. Tidak perlu mengutak-atik logika jenis bidang — cukup buat elemen untuk setiap bidang secara kondisional Menyatukan semuanyaJadi apa yang terjadi setelah kita membangun semua elemen lapangan? . Kami juga dapat menggunakan kesempatan untuk menambahkan atribut umum, seperti 7. Kemudian kami akan menambahkan tombol kirim, yang terpisah dari bidang di API ini _6Mengapa kami memeriksa apakah 3 benar? Hai presto, formulir HTML khusus Poin bonus. baris dan kolomSeperti yang Anda ketahui, banyak pembuat formulir memungkinkan penulis mengatur baris dan kolom untuk bidang. Misalnya, sebuah baris mungkin berisi bidang nama depan dan nama belakang, masing-masing dalam satu kolom dengan lebar 50%. Jadi bagaimana kita akan mengimplementasikan ini, Anda bertanya? Tanggapan API kami menyertakan data grid seperti ini _7Kami berasumsi bahwa menambahkan atribut _1 sudah cukup untuk menata lebar, tetapi setiap baris harus menjadi elemennya sendiri (i. e. tidak ada kisi CSS)Sebelum kita menyelami, mari pikirkan apa yang kita perlukan untuk menambahkan baris. Logika dasar berjalan seperti ini
Sekarang, bagaimana kita melakukan ini jika kita menggabungkan string? . "String HTML terbalik" semacam ini selalu membingungkan saya, jadi saya hanya bisa membayangkan bagaimana rasanya IDE saya. Dan ceri di atas adalah bahwa berkat tag terbuka penutup otomatis browser, satu kesalahan ketik akan menghasilkan trilyun 6 bersarang. Sama seperti menyenangkan, tapi sebaliknyaJadi apa cara terstruktur untuk menangani ini? . Pertama, mari tambahkan pelacakan baris sebelum loop kita dan buat elemen penampung baris tambahan. Kemudian kami akan memastikan untuk menambahkan setiap wadah 4 ke 5 daripada langsung ke 6 _8Sejauh ini kami baru saja menambahkan 6 lainnya di sekitar bidang. Mari buat elemen baris baru untuk setiap baris di dalam loop _9Yang perlu kita lakukan hanyalah menimpa objek 5 sebagai elemen DOM baru, dan PHP memperlakukannya sebagai objek unik baru. Jadi, di akhir setiap loop, kami hanya menambahkan apa pun 5 saat ini — jika masih sama dengan iterasi sebelumnya, maka formulir diperbarui; Kemana kita pergi dari sini?Formulir adalah kasus penggunaan yang bagus untuk templating berorientasi objek. Dan memikirkan cuplikan dari WordPress Core itu, argumen mungkin dibuat bahwa menu bersarang juga merupakan kasus penggunaan yang baik. Tugas apa pun di mana markup mengikuti logika kompleks menjadi kandidat yang baik untuk pendekatan ini. _9 dapat menghasilkan XML apa pun, jadi Anda juga dapat menggunakannya untuk membuat umpan RSS dari data kirimanInilah seluruh cuplikan kode untuk formulir kami. Jangan ragu untuk mengadaptasinya ke API bentuk apa pun yang Anda hadapi. Inilah dokumentasi resmi, yang bagus untuk memahami API yang tersedia Kami bahkan tidak menyebutkan _9 dapat mengurai HTML dan XML yang ada. Anda kemudian dapat mencari elemen menggunakan API XPath, yang agak mirip dengan 02, atau 03 di Node. js. Ada sedikit kurva pembelajaran, tetapi ini adalah API yang sangat kuat untuk menangani konten eksternalFakta menyenangkan(?). File Microsoft Office yang diakhiri dengan _04 (mis. g. _05) adalah file XML. Jangan beri tahu departemen pemasaran, tetapi mungkin untuk mem-parsing dokumen Word dan menampilkan HTML di serverYang paling penting adalah mengingat bahwa template adalah kekuatan super. Mampu membangun markup yang tepat untuk situasi yang tepat bisa menjadi kunci UX yang hebat Bagaimana cara menggunakan HTML dengan PHP?Seperti yang Anda lihat, Anda dapat menggunakan HTML apa pun yang Anda inginkan tanpa melakukan sesuatu yang khusus atau tambahan pada file PHP Anda, asalkan berada di luar dan terpisah dari tag PHP. Dengan kata lain, jika Anda ingin menyisipkan kode PHP ke dalam file HTML, cukup tulis PHP di mana pun Anda mau (selama berada di dalam tag PHP).
Bisakah PHP berinteraksi dengan HTML?PHP dan HTML banyak berinteraksi. PHP dapat menghasilkan HTML , dan HTML dapat meneruskan informasi ke PHP. Sebelum membaca faq ini, penting bagi Anda untuk mempelajari cara mengambil variabel dari sumber eksternal. Halaman manual tentang topik ini menyertakan banyak contoh juga. |