» » Membuat Aplikasi Input Data Sederhana dengan PHP

Membuat Aplikasi Input Data Sederhana dengan PHP

Detil Tutorial 
Tingkat Kesulitan: Pemula
Bahasa: PHP
Software yang Digunakan: Dreamweaver Atau Edit Plus
                                           WebServer AppServ
Lama Pengerjaan: 1 Hours – 2 Hours
Dalam tutorial ini akan dipelajari cara untuk membuat koneksi ke database dan CRUD data (Create, Read, Update, Delete) dengan studi kasus data user.
Untuk dapat mengikuti tutorial ini, pastikan anda sudah menginstall server lokal pada PC anda. Saya menggunakan APACHE sebagai bundled server apache dan PHP.
Dan untuk Editor PHP saya menggunakan EditPlus




Langkah 1 - Struktur Folder/ Direktori
Buat folder baru pada C:\AppServ\www\ dengan nama belajar. Folder ini akan menjadi area kerja kita dalam membuat aplikasi yang nantinya dapat diakses menggunakan browser dengan mengetikkan localhost/nama_folder. Karena nama folder kita adalah belajar, maka untuk mengakses aplikasi ketikkan localhost/belajar pada address bar browser anda.



Langkah 2 - Membuat Database
Buat database -> buka browser anda ketikkan di URL http://localhost/phpMyAdmin/ (masukkan username dan password anda) 
a. Buat database belajar. 
b. Kemudian buat tabel dengan nama tabel user dengan struktur tabel sebagai berikut:
Fieldname Datatype
user_id int(4), PRIMARY, AUTO INCREMENT
username varchar(20)
password varchar(255)
email varchar(100)
fullname varchar(100)
agama varchar(15)
no_hp bigint(14)

Langkah 3 - File Konfigurasi
Sebelum dapat melakukan CRUD data kedalam database, kita harus membuat koneksi  ke database terlebih dahulu. Tulis kode berikut dengan menggunakan teks editor kesayangan anda (saya menggunakan EditorPlus)

<?php
//host yang digunakan
$host = 'localhost';
//username untuk login ke host
//biasanya didapatkan pada email konfirmasi order hosting
$user = 'root';
//jika menggunakan PC sendiri sebagai host,
//secara default password dikosongkan
$pass = '';
//isikan nama database sesuai database
//yang dibuat pada langkah-1
$dbname = 'belajar';
//mengubungkan ke host
$connect = mysql_connect($host, $user, $pass) or die(mysql_error());
//memilih database yang akan digunakan
$dbselect = mysql_select_db($dbname);
?>


Simpan File dengan nama : config.php (simpan di folder C:\AppServ\www\belajar\) ini nantinya akan banyak kita gunakan pada file-file lain yang perlu menghubung ke server untuk menyimpan, merubah, maupun menghapus data.


Langkah 4 - Membuat Form Input Data

Ketikkan kode berikut dibawah ini, kemudian simpan dalam folder belajar dengan nama index.php

<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<h1>Form Input Data</h1>
<form name="input_data" action="insert.php" method="post">
<table border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td>Username</td>
            <td>:</td>
            <td><input type="text" name="username" maxlength="20" required="required" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td>:</td>
            <td><input type="password" name="password" maxlength="20" required="required" /></td>
        </tr>
        <tr>
            <td>Fullname</td>
            <td>:</td>
            <td><input type="text" name="fullname" maxlength="100" required="required" /></td>
        </tr>
        <tr>
            <td>Email</td>
            <td>:</td>
            <td><input type="email" name="email" required="required" /></td>
        </tr>
        <tr>
            <td>Agama</td>
            <td>:</td>
            <td><input type="text" name="agama" required="required" /></td>
        </tr>
        <tr>
            <td>Nomor HP</td>
            <td>:</td>
            <td><input type="text" name="no_hp" maxlength="14" required="required" /></td>
        </tr>
        <tr>
            <td align="right" colspan="3"><input type="submit" name="submit" value="Simpan" /></td>
        </tr>
    </tbody>
</table>
</form>
</body>
</html>

action=”insert.php” adalah file yang digunakan untuk memproses data yang dimasukkan melalui form ini. method=”post” adalah metode pengiriman data yang digunakan. Ada dua jenis menthod untuk mengirim data, yaitu post dan get.
Pengiriman dengan method POST berarti bahwa variabel-variabel data tidak ditampilkan pada url, sedangkan pengiriman dengan method GET, variabel-variabel data disertakan pada url sehingga url terlihat seperti ini: localhost/belajar/insert.php?username=namanya&password=passwordnya&fullname=nama_lengkapnya
Sekarang coba buka pada browser anda dengan mengetikkan localhost/belajar pada address bar browser. Akan tampil form input data seperti ini.
form input data
Langkah 5 - Menyimpan Data
Ketikkan kode berikut, kemudian dengan nama insert.php

<?php
//panggil file config.php untuk menghubung ke server
include('config.php');
//tangkap data dari form
$username = $_POST['username'];
$password = $_POST['password'];
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$agama = $_POST['agama'];
$no_hp = $_POST['no_hp'];
//simpan data ke database
$query = mysql_query("insert into user values('', '$username', '$password', '$email', '$fullname', '$agama', '$no_hp')") or die(mysql_error());
if ($query) {
    header('location:index.php?message=success');
}
?>

include() digunakan untuk menyertakan file lain dalam file ini. Ingat bahwa pada langkah pertama kita sudah membuat file config.php yang berisi konfigurasi untuk menghubung ke server, maka setiap kali kita perlu untuk menghubung ke database, kita cukup memanggil file config.php saja tanpa harus menuliskan kembali kode-kodenya.
$_POST['name'] digunakan untuk menangkap value yang dikirim dari form. Untuk menangkap data, gunakan name yang sama dengan name dari form. Contoh: untuk menangkap data username dari form, maka gunakan $_POST['username'].
mysql_query() digunakan untuk menjalankan script SQL. Pada langkah ini, script SQL yang kita gunakan adalah untuk menambah data ke database.
Tambahkan kode berikut pada file index.php setelah <h1></h1> untuk menampilkan pesan sukses ketika berhasil menyimpan data.

...
<h1>Form Input Data</h1>
<?php
if (!empty($_GET['message']) && $_GET['message'] == 'success') {
    echo '<h3>Berhasil menambah data!</h3>';
}
?>
<form name="input_data" action="insert.php" method="post">
...

Sekarang coba jalankan aplikasi dengan membuka localhost/belajar dan isikan data pada form dan klik tombol simpan. Jika berhasil, anda akan melihat pesan Berhasil menambah data! seperti gambar dibawah. Jika gagal, periksa kembali kode yang anda tuliskan. Pastikan tidak ada salah pengetikan.
berhasil input data
Membuat Aplikasi Input Data Sederhana dengan PHP 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.
Share 'Membuat Aplikasi Input Data Sederhana dengan PHP ' On ...

Ditulis oleh: Pimituhhrasfah - Sabtu, 19 Januari 2013

Belum ada komentar untuk "Membuat Aplikasi Input Data Sederhana dengan PHP "

Posting Komentar

Warning !!!

Komentar anda tidak boleh mengandung unsur :
1. Penghinaan,Rasis atau Pelecehan
2. Spamming (Spam Coments)
3. Link Iklan,Ads,etc
4. Link aktif atau text anchor dan sejenisnya.

Tulislah setiap kata dengan penuh makna kesopanan.
Salam sejahtera Pimituhhrasfah