24 Nov

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.

Download “CRUD dan Login” belajar.zip – Downloaded 37087 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 anda.

Langkah 2 – Database

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

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

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:

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

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.

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

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. view dataPada 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. form edit databerhasil 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.

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

94 thoughts on “Membuat Aplikasi Input Data Sederhana Dengan PHP

    • Wah iya, saya lupa gak nyebutin nama buat tabel nya,,,,

      Disitu nama untuk tabel nya, saya pake user

      Yok dilanjutin tutorialnya..

  1. Pingback: Membuat Sistem Login Dengan PHP | Nurwahyudin.Com

  2. om, aye ga bisa yg edit..

    muncul error : Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in C:xampphtdocsbelajaredit.php on line 16

    ada yg salah kah?
    terima kasih

    • Dari sisi HTML kode-nya, masih banyak yg kurang2 tuh om…
      Coba dilengkapin dulu antara kutip (“) dan closing tag nya…

      Untuk pesan eror nya itu dari code PHP nya…
      Bisa sekalian smua code di file itu ditampilkan om… biar bisa kasih solusi :)

  3. Mas numpang tanya nih… Seumpama saya buat dua user, User A n user B. lalu saya login pake user A n input data. Kemudian saya ganti user dengan user B kemudian saya tampil data. kok datanya user A bisa kelihatan di user B? biar data user A tidak kelihatan di user B gimana scriptnya mas?

  4. mas, gimana caranya membuat scrip menyimpan data (insert.php) cukup dituliskan di satu file saja yaitu di index.php, khan tidak memperbanyak file di dalam directory

    • biar cukup di 1 file saja, coba pake case.

      Contoh index.php:

      Perhatikan baris kode untuk form, disitu action nya diarahkan ke file index.php dengan tambahan ?act=insert sehingga url nya menjadi index.php?act=insert. nah, variabel act ini yang akan dibaca untuk menentukan action apa yg akan dilakukan oleh file index.php dengan menggunakan case.

  5. sore mas, untuk yang edit, setelah saya ubah datanya dan saya klik save. Pada lihat data, data yang sudah di edit, malah hilang. mohon bantuannya mas….file sudah saya kirim by email…mohon bantuannya…

  6. asalamualaikum gan neh tutorial emang mantep tp kok pas lg menghapus tuh data ilaang semua ya gan tolong gan ane kasih yang menghapusnya satu record ajh
    ……
    mantap bin ajep neh tutorial

    • waalaikumsalam…
      wah tanks nih gan udah dibilang mantepp..

      itu di tutorial buat hapus datanya emang satu-satu koq gan, delete per record, gk delete semuanya
      keknya agan ada di SQL syntax nya…

      coba dicek lagi gan

      delete from user kalo kek gini, bakalan ngehapus semua data di tabel gan.
      buat ngehapus data tertentu, harusnya kek gini gan delete from user where id_user='idnya_si_user'

      dicoba gan…

  7. selamat pagi mas, saya membuat projek yang hampir mirip dengan yang mas ajarkan. tapi ada error,

    Parse error: syntax error, unexpected ‘}’ in C:xampphtdocsadiraview.php on line 45

    mohon bantuannya mas

    DATA PESERTA

    DATA PESERTA ADIRA AICI 2012

    Tambah Data

    USER ID
    DIVISI
    NAMA PESERTA
    JOB TITLE
    ORGANIZATION NAME
    PHOTO
    ACTION

    Edit || Hapus

    • Parse error: syntax error, unexpected ‘}’ in C:xampphtdocsadiraview.php on line 45

      Coba di cek lagi buka tutup blok kode nya {}
      Setiap ada blok pembuka seperti ini {, maka harus ada blok penutupnya seperti ini }

      Cek juga, mungkin blok penutupnya kelebihan, jadi seperti ini {}}

      contoh:
      if (condition) {

      Ini bisa jadi error, karena tidak ada blok penutupnya

      contoh 2:
      if (condition) {   kode program}}

      Ini juga error, karena kelebihan blok penutup.

  8. untuk tambah data kok muncul “Duplicate entry ‘0’ for key 1″ itu gmn?klo primary selain user_id bisa..trims

    • “Duplicate entry ’0′ for key 1″
      Ini berarti errornya karena ada row yang bernilai sama dalam 1 field yang diharuskan unik (tidak boleh sama).

      Dari tutorial, saya cek tidak ada yang salah. Coba mas wawan cek lagi di SQL syntax nya. Untuk belajar, pastikan coding yang dituliskan sama persis dengan yang ada dalam tutorial ini.

      Kalo masih ada masalah, silahkan ditanyakan lagi, and Thanks udah ngikutin tutorialnya… :)

  9. gan, kalau untuk Mencari datanya gmn misal : sy pgn cari nama yang berawalan SRI…
    maka semua yang berawalan SRI tersebut ditampilkan…

    thx.

    • di SQL Query nya pake LIKE gan…

      contoh:
      SELECT * FROM users WHERE fullname LIKE 'sri%'

  10. kl muncul error gini
    Out of range value adjusted for column ‘user_id’ at row 1
    itu knapa ya???
    trus ngatasinnya gimana???
    padahal codingnya udah sama persis…
    mohon pencerahannya mas

    • Kemungkinan erornya ada di struktur database-nya. Coba dicek lagi database-nya, pastikan field user_id itu Auto_Increment.

      Berhasil ato gagal, coba post hasilnya disini ya…

  11. struktur databasenya gini :
    user_id (int(4),not null,auto_increment,primary key)
    nama (varchar(30))
    jk (varchar(15))
    alamat (text)
    username (varchar(15))
    password (varchar(15))

    trus proses.php

    tapi hasilnya masih error “Out of range value adjusted for column ‘user_id’ at row 1″

    solusinya gimana y?
    udah dicoba ganti databse hasilnya masih sama aja mas…

  12. mantap mas bro… sangat membantu pemula seperti saya

    saya mau bikin buku tamu serta comentnya gimana ya mas?

  13. assalamu’alaikum, mas ini tutorial mantaaaaaaabbbbbb, tapi,,,,, kok pas di coba input, ada sintax yg error ya??? masalahnya di pesan saat berhasil input, masalahnya disini mas

    header(‘location:index.php?message=success’);

    hrusnya kan ini ngeling ke index.php,
    apa ada perbedaan versi?

  14. Warning: Cannot modify header information – headers already sent by (output started at C:Program Filesxampphtdocsbelajarconfig.php:11) in C:Program Filesxampphtdocsbelajarinsert.php on line 17

    • Warning: Cannot modify header information – headers already sent by (output started at C:Program Filesxampphtdocsbelajarconfig.php:11) in C:Program Filesxampphtdocsbelajarinsert.php on line 17

      Ini berarti header() dipanggil setelah browser menampilkan sesuatu ke layar.
      Pemanggilan header() harus sebelum browser menampilkan karakter apapun di layar.

  15. oke mas, ada full scripnya ga mas, klo py aq minta dikirimin ke akimbijak@yahoo.com, biar aq pelajari lebih dalam mas, thanks sebelumnya, sy tunggu tutorial2 berikutnya :), salam kenal Akim bekasi

    • Full source code sudah saya lampirkan untuk tutorial ini. Silahkan di download. Link download ada di bagian atas tutorial ini.
      Salam kenal juga :)

  16. Siang mas q udah buat file edit nya,,tapi pas aku nyoba nya ga bisa di edit” mas,,,mhon bantuan nya…nc file edit nya….

    Belajar PHP

    Form Input Data

    <input type="hidden" name="id" value="” />

    Username :
    <input type="text" name="username" maxlength="20" required="required" value="” />

    Password
    :
    <input type="password" name="password" maxlength="20" required="required" value="” />

    Agama
    :
    <input type="text" name="agama" required="required" value="” />

    sekolah
    :
    <input type="text" name="sekolah" required="required" value="” />

    Lihat Data

  17. mas, saya munculnya eror pas mau nampilin pesan, di line ini yang eror:

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

    Tapi klo diganti dengan echo(“Data Berhasil Disimpan”);
    Baru bisa mas. Cuma jd gak tampil message boxnya. kenapa ya mas? makasih

    • Mas Pesan errornya spt ini :

      Warning: Cannot modify header information – headers already sent by (output started at C:Program Filesxampphtdocsbelajarinsert.php:9) in C:Program Filesxampphtdocsbelajarinsert.php on line 24

      • Cannot modify header information – headers already sent

        Itu berarti browser sudah menampilkan sesuatu di layar.
        Penggunaan header() harus sebelum browser menampilkan apapun di layar…

        Coba di cek lagi apa yg udah tampil di layar sebelum perintah hedaer() dipanggil..

  18. cara ngecek apakah data sudah tersimpan di database gimana mas ? biar ga bentrok primary key-nya.
    makasi sebelumnya .. tutorialnya keren .. :)

    • Kalo buat primary key gk bentrok, saya biasanya primary key pake auto_incement, jadi gk akan bentrok karna dari SQL nya otomatis +1 dari primary key terakhir.

      Kalo bikin generator sendiri buat primary key, berarti harus bikin function buat cek nilai primary key terakhir.

  19. makasi mas dan hehehe .. mo nanya lg .. cara masukin tgl gimana ya ? klu aku ketik dgn format yyyy-mm-dd masuk .. kalu format biasa dd-mm-yyyy ga bs .. mohon pencerahan mas. makasi :)

  20. salam kenal mas,
    setelah source di cek sudah bener, begitu dijalankan langsung masuk

    LOGIN
    Username :
    Password :

    sepertinya apa yg kurang ya mas?,,,
    apakah tampilan seperti itu?
    input datanya ga kelihatan,,

    bantu pencerahannya mas,,,,,
    atau gmana ya mas?

    maksih,,

    • Salam kenal juga.

      tutorial ini memang dibuat begitu.
      coba bikin satu user dulu lewat database langsung.
      insert into user values ('', 'admin', 'admin', 'admin@admin.com', 'Administrator', 'Islam', '0123456789')

      • hello mas,,,
        gmana cara inputnya langsung ke database mas,,,??

        insert into user values (”, ‘admin’, ‘admin’, ‘admin@admin.com’, ‘Administrator’, ‘Islam’, ‘0123456789’)

        makasih mas,,,,

  21. makasi mas .. hehehe .. mo nanya lagi .. kalo input tanggal biar di textfield-nya bs ditulis dgn format misal :dd-mm-yyyy gimana caranya mas? kalo di entri sesuai format MySQL ( yyyy-mm-dd ) bisa masuk. kalo pake format laen ga mau .. mohon pencerahannya mas. :)

    • format buat di SQL emang yyyy-mm-dd, jadi kalo masukin formatnya gk gitu, gk bisa.

      kalo pengen ngerubah tampilan format, bisa pake JQuery.

  22. minta izin jadi murid masbro….
    muter” cari tutorial yg pas buat pemula macam saya, disini rupanya berada,
    sy udah coba tutorial diatas, beberapa kali error, tapi pada akhirnya lancar….makasih banyak masbro ditunggu materi berikutnya.

  23. masbro,…. saya sedikit mendalami excel, disana ada kumpulan function (seperti: VLOOKUP,SUM,AVERAGE,dll) lengkap dengan syntax dan contohnya, sehingga kita bisa bereksperimen dengan semua fungsi tersebut….nah di PHP bisa saya dapatkan dimana ? (seperti: header, location, mysql_fetch_array, href, include, dll) yang menurut saya itu adalah “perintah baku/standar”nya PHP. makasih sebelumnya.

  24. waw,,,,,,,,bagus sekali mas artikelnya,,masnya rendah hati n ganteng,,hihihihi
    thankz ya gan, ^_^

  25. mas, aku mau tanya
    gmn caranya input data tapi cuma number aj
    jadi di kolom itu kita hanya bisa ketikan angka aj kl selain angka gk muncul
    mohon pencerahan nya ya mas :D

    • bisa aja..
      itu ditambahin javascript buat validasi…
      nanti dibahas di tutorial lainnya.

  26. mas kalo user nya gak boleh sama gimana caranya ???
    kan username kan kudu unik
    trus nampilkan peringatan kalo username nya ada yg pake dan gimana ??

    • Di database nya, yg kolom username dibikin ‘unique’. Kan ada buat primary, unique, dll…

  27. halo mas, saya natallia. saya masih baru di program ini. dan saya coba mendownload program punya mas. dan coba run. tetapi ada diminta masukin user dan pass untuk login. saya tidak tau apa user dan pass nya. mohon bantuannya untuk info dari user dan pass. terima kasih atas bantuannya:)

    • dalam file downloadnya sudah saya sertakan database dan user untuk login. coba di import dulu yg file .sql ke database. abis itu login dengan user: admin, pass: admin

  28. mas mau tanya dnk, saya udah download program mas dan saya run seperti yang dilakukan mbak natalia. tidak lupa jg saya sudah mengimport file. sql ke databasenya.
    setelah itu saya login dengan user:admin, pass:admin, tetapi muncul tulisan serperti ini:
    Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘root’@’localhost’ (using password: NO) in C:xampphtdocsbelajarconfig.php on line 19
    Access denied for user ‘root’@’localhost’ (using password: NO)
    saya harus bagaimana ya? mohon pencerahan. terimakasih banyak atas tutorialnya yg sangat bermanfaat:)

    • sesuaikan user & password untuk login ke database nya.
      konfigurasi database ada di file config.php
      coba host, username, password, & database name nya disesuaikan dengan yg ada di database mas

  29. Mas, kalau mau disable kan fungsi HTML pada Form Inputnya gimana ya?
    Pengaturannya ada di PHP atau Database?
    Karena kalau masukkan source code IMG SRC maka gambar akan muncul pada halaman View. Jadi intinya, form input hanya bisa di isi dengan Text

  30. pernah download dan nyoba,dan seingetku wktu nyoba berhasil cuman waktu diterapin di programku kok rada2 error gtu,ada yg ga tampil…sangat membantu

  31. makasih mas tutorialnya..saya dah mampir.jangan lupa tutorial yang lainnya.trim’s

Comments are closed.