html formulir login tanpa syarat. Formulir Login dan Registrasi dengan HTML5 dan CSS3

tag HTML, mendefinisikan formulir HTML di situs

Kami membuat situs web dan halaman individual di Internet untuk berkomunikasi dengan pengunjung.

formulir HTML digunakan untuk mendaftarkan pengunjung di situs, untuk polling dan voting interaktif, memungkinkan Anda untuk mengirim pesan, melakukan pembelian, dan sebagainya. HTML Formulir dibuat untuk satu tujuan: mengumpulkan dan kemudian mentransfer informasi untuk diproses ke skrip program atau melalui email.

Contoh formulir HTML | Masuk

Tag, atribut, dan nilai

- menentukan bentuk.
name="" - mendefinisikan nama formulir.
method="" - menentukan bagaimana data dikirim dari formulir. Nilai: "get" (default) dan "posting" . Metode "posting" lebih umum digunakan, karena memungkinkan Anda mentransfer data dalam jumlah besar.
action="" - menentukan url yang digunakan untuk mengirim data untuk diproses. Dalam kasus kami - enter_data.php ..
- menentukan elemen formulir seperti tombol, sakelar, bidang teks untuk entri data.
type="text" - mendefinisikan bidang teks untuk entri data.
type="password" - mendefinisikan bidang untuk memasukkan kata sandi, sementara teks ditampilkan sebagai tanda bintang atau lingkaran.
type="checkbox" - mendefinisikan tombol radio.
type="hidden" - mendefinisikan elemen tersembunyi bentuk - digunakan untuk menyampaikan informasi tambahan ke server.
ukuran = "25" - panjang bidang teks dalam karakter.
maxlength="30" - jumlah karakter input maksimum yang diizinkan.
value="" - mendefinisikan nilai yang akan dikirim untuk diproses jika mengacu pada tombol radio atau tombol radio. Nilai atribut ini sebagai bagian dari bidang teks atau tombol akan ditampilkan sebagai, misalnya, John atau Login pada contoh di atas.

Contoh formulir HTML | Komentar di situs

<a href="https://obanracer.ru/id/gde-sozdat-lichnuyu-internet-stranicu-primer-sozdaniya-html-stranicy-v.html">contoh HTML</a> formulir

Tag, atribut, dan nilai

action="http://site/comments.php" - menentukan url tempat data dari formulir akan dikirim.
id="" - mendefinisikan nama, pengidentifikasi elemen formulir.
name="" - mendefinisikan nama elemen form.
- menentukan bidang teks dalam formulir.
cols="" - menentukan jumlah kolom bidang teks formulir.
rows="" - Menentukan jumlah baris untuk bidang teks formulir.

Jika antara letakkan teks, itu akan ditampilkan di dalam kotak sebagai contoh yang mudah dihapus.

Contoh formulir HTML | Daftar tarik-turun

formulir HTML

Tag, atribut, dan nilai

- tentukan daftar dengan item untuk dipilih.
size="" - menentukan jumlah posisi daftar yang terlihat. Jika nilainya 1 , kita berhadapan dengan daftar dropdown.
- menentukan posisi (poin) dari daftar.
value="" - berisi nilai yang akan dikirim oleh formulir ke url yang ditentukan untuk diproses.
dipilih="dipilih" - memilih item daftar sebagai contoh.

Contoh formulir HTML | Daftar dengan bilah gulir

Dengan meningkatkan nilai atribut size="", kita mendapatkan daftar dengan scrollbar:

formulir HTML

Untuk opsi ini, kami menggunakan flag multiple="multiple", yang memungkinkan untuk memilih beberapa item. Ketidakhadirannya memungkinkan Anda untuk memilih hanya satu item.

type="kirim" - mendefinisikan tombol.

type="reset" - mendefinisikan tombol reset.

value="" - mendefinisikan label pada tombol.

Lihat tambahan:

Desain formulir login sangat penting untuk situs web apa pun. Kami mengumpulkan beberapa template halaman login responsif download Gratis. Itu formulir masuk merupakan bagian dari sebuah situs web. Ketika kita pergi ke sebuah situs web dan ingin akses penuh perlu mendaftar dan masuk. Formulir login situs web apa pun dapat ditemukan di sisi mana pun dari situs web. Itu akan menjadi sisi kanan atau kiri. Tidak ada situs web tanpa login dan formulir pendaftaran yang lengkap. Jadi penting untuk situs web apa pun. Sangat sulit untuk membuat formulir login melalui HTML CSS tanpa pengembang profesional.

HTML adalah struktur dan CSS adalah desain. HTML5 dan CSS3 adalah versi terbaru untuk mendesain. Beberapa form login yang dibuat melalui update coding ini dapat langsung didownload. Pengembang membagikan formulir ini secara gratis. Ini dapat digunakan untuk kebutuhan pribadi atau bisnis apa pun.

Gunakan template halaman login responsif ini gratis dan Anda dapat membangun diri Anda sendiri. Anda dapat menyesuaikan dan mengubah warna atau gaya apa pun. Anda juga dapat menghubungkan database Anda, jquery. Jadi template login ini sangat berguna dan penting.

Kami telah membagikan posting ini beberapa templat formulir masuk gratis html5 css3. Koleksi ini akan bertambah. Kami mencoba mengumpulkan lebih banyak bootstrap template halaman login.

bentuk desain bahan

Formulir login ini terlihat sangat mengagumkan dan sederhana. Anda dapat mengedit dan mengubah warna antarmuka. Desain sederhana tapi sangat profesional.

UNDUH DEMO

Saat Anda perlu mendesain formulir login aplikasi apa pun, Anda dapat menggunakan Formulir Login Desain Material ini. Ini akan sempurna untuk aplikasi Anda.

UNDUH DEMO

Avatar SVG animasi

Template login animasi memiliki permintaan besar. Jika Anda ingin menggunakannya sebagai profesi Anda. Formulir login Avatar SVG Animasi ini lebih baik untuk Anda.

UNDUH DEMO

Efek goyang formulir login

Ini adalah formulir login sederhana dan memiliki beberapa efek dan menggunakan bisnis profesional Anda.

UNDUH DEMO

CSS3 Animation Cloud dan formulir login

Jika Anda memiliki bisnis cloud atau berencana untuk semua jenis bisnis cloud, Anda dapat menggunakan CSS3 Animation Cloud dan formulir login ini.

UNDUH DEMO

bersihkan formulir masuk

Ini adalah desain dan nama yang sangat bersih dan juga formulir login Bersih yang sama. Gunakan formulir ini untuk situs web bersih Anda.

UNDUH DEMO

Formulir Masuk pada HTML5

Formulir login ini dirancang HTML5 dan digunakan untuk situs web terbaik Anda.

UNDUH DEMO

Formulir Login hanya validasi CSS

UNDUH DEMO

Formulir Masuk CSS

UNDUH DEMO

Formulir login Batman

UNDUH DEMO

Formulir Login dengan Materializecss

UNDUH DEMO

Formulir Masuk Bahan Sudut

UNDUH DEMO

Formulir Masuk Responsif

UNDUH DEMO

Formulir Masuk Responsif

UNDUH DEMO

Bentuk Datar Sederhana dengan Spinning Loader

UNDUH DEMO

Masuk ke Everdwell

Formulir dirancang untuk mengirim data dari pengguna ke server web. Formulir dalam HTML dapat terdiri dari bidang teks dan area teks, kotak centang dan tombol radio, dan daftar drop-down. Semua ini adalah elemen bentuk. Setiap elemen berfungsi untuk menyampaikan beberapa nilai ke situs.
Pada intinya, formulir HTML adalah halaman web tempat Anda melihat area untuk memasukkan informasi Anda. Setelah Anda mengisi formulir dan mengklik tombol kirim, informasi dari formulir dikemas dan dikirim ke server web untuk diproses oleh skrip server (file handler). Setelah diproses, halaman web lain dikembalikan kepada Anda sebagai tanggapan. Gambar berikut dengan jelas menunjukkan cara kerja formulir:

Tidak ada yang sulit dalam membuat formulir HTML. Cara termudah untuk mendapatkan ide tentang formulir adalah dengan mengurai sedikit kode HTML dan kemudian melihat cara kerjanya. Contoh berikut menunjukkan sintaks untuk membuat formulir HTML sederhana:

Contoh: Formulir HTML Sederhana

Cobalah sendiri "

Bentuk pertama saya:
Nama:
Nama keluarga:

bentuk sederhana

Elemen

Formulir dimasukkan ke halaman web melalui elemen . Ini adalah wadah untuk semua konten formulir, termasuk elemen seperti bidang teks dan tombol, serta tag lainnya. bahasa HTML. Namun, itu tidak dapat mengandung elemen lain. .
Untuk mengirimkan formulir ke server, tombol "Kirim" digunakan, hasil yang sama akan diperoleh jika tombol "Enter" ditekan di dalam formulir. Jika tidak ada tombol Kirim pada formulir, tombol Enter dapat digunakan untuk mengirim.
Sebagian besar atribut elemen mempengaruhi pemrosesan bentuk, bukan desainnya. Yang paling umum adalah tindakan dan metode. Atribut tindakan berisi URL tempat informasi dalam formulir akan dikirimkan untuk diproses oleh server. Atribut metode adalah metode HTTP yang harus digunakan browser untuk mengirimkan data formulir.

Elemen

Hampir semua bidang formulir dibuat menggunakan elemen (dari input bahasa Inggris - input). Penampilan elemen berubah tergantung pada nilai atributnya Tipe:

Berikut adalah beberapa nilai atribut Tipe:

Memasukkan teks dan kata sandi

Salah satu jenis elemen formulir yang paling sederhana adalah bidang teks, yang dirancang untuk memasukkan teks dari satu baris. Tipe ini input teks diatur secara default, dan oleh karena itu, ini adalah bidang satu baris yang akan ditampilkan jika Anda lupa menentukan atribut Tipe. Untuk menambahkan bidang input teks satu baris ke formulir, Anda harus berada di dalam elemen mendaftar atribut Tipe dengan nilai teks:

Bidang masukan kata sandi adalah variasi dari bidang teks biasa. Ini mendukung atribut yang sama sebagai bidang teks baris tunggal. Atribut nama mengatur nama bidang input kata sandi yang akan dikirim ke server bersama dengan kata sandi yang dimasukkan oleh pengguna. Untuk membuat bidang untuk memasukkan kata sandi, Anda harus mengatur nilai atribut kata sandi Tipe(kata sandi (Bahasa Inggris) - kata sandi):

Contoh membuat formulir dengan bidang kata sandi:

Contoh: Kolom kata sandi

Cobalah sendiri "

Kata sandi:

Seiring dengan atribut ini, Anda dapat menggunakan atribut panjang maksimum, yang nilainya menentukan jumlah karakter maksimum yang dapat dimasukkan garis yang diberikan. Anda juga dapat mengatur panjang bidang input menggunakan atribut ukuran. Secara default, sebagian besar browser membatasi bidang teks hingga 20 karakter. Untuk mengontrol lebar elemen formulir baru, alih-alih atribut ukuran, sebaiknya gunakan Cascading Style Sheets (CSS).
Atribut nilai menentukan nilai yang ditampilkan secara default di kotak teks saat formulir dimuat. Dengan memasukkan nilai default di bidang, Anda dapat menjelaskan kepada pengguna data apa dan dalam format apa Anda ingin pengguna memasukkan di sini. Ini seperti sampel, karena jauh lebih nyaman bagi pengguna untuk mengisi formulir, melihat contoh di depannya.

Sakelar (radio)

Elemen Tipe radio membuat tombol radio yang menggunakan prinsip logika "ATAU", yang memungkinkan Anda untuk memilih hanya satu dari beberapa nilai: jika Anda memilih satu posisi, maka semua yang lain menjadi tidak aktif. Sintaks dasar elemen tombol radio adalah:

Atribut nama untuk tombol radio wajib dan memainkan peran penting dalam mengelompokkan beberapa elemen tombol radio ke dalam satu grup. Untuk menggabungkan tombol radio ke dalam grup, Anda harus menyetel nilai yang sama atribut nama dan nilai atribut yang berbeda nilai. Atribut nilai mengatur nilai tombol radio yang dipilih untuk dikirim ke server. Nilai setiap elemen tombol radio harus unik di dalam grup sehingga server mengetahui opsi respons mana yang telah dipilih pengguna.
Kehadiran atribut diperiksa(dari bahasa Inggris - set) pada elemen sakelar menunjukkan opsi mana yang diusulkan yang harus dipilih secara default saat memuat halaman, jika perlu. Atribut ini hanya dapat disetel untuk satu elemen sakelar dari grup:

Cobalah sendiri "

Berapa usiamu?

dibawah 18
dari 18 hingga 24
dari 25 hingga 35
lebih dari 35

Berapa usiamu?

dibawah 18
dari 18 hingga 24
dari 25 hingga 35
lebih dari 35

kotak centang

Elemen Tipe kotak centang membuat kotak centang yang mirip dengan tombol radio yang memungkinkan pengguna memilih dari opsi yang Anda berikan. Perbedaan utama dari tombol radio adalah pengunjung dapat memilih beberapa opsi sekaligus, dan bendera itu sendiri ditunjukkan oleh kotak, bukan lingkaran. Seperti halnya tombol radio, sekelompok kotak centang dibuat dengan menetapkan setiap item nilai atribut yang sama. nama, namun setiap kotak centang memiliki arti tersendiri. Sintaks kotak centang dasar:

Atribut diperiksa, seperti halnya tombol radio, menentukan bahwa kotak centang yang diberikan harus dipilih secara default saat halaman dimuat. Atribut ini dapat disetel secara bersamaan untuk beberapa flag dalam satu grup.
Contoh berikut menggunakan kotak centang untuk menentukan beberapa opsi respons default:

Contoh: Menggunakan tombol radio

Cobalah sendiri "

Jazz
biru
Batu
Lagu
Negara

Genre musik apa yang kamu suka?

Jazz
biru
Batu
Lagu
Negara

Tombol untuk konfirmasi (kirim) dan kliring (reset)

Elemen Tipe Kirimkan membuat tombol yang, ketika diklik, mengirimkan browser ke skrip server untuk memproses data yang dimasukkan oleh pengguna dalam formulir. Jika kami membuat tombol yang menghapus formulir, maka kami menetapkan ke atribut Tipe nilai "setel ulang". elemen Tipe Kirimkan atribut opsional dapat diberikan nama. Atribut nilai digunakan dalam elemen ini untuk menentukan teks yang menunjukkan label pada tombol. Secara default, di browser, tombolnya tertulis "Kirim" (Kirim), jika tulisan ini tidak cocok untuk Anda, masukkan sendiri. Karena gaya tombol konfirmasi mungkin berbeda di browser yang berbeda, lebih baik untuk menyesuaikan gaya tombol sendiri menggunakan alat CSS atau menggunakan tombol grafis.
Buat tombol konfirmasi dan hapus:

Contoh: Menggunakan kirim dan setel ulang

Cobalah sendiri "

Mengklik tombol Atur Ulang akan mengatur ulang data yang dimasukkan pengguna.

atribut tindakan.

Utama untuk elemen

File pemrosesan terletak di server mytestserver.com dalam folder folder nama dan nama skrip server yang akan memproses data - obrabotchik.php. Kepadanya semua data yang Anda masukkan dalam formulir di halaman web akan ditransfer. Ekstensi .php menunjukkan bahwa formulir yang ditentukan diproses oleh skrip PHP. Handler itu sendiri dapat ditulis dalam bahasa lain, misalnya bahasa scripting Python, Ruby, dll.
Dianjurkan untuk selalu mengatur nilai atribut tindakan. Jika formulir harus mengirimkan nilai ke halaman yang sama dengan tempatnya, tentukan string kosong sebagai nilai atribut tindakan: action="".

atribut metode

Atribut metode menentukan bagaimana informasi harus dikirim ke server. Pilihan metode pengiriman formulir tergantung pada data yang perlu dikirim bersamanya. Di sini volume data ini memainkan peran utama. Dua metode paling populer untuk meneruskan data mentah formulir Anda dari browser ke server adalah: DAPATKAN dan POS. Metode diatur ke salah satu pilihan Anda, dan jika Anda tidak menentukannya, itu akan digunakan secara default DAPATKAN. Mari kita pertimbangkan penerapan masing-masing.

Metode POSTING

metode POS mengemas data formulir dan mengirimkannya ke server tanpa pengguna menyadarinya, karena data tersebut terkandung dalam isi pesan. Browser web saat menggunakan metode ini POS mengirimkan permintaan ke server yang terdiri dari header khusus diikuti oleh data formulir. Karena konten permintaan ini hanya tersedia untuk server, POS digunakan untuk mentransfer data rahasia seperti kata sandi, detail kartu bank, dan informasi pribadi pengguna lainnya. metode POS juga cocok untuk mengirim informasi dalam jumlah besar, karena, tidak seperti metodenya DAPATKAN, ia tidak memiliki batasan pada jumlah karakter yang ditransmisikan.

DAPATKAN metode

Seperti yang sudah Anda ketahui, tugas utama browser adalah menerima halaman web dari server. Jadi ketika Anda menggunakan metode ini DAPATKAN, browser Anda hanya menerima halaman web seperti biasanya. metode DAPATKAN juga membungkus data formulir, tetapi menambahkannya ke akhir URL sebelum mengirim permintaan ke server. Untuk memahami cara kerja metode DAPATKAN mari kita lihat aksinya. Buka contoh pertama dari tutorial ini (Contoh: Formulir HTML sederhana) di notepad (seperti Notepad++) dan buat sedikit perubahan pada kode HTML:

itu. mengganti POS pada DAPATKAN.
Simpan file dengan nama nama file.html dan refresh halaman browser (F5) lalu isi form seperti Vasya Pupkin, dan klik tombol Kirim. Di bilah alamat browser Anda akan melihat sesuatu seperti ini:

File_name.html?firstname=Vasya&lastname=Pupkin

Sekarang Anda melihat nama setiap elemen formulir, serta nilainya, di sini di URL.
URL dipisahkan dari data formulir lainnya oleh karakter tanda tanya, dan nama serta nilai variabel dipisahkan oleh ampersand (&) .
Metode ini harus digunakan jika Anda tidak mentransfer informasi dalam jumlah besar.
Cara ini tidak akan berhasil jika data dalam formulir Anda bersifat sensitif, seperti menyimpan nomor kartu bank atau kata sandi.
Selain itu, metode DAPATKAN tidak cocok jika ingin mengirim file ke server beserta formnya.

Mengelompokkan elemen formulir

Elemen bentuk yang berhubungan dalam arti dapat dikelompokkan antar tag

dan

. Browser akan menampilkan

sebagai kotak di sekitar sekelompok elemen bentuk. Tampilan bingkai dapat diubah menggunakan Cascading Style Sheets (CSS).
Untuk menambahkan judul untuk setiap grup, Anda memerlukan elemen A yang menentukan teks header grup yang akan disematkan dalam bingkai.

Bidang entri kata sandi adalah bidang teks biasa, teks yang dimasukkan di mana, tergantung pada browser, ditampilkan sebagai tanda bintang atau titik. Fitur ini dirancang untuk memastikan tidak ada orang yang mengintip kata sandi yang dimasukkan. Meskipun teks yang dimasukkan tidak ditampilkan di layar, informasi yang dimasukkan dikirim ke server dalam bentuk teks yang jelas tanpa enkripsi. Oleh karena itu, menggunakan bidang ini tidak memberikan keamanan data dan dapat disadap.

Sintaks pembuatannya adalah sebagai berikut.

Atributnya sama dengan atribut bidang teks dan tercantum dalam Tabel 1. satu.

Bidang kata sandi banyak digunakan di situs untuk mengotorisasi pengguna dan membatasi akses ke bagian situs di mana Anda perlu mengonfirmasi otoritas Anda. Contoh 1 menunjukkan cara membuat bidang tersebut.

Contoh 1. Bidang kata sandi

bidang kata sandi

Gabung:

Kata sandi:

Hasilnya, kita mendapatkan yang berikut (Gbr. 1).

Beras. 1. Jenis bidang dengan kata sandi

Properti gaya berlaku untuk bidang kata sandi, yang mengatur parameter warna, latar belakang, bingkai, dll. Contoh 2 menunjukkan penambahan gambar latar belakang ke bidang formulir. Mari kita ambil gaya untuk bidang teks sebagai dasar.

Contoh 2: Menambahkan gambar ke kotak teks

bidang kata sandi

Hasil dari contoh ini ditunjukkan pada Gambar. 2. Gambar ditambahkan sebagai latar belakang, sehingga teks harus digeser ke kanan menggunakan padding-left , jika tidak maka akan ditampilkan di atas gambar.

Dalam artikel ini, Anda akan belajar cara membuat formulir pendaftaran dan otorisasi menggunakan HTML, JavaScript, PHP dan MySql. Formulir seperti itu digunakan di hampir setiap situs, apa pun jenisnya. Mereka dibuat untuk forum, dan untuk toko online dan untuk jejaring sosial (seperti Facebook, Twiter, Odnoklassniki) dan untuk banyak jenis situs lainnya.

Jika Anda memiliki situs di komputer lokal Anda, maka saya harap Anda sudah memiliki . Tidak ada yang akan berhasil tanpanya.

Membuat Tabel di Database

Untuk mengimplementasikan pendaftaran pengguna, pertama-tama kita membutuhkan Database. Jika Anda sudah memilikinya, maka bagus, jika tidak, Anda harus membuatnya. Dalam artikel tersebut, saya menjelaskan secara rinci bagaimana melakukan ini.

Jadi, kita memiliki Database (disingkat DB), sekarang kita perlu membuat tabel pengguna di mana kami akan menambahkan pengguna terdaftar kami.

Cara membuat tabel di database juga sudah saya jelaskan di artikel. Sebelum membuat tabel, kita perlu menentukan bidang apa yang akan dikandungnya. Bidang-bidang ini akan cocok dengan bidang-bidang dari formulir pendaftaran.

Jadi, kami pikir, bayangkan bidang apa yang akan dimiliki formulir kami dan buat tabel pengguna dengan bidang-bidang ini:

Indo- Pengidentifikasi. Bidang Indo harus di setiap tabel dari database.
nama depan- Untuk menyimpan nama.
nama keluarga- Untuk menyimpan nama belakang.
surel- Untuk menyimpan alamat pos. Kami akan menggunakan email sebagai login, jadi bidang ini harus unik, yaitu memiliki indeks UNIK.
email_status- Kolom untuk menunjukkan apakah surat dikonfirmasi atau tidak. Jika surat dikonfirmasi, maka itu akan memiliki nilai 1, jika tidak, nilai 0.
kata sandi- Untuk menyimpan kata sandi.

Jika Anda ingin formulir pendaftaran Anda memiliki beberapa bidang lagi, Anda dapat menambahkannya di sini juga.

Itu dia, meja kami pengguna siap. Mari kita lanjutkan ke langkah berikutnya.

Koneksi basis data

Kami telah membuat database, sekarang kita perlu menghubungkannya. Kami akan terhubung menggunakan ekstensi PHP MySQLi.

Di folder situs kami, buat file dengan nama dbconnect.php, dan di dalamnya kita menulis skrip berikut:

Kesalahan koneksi basis data. Deskripsi Kesalahan: ".mysqli_connect_error()."

"; exit(); ) // Atur penyandian koneksi $mysqli->set_charset("utf8"); //Untuk kenyamanan, tambahkan variabel di sini yang akan berisi nama situs kita $address_site = "http://testsite .lokal" ; ?>

File ini dbconnect.php perlu dihubungkan ke penangan formulir.

Perhatikan variabelnya $alamat_situs, di sini saya telah menunjukkan nama situs pengujian saya, yang akan saya kerjakan. Anda sesuai menunjukkan nama situs Anda.

Struktur situs

Sekarang mari kita lihat struktur HTML website kita.

Pindahkan header dan footer situs ke file individu, header.php dan footer.php. Kami akan menghubungkannya di semua halaman. Yaitu, di utama (file index.php), ke halaman dengan formulir pendaftaran (file form_register.php) dan pada halaman dengan formulir otorisasi (file form_auth.php).

Blokir dengan tautan kami, Registrasi dan otorisasi, tambahkan ke header situs sehingga ditampilkan di semua halaman. Satu tautan akan masuk halaman formulir pendaftaran(mengajukan form_register.php) dan yang lainnya ke halaman dengan formulir otorisasi(mengajukan form_auth.php).

Isi file header.php:

Nama situs kami

Hasilnya, halaman utama kami terlihat seperti ini:

Tentu saja, situs Anda mungkin memiliki struktur yang sama sekali berbeda, tetapi ini tidak penting bagi kami sekarang. Yang utama adalah ada tautan (tombol) untuk pendaftaran dan otorisasi.

Sekarang mari kita beralih ke formulir pendaftaran. Seperti yang sudah Anda pahami, kami memilikinya di file form_register.php.

Kami pergi ke Database (di phpMyAdmin), buka struktur tabel pengguna dan lihat bidang apa yang kita butuhkan. Jadi, kita membutuhkan kolom untuk memasukkan nama depan dan belakang, kolom untuk memasukkan alamat pos (Email) dan kolom untuk memasukkan kata sandi. Dan untuk tujuan keamanan, kami akan menambahkan kolom input captcha.

Di server, sebagai akibat dari pemrosesan formulir pendaftaran, berbagai kesalahan dapat terjadi, yang menyebabkan pengguna tidak dapat mendaftar. Oleh karena itu, agar pengguna memahami mengapa pendaftaran gagal, perlu untuk menampilkan pesan tentang kesalahan ini kepadanya.

Sebelum menampilkan formulir, kami menambahkan blok untuk menampilkan pesan kesalahan dari sesi.

Dan sesaat lagi, jika pengguna sudah diotorisasi, dan demi kepentingan, dia langsung masuk ke halaman pendaftaran dengan menulis di bilah alamat browser website_url/form_register.php, maka dalam hal ini, alih-alih formulir pendaftaran, kami akan menampilkan judul yang sudah terdaftar.

Secara umum, kode file form_register.php kami mendapatkannya seperti ini:

Anda sudah terdaftar

Di browser, halaman pendaftaran terlihat seperti ini:

Melalui atribut yang diperlukan, kami telah membuat semua bidang wajib.

Perhatikan kode formulir pendaftaran dimana captcha ditampilkan:

Kami dalam nilai atribut src untuk gambar, menentukan jalur ke file captcha.php, yang menghasilkan captcha ini.

Mari kita lihat kode filenya captcha.php:

Kode dikomentari dengan baik, jadi saya hanya akan fokus pada satu poin.

Di dalam sebuah fungsi gambarTtfTeks(), jalur ke font ditentukan verdana.ttf. Jadi ini untuk operasi yang benar captcha, kita harus membuat folder font, dan letakkan file font di sana verdana.ttf. Anda dapat menemukan dan mengunduhnya dari Internet, atau mengambilnya dari arsip dengan materi artikel ini.

Kita selesai dengan struktur HTML, saatnya untuk melanjutkan.

Memvalidasi email dengan jQuery

Formulir apa pun membutuhkan validasi data yang dimasukkan, baik di sisi klien (menggunakan JavaScript, jQuery) dan di sisi server.

Kita harus memberi perhatian khusus pada bidang Email. Sangat penting bahwa alamat email yang dimasukkan valid.

Untuk bidang yang diberikan input , kami mengatur jenis email (type="email"), ini memperingatkan kami sedikit terhadap format yang salah. Namun, ini tidak cukup, karena melalui pemeriksa kode yang diberikan browser kepada kami, Anda dapat dengan mudah mengubah nilai atribut Tipe Dengan surel pada teks, dan hanya itu, cek kami tidak akan valid lagi.

Dan dalam hal ini, kita harus melakukan pemeriksaan yang lebih andal. Untuk melakukan ini, kita akan menggunakan perpustakaan jQuery dari JavaScript.

Untuk menghubungkan perpustakaan jQuery, dalam file header.php antara tag , sebelum tag penutup , tambahkan baris ini:

Tepat setelah baris ini, tambahkan kode cek validasi email. Di sini kami menambahkan kode untuk memeriksa panjang kata sandi yang dimasukkan. Panjangnya harus minimal 6 karakter.

Dengan bantuan skrip ini, kami memeriksa validitas alamat email yang dimasukkan. Jika pengguna memasukkan Email yang salah, maka kami menampilkan kesalahan tentang itu dan menonaktifkan tombol kirim formulir. Jika semuanya baik-baik saja, maka kami menghapus kesalahan dan mengaktifkan tombol kirim formulir.

Jadi, dengan validasi formulir di sisi klien, kita selesai. Sekarang kita dapat mengirimkannya ke server, di mana kita juga akan melakukan beberapa pemeriksaan dan menambahkan data ke database.

Pendaftaran pengguna

Kami mengirim formulir untuk diproses ke file daftar.php, melalui metode POST. Nama file yang diberikan handler yang ditentukan dalam nilai atribut tindakan. Dan metode kirim ditentukan dalam nilai atribut metode.

Buka file ini daftar.php dan hal pertama yang perlu kita lakukan adalah menulis fungsi peluncuran sesi dan menyertakan file yang kita buat sebelumnya dbconnect.php(Dalam file ini, kami membuat koneksi ke database). Namun, segera nyatakan sel error_messages dan sukses_pesan dalam array global sesi. V pesan_kesalahan kami akan merekam semua pesan kesalahan yang terjadi selama pemrosesan formulir, dan dalam sukses_pesan Mari kita menulis pesan bahagia.

Sebelum melanjutkan, kita harus memeriksa apakah formulir itu dikirimkan sama sekali. Seorang penyerang dapat melihat nilai dari sebuah atribut tindakan dari formulir, dan cari tahu file mana yang memproses formulir ini. Dan dia mungkin memiliki ide untuk langsung membuka file ini dengan mengetikkan alamat berikut di bilah alamat browser: http://site_site/register.php

Jadi kita perlu memeriksa apakah ada sel di array POST global yang namanya cocok dengan nama tombol "Daftar" kita dari formulir. Jadi, kami memeriksa apakah tombol "Daftar" ditekan atau tidak.

Jika penyerang mencoba masuk langsung ke file ini, dia akan menerima pesan kesalahan. Saya mengingatkan Anda bahwa variabel $address_site berisi nama situs dan dideklarasikan dalam file dbconnect.php.

Kesalahan! halaman Utama .

"); } ?>

Nilai captcha dalam sesi ditambahkan selama pembuatannya, dalam file captcha.php. Sebagai pengingat, saya akan menunjukkan sekali lagi potongan kode ini dari file captcha.php, di mana nilai captcha ditambahkan ke sesi:

Sekarang mari kita ke tes itu sendiri. dalam file daftar.php, di dalam blok if, tempat kami memeriksa apakah tombol "Daftar" ditekan, atau lebih tepatnya, di mana komentar " // (1) Tempatkan potongan kode berikutnya"kami menulis:

//Periksa captcha yang diterima //Potong spasi dari awal dan akhir string $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Bandingkan nilai yang diterima dengan nilai dari sesi. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Jika captcha salah, kembalikan user ke halaman registrasi, dan disana kita akan menampilkan pesan error bahwa dia salah memasukkan captcha. $error_message = "

Kesalahan! Anda salah memasukkan captcha

"; // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] = $error_message; // Kembalikan pengguna ke halaman pendaftaran header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: " .$address_site ."/form_register.php"); //Hentikan skrip exit(); ) // (2) Tempatkan potongan kode berikutnya )else( //Jika captcha tidak dilewati atau kosong exit ("

Kesalahan! Tidak ada kode verifikasi yaitu kode captcha. Anda dapat pergi ke halaman utama.

"); }

Selanjutnya, kita perlu memproses data yang diterima dari array POST. Pertama-tama, kita perlu memeriksa isi array POST global, yaitu, apakah ada sel di sana yang namanya cocok dengan nama field input dari formulir kita.

Jika sel ada, maka kami memangkas spasi dari awal dan akhir string dari sel ini, jika tidak, kami mengarahkan pengguna kembali ke halaman dengan formulir pendaftaran.

Selanjutnya, setelah spasi dipangkas, kami menambahkan string ke variabel dan memeriksa variabel ini untuk kekosongan, jika tidak kosong, maka lanjutkan, jika tidak, kami mengarahkan pengguna kembali ke halaman dengan formulir pendaftaran.

Tempel kode ini di lokasi yang ditentukan // (2) Tempatkan potongan kode berikutnya".

/* Periksa apakah ada data yang dikirim dari formulir di array global $_POST dan sertakan data yang dikirimkan dalam variabel reguler. = trim($_POST["first_name"]); //Periksa apakah variabel kosong if(!empty ($first_name))( // Agar aman, ubah karakter khusus menjadi entitas HTML $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] . = "

Masukkan nama Anda

Bidang nama tidak ada

"; //Kembalikan pengguna ke halaman pendaftaran header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_register.php"); //Hentikan skrip keluar(); ) if( isset($_POST["last_name"]))( // Memangkas spasi dari awal dan akhir string $last_name = trim($_POST["last_name"]); if(!empty($last_name)) ( // Demi keamanan , konversi karakter khusus ke entitas HTML $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] .= "

Masukkan nama belakang Anda

Bidang nama tidak ada

"; //Kembalikan pengguna ke halaman pendaftaran header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_register.php"); //Hentikan skrip keluar(); ) if( isset($_POST["email"]))( // Memangkas spasi dari awal dan akhir string $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Tempat kode untuk memeriksa format alamat email dan keunikannya )else( // Menyimpan pesan kesalahan ke sesi. $_SESSION["error_messages" ] .="

Masukkan email Anda

"; //Kembalikan pengguna ke halaman pendaftaran header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_register.php"); //Hentikan skrip keluar(); ) if( isset($_POST["password"]))( // Memangkas spasi dari awal dan akhir string $password = trim($_POST["password"]); if(!empty($password)) ( $password = htmlspecialchars ($password, ENT_QUOTES); //Enkripsi kata sandi $password = md5($password."top_secret"); )else( // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] .="

Masukkan kata sandi Anda

Bidang ini sangat penting. surel. Kita harus memeriksa format alamat surat yang diterima dan keunikannya dalam database. Artinya, apakah pengguna dengan alamat email yang sama sudah terdaftar.

Di lokasi yang ditentukan" // (3) Tempat kode untuk mengecek format alamat pos dan keunikannya" tambahkan kode berikut:

//Periksa format alamat email yang diterima menggunakan ekspresi reguler $reg_email = "/^**@(+(*+)*\.)++/i"; //Jika format alamat email yang diterima tidak sesuai dengan ekspresi reguler if(!preg_match($reg_email, $email))( // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] .= "

Anda memasukkan email yang tidak valid

"; //Kembalikan pengguna ke halaman pendaftaran header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_register.php"); //Hentikan skrip keluar(); ) // Periksa apakah sudah ada alamat seperti itu di database $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); Ada tepat 1 baris, jadi pengguna dengan alamat email ini sudah terdaftar if($result_query->num_rows == 1)( //Jika hasilnya tidak sama dengan false if(($row = $result_query->fetch_assoc()) != false) ( // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] .= "

Pengguna dengan alamat email ini sudah terdaftar

"; //Kembalikan pengguna ke halaman pendaftaran header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_register.php"); )else( //Simpan pesan kesalahan ke sesi .$_SESSION["error_messages"] .= "

Kesalahan dalam kueri basis data

"; //Kembalikan pengguna ke halaman pendaftaran header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_register.php"); ) /* tutup pilihan */ $ result_query-> close(); //Hentikan skrip exit(); ) /* tutup pilihan */ $result_query->close();

Jadi, kita selesai dengan semua pemeriksaan, saatnya menambahkan pengguna ke database. Di lokasi yang ditentukan" // (4) Tempatkan kode untuk menambahkan pengguna ke database" tambahkan kode berikut:

//Kueri untuk menambahkan pengguna ke database $result_query_insert = $mysqli->query("INSERT INTO `users` (nama_depan, nama_belakang, email, kata sandi) VALUES ("".$nama_pertama."", "".$nama_belakang ." ", "".$email."", "".$sandi."")"); if(!$result_query_insert)( // Menyimpan pesan kesalahan ke sesi. $_SESSION["error_messages"] .= "

Permintaan kesalahan untuk menambahkan pengguna ke database

Pendaftaran berhasil diselesaikan!!!
Sekarang Anda dapat masuk menggunakan nama pengguna dan kata sandi Anda.

"; //Kirim pengguna ke halaman login header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_auth.php"); ) /* Lengkapi permintaan */ $ result_query_insert-> close(); //Tutup koneksi database $mysqli->close();

Jika terjadi kesalahan dalam permintaan untuk menambahkan pengguna ke database, kami menambahkan pesan tentang kesalahan ini ke sesi dan mengembalikan pengguna ke halaman pendaftaran.

Jika tidak, jika semuanya berjalan dengan baik, kami juga menambahkan pesan ke sesi, tetapi itu sudah lebih menyenangkan, yaitu, kami memberi tahu pengguna bahwa pendaftaran berhasil. Dan kami mengarahkannya ke halaman dengan formulir otorisasi.

Script untuk memeriksa format alamat email dan panjang kata sandi ada di file header.php, jadi itu akan memengaruhi bidang dari formulir itu juga.

Sesi juga dimulai di file header.php, jadi dalam file form_auth.php sesi tidak perlu dimulai, karena kami mendapatkan kesalahan.

Seperti yang saya katakan, skrip untuk memeriksa format alamat email dan panjang kata sandi juga berfungsi di sini. Oleh karena itu, jika pengguna memasukkan alamat email atau kata sandi yang salah, dia akan segera menerima pesan kesalahan. Sebuah tombol untuk masuk akan menjadi tidak aktif.

Setelah memperbaiki kesalahan, tombol untuk masuk menjadi aktif dan pengguna dapat mengirimkan formulir ke server tempat formulir akan diproses.

Otorisasi pengguna

Untuk mengatribusikan nilai tindakan formulir otorisasi memiliki file auth.php, yang berarti bahwa formulir akan diproses dalam file ini.

Jadi mari kita buka filenya auth.php dan tulis kode untuk memproses formulir otorisasi. Hal pertama yang harus dilakukan adalah memulai sesi dan memasukkan file dbconnect.php untuk terhubung ke database.

//Deklarasikan sel untuk menambahkan kesalahan yang mungkin terjadi selama pemrosesan formulir. $_SESSION["error_messages"] = ""; //Deklarasikan sel untuk menambahkan pesan yang berhasil $_SESSION["success_messages"] = "";

/* Periksa apakah formulir telah dikirimkan, yaitu apakah tombol Login diklik. Jika ya, maka kita melangkah lebih jauh, jika tidak, maka kita akan menampilkan pesan kesalahan kepada pengguna, yang menyatakan bahwa dia langsung menuju halaman ini. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Tempatkan potongan kode berikutnya )else( exit("

Kesalahan! Anda telah mengakses halaman ini secara langsung, sehingga tidak ada data untuk diproses. Anda dapat pergi ke halaman utama.

"); }

//Periksa captcha yang diterima if(isset($_POST["captcha"]))( //Trim spasi dari awal dan akhir string $captcha = trim($_POST["captcha"]); if(!empty ($captcha ))( //Bandingkan nilai yang diterima dengan nilai dari sesi. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != ""))( // Jika captcha tidak valid, maka kita kembalikan pengguna ke halaman otorisasi, dan di sana kita akan menampilkan pesan kesalahan bahwa ia salah memasukkan captcha. $error_message = "

Kesalahan! Anda salah memasukkan captcha

Kesalahan! Kolom input captcha wajib diisi.

"; // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] = $error_message; // Kembalikan pengguna ke halaman otorisasi header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: " .$address_site ."/form_auth.php"); //Hentikan skrip exit(); ) //(2) Tempat untuk memproses alamat email //(3) Tempat untuk memproses kata sandi //(4) Tempat untuk membuat query ke database )else ( //Jika captcha tidak lulus exit("

Kesalahan! Tidak ada kode verifikasi yaitu kode captcha. Anda dapat pergi ke halaman utama.

"); }

Jika pengguna telah memasukkan kode verifikasi dengan benar, maka kami melanjutkan, jika tidak, kami mengembalikannya ke halaman otorisasi.

Verifikasi alamat email

// Memangkas spasi dari awal dan akhir string $email = trim($_POST["email"]); if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Periksa format alamat email yang diterima menggunakan ekspresi reguler $ reg_email = " /^**@(+(*+)*\.)++/i"; //Jika format alamat email yang diterima tidak sesuai dengan ekspresi reguler if(!preg_match($reg_email, $email ))( // Simpan ke pesan kesalahan sesi.$_SESSION["error_messages"] .= "

Anda memasukkan email yang tidak valid

"; //Mengembalikan pengguna ke halaman otorisasi header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_auth.php"); //Hentikan skrip keluar(); ) )else ( // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] .= "

Kolom untuk memasukkan alamat pos (email) wajib diisi.

Tidak ada kolom untuk memasukkan Email

Jika pengguna memasukkan alamat email dalam format yang salah atau nilai bidang alamat email kosong, maka kami mengembalikannya ke halaman otorisasi, tempat kami menampilkan pesan tentang ini.

Pemeriksaan kata sandi

Bidang selanjutnya untuk diproses adalah bidang kata sandi. Ke tempat yang ditentukan" //(3) Tempat untuk memproses kata sandi", kami menulis:

If(isset($_POST["password"]))( // Memangkas spasi dari awal dan akhir string $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); // Enkripsi kata sandi $password = md5($password."top_secret"); )else( // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] . = "

Masukkan kata sandi Anda

Tidak ada kolom untuk memasukkan kata sandi

"; //Mengembalikan pengguna ke halaman pendaftaran header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_auth.php"); //Hentikan skrip keluar(); )

Di sini, menggunakan fungsi md5 (), kami mengenkripsi kata sandi yang diterima, karena dalam database kami memiliki kata sandi dalam bentuk terenkripsi. Kata rahasia tambahan dalam enkripsi, dalam kasus kami " sangat rahasia" harus yang digunakan saat mendaftarkan pengguna.

Sekarang Anda perlu membuat kueri ke database pada pilihan pengguna yang alamat emailnya sama dengan alamat email yang diterima dan kata sandinya sama dengan kata sandi yang diterima.

//Query ke database pada pilihan pengguna. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = "".$password."""); if(!$result_query_select)( // Menyimpan pesan kesalahan ke sesi. $_SESSION["error_messages"] .= "

Kesalahan kueri pada pemilihan pengguna dari database

"; //Mengembalikan pengguna ke halaman pendaftaran header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_auth.php"); //Hentikan skrip keluar(); )else( //Periksa apakah tidak ada pengguna dengan data seperti itu di database, lalu tampilkan pesan kesalahan if($result_query_select->num_rows == 1)( // Jika data yang dimasukkan cocok dengan data dari database, lalu simpan login dan kata sandi ke array sesi $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Kembalikan pengguna ke halaman rumah header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Lokasi: ".$address_site."/index.php"); )else( // Simpan pesan kesalahan ke sesi. $_SESSION["error_messages"] .= "

Nama pengguna dan/atau kata sandi salah

"; //Kembalikan pengguna ke halaman otorisasi header("HTTP/1.1 301 Dipindahkan Secara Permanen"); header("Location: ".$address_site."/form_auth.php"); //Hentikan skrip keluar(); ) )

Keluar dari situs

Dan hal terakhir yang kami terapkan adalah prosedur keluar. Saat ini, di tajuk kami menampilkan tautan ke halaman otorisasi dan halaman pendaftaran.

Di tajuk situs (file header.php), menggunakan sesi, kami memeriksa apakah pengguna sudah masuk. Jika tidak, maka kami menampilkan tautan pendaftaran dan otorisasi, jika tidak (jika diotorisasi), maka alih-alih tautan pendaftaran dan otorisasi kami menampilkan tautan keluar.

Potongan kode yang dimodifikasi dari file header.php:

Registrasi

keluar

Ketika Anda mengklik tautan keluar dari situs, kami masuk ke file logout.php, di mana kami hanya menghancurkan sel dengan alamat email dan kata sandi dari sesi. Setelah itu, kami mengembalikan pengguna ke halaman tempat tautan diklik keluar.

Kode file logout.php:

Itu saja. Sekarang Anda tahu caranya menerapkan dan memproses formulir pendaftaran dan otorisasi pengguna di situs Anda. Formulir ini ditemukan di hampir setiap situs, jadi setiap programmer harus tahu cara membuatnya.

Kami juga belajar bagaimana memvalidasi data input, baik di sisi klien (di browser, menggunakan JavaScript, jQuery) dan di sisi server (menggunakan bahasa PHP). Kami juga belajar menerapkan prosedur logout.

Semua skrip diuji dan berfungsi. Anda dapat mengunduh arsip dengan file situs kecil ini dari tautan ini.

Di masa depan saya akan menulis artikel di mana saya akan menjelaskan. Dan saya juga berencana untuk menulis artikel yang akan saya jelaskan (tanpa memuat ulang halaman). Jadi, untuk mengetahui rilis artikel baru, Anda dapat berlangganan ke situs saya.

Jika Anda memiliki pertanyaan, silakan hubungi, juga, jika Anda melihat ada kesalahan dalam artikel, beri tahu saya.

Rencana Pelajaran (Bagian 5):