Pada video sebelumnya kita sudah pernah menambahkan attribute type pada tag input, dengan nilai email agar browser melakukan validasi. Ternyata pada HTML, masih terdapat banyak nilai yang bisa kita isikan pada attribute type. Contohnya bisa dilihat pada layar. Kita akan bahas beberapa nilai pada attribute type yang dapat kita gunakan untuk membantu kita dalam bekerja dengan form.

Yang pertama kita bahas dahulu beberapa nilai attribute type yang dapat mengubah virtual keyboard pada mobile devices. Kalau kita sedang mengakses web dengan menggunakan smartphone atau tablet, biasanya pada saat kita mengklik element input, maka akan keluar virtual keyboard. Nah, ada beberapa tombol pada virtual keyboard yang biasanya berubah pada saat kita sedang fokus pada type input tertentu. Beberapa nilai pada attribute type yang bisa mempengaruhi virtual keyboard adalah email, tel, url, search dan number.

Ini adalah contoh dari tag input yang kita beri attribute type=”number”. Kalau kita klik menggunakan tablet, maka kita mendapatkan virtual keyboard dengan tombol yang berbeda. Tombol hanya menampilkan angka-angka saja. Tidak ada huruf. Tujuannya adalah untuk mempermudah user dalam memasukkan data ke input.

Agar lebih jelas kita coba praktek. Untuk melihat virtual keyboard, kita harus mencobanya di mobile device seperti tablet atau smartphone ya. Dalam video ini saya menggunakan tablet Mi Pad. Dan agar tampilan dari Xiaomi dapat muncul di PC, saya menggunakan program GlideX dari Asus. Bagi teman-teman yang ingin menggunakan GlideX bisa unduh dari situs Asus. Tersedia versi gratis dimana kita bisa menghubungkan PC dengan Tablet melalui WIFI. Atau kalau teman-teman ingin yang lebih kencang, bisa membeli lisensi pro dimana kita bisa menghubungkan PC dengan Tablet melalui kabel USB.

Nah, disini kita bisa melihat tampilan Android, yang sebenarnya adalah tampilan dari Mi Pad ya. Kita buka browser. Kita coba arahkan ke URL situs kita yaitu http://localhost/php/form.php

Namun disini kita mendapatkan error ya. Hal ini disebabkan karena kita tidak bisa menggunakan localhost pada URL kita. Karena localhost berarti mengakses device itu sendiri. Kalau kita menggunakan localhost pada Mi Pad, artinya kita menyuruh Mi Pad untuk mengakses Mi Pad itu sendiri. Sedangkan web server kita saat ini berada di PC. Untuk itu kita mesti mengganti URL-nya agar Mi Pad dapat mengakses PC.

Caranya adalah dengan mengubah kata localhost menjadi IP PC. Bagaimana caranya? Pertama kita mesti mencari dahulu berapa nilai IP PC. Kita buka visual studio code. Kita buka terminal. Lalu kita ketik perintah ipconfig. Kebetulan PC saya menggunakan sistem operasi Windows ya. Apabila teman-teman menggunakan sistem operasi Linux dan Macox, maka nama perintahnya adalah ifconfig.

Kita cari nilai dari IP versi 4 ya. Bentuknya adalah 4 buah angka yang dipisahkan dengan tiga buah titik. Kalau sudah dapat, maka kita copy nilainya. Kemudian kita buka Xampp Control Panel. Kita buka konfigurasi dari httpd.

Kita cari kata listen. Disini kita bisa menggantinya menjadi IP ditambah tanda titik dua dan nomor port default untuk httpd yaitu 80. Kita simpan dan restart apache.

Kita kembali ke tablet. Kita ganti URL-nya dari yang tadinya menggunakan kata localhost menjadi menggunakan IP. Sekarang kita sudah bisa mengakses PC dari Tablet.

Kita lihat lagi kode kita. Disini kita memiliki 2 buah tag input ya. Yang pertama adalah email menggunakan type text. Dan yang kedua adalah password menggunakan type text juga. Untuk melihat perbedaannya, pertama kita ubah dahulu email menjadi menggunakan type email.

Kita buka situs kita di tablet. Perhatikan kalau kita klik ke input email. Di bagian paling bawah dari virtual keybard adalah satu tombol khusus untuk simbol @. Hal ini disebabkan karena semua email harus menggunakan simbol @ ya. Jadi untuk mempermudah dalam mengetik email, maka virtual keyboard memunculkan simbol tersebut. Perhatikan kalau kita pindah ke password yang merupakan text biasa. Maka pada virtual keyboard-nya tidak memiliki simbol @.

Kita kembali ke kode. Selanjutnya kita ubah juga input untuk password. Kita ganti type-nya menjadi password. Kita simpan dan jalankan hasilnya di browser tablet.

Kalau kita mengklik ke input password, pada virtual keyboard tidak mengalami perubahan ya. Namun perhatikan kalau kita mengetikkan sesuatu ke dalam input. Maka apa yang kita ketik berubah menjadi simbol peluru. Hal ini bertujuan untuk memberikan proteksi kepada user, agar password-nya tidak gampang diintip oleh orang lain yang berada di belakang user.

Kita lanjutkan untuk mencoba tipe input lainnya. Kita tambahkan tag br. Lalu tambahkan div baru. Kemudian kita tambahkan tag label. Di dalamnya kita tulis “Phone”. Lalu kita tambahkan tag input dengan type=”tel”.

Kita simpan dan coba jalankan di browser tablet. Kita klik ke bagian Phone. Nah, untuk type=”tel”, virtual keyboard yang muncul lebih menonjolkan angka ya. Tujuannya adalah agar user lebih mudah dalam memasukkan angka. Namun di bagian samping masih terdapat simbol yang bisa kita tekan juga.

Kita kembali ke kode dan kita akan mencoba tipe URL. Kita ubah teks Phone menjadi URL. Lalu kita ubah nilai type-nya menjadi URL.

Kita simpan dan jalankan di tablet. Nah, untuk tipe URL, pada virtual keyboard muncul satu tombol khusus untuk mengetik .com. Karena kebanyakan domain yang terkenal menggunakan .com. Jadi tombol ini akan mempermudah user dalam mengisi URL.

Kita coba lagi tipe lain yaitu search. Kita ganti labelnya menjadi search dan tipe input menjadi search juga.

Kita simpan dan coba di tablet. Nah, untuk tipe search ini perubahan virtual keyboardnya hanya sedikit ya. Hanya di tombol kanan bawah menjadi icon kaca pembesar, yang menunjukkan bahwa input ini berfungsi untuk mencari sesuatu.

Kita coba tipe terakhir, yaitu number. Kita ganti label menjadi Umur. Kemudian kita ubah tipe input menjadi number.

Kita simpan dan coba di tablet. Nah, untuk tipe number, virtual keyboard-nya mirip dengan tel, yaitu menonjolkan angka. Namun perhatikan bahwa kita tidak bisa mengetikkan simbol-simbol ke dalam number.

Kita akan melanjutkan untuk menyimpan umur. Oleh karena itu kita tambahkan attribute name=”age” agar nilai dikirim ke server. Kemudian kita tambahkan attribute value untuk menuliskan kembali nilai lama apabila terjadi error. value=”age) ?>”

Kita buka file Register.php untuk mengubah data Register. Kita tambahkan property public ?int $age untuk menyimpan umur menggunakan tipe data integer. Kita beri nilai default null.

Kita kembali ke form.php. Kita ke bagian atas untuk melakukan validasi terhadap nilai age. Pertama kita periksa dahulu apakah nilai $_POST[‘age’] adalah kosong. Apabila iya maka kita tambahkan $errors[‘age’] dengan nilai ‘Harap isi umur’.

Setelah itu kita periksa kembali apakah nilai yang dikirim benar berupa angka. Caranya adalah kita panggil fungsi is_numeric dengan argument $_POST[‘age’]. Bila benar, barulah nilainya kita masukkan sebagai property $register->age. Namun apabila salah, maka kita tambahkan pesan kesalahan ‘Harap masukkan angka pada umur’.

Kita ke bagian bawah. Kita tambahkan kode untuk menampilkan error umur. Kita copy saja dari kode sebelumnya ya. Kita paste ke sebelum label umur. Lalu kita ubah index error-nya menjadi age.

Kemudian kita buka file display.php. Pada tag body, kita tambahkan lagi tag div untuk menampilkan nilai Age. Nilainya diambil dari property $register->age.

Kita coba jalankan di browser pc. Kita coba langsung tekan tombol Kirim Data. Keluar tiga pesan error ya. Harap isi email, harap isi password dan harap isi umur.

Kita coba masukkan datanya. Email admin@gmail.com. Password admin#1234. Dan umur 20. Kita tekan kirim data. Dan registrasinya berhasil. Datanya ditampilkan kembali pada halaman display.php.

Namun kalau kita kembali ke form.php. Perhatikan pada input umur. Di bagian paling kanan terdapat dua buah tombol arrow ke atas dan ke bawah. Ini bentuknya kalau saya zoom ya. Nah, terkadang ada merasa terganggu dengan keberadaan kedua tombol ini. Apakah ada cara untuk mengakali agar kedua tombol ini tidak muncul? Kita bahas di slide berikutnya ya.

Terkadang kita merasa terganggu oleh tombol anak panah yang berada di sebelah kanan input. Untuk menghilangkan anak panah, kita bisa mengembalikan attribute type ke nilai text. Sedangkan untuk mengubah virtual keyboard menjadi angka, maka kita tambahkan attribute inputmode=”numeric”. Namun yang perlu diingat, kode ini hanya mengubah virtual keyboard menjadi angka saja. Sedangkan dari browser tidak melakukan validasi terhadap tombol yang ditekan oleh user. User masih tetap dapat memasukkan huruf ataupun simbol ke dalam input. Jadi kita harus tetap melakukan validasi di sisi backend.

Kita coba praktek. Kita ubah type menjadi text. Lalu kita tambahkan attribute baru inputmode=”numeric”. Kita simpan.

Pertama kita coba dari browser tablet terlebih dahulu. Kalau kita tekan input umur, maka virtual keyboard yang keluar adalah angka.

Kemudian kita coba dari browser pc ya. Pada umur tidak ada tombol anak panah. Namun kita masih tetap bisa memasukkan huruf. Untungnya tadi kita sudah menambahkan kode validasi di PHP ya. Jadi kalau misalkan kita memasukkan umur huruf ‘a’, maka keluar pesan error ‘Harap masukkan angka pada umur’.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.