BREAKING NEWS

Lokomedia

Tips dan Trik

Template Balitbang

Saturday, January 18, 2014

Cara membuat script login dengan Jquery ajax dan php

Cara membuat script login dengan Jquery ajax dan php 

Sambil mengerjakan project PHP,  berikut akan saya coba bahas mengenai script login dengan menggunakan JQUERY AJAX. Penggunaan AJAX tanpa bantuan JQUERY akan membuat kita harus mengetik banyak kode Javascript sehingga tentunya akan menyulitkan juga terutama untuk para pemula, dengan pemanfaat JQUERY, kode Javascript yang harus kita ketikkan menjadi lebih ringkas, dan itulah tentunya keuntungan kita menggunakan Javascript Framework JQUERY
Langkah - langkah yang dilakukan untuk membuat script login dengan JQUERY AJAX adalah sebagai berikut :
1. Menyiapkan JQUERY
Untuk menggunakan fungsi AJAX pada JQUERY, terlebih dahulu kita harus menyiapkan JQUERY dengan cara mendownloadnya kemudian kita simpan dalam komputer kita bersebelahan dengan script - script tutorial kita supaya tutorial ini dapat dijalankan pada komputer lokal meskipun tidak terkoneksi ke internet.
2. Membuat form login » index.php
Script ini akan digunakan sebagai sarana untuk memasukkan username dan password ketika hendak login, berikut contoh script index.php sebagai halaman login
<html>
    <head>
        <title>Login dengan Jquery AJAX</title>
        <style type="text/css">
            #login{
                font:bold 16px Tahoma,Verdana;
                display:block;
                border:#7596c0 1px solid;
                width:400px;
                height:280px;
                margin-left:auto;
                margin-right:auto;
                border-radius:5px;
                background-color:#98c1f3;
                box-shadow: 5px 5px 5px rgb(150, 149, 149);
                visibility:visible;
                color:#e9ecf0;
            }
            h3{
                font:bold 20px Tahoma,Verdana;
                margin:0 0 0 0;
                padding:0 0 0 0;
                color:#2572d2;
                text-align:center;
                line-height:50px;
                border-bottom:#ffffff 1px solid;
            }
            #inner{
                margin:0 20px 0 20px;
            }
            input.txt{
                font:normal 14px Tahoma,Verdana;
                padding:10px;
                margin:5px 0 5px 0;
                width:100td_persen;
                background-color:#dee9f6;
            }
            input.btn{
                font:bold 14px Tahoma,Verdana;
                padding:10px;
                margin:5px 0 10px 0;
                width:100td_persen;
                text-align:center;
            }
        </style>
        <script src="jquery-1.6.1.min.js" type="text/javascript">//memanggil jquery</script>
        <script src="login.js" type="text/javascript">//memanggil script ajax</script>
    </head>
    <body>
        <div id="login">
            <h3>
LOGIN ADMINISTRATOR</h3>
<div id="inner">
                  
                <input class="txt" id="txt_username" placeholder="Username anda" type="text" />
                  
                <input class="txt" id="txt_password" placeholder="Password anda" type="password" />
                <input class="btn" id="btnLogin" name="btn" onclick="check_login();" type="button" value="Login" />
            </div>
</div>
</body>
</html>

3. Membuat script AJAX » login.js
Script ini merupakan script Jvascript AJAX yang akan menggunakan fungsi AJAX pada JQUERY dengan susunan script sebagai berikut :

function check_login()
{
    //Mengambil value dari input username & Password
    var username = $('#txt_username').val();
    var password = $('#txt_password').val();
    //Ubah alamat url berikut, sesuaikan dengan alamat script pada komputer anda
    var url_login    = 'http://localhost/tutorial/login.php';
    var url_admin    = 'http://localhost/tutorial/admin.php';
     
    //Ubah tulisan pada button saat click login
    $('#btnLogin').attr('value','Silahkan tunggu ...');
     
    //Gunakan jquery AJAX
    $.ajax({
        url     : url_login,
        //mengirimkan username dan password ke script login.php
        data    : 'var_usn='+username+'&var_pwd='+password,
        //Method pengiriman
        type    : 'POST',
        //Data yang akan diambil dari script pemroses
        dataType: 'html',
        //Respon jika data berhasil dikirim
        success : function(pesan){
            if(pesan=='ok'){
                //Arahkan ke halaman admin jika script pemroses mencetak kata ok
                window.location = url_admin;
            }
            else{
                //Cetak peringatan untuk username & password salah
                alert(pesan);
                $('#btnLogin').attr('value','Coba lagi ...');
            }
        },
    });
}

Dengan penjelasan - penjelasasn seperti pada contoh diatas, kami berharap pembaca sekalian dapat memahami maksud dari masing - masing line script yang kita gunakan
4. Membuat script pemrosesan » login.php
Script login.php merupakan script php sederhana yang kami gunakan untuk melakukan pengecekan kebenaran username dan password pada database, jika username dan password benar, maka script dibawah akan mencetak kata "ok", sedangkan jika username dan password salah maka akan dicetak kata "Username atau Password Salah !"
session_start();
//koneksi ke database
$conn = mysql_connect('localhost','root','kutukupret');
$db   = mysql_select_db('tutorial',$conn);
if(isset($_POST['var_usn']) AND isset($_POST['var_pwd'])){
    $username = addslashes($_POST['var_usn']);
    $password = addslashes($_POST['var_pwd']);
    $check    = mysql_query('select * from admin where Usn="'.$username.'" AND Pwd="'.$password.'" ');
    if(mysql_num_rows($check)==0){
        echo 'Username atau Password Salah !';
    }
    else{
        $_SESSION['login']['usn'] = $username;
        $_SESSION['login']['pwd'] = $password;
        echo 'ok';
    }
}
Pesan login diatas selanjutnya yang akan diambil oleh script login.js, dimana kalo script diatas mencetak kata "ok", maka user akan langsung diarahkan ke halaman berikutnya, sebaliknya jika script diatas mencetak pesan kesalahan, maka script login.js akan memberikan javascript alert sebagai tanda peringatan kesalahan username dan password
5. Membuat script halaman admin » admin.php
session_start();
if(isset($_GET['logout']) AND $_GET['logout']=='1'){
    unset($_SESSION['login']);
    session_destroy();
}
if(!isset($_SESSION['login'])){
    header('location: index.php');
}
else{
    echo '

SELAMAT DATANG : '.$_SESSION['login']['usn'].'

'; echo 'Halaman ini kita asumsikan sebagai halaman Administrator, dimana halaman ini hanya bisa diakses ketika Admin sudah login'; echo '
LOGOUT'; }
Script diatas kita asumsikan sebagai halaman administrator yang mengharuskan user untuk login terebih dahulu ketika hendak mengakses halaman ini
Untuk mencoba script - script diatas tanpa adanya perubahan direktory, sebaiknya kita tempatkan script - script diatas pada folder dengn nama tutorial pada direktory web server komputer anda.

Referensi : media-kreatif.com

Cara paling mudah untuk membuat fasilitas komentar di website anda


Sekarang anda tidak perlu repot atau di pusingkan dengan script untuk membuat komentar di website yang anda buat. Selain fasilitas dari Facebook ternyata ada juga yang lebih gampang dan sederhana untuk bisa membuat kotak komentar (comment box) dengan mudah tanpa perlu membuat kode php atau database.

Caranya cukup sederhana:
=======================================================
Buka situs www.htmlcommentbox.com

Lalu mendaftarlah menggunakan akun google (gmail) anda.

Kemudaian copy kode html nya

Paste ke situs anda.

Maka setiap komentar yang masuk anda akan menerima email pemberitahuan.
======================================================
Gampang kan?
Hanya dengan modal email anda sudah bisa membuatnya...

Selamat mencoba dan semoga bermanfaat...

Thursday, January 16, 2014

Download Themes Wndows 7 Terbaik 2013

Download tema wndows 7 terbaik 2013 - halo sobat setia IT Sasak, Untuk Awal Tahun 2014 ini saya akan share Themes windows 7 Terbaik 2013. Silahkan di cicipi untuk di gunakan atau untuk di koleksi. hehe

HUD Blue Skin Pack Style
 
Very Clean Visual Style: PongMaster Suite for Windows 7
Blue Styles: Windows 7 X4 New Edition

Download
 
Youtube Style

Download
 
Dark windows 7

Download
 
Amazing “Iohanna” Elegance

Download
 
Semoga bermanfaat buat agan-agan... ^_^

Longhorn M7 R2 Public Beta

http://th07.deviantart.net/fs71/PRE/i/2010/132/6/c/Longhorn_M7_R2_Public_Beta_by_longhornfusion.png

-----------------------------------------------------------------------------------
UPDATE: Fixed PreviewThumbnailModule's background for x86 users. I think...
-----------------------------------------------------------------------------------
No DLL files included however the resources are there if you want to add it yourself.
There are no ExplorerFrame image resources. (No navis)
Animated Explorer is included.

DOWNLOAD



Windows 7 Skull Visual Style

Windows 7 Skull Visual Style by TheDarkenedPoet

Buat kalian yang menyukai tampilan menarik pada Windows yang anda gunakan khususnya Windows 7 Jangan sampai ketinggalan dengan Visual Style yang satu ini...
Dijamin anda pasti menyukainya...

Download Themes Windows 7 Skull Visual Style


Wednesday, January 15, 2014

Aktivasi Microsoft Office 2013 Permanent Work 100%

IT Sasak - AKTIVASI MICROSOFT OFFICE 2013 PERMANENT WORK 100%, Buat temen2 yang punya masalah dengan Microsoft Office 2013nya sekarang tidak perlu bersedih hati lagi....  :)

Oke,,, langsung aja...



UNTUK PENGGUNA WINDOWS 8

Permanent di Windows 8 ==> OAT v31 7.7 MB
password : www.kuyhaa-android19.com

Silahkan install Office 2013 nya, lalu aktifkan dengan => KMS NANO ( 180 HARI )
selanjutnya RESTART WINDOWS
Selanjutnya " Ekstrack OATV31 nya" buka folder " 8OAT15"
jalankan " INSTALL CMD" RUN ADMINISTRATOR, tunggu sampai proses selesai, 
ketika muncul seperti gambar di bawah ini , Silahkan di EXIT aja
Nah.. selanjutnya buka folder " 15SSFP " , RUN AS ADMINISTRATOR " INSTALL.CMD"
Akan terlihat nanti DONE, Sucsesfully.
SIlahkan TES STATUS AKTIVASI dengan cara di ATAS "CEK STATUS"
Enjoyy..

OK, itu di windows 8, sekarang kita berlanjut di windows 7


UNTUK PENGGUNA WINDOWS 7

Permanent di Windows 7 ==> WOAT_V31 WIN 7 4.7 MB
Password : www.kuyhaa-android19.com 
Install Office 2013 nya, ( Aktivasi di bawah ini jalankan sebagai RUN AS ADMINISTRATOR)
Silahkan aktivasi Office nya dengan=> KMS MINI ACTIVATOR
atau kalo gagal dengan KMS nano, bisa gunakan MICROSOFT TOOLKIT => DI SINI
MEMBUTUHKAN NET FRAMEWORK 4 => DI SINI
langkah aktivasi nya. klik menu ACTIVATION, AUTO KMS, KLIK active, lalu kilik INSTALL
Silahkan tunggu sampai Selesai sucsesfully, RESTART WINDOWS
Selanjutnya.. kita menuju ACTIVASI PERMANENT nya
Ekstrack " WOAT_V31 WIN 7", buka folder " 7OAT15", RUN AS ADMINISTRATOR " INSTALL.CMD"
Tunggu sampai proses selesai, keluar gambar di bawah ini, silahkan EXIT
Selanjutnya buka folder "15SSFP", RUN AS ADMINISTRATOR " INSTALL.CMD"
Tunggu sampai DONE sucsesfully,
Silahkan CEk status aktivasi
Enjoyy.
Mudah kan...?! Hayo sekarang pada Move On... ^_^ 
 
Sumber :kuyhaa-android19.com

Saturday, January 11, 2014

Sevida - Responsive Magazine Blogger Template


Responsive Magazine Blogger Template Features
  • Current version: 1.55
  • 100% Responsive
  • Auto Featured Post from JSON (Slideshow) *
  • Manual Featured Post Work with Image Widget(Slideshow) New
  • Support Advance Editor: upload background images, change background color, key colors, fonts
  • Lightweight Auto read-more support third party image and youtube (option make it slideshow) New
  • Ajax load more post
  • Ajax Page Navigation New *
  • Cool blogger threaded comment (Support Google+ Comment) with Emoticon
  • JSON Search Result *
  • Lightweight Summary (option make it slideshow)
  • Two View Mode (List and Grid) width Cookies
  • Recent Comment Widget *
  • News Ticker Widget *
  • Related Post Widget *
  • Recent Post by Labels (10+ Post Type (Slider, Vertical, Horizontal, Gallery 1, Gallery 2, Simple, Slideshow) support Random)—Support ShortCode New *
  • Allow visitors increase / decrease text size and auto remember for future.
  • Optimize SEO
  • Archive Page *
  • Support Print CSS and allow visitors share articles email
  • 3 Comment System (Blogger, Facebook, Disqus)
  • Dropdown Menu
  • Ads ready
  • Top Social Icon
  • Support shortcodes
  • Custom Error 404 Page
  • Support RTL Language New
  • Social Share Plugin (Addthis) New
  • Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)
  • Professional admin layout, help you easy work with blog layout.
* : Work with Blogger JSON Feed and Public Blog

 
Copyright © 2011 IT Sasak
Powered by Blogger