Joomla 
Wordpress 
Linux openSUSE/Ubuntu
Windows XP/Vista/7
CSS / HTML 
Javascript 
PHP 
E-Books 
C / C++ 
CMS 
Database 
Flash 
Hacking 
Java 
Networking 
Perl 
Server 
.NET 
Wave 
Flying 
After 
Muddy 
Matron 
Inclear 
Jeans 
Nosty 
file : index.html => halaman depan dimana terdapat form untuk upload gambar (jpg/gif/png) dengan ajax yang di panggil melalui iframe yang akan digunakan untuk banner.
Setelah upload berhasil akan muncul form untuk pengisian teks Heading dan Subheading.
Setelah upload berhasil akan muncul form untuk pengisian teks Heading dan Subheading.
<!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>Banner Creation Tool</title>
<style>
.picture_preview {
position:relative;
float:left;
font-family:Arial, Helvetica, sans-serif;
}
.picture_preview .txt_heading_prev {
position:absolute;
font-size:25px; top:30px;
right:40px;
}
.picture_preview .txt_subheading_prev {
position:absolute;
font-size:15px; top:70px;
right:40px;
}
.msg {
background-color:#FFC; color:#F00;
}
</style>
<script src="/js.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<iframe name="upload_iframe" id="upload_iframe" style="display:none;"></iframe>
<form name="pictureForm" method="post" autocomplete="off" enctype="multipart/form-data">
<table border="0">
<tr>
<td>Select Image</td>
<td>:</td>
<td><input type="file" name="picture" id="picture" onChange="return ajaxFileUpload(this);" /></td>
</tr>
</form>
<div id="msg"></div>
<div id="txt_box" style="display:none">
<table border="0">
<tr>
<td>Heading</td>
<td>:</td>
<td><input type="text" name="heading_txt" id="heading_txt" onkeyup="previewBanner()" /></td>
</tr>
<tr>
<td>SubHeading</td>
<td>:</td>
<td><input type="text" name="subheading_txt" id="subheading_txt" onkeyup="previewBanner()" /></td>
</tr>
<tr>
<td colspan="3" scope="row"><hr /></td>
</tr>
<tr>
<td><input type="button" value="Cancel" onclick="document.getElementById('msg').innerHTML = '<img src=images/loader-bar.gif />'; doAjaxCall('banner.php?do=cancel&img='+document.getElementById('picture').value+'&heading='+document.getElementById('heading_txt').value+'&subheading='+document.getElementById('subheading_txt').value+'&sid='+Math.random(), 'msg'); resetDisplay();" /></td>
<td> </td>
<td><input type="button" value="Submit" onclick="document.getElementById('msg').innerHTML = '<img src=images/loader-bar.gif />'; doAjaxCall('banner.php?do=create&img='+document.getElementById('picture').value+'&heading='+document.getElementById('heading_txt').value+'&subheading='+document.getElementById('subheading_txt').value+'&sid='+Math.random(), 'msg'); return true;" /></td>
</tr>
</table>
</div>
<div id="picture_preview"></div>
</body>
</html>
file : js.js => fungsi-fungsi javascript
function doAjaxCall(the_request, targeTo) {
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
if (request) {
request.open("GET", the_request);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(targeTo).innerHTML = request.responseText;
}
}
request.send(null);
} else {
alert("Sorry, Your browser not support ajax.");
}
}
function ajaxFileUpload(upload_field) {
// Checking file type
var re_text = /\.jpg|\.gif|\.png|\.jpeg/i;
var filename = upload_field.value;
if (filename.search(re_text) == -1) {
alert("Only jpg/gif/png Are Allowed");
upload_field.form.reset();
return false;
}
upload_field.form.action = 'upload.php';
upload_field.form.target = 'upload_iframe';
upload_field.form.submit();
upload_field.form.action = '';
upload_field.form.target = '';
return true;
}
function previewBanner(evt) {
document.getElementById('txt_heading_prev').innerHTML=document.getElementById('heading_txt').value;
document.getElementById('txt_subheading_prev').innerHTML=document.getElementById('subheading_txt').value;
}
function resetDisplay() {
document.getElementById('heading_txt').value='';
document.getElementById('subheading_txt').value='';
document.getElementById('picture').value='';
document.getElementById('txt_box').style.display='none';
document.getElementById('picture_preview').style.display='none';
document.getElementById('picture').disabled='';
}
file : upload.php => serverside script dipanggil oleh ajax untuk upload file ke directory banners/
<?php
$full_serv_path = $_SERVER['HTTP_HOST']."". $_SERVER['REQUEST_URI'];
$preview_url = "http://".str_replace(basename($full_serv_path), "", $full_serv_path)."banners/"; // get server path for live preview
$upload_dir = str_replace(basename(__FILE__), "", __FILE__)."banners/"; // location uploaded image will saved
$filename= '';
$result = 'ERROR';
$result_msg = '';
$allowed_image = array ('image/gif', 'image/jpeg', 'image/jpg', 'image/pjpeg','image/png');
define('PICTURE_SIZE_ALLOWED', 2242880); // bytes
if (isset($_FILES['picture'])) { // file was send from browser
if ($_FILES['picture']['error'] == UPLOAD_ERR_OK) { // no error
if (in_array($_FILES['picture']['type'], $allowed_image)) {
if(filesize($_FILES['picture']['tmp_name']) <= PICTURE_SIZE_ALLOWED) { // bytes
$filename = $_FILES['picture']['name'];
move_uploaded_file($_FILES['picture']['tmp_name'], $upload_dir.$filename);
} else {
die('Picture size is to large');
}
} else {
die('Only jpg/gif/png Are Allowed');
}
} else {
die('Unknown error');
}
}
echo '<script language="JavaScript" type="text/javascript">'."\n";
if($filename != '') {
echo "window.parent.document.getElementById('picture_preview').innerHTML = '<img src=\"images/ajax-loader.gif\" border=\"0\" />';";
echo "window.parent.document.getElementById('picture_preview').innerHTML = '<img src=\'$preview_url$filename\' id=\'preview_picture_tag\' name=\'preview_picture_tag\' /><div id=\'txt_heading_prev\' class=\'txt_heading_prev\'></div><div id=\'txt_subheading_prev\' class=\'txt_subheading_prev\'></div>';";
echo "window.parent.document.getElementById('picture_preview').style.display = 'block';";
echo "window.parent.document.getElementById('txt_box').style.display = 'block';";
echo "window.parent.document.getElementById('picture').disabled='true';";
}
echo "\n".'</script>';
exit(); // do not go futher
?>
file : banner.php=> serverside script dipanggil oleh ajax untuk membuat gambar dari file yang di upload dan teks Heading dan Subheading menggunakan GD Library, serta untuk menghapus gambar bila user membatalkan pembuatan banner.
<?php
function getImgType($img) {
if(substr($img, strlen($img)-4) == ".jpg" || substr($img, strlen($img)-5) == ".jpeg")
return "jpg";
elseif(substr($img, strlen($img)-4) == ".gif")
return "gif";
elseif(substr($img, strlen($img)-4) == ".png")
return "png";
else
return false;
}
if($_GET['do'] == "create") { // create banner
$heading = $_GET['heading'];
$subheading = $_GET['subheading'];
$imgname = "banners/".$_GET['img'];
$img_type = getImgType($_GET['img']);
if($img_type== "jpg") {
$im = imagecreatefromjpeg($imgname); /* Attempt to open */
} elseif($img_type == "gif") {
$im = imagecreatefromgif($imgname); /* Attempt to open */
} elseif($img_type == "png") {
$im = imagecreatefrompng($imgname); /* Attempt to open */
} else {
die("Only jpg/gif/png Are Allowed");
}
$font = 'arial.TTF';
$_h = 0;
$bg = imagecolorallocate($im, 255, 255, 255);
$font_color = imagecolorallocate($im, 0, 0, 0);
$split_heading = split("[\n]+", $heading);
$split_subheading = split("[\n]+", $subheading);
$w = imagesx($im);
foreach($split_heading as $key=>$val) {
$_b = imagettfbbox(18, 0, $font, $val);
$_w = abs($_b[2]-$_b[0]);
$_x = $w-$_w;
$_h = abs($_b[5]-$_b[3]);
$_h += $_h;
imagettftext($im, 18, 0, $_x-40, 55, $font_color, $font, $val);
}
foreach($split_subheading as $key=>$val) {
$_b = imagettfbbox(11, 0, $font, $val);
$_w = abs($_b[2]-$_b[0]);
$_x = $w-$_w;
$_h = abs($_b[5]-$_b[3]);
$_h += $_h;
imagettftext($im, 11, 0, $_x-40, 83, $font_color, $font, $val);
}
if($img_type == "jpg") {
$save_banner = imagejpeg($im, $imgname); /* Attempt to save */
} elseif($img_type == "gif") {
$save_banner = imagegif($im, $imgname); /* Attempt to save */
} elseif($img_type == "png") {
$save_banner = imagepng($im, $imgname); /* Attempt to save */
} else {
die("Only jpg/gif/png Are Allowed");
}
if($save_banner) {
print "Banner Created";
} else {
print "Failed To Create Banner";
}
} elseif ($_GET['do'] == "cancel") { // cancel creating banner
$imgname = "banners/".$_GET['img'];
if(unlink($imgname)) { //remove uploaded image
echo "Image Removed";
} else {
print "Error Removing Image";
}
}
?>
Silahkan anda berkreasi atau mengembangkan aplikasi ini, misalkan dengan menambahkan option untuk warna/besar/align untuk heading dan subheading. Tergantung kebutuhan. :)
