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 kalian sudah menginstall server lokal pada PC. Saya menggunakan XAMPP sebagai bundled server apache dan PHP.

Download “CRUD dan Login” belajar.zip – Downloaded 49069 times – 6 kB

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 mengetikkan localhost/nama_folder. Karena nama folder kita adalah belajar, maka untuk mengakses aplikasi ketikkan localhost/belajar pada address bar browser kalian.

Langkah 2 – Database

Buat database dengan nama belajar. Kemudian buat tabel dengan nama user dengan data berikut:

Langkah 3 – File Konfigurasi

Sebelum dapat melakukan CRUD data kedalam database, kita harus membuat koneksi ke database terlebih dahulu. Buat file baru dan simpan dengan nama config.php.

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 nama index.php.

Attribut action="insert.php" adalah file yang digunakan untuk memproses data yang dimasukkan melalui form ini. Attribut 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 berikut:

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

01

Langkah 5 – Menyimpan Data

Ketikkan kode berikut, kemudian dengan nama insert.php.

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

Variabel $_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'].

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

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 kalian ketik. Pastikan tidak ada salah pengetikan.

02

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.

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

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

03

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

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

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 nama update.php dan ketikkan kode berikut.

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

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

05

04

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.

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

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

83 thoughts on “Membuat Aplikasi Input Data Sederhana Dengan PHP”

  1. kok kalau dihapus, semua data yang diinput ikut terhapus? cara untuk membuat data yang dihapus hanya 1 aja gimana??

    1. ada kemungkinan salah di query delete nya, atau id data nya gk masuk ke query.

      untuk delete, pastikan query nya kurang lebih seperti ini
      DELETE FROM nama_tabel WHERE id = $id

  2. Bagus banget,walaupun ada beberapa script penulisan yang case-sensitive seperti: “update user set” seharusnya “UPDATE user SET” yang sempat bikin bete…hee… program jadi error…

    1. case sensitive? environtment nya apa?
      saya coding di windows & linux, sql command gak case sensitive tuh..

      1. Saya kadang buat langsung di notepad. setelah selesai, file dengan extension .txt saya ganti ke .php. Nah…. kalo begini kita tidak dapat warning kalau script kita salah. Kita baru tau dari warning setelah dijalankan di browser. Coba saja misalkan compile:

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

        akan error. Seharusnya:

        $query = mysql_query(“SELECT * FROM user WHERE user_id=’$id'”) or die(mysql_error());

        cuma butuh notepad buat bikin program php :)

        1. @tony
          wah baru nemu nih kasus begini.. :D

          @jack
          dicoba saja bro dengan uppercase dan lowercase.. mana yg works. karena kalau di saya sih memang gk case sensitive, baik dengan notepad ataupun dengan editor lain.

          1. gini gan punya saya kok muncul error teru ya

            “Parse error: syntax error, unexpected ‘=’ in C:\xampp\htdocs\proyek\edit_mhs.php on line 105″

          2. “Parse error: syntax error, unexpected ‘=’ in C:\xampp\htdocs\proyek\edit_mhs.php on line 105″

            Itu artinya ada kesalahan (kurang) tanda = di file edit_mhs.php di baris ke 105
            Coba di cek lagi

    1. buat form baru lagi aja..

      misalkan formnya mau berbeda antara untuk admin & untuk member. tinggal buat aja 2 form berbeda & 2 proses input yg berbeda (kalau logika didalamnya harus berbeda jg)

  3. mantap artikelnya gan.

    @tony kalo gitu aplikasi editornya pake notepad++ atau sublime 2 auto correctnya dihidupin, nanti kalau salah ketik casenya. warnanya akan rubah. jadi bisa kedetect pas kita ngetiknya..

  4. gan maaf, ane newbie, spaya id nya otomatis keisi sendiri gmna gan, saya bikin juga kaya gini tapi buat databasenya pake sqlyog,, jadi setiap buat baru jadi duplicate entry gtu gan

  5. muncul ERROR gini mas

    Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\belajar\otentikasi.php on line 32

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\belajar\otentikasi.php:32) in C:\xampp\htdocs\belajar\otentikasi.php on line 41

    gmn caranya???

    1. mysql_num_rows() expects parameter 1 to be resource

      penyebab:

      • parameter yg diterima mysql_num_rows() gak sesuai yg diminta

      kemungkinan & solusi:

      • pastikan koneksi ke database sukses
      • pastikan query yg digunakan gak ada error

      Warning: Cannot modify header information – headers already sent

      penyebab:

      • sudah ada konten / teks yang muncul di browser sebelum header() dipanggil
        echo "test";
        header('location: index.php'); // error

      solusi:

      • header() harus dipanggil sebelum ada konten apapun yg ditampilkan ke browser, baik karena sengaja ataupun tidak sengaja (ada error di line sebelumnya, dll)
    1. Unknown column ‘user_id’ in ‘where clause’

      itu artinya kolom user_id nya gak ada di tabel yg di select. cek lagi kolom itu ada gak di tabel nya.

  6. Mas, kalau punya saya kalau di hapus satu, terhapus semua yah…

    dan hasil user_id > INT nya tetap nilainya 0 jadi ko gak jadi kaya 1,2,3 tolong dong mas bantuan nya.

  7. Halo Mas Wahyu,

    Contoh code PHP yang Anda berikan semuanya vulnerable terhadap SQL Injection. Kalau saya boleh kasih saran sebaiknya memberitahu pembaca akan masalah SQL injection ini atau menerapkan prepare statements yang sudah disediakan http://php.net/manual/en/pdo.prepared-statements.php. Sebenarnya vulnerable terhadap XSS (Cross Site Scripting) juga sih.

    Tutorialnya sudah bagus. Lanjutkan terus berbagi ilmunya

    Terima Kasih,

    1. Halo mas Wico,

      Thanks atas sarannya. Untuk notifikasi ke pembaca, sudah include di bagian kesimpulan. Selain itu juga memang goal dari tutorial ini hanya pada bagaimana proses CRUD dilakukan, tidak membahas security dan lain-lainnya, termasuk PDO. :)

      Sekali lagi Terima Kasih :)

    1. Duplicate entry ‘0’ for key ‘PRIMARY’

      itu maksudnya datanya duplikat. coba pake auto increment untuk primary key nya.

  8. ane udh ngikutin semuanya,penulisan jg udh sama, kok ,muncul “no database selected”, knp ya tuh gan?

  9. mas wahyu,
    ane udah ikutin smua code nya..
    smuanya jalan, tapi pas mau di edit trus di simpan hasil editannya, semua recordnya jadi sama semua. (sama kaya hasil record yg ane edit).

    itu salahnya dimana ya?
    thx.

    1. cek ID nya pas di query edit.

      UPDATE users SET name='wahyu' >> semua user akan update name nya jadi wahyu.
      UPDATE users SET name='wahyu' WHERE id=1 >> cuma user yg ID nya 1 yg akan di update name nya.

  10. saya dapat masalah disini….. Parse error: syntax error, unexpected ‘$query’ (T_VARIABLE) in C:\xampp\htdocs********\updatedata.php on line 25

    1. Parse error: syntax error, unexpected ‘$query’ (T_VARIABLE) in C:\xampp\htdocs********\updatedata.php on line 25

      cek lagi code nya di line 25. T_VARIABLE biasanya error karena ada semicolon ; yg lupa ditutup

  11. mas, saya mau tanya.
    itu programnya kan kalo kita klik simpan, akan di simpan di tabel user,
    nah pertanyaan saya, bisakah kita input data dan di klik simpan tapi di simpan nya di dua tabel mas?

    1. bisa… banget…

      logikanya gini

      code nya silahkan disesuaikan

  12. gan scrip ane ada yang error ini gan scrip ane yang error Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\pkl\view.php on line 26

    dan ini scripnya gan bikin error while ($query = mysql_fetch_array($query))

  13. Mas mau nanya klo format tanggal & waktu bgmn ya….supaya tanggal dan waktu/time selalu berubah sesuai dengan tanggal dan jam inputan

    sy sudah buat tapi semua jam mengikuti jam yang sekarang…walaupun inputnya hari kemarin

    mohon bantuannya

    thanks

  14. mas, mau nanya kalau mau buat 1 data dengan id yang sama bisa di update lebih dari satu kali dan setiap data update-annya disimpan dalam database gimana ya?
    Jadi datanya itu dipisah dengan titik koma dalam 1 cell.

    Misalnya pegawai A memiliki tugas lebih dari satu, trus db nya diupdate dengan data tugas, tugasnya itu bisa banyak.
    Mohon bantuannya :'(

  15. mohon banntuannya gan kok di langkah 5 saya gagal ya terus yak selalu
    Notice: Undefined index: username in C:\xampp\htdocs\belajar\insert.php on line 6

    Notice: Undefined index: password in C:\xampp\htdocs\belajar\insert.php on line 7

    Notice: Undefined index: fullname in C:\xampp\htdocs\belajar\insert.php on line 8

    Notice: Undefined index: email in C:\xampp\htdocs\belajar\insert.php on line 9

    Notice: Undefined index: agama in C:\xampp\htdocs\belajar\insert.php on line 10

    Notice: Undefined index: no_hp in C:\xampp\htdocs\belajar\insert.php on line 11
    No database selected

    padahal saya copy paste

  16. thx kak buat tutorialnya…
    sangat bermanfaat banget dan pastinya sangat membantu bagi saya…
    makasih buanyakkkk dahhhhhhhhhh

  17. Makasih buat tutorialnya…
    Saya udah nyoba nih mas, pas ngisi data dan klik simpan bilangnya udah berhasil tapi waktu saya cek ke phpmyadmin cuma muncul row kosong dan yang keisi cuma user_id nya aja. Itu gimana ya mas?
    Thank you

Leave a Reply