Menampilkan Data Dari Form Input Saat Tombol Di Klik

Assalamualaikum Wr. Wb.



 Pada kesempatan kali ini saya akan share ilmu yaitu tentang bagaimana caranya "MENAMPILKAN DATA DARI FORM INPUT", dengan menggunakan Framework Ionic. Iya benar sekali ini adalah materi tentang ANDROID.


Materi ini saya dapat ketika saya PKL dan kebetulan juga saya PKL di @labakselerasi Kursus Komputer dan Dev Bootcamp yang berada di kawasan Gondang Mojokerto. Tempat dimana saya banyak mendapat ilmu tentang dunia IT. berikut ini saya akan memberikan link sosial media dari Lab Akselerasi jika mungkin anda ingin ngepoin dan  ingin belajar IT tapi tidak tahu tempatnya nya dimana yang bagus langsung saja  Instagram Kursus Komputer $ Dev Bootcamp dan Facebook Kursus Komputer $ Dev Bootcamp

Persiapan sebelum ngoding :



 Pastikan sudah terisntal Ionic pada system OS anda untuk Cara Install Ionic bisa klik disini. dan pastikan versinya terbaru atau minimal sama dengan yang saya gunakan. Saya menggunakan versi 5.2.7

2. Text Editor

3. Kopi dan sedikit campuran senja yang hangat menemani :v

4. Membuat Page baru dengan nama Tab3

5.  Pemahaman tentang Case-sensitive

Saya anggap anda semua sudah menginstal Ionic dan tinggal GASSS saja, karena jika versi teman-teman berbeda atau di bawahnya akan terjadi beberapa kendala yang akan muncul dan tentunya akan membuat kepala dan laptop anda mendidih di buatnya. hehehe

Karena saya belum sebegitu paham dengan materi ini, saya akan share dengan pemahaman saya.

Sedikit tambahan yaitu tentang Case-Sensitive


    Sifat case-sensitive ini merupakan salah satu karakteristik bahasa pemrogaman JavaScript. Seluruh keyword, operator, variable name, even handlers, objek properties, dll memakai konsep case-sensitive ini. Perlu dicatat bahwa penulisan keyword-keyword di JavaScript adalah dengan huruf kecil semua. Misalkan jika kita menggunakan fitur control statement seperti if, maka Anda harus pastikan bahwa keyword yang anda tulis adalah if bukannya If. Maksud utama dari case-sensitive ini adalah agar Anda dapat lebih cermat lagi dengan penggunaan huruf kapital ketika menentukan dan mengakses variable. Satu kesalahan saja dalam penulisan keyword, operator, variable name, even handlers, objek properties, dll dapat merubah seluruh script yang ada dan harus membutuhkan cukup waktu untuk mendebug-nya.


Langkah - langkah :

1. Daftarkan atau register class Formsmodule, ReactiveFormsModule yang berada pada di dalam file app.module.ts


Tambahkan sesuai dengan contoh di atas iyaaa.


2. Buat design atau tampilan yang terdiri dari Form dan Button yang berada pada folder tab3 dengan nama tab3.page,html

         a. buka folder tab3   
         

        b. tambahkan script sebagai berikut ini untuk membuat 1 form dan 1 button. Anda bisa mengubah sesuai selera anda masing-masing.
         
perlu di ingat tambahkan script tersebut di antara tag buka dan tutup Ion-Content atau "<Ion-Content> Tambahkan script anda di sini </Ion-Content>".  dan ingat penulisan harus benar, besar/kecil huruf berpengaruh seperti yang saya jelaskan di atas.


3. Kemudian buka file yang bernama tab3.page.ts dan tulis script sebagai berikut


Pastikan anda menambahkan sesuai contoh yang di atas


4. Langkah terakhir jalankan ionic atau ketik seperti berikut ini pada Terminal


Maka anda akan secara otomatis di arahkan ke Browser atau peramban, setelah terbuka klik kanan pilih inspect elemen kemudian pilih console untuk mengetahui apakah ada eror pada script anda. Contoh seperti berikut ini 

Dan pastikan tidak ada eror yang muncul pada ketika kita Inspect Element. jika tidak terdapat eror maka anda telah berhasil. Horeeeeeee!!!!!!!!!!!



Demikian teman-teman sekalian materi yang bisa saya bagikan pada kesempatan kali ini. Mungkin ada kata yang kurang jelas saya atas nama pribadi meminta maaf yang sebesar-besarnya. "Sebagus-bagusnya karya pasti ada yang tidak suka, sejelek-jeleknya karya pasti ada yang suka"


Assalamualaikum Wr. Wb.







Komentar

Postingan populer dari blog ini

Menampilkan Data Dari Form ke Tabel Secara Dinamis

Cara Menampilkan Data Dari Database ke Tabel Dengan Javascript

Cara Menampilkan Data Dengan JavaScript