Programming

Memformat Angka dengan PHP

kadangkala, ketika kita bermain dengan angka, kita menginginkan agar angka yang akan ditampilkan terformat dengan tanda “.” (titik), “,” (koma) dan sebagainya. misalkan:

angka 1500000 akan kita format menjadi 1.500.000,00

tentu kita kan kesulitan klo kita bikin fungsi tersediri bukan? mulai php 3, sudah disediakan fungsi yang dapat digunakan untuk memformat angka, yaitu fungsi number_format(), — untuk lebih jelasnya silahkan masuk kesini–

format: number_format ( float $number [, int $decimals [, string $dec_point, string $thousands_sep]] )

saia, kasih contoh penggunaan satu ekor saja yakk:

<?php
function rp($number){
return number_format ($number , 2, “,”, “.” );
}
echo rp(1500000); // hasil 1.500.000,00
?>

demikian yang dapat saia sampaikan, kurang lebihnya trima kasih — kek pidato ae :D–

Iklan

Bikin Image Preview, sebelum upload

sebelum image diupload, ada baiknya dilakukan preview terlebih dahulu. keuntungannya kita bisa melihat image yang akan kita upload. selain itu kesalahan upload image bs dimimalkan.

cara kerjanya adalah menampilkan terlebih dahulu file yang ada di root folder dimana file tersebut kita ambil. lalu kita masukkan ke source image, dengan mereplace tanda ‘\’ degan ‘/’ dan menambahkan atribut ‘file:///’

code begin
pertama tama, kita buat code html, untuk mengambil file spt kode dibawah ini

<img id=”imgDisplayPreview” align=”texttop”>
<input type=”file” value=”Browse” name=”imgUp” id=”imgUp” onChange=”displayImg(‘imgUp’, ‘imgDisplayPreview’)”>

selanjutnya kita bikin code javascritpnya:

function displayImg(imgSource, imgSourcePreview){
var imgSrc = document.getElementById(imgSource).value;
// replace \ with /
imgSrc = imgSrc.replace(/\\/gi, “\/”);

var imgPreview = “file:///”+imgSrc;
if(checkImgAllowed(imgSrc)){
//alert(imgPreview);
//document.getElementById(imgSourcePreview).innetHTML = imgPreview;
document.getElementById(imgSourcePreview).src = imgPreview;
document.getElementById(imgSourcePreview).width = 100;
document.getElementById(imgSourcePreview).height = 100;
document.getElementById(imgSourcePreview).border = 5;
document.getElementById(imgSourcePreview).style.borderColor = “#EFEFEF”;
document.getElementById(imgSourcePreview).style.padding = 5;
}else{
alert(“Sorry, u seem doesnt supply a valid img”);
document.getElementById(imgSource).value = “”;
document.getElementById(imgSourcePreview).src=””;
document.getElementById(imgSourcePreview).alt = “Invalid Img”;
}
}
// ni buat ngecek, image yang di support oleh browser
function checkImgAllowed(imgSourceName){
if(imgSourceName.indexOf(‘.jpg’) != -1 || imgSourceName.indexOf(‘.gif’) != -1 || imgSourceName.indexOf(‘.png’) != -1){ return true; }
else{ return false }
}

selesai..

kode lengkapnya:

<html>
<head>
<style>
#t1, #t2{background-color:blue;border:red 3px solid;color:white}
body{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
</head>
<script>
function displayImg(imgSource, imgSourcePreview){
var imgSrc = document.getElementById(imgSource).value;
//alert(imgSrc);
imgSrc = imgSrc.replace(/\\/gi, “\/”);
//var imgPreview = “<img src=\”file:///”+imgSrc+”\” width=\”100\” width=\”100\”>”;
var imgPreview = “file:///”+imgSrc;
if(checkImgAllowed(imgSrc)){
//alert(imgPreview);
//document.getElementById(imgSourcePreview).innetHTML = imgPreview;
document.getElementById(imgSourcePreview).src = imgPreview;
document.getElementById(imgSourcePreview).width = 100;
document.getElementById(imgSourcePreview).height = 100;
document.getElementById(imgSourcePreview).border = 5;
document.getElementById(imgSourcePreview).style.borderColor = “#EFEFEF”;
document.getElementById(imgSourcePreview).style.padding = 5;
}else{
alert(“Sorry, u seem doesnt supply a valid img”);
document.getElementById(imgSource).value = “”;
document.getElementById(imgSourcePreview).src=””;
document.getElementById(imgSourcePreview).alt = “Invalid Img”;
}
}

function checkImgAllowed(imgSourceName){
if(imgSourceName.indexOf(‘.jpg’) != -1 || imgSourceName.indexOf(‘.gif’) != -1 || imgSourceName.indexOf(‘.png’) != -1){ return true; }
else{ return false }
}
</script>
<body>
<img id=”imgDisplayPreview” align=”texttop”>
<input type=”file” value=”Browse” name=”imgUp” id=”imgUp” onChange=”displayImg(‘imgUp’, ‘imgDisplayPreview’)”>
<!– <div id=”uploadImg”></div>–>

</body>
</html>

Error AJAX

beberapa hari yang lalu gw sempet bikin aplikasi web sederhana make ajax (PHP n MySQL). aplikasi yang gw buat jalan dengan mulus. beberapa hari berikutnya timbul masalah pada aplikasi ajax tersebut. scriptnya ngeload tapi g ada yang tampilkan. gw coba googling buat dapetin solusinya.

mula-mula gw coba tampilin pesan yang ada di script, untuk mengetahui error apakah gerangan yang tampil dengan menambahkan alert pada script AJAX tsb. selanjutnya gw cobain di browser, ternyata error yang tampil adalah 505 (HTTP Version Not Supported). masa iya headernya g support padahal gw g ngubah header tuh. gw edit header script web. gw ganti HTTP / 1.0 sampe HTTP /1.1 ternyata g pengaruh, tetep ajah hasil scriptnya g dijalankan, g ada tampilan di browser. selanjutnya gw masuk ke direktori apache tuk ngliat error log (error.txt di /apache/log) ternyata muncul pesen ini

[Fri Mar 09 09:30:39 2007] [error] [client 127.0.0.1] PHP Fatal error:  Cannot redeclare selangseling() (previously declared in E:\\www\\ajax\\php-function.php:255) in E:\\www\\ajax\\dbfunctions.php on line

weww ternyata masalahnya ada di function yang terdeklarasi dua kali (di file php-function.php dan dbfunction.php) sehingga menyebabkan script php ga dijalankan. gw apus salah satu functionnya n gw jalanin ternyata berhasil bo!!!

skr yang gw pikirkan adalah bagaimana cara menampilkan error di php via AJAX? klo berhasil gw g perlu liat errornya di error log, cukup liat di browser ajah. dan ini akan menjadi tantangan dan PR gw selanjutnya 😀

doakan moga cepet selesai 😀

Load Data dengan AJAX (PHP, MySQL N Javascript)

Artikel berikut adalah artikel yang akan menjelaskan tentang cara mendapatkan data dari database MySQL dengan menggunakan PHP dan Javascript yang memanfaatkan Object XMLHttpRequest. Agar bisa memahami program, user diasumsikan sudah memliki basic PHP, Javascript dan MySQL.

Pertama-tama, kita akan membuat database news dengan menggunakan databaseMySQL. pada database news terdapat 5 field yang berisi news_id, news_date, news_title, news_content dan news_author. berikut adalah scriptnya:

CREATE TABLE news (
news_id int(11) NOT NULL auto_increment,
news_title varchar(255) NOT NULL default ”,
news_content longtext NOT NULL,
news_author varchar(50) NOT NULL,
news_date datetime NOT NULL default ‘0000-00-00 00:00:00’,
PRIMARY KEY  (news_id)
)

langkah selanjutnya adalah anda isikan data kedalam database agar nantinya data tersebut bisa digunakan untuk load AJAX. di sini saya tidak akan menjelaskan cara menginsert/upload data dengan menggunakan AJAX, akan tetapi lebih kepada bagaimana cara mendapatkan data menggunakan AJAX (load data).

sekarang kita buat script php yang akan menghandle data pada serverside. misalkan script yang saya buat saya namakan php-ajax.php

<?

include “config.php”;
include “dbfunctions.php”;
$action = $_GET[“action”];
$id = $_GET[“id”];

if($action==”loadTitle”){
loadTitle();
}else if($action == “viewArticle”){
viewArticle($id);
}

function loadTitle(){
global $t_news;
opendb();
$query=”SELECT news_id, news_title FROM news WHERE news_date LIKE ‘”.date(“Y”).”-“.date(“m”).”%’ ORDER BY news_id DESC”;
$result = querydb($query);
while($data = mysql_fetch_array($result)){?>
&rsaquo; <a class=”content” href=”#<?=$data[‘news_id’]?>” onclick = “getData(‘php-ajax.php?action=view&id=<?=$data[‘news_id’]?>’, ‘contentDiv’)”><?=strip_tags($data[‘news_title’]);?></a><br />    <?

}
closedb();
}

function viewNewsDetail($id){
global $t_news;
opendb();
$query=”SELECT * FROM $t_news WHERE news_id=’$id'”;
$result = querydb($query);
while($data = mysql_fetch_array($result)){
echo $data[‘news_date’] ?><br>
<h3><?=$data[‘news_title’]?></h3><br><a id=”<?=$data[‘news_id’]?>”>
Oleh: <?=$data[‘news_author’]?><br>
<p align=”justify”><?=$data[‘news_content’]?></p><br>
<?
}
viewLatestNews();
closedb();
}

?>

config.php

<?
//    config.php
if(ereg(“config.php”, $PHP_SELF)){
header(“Location: index.php”);
die;
}

//konfigurasi db
$host = “localhost”;
$dbname    = “news”;
$user = “xxxx”;
$pass = “xxx”;

?>

dbfunctions.php

<?php
if(ereg(“dbfunctions.php”, $PHP_SELF)){
header(“Location: index.php”);
die;
}
function opendb(){
global $host, $user, $pass, $dbname, $dbconnect;
$dbconnect = mysql_connect($host, $user, $pass) or die(“Gagal membuka Database: “.mysql_error());
$dbselect = mysql_select_db($dbname);
}
function closedb(){
global $dbconnect;
mysql_close($dbconnect);
}
function querydb($query){
$result = mysql_query($query) or die(“Gagal melakukan query = $query”.mysql_error());
return $result;
}

?>

selanjutnya adalah membuat script php yang berisi script yang akan mengambil data dengan menggunakan object XMLHttpRequest

index.php

<html>
<head>
<title>Ajax at work</title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css”>
<script language = “javascript”>
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
} else{
alert(“Browser tidak mendukung XMLHttpRequestObject”);
}

function getData(dataSource, divID){
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
try{
XMLHttpRequestObject.open(“GET”, dataSource);
}catch(err){
alert(err.description);
}
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 &&    XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}

</script>
</head>
<body onLoad=”getData(‘/ajax/php-function.php?action=viewMainHeadline’, ‘headlineDiv’)”>
<table width=”80%” align=”center” class=”normal” border=”1″ cellpadding=”10″ cellspacing=”0″>
<tr>
<td colspan=”2″ height=”50px”></td>
</tr>
<tr>
<td valign=”top” width=”20%”><H1>Fetching data with Ajax</H1>
<div id=”headlineDiv”>Link</div>
</td>
<td valign=”top”  width=”80%”><div id=”contentDiv”>
<h1>The fetched data will go here.</h1>
</div></td>
</tr>
</table>
</body>
</html>

terakhir, adalah membuat script untuk di load di script index.php (inget, kan kita manggil file php-function.php saat onload).

php-function.php

<?
include “config.php”;
include “dbfunctions.php”;
$action = $_GET[“action”];
$id = $_GET[“id”];
$keyword = trim($_GET[“q”]);

if($action==”search” && !empty($keyword)){
searchResult($keyword);
}else if($action == “view”){
viewNewsDetail($id);
}else if($action == “viewMainHeadline”){
viewMarqueeHeadLine();
}else{
viewHeadLine();
}

function viewNewsDetail($id){
global $t_news;
opendb();
$query=”SELECT * FROM $t_news WHERE news_id=’$id'”;
$result = querydb($query);
while($data = mysql_fetch_array($result)){

echo getDateFormat($data[‘news_date’])?><br>
<h3><?=$data[‘news_title’]?></h3><br><a id=”<?=$data[‘news_id’]?>”>
Oleh: <?=$data[‘news_author’]?><br>
<img src=”<?=$data[‘news_image’]?>”><br><p align=”justify”><?=$data[‘news_content’]?></p><br><script language=”javascript”>document.title = “‘<?=$data[‘news_title’]?>'”;</script>
<?
}

closedb();
}

function viewHeadLine(){
global $t_news;
opendb();
$query=”SELECT * FROM $t_news ORDER BY news_id DESC LIMIT 0, 10″;
$result = querydb($query);
while($data = mysql_fetch_array($result)){?>
<span class=”h3-title”>&raquo; <?=$data[‘news_title’]?></span><br><?=getDateFormat($data[‘news_date’])?> | <?=$data[‘news_author’]?><br /><br />
<a class=”content” href=”javascript:void(0)” onclick=”getData(‘/ajax/php-function.php?action=view&id=<?=$data[‘news_id’]?>’, ‘contentDiv’);document.title='<?=$data[‘news_title’]?>'”><?=strip_tags(substrWord($data[‘news_content’], 0, 50)).” …”;?></a><br><br />
<?     }
closedb();   ?>
<div align=”right”><a class=”content” href=”<?=$PHP_SELF?>?action=view_all”>… More &raquo;</a><div>
<br>
<?
}

function viewMarqueeHeadLine($sep, $viewBy){
global $t_news;
opendb();
$query=”SELECT news_id, news_title FROM news WHERE news_date LIKE ‘”.date(“Y”).”-“.date(“m”).”%’ ORDER BY news_id DESC”;
$result = querydb($query);
//echo “<ul style=’cellpadding:0px;cellspacing:0px’ type=’square’>”;
while($data = mysql_fetch_array($result)){?>
&rsaquo; <a class=”content” href=”#<?=$data[‘news_id’]?>” onclick = “getData(‘/ajax/php-function.php?action=view&id=<?=$data[‘news_id’]?>’, ‘contentDiv’)”><?=strip_tags($data[‘news_title’]);?></a><br /><? //$sep?>
<?     }
//echo “</ul>”;
closedb();

}
function searchResult($key){
global $t_news;
opendb();
$query=”SELECT * FROM news WHERE news_title LIKE ‘%”.$key.”%'”;
$result = querydb($query);

if(mysql_num_rows($result)== 0){
?><h3>No Data Found For “<?=$key?>” </h3><?
}else{
echo “<h3>Search Result For ‘”.$key.”‘: </h3><br />”;
while($data = mysql_fetch_array($result)){?>
&rsaquo; <a class=”content” href=”javascript:void(0)” onclick = “getData(‘/ajax/php-function.php?action=view&id=<?=$data[‘news_id’]?>’, ‘contentDiv’);document.title='<?=$data[‘news_title’]?>'”><?=strip_tags($data[‘news_title’]);?></a><br /><? //$sep?>
<?     }
}
closedb();
}

function getDateFormat($date){
$bln = array(“Januari”, “Februari”, “Maret”, “April”, “Mei”, “Juni”, “Juli”, “Agustus”, “September”, “Oktober”, “Nopember”, “Desember”);
$yy = substr($date, 0, 4);
$mm = substr($date, 5, -3);
$dd = substr($date, 8, -9);
$time = substr($date, 10);

$df = $dd.” “.$bln[$mm-1].” “.$yy.” – “.$time;
return $df;
}

function substrWord($string, $start=false, $end=false, $delimiter=false){
$result = ”;
$delimiter = ((!$delimiter)?chr(32):$delimiter);
$tmp = explode($delimiter, $string); //convert string to array
$end = (($end<0)?(count($tmp)+($end-1)):$end); //if minus, re-calc them
foreach ($tmp as $current => $value){
if (($current >= $start) &&    ($current <= $end)) $result.=$value.$delimiter;
}
return substr($result, 0, strlen($delimiter)*-1);
}

?>

selesai. anda dapat mencoba script diatas..

peace 😀

Maen-maen dengan AJAX Yuk!!!

And XML, atau disingkat Ajax, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer,
melakukan pertukaran data dengan server di belakang layar, sehingga
halaman web tidak harus dibaca ulang secara keseluruhan setiap kali
seorang pengguna melakukan perubahan. Hal ini akan meningkatkan
interaktivitas, kecepatan, dan usability — sumber Wikipedia

Seperti definisi yang telah dijelaskan di wikipedia, AJAX merupakn gabungan client dan server scripting. AJAX bertujuan untuk meningkatkan interaktifitas, kecepatan dan usabiliti web scripting tanpa harus meload halaman secara secara keseluruhan. ajax menggunakan client side scripting semisal javascript dan server side scripting ex: php dengan memanfaatkan objek XMLHTTP Request.

berikut adalah contoh script yang akan digunakan untuk meload artikel menggunakan ajax. Dalam hal ini script yang digunakan adalah Javacsript dan PHP.

file index.php

<html>
<head>
<title>Ajax at work</title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css”>
<script language = “javascript”>
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
} else{
alert(“Browser tidak mendukung XMLHttpRequestObject”);
}

function getData(dataSource, divID){
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
try{
XMLHttpRequestObject.open(“GET”, dataSource);
}catch(err){
alert(err.description);
}
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 &&    XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}

</script>
</head>
<body onLoad=”getData(‘/ajax/php-function.php?action=viewMainHeadline’, ‘headlineDiv’)”>
<table width=”80%” align=”center” class=”normal” border=”1″ cellpadding=”10″ cellspacing=”0″>
<tr>
<td valign=”top” width=”20%”><H1>Fetching data with Ajax</H1>
<div id=”headlineDiv”>Link</div>
</td>
<td valign=”top”  width=”80%”><div id=”contentDiv”>
<p>The fetched data will go here.</p>
</div></td>
</tr>
</table>

</body>
</html>

file php-function.php

<?php

$action = $_GET[“action”];
$id = $_GET[“id”];
if($action == “view”){
viewNewsDetail($id);
}else if($action == “viewMainHeadline”){
viewMainHeadLine();
}

function viewMainHeadLine(){
$host = “localhost”;
$dbname = “news”;
$user = “guest”;
$pass = “guest”;

$dbconnect = mysql_connect($host, $user, $pass) or die(“Gagal membuka Database: “.mysql_error());
$dbselect = mysql_select_db($dbname);
$query=”SELECT news_id, news_title FROM news WHERE news_date LIKE ‘”.date(“Y”).”-“.date(“m”).”%’ ORDER BY news_id DESC”;
$result = mysql_query($query);
while($data = mysql_fetch_array($result)){?>
&rsaquo; <a class=”content” href=”#<?=$data[‘news_id’]?>” onclick = “getData(‘/ajax/php-function.php?action=view&id=<?=$data[‘news_id’]?>’, ‘contentDiv’)”><?=strip_tags($data[‘news_title’]);?></a><br /><? //$sep?>
<?     }

mysql_close($dbconnect);
}

function viewNewsDetail($id){
$host = “localhost”;
$dbname = “news”;
$user = “guest”;
$pass = “guest”;

$dbconnect = mysql_connect($host, $user, $pass) or die(“Gagal membuka Database: “.mysql_error());
$dbselect = mysql_select_db($dbname);
$query=”SELECT * FROM $t_news WHERE news_id=’$id'”;
$result = querydb($query);
while($data = mysql_fetch_array($result)){
?>

<?=getDateFormat($data[‘news_date’])?><br>
<h1><?=$data[‘news_title’]?></h1><br><a id=”<?=$data[‘news_id’]?>”>
Oleh: <?=$data[‘news_author’]?><br>
<p align=”justify”><?=$data[‘news_content’]?></p><br>
<?
}
mysql_close($dbconnect);
}

?>

database mysql dengan nama “news”, lokasi di server local, dengan field news_id, news_title, news_content, news_date, dan news_author;

penjelasan:
script <body onLoad=”getData(‘/ajax/php-function.php?action=viewMainHeadline’, ‘headlineDiv’)”> pada index.php, akan memanggil php-function.php untuk mengirimkan url berita dan data pada function viewMainHeadLine() akan ditampilkan. kemudian url yang sudah diload ketika di klik yan g berasal dari viewMainHeadLine()akan memanggil function viewNewsDetail dengan filter $id. selajutnya oleh javascript akan di proses dan ditampilkan di tag contentDiv.