Memasang Tombol Login PPC Inclick di Wordpress

Hello sob,

Sebelumnya sudah saya jelaskan di Membuat Website Pay Per Click Sendiri dengan low Budget , dari ulasan itu kita mengetahui bahwa, inclick menyediakan server ppcnya sedangkan kita menyediakan frontpage website untuk profile web ppc nya. Nah untuk menghubungkan keduanya, dibuatkanlah tombol login.

Kurang lebih tampilan form loginnya nanti akan seperti ini:


Anda bisa mendapatkan desain form tersebut DISINI. (Free akan tetapi anda harus menyertakan di dalam form tersebut copyrightny : "Copyright (c) 2012-2013 Thibaut Courouble").

Dari hasil download form login tersebut anda dapat memakai file:  style.css 

Mari kita mulai membuatnya:
1. Untuk mengatur customlogin server inclick, anda harus melihat ketentuan atau format pengaturan yg ditentukan oleh inclick , bisa dilihat disini disini.


2. Copas saja file html "Sample Custom Login HTML Code Fragment" ke dalam notepad. kurang lebih kodenya akan seperti ini:

<form method="POST" action="http://[URL.TO.INCLICK.INSTALLATION]/client.php">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="100%"><b><font size="4">Sample Custom Log-In</font></b></td>
  </tr>
  <tr>
 
    <td width="100%"><hr color="#C0C0C0" size="1"></td>
  </tr>
  <tr>
    <td width="100%"><font size="2">Registered Advertisers and Publisher log in here.<br>
    &nbsp;</font><table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="750">
      <tr>
        <td width="245" valign="top">
        <p align="right"><font size="2">Username:</font></td>
 
        <td width="502" valign="top"><input type="text" name="login_id" size="20" value=""></td>
      </tr>
      <tr>
        <td width="245" valign="top">
        <p align="right"><font size="2">Password:</font></td>
        <td width="502" valign="top"><input type="password" name="login_password" size="20"><font size="2"><br>
        <a href="http://[URL.TO.INCLICK.INSTALLATION]/index_client.php?lostpass=1&login_base_url=http://[LOCATION.OF.CUSTOM.LOGIN.PAGE]/customlogin.php">Forgot your password?</a></font></td>
      </tr>
 
      <tr>
        <td width="245">&nbsp;</td>
        <td width="502">
        <input type="hidden" name="action" value="login">
        <input type="hidden" name="login_base_url" value="http://[LOCATION.OF.CUSTOM.LOGIN.PAGE]/customlogin.php">
      <input type="submit" value="Log In" name="B1" style="float: left"></td>
      </tr>
    </table>
    
    </td>
  </tr>
</table>
</form>

3. copas file diatas ke dalam notepad dan beri nama member.php misalkan. Jadi jika nanti diakses dari wordpress mu bisa jadi seperti "http://ppcmu.com/member.php".

4. Pada bagian [LOCATION.OF.CUSTOM.LOGIN.PAGE] atau [URL.TO.INCLICK.INSTALLATION] ganti dengan data server inclick anda, bisa anda check ke dalam akun inclick anda. Data server ppc anda biasanya spt ini 1xxxx.pod1.us01.hst.inclickadserver.com Jika anda telah menemukannya di bagian tiket akun inclick anda , maka lengkapi file member.php diatas dengan data tersebut.


<form method="POST" action="http://[URL.TO.INCLICK.INSTALLATION]/client.php">


Menjadi


<form method="POST" action="http://1xxxx.pod1.us01.hst.inclickadserver.com /client.php">

(contoh tampilan dimana anda bisa mendapatkan informasi akun server ppc anda)

5.Langkah selanjutnya adalah melengkapi kode php diatas biar berfungsi secara penuh, tambahkan file berikut dibagian atas dari kode member.php yg sudah ada tadi. Sehingga menjadi format HTML.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css">
<title>LOGIN | PPCKU </title>
</head>

<body>

<?php

$thepageurl = "http://". $_SERVER['HTTP_HOST'] . $_SERVER['SCRIPT_NAME'];

?>

................KODE SEBELUMNYA ....................

</body>
</html>

sehingga menjadi:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css">
<title>LOGIN | PPCKU </title>
</head>

<body>

<?php

$thepageurl = "http://". $_SERVER['HTTP_HOST'] . $_SERVER['SCRIPT_NAME'];

?>

<form method="POST" action="http://[URL.TO.INCLICK.INSTALLATION]/client.php">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="100%"><b><font size="4">Sample Custom Log-In</font></b></td>
  </tr>
  <tr>
 
    <td width="100%"><hr color="#C0C0C0" size="1"></td>
  </tr>
  <tr>
    <td width="100%"><font size="2">Registered Advertisers and Publisher log in here.<br>
    &nbsp;</font><table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="750">
      <tr>
        <td width="245" valign="top">
        <p align="right"><font size="2">Username:</font></td>
 
        <td width="502" valign="top"><input type="text" name="login_id" size="20" value=""></td>
      </tr>
      <tr>
        <td width="245" valign="top">
        <p align="right"><font size="2">Password:</font></td>
        <td width="502" valign="top"><input type="password" name="login_password" size="20"><font size="2"><br>
        <a href="http://[URL.TO.INCLICK.INSTALLATION]/index_client.php?lostpass=1&login_base_url=http://[LOCATION.OF.CUSTOM.LOGIN.PAGE]/customlogin.php">Forgot your password?</a></font></td>
      </tr>
 
      <tr>
        <td width="245">&nbsp;</td>
        <td width="502">
        <input type="hidden" name="action" value="login">
        <input type="hidden" name="login_base_url" value="http://[LOCATION.OF.CUSTOM.LOGIN.PAGE]/customlogin.php">
      <input type="submit" value="Log In" name="B1" style="float: left"></td>
      </tr>
    </table>
    
    </td>
  </tr>
</table>
</form>

</body>
</html>



7. Selebihnya upload file "member.php" (yg telah anda buat sebelumny) dan "style.css" (yg didapat dari download form login) di hosting dimana wordpress anda install, jika anda install di ppcku.com maka taruh file di directori ppcku.com/ . Untuk file style.css cukup diupload aja di direktori yg sama dengan member.php tanpa perlu diedit2.

8. Buka kembali file member.php, sederhanakan dengan menghapus atribut table, tr, td  dan tambahkan atribut section dan div :


<section class="container"> </section>


<div class="login"> </login>

Atribut section serta div merupakan atribut yg dipakai utk mendeklarasikan pengaturan CSS pada style.css hasil download dari form login, agar tampilan kotaknya sesuai dengan class : Container dan class : login. Silahkan anda buka file style.css utk melihat bagaimana pengaturan class:container dan class:login

Setelah itu tambahkan lagi kode berikut:


placeholder="username"

dan

placeholder="password"

**untuk memberikan efek pada kotak input ada tulisan username dan password

dan
<?=$thepageurl;?>


Hasil akhir script dari langkah ini sbb:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css">
<title>LOGIN | PPCKU </title>
</head>

<body>

<?php

$thepageurl = "http://". $_SERVER['HTTP_HOST'] . $_SERVER['SCRIPT_NAME'];

?>

<section class="container">
<div class="login">
<form method="POST" action="http://[URL.TO.INCLICK.INSTALLATION]/client.php">

    <h1>Sample Custom Log-In</h1>
 
 
    
    <input type="text" name="login_id" placeholder="username" size="20" value=""></td>
    <input type="password" name="login_password" placeholder="password" size="20"><font size="2"><br>
    <a href="http://[URL.TO.INCLICK.INSTALLATION]/index_client.php?lostpass=1&login_base_url=http://[LOCATION.OF.CUSTOM.LOGIN.PAGE]/customlogin.php">Forgot your password?</a>
    
    <input type="hidden" name="login_base_url" value="<?=$thepageurl;?>">
    <input type="submit" value="Log In" name="B1" >
       
</form>
</div>
</section>
</body>
</html>

9. kemudian kita tambahakan bagian dimana akan memunculkan pesan jika akun gagal login, contoh karena password tidak sesuai
tambahkan code php berikut diatas tombol submit :

<?php
if(array_key_exists('result_code', $_REQUEST)){
 if($_REQUEST['result_code'] == "authentication_failed"){
  echo "<div class=\"msgError\"><span class=\"title\" ><font size=3 color=red><strong>Username atau Password tidak valid, silahkan dicoba lagi.</strong></font></span></div>";
 }
 if($_REQUEST['result_code'] == "logout"){
  echo "<div class=\"msgInfo\"><span class=\"title\"><font size=3 color=red><strong>Anda Telah Sukses Logout.</strong></font></span></div>";
 }
 if($_REQUEST['result_code'] == "account_locked"){
  echo "<div class=\"msgError\"><span class=\"title\"><font size=3 color=red><strong>Akun anda sementara dikunci karena berulangkali gagal login. Silahkan dicoba nanti.</strong></font></span></div>";
 }
 if($_REQUEST['result_code'] == "account_suspended"){
  echo "<div class=\"msgError\"><span class=\"title\"><font size=3 color=green><strong>Akun anda telah disuspend silahkan contact kami.</strong></font></span></div>";
 }
}
?>


10. Dan hasil akhir kode member.php anda.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css">
<title>LOGIN | PPCKU </title>
</head>

<body>

<?php

$thepageurl = "http://". $_SERVER['HTTP_HOST'] . $_SERVER['SCRIPT_NAME'];

?>
<section class="container">
<div class="login">
<form method="POST" action="http://[URL.TO.INCLICK.INSTALLATION]/client.php">

    <h1>Sample Custom Log-In</h1>
 
 
    
    <input type="text" name="login_id" placeholder="username" size="20" value=""></td>
    <input type="password" name="login_password" placeholder="password" size="20"><font size="2"><br>
    <a href="http://[URL.TO.INCLICK.INSTALLATION]/index_client.php?lostpass=1&login_base_url=http://[LOCATION.OF.CUSTOM.LOGIN.PAGE]/customlogin.php">Forgot your password?</a>
    
    <input type="hidden" name="login_base_url" value="<?=$thepageurl;?>">
 <?php
if(array_key_exists('result_code', $_REQUEST)){
 if($_REQUEST['result_code'] == "authentication_failed"){
  echo "<div class=\"msgError\"><span class=\"title\" ><font size=3 color=red><strong>Username atau Password tidak valid, silahkan dicoba lagi.</strong></font></span></div>";
 }
 if($_REQUEST['result_code'] == "logout"){
  echo "<div class=\"msgInfo\"><span class=\"title\"><font size=3 color=red><strong>Anda Telah Sukses Logout.</strong></font></span></div>";
 }
 if($_REQUEST['result_code'] == "account_locked"){
  echo "<div class=\"msgError\"><span class=\"title\"><font size=3 color=red><strong>Akun anda sementara dikunci karena berulangkali gagal login. Silahkan dicoba nanti.</strong></font></span></div>";
 }
 if($_REQUEST['result_code'] == "account_suspended"){
  echo "<div class=\"msgError\"><span class=\"title\"><font size=3 color=green><strong>Akun anda telah disuspend silahkan contact kami.</strong></font></span></div>";
 }
}
?><br><br>
 <input type="submit" value="Log In" name="B1" >
       
</form>
</div>
</section>
</body>
</html>

Contoh penerapannya:
http://klikberiklan.com/member.php

Subscribe to receive free email updates:

2 Responses to "Memasang Tombol Login PPC Inclick di Wordpress"