Membuat Aplikasi Input Data Sederhana Dengan PHP

Dalam tutorial ini akan dipelajari cara untuk membuat koneksi ke database danÂ CRUD data (Create, Read, Update, Delete) dengan studi kasus data user. Tutorial ini belum membahas tentang validasi inputan baik client side maupun server side. Untuk dapat mengikuti tutorial ini, pastikan anda sudah menginstall server lokal pada PC anda. Saya menggunakan XAMPP sebagai bundled server apache dan PHP.

Langkah 1 – Struktur Folder

Buat folder baru pada C:/xampp/htdocs dengan nama belajar. Folder ini akan menjadi area kerja kita dalam membuat aplikasi yang nantinya dapat diakses menggunakan browser dengan mengetikkanlocalhost/nama_folder. Karena nama folder kita adalah belajar, maka untuk mengakses aplikasi ketikkan localhost/belajarÂ pada address bar browser anda.

Langkah 2 – Database

Buat database dengan nama belajar. Kemudian buat tabel dengan namauserÂ dengan data 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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?php

//host yang digunakan

//99,9% tidak perlu dirubah

$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';

//mengubung ke host

$connect = mysql_connect($host, $user, $pass) or die(mysql_error());

//memilih database yang akan digunakan

$dbselect = mysql_select_db($dbname);

?>

File config.phpÂ ini nantinya akan banyak kita gunakan pada file-file lain yang perlu menghubung ke server untuk menyimpan, merubah, maupun menghapus data.

Langkah 4 – Form Input Data

Ketikkan kode berikut, kemudian simpan dalam folder belajarÂ dengan namaindex.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<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:

1

http://localhost/belajar/insert.php?username=namanya&password=passwordnya&fullname=nama_lengkapnya

Sekarang coba buka pada browser anda dengan mengetikkanlocalhost/belajarÂ pada address bar browser. Akan tampil form input data seperti ini.

Langkah 5 – Menyimpan Data

Ketikkan kode berikut, kemudian dengan nama insert.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<?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.

1

2

3

4

5

6

7

8

9

10

11

...

<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.

Langkah 6 – Menampilkan Data

Setelah kita berhasil menyimpan data kedalam database, sekarang kita buat halaman untuk menampilkan data-data yang sudah kita simpan. Ketikkan kode berikut dan simpan dengan nama view.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<?php

include('config.php');

?>

<html>

<head>

<title>Belajar PHP</title>

</head>

<body>

<h1>Data User</h1>

<a href="index.php">+ Tambah Data</a>

<table border="1" cellpadding="5" cellspacing="0">

    <thead>

        <tr>

            <td>No.</td>

            <td>Username</td>

            <td>Password</td>

            <td>Email</td>

            <td>Fullname</td>

            <td>Agama</td>

            <td>No. HP</td>

            <td>Opsi</td>

        </tr>

    </thead>

    <tbody>

    <?php

    $query = mysql_query("select * from user");

    $no = 1;

    while ($data = mysql_fetch_array($query)) {

    ?>

        <tr>

            <td><?php echo $no; ?></td>

            <td><?php echo $data['username']; ?></td>

            <td><?php echo $data['password']; ?></td>

            <td><?php echo $data['email']; ?></td>

            <td><?php echo $data['fullname']; ?></td>

            <td><?php echo $data['agama']; ?></td>

            <td><?php echo $data['no_hp']; ?></td>

            <td><a href="#">Edit</a> || <a href="#">Hapus</a></td>

        </tr>

    <?php

        $no++;

    }

    ?>

    </tbody>

</table>

</body>

</html>

Kemudian tambahkan kode berikut pada file index.phpÂ setelah</form>Â sebelum </body>.

1

2

3

4

5

6

7

...

</form>

<a href="view.php">Lihat Data</a>

</body>

</html>

Sekarang bukalah localhost/belajar/view.phpÂ untuk melihat hasilnya. view data

Pada kolom opsi terdapat dua menu, yaitu edit dan hapus. Pada langkah ini, kedua menu tersebut masih belum dapat digunakan. Pada langkah berikutnya akan kita buat menu edit tersebut.

Langkah 7 – Merubah/Update Data

Dalam menginputkan data bisa terjadi kesalahan seperti kesalahan input, kesalahan data yang dimasukkan, ataupun lainnya. Untuk itu, data yang sudah disimpan harus dapat dirubah sehingga kesalahan dapat diperbaiki. Pada dasarnya, form untuk mengedit data adalah sama dengan form untuk menginputkan data. Hanya saja pada form untuk mengedit data, form tersebut harus menampilkan data yang akan dirubah. Untuk itu, buat file baru dengan nama edit.php, kemudian copy-kan semua kode yang ada pada fileindex.phpÂ kedalam file edit.php. Selanjutnya kita harus menambahkan beberapa kode agar form edit dapat menampilkan data yang akan di edit. Kode untuk file edit.phpÂ menjadi seperti ini. Highlight yang saya berikan adalah baris-baris kode yang ditambahkan ataupun dirubah.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

<?php

include('config.php');

?>

<html>

<head>

<title>Belajar PHP</title>

</head>

<body>

<h1>Form Input Data</h1>

<?php

$id = $_GET['id'];

$query = mysql_query("select * from user where user_id='$id'") or die(mysql_error());

$data = mysql_fetch_array($query);

?>

<form name="update_data" action="update.php" method="post">

<input type="hidden" name="user_id" value="<?php echo $id; ?>" />

<table border="0" cellpadding="5" cellspacing="0">

    <tbody>

        <tr>

            <td>Username</td>

            <td>:</td>

            <td><input type="text" name="username" maxlength="20" required="required" value="<?php echo $data['username']; ?>" disabled /></td>

        </tr>

        <tr>

            <td>Password</td>

            <td>:</td>

            <td><input type="password" name="password" maxlength="20" required="required" value="<?php echo $data['password']; ?>" /></td>

        </tr>

        <tr>

            <td>Fullname</td>

            <td>:</td>

            <td><input type="text" name="fullname" maxlength="100" required="required" value="<?php echo $data['fullname']; ?>" /></td>

        </tr>

        <tr>

            <td>Email</td>

            <td>:</td>

            <td><input type="email" name="email" required="required" value="<?php echo $data['email']; ?>" /></td>

        </tr>

        <tr>

            <td>Agama</td>

            <td>:</td>

            <td><input type="text" name="agama" required="required" value="<?php echo $data['agama']; ?>" /></td>

        </tr>

        <tr>

            <td>Nomor HP</td>

            <td>:</td>

            <td><input type="text" name="no_hp" maxlength="14" required="required" value="<?php echo $data['no_hp']; ?>" /></td>

        </tr>

        <tr>

            <td align="right" colspan="3"><input type="submit" name="submit" value="Simpan" /></td>

        </tr>

    </tbody>

</table>

</form>

<a href="view.php">Lihat Data</a>

</body>

</html>

Kemudian ubah link pada file view.phpÂ menjadi seperti ini.

1

<td><a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> || <a href="#">Hapus</a></td>

Umumnya, username seseorang tidak boleh dirubah setelah ia terdaftar. Untuk membuat agar field input username tidak dapat dirubah, kita gunakan atribut disabled.Â Sampai langkah ini kita belum dapat melakukan perubahan data, kita baru dapat menampilkan data pada form edit. Untuk merubah data pada database, kita perlu membuat queryÂ SQL lagi untuk meng-updateÂ database dengan data yang baru. Buat file baru dengan namaupdate.phpÂ dan ketikkan kode berikut.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<?php

include('config.php');

//tangkap data dari form

$id = $_POST['user_id'];

$password = $_POST['password'];

$fullname = $_POST['fullname'];

$email = $_POST['email'];

$agama = $_POST['agama'];

$no_hp = $_POST['no_hp'];

//update data di database sesuai user_id

$query = mysql_query("update user set password='$password', fullname='$fullname', email='$email', agama='$agama', no_hp='$no_hp' where user_id='$id'") or die(mysql_error());

if ($query) {

    header('location:view.php?message=success');

}

?>

Kemudian tambahkan baris kode berikut pada file view.php setelah<h1></h1>Â (sama seperti pada file index.php).

1

2

3

4

5

<?php

if (!empty($_GET['message']) && $_GET['message'] == 'success') {

    echo '<h3>Berhasil meng-update data!</h3>';

}

?>

Sekarang bukalah halaman view.phpÂ pada browser dan ubah-lah salah satu data yang sudah di inputkan dengan meng-klik tombol edit. form edit data

Langkah 8 – Menghapus/Delete Data

Setelah bisa menambah dan merubah data, sekarang kita buat untuk menghapus data. Buat file baru dengan nama delete.phpÂ dan ketikkan kode berikut.

1

2

3

4

5

6

7

8

9

10

11

<?php

include('config.php');

$id = $_GET['id'];

$query = mysql_query("delete from user where user_id='$id'") or die(mysql_error());

if ($query) {

    header('location:view.php?message=delete');

}

?>

Kemudian tambahkan kode pada link dalam file view.phpÂ seperti berikut.

1

2

3

4

<td>

    <a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> ||

    <a href="delete.php?id=<?php echo $data['user_id']; ?>">Hapus</a>

</td>

Sekarang cobalah untuk menghapus beberapa data yang sudah di-input-kan.

Kesimpulan

Cobalah ber-eksperimen membuat aplikasi dengan lebih banyak input-an data sehingga tabel didalam database juga menjadi semakin banyak, agar pemahaman konsep dasar tentang pembuatan aplikasi web dengan PHP semakin kental dan mendalam. Untuk pembuatan aplikasi yang lebih kompleks, tentu tutorial ini tidak cukup karena masih banyak sekali yang harus disertakan seperti validasi, security, user interface, dan banyak lagi materi lainnya yang akan dibahas dalam tutorial berikutnya. I hope you enjoyed this tutorial and have learn something new today. Yang berhasil mengikuti tutorial, WAJIB isi komentar! Yang masih error, juga WAJIB isi komentar! Karena isi komentar itu hukumnya WAJIB… haha

ALL INFORMASI

Membuat Apilkasi Input Data Dengan PHP

Membuat Aplikasi Input Data Sederhana Dengan PHP

Langkah 1 – Struktur Folder

Langkah 2 – Database

Langkah 3 – File Konfigurasi

Langkah 4 – Form Input Data

Langkah 5 – Menyimpan Data

Langkah 6 – Menampilkan Data

Langkah 7 – Merubah/Update Data

Langkah 8 – Menghapus/Delete Data

Kesimpulan

0 komentar:

Posting Komentar

About

Popular

Blogger templates

Blogroll

About

Buscar

Total Tayangan Laman

Blog Archive

Labels

Labels

Ads

Pages

Mengenai Saya

About Templatezy

Pengikut