Actions

Difference between revisions of "Setting up your workstation for Joomla! development"

From Joomla! Documentation

(Replaced svn configuration links with git/github pages)
m (merge, two article same name only missing ! in Joomla!)
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{RightTOC}}
+
{{merge|Setting up your workstation for Joomla development|date=15 Sep 2013}}
 +
This article provides detailed instructions for setting up your workstation for Joomla! development with Apache, PHP, xdebug, Git. Please refer to the following links for other development tools and environments: [[Setting up your workstation for Joomla development]]
  
== Introduction ==
+
The article more specifically let's you contribute to the official Joomla! Github code repository.
This article provides detailed instructions for setting up your workstation for Joomla! development with Apache, PHP, xdebug, Subversion. Please refer to the following links for other development tools and environments: [[Setting up your workstation for joomla development]]
+
 
+
The article more specifically let's you contribute to the official SVN Joomla! code.
+
 
+
The examples used and screenshots are for Windows XP, but the basic steps are the same for Linux.
+
  
 
== Install & configure XAMPP, php, Eclipse ==
 
== Install & configure XAMPP, php, Eclipse ==
Line 12: Line 8:
 
# [[Edit PHP.INI File for XDebug]]
 
# [[Edit PHP.INI File for XDebug]]
 
# [[Configuring Eclipse for joomla development]]
 
# [[Configuring Eclipse for joomla development]]
# [[Git for Testers and Trackers]]
 
# [[Working with git and github/My first pull request]]
 
  
== Check Out Joomla! Source Code ==
+
== Check Out and modify Joomla! Source Code ==
 
Now we are going to create a new PHP project that will contain all of the source code files for Joomla!. We can import the source code and create our PHP project at the same time.
 
Now we are going to create a new PHP project that will contain all of the source code files for Joomla!. We can import the source code and create our PHP project at the same time.
===Import Project===
 
To start, select File / Import to display the Import screen. Expand the SVN node and select "Checkout Projects from SVN" as shown below.
 
 
[[Image:Checkout_projects.png]]
 
 
Press the Next button to display the "Checkout from SVN" screen shown below.
 
 
[[Image:New_repository.png]]
 
 
Check the item "Create a new repository location" and press the Next button to display the screen shown below. Enter the location "http://joomlacode.org/svn/joomla/development/trunk" for the 1.6+ trunk.
 
 
[[Image:Repository_location.png]]
 
 
When it asks for the username and password, use "anonymous" as the username and leave the password blank.
 
 
Press the Next button. Eclipse will work for a few moments and then display the parent folder and subfolders for this SVN repository, as shown below. Several times during the following process.
 
 
[[Image:Checkout_select_folder.png]]
 
 
Select the top line (the top-level folder) and press Next. Check the option "Check out as a project configured using the New Project Wizard" and in the next dialog enter the project name of "Joomla 1.5 Source", as shown below.
 
 
[[Image:Svn_check_out_as.png]]
 
 
Press the Finish button. The New Project "Select a wizard" dialog will display. Select PHP / PHP Project, as shown below.
 
 
[[Image:New_project_wizard.png]]
 
 
Press Next to display the "New PHP Project" wizard screen. Enter the project name, "Joomla 1.5 Source", as shown below.
 
 
[[Image:New_php_project_svn.png]]
 
 
Press Finish. A warning message will display as shown below.
 
 
[[Image:Check_out_warning.png]]
 
 
Press OK. At this point, Eclipse will work for several minutes, downloading all of the Joomla! source code files from the Joomlacode site. You will see a progress bar, as shown below. In the lower right corner you will see a message "SVN Checkout (xx%)", again showing the progress of the checkout.
 
 
[[Image:Svn_checking_out.png]]
 
 
After a few minutes, the new project will be created, and you should see the familiar folder structure of Joomla!, as shown below.
 
 
[[Image:Joomla_php_project.png]]
 
 
===Run and Install Joomla!===
 
Next, let's run the Joomla! front end from inside Eclipse. The file we need to run is "index.php" in the home directory. Right-click this file and select Run As / PHP Web Page, as shown below.
 
 
[[Image:Run_as_php_2.png]]
 
 
The first time you do this, the following screen will display showing you the URL that Eclipse is executing. Press OK.
 
 
[[Image:Run_joomla_index.png]]
 
 
Our default browser opens and runs Joomla!. Since this is the first time we have executed this copy of Joomla!, we are taken to the Joomla! Installation Wizard, as shown below.
 
 
[[Image:Index_installation.png]]
 
 
Go through the normal installation process. Install the sample website.
 
 
Note: This SVN version controlled code has been specially altered so you don't need to (nor would you want to) delete the "installation" folder.
 
 
===Run Joomla! Back End===
 
To execute the Joomla! back end, navigate to the "administrator/index.php" file and again right-click and select Run As / PHP Web Page. This time we are executing the administrator "index.php" file as shown below.
 
 
[[Image:Admin_index_run.png]]
 
 
Press OK and the Joomla! login screen should display.
 
 
At this point, we have the complete Joomla! source code synchronized with the Joomla! source repository and we can execute the Joomla! front end and back end from inside Eclipse.
 
 
== Create a Test Joomla! Patch ==
 
Let's create a simple patch file using Eclipse. We're going to add comment lines to two different files and then create a patch that could be (but won't be) used to update the Eclipse SVN repository.
 
===Edit Files===
 
Navigate to the file "components/com_content/views/frontpage/tmpl/default.php" and add a new comment line as shown below.
 
 
[[Image:Default_php_comment.png]]
 
 
Save the file (either Ctrl+S or press the Save button in the toolbar).
 
 
Now, open the file "components/com_content/views/frontpage/tmpl/default.xml" by double-clicking on it in the PHP Explorer view. Eclipse has an XML editor built in, although you can configure it to use an external editor if you prefer. The XML editor has two tabs at the lower left: Design and Source. The Design tab opens by default. This present a tree structure of the XML file. You can expand any of the trees, as shown below.
 
 
[[Image:Eclipse_xml_design.png]]
 
 
Click on the Source tab to display the Source window, as shown below.
 
 
[[Image:Eclipse_xml_source.png]]
 
 
Add a new comment line in line 2 as shown below.
 
 
[[Image:Xml_comment.png]]
 
 
You may have noticed that, when you typed the opening comment tag <nowiki>"<!--" </nowiki>, Eclipse automatically added the closing part of the tag for you. Again, save the file.
 
 
Now, look at the PHP Explorer view. Notice that we now have little black "*" symbols next to the files and folders that have changes, as shown below.
 
 
[[Image:Svn_file_changes.png]]
 
 
===Create Patch File===
 
Next, select the tmpl file folder in the PHP Explorer view, right click, and select Team / Create Patch, as shown below.
 
 
[[Image:Team_create_patch.png]]
 
 
Select "Save in file system" and press Browse to select the file and a new folder for the patch. A patch file usually has the following naming convention: <issue #>.patch (for example: 12345.patch). If more than one patch file exists, it will be 12345a.patch, 12345b.patch, etc.
 
Notice that Eclipse automatically includes all changed files. If you wanted, you could include only selected files in the patch.
 
 
[[Image:Create_patch.png]]
 
 
Press Next to show the Advanced Options dialog shown below. Select "Project" for the patch root and press Finish.
 
 
[[Image:Patch_root.png]]
 
 
The patch file will be created. Open this file with a text editor. It should have the contents as shown below. This file could then be used to apply these changes to an SVN repository.
 
 
<source lang="php">
 
Index: components/com_content/views/frontpage/tmpl/default.php
 
===================================================================
 
--- components/com_content/views/frontpage/tmpl/default.php (revision 10613)
 
+++ components/com_content/views/frontpage/tmpl/default.php (working copy)
 
@@ -1,4 +1,5 @@
 
<?php // no direct access
 
+// This is a comment to test patch creation.
 
defined('_JEXEC') or die('Restricted access'); ?>
 
<?php if ($this->params->get('show_page_title', 1)) : ?>
 
<div class="componentheading<?php echo $this->params->get('pageclass_sfx') ?>">
 
Index: components/com_content/views/frontpage/tmpl/default.xml
 
===================================================================
 
--- components/com_content/views/frontpage/tmpl/default.xml (revision 10613)
 
+++ components/com_content/views/frontpage/tmpl/default.xml (working copy)
 
@@ -1,4 +1,5 @@
 
-<?xml version="1.0" encoding="utf-8"?>
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<!-- Test comment for patch -->
 
<metadata>
 
<layout title="Frontpage Blog Layout">
 
<message>
 
</source>
 
 
===Undo File Changes===
 
Before we finish, let's look at how we can undo our changes. The easiest way is to just use the Eclipse editor undo command. Go back to the "default.xml" file in the editor. Press Ctrl+Z (or use Edit / Undo Text Change) once or twice until the comment is gone. Save the file. Notice that the black "*" is now gone from this file in the PHP Explorer view.
 
 
Now let's look at a more sophisticated way to undo changes. Navigate to the "default.php" file and right-click anywhere inside the edit area. Select Compare With / Base Revision from the context menu. This will display the screen shown below.
 
 
[[Image:Compare_with_base_revision.png]]
 
 
This is the Eclipse Text Compare editor. It shows you every change between any two files. In this case it's comparing the base revision we downloaded from the Eclipse repository to the current file, where we added the comment. The second button in the toolbar is called "Copy Current Change From Right to Left". Press this button and now the files will be identical. Press Save to save the changes, and notice that now all of the black "*" have disappeared. This indicates that there are no changes between our files and the this revision in the repository.
 
 
== Working With Patches ==
 
Bug fixes are normally created and tested using patch files. Patch files are plain-text files that tell Subversion how to change one or more source code files to reflect the changes included in the bug fix. A simple patch can be a small change to one file. A large patch might have major changes to multiple files. You can read more about patch files in the article [[Learn_more_about_patch_files | Learn more about patch files]].
 
 
Note that JBS (Joomla! Bug Squad) members do not normally commit changes to the Joomla! SVN. Our job is done when the patch is tested successfully and the issue is change to "Ready to Commit" status. Committing the changes to the Joomla! codebase is done by Ian, Kevin, or a member of the Development Team.
 
 
The normal work process for testing a bug fix is as follows:
 
# Update your local Joomla! to the latest from the repository. To do this, right-click on the project and select Team / Update.
 
# Normally, you will want to test the issue ''before'' applying any patch, to make sure you can duplicate the problem.
 
# Download the patch file from the tracker and apply the patch. The url is http://joomlacode.org/gf/project/joomla/tracker/ and choose the Joomla! 1.6.x Issue Tracker link.
 
# Re-test to see if the patch corrects the problem.
 
# Update the tracker with your results.
 
# Revert the programming changes so that your local SVN repository stays in synch with Joomla!.
 
 
=== How to Apply a Patch ===
 
To apply a patch file created by someone else, here are the steps:
 
 
1. Download the patch to your local computer (for example from the Joomla! Tracker).
 
 
2. Select the project in the PHP Explorer, right-click, and select Team / Apply Patch. The dialog shown below will display:
 
 
[[Image:Apply_patch1.png]]
 
 
3. Browse to the desired patch file and press the Next button. The screen will display as shown below:
 
 
[[Image:Apply_patch2.png]]
 
 
4. Select the target project where you want to apply the patch. Note that patches should normally be created with the project as the Patch Root. Press Next to display the Review Patch screen shown below:
 
 
[[Image:Apply_patch3.png]]
 
 
5. This screen shows you the file or files that will be modified by this patch. If you like, you can double-click on the file name to open the Eclipse compare window for the file. This shows you exactly what the changes to each file will be, as shown below.
 
 
[[Image:Apply_patch4.png]]
 
 
6. Press the Finish button to apply the patch. Notice the black "*" symbols in the PHP Explorer, as shown below. These show the files and folders that were modified by the patch and, therefore, are now different than the base SVN repository.
 
 
[[Image:Apply_patch5.png]]
 
 
=== Revert Changes ===
 
When you are done testing a patch, normally you will want to undo the patch so your local code base stays in synch with the Joomla! SVN. In Eclipse, you can undo patches in two ways: either revert changes or apply a patch in reverse.
 
 
==== Revert Changes ====
 
You can change a file or group of files back to the original state by using the SVN Revert command. In Eclipse, you just highlight the file or folder, right-click, and select Team / Revert. If you have selected one file, this file will be changed back to the version in the SVN repository. If you have selected a folder or project, then all of the files in this folder or project will be reverted. In this case, Eclipse will show a dialog listing all of the files to be reverted. You can then pick which ones you want to revert or cancel the operation.
 
 
==== Reverse a Patch ====
 
You can also use Eclipse to undo a patch. Follow the same procedure as for applying a patch. When you get to Review Patch screen, Eclipse will show an error, as shown below. Because the file has already been patched, the starting point of the file does not match what is in the patch file.
 
 
[[Image:Reverse_patch1.png]]
 
 
If you click on the box "Reverse Patch", as shown below, the error disappears, indicating that the patch will be reversed.
 
 
[[Image:Reverse_patch.png]]
 
  
Press the Finish button to complete the process. If you have only applied one patch file to the SVN, then reversing the patch is the same as just reverting the files (Team / Revert). However, if you are working with more than one patch file, the ability to reverse just one patch can be useful.
+
To do so, please see [[Working with git and github/My first pull request]]
  
==Troubleshooting==
+
== Working With Git and Github ==
=== Error When Doing Team->Commit===
+
The CMS project uses the Git version control system and the CMS repository is stored on Github here: [https://github.com/joomla/joomla-cms https://github.com/joomla/joomla-cms]. Bugs are fixed in the master branch of this repository, and normally there are bug fixes and changes in the master branch that are more recent than the latest released Joomla version. For this reason, when we test and code bug fixes, we normally use the latest code from the master branch on Github, not the latest released version. Therefore, Bug Squad testers and coders need to understand how to use Git and the Github repository.
: When doing a commit, you get the message "svn: Server sent unexpected return value (501 Method Not Implemented)". This error can be caused by doing an anonymous checkout on a project that requires credentials to commit. The anonymous credentials are cached and so the commit is not authorized. To fix this, you need to clear the SVN cache. This can be done by removing the cache file. For XP, the file is <code>c:\Documents and Settings\[username]\Application Data\subversion\auth\svn.simple</code>. For Vista, it is <code>c:\Users\[username]\AppData\Roaming\subversion\auth\svn.simple</code>.  
+
  
:If you use Tortoise, you can right-click and select SVN->Settings->Saved Data and press the Clear button next to Authentication Data.
+
For testing and tracking changes, please refer to [[Git for Testers and Trackers]]. For coding changes, please see [[Git for Coders]].
  
 
==Extension Development==
 
==Extension Development==

Latest revision as of 00:34, 15 September 2013

Merge-icon.png
Merge Notice

It has been suggested that this article or section be merged with Setting up your workstation for Joomla development. (Discuss). Proposed since 15 Sep 2013.

This article provides detailed instructions for setting up your workstation for Joomla! development with Apache, PHP, xdebug, Git. Please refer to the following links for other development tools and environments: Setting up your workstation for Joomla development

The article more specifically let's you contribute to the official Joomla! Github code repository.

Contents

Install & configure XAMPP, php, Eclipse

  1. Configuring a XAMPP server for joomla development
  2. Edit PHP.INI File for XDebug
  3. Configuring Eclipse for joomla development

Check Out and modify Joomla! Source Code

Now we are going to create a new PHP project that will contain all of the source code files for Joomla!. We can import the source code and create our PHP project at the same time.

To do so, please see Working with git and github/My first pull request

Working With Git and Github

The CMS project uses the Git version control system and the CMS repository is stored on Github here: https://github.com/joomla/joomla-cms. Bugs are fixed in the master branch of this repository, and normally there are bug fixes and changes in the master branch that are more recent than the latest released Joomla version. For this reason, when we test and code bug fixes, we normally use the latest code from the master branch on Github, not the latest released version. Therefore, Bug Squad testers and coders need to understand how to use Git and the Github repository.

For testing and tracking changes, please refer to Git for Testers and Trackers. For coding changes, please see Git for Coders.

Extension Development

For Eclipse setup information related to Joomla! extension development, see Setting up your workstation for extension development.