SALAM ceria buat semua pembaca budiman. Kita bertemu kembali di dalam ruangan Genius Corner minggu ini, bersama latihan Ionic bahagian ke-empat. Melalui latihan kali ini, kita akan bina aplikasi ringkas yang memaparkan maklumat menggunakan kad.
Jika dibandingkan dengan komputer, paparan skrin telefon pintar adalah sangat terhad. Oleh itu, penggunaan elemen paparan berbentuk kad merupakan penyelesaian terbaik untuk mempersembahkan kandungan skrin aplikasi atau laman sesawang (web) kepada pengguna.
Secara default, penggunaan kelas ‘kad’ boleh dimasukkan ke dalam elemen HTML pilihan anda hanya dengan menambah kelas card. Antara fungsi yang paling berguna di dalam kelas ini ialah item-text-wrap yang membolehkan teks panjang disusun dengan cantik dalam kad paparan.
Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.
Latihan
Langkah 1: Buka tetingkap DOS pada sistem pengoperasian Windows, dan Terminal pada sistem pengoperasian MacOS
Langkah 2: Taip arahan berikut pada tetingkap DOS/Terminal untuk bina projek Ionic anda di dalam folder Genius Corner yang disimpan di Desktop seperti projek terdahulu.
cd Desktop
cd Genius Corner
Langkah 3: Taip arahan berikut pada tetingkap DOS/Terminal untuk membina projek Ionic anda dengan nama myCard
ionic start myCard blank
Langkah 4: Taip arahan berikut untuk masuk ke dalam folder myCard
cd myCard
Langkah 5: Taipkan arahan berikut ke dalam tetingkap DOS/Terminal memapar dan mengubah suai aplikasi anda menggunakan developer console yang terdapat di dalam pelayar seswang (web)
ionic serve
Langkah 6: Buka fail home.html yang terdapat di dalam folder myList/src/pages/home dan taipkan arahan berikut sejurus selepas elemen pembuka <body> bagi menghasilkan elemen kad.
Langkah 7: Masukkan pula kod atur cara berikut bagi memaparkan elemen kad yang lengkap dengan ikon, teks dan imej.
SEMAKAN
Dalam kod atur cara pertama, elemen kad dipecahkan kepada tiga bahagian iaitu header, kandungan utama dan footer.Setiap bahagian ini diasingkan oleh kelas item item-divider. Bagi paparan teks panjang pula, kelas item item-text-wrap digunakan bagi memastikan teks disusun dengan cantik di dalam ruangan kad.
Dalam kod atur cara kedua pula, bahagian ikon ditetapkan dengan kelas item item-avatar, manakala bahagian kandungan utama pula ditetapkan dengan kelas item item-body. Bagi memaparkan imej yang akan memenuhi ruang tanpa mengira saiz skrin peranti, kelas full-image ditetapkan pada elemen <img>.
SOALAN
Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.
- Ubah imej ikon kepada imej pilihan anda.
- Hasilkan dua lagi kad lengkap
- Masukkan footer pada kesemua kad lengkap.
Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!
