<?php$url = "http://subdomain.domain.com/sample/url"; $host = parse_url($url, PHP_URL_HOST);$host = array_reverse(explode('.', $host));$host = $host[1].'.'.$host[0];echo "$host";?>
Wednesday, May 16, 2012
How to get the main domain from the URL
This post is just a code snippet on how to get the main domain from the URL string. Enjoy and happy coding!!
Wednesday, April 25, 2012
How to setup cache pages in PHP
This post will teach you how to setup caching in your pages. This is recommended to setup if your pages is not that dynamic enough that changes frequently.
First, you need to create as to where you will put all your cache files, don't put it on the same directory where your files are in coz it might overwrite your pages. On this post, I created cache directory.
We can also set the cache expiry time by validating the time it was created. To check, we used time() and filemtime() functionality.
To make it work, we will put condition to check if the we have cache file and that it didn't expired yet. If okay, we will just include the file then display the contents. If not, it will capture the page then write to a file.
Please see below for the implementation. Happy coding!!
First, you need to create as to where you will put all your cache files, don't put it on the same directory where your files are in coz it might overwrite your pages. On this post, I created cache directory.
We can also set the cache expiry time by validating the time it was created. To check, we used time() and filemtime() functionality.
To make it work, we will put condition to check if the we have cache file and that it didn't expired yet. If okay, we will just include the file then display the contents. If not, it will capture the page then write to a file.
Please see below for the implementation. Happy coding!!
<?php
$cachefile = "cache/yourpage.html";
$cachetime = 30 * 60; // 30 minutes
// validate and check for existing cache file
if (file_exists($cachefile) && (time() - $cachetime < filemtime($cachefile))) {
include($cachefile);
exit;
}
// start the output stream
ob_start();
?>
<html>your page here to put into cache</html>
<?php
// save the contents to cache file
$fp = fopen($cachefile, 'w');
fwrite($fp, ob_get_contents());
fclose($fp);
// end the output stream
ob_end_flush();?>
Friday, March 9, 2012
Setting up dynamic sub domain via httpd.conf or htaccess
This post will teach you how to setup dynamic sub domain on your server.
We actually have 2 options on how to do it, maybe 3 which uses cpanel if allowed on your account.
Anyway, what I'll be discussing is the setup via httpd.conf or via .htaccess file.
To do this via httpd.conf, you only need to create a virtualhost with ServerAlias as below.
To do this via .htaccess, create the htaccess file on the www/ directory where your subdomains will be placed.
Hope this helps. Thanks!
We actually have 2 options on how to do it, maybe 3 which uses cpanel if allowed on your account.
Anyway, what I'll be discussing is the setup via httpd.conf or via .htaccess file.
To do this via httpd.conf, you only need to create a virtualhost with ServerAlias as below.
<VirtualHost>
DocumentRoot /www/subdomain
ServerName www.domain.tld
ServerAlias *.domain.tld
</VirtualHost>
To do this via .htaccess, create the htaccess file on the www/ directory where your subdomains will be placed.
RewriteCond %{ENV:REDIRECT_SUBDOMAIN} =""
RewriteCond %{HTTP_HOST} ^([a-z0-9][-a-z0-9]+)\.domain\.com\.?(:80)?$ [NC]
RewriteCond %{DOCUMENT_ROOT}/%1 -d
RewriteRule ^(.*) %1/$1 [E=SUBDOMAIN:%1,L]
RewriteRule ^ - [E=SUBDOMAIN:%{ENV:REDIRECT_SUBDOMAIN},L]
Hope this helps. Thanks!
Sunday, January 8, 2012
Creating dynamic progress bar in HTML
This post will teach you how to create a dynamic progress bar in HTML using jQuery and CSS.
First, you need to have an HTML, please see below on how I do it.
- Create 3 divs: progressWrap, progressBar, and progressNum
- #progressWrap : this will be the container of the progressbar, take note of the width coz this will be the basis to compute for the percentage.
- #progressBar : this will be the actual progress bar
- #progressNum : this will be the percentage
For the benefit of this post, I set the #progressBar width to 50px which is 25% of #progressWrap width = 200px
Next is to set our progress bar dynamic using jQuery. Please see below.
The formula for the percentage is based on the width of the container in CSS. The width is divided by 100 and will be multiplied to the percentage value to get the width of the progress bar.
To see the working script, please see below.
First, you need to have an HTML, please see below on how I do it.
- Create 3 divs: progressWrap, progressBar, and progressNum
- #progressWrap : this will be the container of the progressbar, take note of the width coz this will be the basis to compute for the percentage.
- #progressBar : this will be the actual progress bar
- #progressNum : this will be the percentage
For the benefit of this post, I set the #progressBar width to 50px which is 25% of #progressWrap width = 200px
<html>
<head>
<title>Progress Bar</title>
<style type="text/css">
#progressWrap
{
margin: 0px 0px 0px 5px;
background: #FFF;
height: 11px;
width: 200px;
}
#progressWrap #progressBar
{
height: 11px;
position:absolute;
background-color: #000;
}
#progressWrap #progressNum {
text-align:center;
width:100%;
color:#515151;
font-size:9px;
font-weight:bold;
}
</style>
</head>
<body>
<div id="progressWrap">
<div id="progressBar" style="width:50px"></div>
<div id="progressNum">25%</div>
</div>
</body>
</html>
Next is to set our progress bar dynamic using jQuery. Please see below.
The formula for the percentage is based on the width of the container in CSS. The width is divided by 100 and will be multiplied to the percentage value to get the width of the progress bar.
<script type="text/javascript">
$(document).ready(function() {
var percent = 25;
var width = percent * parseInt($('#progressWrap').css('width')) / 100;
$('#progressNum').html(percent+'%');
$('#progressBar').css('width', width+'px');
});
</script>
To see the working script, please see below.
<html>
<head>
<title>Progress Bar</title>
<style type="text/css">
#progressWrap
{
margin: 0px 0px 0px 5px;
background: #FFF;
height: 11px;
width: 300px;
}
#progressWrap #progressBar
{
height: 11px;
position:absolute;
background-color: #000;
}
#progressWrap #progressNum {
text-align:center;
width:100%;
color:#515151;
font-size:9px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="progressWrap">
<div id="progressBar"></div>
<div id="progressNum"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
var percent = 25;
var width = percent * parseInt($('#progressWrap').css('width')) / 100;
$('#progressNum').html(percent+'%');
$('#progressBar').css('width', width+'px');
});
</script>
Thursday, January 5, 2012
File upload with style using jQuery and CSS
This post is an improved version of my previous post "How to put a style on input file type using CSS and jQuery". The improvement is due to the problem on IE sucks with security issues.
My previous post I have is basically working and will teach you how to open a dialog box and select the file you want to upload with a styled layout.
However, the problem on IE is that it doesn't accept the approach of jQuery or Javascript, that triggers the click event of the input file element that causes an error "Access is Denied" when submitted.
Good thing I was able to find a way to trick IE. Please see below on how I do it and hopefully will be able help developers.
First, we need to understand what IE's requirement are to make it work. So, basically for the file upload to work on IE, the user should have to click on the input file element without using jQuery or Javascript to do it for us.
Given the requirement of IE and the style to put in, the best solution for me is to use CSS opacity and z-index.
In logic, what you need to do is #1. set your input file element on top of your styled textbox using z-index, this is for user to be able to click the file input element. #2. set the input file element as invisible using the opacity equal to zero "0", this is to hide the input file element and the styled textbox will be visible instead. That way, we can satisfy IE and at the same time, be able to style the file upload.
As for the sample script I made, please see below.
The sample compose of 2 scripts: index.html and upload.php
index.php
upload.php
My previous post I have is basically working and will teach you how to open a dialog box and select the file you want to upload with a styled layout.
However, the problem on IE is that it doesn't accept the approach of jQuery or Javascript, that triggers the click event of the input file element that causes an error "Access is Denied" when submitted.
Good thing I was able to find a way to trick IE. Please see below on how I do it and hopefully will be able help developers.
First, we need to understand what IE's requirement are to make it work. So, basically for the file upload to work on IE, the user should have to click on the input file element without using jQuery or Javascript to do it for us.
Given the requirement of IE and the style to put in, the best solution for me is to use CSS opacity and z-index.
In logic, what you need to do is #1. set your input file element on top of your styled textbox using z-index, this is for user to be able to click the file input element. #2. set the input file element as invisible using the opacity equal to zero "0", this is to hide the input file element and the styled textbox will be visible instead. That way, we can satisfy IE and at the same time, be able to style the file upload.
As for the sample script I made, please see below.
The sample compose of 2 scripts: index.html and upload.php
index.php
<html>
<head>
<title>File Upload</title>
<style type="text/css">
div.inputContainer {
position: relative;
}
div.inputStyled {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.inputHide {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#docufile').change(function() {
var vals = $(this).val();
val = vals.length ? vals.split('\\').pop() : '';
$('#document').val(val);
});
$('#btnSubmit').click(function() {
$('#frmAdd').submit();
});
});
</script>
</head>
<body>
<form id="frmAdd" name="frmAdd" action="upload.php" method="post" enctype="multipart/form-data" encoding="multipart/form-data">
<div class="inputContainer">
<div class="inputStyled">
<input name="document" id="document" type="text">
<input name="button" type="button">
</div>
<input type="file" class="inputHide" name="docufile" id="docufile"/>
</div>
<input type="submit" value="submit" id="btnSubmit"/>
</form>
</body>
</html>
upload.php
<?php
$docufile = '';
if (@$_FILES['docufile']['tmp_name']) {
$docufile = upload_file($_FILES['docufile']);
}
echo $docufile;
function upload_file($docu=null) {
$upload_dir = "files/";
$docu_file='';
if (!$docu['error'] == 0) return '';
if (!@is_uploaded_file($docu['tmp_name'])) return '';
$filename = preg_replace("/\s+/", "", $docu['name']);
if (!file_exists($upload_dir.$filename)) {
$docu_file = $filename;
} else {
$rand = 1;
while(file_exists($upload_dir.$rand."-".$filename)) {
$rand ++;
}
$docu_file = $rand."-".$filename;
}
$upload_file = $upload_dir.$docu_file;
if (!@move_uploaded_file($docu['tmp_name'], $upload_file)) {
return '';
}
return $docu_file;
}
?>
Quote for the day:If you want to reach your potential, you need to add a strong work ethic to your talent. If you want something out of your day, you must put something in it. Your talent is what God put in before you were born. Your skills are what you put in yesterday. Commitment is what you just put in today in order to make today your masterpiece and make tomorrow a success. - john m.
Subscribe to:
Posts (Atom)