Wednesday, February 22, 2017

Simpan Data Dengan Control Form Element

Simpan Data Dengan Control Form Element

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.
See the Pen YZKGaZ by sry reahayu (@sryreahayu) on CodePen.
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.
See the Pen evOYoQ by sry reahayu (@sryreahayu) on CodePen.
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.
See the Pen evOdyw by sry reahayu (@sryreahayu) on CodePen.
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.

Read more

Monday, February 20, 2017

Dua Metode Edit Data Lebih Dinamis, Modal Bootsrap Dan Live Editable

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


Read more

Tuesday, February 14, 2017

Cara Tampilkan Gambar Sebelum Upload Dengan Javascript

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

Read more

Saturday, February 11, 2017

Membuat Border Warna-Warni Pada Side Menu Navigasi Dengan Random PHP Dan Css

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.

Read more

Merubah Format Tanggal Menjadi Bahasa Indonesia Dari Database

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

Thursday, February 9, 2017

Membuat Dynamic Combo Box Dengan Jquery, Select dan Pilih Multiple

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 :

 
Read more

Monday, February 6, 2017

Membuat Live Edit Table Dengan Ajax dan Bootstrap

Live Edit Table Versi PHP Suka Suka

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

Thursday, February 2, 2017

Membuat Tabel JSON Lengkap Dengan CRUD Ajax dan Popup

tabel JSON data with popup CRUD

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.



 
Read more

Wednesday, February 1, 2017

Membuat Tabel Dengan JSON data

Tables with JSON data

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 :

==>DOWNLOAD SCRIPT<==

 
Read more

Monday, January 30, 2017

Membuat Alert Bootsrap Dengan Ajax Timer

Alert With Ajax

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

Lihat juga Demo pada video dibawah ini :

Read more

Sunday, January 29, 2017

Menggunakan Random String Untuk Generate Password atau Get Kode

Form Login dan Form Daftar dengan generate password

Ketika seorang website programmer akan membuat kode register ataupun kode generate untuk sebuah website yang dibangunnya, maka akan timbul pertanyaan bagaimana cara membuat kode yang isinya adalah huruf dan angka dan secara otomatis teracak setiap reload page ?

Jawabannya adalah menggunakan teknik random_string. Iya dengan random_string kita dapat membuat kode generate atau kode register yang secara otomatis akan teracak dengan ketentuan yang telah kita tetapkan didalam script pengkodeannya. random_string dapat mengandung huruf dan angka yang masing-masing dapat kita tentukan jumlahnya.

teknik ini biasa digunakan untuk kode register siswa baru atau password generate yang akan diberikan bagi pendaftar baru untuk akun login, yang nantinya bisa digunakan untuk login.

teknik random string yang dibahas kali ini adalah bagaimana caranya membuat generate password untuk akun login bagi pendaftar baru halaman register. Logikanya adalah seorang pendaftar akan melakukan login ke sebuah website admin, namun belum mempunyai akun untuk itu Ia harus mendaftarkan email address-nya dan secara otomatis password tergenerate saat Ia melakukan submit pendaftaran.

Password yang tergenerate akan dicatat oleh pendaftar dan digunakan untuk login pada halaman login dengan memasukkan email address dan password yang Ia dapatkan saat melakukan pendaftaran.

Setelah login berhasil, Ia dapat merubah password sesuai keinginan sipemilik akun. Hal ini untuk  menjaga kerahasiaan sebuah akun, sedangkan generate password untuk memberikan password unik yang akan sangat sulit di kenali oleh orang lain.

Persiapan pengkodean script :
  • Database dan tabel untuk menyimpan data email dan password user
  • Script Koneksi untuk menghubungkan database dengan form.
  • Script form login, register dan halaman berhasil login.
  • Script cek login, daftar dan random_string untuk generate password.

 Berikut script random_string :


Script yang lainnya tidak ditampilkan, jika masih kurang paham silahkan hubungi dihalaman kontak dibawah pojok kanan, akan kami perbaiki postingan atau kami kirimkan ke email anda solusi dan script lengkapnya. terimakasih semoga bermanfaat dalam membangun website.
Read more

Saturday, January 28, 2017

Membuat Prevent Multiple Logins atau Login Satu Akun Dalam Satu Sesi

Banyak pertanyaan tentang bagaimana jika akun login kita di gunakan oleh orang lain yang saat bersamaan kita akan login dengan akun yang sama. Apakah bisa login dua sesi dengan satu akun, jawabannya bisa saja jika tidak ada id yang di blok untuk login beberapa akun.


Lalu bagaimana caranya agar tidak bisa login dua sesi dengan satu akun, berikut logikanya :

  • Dalam akun login kita harus menambahkan satu field didalam table login/admin/user yang kita buat untuk menyimpan akun login. Field tersebut kita misalkan dengan nama batas_login.
  • Batas_login bisa kita isi hanya dengan “0” atau “1” yang logikanya jika “0” maka user dapat login karna belum pernah melakukan login atau artinya akun tersebut sedang tidak login. Sedangkan “1” artinya user yang akan login tidak bisa melakukan login karna akun tersebut sedang login dan belum melakukan logout.
  • Field batas_login ini akan otomatis berubah jika akun kita login dari status “0” menjadi “1” dan akan kembali berubah jika akun kita logout dari “1” menjadi “0” kembali.
Dengan berpanduan dari logika diatas kita harus mempersiapkan :

ü  Database
  ü  Koneksi.php
  ü  Index.php
  ü  Cek_Login.php
  ü  Home.php
  ü  Logout.php
  ü  Gagal.php
  ü  Sudah_login.php

Keteranganya dari bahan yang dipersiapkan diatas adalah sebagai berikut :

  • Database : Persiapkan database dan table untuk menyimpan akun login anda.
  • Koneksi.php : Persiapkan file koneksi.php untuk membuat koneksi database dengan file website anda.
  • Cek_Login.php: persiapkan file cek_login.php untuk melakukan verifikasi akun login yang anda ketik pada form login dengan akun login yang ada didalam database. Didalam file ini juga kita membuat query yang berfungsi untuk merubah field batas_login menjadi “1”. Yang artinya akan melakukan blok jika ada seseorang akan login dengan akun yang sama.
  • Home.php : persiapkan file home.php untuk menentukan bahwa login kita berhasil.
  • Logout.php : persiapkan file logout.php untuk mengakhiri sesi pada saat setelah login. Didalam file ini juga kita membuat query yang berfungsi merubah field batas_login menjadi “0” agar statusnya kembali normal dan dapat kembali login suatu saat nanti.
  • Gagal.php : persiapkan file gagal.php untuk memberikan notifikasi bahwa gagal login dikarenakan akun yang diketik pada form tidak sama dengan akun yang ada didalam database.
  • Sudah_login.php: persiapkan file sudah_login.php untuk memberikan notifikasi bahwa akun sedang login dan tidak bisa login dalam dua sesi sekaligus.
      Keterangan diatas juga akan dilengkapi dengan Script dibawah ini :
  • Database
  • koneksi.php
  • index.php
  • cek_login.php
  • home.php
  • logout.php
  • gagal.php
  • udahlogin.php

Script diatas semoga dapat membantu untuk menciptakan aplikasi web dengan sistem login yang berbeda.





Read more

Thursday, January 26, 2017

Disable Tombol Submit Dengan Timer Javascript


Membuat tombol submit menggunakan javascript memang sangat meng-asik-kan, gimana enggak ? Kita dapat membuat tombol submit disable ketika tombol tersebut di klik.

Bukan hanya itu saja teman, selain tombol submit disable kita juga dapat menambahkan timer pada tombol yang disable tadi. Yah bisa di logikakan bahwa timer ini digunakan untuk menghitung waktu berapa lama lagi tombol submit yang tadinya disable akan kembali enable.

Dalam tutorial kali ini saya akan coba membuat script untuk mendisbale tombol submit dan memberikan timer pada tombol hingga kembali enable.

Jika ditanya fungsinya, selain menambah wawasan kita juga dapat digunakan untuk mengantisipasi overload input data pada website kita teman. Yah setidaknya ada jeda saat kita melakukan submit data ke website jadi gak dibanjiri spam gitu dehhh..

Nah, begini penjelasan script nya :

  • Didalam script kali ini kita menggunakan library java script “jquery-1.9.1.min.js”. temen-temen boleh download atau search di google.
  • Lalu ada dua javascript yang dipisahkan untuk mempermudah teman-teman mengenal fungsinya. Javascript yang pertama untuk mendisable tombol submit, yaitu dengan fungsi hide(); kepada id tombol. Javascript yang kedua adalah timer yang akan tampil setelah tombol disable dan akan running secara otomatis sesuai timeout yang kita setting, disini saya gunakan 10 detik.
  • Lalu hal yang gak kalah pentingnya lagi pada bagian button diberikan id dan div timer diberikan style=display:none;
  • Berikut script lengkapnya :



Selamat mencoba teman, semoga bermanfaat ya.
Read more

Menggunakan TinyMCE pada PHP

Salah text editor yang memungkinkan anda dapat melakukan input data dengan menggunakan text area yang di modifikasi menjadi lebih inovatif dengan menubar dan pengaturan word lainnya.

TinyMCE dapat melakukan input data ke database dan menghasilkan output yang sama dengan apa yang sudah diketikkan pada text editor. dengan tinyMCE kita bisa merubah tata letak paragraf, kemiringan tulisan dan berbagai fitur lainnya.

untuk dapat menggunakan tinyMCE pada website, anda dapat memasangnya pada text area dengan mendownload file supportnya disini.

untuk menerapkan file support dan kodingnya pada php, coba simak langkah berikut ini :


  1. Bukalah file project kita di htdocs bagi yang menggunakan XAMPP.
  2. Copy Paste file support tinyMCE kedalam project. Misal C:\xampp\htdocs\project
  3. Lalu akan ada folder tinymce didalam project kita.
  4. langkah berikutnya adalah menerapkan koding tinyMCE kedalam koding <textarea>. perhatikan koding dibawah ini :
  5. Yang Paling penting untuk diketahui adalah bagian <head>, dimana disana ada script untuk memanggil file support yang telah kita download tadi.
  6. hasilnya akan seperti gambar dibawah ini :
Terimakasih telah mengunjungi phpsuka.blogspot.com, semoga tutorial menggunakan tinyMCE diatas bermanfaat buat website programmer.
Read more