Cara menggunakan mengapa javascript penting

Formulir web memiliki hubungan klien-server. Mereka digunakan untuk mengirim data yang ditangani oleh server web untuk diproses dan disimpan. Formulir itu sendiri adalah klien, dan server adalah mekanisme penyimpanan apa pun yang dapat digunakan untuk menyimpan, mengambil, dan mengirim data saat dibutuhkan

Panduan ini akan mengajari Anda cara membuat formulir web dengan Next. js

Formulir HTML dibangun menggunakan

tag. Dibutuhkan sekumpulan atribut dan bidang untuk menyusun formulir untuk fitur seperti bidang teks, kotak centang, menu tarik-turun, tombol, tombol radio, dll.

Berikut sintaks formulir HTML

Front-end terlihat seperti ini

Tag HTML bertindak sebagai wadah untuk berbagai elemen seperti bidang text dan mengirimkan button. Mari kita pelajari masing-masing elemen ini

• action. Atribut yang menentukan ke mana data formulir dikirim saat formulir dikirimkan. Ini biasanya URL (URL absolut atau URL relatif)
• Password: Submit 0. Menentukan metode HTTP, mis. e. , Password: Submit 1 atau Password: Submit 2 digunakan untuk mengirim data saat mengirimkan formulir
• . Elemen yang menentukan label untuk elemen formulir lainnya. Label membantu aksesibilitas, terutama untuk pembaca layar
• . Elemen formulir yang banyak digunakan untuk menyusun bidang formulir. Itu sangat tergantung pada nilai atribut Password: Submit 5. Jenis input dapat berupa text, Password: Submit 7, Password: Submit 8, Password: Submit 9, dan lainnya
• Merupakan tombol yang dapat diklik yang digunakan untuk mengirimkan data formulir

Suatu proses yang memeriksa apakah informasi yang diberikan oleh pengguna benar atau tidak. Validasi formulir juga memastikan bahwa informasi yang diberikan dalam format yang benar (mis. g. ada @ di bidang email). Ini adalah dua jenis

• Sisi klien. Validasi dilakukan di browser
• Sisi server. Validasi dilakukan di server

Meskipun kedua jenis ini sama pentingnya, panduan ini hanya berfokus pada validasi sisi klien

Validasi sisi klien selanjutnya dikategorikan sebagai

• Bawaan. Menggunakan atribut berbasis HTML seperti npx create-next-app 0, Password: Submit 5, npx create-next-app 2, npx create-next-app 3, npx create-next-app 4, dll
• Berbasis JavaScript. Validasi yang dikodekan dengan JavaScript

• npx create-next-app 0. Menentukan kolom mana yang harus diisi sebelum mengirimkan formulir
• Password: Submit 5. Menentukan tipe data (mis. e nomor, alamat email, string, dll.)
• npx create-next-app 2. Menentukan panjang minimum untuk string data teks
• npx create-next-app 3. Menentukan panjang maksimum untuk string data teks

Jadi, formulir yang menggunakan atribut ini mungkin terlihat seperti

Dengan pemeriksaan validasi ini, ketika pengguna mencoba mengirimkan bidang kosong untuk Nama, itu memberikan kesalahan yang muncul tepat di bidang formulir. Demikian pula, nomor gulungan hanya dapat dimasukkan jika panjangnya 10-20 karakter

Validasi Formulir penting untuk memastikan bahwa pengguna telah mengirimkan data yang benar, dalam format yang benar. JavaScript menawarkan tingkat validasi tambahan bersama dengan atribut formulir asli HTML di sisi klien. Pengembang umumnya lebih suka memvalidasi data formulir melalui JavaScript karena pemrosesan datanya lebih cepat bila dibandingkan dengan validasi sisi server, namun validasi front-end mungkin kurang aman dalam beberapa skenario karena pengguna jahat selalu dapat mengirimkan data yang salah format ke server Anda

Contoh berikut menunjukkan penggunaan JavaScript untuk memvalidasi formulir

Roll Number: Name: Submit

Tag skrip HTML digunakan untuk menyematkan JavaScript sisi klien apa pun. Itu bisa berisi pernyataan skrip sebaris (seperti yang ditunjukkan pada contoh di atas) atau menunjuk ke file skrip eksternal melalui atribut npx create-next-app 9. Contoh ini memvalidasi nama dan nomor daftar pengguna. Fungsi First name: Last name: Submit _0 tidak mengizinkan bidang nama kosong, dan nomor gulungan harus setidaknya tiga digit. Validasi dilakukan saat Anda menekan tombol Kirim. Anda tidak dialihkan ke halaman berikutnya sampai nilai yang diberikan benar

Validasi JavaScript dengan Ekspresi Reguler menggunakan atribut npx create-next-app 4 HTML. Ekspresi reguler (umumnya dikenal sebagai RegEx) adalah objek yang menggambarkan pola karakter. Anda hanya dapat menerapkan atribut npx create-next-app _4 ke elemen . Dengan cara ini, Anda dapat memvalidasi nilai input menggunakan Ekspresi Reguler (RegEx) dengan menentukan aturan Anda sendiri. Sekali lagi, jika nilainya tidak sesuai dengan pola yang ditentukan, input akan memberikan kesalahan. Contoh di bawah menunjukkan penggunaan atribut npx create-next-app _4 pada elemen First name: Last name: Submit 5

Password: Submit

Bidang formulir kata sandi hanya boleh berisi angka (0 hingga 9), huruf kecil (a hingga z) dan panjangnya tidak boleh lebih dari 15 karakter. Tidak ada karakter lain (#,$,&, dll. ) diijinkan. Aturan dalam RegEx ditulis sebagai First name: Last name: Submit 6

Untuk mempelajari lebih lanjut tentang formulir HTML, lihat MDN Web Docs

Di bagian berikut, Anda akan membuat formulir di React menggunakan Next. js

Buat Berikutnya baru. aplikasi js. Anda dapat menggunakannya untuk memulai dengan cepat. Di terminal baris perintah Anda, jalankan perintah berikut

npx create-next-app

Jawab pertanyaan untuk membuat proyek Anda, dan beri nama, contoh ini menggunakan First name: Last name: Submit 7. Berikutnya First name: Last name: Submit _8 ke dalam direktori ini, dan jalankan perintah First name: Last name: Submit 9 atau export default function Form() { return ( First Name Last Name Submit ) } 0 untuk memulai server pengembangan

Buka URL yang tercetak di terminal untuk memastikan bahwa aplikasi Anda berjalan dengan sukses

Klien dan server akan dibangun menggunakan Next. js. Untuk bagian server, buat titik akhir API tempat Anda akan mengirimkan data formulir

Lanjut. js menawarkan sistem perutean berbasis file yang dibangun di atas konsep halaman. File apa pun di dalam folder export default function Form() { return ( First Name Last Name Submit ) } 1 dipetakan ke export default function Form() { return ( First Name Last Name Submit ) } 2 dan akan diperlakukan sebagai titik akhir API, bukan halaman. Titik akhir API ini hanya akan menjadi sisi server

Buka export default function Form() { return ( First Name Last Name Submit ) } _1, buat file bernama export default function Form() { return ( First Name Last Name Submit ) } 4 dan rekatkan kode ini yang ditulis di Node. js

Formulir ini export default function Form() { return ( First Name Last Name Submit ) } _5 fungsi akan menerima permintaan export default function Form() { return ( First Name Last Name Submit ) } 6 dari klien (i. e. data formulir yang dikirimkan). Dan sebagai gantinya, itu akan mengirimkan respons export default function Form() { return ( First Name Last Name Submit ) } 7 sebagai JSON yang akan memiliki nama depan dan belakang. Anda dapat mengakses titik akhir API ini di export default function Form() { return ( First Name Last Name Submit ) } 8 atau mengganti URL localhost dengan penerapan Vercel aktual saat Anda menerapkan

Selain itu, Anda juga dapat melampirkan API ini ke database seperti MongoDB atau Google Sheets. Dengan cara ini, data formulir yang Anda kirimkan akan disimpan dengan aman untuk digunakan nanti. Untuk panduan ini, tidak ada database yang digunakan. Sebagai gantinya, data yang sama dikembalikan ke pengguna untuk mendemonstrasikan cara melakukannya

Anda sekarang dapat menggunakan titik akhir relatif export default function Form() { return ( First Name Last Name Submit ) } 9 di dalam atribut action dari formulir. Anda mengirim data formulir ke server saat formulir dikirim melalui metode HTTP Password: Submit 2 (yang digunakan untuk mengirim data)

First name: Last name: Submit

Jika Anda mengirimkan formulir ini, formulir ini akan mengirimkan data ke titik akhir API formulir export default function Form() { return ( First Name Last Name Submit ) } 9. Server kemudian merespons, umumnya menangani data dan memuat URL yang ditentukan oleh atribut tindakan, menyebabkan pemuatan halaman baru. Jadi dalam hal ini Anda akan dialihkan ke export default function Form() { return ( First Name Last Name Submit ) } 8 dengan respons berikut dari server

Anda telah membuat Berikutnya. js API Route untuk pengiriman formulir. Sekarang saatnya mengkonfigurasi klien (formulir itu sendiri) di dalam Next. js menggunakan Bereaksi. Langkah pertama adalah memperluas pengetahuan Anda tentang formulir HTML dan mengubahnya menjadi React (menggunakan JSX)

Berikut adalah bentuk yang sama dalam komponen fungsi React yang ditulis menggunakan JSX

export default function Form() { return ( First Name Last Name Submit ) }

Inilah yang berubah

• Atribut export default function PageWithoutJSbasedForm() { return ( First Name Last Name Submit ) } _4 diubah menjadi export default function PageWithoutJSbasedForm() { return ( First Name Last Name Submit ) } 5. (Karena export default function PageWithoutJSbasedForm() { return ( First Name Last Name Submit ) } 4 adalah kata kunci yang terkait dengan loop "untuk" di JavaScript, elemen React menggunakan export default function PageWithoutJSbasedForm() { return ( First Name Last Name Submit ) } 5 sebagai gantinya. )
• Atribut action sekarang memiliki URL relatif yang merupakan titik akhir API formulir

Ini melengkapi struktur dasar Berikutnya Anda. formulir berbasis js

Anda dapat melihat seluruh kode sumber repo contoh formulir berikutnya yang kami buat di sini sebagai contoh yang berfungsi. Jangan ragu untuk mengkloningnya dan segera mulai. Demo ini dibuat dengan aplikasi buat-berikutnya, dan Anda dapat mempratinjau bentuk dasar gaya CSS di dalam file export default function PageWithoutJSbasedForm() { return ( First Name Last Name Submit ) } 9

JavaScript menghadirkan interaktivitas ke aplikasi web kami, tetapi terkadang Anda perlu mengontrol paket JavaScript agar tidak terlalu besar, atau pengunjung situs Anda mungkin telah menonaktifkan JavaScript

Ada beberapa alasan mengapa pengguna menonaktifkan JavaScript

• Mengatasi kendala bandwidth
• Meningkatkan masa pakai baterai perangkat (ponsel atau laptop).
• Untuk privasi agar tidak terlacak dengan skrip analitik

Apa pun alasannya, menonaktifkan JavaScript akan memengaruhi sebagian fungsi situs, jika tidak seluruhnya

Selanjutnya buka direktori First name: Last name: Submit _7. Di dalam direktori _1, buat file 2

Kiat Cepat. Di Selanjutnya. js, halaman adalah React Component yang diekspor dari file 3, 4, 5, atau 6 di direktori pages. Setiap halaman dikaitkan dengan rute berdasarkan nama filenya

Contoh. Jika Anda membuat _7, itu akan dapat diakses di 8

Mari gunakan kode yang sama dari atas

export default function PageWithoutJSbasedForm() { return ( First Name Last Name Submit ) }

Dengan JavaScript dinonaktifkan, saat Anda menekan tombol Kirim, sebuah peristiwa dipicu, yang mengumpulkan data formulir dan mengirimkannya ke titik akhir API formulir kami seperti yang ditentukan dalam atribut action dan menggunakan Password: Submit 2 HTTP Password: Submit 0. Anda akan dialihkan ke titik akhir export default function Form() { return ( First Name Last Name Submit ) } 9 karena begitulah cara kerja formulir action

Data formulir akan dikirimkan ke server sebagai permintaan export default function Form() { return ( First Name Last Name Submit ) } 6 ke fungsi penangan formulir yang tertulis di atas. Ini akan memproses data dan mengembalikan string JSON sebagai respons export default function Form() { return ( First Name Last Name Submit ) } 7 dengan menyertakan nama yang Anda kirimkan

Untuk meningkatkan pengalaman di sini, sebagai respons, Anda dapat mengarahkan pengguna ke halaman dan berterima kasih kepada mereka karena telah mengirimkan formulir

Di dalam _1, Anda akan membuat file lain bernama text7. Ini akan membuat halaman text_8 di Next Anda. aplikasi js

Sekarang, segera setelah formulir dikirimkan, kami mencegah perilaku default formulir untuk memuat ulang halaman. Kami akan mengambil data formulir, mengubahnya menjadi string JSON, dan mengirimkannya ke server kami, titik akhir API. Terakhir, server kami akan merespons dengan nama yang dikirimkan. Semua ini dengan fungsi dasar JavaScript ________57______9

Penting untuk apa?

Bagaimana JavaScript berjalan?

Di mana JavaScript biasanya digunakan?

Mengapa JavaScript harus dipelajari dan dibutuhkan dalam pembuatan website?