Showing posts with label Tutorial HTML. Show all posts
Showing posts with label Tutorial HTML. Show all posts

Validasi Form/Inputan Email Menggunakan Java Script

Validasi Form/Inputan Email Menggunakan Java Script - Asalamualaikum kawan, apa kabar? Semoga ente disana masih dalam keadaan terbaik ente, tiada galau di antara kita. hehehe... Okey, kali ini saya akan membahas tentang "Validasi Form/Inputan Email Menggunakan Java Script", nah dari judulnya aja udah kelihatan ya, script yang bakalan kita bahas ini untuk apa? :p

Validasi Form/Inputan Email Menggunakan Java Script
Validasi Form/Inputan Email Menggunakan Java Script

Pada pertemuan sebelumnya kita telah membahas tentang "Input Validasi Java Script, Jika Form Kosong Data Tidak Di Proses". Nah, mungkin pada tutorial kali ini hampir sama dengan yang saya maksud tadi, tapi dalam tutorial kali ini terdapat beberapa fungsi dari java script untuk memfilter "@" dan ".". Hehehe...

Hanya terdapat 2 file pada bahasan kali ini, yaitu file "form_email.php" dan file "proses_email.php". Karena hanya sebagai permisalan saja, pada file "proses_email.php" hanya berisi script yang berfungsi untuk hanya menampilkan isi email dari "form_email.php".

form_email.php
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}
</script>
</head>

<body>
<form name="myForm" action="form_proses.php" onSubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>

form_proses.php
<?php
    $email = $_post['email'];
    echo $email;
?>

Penjelasan :
Pada bagian "form_email.php" terdapat script var atpos=x.indexOf("@"); dan var dotpos=x.lastIndexOf("."); nah ini yang saya maksud sebagai filter "@" dan ".". Dan pada "form_proses.php" disitu hanya mempunyai fungsi untuk mengambil nilai email dan menampilkannya.

Cupup sekian tutorial saya yang membahas tentang "Validasi Form/Inputan Email Menggunakan Java Script". Semoga saja dapat bermanfaat, jangan lupa sebelum pergi meninggalkan komentar di bawah ini. :p Terima kasih. Hehehe... :p

Membuat Form Beserta Proses Penyimpanan Kedalam Database/Mysql

Membuat Form Beserta Proses Penyimpanan Kedalam Database/Mysql - Selamat datang para pencinta web design ataupun web developer. Pada tutorial sebelumnya yaitu pada "Membuat Form Komentar Rapi Dengan HTML", banyak sekali pembaca yang menginginkan lanjutan dari tutorial tersebut, jadi ini mungkin bisa dijadikan lanjutannya.

Pada kali ini saya akan menyampaikan sedikit tutorial tentang bagaimana membuat form beserta penyimpanan kedalam database/mysql. Karena banyak sekali permintaan dari pengunjung tentang tutorial ini.

Membuat Form Beserta Proses Penyimpanan Kedalam Database/Mysql
Membuat Form Beserta Proses Penyimpanan Kedalam Database/Mysql

Nantinya akan ada 2 buah file yaitu "index.php" dan "proses.php". Cara kerja script ini adalah form yang ada di index.php di isi dengan data kemudian setelah di klik submit, data akan terkirim ke file proses.php. Dalam file proses.php terdapat proses menampilkan data hasil men-submit tadi dan juga proses menyimpan kedalam database/mysql. Seperti itu, :p

database
CREATE TABLE IF NOT EXISTS `tbl_guest` (
  `id_guest` int(3) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) NOT NULL,
  `email` varchar(50) NOT NULL,
  `komentar` text NOT NULL,
  PRIMARY KEY (`id_guest`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

INSERT INTO `tbl_guest` (`id_guest`, `nama`, `email`, `komentar`) VALUES
(1, 'Bactiar Nur Yusuf', 'bactiar.on@gmail.com', 'Ane mampir gan, kunjungan balik ya. :)'),
(2, 'Fernando Torres', 'torres.fernando@gmail.com', 'Tendangan gw kemaren membawa spanyol mengangkat piala lho Bro. :)'),
(3, 'Andreas Iniesta', 'andreas_villas@ymail.com', 'Numpang lewat ya bang, Hihihi');

index.php
<form action="proses.php" method="post">
<table>
      <tr>
          <td colspan="3">&nbsp;</td>
      </tr>
      <tr>
          <td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
      </tr>
      <tr>
          <td>Nama</td>
          <td>:</td>
          <td><input type=text name="nama"></td>
      </tr>
      <tr>
          <td>Email</td>
          <td>:</td>
          <td><input type=text name="email"></td>
      </tr>
      <tr>
          <td valign=top>Komentar</td>
          <td valign=top>:</td>
          <td><textarea name="komentar" rows=6 width=200></textarea></td>
      </tr>
      <tr>
          <td colspan="3"><input type=submit name="submit" value=submit></td>
      </tr>
</table>
</form> 

proses.php
<?php
    $host = "127.0.0.1";
    $user = "root";
    $pass = "";
    $db = "db_demo";
  
    $connect_db = mysql_connect($host,$user,$pass);
    $pilih_data = mysql_select_db($db,$connect_db);
        if(! $pilih_data)
            {
                echo "Koneksi Gagal.";
            }
          
    $nama  = $_POST['nama'];
    $email  = $_POST['email'];
    $komentar = $_POST['komentar'];
  
    echo "Nama : $nama";
    echo "Email : $email";
    echo "Komentar : $komentar<br><br>";
  
    $query = "INSERT INTO tbl_guest VALUES('','$nama','$email','$komentar')";
    $hasil = mysql_query($query);
  
    if ($hasil) echo "Data berhasil disimpan.";
    else echo "Data gagal disimpan.";
?>

Penjelasan :
Buat database terlebih dahulu dengan nama "db_demo", kemudian buat tabel dengan nama "tbl_guest". Setelah itu isi database dengan script yang seperti diatas(database). Pada "index.php" terdapat action="proses.php", bagian itu di maksudkan sebagai tujuan kemana data pada form akan di proses. Pada "proses.php" adalah di mana data pada form di tampilkan dan disimpan ke dalam database.

Mungkin untuk tutorial "Membuat Form Beserta Proses Penyimpanan Kedalam Database/Mysql" ini kita cukupkan saja, jika dari teman-teman ada yang kurang paham silahkan bertanya melalui form komentar dibawah ini. Terima kasih :)

Input Validasi Java Script, Jika Form Kosong Data Tidak Di Proses

Input Validasi Java Script, Jika Form Kosong Data Tidak Di Proses - Selamat pagi kawan, wah akhirnya hampir selesai juga modifikasi template blog tutsphpmysql.blogspot.com ini. Sekalian deh, nulis tutorial sederhana tentang bagaimana cara validasi form di HTML dengan memanfaatkan Java Script dan nantinya proses akan di kirim ke PHP.

Input Validasi Java Script, Jika Form Kosong Data Tidak Di Proses
Input Validasi Java Script, Jika Form Kosong Data Tidak Di Proses

Alur kerja aplikasi sederhana dalam tutorial ini yaitu jika form kosong maka inputan pada form tidak akan di proses, jika pada form tersebut berisi data string ataupun integer maka data yang ada pada form dan di proses ke file php.

Akan ada 2 file pada tutorial ini yaitu "index.php" dan "proses.php".

index.php
<html>
    <body>
        <script>
            function myFungsi() {
                var Formku = document.forms['myForm']['a'].value;
                if(Formku==null || Formku=="")
                    {
                        alert("Form Harus Complete!!!");
                        return false;
                    }
            }
        </script>
        <form action="proses.php" method="post" name="myForm" onSubmit="return myFungsi()">
            <input name="a" type="text" />
            <input type="submit" value="Submit" />
        </form>
    </body>
</html>

proses.php
<?php
    $a = $_POST['a'];
    echo "Isi Inputan : ". $a;
?>

Penjelasan :
"function myFungsi()" adalah sebuah fungsi yang di buat menggunakan script javascript yang nantinya dipanggil oleh "onSubmit" di HTML. Dan "document.forms['myForm']['a'].value" adalah sebuah script untuk mengambil nilai dari inputan. Pada file "proses.php" kita menampilkan isi dari inputan.

Okey, sekian dulu tutorial untuk "Input Validasi Java Script, Jika Form Kosong Data Tidak Di Proses" ini semoga bermanfaat dan jangan sungkan untuk mampir lagi ke blog ini. Keep Coding ya. :) Terima kasih #SruputKopi

Membuat Link New Tab Menggunakan HTML

Membuat Link New Tab Menggunakan HTML - Selamat malam saudara-saudaraku sekalian dimanapun kamu berada, semoga di malam yang cadas ini karena sambil nulis artikel ini suara vokalis Edane menggema di telinga saya. hehehe...

Membuat Link New Tab Menggunakan HTML
Membuat Link New Tab Menggunakan HTML

Okey, pada kesempatan kali ini saya akan berbagi tentang bagaimana cara membuat sebuah link yang menggunakan HTML dengan syntak New Tab pada browser kesayangan kamu. Dengan memanfaatkan syntak "_blank", kita sudah bisa membuat link new tab tersebut.

Ini contohnya :
<html>
<head>
<title>Link New Tab Pada Browser</title>
</head>
<body>
<p>Klik link dibawah ini dan lihat perbedaannya : </p>
<a href="klik.html">Klik Disini</a><br>
<a href="klik.html" target="_blank">Klik Disini</a> (tab baru)
</body>
</html>

Jika ingin mempraktekkannya, salin script diatas kemudian tempel di sebuah file HTML dengan nama klik.html. Semoga bermanfaat ya... :)

Membuat Form Komentar Rapi Dengan HTML

Membuat Form Komentar Rapi Dengan HTML - Selamat datang di blog yang khusus membahas tentang web dan kawan-kawannya, cocok untuk para pemula yang ingin mempelajari tentang web. Karena juga sang penulis pada blog ini juga masih bisa dikatakan programmer cupu. hehehe...

form komentar
Membuat Form Komentar Rapi Dengan HTML

Sesuai dengan gambar yang ada diatas, pada artikel kali ini kita akan membahas tentang bagaimana membuat form dengan menggunakan HTML yang rapi. Cukup dengan HTML saja tanpa CSS, kita sudah bisa membuat form HTML yang rapi seperti diatas. Berikut scriptnya :

form_komentar.html
<table>
              <tr>
                  <td colspan="3">&nbsp;</td>
              </tr>
              <tr>
                  <td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
              </tr>
              <tr>
                  <td>Nama</td>
                  <td>:</td>
                  <td><input type=text name="nama"></td>
              </tr>
              <tr>
                  <td>Email</td>
                  <td>:</td>
                  <td><input type=text name="email"></td>
              </tr>
              <tr>
                  <td valign=top>Komentar</td>
                  <td valign=top>:</td>
                  <td><textarea name="komentar" rows=6 width=200></textarea></td>
              </tr>
              <tr>
                  <td colspan="3"><input type=submit name="submit" value=submit></td>
              </tr>
          </table>

Silahkan salin script di atas kemudian tempel di notepad, simpan dengan nama form_komentar.html. Terima kasih telah berkunjung, silahkan tinggalkan komentar, terima kasih. :)

Membuat Login Dengan PHP (Tanpa Database)

Membuat Login Dengan PHP (Tanpa Database) - Halo kawan... :)
Artikel ini adalah artikel pertama saya yang tertulis di blog TutsPhpMysql ini. Pada artikel kali ini saya akan membahas bagaimana sih konsep dari login pada pemrogramman web. Kita membuat login sederhana dulu tanpa adanya database dan enkripsi MD5. Apa itu MD5...??? Pada artikel selanjutnya akan kita bahas lebih dalam.

Sekarang kita bahas dulu konsep login pada web, hehehe... Nantinya akan ada 2 buah file yang akan kita buat untuk tutorial kali ini. Yaitu file login.php dan hasil.php.

login.php
<html>
    <head>
        <title>Form Login</title>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <form method="GET" action="hasil.php">
                        <input type="teks" name="user">
                        <input type="password" name="pass">
                        <input type="submit" value="Login">
                    </form>
                </td>
            </tr>
        </table>
    </body>
</html>

hasil.php
<?php
    $user = $_GET['user'];
    $pass = $_GET['pass'];
    if (($user=="bactiar")&&($pass=="newbie"))
        printf ("Selamat $user, Anda Berhasil Masuk.");
    else
        printf ("Username atau Password Anda Salah.");
?>

Untuk download scriptnya disini :

Selamat mencoba tutorial Membuat Login Dengan PHP (Tanpa Database) ini, semoga bermanfaat. Happy Blogging and Keep Coding.