Last few days I have been working on labs.9lessons to connecting Facebook Graph API access token system, it’s very interesting. This post I had presented in easy way to connect and read the Facebook home timeline with PHP and Jquery. Explained how to store facebook token and user id hope you like it. Thanks !
Download Script
Live Demo
Database
Sample database table here storing facebook access token key and profile id. MySQL users table columns uid, uname, passcode, facebook_id and facebook_access_tokenCREATE TABLE users
(
uid INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) UNIQUE,
passcode VARCHAR(50),
facebook_id VARCHAR(100),
facebook_access_token TEXT
);
Demo ScreencastingConnecting Facebook
You have to create a facebook application. It will provide application_id and application_secret. While clicking Add Facebook anchor tag URL requesting Facebook Graph API with contains your web project redirection URL.<a href="https://graph.facebook.com/oauth/authorize?type=user_agent&client_id=APP_ID
&redirect_uri=http://yourwebsite.com/fbaccess.php
&scope=user_photos,user_videos,email,user_birthday,
offline_access,publish_stream,status_update">
Add Facebook
</a>
Fbaccess.php
Redirecting file contains PHP code. Here you have to include facebook.php (Facebook library file) to getting the access token values. Updating users table where username=$user_session (login user).<?php
# We require the library
require("facebook.php");
require("db.php");
# Creating the facebook object
$facebook = new Facebook(array(
'appId' => 'APP_ID',
'secret' => 'APP_SECRET_ID',
'cookie' => true
));
# Let's see if we have an active session
$session = $facebook->getSession();
if(!empty($session))
{
try
{
$facebook_id = $session['uid'];
$facebook_access_token=$session['access_token'];
// Updating Facebook values into Users table
mysql_query("UPDATE users SET facebook_uid='$facebook_id', facebook_access_token='$facebook_access_token' WHERE username='$user_session'");
header("Location: http://yourwebsite.com/home.php");
}
catch (Exception $e){}
}
else
{
header("Location: http://yourwebsite.com/home.php");
}
Home.php
Contains HTML, Javascript and PHP code. Here using .getJSON to requesting Facebook Graph API home timeline with access_token and app_id.<?php
include('db.php');
$sql=mysql_query("select facebook_id,facebook_access_token from users where username='$user_session'");
$row=mysql_fetch_array($sql);
$facebook_id=$row['facebook_id'];
$facebook_access_token=$row['facebook_access_token'];
?>
// Javascript Code-------------------------------------
<script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".facebook").click(function()
{
var URL = 'https://graph.facebook.com/<?php echo $facebook_id; ?>/home?access_token=<?php echo $facebook_token; ?>&expires_in=0&callback=?';
$.getJSON(URL,function(data)
{
$.each(data.data, function(i,data)
{
var picture = 'http://graph.facebook.com/'+data.from.id+'/picture';
// If no message
if(data.message)
{
var msg=data.message;
}
else
{
var msg=data.name;
}
var div_data ="<div class='fb_status'><img src="+picture+" class='fb_image'/><a href='' ><b>"+data.from.name+"</b></a> "+msg+"</div>";
$(div_data).appendTo("#facebookdata");});
});
</script>
// HTML Code---------------------------------------------
<?php
if($facebook_uid)
{
?>
<a href="#" class="facebook" >Connected</a>
<?php
} else {
?>
<a href="https://graph.facebook.com/oauth/authorize?type=user_agent&client_id=APP_ID
&redirect_uri=http://yourwebsite.com/fbaccess.php
&scope=user_photos,user_videos,email,user_birthday, offline_access,publish_stream,status_update">
Add Facebook
</a>
<?php
}
?>
<div id='facebookdata'></div>
CSS Code.fb_status
{
min-height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE
}
.fb_status a
{
color:#3cf;
text-decoration:none
}
.fb_status a:hover{
color:#3cf;
text-decoration:underline
}
.fb_image{
float:left;
margin-right:14px;
width:50px;
height:50px;
padding:3px;
}
db.php
PHP database configuration file<?php
$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
TweetLooking for Google style Captcha (Human Verification Code), or may be the popular reCaptcha style captcha script for PHP projects, then this post is for you. Here we have explained how to implement CAPTCHA using the cool-php-captcha script for forms. Hence use it and add security to your forms, saving fake registration from automated bots.
We have here both GOOGLE and reCaptcha style CAPTCHA script in php. Both the scripts are almost same, just the CSS styling is different.
Google Style
index.php
Contains HTML code for form, and the Captcha Image source - captcha.php ( File available in download script)
<form action="captcha_check.php" method="POST">
<div>The text displayed below is for security check, you need to enter it correctly .</div>
<img src="captcha.php" id="captcha" />
<a href="#" onclick="
document.getElementById('captcha').src='captcha.php?'+Math.random();
document.getElementById('captcha-form').focus();"
id="change-image">Not readable? Change text.</a>
</br;>
<div>Enter the text displayed above:</div>
<input class="input" type="text" value="" name="captcha">
<input type="submit" name="commit" value="SUBMIT"/>
</form>
captcha_check.php
Contains the PHP code
<?php
session_start();
if (!empty($_REQUEST['captcha']))
{
if (empty($_SESSION["captcha"]) || trim(strtolower($_REQUEST['captcha'])) != $_SESSION["captcha"])
{
header("location:index.php?attempt=fail");
//Error in case wrong word is entered
}
else
{
if($_SERVER["REQUEST_METHOD"] == "POST")
{
header("location:home.php");
// Home.php is the destination page
}
}
unset($_SESSION["captcha"]);
}
else
{
header("location:index.php?attempt=null");
//Error in case no word is entered
}
?>
reCaptcha Style
The whole code is same for this too, just reCaptcha like CSS styling is added. Thereby making it look like reCaptcha style.
Both the scripts are almost same, with minor changes, download the one which best suits your requirements.
For ant query, do let us know through your comments.We love hearing from you.( We used cool-php-captcha source code for this script.)
In this post I will show you how to design blog template frame with CSS and HTML step by step . CSS helps you to design better and flexible webpage layouts. This is very basic CSS + HTML tutorial, CSS just awesome it adds flavor to the web page.
Step 1
Web layout divided into four horizontal parts are Hearder, Nav, Main and Footer. Here Container is the parent div.HTML Code
<div id="container"><div id="header">1 Header</div>
<div id="nav">2 Nav</div>
<div id="main">3 Main</div>
<div id="footer">4 Footer</div></div>
CSS Code
margin:0 auto; centers a div#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
height:30px;
}
#main
{
overflow:auto;
}
#footer
{
height:40px;
}Step 2
main (content part) div dividing into two vertical parts are main_left(article part) and main_right(sidebar part)<div id="main"><div id="main_left">Article</div>
<div id="main_right">Sidebar</div>
</div>
CSS code#main
{
overflow:auto;
}
#main_left
{
float:left;
width:600px;
}
#main_right
{
float:left;
width:300px;
}Step 3
Now working with an unorder list <ul> tag.<div id="nav"><ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul></div>
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
Home Page
This page should be with multiple article title links with little description, so that reader can quickly find more information. W3C standards specifying <h1> tag use for top-level heading.
Article Page
Here article title is the most important and top level, so title should be in <h1> tag.Final Code
Take a look at this demo link
HTML Code<div id="container"><div id="header">
Header
</div><div id="nav">
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul></div>
<div id="main">
<div id="main_left">Article</div>
<div id="main_right">Sidebar</div></div>
<div id="footer">Footer</div>
</div>
CSS Code<style type="text/css">
#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
#main
{
overflow:auto;
margin-top:3px;
}
#main_left
{
float:left;
width:600px;
min-height:400px;
}
#main_right
{
float:left;
width:300px;
min-height:400px;
}
#footer
{
height:40px;
}
</style>
I have always wanted to write an article like this, because I think about it all the time - what 10 things would I deem the most important to pass on to someone else? Well, after literally years of thought I think I have come up with the best list that I can think of. So, without further a do, let's get to it.
1) Go OOP
If you have not yet entered the realm of Object Oriented Programming, then you are at a disadvantage, and you are falling behind fast.
OOP is essentially a method of programming with the use of classes, or Objects, which tie like things together, remove the need for repetition of code and perform the basic tasks of production very simply. Objects are essentially classes that collect a bunch of functions together and wrap them in a wrapper that can be reused over and over again without the need to rewrite functionality or procedures every time you need to do something.
Procedural Programming works by following a routine from the top to the bottom of each page as the server reads every file on your server. With OOP, there could be one or two objects being instantiated, which, in turn could instantiate a few, a hundred or a thousand other objects which could all perform certain tasks depending on variables passed into the objects. OOP is faster, simpler, easier to debug, uses less server resources, less code, is faster loading and more logical to work with once you figure out the basic principles. Go OOP - It changed my development style forever.
2) Stay Away from Anything Ending With _once()
We all know that include() simply gives us a warning if it fails, while require() kills the script with a fatal error when it fails. What we don't forget is that include_once() and require_once() is extremely hard on server resources. There is nothing we can do about it, it's how PHP is set up. Just remember that these things kill your server resources, specially on a huge framework, and if you plan your code properly you won't even need it anyway.
3) Develop With Error Reporting On
The very first thing you do when starting a new project is to turn error reporting to E_ALL, and you should only turn it off ten seconds before going to production mode. I do this with every project that I build and there is nothing better than running a project in full production mode and not even getting one error. Besides that, with error reporting on, you pick up any small errors that will eventually grow up to bite you in the... well, you get my point.
4) Use A Framework If You Need One
Ok, so Rasmus Lerdorf says you shouldn't use a framework because he could quite conclusively prove that a framework is much slower than normal PHP code when it came to printing a simple "Hello World" application. Two things to mention here though: you are not Rasmus Lerdorf and I bet you won't be building a "Hello World" application every time you program something. Frameworks that help you do the tedious things can help, although you will have to learn how the frameworks function first in order to make things simple, but that's the only real trade-off. Plus you stand less chance of writing bad code when someone else has written most of it for you, but let's pretend I didn't say that.
5) Use PHP's Inbuilt Functions
Ok, you want to count the amount of keys in an array? You can loop through the array and simply increment a value for each iteration, right? Or you can just use the built in PHP function count(), which does just what it should. PHP has many built-in functions that can do what you need them to, so check out the manual to make sure you are doing it in the best way possible.
6) Protect Your Database
The best and safest way is to use mysql_real_escape_string() for all database before it is added to the database. This function makes all strings safe in terms of quotes and other functions that can harm your database or contain malicious code, so use it to be sure you have taken the first step against protection of your data. Another thing you can do is validate all POST and GET strings, never use $_REQUEST, and make sure all form submitted data is of the right type and value before adding it to a database query.
7) Use POST Not GET
Ok, this isn't always possible, but when its really not necessary, don't use GET, use POST. The reason is simple - GET is simple to emulate, all I need to do is add something to my address bar and I can hack your project. Obviously GET is the easy way to do pagination and permalinks, but when using form submission especially, stay with POST, it's safer.
8) Draw Before You Code
A good practice to get into is to wireframe your projects, even if you are just scribbling a few notes on a piece of paper. It is very important to actually give the mechanics of you application some thought before sitting down to start coding, because in the process of planning it you will actually iron out the difficulties in your head and avoid the major headache that comes with the facepalm when you realize that everything you just did is either wrong, not needed, or just silly.
9) Understand Your Project
An artist cannot draw something that he has not seen before. A singer cannot sing a song that he has not heard before. You cannot code a project that you do not fully understand. If you do not understand exactly what it needs to do, and how it needs to it, you cannot build it.
10) Code Code Code
If I could get one thing through to anyone reading this, this is it. You cannot become a good developer by reading. You cannot become a good developer by watching someone develop. The one and only tried and trusted method, is to actually write code. But - and here is the trick - build real things! Do not go and code something that you have no interest in, or will never use. Build what you like, and you will be excited and interested by it, and you will learn. Then, make it awesome, build upon it, and make it better.
Recommended Microsoft Platform Books by Mr. Risman Adnan
Posted by adisembiring on January 30, 2012Language Knowledge:
Runtime and Debugging Knowledge:
Object Oriented Knowledge
Framework Knowledge
Sharepoint Fundamentals : For Sharepoint Developers
BizTalk Fundamentals :
Like this:
Be the first to like this.
Database Table Details:
Take a look at old post Insert and Load Record using jQuery and Ajax.
insert.php
Contains javascript and HTML code update button with class "update_button" and textarea with id "content". When a user click update button the new message is display to top of the ol timeline list with an id "update" with an animated slide Down effect with jQuery and Ajax.If you want fadeIn effect just replace the code "slideDown" to "fadeIn"
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".update_button").click(function() {var boxval = $("#content").val();
var dataString = 'content='+ boxval;if(boxval=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');$.ajax({
type: "POST",
url: "demo.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});
});
</script>
// HTML code<div>
<form method="post" name="form" action="">
<h3>What are you doing?</h3><textarea cols="30" rows="2" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Update" name="submit" class="update_button"/>
</form>
</div>
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>
demo.php
Contains simple PHP Code displays recently inserted record details from the database.<?php
include('db.php');
if(isSet($_POST['content']))
{
$content=$_POST['content'];
mysql_query("insert into messages(msg) values ('$content')");
$sql_in= mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$r=mysql_fetch_array($sql_in);
$msg=$r['msg'];
$msg_id=$r['msg_id'];
}
?><li>
<div align="left">
<span ><?php echo $msg; ?> </span></div>
</li>
CSS Code*{margin:0;padding:0;}
ol.timeline{
list-style:none;font-size:1.2em;
}
ol.timeline li{
display:none;position:relative;
padding:.7em 0 .6em 0;
border-bottom:1px dashed #000;
line-height:1.1em;
background-color:#D3E7F5;
height:45px}
ol.timeline li:first-child{
border-top:1px dashed #000;}
Old Post:
Insert and Load Record using jQuery and Ajax
contoh portofolio
My worksHere are some showcase of my works. They are project or product. All about web, because i love them.
AmygdalaHD
AmygdalaHD is Trading Forecasting with more accurate based on unique proprietary Artificial Intelligence techniques. Trader can receive signals (prediction about market) by email or our mobile apps. The market are currency, commodity and metal
Feature:
Created Using : CodeIgniter + jQuery
- Backend web application
- Dashboard (admin panel)
- CMS
- Membership
- Crawler (auto populate content from others site)
- Push notification to mobile application (Android, iOS and Blackberry)
- Web service (to consume by mobile apps)
- Auto daily email to members
Year : 2011 - 2012
Website : http://amygdalahd.com
Screenshot :
Kamus Bahasa Batak Online
Kamus Bahasa Batak is simple online dictionary to translate Batak and Indonesia. This is my 'free time' project.
Feature:
Created Using : CodeIgniter, Bootstrap.
- Translating Indonesia and Batak
- Adding dictionary
Year : 2011
Website : http://kamusbahasabatak.com
Screenshot :
Megawastu Currency Application
Web based application to retrieve information about currency in table or graph.
Feature:
Created Using : CodeIgniter, Bootstrap.
- Live currency rates
- Graph
- User Management
- Monitoring User
- News Management
Year : 2012
Website : Internal website
Screenshot :
Menu JSON
Now the right time to build an online selling portal, people started believing online shopping for buying things. This tutorial helps you to to speed up the most important product category navigation menu system for your ecommerce projects. I had implemented Amazon style menu with category image using PHP, MYSQL andj JQuery.
Database
Sample database categories table contains four columns cat_id, name, paren and media.CREATE TABLE `categories`
(
`cat_id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(150) ,
`parent` int(11) ,
`media` varchar(100),
PRIMARY KEY (`cat_id`)
);
Category and Subcategory data stores like this format.
categories.php
Contains PHP code generating JSON data out from categories table.<?php
include('db.php');
$sql = mysql_query("select cat_id,name,media from categories where parent=0");
// parent categories node
$categories = array("Categories" => array());while ($row = mysql_fetch_array($sql))
{
$cat_id = $row['cat_id'];
$ssql = mysql_query("select cat_id,name,media from categories where parent='$cat_id'");// single category node
$category = array(); // temp array
$category["cat_id"] = $row["cat_id"];
$category["name"] = $row["name"];
$category["media"] = $row["media"];
$category["sub_categories"] = array(); // subcategories again an arraywhile ($srow = mysql_fetch_array($ssql))
{
$subcat = array(); // temp array
$subcat["cat_id"] = $srow['cat_id'];
$subcat["name"] = $srow['name'];
// pushing sub category into subcategories node
array_push($category["sub_categories"], $subcat);
}// pushing sinlge category into parent
array_push($categories["Categories"], $category);
}
echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')';
?>
JSON Output
JavaScript & HTML
Now the most important part, reading the above JSON data using $.getJSON method and appending category data into UL #menu_ul. Subcategory data storing into hidden UL class hideul<script type="text/javascript" src="http://ajax.googleapis.com/$(".category").live('mouseover',function(event){}- category is the class name of category li tag. Using element.attr("id") calling category li value, based on the ID moving class .hideul subcategory values into $("#submenu_ul").html(V)
ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{$.getJSON("categories.php?callback=?", function(data)
{
$.each(data.Categories, function(i, category)
{
var subjsondata='';
$.each(category.sub_categories, function(i, sub_categories)
{
subjsondata += "<li>"+sub_categories.name+"</li>";
});
var jsondata ="<li class="category" id=''"+category.cat_id+"'>"+category.name+"<ul class="hideul" id='hide"+category.cat_id+"' media='"+category.media+"'>"+subjsondata+"</ul>
</li>";
$(jsondata).appendTo("#menu_ul");
});
}
);//MouseOver on Categories
$(".category").live('mouseover',function(event)
{
$("#menu_slider").show();
var D=$(this).html();
var id=$(this).attr('id');
var V=$("#hide"+id).html();
var M=$("#hide"+id).attr("media");
$("#submenu_ul").html(V);
$("#menu_slider h3").html(D);
//Background Image Check
if(M!='null')
{
$("#menu_slider").css({"width": "450px"});
}
else
{
$("#menu_slider").css({"width": "250px"});
}
$("#menu_slider").css('background', 'url(backgrounds/' + M + ') #ffffff no-repeat right bottom');
});//Document Click
$(document).mouseup(function()
{
$("#menu_slider").hide();
});//Mouse click on sub menu
$("#menu_slider").mouseup(function(){ return false });//Mouse click on my account link
$("#menu_box").mouseup(function(){ return false });
});
</script>HTML Code
//HTML Code
<div id='menu_box' class='shadow'>
<ul id='menu_ul'></ul>
</div>
<div id='menu_slider'>
<h3></h3>
<ul id='submenu_ul'></ul>
</div>
db.php
Database configuration file.<?php
$mysql_hostname = "localhost";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "databasename";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
CSS#menu_box
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:400px;width:200px;
background-color:#fff;
margin-left:20px;
float:left;
position:relative;
z-index:300
}
#menu_slider
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:370px;background-color:#fff;margin-left:220px;
position:absolute;
width:250px;
position:relative;
z-index:200;
display:none;
padding:15px
}
.hideul{display:none}
CSS buat tabel
By R. Christie
Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!
First things first
We start with a valid xhtml 1.0 strict markup. Here is an example of a valid table markup:
<!-- Table markup--> <table id="..."> <!-- Table header --> <thead> <tr> <th scope="col" id="...">...</th> ... </tr> </thead> <!-- Table footer --> <tfoot> <tr> <td>...</td> </tr> </tfoot> <!-- Table body --> <tbody> <tr> <td>...</td> ... </tr> ... </tbody> </table>You can read more about xhtml table markup in HTML Dog’s Table Section. I have tested the tables below in Mozilla Firefox 3, IE 6 and 7, Opera 9.x and Safari. Also note that I apply a light blue color scheme to all of these tables to give the article a consistent look. You can modify the color scheme to match your site — the source package is provided in the end of the article.
Before we start, let’s review the general rule of thumb for styling of tables:
- Tables love space. Set the width of tables carefully, according to the content. If you don’t know the perfect width, simply set the width of the table to 100%. Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width.
- Cells need some padding. Sure, each table cell relates to each other. But it doesn’t mean that we have to pull them too close, right? Define some space between the cells, crammed up table cells are so much harder to read.
- Treat tables the way you treat content. Tables are read similarly to the way we read text — except it’s harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors — it’s easier for the eyes. Don’t treat your table like it’s a graphical decoration. Make sure that the style you apply to it makes the content more readable, not the other way around.
Now that we are all set up let’s get going, shall we?
1. Horizontal Minimalist
Horizontal tables are tables that are read rather horizontally than vertically. Each entity is represented by a row. You can style these types of tables with minimalist style. Simply set enough padding to the cells (td and th) and put a 2 pixel border underneath the header.
Employee Salary Bonus Supervisor Stephen C. Cox $300 $50 Bob Josephin Tan $150 - Annie Joyce Ming $200 $35 Andy James A. Pentel $175 $25 Annie Because horizontal tables are supposed to be scanned horizontally, clearing the border of the table increases the efficiency of the table. The lack of border, however, makes this table design hard to read if it has too many rows. To counter it we simply add 1 pixel border underneath all td elements:
Employee Salary Bonus Supervisor Stephen C. Cox $300 $50 Bob Josephin Tan $150 - Annie Joyce Ming $200 $35 Andy James A. Pentel $175 $25 Annie The tr:hover rules are very useful to aid people reading a minimally designed tables. When the mouse cursor hovers over a cell, the rest of the cells in the same row highlights immediately, making it easier to track things if your tables have multiple columns.
- Important!
- Carefully finetune the typography and the padding between the cells
- Pros
- Very easy to style, good for simple tables
- Cons
- tr:hover rules don’t work in IE 6, table can be confusing if it has too many columns
- Play with
- Color scheme, typography, tr:hover effects
2. Vertical Minimalist
Although rarely used, vertically oriented tables are useful for categorizing or comparing descriptions of objects, with each entity represented by a column. We can style it in minimalistic style by adding whitespace separators between columns.
Comedy Adventure Action Children Scary Movie Indiana Jones The Punisher Wall-E Epic Movie Star Wars Bad Boys Madagascar Spartan LOTR Die Hard Finding Nemo Dr. Dolittle The Mummy 300 A Bug’s Life Add large border-left and border-right with the same color as background. You can use transparent borders if you want, but IE 6 screws it all up. Since this table is supposed to be read from top to bottom (vertically), adding tr:hover does not help and instead makes it harder to read the data. There is perhaps a Javascript-based solution which enables you to highlight the whole column when a mouseover event occurs, but that’s beyond the scope of this article.
- Important!
- Carefully finetune the typography and the padding between the cells, do not add tr:hover effect
- Pros
- Easy to style, good for simple tables
- Cons
- Can not be used if background is not a solid block of color, suitable only for some tables
- Play With
- Color scheme and typography
3. Box
The most dependable of all styles, the box style works for all kinds of tables. Pick a good color scheme and then distribute background-color to all the cells. Don’t forget to accentuate the differences of each cell by defining border as a separator. An example of a box style table is the following table:
Employee Salary Bonus Supervisor Stephen C. Cox $300 $50 Bob Josephin Tan $150 - Annie Joyce Ming $200 $35 Andy James A. Pentel $175 $25 Annie
Comedy Adventure Action Children Scary Movie Indiana Jones The Punisher Wall-E Epic Movie Star Wars Bad Boys Madagascar Spartan LOTR Die Hard Finding Nemo Dr. Dolittle The Mummy 300 A Bug’s Life This style is nowadays probably the most used style. The tricky part is actually trying to find the color scheme that matches with your site. If your site is heavy on graphics, it will be pretty hard to use this style.
- Important!
- Choose a color scheme that matches with your site
- Pros
- Easy to style, flexible for large or small tables
- Cons
- Choosing the perfect color scheme could be tricky
- Play with
- Colors and borders, use dashed or dotted to achieve cute effects, typography, icons
4. Horizontal Zebra
Zebra-tables are pretty attractive and usable. The alternating background color can serve as a visual cue for people when scanning the table. To style a table as zebra, simply put a class="odd" to every odd ordered tr tag and define a style for it (e.g. using if ($count % 2) then even class else odd class in PHP).
... <tr class="odd"> <td>...</td> ... </tr> <tr> <td>...</td> ... </tr> ...
Employee Salary Bonus Supervisor Stephen C. Cox $300 $50 Bob Josephin Tan $150 - Annie Joyce Ming $200 $35 Andy James A. Pentel $175 $25 Annie
- Important!
- Do not put too much contrast on the zebra colors, you can blind your users
- Pros
- The zebra pattern can help people to scan the table
- Cons
- Adding class="odd" manually can be very tedious for large tables, many content management systems do not provide even/odd features on a table loop, hence picking the color scheme may be tricky
- Play With
- Contrasting color, borders, typography, icons
5. Vertical Zebra Style
Vertical zebra is easier to style than the horizontal one, as we can make use of colgroup and col elements to distribute column classes. However, the markup becomes a little bit heavier:
<table> <!-- Colgroup --> <colgroup> <col class="vzebra-odd"> <col class="vzebra-even"> <col class="vzebra-odd"> <col class="vzebra-even"> </colgroup> <!-- Table header --> <thead> <tr> <th scope="col" id="vzebra-comedy">Employee</th> ... </tr> </thead> ... </table>The colgroup element actually applies a style or class to the table, columnwise. Instead of tediously applying class for the first td or th element, we can use a more convenient colgroup-tag. For more information about colgroup visit this page.
Comedy Adventure Action Children Scary Movie Indiana Jones The Punisher Wall-E Epic Movie Star Wars Bad Boys Madagascar Spartan LOTR Die Hard Finding Nemo Dr. Dolittle The Mummy 300 A Bug’s Life Although perhaps more suitable for vertically-oriented table, this zebra-style can also be used for any other kind of tables.
- Important!
- Do not put too much contrast on the zebra colors, you can blind your viewer
- Pros
- Suitable for all types of tables
- Cons
- Choosing the color scheme could be tricky, need to add colgroup elements
- Play With
- Contrasting color, borders, colgroup and col, icons and typography
6. One Column Emphasis
In some tables, some particular column may have a higher weight than the other columns. If that’s the case, you can use colgroup and col to make that particular column stand out. In the example below, the first column serves as the starting point to read, so it is emphasized, just like we emphasize the first letter of the paragraph as drop caps:
Company Q1 Q2 Q3 Q4 Microsoft 20.3 30.5 23.5 40.3 50.2 40.63 45.23 39.3 Apple 25.4 30.2 33.3 36.7 IBM 20.4 15.6 22.3 29.3 You can also use one-column-emphasis-technique to highlight something important, say the column containing totals of an accounting table, or in a comparison table — for computer specification perhaps, the winning entity (column).
- Important!
- Be careful, don’t overdo the emphasis or the column will jump out, distracting the effort to read the rest of the columns.
- Pros
- Very effective when used in certain kind of tables
- Cons
- The necessary tr:hover effect does not work in IE, suitable for certain types of tables only
- Play with
- Color scheme, typography, icons and tr:hover effects
7. Newspaper
To achieve the so-called newspaper effect, apply border to table element and play with the cells inside. A quick, minimalistic newspaper style can look like this:
Company Q1 Q2 Q3 Q4 Microsoft 20.3 30.5 23.5 40.3 50.2 40.63 45.23 39.3 Apple 25.4 30.2 33.3 36.7 IBM 20.4 15.6 22.3 29.3 Simply play with color scheme, borders, padding, backgrounds, and tr:hover effects of the cells (td and th). Other alternatives are presented below:
The above data were fictional and made up, please do not sue me Company Q1 Q2 Q3 Q4 Microsoft 20.3 30.5 23.5 40.3 50.2 40.63 45.23 39.3 Apple 25.4 30.2 33.3 36.7 IBM 20.4 15.6 22.3 29.3
Favorite Great Nice Bad Passion of the Christ Bourne Ultimatum Shoot ‘Em Up Ali The Big Fish The Mummy Apocalypto Monster Shawshank Redemption Cold Mountain Indiana Jones Dead or Alive Greatest Story Ever Told I Am Legend Star Wars Saw 3
- Important!
- Be careful with border-collapse, do not lose the signature border around the table!
- Pros
- Gives a royal, authorative aura to a table
- Cons
- Unsuitable for large tables (it loses it’s charm on large tables)
- Play With
- Typography, color scheme, background, border, padding, and tr:hover effects
8. Rounded Corner
Rounded corners are slick and modern, and it’s easy to apply it to a table, although you need to fire up Photoshop for this. Create images for all four corners of your table. Theoretically, we can make use of the nesting tr and td-elements to place the left and right corners of the table without adding additional markup. Unfortunately, IE 6 goes berserk and the table appears ugly, so the most stable way to do this is to put ID or class to all four corner cells of the table. Please consider the example below:
Company Q1 Q2 Q3 Q4 Microsoft 20.3 30.5 23.5 40.3 50.2 40.63 45.23 39.3 Apple 25.4 30.2 33.3 36.7 IBM 20.4 15.6 22.3 29.3
- Pros
- Great if you want untraditional table, probably the only viable option you have if your website uses rounded corners heavily
- Cons
- Takes longer to style, requires images
- Play With
- Color scheme, corner variations, typography, tr:hover effects, icons
9. Table Background
If you are looking for a quick and unique way to style your table, simply pick an attractive image or photo related to the subject of your table and set it to be the background-image of the table. You can add 50% grey png-image as background-image of the cells to improve readability, and that means that you need a CSS-hack to make it work in IE 6:
* html table tbody td { /* IE CSS Filter Hack goes here*/ }The table would look like this:
IE 6 users won’t see the transparent background if the hack is not applied Employee Division Suggestions Stephen C. Cox Marketing Make discount offers Josephin Tan Advertising Give bonuses Joyce Ming Marketing New designs James A. Pentel Marketing Better Packaging
- Important!
- Make sure the image is relevant to the table’s contents
- Pros
- Very easy to style, delivers unique look, if used correctly the image can serve as a symbol that gives outstanding impression on the viewer
- Cons
- Needs hack to get the background work in IE 6, needs images
- Play With
- Background images, transparent PNGs, typography, colors, icons
10. Cell Background
You can apply background-image to the cells and achieve a consistent look. Say you have at least half an hour to spare and you want something that’s not too bland. Start your Photoshop and make 1 pixel width gradients, and set them as background-image of all cells. You’ll end up with a gradient style table:
Give background color to the table cells to achieve seamless transition Employee Division Suggestions Rating Stephen C. Cox Marketing Make discount offers 3/10 Josephin Tan Advertising Give bonuses 5/10 Joyce Ming Marketing New designs 8/10 James A. Pentel Marketing Better Packaging 8/10 Similarly, pick a pattern and set it as background-image and you’ll end up with a pattern-styled-table:
Employee Salary Bonus Supervisor Stephen C. Cox $300 $50 Bob Josephin Tan $150 - Annie Joyce Ming $200 $35 Andy James A. Pentel $175 $25 Annie
Nation Capital Language Unique Japan Tokyo Japanese Karate South Korea Seoul Korean Ginseng China Beijing Mandarin Kung-Fu Indonesia Jakarta Indonesian Batik
- Important!
- Make sure the text stands out against the background
- Pros
- Easy to style, not too bland
- Cons
- Uses images, patterns and gradients might distract reading
- Play With
- Color scheme, patterns, typography, borders, backgrounds, gradients, icons
Final Words
I know I barely scratched the surface with this article, so grab the source and play around. Feel free to post your favourite table designs, especially if it’s something I missed out. Over to you.
About the author
R.Christie is studying information systems at college. He viciously juggles activities from college, web design, programming, church, to sport activities. You can say hello to him via e-mail.
Editor’s note
This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.
How good is the post “Top 10 Express CSS Table Designs”?
( polls)
Zend frame
TOTAL POSTS:
597,484,180
TOTAL MEMBERS:
4,489,586-02
Mengecek teks dari website orang lain..
Dalam kasus ini, Syuaa akan memberikan contoh memastikan keberadaan suatu teks atau string pada
sebuah website orang lain. Hal ini tentu bisa digunakan untuk mengetahui sudahkah mereka memasang link Anda di website nya? sebelum Anda memasang backlink di blog/website Anda.Langkah pertama adalah dengan mengambil keseluruhan teks HTML pada website tersebut.
<?php $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, "http://syuaa.blogspot.com"); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); $insideit = curl_exec($curl); curl_close($curl); ...Penjelasan
Baris 1 : Membentuk curl session.
Baris 3 : Menentukan URL yang akan diambil.
Baris 4 : Memberikan perintah kepada PHP agar menyimpan skript HTML yang diambil kedalam suatu variable.
Baris 6 : Memberikan perintah kepada PHP agar menjalankan semua option curl yang di tentukan diatasnya.
Baris 7 : Menutup sesi curl dan mengosongkan semua resource.Setelah berhasil menyimpan keseluruhan skrip HTML kedalam variable $insideit. Maka selanjutnya adalah mengecek keberadaan text tertentu dalam sekumpulan teks tersebut. Caranya adalah dengan menggunakan function PHP preg_match.
... $urlonsearch = "http://syuaa.blogspot.com"; $ifexists = "Text tersebut telah ada di ".$urlonsearch; $ifnotexists = "Text tersebut belum ada di ".$urlonsearch; echo preg_match('!linkexchange.syuaa.net/!i', $insideit) ? $ifexists : $ifnotexists; ?>
Skrip lengkap nya bisa dilihat dibawah, telah dimodifikasi agar lebih simpel.<?php $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, "http://syuaa.blogspot.com"); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); $insideit = curl_exec($curl); curl_close($curl); echo preg_match('!linkexchange.syuaa.net/!i', $insideit) ? "Text tersebut telah ada di " : "Text tersebut belum ada di "; echo "http://syuaa.blogspot.com"; ?>
Setelah melakukan sedikit percobaan, skrip di bawah juga akan menghasilkan nilai yang sama. Lebih simpel, dan lebih pendek, tetapi belum terlalu mengerti apakah memiliki nilai yang sama untuk semua kondisi atau tidak.<?php $insideit = file_get_contents('http://syuaa.blogspot.com'); echo preg_match('!linkexchange.syuaa.net/!i', $insideit) ? "Text tersebut telah ada di " : "Text tersebut belum ada di "; echo "http://syuaa.blogspot.com"; ?>
CURL okeee punyaaa.. :D
ask] php curl Website, Webmaster, Webdeveloper
CURL php okee..:D
[want to learn] Belajar Dasar PHP Curl
selamat malam om mimin, om momod, agan2...
mohon maaf sebelumnya kalo thread ini salah tempat di remove aja yah om...langsung aja yah gan, sebelumnya kenapa ane buat thread ini
mungkin menurut agan googling aja dulu...Quote:
1. ane pengen bgt tau dasar menggunakan cURL (Client URL)
2. ada topik khusus yang membahas satu function mengenai cURL lebih detailatau mungkin menurut agan coba dulu ke php.netQuote:
iya gan ane udh coba googling tapi kurang memuaskan buat ane yg masih nubie ini.. karena ane dapat selalu sudah jadi function dari cURL itu, tp blm paham susunan2 cURL itu sendiri...
tapi ada sedikit manfaat buat ane dr hasil googling walapun belum terlalu puas..
searching di kaskus "PHP Curl"ane coba cari-cari di Kaskus "Belajar Dasar PHP Curl" belum ada yang membahasnya gan ini hasil pencarian ane gan...Quote:
ditemukan 2 Thread dan itu berkaitan dengan permasalahan TS
bukan ingin membahas dasar penggunaan function Curldisini ada thread yang membahas khusus PHP tapi itu terlalu general buat ane.. cmiiw
mohon bantuan dari mastah2 PHP yang sudah terbiasa menggunakan fungsi cURL bisa share sedikit ilmu yang mastah punya, selain bermanfaat banget buat ane sendiri dan jg buat temen2 yang ingin menggunakan function ini...
=====================================
mungkin sedikit ane yg udh dpt beberapa hr ini mengenai function cURL dr php.net
Code:
$ch = curl_init (); // membuat cURL resource ; curl_close($ch); // keluar cURL Resourceyang jadi pertanyaan ane...Code:
curl_setopt($ch, CURLOPT_URL, "http://www.example.com/"); // domain url yg ingin di cURL curl_setopt($ch, CURLOPT_HEADER, 0);
1. bagaimana seharusnya struktur CURLOPT_***
apa ada aturannya dalam coding-nya gan ??
2. ane coba dasar code dr cURL knp bisa beda yah hasilnya ??
- tuk yang google.com tidak bisa dan bisa google.co.id
- tuk yang bi.go.id jg tidak bisa => apa site ini memang tidak bisa3. curl_setopt($ch, CURLOPT_HEADER, true);
kalo CURLOPT_HEADER ane true ada keterangan ini maksudnya apa yah kk, apa info ini penting jg buat kita ??mohon sedikit pencerahan dan koreksi dari kk2 mastah semua ...
** buat agan yang ingin tahu lebih jauh function cURL didukung yah, mohon bantuan sundulannya yah gan... ***
JavaScript must be enabled in order for you to use Google Maps. It seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options and then reload this page.This custom marker for Google Maps API v3 consists of 2 separate images (the main icon image and a shadow) and a clickable area defined by an array of x,y pixel coordinates
The images image.png The main foreground image. 24-bit PNG image with alpha transparency
shadow.png The shadow image. 24-bit PNG image with alpha transparency
Google Map shadow images should generally be at a 45 degree angle (upward and to the right) from the main image and the bottom left corner of the shadow image should align with the bottom-left corner of the icon image.
The clickable area x,y coordinates This orange overlay visually represents the marker shape used in determining the marker's clickable region. Defined by an array of integers that specify the x,y pixel position of the shape relative to the top-left corner of the marker image.
coord: [27,0,30,1,32,2,3 ..etc.. ]
shape: 'poly'Create your own custom marker with shadow
To create your own custom marker, simply upload an image. A zip file containing the 2 separate images (the main foreground image and the google map shadow) and some sample code (including the image map area coordinates) is created and made available for download.
Some further reading
google map
Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it be nice to add your company logo, parking lots, train stations, etc. to the map, to help the customer even more? It is very simple, and in this article I am going to show you how.
Before we start, check out what we are going to create:
Now, here is an overview:
Overview
The Google Maps API allows you to embed maps directly into your website. All it takes is a little JavaScript, and for beautifying—a little CSS. Version 3 of the Google Maps API has just been released, and of course, that is what we will be using here. You can read the entire documentation over at Google Labs, and while you are there, be sure to get an API key.
As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you know the exact address, you can put it in an URL of this form:
http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_keyWhen you enter this in your address bar, you will see this:
The coordinates of Apple's head quarter in Cupertino
The first number is the status code, and 200 means that everything is okay. The second number shows how accurate the address is—in this case the number is 8, which is good. The last two numbers are latitudes and longitudes, which are the numbers we need.
There’s no need to hesitate – let’s add that map to your website! Open your favorite HTML editor and create a standard HTML file with UTF-8 encoding. First of all, we have to create the viewport and tell our HTML file to get the JavaScript file from Google Code. Add these lines between <head> and </head>:
After the URL, you will notice sensor=false. As we do not use any sensor, such as a GPS, to locate the location, this is set to false.
Just below what we have just inserted, write the following:
<script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(57.0442, 9.9116); var settings = { zoom: 15, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP };Let’s split this up to ensure that we understand it fully. In line 2 we create the function initialize(). Inside this function we are going to define the basic settings of the map. In line 3 we create a new variable, latlng. latlng stands for latitudes and longitudes. The variable contains the coordinates we’re going to use as the center of our map.
After that, we create the variable settings. You have a lot of options here.zoom specifies—you guessed it—how far the map will be zoomed in. Play around with the number to get it to fit your location.
center specifies our center. By writing latlng, we refer to the variable we created earlier, and the coordinate inside that will be used.
The last code changes the layout of the map to a bit more minimalistic look in my opinion. The controls in the upper right corner (Map, Satellite, Terrain) are changed to a drop down menu, and the scaling/navigation controls in the left size are changed to small controls.
mapTypeId: google.maps.MapTypeId.ROADMAP defines that our map should be of the type ROADMAP – you can change this to either SATELLITE, HYBRID or TERRAIN.
Below the previous code, write this:
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);This code creates the variable map, and defines that the map should use the settings we just created.
Write
to end the function, and move to <body>, and write this:
By doing this we are telling our site to execute the initialize() function when the site is loaded, and insert a <div> with the size we want our map to be.
Try to view your site now. Cool, isn’t it?
Now we have to add some markers. Let’s start by creating a standard marker—we’ll customize it in a moment.
Right below
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);insert the following code:
var companyPos = new google.maps.LatLng(57.0442, 9.9116); var companyMarker = new google.maps.Marker({ position: companyPos, map: map, title:"Some title" });Try to update your page, and watch the magic. So, what have we done?
First, we create the variable companyPos, where we specify the position of the marker. Next, we create the marker itself using the variable companyMarker. You can add more settings than these, but we will get to that later. These settings are fairly logical, so I won’t go into more depth with them.
Even though this could be enough to show your customer how to find you, we can still make it a lot nicer. Create an image in Photoshop with the size 100×50 pixels, and create something similar to this:
Create your logo
Next, create a shadow for your image:
The logo shadow
To add these images as a marker instead of the standard marker, change the marker code to this:
var companyLogo = new google.maps.MarkerImage('images/logo.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(65, 50) ); var companyPos = new google.maps.LatLng(57.0442, 9.9116); var companyMarker = new google.maps.Marker({ position: companyPos, map: map, icon: companyLogo, shadow: companyShadow, title:"Company Title" });What we have done here is also really simple. The variable companyImage points to the name of the logo image. Then it defines the size of the image, the origin of the image, and the tip of the image (where the image will be attached to the coordinate). Next, we do the exact same thing for the shadow in the variable companyShadow. In our companyMarker variable we add icon and shadow, and that is basically it.
Now, if you refresh your site, you will se that the marker has changed into your own logo with an added shadow to it as well. To add more markers, you just follow the same method (remember to change the names of the variables).
If you have two markers very close to each other, you might want to add some z-index. The marker with the highest z-index, is the one on top:
Adding zIndex allows you to choose which marker should be on top
var companyMarker = new google.maps.Marker({ position: companyPos, map: map, icon: companyImage, shadow: companyShadow, title:"Høgenhaug", zIndex: 4 });To add a description of your company when the visitor clicks on the logo we can add a infobox. With the Google Maps API it’s peace of cake.
Clicking your company logo will bring up an infobox
Paste this code right after you define the map variable:
var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+ '<div id="bodyContent">'+ '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString });The code here is fairly straight-forward, and you are of course not limited to headlines and paragraphs – there is room for images as well. To make the infobox appear when your logo is clicked, simply add this code right before the last } in the initialize() function:
google.maps.event.addListener(companyMarker, 'click', function() { infowindow.open(map,companyMarker); });To make the infobox just a little more pretty, add some styles in your stylesheet file:
body { font-family: Helvetica, Arial, sans-serif; font-size:10pt; }And there you have it. One piece of fine-looking Google Map to include on your company website, your travel blog, etc.
If you’d like to download the sample files, you can get ‘em right here. Be sure to leave a comment!
url dengan htaccess
Mengganti URL dengan .htaccess
Berrrr setelah sempat pusing dengan urusan mengganti Uniform Resource Locator (URL) dengan htaccess, akire bisa juga hehehehehehe
File htaccess, ternyata emang asik heheheh dengan menggunakan file ini kita biwa menyembunyikan URL asli dengan URL palsu yang bisa lebih pendek. Nah dengan ide seperti ini kita bisa membuat URL lebih ringkas dan tentunya sedikit menambal celah keamanan menjadi lebih aman.
Untuk bisa membuatnya, diperlukan sebuah file dengan nama .htaccess yang diletakkkan dalam direktori web. Untuk membuatnya, tuliskan kode berikut pada file .htaccess:
Options +FollowSymLinks
RewriteEngine On
RewriteRule ^([a-z]*).html$ index.php?show=$1 [L]
RewriteRule ^(.*).html$ isi.php?judul=$1 [L]Penjelasan dari kode di atas yaitu:
- Kode pertama Options +FollowSymLinks, harus dituliskan yang memiliki fungsi mengatkifkan perintah mod_rewrite untuk melakukan manipulasi.
- Sedangkan RewriteEngine On, digunakan untuk mengaktifkan rewrite engine.
- Sedangkan perintah RewriteRule merupakan aturan yang digunakan melakukan manipulasi data.
Melanjutkan penulisan htaccess, beberapa hal yang perlu diperhatikan dalam penulisan RewriteRule:
- Blok perintah pertama ^([a-z]*).html$, merupakan informasi yang berisi data (link) yang ditemukan pada halaman web, dimana tanda ^ merupakan tanda awal data (link) yang dibaca, sedangkan tanda $ merupakan akhir data yang dibaca. Sedangkan kode ([a-z]*).html merupakan alamat eksekusi yang dibentuk dari model Regular Expression.
- Blok perintah kedua index.php?show=$1, merupakan informasi/data/link yang sebenarnya, jadi jika sistem menemukan perintah pada blok pertama, maka data yang akan ditampilkan sesuai dengan blok yang kedua.
- Perintah [L], merupakan flag yang memaksa aturan untuk menghentikan eksekusi pada baris tersebut.
- Dalam penulisan RewriteRule penulisan kode (.*) hanya boleh dituliskan sekali saja, jika dituliskan pada setiap rule, maka akan mengeksekusi rule pertama dan akan menghasilkan eror.
Sedikit dan masih banyak kekurangan, namun semoga dari yang sedikit ini akan ada manfaat yang bisa diambil untuk bisa dikembangkan lagi... Thanks...
Random Article
¤ Disk Management, mengatur drive dan partisi
¤ Ubuntu 12.04, Install
¤ Blokir situs dengan Mikrotik
¤ Pemrograman PHP
¤ Kelola Akun Email dengan Thunderbird
¤ Instalasi Zekr di Karmic
¤ Memberi icon web
¤ Marquee berhenti dengan mouse over
¤ Radical Image Optimization Tool
¤ Office: Open VS Ms.
Sebagai seorang web programmer, seringkali kita menemukan sebuah file bernama .htaccess dalam server yang kita pakai. File tersebut tentu saja asing bagi pemula yang baru belajar coding, karena ekstensi file yang sering digunakan adalah .html, .php, .aspx, .js, .css, dan lain-lain. Lalu apakah itu file .htaccess?
File .htaccess adalah file konfigurasi yang disediakan oleh web server Apacehe yang bertujuan untuk mengubah settingan default Apache server itu sendiri. Sebagai pengelola web/webmaster, sudah seharusnya kita dapat memanfaatkan fitur ini agar bisa mengubah settingan default server tersebut. Banyak manfaat, terutama dari sisi keamanan, yang dapat dilakukan dengan memodifikasi isi file .htaccess tersebut.
Pada dasarnya file .htaccess ini merupakan file teks berformat ASCII sederhana yang biasanya diletakkan dalam root direktori. Harus ditampilkan dalam format ASCII dan bukan binary, serta file permission (atribut file) pada server hosting harus di set sebagai 644 (rw-r-r). Hal ini dimaksudkan supaya server dapat mengakses file .htaccess, tatapi mencegah user untuk mengakses file .htaccess dari browser mereka. Untuk diketahui, bahwa file .htaccess ini dapat digunakan untuk melakukan konfigurasi subdirektori-subdirektori yang ada di dalamnya, sehingga kita hanya cukup mempunyai satu file .htaccess saja yang diletakkan pada root direktori.
Kode perintah dalam file .htaccess harus ditempatkan dalam satu baris. Untuk itu, jika kita membuat file .htaccess menggunakan teks editor (seperti Notepad), maka kita harus men-disable fungsi word wrap (memotong baris) terlebih dahulu.
Beberapa contoh penggunaan File .htaccess :
1. Customize Error Message
Dengan fungsi ini kita dapat mengubah halaman error pada server, yaitu dengan mendefinisikan sesuai dengan keinginan kita sendiri.
2. Override SSI Settings
Default nya, hanya halaman web yang berekstensu .shtml yang daoat menjalankan server-side termasuk SSI di server. Dengan menggunakan .htaccess kita dapat mengubah setting default tersebut agar SSI dapat bekerja dengan format HTML. Untuk mengubah settingan tersebut, kita dapat menambahkan kode berikut pada file .htaccess.
AddType text/html .html AddHandler server-parsed .htmlApabila kita menginginkan halaman yang berekstensi .html dan .htm untuk dapat menjalankan file .htaccess, maka dapat ditambahkan kode berikut :
AddType text/html .html AddHandler server-parsed .html AddHandler server-parsed .htm3. Change Default Homepage
Fungsi ini digunakan untuk mengubah nama default halaman depan web. Sebagai contohnya yaitu ketika user hanya diijinkan untuk bisa mengakses melalui nama domain saja (http://www.namawebkamu.com) tanpa harus menulis nama file secara jelas (http://www.namawebkamu.com/index.html). Untuk itu, kita juga harus mempunyai file index tersebut di root direktori. Nama file yang dapat diterima antara lain yaitu index.html, index.htm, index.cgi, index.php, dll. Pastikan saja bahwa file tersebut bernama index.*.
Dalam pemberian nama tersebut ada tingkatan yang harus dipatuhi. Apabila kita mempunyai index.cgi dan index.html di root direktori, maka server akan menampilkan index.cgi karena .cgi memiliki tingkatan yang lebih tinggi daripada .html.
Dengan .htaccess, web programmer dapat mendefinisikan file index tambahan atau bisa juga mengubah urutan tingkatannya. Misalnya untuk mendefinisikan depan.html sebagai halaman index, kita dapat menambahkan kode berikut pada file .htaccess :
DirectoryIndex depan.htmlKode tersebut akan memerintahkan server untuk mencari file bernama depan.html. Jika server menemukan file tersebut, maka server akan menampilkan halaman yang dimaksud. Namun, apabila tidak, maka akan menampilkan error 404 Missing Page.
Untuk mengubah urutan tingkatan, kita dapat memasukkan perintah DirectoryIndex dengan nama-nama file dalam satu baris. Urutan penulisan file tersebut menentukan urutan tingkatan akses file yang dimaksud (yang pertama ditulis akan diakses terlebih dahulu), misalnya :
DirectoryIndex depan.html, index.cgi, index.php, index.html4. Enable Directory Browsing
Untuk alasan keamanan, server Apache biasanya telah menghilangkan default setting yang memungkinkan directory indexing. Opsi inilah yang memungkinkan isi direktori untuk ditampilkan ke dalam browser jika direktori tersebut tidak mempunyai halaman index.
Misalnya apabila kita memasukkan sebuah URL yang tidak mempunyai halaman index, seperti http://www.namadomainmu.com/images/, maka browser akan menampilkan daftar images di dalam direktori tersebut.
Jadi, apabila kita memiliki banyak file pada direktori tertentu, maka untuk mencegah pengunjung melihat keseluruhan dari isi direktori tadi maka kita perlu menambahkan file index.php pada setiap direktori akan tetapi hal ini tidak mungkin dilakukan dan sebagai gantinya kita hanya perlu menambahkan kode berikut ini:
Options All -IndexesSehingga setiap pengunjung yang mengetikkan url seperti ini, misalnya: http://namadomainmu.com/images maka akan timbul pesan error “404″ atau langsung meredirek pada halaman lain sesuai dengan pengaturan yang kita lakukan.
5. Block Users form Accessing Your Website (Memblokir alamat IP tertentu)
File .htaccess dapat digunakan untuk memblokir alamat IP tertentu ketika mengakses ke alamat kita. Kita dapat memblok akses untuk beberapa user sekaligus, baik melalui alamat IP maupun domain name.
Contoh kode yang dapat digunakan yaitu sbb:
order deny,allow deny from 111.234.222.111 deny from 234.321.22. deny from .avrakadavra.com allow from allContoh di atas berarti bahwa :
- alamat IP 111.234.222.111 akan diblok
- semua user dengan alamat IP antara 234.321.22. hingga 234.321.22.999 akan diblok
- semua user yang berasal dari .avrakadavra.com akan diblok.
Apabila alamat-alamat yang tidak diijinkan untuk mengakses web kita berusaha mengakses web kita, maka akan tampil secara otomatis error 403 Forbidden ("You do not have permission to access this site").
6. Redirect Visitors to a New Page or Directory
Fungsi ini sangat berguna ketika kita membuat ulang seluruh website kita, me-rename halaman dan direktori, sehingga pengunjung akan menemuai halaman lama dalam keadaan error 404 File Not Found. Untuk mengatasi masalah tersebut, dapat dilakukan dengan cara melakukan redirect dari halaman lama ke halaman yang baru. Misalnya apabila halaman lama kita adalah halamanlama.html dan halaman baru adalah halamanbaru.html, maka perintahnya adalah:
Redirect permanent /halamanlama.html http://www.namadomainkamu.com/halamanbaru.htmlJika kita me-rename (mengganti nama) direktori, maka perintahnya adalah:
Redirect permanent /direktorilama http://www.namadomainkamu.com/direktoribaruUntuk diperhatikan, bahwa nama direktori yang lama ditulis dengan relative path dan yang baru ditulis dengan absolute path.
Selain itu kita juga dapat melakukan redirek halaman ketika kita akan melakukan perbaikan pada website atau blog kita, dan agar pengunjung langsung menuju ke halaman yang telah kita tentukan maka kita perlu menambahkan kode berikut ini:
order deny,allow deny from all allow from 222.222.222.222 ErrorDocument 403 /download.html <Files download.html> allow from all </Files>Ketika pengunjung lain yang datang akan langsung melihat halaman download.html sedangkan alamat IP 222.222.222.222 (misalnya alamat IP punya kita) dapat mengakses website dengan normal (bukan halaman download.html).
7. Prevent Hot Linking and Bandwidth Leeching
Untuk mencegah orang lain me-link secara langsung ke direktori image kita dari website orang lain, seperti misalnya ketika ada orang mengambil gambar dari website kita, tetapi tetap menggunakan link di server host kita, maka akan merugikan kita karena dapat mengurangi bandwidth di hosting kita. Untuk mengatasi hal ini, kita dapat menambahkan kode berikut:
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?namadomainmu.com/.*$ [NC] RewriteRule \.(gif|jpg)$ - [F]Perintah di atas akan membuat direktori image hanya bisa diakses apaila user sedang mengakses www.namadomainmu.com. Namun, apabila kita masih merasa jengkel, kita juga dapat membuat sebuah image alternatif bila direktori image di-link oleh orang lain. Misalnya kita membuat image alternatif dengan nama noimage.gif yang bertuliskan: "Gambar dari web lain... kunjungi http://namadomainmu.com untuk melihat gambar sebenarnya." Untuk itu kita dapat menambahkan kode berikut :
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?namadomainmu.com/.*$ [NC] RewriteRule \.(gif|jpg)$ http://www.namadomainmu.com /noimage.gif [R,L]8. Prevent Viewing of .htaccess or other files
Untuk mencegah user mengakses file .htaccess, maka dapat diketikkan perintah sbb:
order allow, deny deny from all9. Pengaturan Permalink
Agar kita dapat melakukan pengaturan pada permalink kita agar lebih SEO friendly kita dapat menambahkan kode berikut ini:
RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L]Untuk pengaturan lain seperti hot linking protection yang sangat berguna untuk mencegah pencurian bandwidth, pengaturan password, dll Anda dapat mengunjungi .htaccess file generator online. Selain itu dapat juga kita lakukan melalui cpanel.
Dari beberapa kegunaan dari file .htaccess di atas, kita dapat mengembangkannya lebih jauh lagi sesuai dengan kebutuhan.
Referensi:
Posting Terkait:
htaccess
Pernahkan anda menemukan URL semacam ini:
A. http://localhost/ilmucerdas.wp/2012/01/32/Artikel
B. http://localhost/ilmucerdas.wp/index.php?link=detailpage&id=45&view=user
Jika isi dari kedua URL tersebut sama, URL mana yang menurut anda lebih mudah? Tentu kebanyakan orang akan memilih yang A, iya kan?
URL semacam A, jika diaplikasikan pada web biasa (tidak pakai HTACCESS) maka letak isi dari pada ‘Artikel’ itu sama dengan file index.php yang berada di dalam folder “Artikel” di dalam folder “32″ di dalam folder “01″ di dalam folder “2012″, dan dalam direktori “ilmucerdas.wp” Namun jika memakai HTACCESS, anda tidak perlu membuat folder sebanyak itu untuk mendapatkan URL demikian.
Berikut saya ingin berbagi cara menggunakan file HTACCESS untuk manipulasi URL melalui “localhost”.
Secara detailnya saya kurang tau pasti apa manfaat file HTACCESS ini, yang pasti file ini dapat membantu untuk mendapatkan sebuah halaman web yang sesuai standart (mohon dimaklumi, saya juga masih belajar)
–> File ini diletakkan di dalam direktori utama sebuah website
–> File HTACCESS tidak perlu diberi nama, untuk membuat file ini, jika anda menggunakan editor semacam DREAMWEVER, cukup buat file dengan extensi .htaccess
–> Isi file HTACCESS bergantung pada fungsi yang dibutuhkan.
ErrorDocument 404 /nama_direktori/index.php
_____________________________________________________________
#1. Buatlah direktori baru dalam folder “htdocs” beri nama ujicoba
#2. Melalui Dreamwever atau editor lainnya, buatlah file .htaccess dalam direktori ujicoba
Isi Script file .htaccess
ErrorDocument 404 /ujicoba/index.php#3. Kemudian buatlah file index.php pada direktori ujicoba
#4. Lalu buatlah folder konten pada direktori ujicoba, buat file artikel1.php, artikel2.php, atikel3.php, dan isilah ketiga file tersebut dengan isi yang berbeda.
Isi file artikel1.php Tentang kami : kami adalah sebuah perusahaan yang berjalan di bidang Web design Isi file artikel2.php FAQ (Tanya Jawab) dapat melalui email, Ym, Facebook, Twitter : iin.aryani@yahoo.co.id Isi file artikel3.php Halaman lain-lain#5. Buat sebuah halaman error, berisi peringatan bahwa halaman yang diminta user tidak tersedia berinama err_page.php pada folder konten
Isi file err_page.php Ma'af, halaman yang anda minta tidak ditemukan.#6. Ketikkan script berikut pada index.php
<?php //untuk memecah URL $dir = explode("/",$_SERVER['REQUEST_URI']); //untuk mengetahui jumlah direktori $jml_dir = count($dir); //untuk mengetahui nama dir $host = $dir[0]; $dir_utama = $dir[1]; $artikel = $dir[2]; //membuat tampilan awal (misal) echo " Welcome to my Tutorial by Ilmucerdas.wp <ul> <li><a href=/$dir_utama/index.php>HOME</a></li> <li><a href=/$dir_utama/Tentang-Kami>TENTANG KAMI</a></li> <li><a href=/$dir_utama/Tanya-Jawab>FAQ</a></li> <li><a href=/$dir_utama/Lain-lain>LAIN-LAIN</a></li> </ul> "; //untuk menampilkan konten if(empty($artikel) or $artikel == "index.php") echo "Halaman awal. berisi konten beranda(misal)"; else if($artikel=="Tentang-Kami") include "konten/artikel1.php"; else if($artikel=="Tanya-Jawab") include "konten/artikel2.php"; else if($artikel=="Lain-lain") include "konten/artikel3.php"; else include "konten/err_page.php" ?>InsyaAllah Berhasil…
Link tersebut akan menjadi http://localhost/ujicoba/Tentang-kami untuk halaman Tentang kami, padahal file aslinya ada pada file artikel1.php di dalam folder konten Jika pada web biasa untuk dapat menampilkan isi halaman Tentang kami anda perlu mengakses http://localhost/ujicoba/kontent/artikel1.php dan itu pun menu2 yang ada pada awal halaman tidak ditampilkan lagi. Hmm, mungkin lebih baik anda mencoba praktek dari pada bingung dengan penjelasan saya
Selamat mencoba, Semoga tulisan ini berguna, Amiin
Salam, Penulis
Iin
Like this:
Be the first to like this.
membuat htaccess
By rudydevianto on July 02nd, 2011
File .htaccess sangat vital sekali dalam proteksi server maupun folder/directory dalam website anda, mungkin sudah banyak yang tahu tentang membuat file tersebut, namun alangkah baiknya jika saya memposting untuk membuatfile .htaccess untuk di upload kedalam directory untuk melindungi setiap folder atau keamanan website anda.
File .htaccess biasanya dibuat dengan mengunakan notepad pada bawaan Windows anda, bagi anda yang tidak mengetahui apa dan dimanan notepad, biasanya di buka lewat:
Start – All Programs- Accessories – Notepad.
Disana anda tulis code atau script yang akan dirubah menjadi file .htaccess, secara default jika akan menyimpan maka extensinya adalah.txt untuk merubahnya perlu merubah dalam Save As Type menjadi All Files lalu simpan file tersebut dengan nama .htaccess.
Update :
Sebagai contoh untuk membuat supaya folder tidak bisa diakses oleh orang yang tidak berkepentingan anda bisa mengetikkan kode berikut ini :
<IfModule mod_rewrite.c>
RewriteEngine on
Options All -Indexes
</IfModule>lau simpan deng eksitensi .htaccess.
Jadilah file .htaccess…
cukup mudah bukan dan bila anda ingin membuat file.htaccess untuk proteksi folder anda bisa membaca postingan saya Cara termudah proteksi folder agar tidak di akses orang lain
Demikian cara untuk membuat file .htaccess, semoga bermanfaat…
No related posts.
proteksi website.. :D
By rudydevianto on April 30th, 2011
Bagi anda yang mempunyai Bisnis Online, terutama yang menjual Produk Digital kadang tidak menyadari bahwa setiap produk yang di jual bisa diambil oleh orang yang tidak bertanggung jawab, asalkan mengetahui tempat penyimpanan folder untuk download produk digital anda.
Sebagai contoh : misalnya domain anda www.bisnisanda.com dan anda membuat folder download untuk menaruh file anda sehingga untuk link downloadnya menjadi www.bisnisanda.com/download/produk.zip maka jika orang yang mengetahui jika mengakses www.bisnisanda.com/download maka seluruh file yang ada didalamnya bisa diketahui.
Untuk itu ada 2 cara termudah memproteksi folder supaya tidak bisa diakses oleh orang yang tidak bertanggung jawab tersebut.
Penjual Script Autopilot atau yang biasanya sering disebut dengan Script SMUO/Script Reseller kadang tidak meyertakan folder untuk download produk yang terproteksi,bagi pemula biasanya membuat folder baru dan tidak menyadari bahwa folder tersebut jika di ketahui oleh , maka orang tersebut tinggal mengetikkan url di address bar dan semua data anda tinggal di ambil orang lain.
Untuk itu dalam pembahasan kali ini supaya ada orang yang mengakses url tersebut akan di arahkan ketempat lain atau tidak bisa di akses.
Caranya sebagai berikut ini:
1. Pengakses di arahkan ke halaman utama
Buka note pad atau HTML editor anda dan silahkan ketikkan coding berikut ini :
<? header (‘Location: ../index.php’); ?>
Simpanlah dengan dengan nama index.php .Kemudian silahkan upload ke folder yang akan diproteksi.
Keterangannya begini:
Jika ada yang mengakses www.bisnisanda.com/download maka secara otomatis mencari file index dan dengan code diatas maka pengunjung akan langsung diarahkan ke halaman utama website anda.
Tetapi jika anda memberikan link untuk download lengkap, maka semua akan berjalan dengan normal.
2. Proteksi supaya tidak bisa diakses
Buat file .htaccess , Silahkan buka Note Pad anda dan ketikkan coding berikut ini:
<IfModule mod_rewrite.c> RewriteEngine on Options All -Indexes </IfModule>
Kemudian upload file .htaccess tersebut ke dalam folder yang akan di proteksi, dan jika ada orang yang akan mengakses folder tersebut maka pengunjung tidak bisa akses langsung, tetapi jika anda berikan link lengkapnya semua berjalan dengan normal.
Demikianlah cara memproteksi Folder pada server supaya tidak bisa diakses, dan semoga bermanfaat untuk anda.
Silahkan berkomentar.
No related posts.
Tutorial CI ajiiibbb..
Guys, kali ini Cheyuz bakal ngebahas tentang FW (Framework) PHP… Mungkin ini bermanfaat buat temen-temen semua (khususnya ilkom [ilmu komputer] yang sejurusan, bahkan sekelas denganku di kampus… … Waktu itu kita udah sedikit ngebahas ttg CodeIgniter, walopun blm secara detail dijelasin CodeIgniter (selanjutnya CI) itu apa… CodeIgniter (CI) adalah salah satu framework PHP yang cukup [...]
amaziingg, absolutly cool.. (cheyuz)
Mufiddin , Keren Websitenya :D kalo ada waktu tambah tutor tentang .htacces ya , ditungggu mas Updatenya zaqy , Sudah lama gak maen ke sini makin cool aja situsnya. di tunggu update tutorial selanjutnya :) asep saepulloh , cheyuz okehh :D satu lagi orang indonesia yang baik :) menyebarkan ilmunya :) semoga berkah kang .
cakephp report to pdf
Mpdf consists only from one component class that uses mPDF class (located in vendors) to generate PDF file instead of standard output.
mPDF is a great class that can create PDF files from HTML. For more information see mPDF homepage.
I wrote this component to easily use mPDF with cake views. You just need to initialize Mpdf component, set desired layout (view) and instead of standard output the PDF file will be generated.
Short example in controller:
public $components = array('Mpdf.Mpdf'); public function testpdf() { $this->Mpdf->init(); $this->Mpdf->setFilename('file.pdf'); $this->Mpdf->setOutput('D'); // can call any mPDF method via $this->Mpdf->pdf $this->Mpdf->pdf->SetWatermarkText("Draft"); }Download the code from https://github.com/segy/Mpdf
cakephp report to excel
PhpExcel consists only from one helper class that uses PHPExcel project (located in vendors) to generate excel files.
PHPExcel is a great library that can create XLS files. For more information see PHPExcel project homepage.
I added method for setting font and for easy table data adding (see example).
This plugin is for CakePHP 2.x
Short example:
// Controller: public $helpers = array('PhpExcel.PhpExcel');// View: $this->PhpExcel->createWorksheet(); $this->PhpExcel->setDefaultFont('Calibri', 12); // define table cells $table = array( array('label' => __('User'), 'width' => 'auto', 'filter' => true), array('label' => __('Type'), 'width' => 'auto', 'filter' => true), array('label' => __('Date'), 'width' => 'auto'), array('label' => __('Description'), 'width' => 50, 'wrap' => true), array('label' => __('Modified'), 'width' => 'auto') ); // heading $this->PhpExcel->addTableHeader($table, array('name' => 'Cambria', 'bold' => true)); // data foreach ($data as $d) { $this->PhpExcel->addTableRow(array( $d['User']['name'], $d['Type']['name'], $d['User']['date'], $d['User']['description'], $d['User']['modified'] )); } $this->PhpExcel->addTableFooter(); $this->PhpExcel->output();
Download the code from https://github.com/segy/PhpExcel
coding2 baguuss.. :D
Cheyuz's CSS Generator adalah sebuah generator CSS berbasis online yang dapat membantu Anda mereduksi proses pengetikan kode CSS. Dengan antarmuka WYSIWYG, Anda dapat dengan mudah menentukan, mengenali, dan mempelajari parameter-parameter CSS dengan cepat. Jadi, inilah waktu bagi Anda untuk mempelajari kode CSS!
Jquery google map,
apiikkk
Pernahkah kamu melihat suatu situs yang terdapat menu Lokasi, yang ketika kita klik kita akan diarahkan ke suatu halaman yang mana halaman tersebut terdapat suatu peta, yang merupakan peta dari Google Map. Yup, itu bisa. Kita bisa menambahkan aplikasi Google Map ke website kita. Caranya bagaimana?
Menambahkan Peta ke Halaman HTML
Kali ini saya akan membuat tutorial bagaimana cara menambahkan dan juga mengkustomisasi Google Map API pada website kamu dengan menggunakan jQuery. Sebagai contoh, saya berikan suatu halaman web yang saya buat di sini:
Langkah-langkah yang harus dilakukan yaitu kita meload jquery terlebih dahulu. File yang harus kita load ada tiga, yaitu google map API, jquery, dan Google Map jQuery library. Masing-masing file dapat dilink langsung atau didownload di sini:
- http://maps.google.com/maps/api/js?sensor=true
- http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
- http://jagocoding.com/uploads/resources/jquery.fn.gmap.js
Jika ingin link langsung, kamu tinggal meload javascript-javascript tersebut dengan cara menambahkan script di bawah ini pada di dalam tag <head></head> pada halaman HTML kamu:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript" src="http://jagocoding.com/uploads/resources/jquery.fn.gmap.js"></script>Setelah itu, kita tinggal menambahkan sebuah DIV di dalam HTML kamu. Buatlah sebuah div di body dengan atribut "id" yaitu map dengan isi kosong. Cara membuatnya adalah dengan membuat kode berikut pada HTML kamu:
<div id="map" style="height: 250px"></div>Jangan lupa dengan menambahkan style height. Ini sangat berpengaruh, karena jika tidak diberikan atribut itu, div tidak akan menampilkan peta, karena tidak dispesifikasikan tinggi divnya.
Setelah itu, maka selanjutnya adalah membuat script untuk menambahkan peta ke dalam div yang idnya adalah map, maka yang dilakukan adalah memasukkan script jQuery di bawah 3 javascript di atas, yaitu:
<script type="text/javascript"> $().ready(function(){ $('#map').gmap().bind('init', function(ev, map) { $('#map').gmap('addMarker', { 'position': '-6.730545, 107.038738', 'bounds': true }); $('#map').gmap('option', 'zoom', 10); }); }); </script>Nah, script di atas ini adalah script untuk meload google map dengan menggunakan library dari jquery.fn.gmap.js di atas. $('#map') adalah nama id untuk menunjukkan elemen mana yang akan dibuat peta. Kebetulan di sini adalah elemen dengan id "map", jadi dibuat seperti itu, memakai #map. Ada banyak options, tidak saya sebutkan satu2 karena banyak, hehe.. Saya beritahu yang pentingnya saja. Behaviour addMarker berfungsi untuk menambahkan sebuah marker (penunjuk) pada peta. Di situ ada option position "-6.730545, 107.038738". Koordinat itu adalah koordinat rumah saya di Cipanas, Cianjur hehe. Nah, kemudian setelah itu ada option zoom yang artinya kita mengeset berapa zoom yang akan kita pakai. Semakin tinggi zoom maka akan semakin dekat.
Sekarang, coba refresh halaman HTML kamu!
Voila, halaman web kamu sekarang sudah berisi peta dari Google... :)
Mengubah Gambar dari Marker (Penunjuk Peta)
Untuk mengubah icon/gambar dari marker (penunjuk peta), kita dapat menggunakan option "icon" di dalam behaviour addMarker. Simpelnya, kita bisa menambahkan dari kode di atas:
<script type="text/javascript"> $().ready(function(){ $('#map').gmap().bind('init', function(ev, map) { $('#map').gmap('addMarker', { 'position': '-6.730545, 107.038738', 'bounds': true, 'icon': new google.maps.MarkerImage('images/marker.png') }); $('#map').gmap('option', 'zoom', 10); }); }); </script>Objek google.maps.MarkerImage adalah objek bawaan dari googlemap API untuk menambahkan gambar yang akan digunakan pada googlemap. Dengan menambahkan "icon", maka gambar penunjuk akan berubah sesuai dengan gambar yang ada, misalnya marker.png.
Menambahkan Konten HTML Ketika Marker Diklik
Kita dapat menambahkan konten pada cloud ketika marker atau penunjuk diklik. Dengan menggunakan event click bawaan jQuery, kita bisa memanipulasi event tersebut, misalnya dengan menambahkan alert pemberitahuan, maupun dengan memunculkan konten HTML pada peta. Sekarang saya akan membuat bagaimana si penunjuk dapat mengeluarkan deskripsi ketika diklik. Caranya dengan menambahkan behaviour openInfoWindow dan option content di dalamnya.
<script type="text/javascript"> $().ready(function(){ $('#map').gmap().bind('init', function(ev, map) { $('#map').gmap('addMarker', { 'position': '-6.730545, 107.038738', 'bounds': true }).click(function(){ $('#map').gmap('openInfoWindow', { 'content': '<p>Isikan konten di sini, konten dapat berupa <strong>HTML</strong></p>' }, this); }); $('#map').gmap('option', 'zoom', 10); }); }); </script>Kode lengkap
Seperti biasa, saya akan memberikan sebuah kode HTML lengkap dan siap pakai untuk kamu gunakan. Silakan copas kode-kode berikut untuk web kamu.
<!DOCTYPE html> <html> <head> <title>Contoh Google Map API - Jagocoding.com</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript" src="http://jagocoding.com/uploads/resources/jquery.fn.gmap.js"></script> <script type="text/javascript"> $().ready(function(){ $('#map').gmap().bind('init', function(ev, map) { $('#map').gmap('addMarker', { 'position': '-6.730545, 107.038738', 'bounds': true }).click(function(){ $('#map').gmap('openInfoWindow', { 'content': '<p>Isikan konten di sini, konten dapat berupa <strong>HTML</strong></p>' }, this); }); $('#map').gmap('option', 'zoom', 10); }); }); </script> </head> <body> <div id="map" style="height: 250px"></div> </body> </html>OK selamat mencoba mencoba sahabat2 JACO... Untuk pertanyaan dkk, silakan komentar aja :)
~ cheyuz@jagocoding.com
Stand By With Me,
cheyuz@jagocoding.com
google map lwat login
By rudydevianto on August 08th, 2011
Saat ini kebanyakkan website atau blog sudah dipasang Google Maps untuk itu kali ini saya akan membahas tentang bagaimana cara untuk mendapatkan Google Maps serta mendapatkan code Iframe HTML untuk dipasang di blog atau website.
Oke kali ini saya akan memberikan tutorial bagaimana cara mendapatkan Google Maps beserta cara membuat tanda peta berikut cara mengintegrasikan kedalam website atau blog WordPress.
Mari kita mulai…
Pertama kali kawan harus memiliki Account Google, jika belum punya silahkan Register terlebih dahulu, account Google bisa berupa layanan Email dari Google.
Saya berasumsi kawan sudah punya account Google dan kawan bisa membuka link : http://maps.google.com.
Untuk pertama kali setelah login ke Google Maps, kawan perlu membuat peta sendiri untuk itu silahkan klik My Places dan dilanjutkan dengan Create New Map.
Klik dan drag icon ketempat yang dimaksud ( bisasanya kantor / toko/ rumah ).
Isi keterangan yang dibutuhkan Title dan Dikripsi dari peta, setelah selesi klik OK.
Peta sudah berhasil dibuat, dan kawan perlu mengisi keterangan dari My Places, isilah sesuai yang diminta setelah selesai mengisi klik Done.
Kawan sudah berhasil membuat tempat dan peta Maps dari Google dengan icon Standard atau Default dari Google, kawan bisa merubah icon tersebut dengan icon yang lain atau dengan gambar atau logo perusahaan untuk itu kita kembali melihat tutorial gambar dibawah ini.
Kembali klik icon Maps Google , muncul kotak dialog dan untuk mengganti Icon silahkan kawan klik logo icon dipojok kakan atas.
Untuk mengganti dengan icon yang lain kawan tinggal memilih pada icon yang telah disediakan , jika ingin mengganti gambar sendiri kawan tinggal klik Add An Icon.
Kawan tinggal memasukkan Url dari image yang akan dibuat sebagai icon maps ( sebelumnya harus diupload dulu ke hosting ) dengan ketentuan gambar tidak lebih dari 64px X 64px dan klik OK jika sudah selesai.
Nampak sudah tercipta icon baru dan klik Ok jika dirasa sudah cocok.
Sekarang ini saatnya untuk mendapatkan Code HTML untuk dipasang di Website atau blog.
Pada pojok kanan atas ada icon sepeti gambar Link, klik icon tersebut.
Muncul kotak dialog, jika ingin langsung apa adanya ukuran maps google, kawan bisa mengcopy kode HTML dari Google Maps atau jika ingin menyesuaikan bisa klik Customized and Preview embedded Map.
Kawan bebas menentukan ukuran dari map, sesuaikan dengan layout website atau Blog, setelah selesai Copy kode HTML dan siap digunakan.
Untuk wordpress kawan bisa membuat new page atau new post, pilih tampilan HTML dengan mengganti disebelah pojok kanan.
Paste pada kotak content dan kawan bisa beralih ke tampilan Visual.
Kawan bisa menambah artikel lain yang dibutuhkan dan setelah itu klik Publish.
Berhasil !
Nah demikian tutorial dalam membuat Google Maps dan memasang kedalam website atau blog, jika ada tambahan lain bisa menirim komentar dibawah ini.
No related posts.
menambah google map lwat acount
Website yang disertai dengan penambahan Map/ Peta Lokasi untuk usaha bisnis anda sangat bermanfaat untuk memudahkan pengunjung website mengetahui tempat usaha yang selama ini anda promosikan. Pemasangan google Map ( Peta Lokasi) tidak saja hanya sekedar pajangan agar terkesan interaktif akan tetapi dapat sebagai daya tarik pengunjung website anda bahwa bisnis yang anda jalani dan promosikan secara online tersebut benar benar mempunyai tempat keberadaan yang jelas dan dapat dipercara.
Untuk menambahkan Peta Lokasi menggunakan jasa layanan Google Map, ada beberapa langkah dalam menambahkan kode (embeded script ) ke dalam web page anda. Berikut dibawah ini adalah salah satu petunjuk yang praktis dan cepat yang bisa anda lakukan.
1: Sign IN untuk masuk di google map ( klik disini)
2. Setelah masuk, Klik My Map kemudian "Get Started"
3. Kolom Isian Inforasi untuk Google map anda yang baru akan dimunculkan.
Setelah selesai klik SAVE
Disarankan jangan mengklik DONE terlebih dahulu tujuannya agar pertanda pembuat Maker untuk Icon tetap terlihat.
4. Mencari Letak Lokasi
Untuk memudahkan anda dalam menandai letak lokasi /denah tempat keberadaan anda di google map nantinya, dapat menggunakan fasilitas Search Map.
Masukan Alamat lengkap/Address, Kota/City, Province/State dan Negara /Country. Lanjutkan dengan mengklik Search map. maka jika ditemukan denah akan ditampilkan sesuai dengan keadaan yang terdekat dengan tempat anda.
5. Mengisi Pertanda Lokasi
Setelah anda dapat melihat Denah/ Lokasi yang cocok dengan tempat anda, pada Tempat tersebut dimana kursor berada pilihlah tanda Pembuat Icon (marker) google pada pojok atas kanan (klik gambar dibawah untuk perbesar).
Arahkan tanda tersebut ke tempat yang anda inginkan. Saat selesai menandai POPUP untuk pengisian Informasi tentang tanda icon akan dimunculkan. Kotak isian dapat diisikan sebagai Judul dan Keterangan Lokasi yang anda buat. Klik OK jika sudah selesai.
6. Selesai Klik tombol "DONE" pada kolom kiri atas.
7. Menyalin LINK Google Map
Langkah terakhir adalah menyalin (copy) link dari Map yang anda buat guna ditempatkan di halaman website anda.
import Ms Excel ke My Sql
May 30th, 2010 | by rosihanari | Cetak Artikel
Sebenarnya topik tentang cara membuat script import data excel ke mysql sudah banyak ditanyakan rekans pengunjung setia blog ini. Namun… maaf baru sempat kali ini membuat artikelnya
Mengapa script import data Excel ke MySQL ini perlu dibuat? ya.. karena tool-tool seperti phpMyAdmin belum mendukungnya. Kalau tidak salah phpMyAdmin hanya mendukung import data dalam bentuk format SQL maupun CSV. Sebenarnya ada sih tool yang mendukung import data dalam format Excel, seperti Navicat dan SQLyog. Namun keduanya adalah tool berbayar
Nah… untuk membuat script import data Excel ke MySQL ini nanti kita akan memanfaatkan class PHPExcelReader yang dibuat oleh Vadim Tkachenko. Class ini sebenarnya hanya diperuntukkan untuk membaca file Excel saja, namun dengan sedikit modifikasi dan pengembangan dapat kita gunakan untuk melakukan import data Excel ke MySQL.
Oya… file Excel yang bisa dibaca oleh class PHPExcelReader ini untuk sementara hanya yang di bawah MS. Office 2007 atau Office 97-2003 saja. Dengan kata lain class ini tidak bisa digunakan untuk membaca file Excel yang berekstensi (*.xlsx). Oleh karena itu pastikan file Excel yang akan Anda import berekstensi *.xls.
Sebelum kita membuat script import datanya, silakan download terlebih dahulu class PHPExcelReader nya di bawah ini
Selanjutnya, kita akan membuat script import datanya. Dalam script yang akan kita buat ini, class tersebut nantinya akan kita includekan di dalamnya.
Untuk contoh kasus yang akan kita pilih di sini adalah import data mahasiswa. Berikut ini struktur tabel MySQL nya.
CREATE TABLE `mhs` ( `nim` varchar(10), `namamhs` varchar(30), `alamat` text, PRIMARY KEY (`nim`) )Kemudian andaikan kita memiliki file data Excel seperti gambar di bawah ini
Dalam proses import data nanti, kita akan menggunakan bentuk form upload file. Oleh karena itu, pertama kita buat form uploadnya sbb:
import.php
<h1>Import Data Asrama</h1> <form method="post" enctype="multipart/form-data" action="proses.php"> Silakan Pilih File Excel: <input name="userfile" type="file"> <input name="upload" type="submit" value="Import"> </form>Selanjutnya, kita buat script untuk proses upload dan import datanya. Oya… meskipun kita menggunakan form upload file, namun file Excel yang kita upload tersebut tidak akan tersimpan di server secara permanen namun hanya bersifat temporary yang otomatis akan terhapus setelah proses import datanya selesai.
proses.php
<?php // menggunakan class phpExcelReader include "excel_reader2.php"; // koneksi ke mysql mysql_connect("dbHost", "dbUser", "dbPass"); mysql_select_db("dbname"); // membaca file excel yang diupload $data = new Spreadsheet_Excel_Reader($_FILES['userfile']['tmp_name']); // membaca jumlah baris dari data excel $baris = $data->rowcount($sheet_index=0); // nilai awal counter untuk jumlah data yang sukses dan yang gagal diimport $sukses = 0; $gagal = 0; // import data excel mulai baris ke-2 (karena baris pertama adalah nama kolom) for ($i=2; $i<=$baris; $i++) { // membaca data nim (kolom ke-1) $nim = $data->val($i, 1); // membaca data nama (kolom ke-2) $nama = $data->val($i, 2); // membaca data alamat (kolom ke-3) $alamat = $data->val($i, 3); // setelah data dibaca, sisipkan ke dalam tabel mhs $query = "INSERT INTO mhs VALUES ('$nim', '$nama', '$alamat')"; $hasil = mysql_query($query); // jika proses insert data sukses, maka counter $sukses bertambah // jika gagal, maka counter $gagal yang bertambah if ($hasil) $sukses++; else $gagal++; } // tampilan status sukses dan gagal echo "<h3>Proses import data selesai.</h3>"; echo "<p>Jumlah data yang sukses diimport : ".$sukses."<br>"; echo "Jumlah data yang gagal diimport : ".$gagal."</p>"; ?>Setelah script di atas dijalankan, maka berikut ini isi tabel mhs setelah proses import datanya
Nah.. mudah bukan?? Oya.. pastikan class phpExcelReader tersebut terletak dalam folder yang sama dengan kedua script di atas.
Dalam membuat file Excel, Anda tetap bisa menggunakan Office 2007 asal ketika menyimpan filenya, pastikan formatnya adalah Excel 97-2003 worksheet (pilih Save As Type: Excel 97-2003 Worksheet).
Semoga artikel ini bermanfaat…
Kata kunci: import excel mysql - mysql excel - mysql script - phpmyadmin - script php import -
Don't worry, we won't post anything.
0
32
