Web development

Kent Elchuk explains how to get into web development on the cheap.

Kent Elchuk strings English words together to make sentences that explain how you can build a ready-to-go web development machine.

One of the great reasons to use Linux is that it makes web development an easy process. When we say easy, we mean it makes it free and easy to build and test websites and web applications.

Since so much of the web is powered by websites hosted with Linux, including giants like Google and Facebook, using Linux for building makes it convenient to set up a solid building and testing environment.

If that does not convince you, maybe the source at https://en. wikipedia.org/ wiki/Goobuntu will, which explains that 10,000 employees at Google use Goobuntu. A flavour of Ubuntu, is enough to let you know that an Ubuntu option is a good choice.

We are going to build a web development environment from scratch. This can be on real hardware or inside a VirtualBox, the choice is yours. Regardless of your setup, keep in mind web server technologies change over time, thus using VirtualBox does enable you to run the latest web server technologies like Apache, PHP, mySQL, and PhyMyadmin.

Starting fresh

If you want to get a new machine to dedicate to development, you can choose new or used. New has obvious perks, but there are many used gems out there. In our time we’ve had old Lenovo Business class laptops cost less than $100 and several HP XW8600 workstations bought through auctions. Add an SSD and you have a capable development PC.

One more thing to keep in mind with your choice of Linux flavour; if you are going use, or want Raspberry Pi compatibility, Ubuntu Mate is a prime option. As for a Pi itself, the Raspberry Pi 3 is recommended, it’s far faster compared to older models and you can hook up an HDMI TV, mouse and keyboard for desktop use, or you can simply run the web server off the Raspberry Pi and transfer files to it. Thus, it can be used like a remote web server just as you would have with a VPS or dedicated server from a hosting company.

The software

Since you will be carrying out web development on your chosen machine, you will need to install a web server, database and optional scripting languages. To cover the numbers out there on the web, this tutorial will use and setup a traditional “Lamp” stack; which translates to Linux, Apache, mySQL and PHP (or Perl or Python). For this tutorial, the P in Lamp will be PHP. According to stats from https://w3techs. com/technologies/details/pl-php/all/all, PHP is used by 82.5% of websites whose server-side programming language is known, so we’re in good company.

The stats do not mean it is necessarily better, and if you Google around you’ll find it seems like there is an army against PHP. But its popularity has led to a great many tools that make it an easy language to start development with; tools such as Wordpress, the world’s most popular CMS. So, let’s get down to the Lamp setup. The command sequence is shown below. When prompted for yes or no, simply follow the instructions for ‘yes’ and move along.

With mySQL and PhpMyAdmin, you can leave the password fields empty to complete the installation. That is OK for a test environment on your Linux platform, but if you plan to use the server as a web host with port forward on your router, you should use secure passwords and write them down in a safe place, if you don’t think you’ll remember them. sudo apt-get update sudo apt-get install apache2 sudo apt-get install mysql-server sudo apt-get install php7.0 php-pear libapache2-mod-php7.0 php7.0-mysql sudo apt-get install php7.0-curl php7.0-json php7.0-cgi sudo apt-get install phpmyadmin <Press Enter a few times during installation>

These days, PhpMyAdmin does not play friendly if you want to use it in a test environment without a password. You can find more details right from the horse’s mouth at https://docs. phpmyadmin.n et/en/latest. If you really plan to do web development with mySQL( which includes Wordpress) and access the databases with a GUI, PhpMyAdmin is a must.

Now that you are at this stage, we would like to add an optional installation. It is Samba. You can install it on both the guest and host machines, if you have another Linux machine like the Raspberry Pi for which you want to save file or folder backups, and flip back and forth between machines, Samba is very convenient, you just drag and drop folders and files just as you would on your laptop or desktop. If you don’t want to install Samba and backup files to a Samba server, you can just skip the Samba stuff.

Installing Samba and basic configuration is as follows:

Note that the Samba setup is quite loose for all users on the network. Samba does allow you to engage in strong user control and read-only privileges. After you have set-up the web server (which we had done above), you can test it right away. Open a browser and type http://localhost. That file comes from the folder /var/www/html/index.html file. To access the file via your desktop, you can click your ‘Home folder’ on your Desktop. Then, open the sequence var/www/

html where you will see the index.html file. You can right click on the file and open it with your chosen editor. For example, Open with Pluma or Open With Vim will do the trick. Now, you can edit and save it. If, for whatever reason, you come across permission issues with saving the file, you will need to make sure that the folders www/html have the proper permissions, which can be your username. The command below shows a simple way to give each file the permissions for your usename.

With web development, and Android development for that matter, a popular technology is NodeJS. The steps below explain a sequence to get NodeJS up and running. Now that NodeJS is installed, I will explain how to install Grunt, which is a popular tool to manage tasks. Install Grunt and use it as follows: Install the command-line interface

3 Install Grunt locally npm install grunt --save-dev

4 Make a simple grunt file called gruntfile.js and add the code below. This code will allow you to see messages in your command line terminal when changes are made to the

test.js file. Why might you want that? Imagine if you had a coworker or employees who were working on this file. If the file did not change, you might become irate and wonder why no work was getting done. 5 Make a simple package.json file or run the command npm init to make it from the command line. Below is an example of a package.json file with all desired and required dependencies. Here is how to install dependencies:

To see in grunt in practice, run the command below, make changes to the file, then look in the console and you will see that a file changed. grunt watch

Gulp

Add required dependencies. Doing this will automatically modify package.json too. Here is how package.json will look after dependencies are installed; although it will not be exactly the same.

To run the Gulp ‘watch’ task, to see all HTML files that change, type the code below into the console: gulp watch

If you need to terminate Gulp, you can use the command Ctrl + C. If Grunt or Gulp does not work properly, check file permissions. If they all belong to the user, all will work as expected and mimic a hosting environment. Let’s run the watch task and see the console change when any HTML file in the test folder is modified. Asides from monitoring files, Grunt and Gulp have many other uses.

The extras

For other programs, you can always install Filezilla to transfer files to a remote server. Not only is Filezilla an easy method to upload and download files with a remote server from text editors like Vim, Gedit and Pluma, but it can help troubleshoot general FTP issues as it supplies explanations for successful and failed file transfers. apt-get install filezilla

To run Filezilla, simply type the obvious command: filezilla

At this point your webdev environment is ready to go. You can opt for a comprehensive CMS such as Wordpress, Joomla or Drupal and dodge coding by working from templates, but this will only take you so far. To advance you are eventually going to need to learn to code. The good news is that there are many cheap classes offered online by Udemy and Coursera. Happy web developing.

Set up an FTP with Netbeans to transfer files and you can easily maintain a development box and web server.

A successful FTP connection to a Raspberry Pi 3 on a local network. The Raspberry Pi 3 emulates a remote VPS or dedicated server.

The Netbeans PHP developer version has code completion and tips so you know what the functions do and what parameters you can send to the function.

Adding Netbeans to Ubuntu Mate main menu. Add path, name, and click OK.

Starting a new Netbeans project. Select the source folder you want to use and you are good to go.