Showing posts with label web development. Show all posts
Showing posts with label web development. Show all posts

Saturday, 23 July 2011

PHP Development with NetBeans 7.0 - Debugging

In my previous post I talked about getting a PHP development environment set up using NetBeans and a locally installed Apache server on Ubuntu. In this post, we're going to be creating a slightly more complicated project to showcase the debugging abilities of NetBeans, which integrates very nicely with Xdebug.

Xdebug is a PHP extension which enables you to debug your code, same as if you were using something like VisualStudio with C#. In order to install and enable Xdebug on Ubuntu, you just need to run the command:

sudo apt-get install php5-xdebug

After this package has been installed, you have to enable remote debugging on Xdebug (it is disabled by default). Add the line:

xdebug.remote_enable=on

to the /etc/php5/conf.d/xdebug.ini file. In order for the changes to take effect, you will have to restart Apache:

/etc/init.d/apache2 restart

If you ever want to verify what the Xdebug settings are set to, you can see them on the default phpinfo() page.

Now that we've got Xdebug running, go ahead and create a new PHP project in NetBeans and name it 'PHPIncrement_Add':


You can leave the 'Run Configuration' screen settings set to the defaults:

In the template file, remove the php section and edit the file to include a simple form as below:

Then create a new PHP web page by right clicking on 'Source Files' -> 'New' -> 'PHP Web Page' and name the page results.php.

When results.php opens in the editor window, modify it to look like the following:

Ok, so now we have a simple web application, which takes two integers, increments them and then displays the result. We can go ahead and test this out by hitting the 'Run Project' button (or pressing F6) and we should see the following in our browser:

And after hitting the 'Submit' button, we can see the result:

So now we have a very simple, working PHP application. Now lets see how we can debug our program. We've already installed and configured Xdebug, we just need to modify a few options in NetBeans. In NetBeans, go to 'Tools' -> 'Options' -> 'PHP' -> 'Debugging' and check the 'Watches and Balloon Evaluation' checkbox:

After you check the box, you might get a warning saying "Please note that Xdebug is known to be unstable if this option is enabled". I've never had Xdebug crash on me with this option enabled so far. Also note that I've left the 'Stop at First Line' option unchecked, this is just my personal preference.

Next we can go ahead and set some breakpoints by clicking in the left hand margin of the editor window, where the line numbers are shown:

To start our debugging session, we can click on the 'Debug Project' button, which is next to the 'Run Project' button, or alternatively press Ctrl+F5.

At the start we are presented with the index.php page, so just go ahead and enter some numbers and hit the 'Submit' button. Once this is done, you will automatically switch back to NetBeans, with the debugging session started:



If you select the 'Variables' tab on the bottom pane and press the 'Step Into' (F7) button, you can see the values of $number1 and $number2:

Press the 'Continue' (F5) button and the code should keep executing until it gets to the breakpoint in the incrementAdd function. Now the 'Variables' pane doesn't show us the value of $result, however we can fix that simply by right clicking on $result in the editor pane, selecting 'New Watch...' and entering $result as the 'Watch Expression':

Note that the value of $result will be null on our breakpoint, but after pressing the 'Step Into' button, it's value is set.

Hit the 'Continue' button and you will see the results.php page displaying the results of the calculation.

So, in this post we've successfully installed and configured Xdebug and got it working with our NetBeans IDE, as well creating a simple project and going through a basic debugging session. Please keep in mind that this is a very simple example and that debugging for such a basic project would probably not be necessary. The debugger is especially useful when we have a obscure bug which we need to track down, we want to see the flow of control in a complex piece of code or maybe verify what values are being passed to the database.

PHP Development with NetBeans 7.0

In this post, I'm going to be going through creating a simple PHP project using the NetBeans 7.0 IDE and deploying it to a development Apache HTTP server, running on the same machine. All of the instructions below were tested on Ubuntu 10.04 and assume that you have a LAMP stack (although we don't need the MySQL component for now) and NetBeans installed (I've used the All bundle, which comes with PHP) and have the userdir module for Apache turned on (see my previous post).

In terms of usability, I find NetBeans to be one of the best open source PHP IDE's available, with excellent support for things like autocomplete and debugging, which make development a whole lot easier.

To start off with, open up NetBeans and create a new PHP Project:

I've set the project name to "PHPHelloWorld" and I found that NetBeans detected my ~/public_html folder automatically:

NetBeans also detected my local web server and URL settings:

For our simple HelloWorld application, we don't require any PHP frameworks:

After clicking 'Finish', we end up with the default PHP template:

Now I added some code, including a function to the index.php file. I've included a function in the code so that when you type it out you can see some of the NetBeans autocomplete features:

Finally, click on the 'Run Project' button (or hit F6) and watch as your program deploys:

Apache HTTP Server userdir module

As a part of setting up a development environment for creating web applications/sites to be deployed to Apache HTTP Server, one of the things I would highly recommend is making use of the userdir module. This module allows a user to create their own directory (under /home/[user]/public_html) and have that directory automatically be made accessible by Apache at http://localhost/~[username]/ and thus skips a lot of the headaches that are caused by permission problems.

To set up this module, first you need to create this directory:

mkdir ~/public_html

The next step is to enable the module:

sudo a2enmod userdir

Note that if you want to change the name of the directory or any other settings for this folder, you can do so by editing the /etc/apache2/mods-available/userdir.conf file.

Then, finally we just need to restart apache for the module to be loaded:

sudo /etc/init.d/apache2 restart

If it all went well, you should now be able to open your browser and browse to http://localhost/~[username]/ and see the contents of your public_html directory.

Another very important thing to mention is that by default, PHP processing is disabled on this directory. If you need to turn on PHP processing, you need to modify the /etc/apache2/mods-available/php5.conf file:


<IfModule mod_php5.c>
<FilesMatch "\.ph(p3?|tml)$">
SetHandler application/x-httpd-php
</FilesMatch>
<FilesMatch "\.phps$">
SetHandler application/x-httpd-php-source
</FilesMatch>
# To re-enable php in user directories comment the following lines
# (from <IfModule ...> to </IfModule>.) Do NOT set it to On as it
# prevents .htaccess files from disabling it.
<IfModule mod_userdir.c>
<Directory /home/*/public_html>
php_admin_value engine Off
</Directory>
</IfModule>
</IfModule>


Like it says in the commented out sections of this file, you just need to comment out the mod_userdir.c section to enable PHP on the ~/public_html directory.

Monday, 18 April 2011

Grails part 2 - First Project

In my last post we talked a little bit about the web framework known as Grails and went through the steps required to get a working Grails development environment setup. In this post we are going to go ahead and create our first working application using the framework.

For the first application, we're going to be creating a very simple application called BookStore. It's going to consist of only two types of "objects", called "Book" and "Author". So, to begin with, the first command we want to run is:

grails create-app BookStore

This will go ahead and create the project as well as producing a lot of output. The output is the result of Grails creating the default project directory structure. Being a COC framework, grails assumes certain things about how we're going to layout our project, meaning that the unit tests are under BookStore/test/unit, the integration tests are under BookStore/test/integration and the CSS files are under BookStore/web-app/css.

Next we need to change into the newly created project directory and create the Book domain class:

cd BookStore
grails create-domain-class bookstore.Book


The "create-domain-class" command has gone and created two new files for our project, one to define our Book class and the other a Unit test class for Book. They can be found under:

BookStore/grails-app/domain/bookstore/Book.groovy
BookStore/grails-app/test/unit/bookstore/Book.groovy


In order to do something a little more useful with our domain class, we're going to have to give it "properties". In order to do this, open the domain class definition for Book and modify it to look like the following:

package bookstore
class Book {

String title
Author author
static constraints = {
}
}


We now have a Book class with a "name" and an "author" property. However, we haven't created the Author class yet, so this property isn't pointing to anything at the moment. Let's change that by creating an Author class:

grails create-domain-class bookstore.Author

This should create the Author domain class in much the same way that it created the Book class. Let's modify this new class to have a name property and let's add a property to point to all of the books that this author has written. Modify the BookStore/grails-app/domain/bookstore/Author.groovy file to look like the following:

package bookstore
class Author {
String name
static hasMany = [books:Book]
static constraints = {
}
}


The line static hasMany = [books:Book] is an important one as it defines the "many" part of the "one-to-many" relationship between Book and Author. i.e. each Book has one Author and an Author can have many Books.

We can now run our application with:

grails run-app

And then navigating to http://localhost:8080/BookStore/. However, at the moment this just shows us the default grails home page and there's not much we can do with it. This is because we haven't defined any controllers in our application. Controllers, of MVC fame, are the things which handle the application logic of our web-app. What does this actually mean? Well, they receive incoming requests, decide where to send them and how to deal with any incoming data. They also supply data to the view layer to be used to display our objects to the user.

In order to grace our application with some controllers and views, we will execute the generate-all command which will get us up and running with both a controller and views:

grails generate-all bookstore.Book

We then also need to do this for the Author class:

grails generate-all bookstore.Author

Now, when we run the grails run-app command and navigate to http://localhost:8080/BookStore we should see two controllers on the default Grails page. Selecting either of these controllers will allow us to execute the full set of CRUD commands on the Book and Author classes.

If you've had a go at creating a new Author and/or Book object(s) you'll notice that when creating a new Book for example there is an Author drop down generated containing a list of all of the Authors. However, instead of displaying the Author's name property, the drop down is listing the id and the class type, which is not very pretty. To change this behaviour we're going to overwrite the toString method for both the Book and Author class.

Modify Book.groovy to look like:

package bookstore
class Book {

String title
Author author
static constraints = {
}
String toString(){ return title }
}


And Author.groovy to look like:

package bookstore
class Author {
String name
static hasMany = [books:Book]
static constraints = {
}
String toString(){ return name }
}


And that's it for now. We've ended up creating a simple BookStore application with two domain objects in a one-to-many relationship.

I've only started scratching the surface of what can be done with Grails. In the coming weeks I'd like to go over unit tests, views, authentication and authorization and as many more topics as time will allow.

Friday, 8 April 2011

Grails - Ruby on Rails for the JVM

This post will be about a framework for the JVM called Grails, which stands for (or rather, used to stand for) Groovy on Rails. Grails is a RoR-like framework making use of the Groovy language and the "Convention over Configuration" paradigm which RoR seems to have made so popular.

First a little bit of history as to how I discovered grails. I was introduced to the grails framework in a round about way, when I started looking for the perfect RoR IDE and ended up using Netbeans (funnily enough, Netbeans has since dropped support for RoR). As a way of getting familiar with Netbeans I started working my way through the Netbeans tutorials, trying out the different frameworks and technologies along the way. This eventually led me to Grails. If there's one thing to be taken away from this little story it's to never stop learning new ways to write code and that the Netbeans tutorials are an excellent resource :-)

So, to get on with the show. We will be using a clean install of Ubuntu 10.10 (desktop edition) as our operating system, so bear in mind that you may have to tweak the commands below depending on your enviroment. The first thing we need to do before installing grails is to ensure that we have a Java runtime environment and a Java Developement Kit installed. Ubuntu 10.10 should come with the OpenJDK JRE installed by default. To check this out we open a terminal run java -version and we should see the following as output:

java version "1.6.0_20"
OpenJDK Runtime Environment (IcedTea6 1.9.7) (6b20-1.9.7-0ubuntu1)
OpenJDK Client VM (build 19.0-b09, mixed mode, sharing)


To install the JDK, we run:

sudo apt-get install openjdk-6-jdk

and install all of the necessary packages.

In order to run grails from the command line, we'll also need to set the JAVA_HOME and GRAILS_HOME variables as well as adding these to the PATH. We can achieve this by adding the following to the bottom of our ~/.bashrc file:

export JAVA_HOME=/usr/lib/jvm/java-6-openjdk
export GRAILS_HOME=$HOME/grails
PATH=$PATH:$JAVA_HOME/bin:$GRAILS_HOME/bin


NOTE: We'll have to open a new console window for these environment variables to become available.

Now that we've setup the environment, we can go to grails.org and download the latest Grails binary (1.3.7 at the time of this article). I usually move it to the home folder so that it's sitting under ~/grails-1.3.7. The observant amongst you will have noticed that in our ~/.bashrc file we've set $GRAILS_HOME to ~/grails previously, so in order to make this work, we create a symbolic link to this folder using ln -s ~/grails-1.3.7 ~/grails. We should now have our grails environment set up, so running grails from the terminal should give the following output:

Welcome to Grails 1.3.7 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: /home/srdan/grails

No script name specified. Use 'grails help' for more info or 'grails interactive' to enter interactive mode


Congratulations, we now have a working grails install!

That's it for this post, in the next one we'll be having a look at creating our first grails project.

Tuesday, 18 March 2008

So there's only web development...

So, after talking to a friend of mine he came up with a statement that I believe sums up the New Zealand IT industry pretty well. "Its all web development". The industry here contains a few large companies, which hire some CS/SE graduates, but the vast majority will find themselves after university working on some aspect of developing essentially web pages.

For someone who doesn't particularly enjoy web development, this is a rather bitter pill to swallow, learning that if you want to work in any other aspect of IT, you should probably move to Australia/UK/America.

What's even more disappointing is that during my 5 and a half years at university, there was hardly any emphasis placed on web development. I think in total there were 2 courses that dealt with any kind of web development. This leaves a large gap in my education, as people that are hiring are looking for experience with CSS, Javascript, AJAX, technologies which the university does not teach at all, and PHP/ASP.NET, MySQL/MSSQL which the university does a poor job of teaching. In fact looking at the curriculum the only thing that the Computer Science degree seems to prepare you for is more Computer Science.

So anyway... It's no use bitching about the past now. If I'm doomed to become a web developer then I might as well become the best fucking web developer this side of the equator. But this is going to involve a lot of learning. The type of learning I dread and generally avoid. Learning by yourself, in your own spare time. Having to force yourself to read another chapter after coming home from work tired and worn out from your shitty job. The really hard kind of learning... fuck.

But I do in fact have a plan. And having a plan keeps me from having a total nervous breakdown, something which I've been really close to this last month.

My plan essentially involves learning everything about web technology, from the ground up, from setting up a LAMP server to AJAX. This is an ambitious goal for me, one which might take over a year or more to complete as I don't know how much time I will be able to commit to my "2nd education". But I do know roughly what it will involve.

Step 1: Wiring up my house. That is to say put in ethernet cables connecting the bedrooms of the house, the living room and the garage. This will allow me to put my de facto webserver (old HP pentium 4 my girlfriend was going to throw out) into the garage and to have it running full time. This computer is a mixture of web server and storage server (after adding a 320GB HDD) and will serve files to the internet and to the different devices around the house (in the future I could have a separate machine as a file server and a webserver) This should also give me experience on how to set up a network for a SOHO (Small Office Home Office).

Step 2: Domain Name. Opening an account with a dynamic dns provider and setting up a domain name. Probably going to use dyndns.com as it seems to be quite popular.

Step 3: Learning about webservers, file servers, ssh servers, nfs servers, ftp servers, proxies etc... Because I want my web/storage server to be universally accessible it needs to be able to serve files across a wide range of protocols. For each of the types of server I need to
  1. Install the software
  2. Configure the software i.e. get it to do what I want securely
Luckily I have found a resource that deals with these issues and a lot more. The resource being www.linuxhomenetworking.com. The website is well written, easy to read and up to date. It's also free.

[NOTE: I should mention now that I intend to use only OSS software as a part of this education, for reasons which I will probably write about later]

Step 4: Install software for the management of my server. This includes things like Webmin, MySQL Administrator, PHPMyAdmin and perhaps some software to configure Apache (is there a decent GUI frontend for Apache or does it come down to editing config files?)

Step 5: Installing existing CMSs' and understanding how they work. Looking at software such as Joomla!, Drupal, Wordpress, Blogger (is the blogger source code available?), Silverstripe (Go NZ!) etc... and looking at how they are made, paying particular attention to how they handle extensibility (add-ons, extensions) and theming. However for the basic ideas on how to create a CMS I'll probably start with php-mysql-tutorial.com. It should be interesting to see how much difference in the designs of these CMSs' there is and the benefits/disadvantages of each approach.

Step 6: Learn Cascading Style Sheets. I have a real love/hate relationship with CSS. That is to say I f***ing hate CSS. As far as I'm concerned, CSS is a great idea (separation of content and presentation), implemented in a totally illogical, counter-intuitive, overly complex way. But to be fair, that's what I thought of a lot of programming languages I learned until I "got" them. So maybe sometime in the future I will really love CSS, but I wouldn't bet money on it. I'm probably gonna go with the tutorials from W3Schools or failing that get a book from the university library on CSS.

Step 7: Learn Javascript. Again, I feel like I'm 10 years behind the learning curve with this one, but thanks to university (and my own lack of interest in web development) this is another area which I have hardly any experience with. With this one I'm gonna follow the W3Schools tutorials and if needed get a book from the uni library.

Step 8: Learn XHTML. Another one from W3Schools. Basically need to learn along with Javascript to be able to understand AJAX in step 9.

Step 9: Learn AJAX. Start with W3Schools tutorial on AJAX, then can move on to other examples on the internet. There's so many on the web that the biggest problem learning is going to be information overload. A book might be useful as well.

So then the question arises as to what to do with all of this new web development knowledge and the server sitting in my garage. The thing to do I guess would be to make a website to showcase my talents which could be a point of reference for people seeking examples of my skills/knowledge.

Also the idea of creating a photo gallery CMS based on the work I did with LaPhotographie is an idea I've had for a while. Such a system would, of course be open source and perhaps some day take off and become more than a pet project.

And the possibility of turning the setup in my garage into a web hosting company is there as well.

So there you go, that's my plan. It helps me to keep busy and ignore the fact that I'll probably end up doing web development for a long, long time.