Thursday 8 September 2016

Menyimpan Data ke database dengan PHP dari form HTML


Selamat datang di inidiablogs kali ini saya akan berbagi bagaimana cara menyimpan data yang di input melalui sebuah form dan disimpan kepada sebuah database. Dalam tutorial ini saya membuat sebuah kasus dimana saya akan membuat sebuah form pendaftaran siswa baru,
dengan field sebagai berikut :

1.      No_pendaftaran (Auto Increment)
2.      Nama (Text Field)
3.      Jenis Kelamin (Radio Button)
4.      Agama (Select)
5.      Nama Orang tua / Wali (Text Field)
6.      No Telpon (Text Field)
7.      Alamat (Text Area)

 Step 1 – Membuat DataBase

Langkah pertama yang akan kita lakukan adalah membuat database untuk menyimpan data yang kita input kan pada form pendaftaran tersebut. dalam kasus ini saya membuat nama dari database nya adalah db_sekolah dan satu table dengan nama pendaftaran. Saya menggunakan xampp dalam pembuatan database.
Pada table pendaftaran buatlah strukturnya seperti berikut :

no
Field
Type
Extra
1
no_pendaftaran
Int(10) – Primary key
Auto Increment
2
nama
Varchar(45)

3
jenis_kelamin
Varchar(10)

4
agama
Varchar(15)

5
nama_ortu
Varchar(45)

6
no_telp
Bigint(12)

7
alamat
text


Untuk nomor pendaftaran kita buat menjadi auto increment agar nantinya nomor pendaftaran dapat terisi otomatis, penggunaan auto increment ini memungkinkan no pendaftaran tidak ada yang sama satu sama lain.

Step 2 – Membuat Form Pendaftaran dengan HTML

Jika kita sudah membuat database, selanjutnya adalah kita membuat form pendaftaran dengan menggunakan html, form ini nantinya yang akan menjadi perantara antara user dengan database dalam melakukan penyimpanan data.
Buatlah struktur HTML seperti berikut ini untuk pembuatan form nya :

<html>
<head>
<title>Form Pendaftaran</title>
<body>

<hr width=50%> <!--membuat garis-->
<center><h1>Form Pendaftaran Siswa Baru</h1></center><hr width=50%>
<form name="pendaftaran" method="POST" action="act_pendaftaran.php">
<table border=0 align="center">
            <tr>
            <td> Nama   </td>
            <td><input type="text" name="nama" maxlength=45></td>
            </tr>   

            <tr>
            <td> Jenis Kelamin  </td>
            <td><input type="radio" name="jk" value="Laki-laki">Laki-Laki <input type="radio"
              name="jk" value="perempuan">Perempuan
            </tr>   

            <tr>
            <td> Agama   </td>
            <td><select name="agama" size=1> <option value="Islam"> Islam </option>
            <option value="Kristen">Kristen</option>
            <option value="hindu">Hindu</option>
            <option value="budha">Budha</option>
            </select></td>
            </tr>

            <tr>
            <td> Nama Orang Tua/Wali   </td>
            <td><input type="text" name="ortu" maxlength=45></td>
            </tr>
           
            <tr>
            <td> No Telpon    </td>
            <td><input type="text" name="no_telp" maxlength=12></td>
            </tr>   

            <tr>
            <td> Alamat   </td>
            <td><textarea name="alamat"></textarea></td>
            </tr>

            <tr>
            <td><input type="submit" value="Simpan"> <input type="reset" value="Cancel"></td>
            </tr>

</table>
</form>
<hr width=50%> <!--membuat garis-->
</body>
</head>
</html>

    Simpan pada C://xampp/htdocs/ pada folder htdocs buatlah sebuah folder  dengan nama pendaftaran dan simpan file html tersebut pada folder yang anda buat tadi dengan nama pendaftaran.html.

     Jika sudah disimpan pada folder pendaftaran maka selanjutnya kita coba untuk melihat hasil dari struktur html yang kita buat tadi. Buka browser anda , pada address bar ketikan localhost/pendaftaran/pendaftaran.html pastikan Apache dan Mysql pada xampp anda sudah aktif sebelumnya lalu tekan enter.

Maka hasilnya akan seperti gambar berikut :


Jika hasil yang anda buat sudah sama seperti gambar, selanjutnya kita buat file php untuk mengoneksikan form yang kita buat dengan database.

Step 3  - Membuat Koneksi Database

Buatlah file baru pada editor anda, dan ketikan script php berikut ini :

<?php
$dbhost="localhost";
$dbuser="root";
$dbpadd=" ";
$dbname="db_sekolah";

mysql_connect($dbhost, $dbuser, $dbpass) or die("Server tidak terhubung");
mysql_select_db($dbname) or die("database tidak terkoneksi");
?>
Simpan pada folder yang sama dengan nama koneksi_database.php



Step 4 – Membuat ACTION

    Pada struktur html, tepatnya pada tag <form> terdapat atribut action yang memiliki value “act_pendaftaran.php”, ini mengartikan ketika kita menekan button simpan maka kita diarahkan ke act_pendaftaran.php pada act_pendaftaran inilah proses penyimpanan data ke database dilakukan.

Buatlah sebuah document baru pada editor anda dan ketikan scipt berikut ini untuk membuat act_pendaftaran.php

<?php
session_start();
include "koneksi_database.php";

$no;
$nama = $_POST['nama'];
$agama = $_POST['agama'];
$ortu = $_POST['ortu'];
$no_telp = $_POST['no_telp'];
$alamat = $_POST['alamat'];
$query = "insert into pendaftaran values ('$no','$nama','$jk','$agama','$ortu','$no_telp','$alamat')";
$exe=mysql_query($query);
Echo “data berhasil disimpan “;

?>

Keterangan :

1.      include "koneksi_database.php"; =  digunakan untuk memanggil file koneksi ke database yang kita buat tadi.

2.      $_POST[‘value] = mengambil nilai dari form, pada “value” disikan sesuai dengan name pada atribut-atribut  dari form.

3.      $nama = variable baru yang akan menyimpan value yang dipanggil dari form oleh $_POST[‘value’];

Simpan dengan nama act_pendaftaran.php pada folder yang sama dengan pendaftaran.html dan koneksi_database.php.


Jika semuanya sudah dibuat, coba lakukan tes untuk melihat apakah sudah berhasil menyimpan atau belum pada database, jika ada yang belum dimengerti atau terdapat kesalahan coba tinggalkan komentar atau kirimkan pertanyaan melalui email ke inidiaketemujuga@gmail.com .

Sekian saat tutorial kali ini tentang membuat sebuah form perndaftaran dan menyimpan data pada database.

 unduh file project menyimpan data ke database dengan php dari form html

2 comments:

Subscribe to: Post Comments (Atom)