The following ingredients are required to cook the web stack:

We need to split this recipe into four parts.

Installing the Nginx web server

There are a number of web servers on the market. In this recipe, we are going to use the Nginx (pronounced engine-x) web server as it performs well with the Banana Pi.

To set up the Nginx software, perform the following:

1. Open a shell.
2. Install Nginx:

   $ sudo apt-get install nginx
   

3. Apt will ask you to confirm the installation of dependency packages.
4. Enter Y to confirm the dependency packages and continue the installation. After a few seconds to minutes, the web server is installed.
5. The next step is to configure Nginx. Edit /etc/nginx/sites-available/default:

   $ sudo nano /etc/nginx/sites-available/default
   

6. Scroll down until you see the first server section (server {).
7. You will see the so-called HTTP root (root /usr/share/nginx/www). In this directory, we are going to put our files.

   Note

   Depending on your operating system, the HTTP root may also differ. For example, on Lubuntu, the HTTP root directory is /usr/share/nginx/html. Keep this in mind for the next steps and recipes.

8. Below the root entry, you see an index entry. Add index.php to the index list, so that the line looks like this:

   index index.html index.htm index.php;

9. Scroll down again until you reach the commented out PHP section (#location ~ .php$ {).
10. Uncomment the whole section except for the line: fastcgi_pass 127.0.0.1:9000.
11. Your configuration file should look similar to the one shown in the next screenshot:
    
12. Exit and save the nano editor by pressing Ctrl + X, followed by Y and Enter.
13. Restart the Nginx web server to apply the changes:

    $ sudo /etc/init.d/nginx restart
    

We have just installed the Nginx web server and prepared it to run PHP applications. You can check whether your web server is running. Enter the URL http://HOSTNAME/ (for example, http://lemaker/) into a browser that is on the same network. As mentioned in the previous recipes, you can also use the IP address of your Banana Pi instead of the hostname. You should see a page similar to the following screenshot:

Installing the PHP scripting language

The next step is to install the PHP interpreter for our Nginx web server.

1. With the shell opened, install the following packages:

   $ sudo apt-get install php5-fpm php5-mysql
   

2. Apt will ask you to confirm the installation of the dependency packages.
3. Enter Y to continue the installation.
4. Apt will configure some files. This may take a few minutes.
5. After installing PHP, we are going to change the permissions of the HTTP root, so that our user can place files into that directory flawlessly:

   $ sudo chown -R $USER.$GROUP /usr/share/nginx/www
   

   Note

   Replace the HTTP root directory with the correct HTTP root depending on your operating system.

6. Then we create a PHP script to test the PHP functionality with Nginx:

   $ nano /usr/share/nginx/www/info.php
   

7. In the nano editor, we write the following PHP code:

   <?php
   phpinfo();

8. Exit and save the newly created file by pressing Ctrl + X, followed by Y and Enter.

Now, PHP should be installed correctly. We test it by opening a browser and using the URL http://lemaker/info.php.

You should see a page with a lot of information about your PHP setup, as shown in the next screenshot:

Installing WordPress

WordPress is an open source blogging web application and content management system (CMS). It is programmed in PHP and uses MySQL as a database backend. In this section, we are going to install WordPress and create a test post:

1. With a shell open, download the latest WordPress archive into the HTTP root of Nginx:

   $ cd /usr/share/nginx/www
   $ wget http://wordpress.org/latest.tar.gz
   

   This will download WordPress blogging software.

2. When the download is finished, we unpack the downloaded archive:

   $ tar -xzvf latest.tar.gz
   

3. We have to create a new MySQL database for our WordPress setup. Enter the command-line tool for MySQL:

   $ mysql -u root -p
   

4. Enter the MySQL root password.
5. Add the new database in the MySQL command-line tool:

   mysql> CREATE DATABASE wordpress;
   

6. Then we create a MySQL user and allow access to the new database:

   mysql> GRANT ALL PRIVILEGES ON wordpress.* TO wordpress@localhost IDENTIFIED BY "wordpress_password";
   

7. Reload the privileges to apply the changes:

   mysql> FLUSH PRIVILEGES;
   

8. Quit the MySQL command line:

   mysql> EXIT
   

   
9. As shown in the preceding screenshot, the MySQL command line will respond with Bye.
10. After setting up our WordPress database, we have to configure the database information for WordPress. Rename wp-config-sample.php to wp-config.php:

    $ cd /usr/share/nginx/www/wordpress
    $ mv wp-config-sample.php wp-config.php
    

11. Edit the wp-config.php file:

    $ nano wp-config.php
    

12. Within the wp-config.php file, scroll down to the define functions.
13. Modify the define values to the following:

    define('DB_NAME', 'wordpress'),
    define('DB_USER', 'wordpress'),
    define('DB_PASSWORD', 'wordpress_password'),

14. Your wp-config.php file should look like as shown in the following screenshot.
    
15. Exit and save nano by pressing Ctrl + X, followed by Y and Enter.
16. Execute the setup script on your browser. Go to http://lemaker/wordpress/wp-admin/install.php.
17. Enter your desired login details into the installation form. We are using:
    • Username: bananapi_user
    • Password: bananapi
18. Click on Install WordPress.
19. The setup script will inform you that the installation was successful. The next screenshot shows the page that is shown after the successful installation:
    
20. Click on Log In.
21. You will see the login mask of the WordPress administration page.
22. Enter your previously chosen login data (bananapi_user / bananapi).
23. You are logged into the administration page of WordPress.
24. Create a new blog post by clicking on Posts on the left menu and Add New on the upcoming page.
25. Enter a title and a blog post text, for example, refer to the following screenshot:
    
26. When finished, click on Publish.
27. To read your blog, open another browser tab and go to http://lemaker/wordpress.

Congratulations! You just have installed a blog application onto your Banana Pi. In the next screenshot, we see our previously created first blog post:

Setting up a real web application such as WordPress from scratch is not a simple task. We have to install and configure several applications and the web application itself on top. But you are finished; you deployed a powerful web stack on your Banana Pi.

To run web applications in general, we must have a web server, a database server, a way to run scripting languages, and the desired web application. These components were installed in this recipe. Besides the installation, all components require configuration.

We started by configuring the default configuration of our web server Nginx. Within /etc/nginx/sites-available/default, we prepared the PHP support. Furthermore, we determined what the HTTP root directory is. It defines the directory that is used by Nginx to serve the websites. Open the browser and go to the hostname of the Banana Pi, the Nginx ascertains, if there is a so-called index file within the configured HTTP root directory and serves it. The index file is the start page. Indeed there is an index.html file within the HTTP root directory that contains HTML code.

This HTML is what Nginx sends to your browser, when going to http://lemaker/. The browser interprets the HTML code and you will see the message Welcome to nginx!.

A scripting language interpreter such as PHP enables us to run a program (a script) and let it create the HTML dynamically before the web server sends the HTML to the client. This is what happens when we create our info.php file containing just one PHP function: phpinfo().

When using PHP code, we have to tell the PHP interpreter that the upcoming code should be interpreted. This is why we are beginning the info.php file with the PHP tag:

<?php

You can also end the PHP part by adding the closing tag ?> at the end of the file. Still it is not necessary if the file is pure PHP (as in our example). Quite the contrary, it is preferable to omit the closing tag in pure PHP files.

So, when browsing the info.php file, the web server recognizes that we are requesting a page with a PHP script. Nginx then communicates with the PHP-FPM (PHP FastCGI Process Manager) service, which interprets the info.php file. The phpinfo() PHP function instructs the PHP interpreter to render information about the current PHP configuration as HTML. After the PHP interpreter finishes interpreting the PHP file, the produced HTML is sent back to Nginx. Nginx again serves the HTML from PHP via the HTTP protocol to the requesting browser.

If a lot of information needs to be saved for longer than one session, this information must be stored somehow. Sometimes data is stored in simple text files, but mostly they are stored in specialized databases. Most web applications store their data in databases. For example, the blog posts or user information of our WordPress setup are stored in our created WordPress database. PHP is able to use various database servers as persistence backends.

We downloaded WordPress by using the command-line tool wget (full name is GNU Wget). It is a program that retrieves files from web servers similar to a browser without the output in a browser window. Therefore, it is a great tool to download files from the Internet using your shell.

Each web application should have its own database. All databases are maintained by a DBMS (Database Management System). We use the open source DBMS MySQL. DBMS has its own users and permissions system. Therefore, we use the MySQL command-line tool to create a WordPress database and a database user that has access to the WordPress database via a password.

These three components (database name, database user, and the password) need to be configured in the web application as well. As we use WordPress, these values are configured in the wp-config.php (WordPress configuration) file.

First, we need to rename the sample configuration by using the mv (move) command. The mv command can move files or directories to other directories. Be careful when using mv; you can easily overwrite files when moving a filename to a filename that already exists. Instead of renaming the sample file, you can also copy the sample file to a real configuration file:

$ cp wp-config-sample.php wp-config.php

After we have configured the database information in the wp-config.php, we can finish the setup by executing the install.php file. That is done using the browser. You will have to enter some information about your blog and create an administrator user for your blog. When the installation is finished, you can log in to the administrator backend of WordPress (wp-admin) and create your first blog post.

You don't need to set up your MySQL database through the MySQL command line. There are more user-friendly tools. For example, one convenient tool is a web application itself called PhpMyAdmin.

Setting up PhpMyAdmin

You can set up PhpMyAdmin easily:

1. With your shell open, change the directory to your HTTP root:

   $ cd /usr/share/nginx/www/
   

2. Download the PhpMyAdmin archive:

   $ wget http://sourceforge.net/projects/phpmyadmin/files/latest/download -O phpmyadmin.zip
   

3. Unpack PhpMyAdmin:

   $ unzip phpmyadmin.zip
   

4. Optionally, rename the PhpMyAdmin folder that we created:

   $ mv phpMyAdmin* phpmyadmin
   

5. Change into the phpmyadmin directory:

   $ cd phpmyadmin
   

6. With your browser, go to http://lemaker/phpmyadmin/.
7. Log in with your MySQL root user credentials:
   • Username: root
   • Password: bananapi

You are now able to create and modify databases and tables via your web browser and will not need to configure databases on the command line anymore. However, for readability, we still use the MySQL command-line tool to create database.

The following screenshot shows the PhpMyAdmin interface after a successful login. On the left-hand side menu, you can see the WordPress database we created: