Tampilkan postingan dengan label Pemrograman. Tampilkan semua postingan

Ketika mendaftar untuk website, forum, membuat email dan lain-lain. pertama-tama adalah melakukan registrasi dan hasil registrasi akan dikirim email sebagai konfirmasi registrasi untuk melakukan pengaktifan akun. metode ini sudah banyak digunakan hampir diseluruh website.

Berikut sedikit tutorial dalam membuat Aplikasi registrasi dengan aktivasi email menggunakan PHP. Agar aplikasi ini dapat berjalan dengan baik, maka dibutuhkan beberapa syarat yaitu, server suport PHP mailer, tentunya harus kondisi online dan kalau ada warning ganti setting php.ini display_error = off. Langkah-langkah sebagai berikut :


1 Membuat struktur database
diperlukan database untuk menyimpan informasi user :
CREATE TABLE IF NOT EXISTS `anggota` (
`id_anggota` int(10) NOT NULL AUTO_INCREMENT,
`Username` varchar(50) NOT NULL,
`Email` varchar(50) NOT NULL,
`Password` varchar(10) NOT NULL,
`Aktivasi` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_anggota`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ;

2. Membuat database koneksi dan beberapa konfigurasi untuk mengirim email dan aktivasi :
<?php

/*setting untuk koneksi ke database */
DEFINE('DATABASE_USER', 'username_database');
DEFINE('DATABASE_PASSWORD', 'password_database');
DEFINE('DATABASE_HOST', 'localhost');
DEFINE('DATABASE_NAME', 'nama_database');
/*setting default time zone untuk dapat mengirimm email */
date_default_timezone_set('UTC');

//menetukan pengirim email
define('EMAIL', 'sesuatu@webanda.com');

/*menentuk root url dari script php yang dibuat http://website.com atau http://website.com/Folder/ */
DEFINE('WEBSITE_URL', 'http://localhost/registrasi');


// membuat koneksi ke database
$dbc = @mysqli_connect(DATABASE_HOST, DATABASE_USER, DATABASE_PASSWORD,
DATABASE_NAME);

if (!$dbc) {
trigger_error('koneksi tidak sukses: ' . mysqli_connect_error());
}

?>

3. Membuat Form isian registrasi :
<form action="index.php" method="post" class="registration_form">
<fieldset>
<legend>From Registrasi </legend>

<p>Buat akun baru <span style="background:#EAEAEA none repeat scroll 0 0;line-height:1;margin-left:210px;;padding:5px 7px;">Apakah sudah terdaftar? <a href="login.php">Log in</a></span> </p>

<div class="elements">
<label for="name">Nama :</label>
<input type="text" id="name" name="name" size="25" />
</div>
<div class="elements">
<label for="e-mail">E-mail :</label>
<input type="text" id="e-mail" name="e-mail" size="25" />
</div>
<div class="elements">
<label for="Password">Password:</label>
<input type="password" id="Password" name="Password" size="25" />
</div>
<div class="submit">
<input type="hidden" name="formsubmitted" value="TRUE" />
<input type="submit" value="Register" />
</div>
</fieldset>
</form>
</body>

4. Membuat aturan-aturan dalam pengisian form registrasi, membuat link aktivasi dan mengirim email konfirmasi.
<?php
session_start();
if(isset($_SESSION['Username'])){
header("Location: page.php");
}

include ('database_connection.php');
if (isset($_POST['formsubmitted'])) {
$error = array();//buat array untuk menampung pesan eror
if (empty($_POST['name'])) {//jika variabel nama kosong
$error[] = 'Silahkan masukkan nama ';//tambahkan ke array sebagai pesan error
} else {
$name = $_POST['name'];//jika ada maka masukan isi dari variabel nama
}

if (empty($_POST['e-mail'])) {
$error[] = 'Please Enter your Email ';
} else {


if (preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/", $_POST['e-mail'])) {
//regular expression untuk validasi email
$Email = $_POST['e-mail'];
} else {
$error[] = 'Email tidak valid';
}


}


if (empty($_POST['Password'])) {
$error[] = 'Silahkan masukkan password ';
} else {
$Password = $_POST['Password'];
}


if (empty($error)) //kirim ke database jika tidak ada eror

{

// memastikan apakah email sudah ada di database atau belum
$query_verify_email = "SELECT * FROM anggota WHERE Email ='$Email'";
$result_verify_email = mysqli_query($dbc, $query_verify_email);
if (!$result_verify_email) {//if the Query Failed ,similar to if($result_verify_email==false)
echo ' Terjadi eror pada database ';
}

if (mysqli_num_rows($result_verify_email) == 0) { // Jika tidak ada user lain yang teregistrasi telah menggunakan email ini


// membuat kode aktivasi
$activation = md5(uniqid(rand(), true));


$query_insert_user = "INSERT INTO `anggota` ( `Username`, `Email`, `Password`, `Aktivasi`) VALUES ( '$name', '$Email', '$Password', '$activation')";


$result_insert_user = mysqli_query($dbc, $query_insert_user);
if (!$result_insert_user) {
echo 'Query Failed ';
}

if (mysqli_affected_rows($dbc) == 1) { //Jika data yang dimasukan ke database sukses


// kirim email
$message = "Terimakasih sudah mencoba demo "Membuat aplikasi registrasi dengan aktivasi email menggunakan PHP." nn";
$message .= " Untuk aktivasi contoh akun anda, silahkan klik link di bawah ini:nn";
$message .= WEBSITE_URL . '/activate.php?email=' . urlencode($Email) . "&key=$activation";
mail($Email, 'Registration Confirmation', $message, 'From: sesuatu@webanda.com');




// Jika registrasi berhasil dan email telah terkirim
echo '<div class="success">Terimakasih telah melakukan registrasi di demo ini, sebuah email telah dikirim ke '.$Email.' Silahkan klik pada link aktivasi untuk mengaktivkan account anda </div>';


} else { // Jika terjadi kesalahan maka :
echo '<div class="errormsgbox">Tidak dapat melakukan registrasi karena kesalahan system</div>';
}

} else { // email addres telah terdaftar
echo '<div class="errormsgbox" >email yang anda masukkan telah teregistrasi
</div>';
}

} else {//Jika terdapat kesalahan pada array error maka tampilkan



echo '<div class="errormsgbox"> <ol>';
foreach ($error as $key => $values) {

echo ' <li>'.$values.'</li>';



}
echo '</ol></div>';

}

mysqli_close($dbc);//Tutup koneksi database

}



?>

5. membuat program PHP untuk melakuka pengaktifan akun jika link aktivasi yang dikirim dalam email di klik :
<?php
include ('database_connection.php');

if (isset($_GET['email']) && preg_match('/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/', $_GET['email']))
{
$email = $_GET['email'];
}
if (isset($_GET['key']) && (strlen($_GET['key']) == 32))
{
$key = $_GET['key'];
}


if (isset($email) && isset($key))
{

// Update databse untuk menset isi aktivasi ke "NULL"

$query_activate_account = "UPDATE anggota SET Aktivasi=NULL WHERE(Email ='$email' AND Aktivasi='$key')LIMIT 1";


$result_activate_account = mysqli_query($dbc, $query_activate_account) ;


if (mysqli_affected_rows($dbc) == 1)//Jika proses update telah berhasil
{
echo '<div class="success">Akun anda telah aktive, untuk masuk klik <a href="login.php">Log in</a></div>';

} else
{
echo '<div class="errormsgbox">'.$email .' , ' . $key .' Ooops akun anda tidak dapat diaktivasi. silahkan lakukan registrasi ulang atau hubungi administrator.</div>';

}

mysqli_close($dbc);

} else {
echo '<div class="errormsgbox">Terjadi kesalahan.</div>';
}


?>

6. Membuat Form Login jika user telah terkativasi, dan ingin masuk ke halaman member:
<form action="login.php" method="post" class="registration_form">
<fieldset>
<legend>Form Login </legend>

<p>Masukkan username dan password anda </p>

<div class="elements">
<label for="name">Email :</label>
<input type="text" id="e-mail" name="e-mail" size="25" />
</div>

<div class="elements">
<label for="Password">Password:</label>
<input type="password" id="Password" name="Password" size="25" />
</div>
<div class="submit">
<input type="hidden" name="formsubmitted" value="TRUE" />
<label>Jika belum memiliki akun <a href="index.php">Buat Akun</a></label><input type="submit" value="Login" />
</div>
</fieldset>
</form>

7. Membuat program PHP untuk melakuka proses login ke halaman member :
<?php
session_start();
if(isset($_SESSION['Username'])){
header("Location: page.php");
}


include ('database_connection.php');
if (isset($_POST['formsubmitted'])) {
// Mulai session
session_start();
$error = array();//buat array untuk simpan pesan kesalahan


if (empty($_POST['e-mail'])) {//jika email kosonh
$error[] = 'Silahkan isi email anda ';
} else {


if (preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/", $_POST['e-mail'])) {

$Email = $_POST['e-mail'];
} else {
$error[] = 'Email anda tidak valid ';
}


}


if (empty($_POST['Password'])) {
$error[] = 'Silahkan masukkan password anda ';
} else {
$Password = $_POST['Password'];
}


if (empty($error))//Jika array kosong, berarti tidak ada kesalahan
{



$query_check_credentials = "SELECT * FROM anggota WHERE (Email='$Email' AND password='$Password') AND Aktivasi IS NULL";



$result_check_credentials = mysqli_query($dbc, $query_check_credentials);
if(!$result_check_credentials){//Jika query gagal
echo 'Query Failed ';
}

if (@mysqli_num_rows($result_check_credentials) == 1)//Jika query berhasil
{




$_SESSION = mysqli_fetch_array($result_check_credentials, MYSQLI_ASSOC);//Masukkan hasil ke session

header("Location: page.php");


}else
{

$msg_error= 'Mungkin akun anda belum dikativasi atau alamat Email/password salah';
}

} else {



echo '<div class="errormsgbox"> <ol>';
foreach ($error as $key => $values) {

echo ' <li>'.$values.'</li>';



}
echo '</ol></div>';

}


if(isset($msg_error)){

echo '<div class="warning">'.$msg_error.' </div>';
}

mysqli_close($dbc);

}
?>

7. Membuat halaman member jika berhasil melakukan proses login untuk halaman ini sesuai dengan kebutuhan anda, pertama harus dicek apakah username sudah login tau belum jika belum arahkan ke halaman login :
<?php
ob_start();
session_start();
if(!isset($_SESSION['Username'])){
header("Location: login.php");
}


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Member Area </title>
<style type="text/css">
.success {
border: 1px solid;
margin: 0 auto;
padding:10px 5px 10px 60px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight:bold;
width:450px;
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('images/success.png');

}



</style>
</head>

<body>
<div class="success">Selamat datang , <?php echo $_SESSION['Username'] ; ?><br /><a href="logout.php">Logout</a></div>
</body>
</html>

8. Membuat program PHP untuk proses logout, dimana cek session username apakah ada, kalau ada session dihapus dan arahkan ke index.php:
<?php
// Inialize session
session_start();

if(isSet($_SESSION['Username']))
{
unset($_SESSION['Username']);

header("Location: index.php");
exit;
}else{
header('Location: index.php');
}
?>

Untuk melihat hasil dari program registrasi diatas dapat dilihat disini.
Demikian tutorial mengenai pembuatan registrasi dengan validasi email menggunakan PHP, diatas merupakan penggalan dari program keseluruhan, Untuk program lengkapnya dapat didownload disini.

Description: Membuat aplikasi registrasi dengan aktivasi email menggunakan PHP.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat aplikasi registrasi dengan aktivasi email menggunakan PHP.
Berbagai macam cara digunakan untuk masuk ke halaman yang memerlukan autentikasi. Kali ini sedikit contoh sederhana untuk melakkukan login dengan PHP menggunakan jQuery sebagai fasilitas login menggunakan MySQL sebagai tempat menyimpan informasi login.


Pertama-tama harus membuat file koneksi ke MySQL :
<?php

$hostname = 'localhost'; // Hostname
$dbname = 'database'; // Nama Database
$username = 'username'; // Username Database
$password = 'password'; // Database password

// Koneksi ke databse
mysql_connect($hostname, $username, $password) or DIE('Koneksi ke server gagal !');
// Pilih database
mysql_select_db($dbname) or DIE('Database tidak tersedia !');

?>

selanjutnya diperlukan javascript yang menggunakan jQuery library untuk elakukan proses login. simpan menggunakan nama init.js :

// Animasi loading
img1 = new Image(16, 16);
img1.src="images/spinner.gif";

img2 = new Image(220, 19);
img2.src="images/ajax-loader.gif";

// Ketika DOM telah siap
$(document).ready(function(){

// Munculkan modal box ketika "LOGIN" di klik
$("#login_link").click(function(){
$('#login_form').modal();
});

// Ketika melakukan login
$("#status > form").submit(function(){

// Sembuyikan tombol "Login"
$('#submit').hide();

// Tampilkan animasi loading
$('#ajax_loading').show();

// 'this' mengacu pada form login
var str = $(this).serialize();

// -- Memulai AJAX Call --

$.ajax({
type: "POST",
url: "do-login.php", // kirim login info ke halaman do-login.php
data: str,
success: function(msg){

$("#status").ajaxComplete(function(event, request, settings){

// Tampilkan tombol 'Submit'
$('#submit').show();

// Sembunyikan animasi loading
$('#ajax_loading').hide();

if(msg == 'OK') // LOGIN OK?
{
var login_response = '<div id="logged_in">' +
'<div style="width: 350px; float: left; margin-left: 70px;">' +
'<div style="width: 40px; float: left;">' +
'<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' +
'</div>' +
'<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+
"Selamat anda berhasil masuk! <br /> Silahkan tunggu untuk masuk ke member area...</div></div>";

$('a.modalCloseImg').hide();

$('#simplemodal-container').css("width","500px");
$('#simplemodal-container').css("height","120px");

$(this).html(login_response); // Refers to 'status'

// Setelah 3 detik redirect ke halaman member area
setTimeout('go_to_private_page()', 3000);
}
else // ERROR?
{
var login_response = msg;
$('#login_response').html(login_response);
}

});

}

});

// -- Akhir AJAX Call --

return false;

});

});

function go_to_private_page()
{
window.location = 'berhasil.php'; // Members Area
}

kemudian untuk proses login dibuat file PHP dan disimpan dalam bentuk do-login.php :
<?php
$config = array();

// memunculkan semua eror kecuali notifikasi
error_reporting(E_ALL ^ E_NOTICE);

// Start session
session_id();
session_start();
header('Cache-control: private'); // IE 6 FIX

include('config.inc');
$nama = mysql_real_escape_string($_POST['email']);
$pass = mysql_real_escape_string($_POST['password']);
$login = mysql_query("select nama, password from user where (nama like '" . $nama . "') and (password like '" . $pass . "')");
// ambil data dari database informasi tentang user
while ($row = mysql_fetch_object($login)) {
$tipe = $row->tipe;
$config['email'] = $row->nama;
$config['password'] = $row->password;

}

$_SESSION['tipe'] = $tipe;

if($_POST['action'] == 'user_login')
{
$post_email = mysql_real_escape_string($_POST['email']);
$post_password = mysql_real_escape_string($_POST['password']);

// cek username dan password

if($post_email == $config['email'] && $post_password == $config['password'])
{
// Jika tidak ada eror? register session dan arahkan user ke halaman pribadi mereka

$_SESSION['username'] = $username;

echo 'OK';
}
else
{
$auth_error = '<div id="notification_error">Maaf informasi login yang diberikan salah !!!.</div>';

echo $auth_error;
}
}
?>

Buat contoh halaman yang akan dituju jika autentikasi berhasil dan untuk contoh ini diberi nama berhasil.php :
<?php
// Inialize session
session_start();
// cek jika username belum ada di session maka lompat ke halaman utama
if (!isset($_SESSION['username'])) {
header('Location: index.php');
}else{
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Member Area</title>

<link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' />

</head>

<body>


Ini adalah halaman jika berhasil melakukan autentikasi<br />
<span style='font-size: 15px;'><a href='logout.php'>KELUAR</a></span>

</body>
</html>
<?php
}
?>

Untuk melakukan proses Logout dari halaman hasil autentikasi dibuat sebuah file logout.php :
<?php
// Inialize session
session_start();

if(isSet($_SESSION['username']))
{
unset($_SESSION['username']);

header("Location: index.php");
exit;
}else{
header('Location: index.php');
}
?>

Yang terakhir adalah halaman utama jika belum melakukan autentikasi disimpan ke index.php :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Contoh sederhana proses login menggunakan PHP, AJAX, dan MySQL</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery.simplemodal.js"></script>
<script type="text/javascript" src="javascript/init.js"></script>

<link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' />

</head>

<body>

Contoh Login menggunakan PHP, Ajax, dan MySQL<br />

<span style="font-size: 15px;"><a id="login_link" href="#">LOGIN</a></span>


<div id="login_form" style='display:none'>

<div id="status" align="left">

<center><h1><img src="images/key.png" align="absmiddle">&nbsp;LOGIN</h1>

<div id="login_response"><!-- spanner --></div> </center>

<form id="login" action="javascript:alert('success!');">
<input type="hidden" name="action" value="user_login">
<input type="hidden" name="module" value="login">
<label>Username</label><input type="text" name="email"><br />
<label>Password</label><input type="password" name="password"><br />
<label>&nbsp;</label><input value="Login" name="Login" id="submit" class="big" type="submit" />

<div id="ajax_loading">
<img align="absmiddle" src="images/spinner.gif">&nbsp;Proses...
</div>

</form>

</div>

</div>

</body>
</html>

Untuk file-file pelengkap seperti stylesheet.css, jquery.simplemodal.js, beserta file gambar dapat didownload disini. Untuk melihat hasil dari contoh diatas dapat dilihat disini.
Demikian sedikit contoh mengenail Login serderhana dengan PHP, jQuery dan MySQL dan tentunya dapat dilakukan berbagai modifikasi sesuai kebutuhan.

Description: Login Form sederhana dengan PHP, jQuery dan MySQL
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Login Form sederhana dengan PHP, jQuery dan MySQL

Membuat RSS feed dengan PHP dan MySQL

Rabu, 02 Januari 2013
Posted by Unknown
RSS adalah kependekan dari Really Simple Syndication, digunakan agar memudahkan pengunjung untuk mengetahui berita atau artikel dari sebuah website atau blog. Jika kita berlangganan RSS feed dalam sebuah website maka secara otomatis RSS reader atau browser yang support dengan RSS feed akan secara otomatis memberikan tanda bahwa ada artikel yang terbaru dari website atau blog itu, tanpa harus mengunjung web tersebut terlebih dulu.

Jika kita memiliki Website atau Blog RSS sangat penting agar pengunjung setia kita tetap memiliki update terhadap informasi yang disampaikan di web atau blog kita. Berikut sedikit langkah untuk membuat RSS sesuai kebutuhan informasi yang akan disampaikan.

Sebelumnya harus dipahami struktur standar dari RSS feed dan dapat dilihat di "The Anatomy of an RSS Feed". Jika kita telah memiliki struktur database yang ada pada website kita maka kita dapat mengambil beberapa field dari database itu untuk digunakan dalam RSS feed yang dibuat, dalam kesempatan ini dibuat contoh struktur database sebagai berikut :
1. Tabel dari RSS item :
CREATE TABLE `webref_rss_items` (
  `id` int(11) NOT NULL auto_increment,
  `title` text NOT NULL,
  `description` mediumtext NOT NULL,
  `link` text,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
2. Tabel dari detail isi RSS item
 CREATE TABLE `webref_rss_details` (
  `id` int(11) NOT NULL auto_increment,
  `title` text NOT NULL,
  `description` mediumtext NOT NULL,
  `link` text,
  `language` text,
  `image_title` text,
  `image_url` text,
  `image_link` text,
  `image_width` text,
  `image_height` text,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Setelah menambahkan dan mengisi beberapa dari kedua tabel di atas berikut adalah Buat konektor PHP ke mysql, simpan dengan nama "koneksi_mysql.php" :

<?php

DEFINE ('DB_USER', 'username_anda');
DEFINE ('DB_PASSWORD', 'password_anda');
DEFINE ('DB_HOST', 'localhost');
DEFINE ('DB_NAME', 'nama_database');

$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Could not connect to MySQL: ' . mysql_error() );
mysql_select_db (DB_NAME) OR die ('tidak dapat terkoneksi ke database: ' . mysql_error() );

?>

Setelah itu maka dibuat sebuah PHP class untuk memindahkan data di MySQL ke RSS feed yang berbentuk XML, disimpan dengan nama rss.class.php :

<?php

class RSS
{
public function RSS()
{
require_once ('direktori dari.../koneksi_mysql.php');
}

public function GetFeed()
{
return $this->getDetails() . $this->getItems();
}

private function dbConnect()
{
DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
}

private function getDetails()
{
$detailsTable = "webref_rss_details";
$this->dbConnect($detailsTable);
$query = "SELECT * FROM ". $detailsTable;
$result = mysql_db_query (DB_NAME, $query, LINK);

while($row = mysql_fetch_array($result))
{
$details = '<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="2.0">
<channel>
<title>'. $row['title'] .'</title>
<link>'. $row['link'] .'</link>
<description>'. $row['description'] .'</description>
<language>'. $row['language'] .'</language>
<image>
<title>'. $row['image_title'] .'</title>
<url>'. $row['image_url'] .'</url>
<link>'. $row['image_link'] .'</link>
<width>'. $row['image_width'] .'</width>
<height>'. $row['image_height'] .'</height>
</image>';
}
return $details;
}

private function getItems()
{
$itemsTable = "webref_rss_items";
$this->dbConnect($itemsTable);
$query = "SELECT * FROM ". $itemsTable;
$result = mysql_db_query (DB_NAME, $query, LINK);
$items = '';
while($row = mysql_fetch_array($result))
{
$items .= '<item>
<title>'. $row["title"] .'</title>
<link>'. $row["link"] .'</link>
<description><![CDATA['. $row["description"] .']]></description>
</item>';
}
$items .= '</channel>
</rss>';
return $items;
}

}

?>

Yang terakhir adalah memanggil PHP class yang telah dibuat di atas kedalam XML agar dapat melihat RSS feed, simpan dengan nama feed.xml :

<?php
header("Content-Type: application/xml; charset=ISO-8859-1");
include("direktori file.../rss.class.php");
$rss = new RSS();
echo $rss->GetFeed();
?>

Catatan :

  1. Agar Apache Webserver dapat mengkompile script php yang berada dalam file feed.xml, dengan menambahkan baris "AddHandler application/x-httpd-php .xml". 
  2. Cek terlebih dahulu apakah RSS dapat dibaca atau tidak di website RSS validator seperti validator.w3.org.

Demikian sharing mengenai Membuat RSS feed dengan PHP dan MySQL, semoga dapat digunakan dengan baik
Description: Membuat RSS feed dengan PHP dan MySQL
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat RSS feed dengan PHP dan MySQL
Saat ini Google sebagai penyedia layanan IT menyediakan beberapa layanan yang dapat membantu pelanggan-nya (yang telah terdaftar) untuk mengembangkan aplikasi-aplikasi online baik untuk pribadi maupun komersil (Google Map, Analytics, Adsense dll). Untuk mendapatkan fasilitas layanan tersebut tentunya diperlukan akses untuk masuk yang berbentuk sandi atau API Key.

Langkah pertama tentunya adalah mendaftar akun Google (sama seperti membuat email di Google). Setelah terdaftar dan login ke Google, masuk ke Google API Console :  https://code.google.com/apis/console/

Untuk tampilan pertama sebelum memiliki Project sebagai berikut: 


Kemudian klik Create project..., maka akan masuk ke tampilan web sebagai berikut :


Piilih Menu "Services" maka akan tampil service-service yang disediakan Google, pilih salah satu service yang akan digunakan. Misalnya "Google Maps API v3" pilih satus menjadi "On"


Setelah sudah memilih salah satu service dan sudah "On" maka Pilih menu "API Access". maka API Key kita sudah tercantum dan siap digunakan 


Sebagai contoh penerapan Google API Key untuk Aplikasi Google MAP dapat dibacadi artikel "Membuat Marker dan Side Bar Google Map dengan PHP"
Demikian sedikit sharing semoga dapat digunakan dengan baik dan dapat membantu pekerjaan.

Catatan Penting : Setiap service memiliki aturan main masing-masing, ada yang gratis dan ada yang berbayar dengan kondisi tertentu. Silahkan dibaca dengan cermat


Description: Mendapatkan Google API Key
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Mendapatkan Google API Key
Dengan semakin majunya era digital, hampir semua dokumen bisa dapatkan secara online. seperti Google Docs, Scrib dan lain-lain. Tapi jika kita ingin mempublish dokumen ke website pribadi atau perusahaan secara internal (menggunakan server sendiri) ada beberapa tools yang berguna sebagai reader online. Ada yang berbayar maupun yang opensource. 

FlexPaper menyediakan Online Reader versi opensource. kita dapat merubah tampilan reader tersebut tapi tentunya tetap menampilkan logo FlexPaper.

Berikut sedikit penjelasan untuk mengaplikasikan FlexPaper ke website. Pertama-tama download paket FlexPaper player disini. Kemudian download swftool sebagai converter disini.

Pertama-tama convert dokumen PDF dengan menggunakan swftool.
Kemudian "Rendering mode" dirubah sesuai dengan kondisi file PDF apakah Text saja, atau kombinasi text dan gambar dll. Kemudian pilih menu "Edit" -> "Options" -> pilih tab "Viewer", pilih "no viewer" dan untuk flash version plih tergantung kebutuhan.

Klik OK, kemudian tekan Ctrl + W untuk menyimpan semua halaman ke sebuah file swf. sebagai contoh file ini disimpan dan diberi nama KhasiatTanamanobat.swf.

Sekarang pemasangan di halaman web pertama-tama tambahkan library flexpaper yang ada dalam paket FlexPaper (flexpaper_flash.js) kedalam head.

kemudian rubah script untuk memanggil modul flexpaper beserta dokumen tambahkan script berikut di dalam body Tag HTML, tentunya diletakan sesuai kebutuhan.


         <script type="text/javascript"> 
var fp = new FlexPaperViewer(
'FlexPaperViewers',
'viewerPlaceHolder', { config : {
SwfFile : escape('KhasiatTanamanobat.swf'),
Scale : 0.6,
ZoomTransition : 'easeOut',
ZoomTime : 0.5,
ZoomInterval : 0.2,
FitPageOnLoad : true,
FitWidthOnLoad : false,
FullScreenAsMaxWindow : false,
ProgressiveLoading : false,
MinZoomSize : 0.2,
MaxZoomSize : 5,
SearchMatchAll : false,
InitViewMode : 'Portrait',
PrintPaperAsBitmap : false,
PrintToolsVisible : false,
ReadOnly : true,
PrintEnabled : false,


ViewModeToolsVisible : true,
ZoomToolsVisible : true,
NavToolsVisible : true,
CursorToolsVisible : true,
SearchToolsVisible : true,

localeChain: 'en_US'
}});
</script>

pada baris ke-5 SwfFile diisi lokasi dokumen swf yang telah dibuat tadi. Untuk contoh karena berada dalam satu direktori makan cukup nama file saja.

berikut versi lengkap HTML-nya :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>FlexPaper</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; }
#flashContent { display:none; }
</style>

<script type="text/javascript" src="js/flexpaper_flash.js"></script>
</head>
<body>
<div style="position:absolute;left:10px;top:10px;">
<a id="viewerPlaceHolder" style="width:680px;height:480px;display:block"></a>

<script type="text/javascript">
var fp = new FlexPaperViewer(
'FlexPaperViewers',
'viewerPlaceHolder', { config : {
SwfFile : escape('KhasiatTanamanobat.swf'),
Scale : 0.6,
ZoomTransition : 'easeOut',
ZoomTime : 0.5,
ZoomInterval : 0.2,
FitPageOnLoad : true,
FitWidthOnLoad : false,
FullScreenAsMaxWindow : false,
ProgressiveLoading : false,
MinZoomSize : 0.2,
MaxZoomSize : 5,
SearchMatchAll : false,
InitViewMode : 'Portrait',
PrintPaperAsBitmap : false,
PrintToolsVisible : false,
ReadOnly : true,
PrintEnabled : false,


ViewModeToolsVisible : true,
ZoomToolsVisible : true,
NavToolsVisible : true,
CursorToolsVisible : true,
SearchToolsVisible : true,

localeChain: 'en_US'
}});
</script>
</div>

</body>
</html>


berikut contoh untuk hasil dari dokumen PDF Khasiat Tanaman Obat


Karena apllikasi ini opensource maka bisa di edit sesui kebutuhan, jika akan melakukan pengeditan pada FlexPaper player silihkan download Flexpaper SDK disini dan edit menggunakan Adob Flex 3. Jika ingin melakukan demo sendiri disarankan memiliki webserver sendiri dengan menginstall XAMPP atau WAMP agar dapat melihatnya.


Description: Membuat PDF Reader untuk website dengan FlexPaper
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat PDF Reader untuk website dengan FlexPaper
Untuk menampilkan data dari table yang memiliki banyak records sangat dibutuhkan sistem Paginasi, untuk memudahkan navigasi. Ada beberapa teknik membuat paginasi, berikut salah satu teknik paginasi menggunakan Ajax-PHP-MySQL.



Langkah pertama adalah membuat contoh database yang memiliki struktur tabel sebagai berikut :

CREATE TABLE `records` (
`id` int(11) NOT NULL auto_increment,
`img` varchar(255) NOT NULL,
`message` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
)
Isi tabel tersebut dengan beberapa contoh data dengan struktur data yang ada, Kemudian buat program PHP yang berfungsi untuk menghubungkan PHP dengan database, simpan file ini dalam bentuk PHP :

<?php
/* Database config */

$db_host = 'localhost';
$db_user = 'user database';
$db_pass = 'password database';
$db_database = 'nama database';

/* End config */

$link = @mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection');

mysql_query("SET NAMES 'utf8'");
mysql_select_db($db_database,$link);
?>
Berikutnya membuat program PHP yang bertujuan untuk mengambil dan menampilkan isi dari tabe, simpan dalam bentuk PHP :

<?php
include("connect.php");

$per_page = 4;
$sqlc = "show columns from records ";
$rsdc = mysql_query($sqlc);
$cols = mysql_num_rows($rsdc);
$page = $_REQUEST['page'];

$start = ($page-1)*4;
$sql = "select * from records order by id limit $start,4";
$rsd = mysql_query($sql);
?>
<?php
while ($rows = mysql_fetch_assoc($rsd))
{?>
<div class="each_rec"> <img src="<?php echo $rows['img'];?>" height="50" width="70" style="float:left; margin-right:3px;" alt="" /> <?php echo $rows['message'];?></div>
<?php
}?>

Program javascript berikut untuk menampilkan data yang telah diambil menggunakan Program PHP di atas :

$(document).ready(function(){
//show loading bar
function showLoader(){
$('.search-background').fadeIn(200);
}
//hide loading bar
function hideLoader(){
$('.search-background').fadeOut(200);
};

$("#paging_button li").click(function(){
//show the loading bar
showLoader();

$("#paging_button li").css({'background-color' : ''});
$(this).css({'background-color' : '#A5CDFA'});

$("#content").load("data.php?page=" + this.id, hideLoader);
});

// by default first time this will execute
$("#1").css({'background-color' : '#A5CDFA'});
showLoader();
$("#content").load("data.php?page=1", hideLoader);
});
Berikut style CSS untuk mengatur tampilan paginasi :

/* CSS Document  www.99points.info */
#heading
{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:56px;
color:#CC0000;
}
body{
text-align:center;
font-family:Arial, Sans-Serif;
font-size:0.75em;
}

/* CSS Document */
#container {
height:300px;
padding:12px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-align: center;
text-decoration: none;
width: 600px;
margin-top:40px;
}

#container .each_rec{

color:#000066;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding:5px 5px 12px 5px;
border-bottom:solid #669900;
text-align:justify;
margin-bottom:11px;
}

.search-background {
display: none;
font-size: 13px;
font-weight: bold;
height:160px;
position: absolute;
padding-top:140px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-align: center;
opacity:0.5;filter: alpha(opacity=50) ;
text-decoration: none;
width: 600px;
}

.search-background {
background-color: #ff4242;
color:#FFFFFF;
text-shadow: #fff 0px 0px 20px;
}

search-background label{

border:solid #66FF00 1px;
}

#paging_button ul{ width: 600px; padding:0px; margin:8px;}

#paging_button ul li { -moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
float:left; height:20px; width:20px; list-style-image:none;
list-style-type:none; font-weight:bold; border:solid #CCCCCC 1px;
margin:3px; cursor:pointer}

li:hover{ color: #CC0000; cursor: pointer; }
Akhirnya semua program tersebut dijadikan satu dalam sebuah halam :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paginasi Halaman dengan Ajax</title>
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>


<?php
$per_page = 4;
include("connect.php");
$sql = "select * from records ";
$rsd = mysql_query($sql);
$count = mysql_num_rows($rsd);
$pages = ceil($count/$per_page)
?>
<div align="center">

<h1>Paginasi Halaman dengan Ajax</h1>
<div id="container">

<div class="search-background">
<label><img src="loader.gif" alt="" /></label>
</div>

<div id="content"></div>
</div>
<div id="paging_button">
<ul>
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}?>
</ul>
</div>
</div>


<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
</body>
</html>

Untuk meliha contoh dari program ditas bisa dilihat disini, dan untuk download contoh programnya disini.


Description: Paginasi Data menggunakan PHP-MySQL-Ajax
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Paginasi Data menggunakan PHP-MySQL-Ajax
Menu navigasi sangatlah penting dalam sebuah web, untuk memudahkan pengunjung menelusuri isi web. Banyak sekali desain menu yang ada di internet dengan berbagai macam baik horisontal maupun vertical.

Berbagai teknik dapat dilakukan untuk membuat menu navigasi dalam website, dapat menggunakan javascript, jQuery, mootools dan masih banyak lagi library yang menyediakan plugin untuk menu.

Kali ini ada sedikit contoh membuat animasi dropdown menu menggunakan CSS3.
berikut script dari CSS3 : 

<style type="text/css">
.blok_menu {
height:40px;width:375px;border:0px solid #000;
}
.menu_sub,
.menu_sub ul.kolom,
.menu_sub li.baris,
.menu_sub a.pertama {
margin: 0;
border: none;
}
.menu_sub {
padding: 0;
margin: 0;
height: 40px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
}
.menu_sub li.baris {
position: relative;
float: left;
display: block;
height: 40px;
width:125px;
}
.menu_sub li.baris a.pertama{
display: block;
padding: 0 10px 0 10px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu_sub li.baris a.kedua{
display: block;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu_sub li.baris:first-child a.pertama{ border-left: none; }
.menu_sub li.baris:last-child a.pertama{ border-right: none; }
.menu_sub li.baris:hover > a.pertama { color: #8fde62; }
.menu_sub ul.kolom2{
position: absolute;
top: 40px;
padding:0px;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu_sub li.baris:hover > ul.kolom2 { opacity: 1; }
.menu_sub li.baris2:hover > a.kedua { color: #8fde62; }
.menu_sub ul.kolom2 li.baris2 {
height: 0;
overflow: hidden;
width:105px;
padding: 0 10px;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
list-style-type:none;
}
.menu_sub li.baris:hover > ul.kolom2 li.baris2 {
height: 36px;
overflow: visible;
padding: 0 10px;
}
.menu_sub ul.kolom2 li.baris2 a.kedua {
width: auto;
padding: 4px 0 4px 0px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu_sub ul.kolom2 li.baris2:last-child a.kedua { border: none; }
</style>

tempatkan CSS di atas di antara head
Kemudian berikut adalah tag HTML untuk menggunakan CSS di atas :

<div class="blok_menu">
<ul class="menu_sub">
<li class="baris"><a class="pertama" href="#">Menu 1</a>
</li>
<li class="baris"><a class="pertama" href="#">Menu 2</a>
<ul class="kolom2">
<li class="baris2"><a class="kedua" href="" >Sub Menu 2.1</a></li>
<li class="baris2"><a class="kedua" href="" >Sub Menu 2.2</a></li>
<li class="baris2"><a class="kedua" href="" >Sub Menu 2.3</a></li>
</ul>
</li>
<li class="baris"><a class="pertama" href="#">Menu 3</a>
<ul class="kolom2">
<li class="baris2"><a class="kedua" href="" >Sub Menu 3.1</a></li>
<li class="baris2"><a class="kedua" href="" >Sub Menu 3.2</a></li>
<li class="baris2"><a class="kedua" href="" >Sub Menu 3.3</a></li>
<li class="baris2"><a class="kedua" href="" >Sub Menu 3.4</a></li>
<li class="baris2"><a class="kedua" href="" >Sub Menu 3.5</a></li>
</ul>
</li>
</ul>
</div>

Tempatkan script html di atas kedalam dalam tag body website atau blog anda. Kompabilitas CSS3 telah didukung oleh browser terkini. Demikian sedikit sharenya, selamat mencoba dan semoga berguna.

Description: Membuat drop down menu sederhana dengan CSS3
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat drop down menu sederhana dengan CSS3
Banyak Javascript librari (mootools, prototype) )menggunakan $ sebagai pengganti fungsi atau nama variable seperti pada jQuery.

Pada jQuery $ hanya sebagai alias dari jQuery, sehingga semua fungsi dapat digunakan tanpa menggunakan $. Jika kita menginginkan untuk menggunakan librari lain bersamaan dengan menggunakan jQuery, kita dapat menggunakan syntax :
$.noConflict():

Contoh: Mengembalikan semua obect yang tadinya direferensikan $ kembali ke $.

jQuery.noConflict();
// tambahkan program jQuery disini
jQuery("div p").hide();
// tambahkan program librari lain dengan disini $()
$("content").style.display='none';

Contoh : jQuery tetap menggunakan $ untuk objectnya, dengan membungkus fungsi jQuery asli dengan jQuery alias "(.........................)(jQuery);"

jQuery.noConflict();
(function($){
  $(function(){
    // kode jQery asli yang menggunakan $
  });
})(jQuery);
// kode yang menggunakan $ sebagai alias untuk librari lain

Contoh: dapat menggabungkan jQuery.noConflict() menjadi satu :

jQuery.noConflict()(function(){
    // kode jQuery
});// kode yang menggunakan $ sebagai alias untuk librari lain

Contoh: Membuat alias berbada untuk jQuery dan dapat digunakan dimana jQuery librari akan dipanggil.

var j = jQuery.noConflict();
// script jQuery
j("div p").hide();
// librari lain dengan $()
$("content").style.display = 'none';

Contoh: Mimindahkan seluruh jQuery ke dalam objek lain.

var dom = {};
dom.query = jQuery.noConflict(true);

Hasilnya:

// jQuery yang baru
dom.query("div p").hide();
// librari lain dengan $()
$("content").style.display = 'none';
// jquery dengan versi yang berbeda
jQuery("div > p").hide();

Description: Agar JQuery library dapat dipakai bersama dengan library lain
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Agar JQuery library dapat dipakai bersama dengan library lain
Marker pada Google Map sanga dibutuhkan untuk menunjukan lokasi yang kita inginkan. Berkut sedikit

Tutorial untuk menambahkan marker pada Google Map dengan PHP .

Pertama-tama kita harus sign up ke google untuk mendapatkan Google API Key, atau bisa dibaca tutorial di artikel "Mendapatkan Google API Key"


Setelah kita mendapatkan Google API Map, berikut download GoogleMapAPIv3.php disini.

Berikut kode  php yang dimasukkan ke website:
<?php
require('GoogleMapAPIv3.php');
//contoh data
$data_array = array(
array(
"lat"=>"-7.80182", //bisa di dapat di GoogleMAP
"lon"=>"110.350149", //bisa di dapat di GoogleMAP
"address"=>"Wirobrajan",
"title"=>"Daerah Wirobrajan, Yogyakarta",
"desc"=>"Daerah Istimewa Yogyakarta"
)'

);

$MAP_OBJECT = new GoogleMapAPI();
$MAP_OBJECT->_minify_js = isset($_REQUEST["min"])?FALSE:TRUE;
$MAP_OBJECT->disableSidebar();
$MAP_OBJECT->setAPIKey('--API KEY YANG DI DAPAT DARI GOOGLE');

$SIDEBAR_HTML = "";

//menambahkan marker ke Google MAP dan membuat Side Bar
$rec=0;
foreach($data_array as $location){
//Menambahkan marker ke GoogleMAP.
$marker_id = $MAP_OBJECT->addMarkerByCoords($location["lon"],$location["lat"], $location["title"], $location["desc"]);

$opener_id = "opener_".$marker_id;

$rec++;
//Menambahkan Link ke sidebar agar bisa mengakses MAP sesuai id marker
$MAP_OBJECT->addMarkerOpener($marker_id, $opener_id);
}
?>

Kode untuk CSS side bar :


 <style type="text/css">
#map, #map_sidebar { float: left }
.sidebar { list-style:none; margin:0 0 0 10px;padding:0;width: 200px; }
.sidebar li { margin-bottom: 2px; }
.sidebar p { background-color: #eee;margin:0; padding: 5px;cursor: pointer; }
.sidebar p:hover { background-color: #ddd; }
</style>

kemudian pemasangan di html : 

<div id="map">
  <?= $MAP_OBJECT->printOnLoad();?>
  <?= $MAP_OBJECT->printMap();?>
</div>

<div id="map_sidebar">
    <ul class="sidebar">
        <li id='opener_0'>
            <a href='#'>Wirobrajan, Yogyakarta</a>
        </li>
    </ul>
</div>

untuk mendapatkan "lon" (longitude) dan "lat" (latitude) , silahkan ke GoogleMAP

Contoh penerapan fungsi di atas bisa di lihat disini.

Description: Membuat Marker dan Side Bar Google Map dengan PHP
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat Marker dan Side Bar Google Map dengan PHP
Welcome to My Blog

Popular Post

Labels

Followers

- Copyright © 2013 shad0w-share | Designed by Johanes Djogan -