Small Program Blog » PHP

Mac OSX: Add Hosts to Local hosts file

Sunny — Mon, 14 Sep 2009 08:01:38 +0000

I was in the hospital for awhile, so I have not had a chance to update my blog.

Yesterday I installed OpenSuse to my VM on my Mac Pro because I wanted to play with Magento, so I installed Apache, PHP, and mySQL with all necessary modules. Everything is going well, and Magento(1.1.3) finally installed successfully with it’s sample data today(it was a bitch until I changed the hostname to localhost.com!) . However, I set my VM hostname as localhost.com, and I would like to access it from my OSX Safari. And of course, my DNS records localhost.com as something else on the internet, but not pointing to my VM’s IP address.

So what should I do? I have to change the “hosts” file on my Mac. It is located at “/private/etc/hosts“. In order to edit it, you have to grant yourself as root privilege, but by default “root” account is disabled in OSX. Therefore, you will use command “sudo“. For example, I use vi for editing, I will type “sudo vi /private/etc/hosts” in my terminal windows, and it will prompt me to enter a password(which it should be your admin password on OSX). Once you get authorized, you should be able to edit the hosts file.

To enter a new hostname in hosts file, in a new line at the end, type in IP address, then Tab, and the hostname. Once saved, Mac OSX should resolve the hostname to that IP address.

Flex – Playing with Twitter API and solving the cross-domain problem

Sunny — Thu, 26 Mar 2009 17:27:30 +0000

Today I wrote a small and simple Flex program with Twitter API. Here is my code:

and you can see the result here: http://sunnycyk.hk/twitter/

It may look easy, but actually it takes me sometime to figure out how to make it works. The code was working fine in debug mode with Flex, but it did not work on release mode. I was wondering why and searching on internet, and finally figure out it is because of security reason.

There are couple methods you can try, but I just used a easy way to do it by adding a proxy.php file. What proxy.php does just requests data from the remote domain site (for my case, it is “http://twitter.com/users/show/skyc999.xml”), and regenerates the output so that your flash player will think that you are working with a local XML file.

When my flash file runs, it will call proxy.php. Then proxy.php will grab XML file from Twitter, and generate the XML output to my flash file. Because my flash file only calls the local file, it does not voliate the flash player security policy setting, and everything works again!

The proxy.php only contains two line of code:

If you are a twitter user, you can try my program(download it?) and replace the skyc999 in $dataURL with your screen name.

This example just gives a basic idea how to work with cross-domain files and Twitter API. Hope it can help you (and me)

WordPress Theme – My header.php

Sunny — Tue, 24 Mar 2009 10:30:16 +0000

This is code for my header.php:



  
  >


  

<?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>

First, I have setup some header information with bloginfo() in the Header tag. You may just take a look how I did that because you mostly will put the same header as mine.

After the Header Tag, I defined a Wrapper layer “page”

This is the wrapper for all contents in my blog. In this wrapper, usually you will define four different parts(or layers).

1. Header
2. Content
3. Footer
4. Sidebar

And for this example, this file is called header.php, so I will define our “Header” layer here. Next 5 lines, I have defined my “Header”:

In the header layer, I have defined another wrapper called “headerimage”. This is because I want to wrap my Blog title and description in my header layer.

Later on, I will show you how I created index.php for my content layer. footer.php for my footer layer, and sidebar.php for my sidebar layer.

One more thing I forgot to mention, in header section, there is a php code:

is_singular() will check if this page is a single post (only one post on the page, and actually there is a template file called single.php that you may also define it yourself or by WordPress default template. single.php is liked index.php which I will call my header, sidebar, and footer files here except it only displays one post per page). In my case, I only want to include javascript for replying a comment when someone land on single.php, or else the code should not be included.

So, it looks pretty simple right? However, don’t forget the code above has no decoration, so you will have to define your own CSS style for each layer and wrapper, or otherwise you will only see plain text on your header.


body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Arial, Helvetica, sans-serif;
	background: #ffffff;
	color: #333;
	text-align: center;

}

#page {
	border: none;
	background:url(image/layoutbg.png) repeat-y bottom center;

}

#header {
	background: url(image/headerpic.jpg) no-repeat top center;
}

#headerimage {
	width: 830px;
	height: 195px;
}

#header h1 {
	font-size:36px;
	text-align: center;
	color: #903;
}

#header a, #header a:visited {
	text-decoration: none;
	color: #903;
}

#header a:hover {
	text-decoration:underline;
}

#headerimage .description {
	font-size:14px;
	text-align: center;
	color: #666;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}

body {
	margin: 0px 0 20px 0;
	padding: 0;
}

#page {
	margin: 0px auto;
	padding: 0;
	width: 830px;
}

#header {
	margin: 0 0 0 0px;
	padding:0;
	height:195px;
	width: 830px;
}

#headerimage {
	margin: 0;
}

#header h1 {
	margin: 0;
	padding:70px 0px 0px 0;
}

#headerimage .description {
	margin: 0;
	padding:1px 15px 0 0;
}

Please forgive my mess. I defined them twice because I kinda modified from the default WordPress Theme which it separates the style of structure and coloring in two parts. You may just group them in one depends on what you like.

WordPress Theme – Highlight Plugin

Sunny — Thu, 12 Mar 2009 02:41:47 +0000

When I was trying to post some PHP coding, I found it is not easy to decorate it.. for example, you want the code to be aligned, so that it is user friendly (easy to read). Then you need to handle space for each line. Also, you may want to highlight some keywords. There will be a lot of work, and some programming languages look really similar, but if you want to decorate them, you may have to do it one by one, and it could suck out most of your time.

Fortunately, WordPress has a plugin that helps you to do all the works for you. It is called Highlight, and you can download it and use it as WordPress plugin or just code it within your HTML file. You only need to assign some CSS style such as color for keywords. This is very nice because usually I like to program everything myself, but this really saves me a lot of time. (On the other hand, many things on the web are really useful).

For example,

and my CSS Style (which applies the highlight for the code above and below for showcase):


code {
	color: #000099;
	font: normal "Courier New", Courier, monospace;
	white-space: nowrap;
	padding: 0 2px;
}
pre code {
	display: block;
	clear: both;
	background: #FDF;
	color: #333;
	border: solid 1px #ccc;
	overflow: auto;
	line-height: 140%;
	white-space: pre;
	width: 470px;
	text-align:left;
}
code .comment {
	color: #888;
}
code .class, code .rules {
	color: #ff00ff;
	font-size: 100%;
}
code .value,  code .title, code .string {
	color: #0000FF;
}
code .tag {
	color: #000099;
}
code .keyword {
	color: #000099;
}
.html .attribute {
	color: #006600;
}

All I have done is just put all my code within

and it will decorate my code with my CSS style. Isn’t it really easy? yea, you can compare my old posts which I just use

and style it, and which still doesn’t look good.

One more thing, if you do not want to use it as plugin, you can just put these two lines of code on your web page (The WordPress plugin will automatically add these two lines to your WordPress blog) :

It is pretty easy, right?

For more information about Highlight, you can visit this Link:
http://softwaremaniacs.org/soft/highlight/en/

WordPress Theme – A Very Nice Tutorial

Sunny — Tue, 10 Mar 2009 17:07:05 +0000

I actually found a very nice tutorial site for designing the WordPress Theme. I will say compare to this site, my blog for designing the WordPress Theme is a mess… haha..

ok, anyway, here you go: http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/

It has many tricks too. Good for anyone wants to do some graphic and web design (same as me )

WordPress Theme – Sidebar

Sunny — Mon, 09 Mar 2009 17:05:38 +0000

In WordPress, there are widgets such as calender that may appear on your theme based on your appearance setting. Usually they will appear on sidebar when you add the widgets in the theme. If there is no widget adding to the sidebar, a function dynamic_sidebar() will return a FALSE value. This function is useful if you are designing a theme template because you may want to create something if there is no widget on the sidebar. For example, you may want to include your own widget to the sidebar if user has not included any widget in the theme appearance setting.

Further, if you want to add widget at the appearance setting, you will need to register the sidebar to WordPress in the file function.php. The function register_sidebar() will tell the plugin that your theme will need exactly one sidebar and your admin inteface should have Sidebar Widgets in the Presentation menu. register_sidebar() also allows you to decorate the widget by adding a parameter to it. For example,

if (function_exists(’register_sidebar’) )
register_sidebar(array(’before_widget’=>’ ‘,
‘after_widget’ => ‘ ‘,
‘before_title’ => ‘

’,
‘after_title’=>’

’));
?>

before_widget and after_widget means that something that you want to decorate the widget.. you may think it can be a warper and you will warp your widgets. In this example, we put nothing, so there is no decoration for this widget warper. Then before_title and after_title, will decorate the wiget title with

and

. The output will look like this:

Widgets Title

What if you want to include more than one sidebar? Then instead of using register_sidebar(), you will use register_sidebars(n) where n is the number of sidebars. (starting with 1)

For more information, you may check out this page to see how to widgetizing themes with sidebar.
http://codex.wordpress.org/Widgetizing_Themes

WordPress Theme – WordPress Loop

Sunny — Sun, 08 Mar 2009 09:22:24 +0000

WordPress Loop is the Loop that is used by WordPress to display each of your blog posts. Using the Loop, WordPress processes each of the posts to be displayed on the current page and formats them within the Loop tags.

Basic WordPress Loop structure will look like this:

Let me explain what is going on. First, you need to know that there is a global object called $wp_query, and when WordPress generates your blog pages, it will build and execute a DB query that results in an array of posts, and which will store in the $wp_query object and also return back to the blog header where it is stuffed into the global $post array.

The have_posts() actually calls $wp_query->have_posts() which checks a loop counter to see if there are any pots left in the post array and return a boolean value TRUE if there is post or FALSE when we have exhausted the loop. And the_post() calls $wp_query->the post() which advance the loop counter and sets up the global $post variable as well as all of the global post data. On the other hand, It takes the current item in the collection of the posts and makes it available for use inside the iteration of the Loop.

Once you understand how the WordPress loop works, then you can use this loop for displaying your blog posts. So, here are some functions that you probably will put inside the WordPress loop:

the_title() – Display the current post’s title

the_time(format) – Display the date with format

the_author() – Display the author name

the_permalink() – a Permanent Link that point to the current post

the_content() – Display the content of the post

There are more technique you can use and display inside the loop. Here I just post some common functions that you will usually use, but there are more function you can do such as comment for the post. You can find more information here:

http://codex.wordpress.org/The_Loop
http://codex.wordpress.org/The_Loop_in_Action

WordPress Theme – wp_enqueue_script() and Conditional Tags

Sunny — Thu, 05 Mar 2009 16:18:31 +0000

Conditional Tag:

Using Conditional Tags for testing whether a certain condition is met, and then returns either TRUE or FALSE.

For example,
is_home() will return TRUE if the main blog page is being displayed.

Some of the conditional tags may contain parameters for conditions. More information can be found here: http://codex.wordpress.org/Conditional_Tags
Function: wp_enqueue_script():

wp_enqueue_script(handle, src, deps, ver) is a function for adding Javascripts to a WordPress generated page. It accepts four parameters:

Usage: wp_enqueue_script(handle, src, deps, ver)
handle - (string) Name of the script. Lowercase string.
src - (string) (Optional) Path to the script from the root directory of WordPress. Default is false.
deps - (array) (Optional) Array of handles of any script that this script depends on; scripts that must be loaded before this script. Default is false.
ver - (string) (Optional) String specifying the script version number, if it has one. Defaults is false.

WordPress Theme – bloginfo() and include tags

Sunny — Thu, 05 Mar 2009 05:49:33 +0000

I am learning Flex and iPhone programming right now, but since I have installed WordPress, so I have decided to learn about how to write WordPress Theme first. (Yea.. I just want to learn everything…)

This is my very first WordPress Theme. Very simple, and kinda modified from the default theme which comes with WordPress. I actually have hard time to understand the API and function references from WordPress when I was drafting it at the beginning, but it is kinda straight forward. It is not completely done, and I may just zip it here when it is completed in the future.

I am not going to write much detail here, but going to put some references here for myself for future development.

bloginfo() , get_bloginfo():
http://codex.wordpress.org/Template_Tags/get_bloginfo

get_header(), get_footer(), get_sidebar(), comments_template():
http://codex.wordpress.org/Include_Tags