You will learn the basics of web development by building a test site on a virtual private server (VPS). This course will introduce a number of aspects important to web development including building a secure server environment, working with HTML and Style sheets, installing a  content management system (Joomla), and building a basic web application.

The Server

Virtual Private Server (VPS)

The Linux shell and SSH

Installing the 'LAMP' stack

Create a Test Page

A simple Bootstrap template

Adding a custom style sheet

Uploading to the server

Tools and Technologies

Text Editors and IDE's

Browser Extensions

Local testing environment

A simple web application

Content Managment Systems

CMS Overview

Installing Joomla

Adding a custom style sheet

 

 

 

 

 

 

 

       

 

Log in to the terminal as your linux user and get the joomla install script.

wget 107.170.169.145/assets/joominstal2.sh

Run the install script

sudo rbash joominstal2.sh

the script will pause at some point and your will be prompted to Enter a Password. this is your MySQL root password 

Once the script has run, and you are returned to the command prompt open a browser and go to http://your ip addtess/joomla to complete the installation procedure.

joomconfig1

 

Enter a name for your Joomla site, your email address, an admin user name for Joomla and an admin password for Joomla. When you have entered these details click Next. 

Select Mysql (not MySQLI) for the database type. Host is Localhost. Username is root and password is your MySQL root password. The database name is joomladb. Leave the database prefix as it is and click Next

joominstal2

 

On the Overview screen check your configuration then click InstallJoomla should install and if all goes according to plan you should see the Installation success page.

joominstal3

Finally we need to delete the installion directory and do some clean up. We need to do this manually so go back to the terminal window for your server and get the clean up script:

wget 107.170.169.145/assets/jclean2.sh

Run the scripts:

sudo rbash jclean2.sh

Now go back to the joomla setup page in your browser and click Administrator. You should be taken to the Joomla log in screen:

joomlogin

 

 Enter your Joomla admin username and password to open the Joomla administration.

 

If for some reason the Joomla installation does not complete run the roll back script and begin the installation again

wget 107.170.169.145/assets/jrollback.sh

sudo rbash jrollback.sh

Enter your Linux user password then your MySQL root password at the prompts

 

 

 

 

When working on the server we need to be aware of who can execute, write or read our files. The web server has a special folder for storing the html files that we want to serve on the web. In Ubuntu 14 this folder has the path:

/var/www/html/

We can open up this directory by issuing the command:

cd /var/www/html/

In the command line you can list the current directory with the -l for long flag:

ls -l

You should see a directory listing similar to the one below.

termls2

The files and directories are listed with their properties. In the first column first row of the listing, for the 'home' directory, the permissions are set to:

drwxr-xr-x

The 'd' indicates it is a directory. The next set of letters (rwx) indicate the owner's (ie the person who created it) privileges. In this case of the 'home' directory above, it is read, write and execute. The next three characters indicate the group permissions. In this case read and execute. The final set of characters indicate 'world' (ie anyone) privileges, also read and execute.

If the FTP (ie Filezilla) user is the owner then these file permissions can be changed via FTP, Permissions are changed on the command line via the chmod command.

chmod -R 755 home

This changes the home directory, and all its containing files and sub directories to the permissions in the above screenshot, that is read, write, execute for the owner and read, execute for user and world. Remember it is often the case that you will need to apply more restrictive permissions, say to prevent the world from writing or executing:

chmod -R 754 (directory or file).

File permissions can be represented by three numbers representing Owner, Group and World respectively. Each of the permissions has a numeric value: Read = 4 : Write = 2 : Execute = 1. These numbers are simply added to give the a number for each of the three user levels. The rwx translates to 4+2+1=7; r-x = 4+1 = 5. To apply a more restrictive privilege set, say rwxr---- (that is Owner: read write execute, User read only and world no privileges) would translate to 740.

We can also see form this listing that the home directory is owned by the user admin and is in the www-data group.

The www-data group is the group generally applied to files we wish to serve to the web. So our group permissions can apply to those accessing files from the web and to avoid web users gaining additional privileges. To change the 'home' folder to the www-data group enter the following command:

sudo chgrp -R www-data home

The -R flag here makes the changes propagate down the directory tree. Any file or folder in a sub directory of the home directory will also have its group changed.

We can change the owner of the file or folder using the chown command:

chown -R admin (file or directory).

 

 

 

 

In this lesson we are going to add an image to the main section of our web page.  The HTML tag we will use is: 

<img src=''path to image">

First thing we need to do is find an image and upload it to our server. 

Open filezilla and connect to your server. In the right pane navigate to your home folder in the HTML directory. (var/www/html/home)

Right click on your home directory in the right pane of filezilla and select create directory. Name the directoy images

Right click on the images folder and select Permissions. Change the pernissions to 755

In the left pane navigate to an image on your local computer. The image should be no bigger than about 700 px square and less tha 500kb. One of  Windows sample images will be fine.

In Filezilla drag your image from the left into the images folder on the right. this will upload the image to your images folder.

Now open Notepad++ and open the home/index.html file for editing. Inbetween the <p> tags in the main section enter the image tag with the path to your image as the attribute.

<img src ="images/myimage.jpg">

Finally go back int Filezilla and open the images folder. right click on your image, select Permissions and change the permissions to 755. Be sure to tick the box recurse into subdirectories then click OK

View your web page in a browser to see the results.