Pembuatan Form Web Login Sederhana

<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Membuat Form Login Sederhana dengan Notepad++</strong></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Kali ini saya akan menyontohkan pembuatan form login yang sederhana menggunakan notepad++. Software yang dibutuhkan disini yaitu Notepad++ dan MySQL yang terdapat pada saat menginstal XAMPP. Disini saya akan membuat demonstrasi sederhana dari form bisa masuk ke halaman selanjutnya yang terhubung dengan database MySQL.</div> <ol style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; vertical-align: baseline;"> <li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Langkah pertama kita harus membuat databasenya dan table untuk login.</strong></li> </ol> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Disini saya telah membuat database dengan nama <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">rawat_inap </strong>beserta tablenya <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">login</strong>dimana isi dari table login ada 2 coloumn yaitu username dan password. Seperti gambar dibawah ini :<a href="https://bayudwiarta.files.wordpress.com/2014/11/database.jpg" style="border: 0px; color: #19b30b; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><br /></a></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="https://bayudwiarta.files.wordpress.com/2014/11/database.jpg" style="border: 0px; color: #19b30b; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="database" class="alignnone size-medium wp-image-92" height="227" src="https://bayudwiarta.files.wordpress.com/2014/11/database.jpg?w=300&h=227" style="border: 1px solid rgb(221, 221, 221); height: auto; margin-top: 0.4em; max-width: 97.5%; padding: 6px;" width="300" /></a></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> 2. <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Membuat Form Login</strong></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Dalam pembuatan login disini kita menggunakan table agar terlihat lebih rapih. Disini menggunakan source tambahan dalam membuat html sederhana yaitu : <form method=”post”> untuk mengirimkan data agar terkoneksi dengan file yang akan dituju. Berikut ini gambar dari potongan code form :</div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="https://bayudwiarta.files.wordpress.com/2014/11/login.jpg" style="border: 0px; color: #19b30b; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="login" class="alignnone size-medium wp-image-93" height="168" src="https://bayudwiarta.files.wordpress.com/2014/11/login.jpg?w=300&h=168" style="border: 1px solid rgb(221, 221, 221); height: auto; margin-top: 0.4em; max-width: 97.5%; padding: 6px;" width="300" /></a></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Save dengan nama file <span class="skimlinks-unlinked" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">formlogin.php</span></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> 3. <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Membuat Koneksi ke Database</strong></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Pada saat membuat form login barusan kita menaruhkan action ke <span class="skimlinks-unlinked" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">proseslogin.php</span>, sebelum kita membuat <span class="skimlinks-unlinked" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">proseslogin.php</span> terlebih dulu kita membuat koneksinya seperti ini :</div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="https://bayudwiarta.files.wordpress.com/2014/11/koneksi.jpg" style="border: 0px; color: #19b30b; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="koneksi" class="alignnone size-medium wp-image-94" height="168" src="https://bayudwiarta.files.wordpress.com/2014/11/koneksi.jpg?w=300&h=168" style="border: 1px solid rgb(221, 221, 221); height: auto; margin-top: 0.4em; max-width: 97.5%; padding: 6px;" width="300" /></a></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Save dengan nama file <span class="skimlinks-unlinked" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">koneksi.php</span></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> 4. <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Membuat Koneksi dari Form Login ke Database</strong></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Setelah membuat koneksi kedatabase sekarang kita akan menghubungkan form login yang telah kita buat tadi berhubung langsung ke database. Dan untuk menghubungkan dengan koneksi yang telah kita buat tadi,kita hanya perlu memanggilnya dengan cara<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">inlcude “<span class="skimlinks-unlinked" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">koneksi.php</span>”;</strong> . Disini kita membuat proses untuk menyaring data yang kita masukan pada di form  apakah sama dengan yang ada pada database.</div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="https://bayudwiarta.files.wordpress.com/2014/11/proseslogin.jpg" style="border: 0px; color: #19b30b; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="proseslogin" class="alignnone size-medium wp-image-95" height="202" src="https://bayudwiarta.files.wordpress.com/2014/11/proseslogin.jpg?w=300&h=202" style="border: 1px solid rgb(221, 221, 221); height: auto; margin-top: 0.4em; max-width: 97.5%; padding: 6px;" width="300" /></a></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Save dengan nama file <span class="skimlinks-unlinked" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">proseslogin.php</span></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Nah jika sudah buatlah 1 buah file lagi dan tuliskan “Selamat anda berhasil masuk” dengan nama filenya <span class="skimlinks-unlinked" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">home.php</span>. Langsung saja kita coba untuk test hasil dari apa yang telah kita buat tadi. Berikut adalah hasilnya seperti ini :</div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="https://bayudwiarta.files.wordpress.com/2014/11/form.jpg" style="border: 0px; color: #19b30b; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="form" class="alignnone size-medium wp-image-96" height="230" src="https://bayudwiarta.files.wordpress.com/2014/11/form.jpg?w=300&h=230" style="border: 1px solid rgb(221, 221, 221); height: auto; margin-top: 0.4em; max-width: 97.5%; padding: 6px;" width="300" /></a><a href="https://bayudwiarta.files.wordpress.com/2014/11/home.jpg" style="border: 0px; color: #19b30b; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="home" class="alignnone size-medium wp-image-97" height="230" src="https://bayudwiarta.files.wordpress.com/2014/11/home.jpg?w=300&h=230" style="border: 1px solid rgb(221, 221, 221); height: auto; margin-top: 0.4em; max-width: 97.5%; padding: 6px;" width="300" /></a></div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Jika ingin memberikan variasi dekorasi dengan webnya anda bisa tambahakan CSS untuk membuat tampilannya lebih menarik, anda bisa membuatnya sendiri atau pun juga bisa mendownloadnya gratis maupun bayar itu tergantung dengan selera anda masing-masing.</div> <div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24.375px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;"> Sekian dari tutorial form login web programing sederhana dari saya, Sekian. Terima Kasih</div>

Pembuatan Form Web Login Sederhana

Membuat Form Login Sederhana dengan Notepad++ Kali ini saya akan menyontohkan pembuatan form login yang sederhana menggunakan notepad++. ...

Baca selengkapnya »