HarmonyOS Cangjie Development Language: Tutorial Praktis – Perpindahan Halaman dan Pengiriman Parameter

Selamat datang di tutorial praktis tentang pengembangan aplikasi HarmonyOS menggunakan bahasa Cangjie! Dalam tutorial ini, kita akan membahas dua konsep fundamental: perpindahan halaman (page navigation) dan pengiriman parameter antar halaman. Kedua fitur ini penting untuk membangun aplikasi multi-layar yang interaktif dan fungsional.

Daftar Isi

1. Pendahuluan
   • Apa itu Bahasa Cangjie dan mengapa menggunakannya?
   • Keuntungan menggunakan Cangjie dalam pengembangan HarmonyOS
   • Tinjauan Umum Perpindahan Halaman dan Pengiriman Parameter
2. Prasyarat
   • Lingkungan Pengembangan yang Terpasang: DevEco Studio
   • Pemahaman Dasar Bahasa ArkTS dan XML (Layout)
   • Emulator HarmonyOS atau Perangkat Nyata
3. Perpindahan Halaman Dasar
   • Membuat Dua Halaman: Halaman Utama dan Halaman Detail
   • Menggunakan Komponen <Button> untuk Memulai Perpindahan
   • Fungsi router.pushUrl(): Sintaks dan Penggunaan
   • Contoh Kode: Perpindahan Sederhana Antara Dua Halaman
4. Pengiriman Parameter Melalui URL
   • Menambahkan Parameter ke URL Tujuan
   • Menerima Parameter di Halaman Tujuan
   • Menggunakan router.getState() untuk Mengakses Parameter
   • Contoh Kode: Mengirim dan Menerima Parameter String
   • Pertimbangan Keamanan: Encoding URL
5. Pengiriman Parameter Menggunakan Objek State
   • Memahami Objek State dalam router.pushUrl()
   • Mengirim Data Kompleks: Objek dan Array
   • Menerima Data Kompleks di Halaman Tujuan
   • Contoh Kode: Mengirim dan Menerima Objek JSON
6. Meneruskan Data dengan router.replaceUrl() dan router.back()
   • Perbedaan antara pushUrl() dan replaceUrl()
   • Menggunakan replaceUrl() untuk Mengganti Halaman Saat Ini
   • Menggunakan router.back() untuk Kembali ke Halaman Sebelumnya
   • Mengirim Data Saat Kembali dengan router.back()
   • Contoh Kode: Mengimplementasikan Fungsi “Kembali” dengan Data
7. Penanganan Kesalahan dan Kasus Khusus
   • Menangani URL yang Tidak Valid
   • Menangani Parameter yang Hilang atau Tidak Valid
   • Pencegahan Serangan Cross-Site Scripting (XSS)
8. Praktik Terbaik untuk Perpindahan Halaman dan Pengiriman Parameter
   • Meminimalkan Pengiriman Data yang Tidak Perlu
   • Menggunakan Tipe Data yang Tepat untuk Parameter
   • Validasi Data Sebelum Digunakan
   • Mengorganisir Kode Perpindahan Halaman untuk Keterbacaan
9. Contoh Proyek Lengkap
   • Struktur Proyek
   • Kode Sumber untuk Semua Halaman
   • Instruksi Kompilasi dan Pengujian
10. Troubleshooting dan FAQ
    • Masalah Umum dan Solusinya
    • Pertanyaan yang Sering Diajukan
11. Kesimpulan
    • Ringkasan Poin-Poin Penting
    • Langkah Selanjutnya untuk Pengembangan Aplikasi HarmonyOS
12. Referensi
    • Dokumentasi Resmi HarmonyOS
    • Sumber Daya Belajar Tambahan

1. Pendahuluan

Apa itu Bahasa Cangjie dan Mengapa Menggunakannya?

Bahasa Cangjie adalah bahasa pemrograman deklaratif modern yang dirancang khusus untuk pengembangan aplikasi HarmonyOS. Bahasa ini menekankan kemudahan penggunaan, keamanan, dan efisiensi. Cangjie memungkinkan pengembang untuk menulis kode yang lebih ringkas dan mudah dipelihara dibandingkan dengan bahasa pemrograman tradisional.

Cangjie memiliki fitur-fitur unggulan seperti:

• Sintaks yang Sederhana dan Mudah Dipelajari: Sintaks Cangjie dirancang agar intuitif, sehingga mudah dipelajari oleh pengembang dengan berbagai tingkat pengalaman.
• Keamanan yang Ditingkatkan: Cangjie memiliki fitur keamanan bawaan yang membantu mencegah kesalahan umum dan kerentanan keamanan.
• Kinerja yang Optimal: Cangjie dikompilasi ke kode asli, menghasilkan kinerja yang optimal pada perangkat HarmonyOS.
• Dukungan untuk Fitur HarmonyOS: Cangjie terintegrasi secara erat dengan fitur-fitur HarmonyOS, memungkinkan pengembang untuk mengakses kemampuan perangkat keras dan perangkat lunak dengan mudah.

Keuntungan Menggunakan Cangjie dalam Pengembangan HarmonyOS

Menggunakan Cangjie dalam pengembangan HarmonyOS menawarkan berbagai keuntungan, termasuk:

• Produktivitas yang Lebih Tinggi: Sintaks yang sederhana dan fitur keamanan bawaan membantu pengembang menulis kode lebih cepat dan dengan lebih sedikit kesalahan.
• Kualitas Aplikasi yang Lebih Baik: Fitur keamanan dan kinerja yang optimal menghasilkan aplikasi yang lebih stabil dan responsif.
• Pemeliharaan yang Lebih Mudah: Kode Cangjie yang ringkas dan mudah dibaca lebih mudah dipelihara dan diperbarui.
• Akses ke Fitur HarmonyOS: Cangjie memungkinkan pengembang untuk memanfaatkan semua fitur yang ditawarkan oleh platform HarmonyOS.

Tinjauan Umum Perpindahan Halaman dan Pengiriman Parameter

Perpindahan halaman dan pengiriman parameter adalah dua konsep penting dalam pengembangan aplikasi multi-layar. Perpindahan halaman memungkinkan pengguna untuk berpindah antar layar yang berbeda dalam aplikasi, sedangkan pengiriman parameter memungkinkan pengembang untuk mengirim data antar halaman.

Dalam tutorial ini, kita akan membahas:

• Cara melakukan perpindahan halaman dasar menggunakan fungsi router.pushUrl().
• Cara mengirim parameter melalui URL menggunakan fungsi router.pushUrl().
• Cara mengirim parameter menggunakan objek state menggunakan fungsi router.pushUrl().
• Cara menggunakan fungsi router.replaceUrl() dan router.back() untuk perpindahan halaman yang lebih kompleks.
• Cara menangani kesalahan dan kasus khusus terkait perpindahan halaman dan pengiriman parameter.

2. Prasyarat

Lingkungan Pengembangan yang Terpasang: DevEco Studio

Untuk mengikuti tutorial ini, Anda memerlukan lingkungan pengembangan DevEco Studio yang terpasang di komputer Anda. DevEco Studio adalah IDE resmi untuk pengembangan aplikasi HarmonyOS.

Anda dapat mengunduh dan menginstal DevEco Studio dari situs web resmi HarmonyOS.

Pemahaman Dasar Bahasa ArkTS dan XML (Layout)

Anda juga perlu memiliki pemahaman dasar tentang bahasa ArkTS dan XML (Layout). ArkTS adalah bahasa pemrograman utama yang digunakan dalam pengembangan aplikasi HarmonyOS, sedangkan XML digunakan untuk mendefinisikan layout antarmuka pengguna.

Jika Anda belum familiar dengan ArkTS dan XML, Anda dapat menemukan banyak sumber daya belajar online, termasuk dokumentasi resmi HarmonyOS dan tutorial dari pihak ketiga.

Emulator HarmonyOS atau Perangkat Nyata

Untuk menguji aplikasi Anda, Anda memerlukan emulator HarmonyOS atau perangkat nyata yang menjalankan HarmonyOS. Emulator adalah program perangkat lunak yang mensimulasikan lingkungan HarmonyOS di komputer Anda. Perangkat nyata adalah perangkat fisik yang menjalankan HarmonyOS.

Anda dapat menggunakan emulator yang disertakan dalam DevEco Studio atau menghubungkan perangkat nyata ke komputer Anda.

3. Perpindahan Halaman Dasar

Membuat Dua Halaman: Halaman Utama dan Halaman Detail

Langkah pertama adalah membuat dua halaman dalam proyek HarmonyOS Anda: halaman utama dan halaman detail. Halaman utama akan berisi tombol yang akan mengarahkan pengguna ke halaman detail. Halaman detail akan menampilkan informasi tambahan.

Dalam DevEco Studio, Anda dapat membuat halaman baru dengan mengklik kanan pada folder `pages` di panel Project dan memilih `New > Page`. Beri nama halaman pertama `MainPage` dan halaman kedua `DetailPage`.

Menggunakan Komponen <Button> untuk Memulai Perpindahan

Di halaman utama (`MainPage`), tambahkan komponen <Button>. Tombol ini akan digunakan untuk memicu perpindahan ke halaman detail.

Kode contoh untuk halaman utama (`MainPage.ets`):

“`typescript

MainPage.ets

“`
“`typescript
import router from ‘@ohos.router’;

@Entry
@Component
struct MainPage {
build() {
Row() {
Column() {
Button(‘Pindah ke Halaman Detail’)
.onClick(() => {
router.pushUrl({
url: ‘pages/DetailPage’
});
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}
“`

Fungsi router.pushUrl(): Sintaks dan Penggunaan

Fungsi router.pushUrl() digunakan untuk melakukan perpindahan halaman dalam aplikasi HarmonyOS. Fungsi ini menerima objek sebagai argumen, yang berisi informasi tentang halaman tujuan.

Sintaks fungsi router.pushUrl() adalah sebagai berikut:

“`typescript
router.pushUrl(options: {
url: string; // URL halaman tujuan
params?: object; // Parameter yang akan dikirim ke halaman tujuan (opsional)
replace?: boolean; // Apakah akan mengganti halaman saat ini dalam riwayat (opsional)
});
“`

• url: Wajib. Menentukan URL halaman tujuan. URL harus relatif terhadap folder `pages` dalam proyek Anda.
• params: Opsional. Menentukan parameter yang akan dikirim ke halaman tujuan. Parameter dapat berupa objek JavaScript apa pun.
• replace: Opsional. Menentukan apakah akan mengganti halaman saat ini dalam riwayat. Jika diatur ke `true`, halaman saat ini akan diganti dengan halaman tujuan. Jika diatur ke `false` (default), halaman tujuan akan ditambahkan ke riwayat.

Contoh Kode: Perpindahan Sederhana Antara Dua Halaman

Contoh kode lengkap untuk perpindahan sederhana antara dua halaman (MainPage dan DetailPage) telah ditunjukkan di atas (bagian “Menggunakan Komponen <Button> untuk Memulai Perpindahan”).

Sekarang, mari kita buat halaman detail (`DetailPage.ets`):

“`typescript

DetailPage.ets

“`
“`typescript
@Entry
@Component
struct DetailPage {
build() {
Row() {
Column() {
Text(‘Ini adalah Halaman Detail’)
.fontSize(24)
}
.width(‘100%’)
}
.height(‘100%’)
}
}
“`

Ketika tombol di halaman utama diklik, aplikasi akan berpindah ke halaman detail dan menampilkan teks “Ini adalah Halaman Detail”.

4. Pengiriman Parameter Melalui URL

Menambahkan Parameter ke URL Tujuan

Untuk mengirim parameter melalui URL, Anda perlu menambahkan parameter ke URL tujuan menggunakan sintaks query string. Sintaks query string adalah serangkaian pasangan nama-nilai yang dipisahkan oleh tanda ampersand (`&`). Setiap pasangan nama-nilai terdiri dari nama parameter, tanda sama dengan (`=`), dan nilai parameter.

Contoh:

“`
pages/DetailPage?name=John&age=30
“`

Dalam contoh ini, kita mengirim dua parameter: `name` dengan nilai `John` dan `age` dengan nilai `30`.

Menerima Parameter di Halaman Tujuan

Untuk menerima parameter di halaman tujuan, Anda dapat menggunakan fungsi router.getState(). Fungsi ini mengembalikan objek yang berisi informasi tentang status halaman, termasuk parameter yang dikirim melalui URL.

Menggunakan router.getState() untuk Mengakses Parameter

Fungsi router.getState() mengembalikan objek dengan properti berikut:

• name: Nama halaman.
• path: Jalur halaman.
• params: Objek yang berisi parameter yang dikirim melalui URL.
• state: Objek state yang dikirim menggunakan objek state (akan dibahas nanti).

Untuk mengakses parameter yang dikirim melalui URL, Anda dapat menggunakan properti params.

Contoh Kode: Mengirim dan Menerima Parameter String

Mari kita modifikasi contoh sebelumnya untuk mengirim parameter nama ke halaman detail.

Kode contoh untuk halaman utama (`MainPage.ets`):

“`typescript

MainPage.ets

“`
“`typescript
import router from ‘@ohos.router’;

@Entry
@Component
struct MainPage {
build() {
Row() {
Column() {
Button(‘Pindah ke Halaman Detail dengan Parameter’)
.onClick(() => {
router.pushUrl({
url: ‘pages/DetailPage?name=John’
});
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}
“`

Kode contoh untuk halaman detail (`DetailPage.ets`):

“`typescript

DetailPage.ets

“`
“`typescript
import router from ‘@ohos.router’;

@Entry
@Component
struct DetailPage {
@State name: string = ”;

aboutToAppear() {
let state = router.getState();
if (state && state.params && state.params.name) {
this.name = state.params.name;
}
}

build() {
Row() {
Column() {
Text(‘Ini adalah Halaman Detail’)
.fontSize(24)
Text(‘Nama: ‘ + this.name)
.fontSize(18)
}
.width(‘100%’)
}
.height(‘100%’)
}
}
“`

Dalam contoh ini, kita mengirim parameter `name` dengan nilai `John` ke halaman detail. Di halaman detail, kita menggunakan fungsi router.getState() untuk mengakses parameter `name` dan menampilkannya di layar.

Pertimbangan Keamanan: Encoding URL

Saat mengirim parameter melalui URL, penting untuk melakukan encoding URL. Encoding URL adalah proses mengubah karakter khusus menjadi format yang aman untuk ditransmisikan melalui URL. Ini mencegah karakter seperti spasi, tanda tanya, dan ampersand disalahartikan oleh browser atau server.

Anda dapat menggunakan fungsi encodeURIComponent() di JavaScript untuk melakukan encoding URL.

Contoh:

“`typescript
let name = ‘John Doe?’;
let encodedName = encodeURIComponent(name);
let url = ‘pages/DetailPage?name=’ + encodedName;
router.pushUrl({ url: url });
“`

Dalam contoh ini, kita melakukan encoding URL pada parameter `name` sebelum menambahkannya ke URL.

5. Pengiriman Parameter Menggunakan Objek State

Memahami Objek State dalam router.pushUrl()

Selain mengirim parameter melalui URL, Anda juga dapat mengirim parameter menggunakan objek state. Objek state adalah objek JavaScript yang dikirim ke halaman tujuan bersama dengan URL.

Objek state dapat berisi data yang lebih kompleks daripada parameter URL, seperti objek dan array.

Mengirim Data Kompleks: Objek dan Array

Untuk mengirim data kompleks, Anda dapat membuat objek JavaScript yang berisi data yang ingin Anda kirim dan menambahkannya ke properti `state` dalam objek yang dikirim ke fungsi router.pushUrl().

Contoh:

“`typescript
let user = {
name: ‘John Doe’,
age: 30,
address: {
street: ‘123 Main St’,
city: ‘Anytown’
}
};

router.pushUrl({
url: ‘pages/DetailPage’,
params: {
id: 123 //contoh params tetap dikirim
},
state: {
user: user
}
});
“`

Dalam contoh ini, kita mengirim objek `user` sebagai objek state ke halaman detail.

Perhatikan bahwa kita juga mengirim `params` secara terpisah, keduanya bisa dikirim bersamaan.

Menerima Data Kompleks di Halaman Tujuan

Untuk menerima data kompleks di halaman tujuan, Anda dapat menggunakan fungsi router.getState() dan mengakses properti state.

Contoh:

“`typescript

DetailPage.ets

“`
“`typescript
import router from ‘@ohos.router’;

@Entry
@Component
struct DetailPage {
@State name: string = ”;
@State age: number = 0;
@State street: string = ”;
@State city: string = ”;
@State id: number = 0; //Contoh params yang diterima

aboutToAppear() {
let state = router.getState();
if (state && state.state && state.state.user) {
this.name = state.state.user.name;
this.age = state.state.user.age;
this.street = state.state.user.address.street;
this.city = state.state.user.address.city;
}
if (state && state.params && state.params.id){
this.id = state.params.id;
}
}

build() {
Row() {
Column() {
Text(‘Ini adalah Halaman Detail’)
.fontSize(24)
Text(‘Nama: ‘ + this.name)
.fontSize(18)
Text(‘Umur: ‘ + this.age)
.fontSize(18)
Text(‘Jalan: ‘ + this.street)
.fontSize(18)
Text(‘Kota: ‘ + this.city)
.fontSize(18)
Text(‘ID: ‘ + this.id)
.fontSize(18)
}
.width(‘100%’)
}
.height(‘100%’)
}
}
“`

Dalam contoh ini, kita mengakses properti `user` dari objek state dan menampilkan properti `name`, `age`, `street`, dan `city` di layar. Kita juga mengakses `id` dari `params` yang dikirim bersamaan.

Contoh Kode: Mengirim dan Menerima Objek JSON

Contoh kode lengkap untuk mengirim dan menerima objek JSON telah ditunjukkan di atas (bagian “Mengirim Data Kompleks: Objek dan Array” dan “Menerima Data Kompleks di Halaman Tujuan”).

6. Meneruskan Data dengan router.replaceUrl() dan router.back()

Perbedaan antara pushUrl() dan replaceUrl()

Fungsi router.pushUrl() dan router.replaceUrl() keduanya digunakan untuk melakukan perpindahan halaman, tetapi mereka memiliki perbedaan penting. Fungsi router.pushUrl() menambahkan halaman tujuan ke riwayat navigasi, sedangkan fungsi router.replaceUrl() mengganti halaman saat ini dalam riwayat navigasi dengan halaman tujuan.

Artinya, jika Anda menggunakan fungsi router.pushUrl(), pengguna dapat kembali ke halaman sebelumnya dengan menekan tombol “Kembali”. Namun, jika Anda menggunakan fungsi router.replaceUrl(), pengguna tidak dapat kembali ke halaman sebelumnya dengan menekan tombol “Kembali”.

Menggunakan replaceUrl() untuk Mengganti Halaman Saat Ini

Fungsi router.replaceUrl() berguna dalam situasi di mana Anda ingin mengganti halaman saat ini dengan halaman yang baru tanpa menambahkan halaman baru ke riwayat navigasi. Misalnya, Anda dapat menggunakan fungsi router.replaceUrl() untuk mengarahkan pengguna ke halaman login setelah mereka berhasil logout.

Contoh:

“`typescript
router.replaceUrl({
url: ‘pages/LoginPage’
});
“`

Dalam contoh ini, kita mengarahkan pengguna ke halaman login dan mengganti halaman saat ini dalam riwayat navigasi.

Menggunakan router.back() untuk Kembali ke Halaman Sebelumnya

Fungsi router.back() digunakan untuk kembali ke halaman sebelumnya dalam riwayat navigasi. Fungsi ini tidak menerima argumen apa pun.

Contoh:

“`typescript
router.back();
“`

Dalam contoh ini, kita kembali ke halaman sebelumnya dalam riwayat navigasi.

Mengirim Data Saat Kembali dengan router.back()

Anda juga dapat mengirim data saat kembali ke halaman sebelumnya menggunakan fungsi router.back(). Untuk melakukan ini, Anda perlu menambahkan properti params ke objek yang dikirim ke fungsi router.back().

Contoh:

“`typescript
router.back({
params: {
message: ‘Data berhasil diperbarui’
}
});
“`

Dalam contoh ini, kita mengirim parameter `message` dengan nilai `Data berhasil diperbarui` kembali ke halaman sebelumnya.

Untuk menerima data di halaman sebelumnya, Anda dapat menggunakan fungsi aboutToAppear() dan memeriksa properti `state` dari objek yang dikembalikan oleh fungsi router.getState().

Contoh Kode: Mengimplementasikan Fungsi “Kembali” dengan Data

Mari kita buat contoh kode lengkap untuk mengimplementasikan fungsi “Kembali” dengan data.

Kode contoh untuk halaman detail (`DetailPage.ets`):

“`typescript

DetailPage.ets

“`
“`typescript
import router from ‘@ohos.router’;

@Entry
@Component
struct DetailPage {
@State message: string = ”;

build() {
Row() {
Column() {
Text(‘Ini adalah Halaman Detail’)
.fontSize(24)
Button(‘Kembali dengan Pesan’)
.onClick(() => {
router.back({
params: {
message: ‘Data berhasil diperbarui’
}
});
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}
“`

Kode contoh untuk halaman utama (`MainPage.ets`):

“`typescript

MainPage.ets

“`
“`typescript
import router from ‘@ohos.router’;

@Entry
@Component
struct MainPage {
@State receivedMessage: string = ”;

aboutToAppear() {
let state = router.getState();
if (state && state.params && state.params.message) {
this.receivedMessage = state.params.message;
}
}

build() {
Row() {
Column() {
Button(‘Pindah ke Halaman Detail’)
.onClick(() => {
router.pushUrl({
url: ‘pages/DetailPage’
});
})
Text(‘Pesan dari Detail: ‘ + this.receivedMessage)
.fontSize(18)
}
.width(‘100%’)
}
.height(‘100%’)
}
}
“`

Dalam contoh ini, ketika tombol “Kembali dengan Pesan” di halaman detail diklik, aplikasi akan kembali ke halaman utama dan mengirim parameter `message` dengan nilai `Data berhasil diperbarui`. Di halaman utama, kita menggunakan fungsi aboutToAppear() untuk mengakses parameter `message` dan menampilkannya di layar.

7. Penanganan Kesalahan dan Kasus Khusus

Menangani URL yang Tidak Valid

Penting untuk menangani kasus di mana URL yang diberikan ke fungsi router.pushUrl() tidak valid. Jika URL tidak valid, fungsi router.pushUrl() akan melemparkan pengecualian. Anda dapat menangani pengecualian ini menggunakan blok `try…catch`.

Contoh:

“`typescript
try {
router.pushUrl({
url: ‘pages/NonExistentPage’
});
} catch (e) {
console.error(‘URL tidak valid:’, e);
// Menampilkan pesan kesalahan kepada pengguna
}
“`

Dalam contoh ini, kita mencoba mengarahkan pengguna ke halaman yang tidak ada (`NonExistentPage`). Karena URL tidak valid, fungsi router.pushUrl() akan melemparkan pengecualian. Kita menangkap pengecualian ini menggunakan blok `try…catch` dan menampilkan pesan kesalahan kepada pengguna.

Menangani Parameter yang Hilang atau Tidak Valid

Penting juga untuk menangani kasus di mana parameter yang dikirim ke halaman tujuan hilang atau tidak valid. Anda dapat melakukan ini dengan memeriksa keberadaan dan validitas parameter di halaman tujuan.

Contoh:

“`typescript

DetailPage.ets

“`
“`typescript
import router from ‘@ohos.router’;

@Entry
@Component
struct DetailPage {
@State name: string = ‘Nama tidak tersedia’;

aboutToAppear() {
let state = router.getState();
if (state && state.params && state.params.name) {
this.name = state.params.name;
} else {
// Menampilkan pesan kesalahan atau menggunakan nilai default
console.warn(‘Parameter nama hilang atau tidak valid’);
}
}

build() {
Row() {
Column() {
Text(‘Ini adalah Halaman Detail’)
.fontSize(24)
Text(‘Nama: ‘ + this.name)
.fontSize(18)
}
.width(‘100%’)
}
.height(‘100%’)
}
}
“`

Dalam contoh ini, kita memeriksa apakah parameter `name` ada di halaman detail. Jika parameter `name` hilang atau tidak valid, kita menampilkan pesan kesalahan atau menggunakan nilai default.

Pencegahan Serangan Cross-Site Scripting (XSS)

Saat menerima data dari URL atau objek state, penting untuk mencegah serangan Cross-Site Scripting (XSS). Serangan XSS terjadi ketika penyerang memasukkan kode JavaScript yang berbahaya ke dalam halaman web. Kode JavaScript yang berbahaya ini kemudian dapat dijalankan oleh browser pengguna, memungkinkan penyerang untuk mencuri informasi sensitif atau melakukan tindakan yang tidak sah.

Untuk mencegah serangan XSS, Anda perlu melakukan sanitasi data yang diterima dari URL atau objek state sebelum menampilkannya di halaman web. Sanitasi data adalah proses menghapus atau mengubah karakter yang berbahaya dari data.

Anda dapat menggunakan fungsi encodeForHtml() atau library sanitasi lainnya untuk melakukan sanitasi data.

Contoh:

“`typescript
// Asumsi ada fungsi encodeForHtml yang melakukan encoding HTML
let sanitizedName = encodeForHtml(this.name);
Text(‘Nama: ‘ + sanitizedName)
.fontSize(18)
“`

8. Praktik Terbaik untuk Perpindahan Halaman dan Pengiriman Parameter

Meminimalkan Pengiriman Data yang Tidak Perlu

Usahakan untuk meminimalkan pengiriman data yang tidak perlu antar halaman. Mengirim data yang tidak perlu dapat memperlambat aplikasi Anda dan menggunakan lebih banyak sumber daya.

Hanya kirim data yang benar-benar dibutuhkan oleh halaman tujuan.

Menggunakan Tipe Data yang Tepat untuk Parameter

Gunakan tipe data yang tepat untuk parameter yang Anda kirim. Ini akan membantu Anda mencegah kesalahan dan meningkatkan kinerja aplikasi Anda.

Misalnya, jika Anda mengirim angka, gunakan tipe data `number`. Jika Anda mengirim teks, gunakan tipe data `string`.

Validasi Data Sebelum Digunakan

Validasi data sebelum menggunakannya. Ini akan membantu Anda mencegah kesalahan dan memastikan bahwa data yang Anda gunakan valid.

Misalnya, jika Anda menerima angka, pastikan bahwa angka tersebut berada dalam rentang yang diharapkan. Jika Anda menerima teks, pastikan bahwa teks tersebut memiliki format yang benar.

Mengorganisir Kode Perpindahan Halaman untuk Keterbacaan

Organisir kode perpindahan halaman Anda untuk keterbacaan. Ini akan membantu Anda dan pengembang lain untuk memahami dan memelihara kode Anda.

Gunakan fungsi dan variabel yang bermakna. Tambahkan komentar untuk menjelaskan apa yang dilakukan oleh kode Anda.

9. Contoh Proyek Lengkap

Struktur Proyek

Berikut adalah struktur proyek contoh yang mengimplementasikan perpindahan halaman dan pengiriman parameter:

“`
MyProject/
├── entry/
│ ├── src/
│ │ ├── main/
│ │ │ ├── ets/
│ │ │ │ ├── MainPage.ets
│ │ │ │ ├── DetailPage.ets
│ │ │ │ └── …
│ │ │ └── resources/
│ │ └── ohosTest/
│ └── build-profile.json5
├── ohos_modules/
└── …
“`

Kode Sumber untuk Semua Halaman

Kode sumber untuk semua halaman (MainPage.ets, DetailPage.ets) telah ditunjukkan di bagian-bagian sebelumnya. Anda dapat menggabungkannya untuk membuat proyek lengkap.

Contoh sederhana ini mencakup perpindahan halaman dasar, pengiriman parameter melalui URL dan objek state, serta implementasi fungsi “Kembali” dengan data.

Instruksi Kompilasi dan Pengujian

1. Buka proyek di DevEco Studio.
2. Pastikan Anda telah mengkonfigurasi emulator atau perangkat nyata.
3. Klik tombol “Build” untuk membangun proyek.
4. Klik tombol “Run” untuk menjalankan aplikasi di emulator atau perangkat nyata.

Setelah aplikasi berjalan, Anda dapat menguji fitur perpindahan halaman dan pengiriman parameter dengan mengikuti petunjuk yang diberikan di bagian-bagian sebelumnya.

10. Troubleshooting dan FAQ

Masalah Umum dan Solusinya

• Halaman tidak berpindah:
  • Periksa apakah URL yang diberikan ke fungsi router.pushUrl() valid.
  • Pastikan bahwa file halaman tujuan ada di folder `pages` dalam proyek Anda.
  • Periksa apakah Anda telah mengimpor modul router dengan benar.
• Parameter tidak diterima di halaman tujuan:
  • Periksa apakah Anda mengirim parameter dengan benar.
  • Pastikan bahwa Anda mengakses parameter dengan benar di halaman tujuan menggunakan fungsi router.getState().
  • Periksa apakah Anda telah melakukan encoding URL pada parameter yang dikirim melalui URL.
• Aplikasi crash saat berpindah halaman:
  • Periksa log untuk mengetahui pengecualian atau kesalahan yang terjadi.
  • Pastikan bahwa Anda menangani semua kemungkinan pengecualian dan kesalahan dengan benar.
  • Periksa apakah Anda menggunakan tipe data yang tepat untuk parameter yang Anda kirim.

Pertanyaan yang Sering Diajukan

• Bagaimana cara mengirim data yang lebih kompleks daripada string dan angka?

  Anda dapat mengirim data yang lebih kompleks menggunakan objek state. Objek state dapat berisi data JavaScript apa pun, termasuk objek dan array.

• Bagaimana cara mencegah serangan XSS?

  Anda dapat mencegah serangan XSS dengan melakukan sanitasi data yang diterima dari URL atau objek state sebelum menampilkannya di halaman web. Anda dapat menggunakan fungsi encodeForHtml() atau library sanitasi lainnya untuk melakukan sanitasi data.

• Bagaimana cara mengimplementasikan fungsi “Kembali” dengan data?

  Anda dapat mengimplementasikan fungsi “Kembali” dengan data menggunakan fungsi router.back() dan menambahkan properti params ke objek yang dikirim ke fungsi router.back().

11. Kesimpulan

Ringkasan Poin-Poin Penting

Dalam tutorial ini, kita telah membahas dua konsep fundamental dalam pengembangan aplikasi HarmonyOS: perpindahan halaman dan pengiriman parameter. Kita telah membahas cara melakukan perpindahan halaman dasar menggunakan fungsi router.pushUrl(), cara mengirim parameter melalui URL menggunakan fungsi router.pushUrl(), cara mengirim parameter menggunakan objek state menggunakan fungsi router.pushUrl(), cara menggunakan fungsi router.replaceUrl() dan router.back() untuk perpindahan halaman yang lebih kompleks, dan cara menangani kesalahan dan kasus khusus terkait perpindahan halaman dan pengiriman parameter.

Perpindahan halaman dan pengiriman parameter adalah keterampilan penting untuk membangun aplikasi multi-layar yang interaktif dan fungsional.

Langkah Selanjutnya untuk Pengembangan Aplikasi HarmonyOS

Setelah mempelajari dasar-dasar perpindahan halaman dan pengiriman parameter, Anda dapat mulai menjelajahi fitur-fitur lain dari platform HarmonyOS. Anda dapat mempelajari tentang