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.
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
Local testing environment
A simple web application
Content Managment Systems
Adding a custom style sheet
Log in to the terminal as your linux user and get the joomla install script.
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.
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
On the Overview screen check your configuration then click Install. Joomla should install and if all goes according to plan you should see the Installation success page.
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:
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:
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
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:
We can open up this directory by issuing the command:
In the command line you can list the current directory with the -l for long flag:
You should see a directory listing similar to the one below.
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:
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.
Page 1 of 4