Membuat situs web atau aplikasi web apa pun hampir tidak terpikirkan tanpa navigasi. Pengguna harus menavigasi antar halaman, membuka bagian situs yang berbeda, dan menerima berbagai informasi.
Data halaman
Namun sebelum melihat navigasi itu sendiri, ada baiknya memahami informasi apa yang dapat Anda peroleh tentang halaman secara umum dan terdiri dari apa saja URL tersebut. Untuk melakukan ini, Anda dapat menggunakan blok Get Current Page dan melihat data apa yang dihasilkannya.
- URL - alamat halaman dalam bentuk biasanya. Misalnya - https://vdjyien-app.apms.io/admin/someurl/
- Page - pengidentifikasi internal halaman, yang digunakan dalam proses bisnis AppMaster . Ini terdiri dari 22 karakter, satu set huruf acak, dan angka.
- Title - judul halaman. Namanya dalam bentuk yang bisa dibaca manusia.
- URL Params . Halaman dapat dibuat sehingga alamatnya tidak tetap tetapi juga menyertakan nilai variabel. Misalnya, halaman dapat menampilkan daftar artikel di bagian tertentu, dan pengidentifikasi bagian ini hanya ditunjukkan di URL sebagai parameter.
- Query Params . Parameter kueri tambahan ditulis di akhir URL setelah tanda “?” tanda. Misalnya, untuk laman dengan daftar artikel, parameter “?_limit=12&lang=en” mungkin menunjukkan bahwa hanya diperlukan 12 artikel dalam bahasa Inggris.
Misalnya, bayangkan sebuah halaman yang menampilkan daftar artikel blog. URL-nya diberikan sebagai “/ blog/:theme/:author.” Simbol “:” menunjukkan bahwa nilai yang ditentukan setelahnya adalah parameter. Sebagai parameter, dibutuhkan pengidentifikasi topik artikel (tema) dan penulisnya (penulis).
Untuk menavigasi ke halaman ini, Anda perlu menggunakan blok Navigate di proses bisnis.
Parameter sesuai dengan yang diuraikan sebelumnya di blok Get Current Page . Dalam hal ini, judul halaman sebenarnya tidak penting untuk navigasi karena halaman itu sendiri ditetapkan sebagai pengidentifikasi internal (Anda dapat memilihnya dari daftar halaman).
Jika halaman tidak memiliki parameter apa pun, navigasi bisa menjadi sangat sederhana; cukup pilih halaman yang diinginkan dari daftar yang disediakan. Namun pada contoh ini, ada parameter yang harus diteruskan ke blok Navigate .
Membuat halaman sumber untuk navigasi
Pertimbangkan penggunaan parameter pada contoh spesifik. Untuk melakukan ini, kami akan membuat halaman terpisah dari mana kami harus pergi ke halaman target di masa mendatang. Mari tambahkan dua elemen Select ke halaman ini (satu untuk memilih dari daftar topik, yang kedua untuk daftar penulis) dan mengisinya dengan nilai tes.
Setelah itu, Anda perlu menyiapkan alur kerja untuk tombol Navigate dengan mengeklik navigasi ke halaman arahan mana yang berfungsi. Proses ini dimulai dengan mendapatkan nilai yang dipilih dari blok Select .
Langkah selanjutnya adalah mengisi model virtual Key-Value . Array mereka digunakan untuk meneruskan parameter yang diperlukan ke blok Navigate . Model itu sendiri terdiri dari kunci ( Key ), yang merupakan nama parameter (dalam contoh ini, theme, dan author), serta nilainya ( Value , nama langsung dari topik yang dipilih, atau nama dari pengarang).
Harap diperhatikan bahwa banyak karakter yang tidak dapat digunakan di URL, termasuk karakter spasi. Oleh karena itu, nama yang ditulis sebagai “ Frank Paulsen ” di URL akan secara otomatis diubah menjadi “ Frank%20Paulsen ”. URL Encode URL dan blok URL Decode dapat digunakan untuk menyandikan dan mendekode ke standar URL. Dalam contoh ini, untuk kejelasan dan keindahan URL yang lebih baik, kami menggunakan blok Replace string dan secara mandiri mengganti spasi dengan tanda "-", menampilkan nama sebagai " Frank-Paulsen ".
Langkah terakhir adalah menggabungkan pasangan nilai kunci yang dihasilkan ke dalam satu larik untuk diteruskan sebagai parameter ke blok Navigate .
Sekarang, ketika Anda mengklik tombol tersebut, Anda akan masuk ke halaman https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/
Anda dapat memverifikasi bahwa URL-nya terdiri dari bagian konstan (https://vdjyien-app.apms.io/admin/blog/) dan variabel (No-code/Frank-Paulsen/) yang dibentuk dari nilai yang dipilih pada halaman sebelumnya.
Menggunakan parameter URL untuk mengelola konten
Tugas selanjutnya adalah menggunakan parameter URL yang diterima untuk mengubah konten halaman. Parameter ini dapat digunakan, misalnya, untuk membuat permintaan GET ke database, tetapi dalam contoh kami, kami hanya menampilkan nilainya di halaman. Untuk melakukannya, mari tambahkan dua wadah ke halaman dengan Label yang sesuai.
Mari siapkan proses bisnis berdasarkan pemicu onShow di salah satu Label . Tugasnya adalah mengurai URL, mendapatkan parameternya, dan menampilkannya di halaman. Untuk melakukan ini, kami menggunakan blok Get Current Page dan mendapatkan nilai dari setiap parameter dalam satu lingkaran.
Selanjutnya, melalui blok Switch , kami mendapatkan nilai parameter dan menampilkannya di Label yang sesuai. Pada saat yang sama, untuk parameter Author , kami akan mengganti “-” dengan spasi secara terbalik.
Sekarang saat menavigasi ke halaman tertentu, tidak hanya alamat statisnya yang akan digunakan, tetapi juga parameter URL yang memengaruhi tampilan konten sebenarnya di halaman tersebut.
Menggunakan parameter kueri
Dengan cara yang hampir sama, Anda dapat menambahkan parameter kueri ( Query Params ). Perbedaan utama mereka dari parameter URL adalah bahwa mereka bersifat opsional. Dalam contoh ini, URL harus menyertakan indikasi informasi apa yang harus ditampilkan di halaman (bagian tematik mana dan penulis mana), dan parameter tambahan membuat klarifikasi yang diperlukan. Misalnya, Anda dapat menggunakan parameter limit dan offset untuk mengatur paginasi dan menetapkan dengan tepat berapa banyak record yang akan dikueri dari database dan dari record mana untuk memulai output.
Mari tambahkan dua bidang baru ke halaman awal - Input (Integer) . Kami akan menulis parameter limit dan offset di dalamnya.
Mari buat tambahan yang diperlukan untuk proses bisnis tombol navigasi. Mari membentuk larik Query Params dengan nilai limit dan offset .
Langkah terakhir adalah menambahkan elemen dengan informasi dari parameter permintaan, serta menyelesaikan proses bisnis untuk halaman target.
Hasilnya harus berupa URL seperti ini:
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
Aplikasi mengimplementasikan navigasi dengan parameter URL dan parameter kueri dan secara dinamis menentukan konten halaman target bergantung pada parameter ini.
