SOC09108 - 2015 - Practical 02

Versionning 101 - GIT basics

Requirements

In order to achieve this practical, you need to have a fully working environment with:

The first part will only require GIT and a text editor, and the second one requires the *AMP stack in order to run a WordPress install.

If you do not have this setup, please refer to SOC09108 - Practical practice - Wamp JKCC.pdf.

I recommend to work either from a USB key or the D:\ drive. This drive is temporary, and the data are erased regularly. You can remove every data after saving them in a zip in your H:\ drive at the end of each session.

GIT - first approach

In order to understand how we will work with GIT, it is important to start with a very simple example.

Let’s start by creating a new folder, in Laragon Web Root (here D:\Laragon\www). Using the Shell button will allow you to access the terminal application, in which you can use both system wide commands along with GIT and Composer installed in Laragon. The terminal should be opened in D:\laragon\www. Create a new folder called git01.


        mkdir git01
      

Enter the newly created folder: cd git.

Now initialise the GIT repository.


        git init
      

This will create for you hidden files (.git folder) responsible for the versionning information (you can use ls -la to verify the folder has been created).

If you want to verify what is in this folder, you can use ls again, which allows you to list all the files and directory of a specific node (a filesystem node can be a file, a folder or a link).

By using the git status command, you will be able to see the current state of your repository. You should use it as often as you can. Here you should see that there is nothing to commit).

Create a new file in the folder, with some content.


        echo Some initial content > initial.txt
      

Usually, quotes are required around the string to echo, but using Laragon the quotes are printed in the file so don’t use any here.

You can now check what are the differences between the last commit (Initial commit) and the current files using git status.

You now have a file under Untracked files. This means this file will be excluded of the commit if you try to commit some files. This is helpful when working with lots of file, you can basically pick the one you want to commit to the repository. Add your file now with the git add command (git add followed by one or many filenames, or followed by a dot . to add any file under the current directory, including subdirectories).


        git add initial.txt
      

Using the git status command again, you can see the file is now in your index (tracked), and your index is not empty anymore. This means that you can now commit the content of your index to the repository.


        git commit -m "Add initial content"
      

As you can see, the commit command accepts parameters. Here, the -m parameter is used, allowing us to assign the commit message from the command line. This message is mandatory, and if you miss this parameter the message will be asked in whatever text editor your computer is opening for you (on Unix based systems it is often VIM by default, which is not at all user friendly).

Now use the git status command again and note how there is nothing in your index anymore. Indeed, all the indexed files have been commited to the repository, and there were no more untracked files anymore.

The git log command will now allow you to consult the list of all the commits ever made on your repository.

As you can see in the git commit and git log results, your commit name and address were defined automatically using your machine name. Using the commands provided in your git commit result, setup your name and address for the commits, and update your existing commit:


        git config --global user.name "Your Name"
      

        git config --global user.email matriculation@live.napier.ac.uk
      

        git commit --amend --reset-author
      

You can do the amend command at anytime before pushing your latest commit on a remote repository. It gets more complicated if you already pushed, you can find more details online.

Using the following command, add some more text into your file.


        echo Some more content >> initial.txt
      

Now use the git diff command to see the differences between the file commited on the repository and your current version. You should be able to see the new line.

With git status, check what you have in your current staging index. Add the file using git add, git commit and use git status and git log to confirm everything went as you wanted.

There are lots of things you can do with GIT, such as reverting commits, changing your current commit pointer and so on. Have a look at the documentation online.

GIT with Eclipse PDT

First download the latest version of Eclipse for PHP (PDT) (Windows 64 edition for the JKCC computers). Copy the archive and extract it in the D:\ drive.

For information: Eclipse PDT is not often considered as one of the best PHP editors. I will personnaly recommend PHPStorm (student licence available) or Netbeans if you have administrator rights on your machine.

Run the binary D:\eclipse-php-luna-R-win32-x86_64\eclipse\eclipse.exe.

Select D:\laragon\www as a workspace. The workspace is basically the root of all the folders you may want to work on.

Using the top toolbar, create a new project (File -> New -> PHP Project). Use git02 as Project name and click on Finish. There are many settings you can use that can impact the syntax coloration and the syntax validation (scalar type hints in PHP7+, short array syntax in PHP5.4, etc).

If the Welcome tab is opened on your screen, quit it. You can now see your PHP workspace with the files on the left, and the editor in the middle. Your project folder on the left contains a few file and directories specific to you project settings in Eclipse.

Add a new text file using the File menu, then New, and choose Untitled Text File. As per the terminal example, add some content to the file, such as Add initial content, and save in git02 directory with initial.txt as File name.

Now, you can setup a git repository in your folder (equivalent to code>git init). In the top right corner, there are a few buttons to choose a perspective, which is an elegant way to display only specific views to help you with specific tasks. Next to the PHP button, click on Open Perspective and select Git. You should now be able to use a link Create a new local Git repository with D:\laragon\www\git02 as Repository directory, and then click Finish.

Back to the PHP Perspective (top right of the screen), go to the Window menu, and in Show View select Other, then Git and finally choose Git Staging. This will open for you a tab with the versionning details.

Click on the project on the left. Opening the object tree, right click on initial.txt, and using the Team menu, click on Add to index.

On the Git staging view, you should be able to see that your initial.txt file as moved into Staged Changes. Change Author details and Committer details with your own. Now add a commit message (such as Initial commit and finally click on Commit (not Commit and Push as there are no remote repositories configured yet).

Please have a look at the documentation to use this feature as well as you can. If you have administration rights, I will recommend SourceTree which is on of the best Git tool you can find on both MacOS and Windows.

WordPress and GIT

You now know the basics of versionning with Git. Please note that mastering this kind of tools takes years and you absolutely need to experience it as much as you can.

Trying to use GIT with WordPress comes with a few challenges. Indeed, most of the configuration or content changes you can do in CMSs will actually impact databases and rarelly modify files. This practical is focused on versionning files only.

Whereas WordPress provides very convenient ways to install themes, plugins and updates, you will probably not be able to use these features in your day to day job as a professional developer / content manager. The rationales behind not auto-updating and not using the built-in installer are multiple: security wise, you should not allow php to write files on your web host (unless the folder is made for it and has the minimum write access control), version wise you should keep control on what files are currently deployed, …

First, you have to understand what files your WordPress project is made of. As you can see by looking at the WordPress repository on Github, it mainly contains the core files and some configuration.

If you have a headset, you can watch Discover special things about Wordpress - 2.2 Take Control of your Environment on Youtube or watch it at home later (it is fairly short but the full playlist and account are also useful).

Just as in the video, you will use GIT submodules to install your WordPress core files. Open your Shell from Laragon once again. Create a new project folder (mkdir wordpress) and enter it (cd wordpress). Now, you can create a public directory (mkdir public) in which you can set all the web accessible files you want. Consider it as your http server root directory. Add the WordPress repository as a submodule (git submodule add https://github.com/WordPress/WordPress.git public/site).

The WordPress files have now been downloaded to your /public/site folder. As a submodule, this folder can be automatically updated, and any modified file will be erased by the new version, so beware you can not edit its content.

As you can not edit these files, you have to start by having your own configuration file. WordPress is made in order to look in its parent folder whether a wp-config.php file exists if there are none in its current folder. You can now copy the sample file from the submodule to your actual public folder under wp-config.php (cp public/site/wp-config-sample.php public/wp-config.php).

The problem with the current setup is that your wp-config.php file is still under the document root, and you may want for extra protection to move it one level down. Create a config folder (cd config) and move the config file in it (mv public/wp-config.php config/wordpress.php). Now create a new file wp-config.php in public and add the following PHP code in it to include the actual config file:


        <?php

        require dirname(__DIR__) . '/config/wordpress.php';
      

Now let’s focus on the wp-content folder, which contains plugins and themes, and is also used for uploading files on the website. Therefore, you have to had configuration variables to reflect these changes. Edit your config/wordpress.php file and add the following constant:


        define('APP_ROOT', dirname(__DIR));
        define('WP_HOME', 'http://localhost/wordpress');
        define('WP_SITEURL', WP_HOME . '/site');
        define('WP_CONTENT_DIR', APP_ROOT . '/public/content');
        define('WP_CONTENT_URL', WP_HOME . '/content');
      

The first one (APP_ROOT) defines the actual folder where your project is stored on the filesystem. Then, the two following constants define where the application can be reached, and where the WordPress installation actually is. The final ones define where the content is stored and where it can be retrieved.

Then, you can also set the debug settings to true in your wordpress.php file (define('WP_DEBUG', true);, note that the line already exists, just change the value). This will allow error display on the website.

You can find similar steps in other good tutorials: Antti-Jussi Kovalainen - WordPress as a submodule. You will then see there are more steps in this tutorial, as the writer decided to add a .htaccess file to redirect users on the subfolder without them having to use the subfolder name.

Finally, have a look at Tim Nash’s WordPress version control tips article for advanced tips and rationales behind them.

Ask for help if you can not complete this tutorial, I am here to help.

Bitbucket and Github

If you have some time left, or when you are at home, try to register on either Github or Bitbucket. Both provide GIT hosting, along with code review features and issue tracking, Bitbucket allowing private repositories for free. You can get an extended quota for free private repositories on Github as students as part of the Github Student Developer Pack (where you also get some free VPS hosting, a free domain and a free ssl certificate).

Have a look at one, or both, try to git push and git pull your code and check if it worked by browsing your project online.

As an employee in a company, your direction may not be inclined to let the source code go on servers outside of the company. In such cases, either the company has money, and can get a licence for Github Enterprise, or the company is still small (less than 10 persons) and you may want to go for Atlassian Stash (Bitbucket on premises). For cost reasons, you may be forced to go on an open source project, in this case have a look at Gitlab.

Edit: just noticed Gitlab now also provide a free hosting service. You may now try it online for free as well.

Extra

If you want to go ahead and get started with deployment, you can have a look at plugins to help you with databases such as VersionPress (not yet stable), WP Migrate DB Pro and WP Sync DB.

Fork me on GitHub