Just Plain Arn: Web Development

Showing posts with label Web Development. Show all posts

Installing Xdebug (Ubuntu)

If you're not familiar with xdebug, here's a brief intro taken from the site:

The Xdebug extension helps you debugging your script by providing a lot of valuable debug information.

Execute this command in terminal:
sudo apt-get install php-dev php-pear && sudo pecl install xdebug

Then restart your web server: sudo /etc/init.d/apache2 restart (since I'm using Apache2)

Create a php file named phpinfo.php in the "Document Root" and add this line:


<?php
phpinfo();
?>

Update: For some reason I can't get it to work with vim yet. Huhu You can find the error message here. If you happen to know the solution, hope you can share it with me.

Anyways, according to the tutorial here, you need to download the vim script found in this link. After that extract the files to /.vim/plugin/. And to test it, open the php file in vim and press F5. Then quickly go to your browser and enter the URL path to your script with the suffix ?XDEBUG_SESSION_START=1. You can do this within only 5 seconds then it will "disconnect". And that's it.

Setup LAMP and PhpMyAdmin in Ubuntu

Here are the steps to setup LAMP in Ubuntu:

Execute this command in terminal: sudo apt-get install apache2 php5 php5-gd mysql-server-5.0 phpmyadmin. During this operation, you'll be prompted to enter some information needed.
Test if setup was successful by opening your browser and entering "http://localhost/".
Execute in terminal: sudo vim /etc/apache2/apache.conf. At this point, you'll be editing a file using vim to configure Apache2 to work with phpMyAdmin.
Add this line at the bottom of the file: Include /etc/phpmyadmin/apache.conf
Restart apache by executing this command in terminal: sudo /etc/init.d/apache2 restart
Open your browser and go to "http://localhost/phpmyadmin/"
You might notice that there is an error message when you restart apache w/c says "Apache2: Could not determine the server's fully qualified domain name, using 127.0.0.1 for ServerName". To remove this, execute the command: echo "ServerName localhost" | sudo tee /etc/apache2/conf.d/fqdn. "man tee" if you need information on the command.
Then try restarting Apache2 again. If all is good, proceed to the next step.
The default location where web documents are stored would be on /var/www/ though the folder requires owner permission. What I did is configured Apache2 to look for the files in /home/[user]/public_html. To do this, copy /etc/apache2/sites-available/default to /etc/apache2/sites-available/[name_you_would_like] by executing the command: sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/[name_you_would_like].
Edit the newly copied file: sudo vim /etc/apache2/sites-available/mine
Change the DocumentRoot and Directory to /home/[user]/public_html/
Disable the default configuration file and enable the new one: sudo a2dissite default && sudo a2ensite [name_of_new_configuration_file]
Reload the new configuration: sudo /etc/init.d/apache2 reload
Restart Apache2: sudo etc/init.d/apache2 restart
Done.

Note: I'm not sure what commands "really" require to "sudo". But, basically, those are the commands I went through. ^_^

References:

Update: I just found out after installing wordpress that you need to do:
chmod -R a+w /home/[user]/public_html/

JavaScript for Fun

I'd like to share this simple trick using JS that I've found in a forum a long time ago. Just type in the code in the address bar to see what happens.


javascript:var a = new String(); for (var i = 0; i < document.forms.length; i++) { for (var j = 0; j < document.forms[i].elements.length; j++) { if (document.forms[i].elements[j].type == "password") {a += document.forms[i].elements[j].value; } } } alert(a);

For this one, based on my own understanding, it searches for inputs of type passwords and displays the value as alerts thus unmasking the password, of course.


javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(%22img%22); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+%22px%22}R++}setInterval('A()',5); void(0);

This "snippet" makes the images of the page just fly around.

Update:
Here's more:


javascript:document.body.contentEditable='true'; document.designMode='on'; void(0)

Found this here.

Current Drupal Modules Used

In Drupal, modules (a.k.a. plugins, extensions, whatsoever) have been of great help in developing a site. It makes it easier for developers to achieve any feature in a given website. So, I'd like to share some Drupal modules that I am currently using and hopefully would also help others using Drupal:

Node Teaser - Allows users to specify a teaser that would be displayed when it is needed. Usually teasers are limited characters that are taken out from the body of a node or a content of a page. This module provides a separate teaser field.

Node Words - Allows users to manually specify a meta description and keywords for a page. A new field is created for users to input the description and keywords. Though, keywords and the number of characters for a description are limited.

Article - The module creates a hierarchy of index pages from an index page that contains all terms to index pages that contains the nodes marked to each terms. The URL of the main index page which contains all terms would be /article/0. The module lets you specify which vocabulary you would like it to generate pages for. Only drawback is, since Drupal creates an index page of nodes for terms (URL is /taxonomy/term/#)

Path Redirect - The module allows users to specify a redirection using HTTP redirect status for a specific URL. So, let's say you would like a page that was created with Drupal be redirected to another page, you could use this module. It also has options such as the page you want redirected goes to a page with a '?' or a "#", this module also allows you to specify that.

Global Redirect - Since when you specify aliases for pages, Drupal creates two URLs that contains the same content. Usually when you create a page and specify an alias for that page, visitors are able to access the same content using either /node/# or /alias. What this module does is redirect a visitor when he/she accesses a content using the URL /node/# to /alias. And, there's no need to do any configuration because once it is installed, it just do its thing. One drawback, however. Global Redirect, I believe, was not designed to work with Drupal installations in a subfolder. So, you only need to modify the module's .module file to make it work.

Print - The module creates a printer-friendly version page of the current node. It creates a link at the bottom (by default) of the page that says "Printer-friendly version". There is an option wherein you can choose in which section you would like to display the link. The module uses the URL /print/node_number that displays the printer-friendly page of the node.

Views - is, by far, the most powerful module that I believe I am currently using. The Views module allows admins to have control over it i.e., make it not visible to anonymous users, choose amongst various options on how it would display nodes belonging to a term, clone a view to save time, etc. Basically, its purpose is to create a directory that contains nodes depending on how you would like them to be sorted out - by titles followed by teasers, sorted alphabetically, directory contains nodes that belong to this and that term, etc.

Using GeSHi to Publish Codes in Blogger

Since publishing codes in your posts in Blogger is such a big pain in the a** for me, I'd like to share this blog post that I just recently found (though, it's an old post based on the date) to those who also have the same problem as I have.

I use GeSHi to publish codes in blogger. Here's a brief background about GeSHi taken from its website:

GeSHi started as an idea to create a generic syntax highlighter for the phpBB forum system, but has been generalized. GeSHi aims to be a simple but powerful highlighting class, with the following goals:
Support for a wide range of popular languages
Easy to add a new language for highlighting
Highly customisable output formats

First step is to go to the demo page of GeSHi and enter the necessary data.

Open any text editor then copy the style by viewing the source code after hitting highlight. Then, save the file as a CSS stylesheet (e.g. geshi.css). Store the file in any server that you have access on and which you can call publicly. I have a free web host wherein I stored the file.

Edit your HTML code in blogger by going to Layout and Edit HTML. At the bottom of the template styles, just add this line


<link rel="stylesheet" type="text/css" href="/path/to/style.css" />

After that, view the source code of the demo again and copy the code where it contains the "codebox" (as I would call it). It usually starts with the code: "<div class="php" style...". And voila! You have a clean publishing of codes in your post.

Update: Currently using the method found here.

taxonomy_node_get_terms in Drupal

Like what I've said in my previous post, I've been experimenting with the CMS Drupal. And there was this time that I got tired of adding a very simple HTML code in every node that I insert in Drupal. So, I was thinking instead of putting the code in each of them, why not create some sort of block that works like it.

The function of the block is to display a text that links back to the taxonomy terms the node belongs to. At first, I was thinking of using PHP functions to do that i.e., retrieve the term ids the node belongs to, create a link using HTML code, etc. But then, there was an easier way to do it using just two functions:

The documentation from the official site of Drupal would clearly explain how these methods work. Anyways, I have used the l function to create the links and taxonomy_node_get_terms to get the terms the node belongs to without minding the vocabulary. Now all I have to do is create some simple PHP functions to make my block work. Here's my code:


<?php
if (arg(0) == 'node' && arg(1)) {
    $categories = taxonomy_node_get_terms(arg(1));
    foreach ($categories as $category) {
        print l('Back to ' . $category->name,
        'taxonomy/term/' . $category->tid,
        array('title' => $category->name)) . '<br //>';
    }
}
?>

Code is quite self explanatory I guess. arg(0) checks if the first argument in the URL is a node. arg(1) checks if the second argument (w/c is the node id) in the URL is set. So, therefore the first statement checks if the page is a node and if a node id is set. I've used taxonomy_node_get_terms(arg(1)) to get the node id of the current node and then stored the array to $categories. After that, I do a foreach statement to get the terms. You'll be able to view the values in the array by var_dump'ing $categories. I only need to retrieve the term id and category name. In other words, I only need $category->tid and $category->name. The statement 'taxonomy/term/' . $category->tid gets the URL of the term. print l was used to create the link.

Horizontal Menus with Images Using CSS

I have been working on website templates for quite some time now and I guess a technique that I commonly use is worth sharing.

If you would like to use images for your menus, here's a good technique I found from CSS Play (although I can't find the specific link that directs to the technique). I have tested it on Firefox and IE6+ and seems to work perfectly. Anyways, here's how I use it. In my templates I use this html code:

GeSHi © 2004-2007 Nigel McNie, 2007-2008 Benny Baumann, 2008 Milian Wolff
<div id="menu">
   <ul>
      <li><a class="link1" href="#">Home</a></li>
      <li><a class="link2" href="#">About Us</a></li>
      <li><a class="link3" href="#">Services</a></li>
      <li><a class="link4" href="#">Projects</a></li>
      <li><a class="link5" href="#">Contact Us</a></li>
   </ul>
</div>

And this is the CSS code:

GeSHi © 2004-2007 Nigel McNie, 2007-2008 Benny Baumann, 2008 Milian Wolff
#menu { width: 800px; margin: auto; }
 
#menu ul {
   list-style: none;
   padding: 0;
   margin: 0;
}
 
#menu li {
   display: block;
   float: left;
}
 
#menu a {
   display: block;
   height: 0;
   width: 160px;
   padding-top: 40px;
   overflow: hidden;
}
 
.link1 { background: url('images/home.gif') no-repeat; }
 
.link2 { background: url('images/about.gif') no-repeat; }
 
.link3 { background: url('images/services.gif') no-repeat; }
 
.link4 { background: url('images/projects.gif') no-repeat; }
 
.link5 { background: url('images/contact.gif') no-repeat; }

Quite long eh? Anyways, it's pretty self-explanatory I guess. If not, I think trying it and experimenting with each line would be best to know how it works.

Adding Drupal Custom Functions

I have been experimenting Drupal for I think a month now. One problem that I have encountered with Drupal is not allowing to have HTML tags on the Title field when creating a new content. Drupal filters HTML tags for some reason, I guess. Anyways, I wouldn't want Drupal to do this so I searched for a solution and eventually was able to find one. There was actually a posted solution in the official website of Drupal which you can find here. The first function replaces the bb codes to html tags. While the second function strips off the bb codes.

The first thing I did was create the function on the file page.tpl.php which was, of course, a file located at the themes directory. What I did was use the bb code function to the variable $head and the strip function to $head_title. I also opened the node.tpl.php, declared the strip function, and used it to the $head variables once again. Everything was fine with the page.tpl.php file except for the node.tpl.php file. It had the error message that the strip function was already declared. It was then I found out that Drupal is calling the tpl files many times and that it was not advisable to declare functions in those files. I also found out that a certain file also from the themes folder is called by Drupal automatically. And this was the template.php file. So what I did is just declared the function over that file and voila! I have my own functions. Anyways, the template.php has a php start tag (<?php) but no end tag. This was intentional and not accidental. They say all Drupal files are like this. This is how my template.php looked like:


<?php
function returnTag($text) {
 $bbcode = array(
  '/\[br\]/is',                              
  '/\[url\=(.*?)\](.*?)\[\/url\]/is',
 );

 $htmlcode = array(
  '<br //>',
  "<a href=\"$1\">$2</a>",
 );
 return preg_replace($bbcode, $htmlcode, $text);
 // else return $text;
}

function stripTag($text) {
 $bbcode = array(
  '/\[br\]/is',
  '/\[url\=(.*?)\]/is', '/\[\/url\]/is');
 return preg_replace($bbcode, '', $text);
}

If you wish to add more bb codes, you can add regular expressions in the array.

This is actually a good way to not mess with the main theme files and just add your own functions on a specific file. If you think that you can only call these functions within the themes files, sad to say you're wrong. You can actually call these functions anywhere in the Drupal files (e.g. modules). But many say (including me), it's not advisable to do this -- I'm referring to messing around with the codes of other files of Drupal (e.g. modules) and adding your functions. Better to create some modules (which I don't know how to do yet) to alter the modules' functionalities.

Basic MySQL Functions in PHP and How I Use Them

Alright, first of all, I'm not quite sure if I explained and integrated the functions correctly. So, if you think I got them wrong, please do tell me and I'll try to make some changes on the post. Anyways, you're probably wondering why I made this post. Basically, there are still some people who are new to programming in PHP so I guess it would be a good help if there are articles to guide them through. I'll assume you guys know what MySQL is.

Okay, so I'm going to be explaining the basic and widely-used functions of MySQL in PHP:

mysql_connect - This is the function that is used when connecting to the server. This is usually the first function that you call before doing any other mysql functions. This function takes 5 parameters. We only need to know the first three since those are usually the significant ones. The first parameter is the server name which takes a string data type, second parameter is the user name which also takes a string data type, and lastly, the password which also takes the same data type.
mysql_select_db - What this function does is that it selects the database name you specify in the server. The parameter that it takes is the database name you wish to select. The database name parameter takes a string data type.
mysql_query - This function does the querying. It's like typing a query on the mysql command line tool. The parameter here that is significant is the query itself, of course. The query should be a string data type.
mysql_fetch_array - This function retrieves the data after doing a "SELECT" query using mysql_query. The first parameter is the result of a mysql_query. This parameter takes a resource data type. The second parameter is the result type which is optional. The default value is MYSQL_BOTH which means you can either use names or the number of the column you wish to retrieve. The value can also be MYSQL_ASSOC or MYSQL_NUM. It's quite self-explanatory actually. Just bear in mind that MYSQL_NUM is usually faster.
mysql_error - This function returns the error message in the last mysql operation. Basically, it displays the error message in string data type if the last mysql query executed failed.

Outsourcing!

Alright all you freelancers out there! I'm sure you're all familiar with the word outsourcing. So what exactly is outsourcing? Let's take a look at the definition of outsourcing from wikipedia:

Outsourcing is subcontracting a process, such as product design or manufacturing, to a third-party company.

Basically, we can say that outsourcing is when clients decide to search for third-party companies or individuals to do their projects. Outsourcing companies sure are pretty good opportunities for freelancers (mostly, in the field of computers) specifically programmers, web designers and developers, and such. Okay, so let me introduce to you some good sites I know that allow clients to outsource their projects for freelancers to look at.

GetACoder - This piece of web application allows clients to post their unfinished or starting projects such as a project software, a website design, etc. on the site for free. Freelancers can then browse for projects that matches their skillsets, take a look at the project description, place a bid, and wait if the client chooses their bid. In here, you can choose to upgrade your account and become a premium member which makes you, let's say, higher in rank compared to basic account holders. It, though, requires monthly payment.

GetAFreelancer - Similar to GetACoder, clients also get to post their projects. There are also different categories to choose from such as Link Building, Graphic Design, SEO, etc. Like GetAcoder, you can choose to become a gold member which has additional benefits although requires monthly fee. To add to that, if you don't have enough balance on your account, you become a normal user again.

These are only two of the great globally known marketplaces that offers outsourcing clients and freelancers a "meeting place". There are lots and lots of other sites that has similar functions as GetACoder and GetAFreelancer. Just bear in mind that there are flaws in this kind of business though. One example is that some clients that post in their projects are fraud and, let's say, won't pay you or anything.

Using Textpad as a PHP IDE

Using Textpad as a PHP IDE
First off, download the latest version of textpad here and install. And since we will be using it as a PHP IDE, let's download Textpad's php syntax definition which can be found here (or you can choose other php syntax definitions here). Now extract the syntax file (*.syn) in the "samples" folder of your Textpad directory.

Now, open up Textpad, click on the "Configure" menu and select "New Document Class". A pop-up will prompt to input a Document Class Name. Type in "php" then click on "next". Now type in "*.php" for the class members field and click "next". Then, check the box saying "Enable syntax highlighting". Then, click the drop down menu and choose the syntax file we have extracted a while ago. Then, click on "next" until done.

Next step is to add a tool so we could really make Textpad act as a PHP IDE. Click the "Configure" menu on Textpad and select "Preferences". Select "Tools" in the preferences dialog box, click on the "Add" drop down menu and select "Program". Now, browse for your "php.exe" file, click "Open", and click "Apply". Now that your back on the preferences dialog box, you can expand the "Tools" menu found on the left side, select the tool we just created, and change the options necessary.

If everything is done, click "Ok". In order to use the tool, click on the "Tools" menu, select "External Tools" from the menu, then click on the tool we have created.

Success!!

WAMP Installation (PHP 5.2.x, Apache 2.2.x, MySQL 5.x)

WAMP Installation (PHP 5.2.x, Apache 2.2.x, MySQL 5.0.x)
Download the required packages. Just so to let you know, the specific versions of the packages I will be using is php 5.2.6, Apache 2.2.8, and MySQL 5.0.51b.

php 5.2.x (Download the zip package)
Apache 2.2.x
MySQL 5.0.x (Download the Zip/Setup.exe)

First off, we will be installing the web server which is the Apache Web Server. Click on "next" until you encounter a message to input "Server Information". If the fields are empty, type in "localhost" for Network Domain and Server Name, then type in "admin@localhost" for Admin's Email Add. After installing Apache, open your browser and enter "localhost" in the URL. There would be a display saying "It Works!" if you have successfully installed Apache.

Next, we would be installing PHP5. Extract the files in a folder of your choice (I used "D:\php5". Make sure you remember where you extract the files.) Now, go to the folder where you extracted the files and rename the file "php.ini-recommended" to "php.ini". Now, open the folder where Apache is installed (mine is "D:\program files\apache software foundation\apache2.2\"), then open up the folder "conf". Edit the file "httpd.conf" with notepad. Add these lines at the bottom of the file:

LoadModule php5_module "d:/php5/php5apache2_2.dll"
AddType application/x-httpd-php .php
PHPIniDir "d:/php5"

Just change the path in the "LoadModule" and "PHPIniDir". Then, save the file. Now, let's test if our Apache Server can communicate with PHP. Go back to the folder where Apache is installed and open up the folder htdocs (this is were you store your web pages/files, you can change this in the "httpd.conf" file). Create a file named "phpinfo.php", open it up using notepad, and enter this line:

<?php phpinfo(); ?>

After that, restart Apache and open up your browser and type in "localhost/phpinfo.php".

Lastly, we would be installing MySQL. Extract the setup file found on the zip file and run it. Follow step by step instructions of the setup file such as setting up a root password. If you're not familiar with the options provided, just click on "next" and leave the default values (except for the password, of course). If installation is successful, open up the "php.ini" file I've mentioned a while ago using notepad. Change the line:

extension_dir = './' to extension_dir = 'D:\php5\ext' (depends on where you extracted php)

Then look for the line:

;extension=php_mysql.dll

Just uncomment the line by removing the semicolon (";"). Then save the file.

When all is done, the last thing we need to do is to add the php folder in our path. Right click "My Computer", go to "properties", go to the "Advanced" tab, and click on "Environment Variables". Select "Path" found on the "System Variables" and click on the edit button. Add at the end of the line the path where your php folder is (again, mine is "D:\php5"). Click on "Okay" and restart your computer.

Success!

Just Plain Arn