Banyak pertanyaan yang admin perhatikan dari member php indonesia tentang menyimpan data dari form ke database. Pada postingan ini admin mencoba untuk mengajarkan kepada pemula bagaimana cara menyimpan data dari berbagai macam control form element.
Dalam postingan ini admin menggunakan Bootstrap css sebagai tampilan form dan hasilnya. Bagi pemula setidaknya bisa memahami bagaimana data mengalir dari form menuju proses dan tersimpan ke database hingga akhirnya kembali ditampilkan pada tabel.
Langkah awal dari postingan ini adalah bagaimana mempersiapkan database sebagai tempat penyimpanan data. Dilanjutkan dengan melakukan desain form input data lengkap dengan control form element yang sering kita jumpai nanti saat membangun website admin.
Sebagai catatan form element yang sering kita jumpai seperti input field, text area, radio button, check box dan select option. Hal utama dalam melakukan desain elemen form pastikan memberikan atribut "name" yang nantinya sangat berfungsi mengirimkan value atau nilai dari element form ke halaman proses.
Setelah desain form selesai, lanjutkan dengan membuat script proses penyimpanan data. pada postingan ini admin menggunakan MySQLi untuk membuat query penyimpanan data serta query penampilan datanya.
Hal penting berikutnya adalah menampilkan data yang telah tersimpan didatabase dengan mengisi value atau nilai ke setiap element form yang ada. Admin sengaja membuat semua menjadi satu halaman agar memudahkan proses pengerjaan dan memudahkan member melihat script yang ada.
Bagi pemula yang masih belum berhasil atau masih penasaran dengan hasilnya, dapat melihat video demo dibawah sebagai acuan dari hasil program yang ada pasa postingan ini. Jika member masih belum sukses menerapkan script di atas, Admin akan memberikan link Download agar member dapat melihat script utuhnya.
Silahkan Contact Admin jika member butuh urgent / darurat cepat, silahkan hubungi pada halaman contact di paling bawah halaman ini, terima kasih semoga bermanfaat member.
Dua Metode Edit Data Lebih Dinamis, Modal Bootsrap Dan Live Editable
Saya banyak menemukan pertanyaan tentang bagaimana melakukan edit data dari member php indonesia. Dari banyak cara melakukan edit data, saya meluangkan waktu untuk melakukan postingan tentang dua metode edit data yang terlihat lebih dinamis.
Edit data yang saya terangkan disini yaitu menggunakan Modal Bootstrap dan Live CRUD versi phpsuka.blogspot.co.id yang sebelumnya pernah saya posting. Dua metode edit ini lebih banyak bermain dengan koding javascript.
Bagian tersulit dari dua metode ini adalah live crud yang harus satu persatu melakukan hidden ke setiap <span> dan menampilkan text field ketikan menu / button edit di klik. Juga bagaimana melakukan return false ketika mouse melakukan klik di luar area editing.
Sedangkan menggunakan modal bootstrap bisa di anggap memudahkan karna bootstrap sudah menyediakan beberapa kodingan yang dinamis. Sebagian member bahkan menganggap ini sulit, namun setelah di teliti kendala mereka hanya saat melakukan pengiriman variable dari Modal ke Ajax.
Kedua metode di atas menggunakan ajax agar terlihat lebih dinamis dari setiap action-action yang ditampilkan. Seperti kita ketahui ajax merupakan proses yang tidak memerlukan page mereload untuk melakukan refresh data.
Dalam postingan ini saya menggunakan dataTables agar memudahkan dalam pencarian data serta memanage paginasinya. Dengan menggunakan dataTables kita tidak perlu membuat kodingan yang panjang karna sudah include pada css dan js nya.
Postingan ini menerima kritikan jika anda ingin kami menampilkan source code, silahkan beri komentar dan kami akan menanggapi kritikan pembaca, terimakasih atas saran dan kritiknya.
Semoga postingan ini dapat membuka pikiran dan logika para member php indonesia, dari pertanyaan member postingan ini ada. Dalam postingan ini juga saya lampirkan video demo dan beserta dengan source code lengkapnya yang dapat anda download di link yang telah saya sediakan.
LINK DOWNLOAD SUDAH UPDATE, SILAHKAN DOWNLOAD KEMBALI...
MOHON MAAF ATAS KETIDAK NYAMANANNYA..
Cara Tampilkan Gambar Sebelum Upload Dengan Javascript
Bagi yang ingin menampilkan gambar atau foto pada saat melakukan upload file, postingan ini memberikan soslusinya bagaimana cara agar foto atau gambar yang kita upload harus di tampilkan terlebih dahulu guna melakukan verifikasi terhadapat keabsahan file yang akan di upload.
Dengan begitu setidaknya mengurangi tingkat kesalahan dalam melakukan upload file, terutama file gamabar atau foto. Dalam penerapananya tidak memiliki banyak kesulitan, karna hanya sedikit menggunakan script jquery yang berfungsi memanggil URL atau alamat file yang kita pilih lali menampilkannya ke display yang kita tuju tanpa harus melakukan refresh halaman atau reload halaman.
Logika tadi sudah dijelaskan, bagaimana script yang dijalankan adalah javascript yang membaca URL atau alamat dari file input, lalu mengirimkan alamat tersebut ke src atribut image agar dapat membaca nama file secara utuh.
Berikut script dari logika diatas :
Dibawah ini script HTML, dimana display yang akan kita lihat.
Lalu tambahkan Javascript dibawah ini agar program berfungsi selayaknya.
Nah, bagaimana dengan hasilnya ? apakah sesuai dengan harapan ? setidaknya program diatas dapat membantu dalam form admin yang saudara-saudara rancang. sudah tidak asing lagi sekarang form admin meminta kita untuk melakukan upload gambar atau foto.
Bagi yang masih kesulitan dalam penerapan script diatas silahkan hubungi admin pada form contact yang tersedia di bawah halaman ini. Admin juga menyertakan video demo program bagi yang penasaran dengan hasil akhirnya. Salam PHP, trim's...
Membuat Border Warna-Warni Pada Side Menu Navigasi Dengan Random PHP Dan Css
Hai hai php suka suka bermain css kali ini, bagi yang suka mengulik css untuk memper-cantik memper-keren memper-apalah itu namanya yang penting menarik. Postingan ini mengulik tentang warna yang ada di samping menu yang terlihat menarik saat bermain dengan menu saat anda melakukan klik.
Bagaimana caranya membuat warna-warni yang berada di samping menu yang secara otomatis akan berganti secara sendirinya saat anda lakukan klik pada menu-menu tersebut. Simple sekali hanya bermain dengan css dan menggabungkan dengan random warna php yang diatur secara random.
Tidak ada logika yang perlu dijelaskan pada postingan ini, karna kita hanya berain dengan css yang ditambahkan sedikit php random, berikut script untuk membuat anda lebih paham bagaimana menaklukkan tampilan yang membuat anda penasaran.
Bagaimana hasilnya, apakah sesuai dengan keinginan anda ? anda dapat mengubah warna warna yang ada pada $bg ataupun menambahkannya.Semakin banyak warna akan semakin meriah tampilah menu anda.
Jika anda masih belum sukses melakukannya, silahkan contact admin untuk melakukannya dengan benar dan mendapatkan solusi yang jitu. Postingan ini juga dilengkapi dengan video demo yang menjadi hasil dari script diatas.
Merubah Format Tanggal Menjadi Bahasa Indonesia Dari Database
Pertanyaan tentang bagaimana merubah format tanggal dari database maupun merubah format tanggal menjadi berbahasa indonesia, pada postingan kali ini admin mencoba mnegulik bagaimana cara mengatasinya.
Format tanggal/date dari database seperti yang kita ketahui seperti ini "1999-01-31" di mulai dengan tahun, bulan dan tanggal. Tentunya tidak menarik untuk ditampilkan pada website yang kita miliki. Mencoba merubah menjadi format tanggal, bulan dan tahun mungkin sudah banyak trik di google mengajarkan tutorial ini. dengan menggunakan "strtotime" anda bisa lakukan itu.
Pada postingan ini saya mencoba merubahnya menjadi versi bahasa indonesia dengan menambahkan nama hari di awal tanggal sehingga menjadi hari, tanggal, nama bulan dan tahun seperti ini "Minggu, 12 Februari 2017".
Logikanya adalah :
Membuat variable untuk tanggal yang hanya akan menampilkan angka tanggal nantinya.
Lalu membuat variable tahun yang tentunya untuk menampilkan tahun.
Lalu membuat variable nama bulan yang telah di konversikan ke dalam bahasa indonesia menggunakan "switch case".
Setelah itu membuat variable nama hari yang juga telah dikonversikan kedalam bahasa indonesia menggunakan "switch case".
Terakhir kita dapat memanggil setiap variable dengan menyusun urutannya sesuai dengan keinginan.
Mari menerapkannya kedalam script, berikut script untuk pembuatan tanggal hari ini.
Dan dibawah ini script jika anda ingin manmpilkan tanggal dari database.
Nah, sukses dong hasilnya. Hanya ingin berbagi untuk teman-teman yang hobi php, silahkan bertanya di kolom contact jika masih mengalami kendala dalam penerapan kode scriptnya. Mohon maaf tidak ada video demo untuk postingan kali ini karna hanya trik simple yang mungkin bagi sebagian pemula sangat mudah untuk dimengerti.
Membuat Dynamic Combo Box Dengan Jquery, Select dan Pilih Multiple
Pertanyaan tentang bagaimana ya caranya ketika kita pilih option A maka pada kotak pilihan yang kedua akan keluar option 1,2,3. Lalu saat kita pilih option B maka pada kotak pilihan kedua akan keluar option 4,5,6.
Jawabannya berbagai macam cara dapat dilakukan mulai dengan menggunkan database hingga array pada jquery. Pada postingan kali kita menggunakan jquery untuk mempercepat proses antar select box dan dapat juga disimpan ke database.
Logika untuk programnya sebagai berikut :
Membuat dua buah combo box / select / pilihan. Pada postingan ini diterapkan dalam kasus fakultas dan program studi. Tidak lupa memasangkan id pada setiap combo box.
Lalu menambahkan button simpan dan juga lengkap dengan id nya.
Saat combo box terpilih maka pada javascript akan memanggil option untuk combo box yang kedua sesuai dengan value dari combox pertama dengan beberapa penambahan logika if else.
Setelah combo box kedua juga sudah terselect lalu lanjut dengan klik button simpan atau submit untuk menyimpan data atau menampilkannya.
Jika ingin menyimpan datanya dapat menggunakan ajax, namun di postingan ini hanya menampilkan data dan untuk trik menyimpan dengan ajax, silahkan hubungi admin pada contact, agar di buatkan postingan simpan data dengan ajaxnya.
Setelah memahami logika diatas, selanjutnya menerapkan pada script.
Dimulai dengan dua buah combo box atau select dan juga button submit. Berikut scriptnya :
Lalu javascript untuk pemilihan data pertama yang akan efek ke pemilihan data kedua lengkap dengan logika if else. Berikut scriptnya :
Penambahan javascript untuk button simpan atau submit. Pada hal ini tanpa ajax, jadi hanya menampilkan html nya. Berikut scriptnya :
Semoga bermanfaat bagi rekan rekan programmer website, jika ada kendala dalam penerapam script silahkan hubungi admin pada halaman contact di bawah halaman ini.
Postingan ini juga dilengkapi dengan video sebagai demo program yang telah dibangun. Berikut video nya :
Menampilkan data pada tabel bootstrap memang sudah membuat tampilan menjadi rapi dan menarik untuk dilihat, sehingga tidak membosankan untuk melihat data yang ada pada tabel.
Namun, bagaimana dengan form tambah data dan edit data yang biasanya selalu sama jika menggunakan bootstrap, terlihat membosankan memang dengan tampilan form yang begitu-begitu saja.
Tertarik untuk mengubah gaya tampilan form input dan edit data, saya mencoba membuat form input edit berada didalam tabel yang bisa dibilang dengan Live Edit Table.
Ya, kenapa live edit table. Karna dalam melakukan input dan edit data kita tidak membuka banyak halaman, karna semuanya berada didalam tabel yang dimana digabung dengan data yang ada.
Terkesan bercampur aduk dengan data, tetapi dengan teknik ajax jquery, semuanya dapat disembunyikan sehingga bisa menampilkan tampilan yang tetap menarik untuk dilihat ditambah dengan efek-efek animation yang diberikan oleh jquery.
Tertarik untuk mencobanya, berikut logika Live Edit Table, versi php suka suka :
Mengambil data dari database dan ditampilkan ke tabel bootstrap seperti membuat tabel biasa, jika yang belum paham membuat tabel silahkan pahami dulu cara membuat tabel biasa.
Selanjutnya menambahkan kedalam satu kolom sebuah form input yang telah di hidden menggunakan css, sehingga tidak terlihat ketika data reload pertama kali.
Lalu memberikan class dan id pada setiap elemen yang akan kita eksekusi nantinya, seperti span, a href dan input. Tujuannya adalah agar dapat melakukan edit hanya pada satu data berdasarkan id data.
Lalu menambahkan tombol tambah data, edit data dan delete data sebagai opsi yang akan kita pilih sesuai fungsinya. Tidak lupa menambahkan class dan id nya agar dapat berfungsi pada satu data.
Setelah semua tampilan selesai, selanjutnya menjalankan setiap fungsinya dengan ajax. Didalam script nanti akan terdapat tiga javascript yang penting yaitu bagian tambah, edit dan delete.
Ajax tambah data berfungsi menambahkan data berisikan null kedalam database yang artinya hanya menambahkan data id sedangkan data lainnya kosong. Data yang tampil di database juga data kosong. Untuk mengisi datanya adalah dengan menggunakan tombol edit.
Ajax edit data berfungsi untuk melakukan editing data yang ditabel dengan proses menyembunyikan text data ditable dan menampilkan form yang telah berisikan value sesuai dengan text yang disembunyikan. Proses ini juga merubah tombol edit menjadi update yang berfungsi update data jika ada perubahan data. Untuk membatalkan proses edit saya mencoba menambahkan script onMouseUp yang jika diklik dimana saja maka table akan kembali normal.
Ajax delete berfungsi untuk menghapus data yang prosesnya sangat simple, dimana ketika tombol delete di klik maka akan keluar box konfirmasi hapus dan jika hapus terpilih maka data akan terhapus.
Jika anda sudah memahami logika di atas, waktunya menterjamahkannya ke dalam script. Bagian ini dinamakan pengkodingan yang sebenarnya anda pasti sudah mengerti.
Step awal tentunya mempersiapkan database sebagai tempat penyimpanan data.
File koneksi sebagai jembatan antara php dan mysql.
Tabel yang akan menampilkan data dari database, lengkap dengan opsi CRUD dan juga form input. Dilengkapi juga dengan script notifikasi atau alert dan css.
Tiga script ajax yang masing-masing berfungsi sebagai add, edit dan delete data.
Terakhir script table yang berfungsi untuk mereload data saat fungsi opsi sukses di jalankan.
Script diatas di bangun sesimple mungkin agar dapat mudah dimengerti dan dipahami. Bagi yang mengalami kendala dengan script di atas silahkan tanya langsung kepada admin melalui kontak dibawah halaman ini. Admin akan berusaha memberikan solusi yang terbaik untuk belajar semakin maju.
Postingan ini juga dilengkapi dengan video demo hasil akhir program yang dibangun.
Melanjutkan postingan yang lalu tentang membuat Tabel dengan JSON data, kali ini akan lebih lengkap dengan sistem CRUD yang telah di perbaiki dan lebih meningkatkan kinerja tabel JSON yang akan dibuat.
Postingan sebelumnya telah menerangkan bagaimana menampilkan data dari database dengan mengkonversi terlebih dahulu datanya menjadi format JSON lalu ditampilkan pada tabel bootstrap.
Dengan menampilkan data dengan JSON table, mengurangi loading data yang sangat lama jika kita menampilkan banyak data ke dalam tabel. JSON table yang ada pada postingan ini juga dilengkapi dengan CRUD ajax, CRUD popup dan Notifikasi bootstrap nan elegan menggunakan Jquery Timer.
Fungsi dari kombinasi semuanya adalah membuat kinerja dari web admin yang anda kelola menjadi sangat ringan karna mengurangi reload atau refresh page berlebihan disetiap aksinya. JSON dapat menampilkan data lebih ringan, ajax dapat melakukan pengiriman data tanpa reload halaman, popup mengurangi halaman edit dan tambah data yang berlebihan dan Jquery Timer memberikan tampilan notifikasi yang sangat menarik untuk di pandang mata.
Logika JSON table ini adalah sebagai berikut :
Kita melakukan input data ke database melalui form input data yang dibuat menjadi popup input data.
Menyimpan data dengan ajax untuk mengurangi reload halaman dan data tersimpan ke database.
Menampilkan data yang tersimpan di database ke table bootstrap dengan JSON data. JSON data didapat saat melakukan query dari database lalu di encode menjadi JSON dan tampilkan ke tabel menggunakan Jquery.bootsrap.js sebagai library agar data dapat tampil di bootsrap table.
Menambah menu edit dan delete di file php konversi data JSON, karna library Jquery yang digunakan tidak menyediakan menu edit dan delete.
Setelah data tampil, memberikan fungsi pada menu edit menggunakan popup edit, memahami teknik mengirimkan id data ke popup css dan melakukan update data menggunakan ajax.
Terakhir memberikan fungsi kepada menu delete menggunakan ajax popup dikombinasikan dengan css popup, memahami event click, show dan hide pada javascript.
Sebagai pelengkap membuat popup notifikasi bootstrap dengan ajax timer yang berfungsi memberikan informasi jika ada aksi yang error ataupun berhasil. Dengan ajax timer notifikasi akan hilang dengan sendiri setelah beberapa saat tampil di layar.
Setelah memahami Logika JSON table, saatnya kita menerapkan kedalam script. Untuk penyimpanan data kita buat database yang saya misalkan dengan nama user, silahkan gunakan script dibawah untuk import databasenya.
Lalu file koneksi.php untuk menghubungkan database dengan web yang akan kita buat, dibawah ini script koneksi.
Lanjut untuk membuat tampilan utamanya yaitu tampilan dimana nanti akan ditampilkan tabel JSON beserta datanya, dibawah ini scrip tampilannya. Jangan lupa menggunakan jquery bootsrap-table.js dan bootstrap-table.css yang dapat anda search di google.
Kemudian lakukan pemanggilan data dari database ke file konversi JSON, pada file ini data yang akan ditampilkan dirubah dulu menjadi format JSON. Dibawah ini script untuk konversinya dan pada file ini juga ditambahkan menu edit dan delete.
Untuk penambahan data dan edit data menggunakan popup css yang membuat web admin menjadi lebih menarik, berikut script popupnya dan juga script css nya.
Agar setiap aksi tidak mereload halaman kita menggunakan ajax di setiap aksinya, dibawah ini scrip ajax untuk penambahan data, edit data dan juga delete data.
Lalu setelah melewati ajax tidak lupa kita membuat script query untuk berhubungan dengan database melalui mysql guna menyimpan data, update data dan juga delete data. Dibawah ini adalah script prosesnya.
Dan terakhir sebagai pelengkap kita menambahkan notifikasi ala bootstrap yang telah di modifikasi menjadi popup css dan ajax timer. Dibawah ini script untuk membuat notifikasi atau alertnya.
Setelah semua script selesai, program anda sudah siap untuk di try running. Pastikan semua plugin terpasang dengan benar agar anda dapat melihat event-event disetiap klik nya. Dibawah ini ada video demo yang bisa menjadi panduan anda untuk mendapatkan hasil maksimal.
Jika anda mengalami kesulitan silahkan kontak admin di menu kontak di bawah halaman ini untuk dapat berkomunikasi langsung dengan admin dan mendapatkan solusi. Jangan segan jangan sungkan, kita belajar kita bisa. Salam PHP INDONESIA.
Banyak plugin untuk membuat tampilan tabel data menjadi lebih menarik untuk dilihat dari tabel bootstrap hingga jtable menyediakan fitur yang memiliki keunggulannya masing-masing. fitur yang sering kita jumpai adalah table bootstrap, ya tabel ini sangat menarik dan sangat mudah untuk kembali di edit dan di kombinasikan dengan jquery.
Dalam postingan kali ini saya mencoba menggabungkannya dengan json data, dimana kita ketahui data yang telah terbentuk json akan sangat cepat untuk di akses. Cukup menarik bukan jika anda telah berhasil menampilkan ribuan data pada website admin yang anda buat, anda pasti akan penasaran dengan json data yang notabene sangat mudah untuk ditampilkan pada tabel bootstrap.
Logikanya adalah :
Lakukan cara seperti biasa untuk menampilkan data dari database hingga berhasil jalan / running di tabel bootstrap.
Setelah selesai menampilkan data, lakukan konversi data dari mysql menjadi json format.
Langkah berikutnya adalah merubah script dari tabel bootstrap, agar dapat menampilkan data berbentuk json.
berikut script yang perlu anda perhatikan :
Script JSON :
Script Tabel :
Dari script diatas adalah bagian utama dalam pembahasan ini dan sebagai librarynya jangan lupa menggunakan Bootstrap dan Jquery. Hasil atau demo dari program dapat anda lihat pada video dibawah ini. Script lengkapnya bisa anda hubungi kontak di bagian bawah halaman ini atau silahkan download pada link berikut ini :
Membuat alert pada sebuah website sangat berguna untuk memberikan informasi atas aksi yang telah dilakukan pengguna website. Dengan sebuah alert yang terlihat menarik juga menambah daya tarik pengguna website untuk mencerna informasi yang di berikan oleh alert website.
alert yang sudah standart dari browser sudah biasa kita lihat dengan tampilan kotak dan background grey. Namun bootstrap memberikan tampilan alert lebih menarik untuk di pandang mata. Alert dari bootstrap dapat kita kombinasikan dengan ajax dan timer, yang membuat alert menjadi lebih menarik lagi.
penggunaan ajax dan timer disini adalah berfungsi untuk membuat alert muncul tanpa mereload page dan alert akan hilang dengan sendirinya tanpa harus klick tombol "X" atau close. Menarik bukan ? simak Logika programnya dibawah ini :
Alert yang telah di bootstrap dan diletakkan pada posisi yang kita inginkan akan kita "hide" ketika page load.
Lalu alert dengan javascript kita akan kembali membuat alert "show" ketika ajax sukses ataupun ajax error.
Setelah semua proses berjalan timer dengan javascript akan kembali melakukan "hide" setelah beberapa saat sesuai dengan waktu yang kita inginkan, untuk standartnya saya membuat 3 detik.
Dengan logika program di atas, kita dapat membuat script seperti dibawah ini :
script diatas dapat anda simpan dengan index.php untuk melakukan demo namun pada file yang saya share ke anda terdapat pada file reg.php. Namun Script diatas belum menggunakan Javascript dan Ajax, berikut script untuk javascript dan ajax nya :
Semoga bermanfaat dan membantu anda dalam membangun website yang lebih baik lagi. Bagi yang mengalami masalah dalam penerapan diatas dapat menghubungi saya pada halaman Contact di pojok kanan bawah halaman ini, terimakasih. Silahkan anda download file lengkapnya pada link berikut ini ==>DOWNLOAD SOURCE CODE<==
