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

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

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

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