Note: install vagrant on your physical machine(laptop or desktop)

mohammedrafi@NOC-RAFI:~$ mkdir phplearning

mohammedrafi@NOC-RAFI:~$ cd phplearning/

mohammedrafi@NOC-RAFI:~/phplearning$

mohammedrafi@NOC-RAFI:~/phplearning$ vagrant –version
Vagrant 1.8.1

mohammedrafi@NOC-RAFI:~/phplearning$ vim Vagrantfile
VAGRANTFILE_API_VERSION = “2”
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
config.vm.box = “ubuntu/trusty32”
config.vm.network “forwarded_port”, guest: 80, host: 8080
config.vm.provision “shell”, path: “provisioner.sh”
end

mohammedrafi@NOC-RAFI:~/phplearning$ vim provisioner.sh

#!/bin/bash
sudo apt-get install python-software-properties -y
sudo C_ALL=en_US.UTF-8 add-apt-repository ppa:ondrej/php -y
sudo apt-get update
sudo apt-get install php7.0 php7.0-fpm php7.0-mysql -y
sudo apt-get –purge autoremove -y
sudo service php7.0-fpm restart
sudo debconf-set-selections <<< ‘mysql-server mysql-server/root_password password root’
sudo debconf-set-selections <<< ‘mysql-server mysql-server/root_password_again password root’
sudo apt-get -y install mysql-server mysql-client
sudo service mysql start
sudo apt-get install nginx -y
sudo cat > /etc/nginx/sites-available/default <<- EOM
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /vagrant;
index index.php index.html index.htm;
server_name server_domain_or_IP;
location / {
try_files \$uri \$uri/ /index.php?\$query_string;
}
location ~ \.php\$ {
try_files \$uri /index.php =404;
fastcgi_split_path_info ^(.+\.php)(/.+)\$;
fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME \$document_root\$fastcgi_script_
name;
include fastcgi_params;
}
}
EOM
sudo service nginx restart

###############################################################

mohammedrafi@NOC-RAFI:~/phplearning$ vagrant up

Bringing machine ‘default’ up with ‘virtualbox’ provider… ==> default: Importing base box ‘ubuntu/trusty32’…
==> default: Matching MAC address for NAT networking…
==> default: Checking if box ‘ubuntu/trusty32’ is up to date…
==> default: Setting the name of the VM: phplearning_default_1505133613502_71479
==> default: Clearing any previously set forwarded ports…
==> default: Clearing any previously set network interfaces…
==> default: Preparing network interfaces based on configuration…
default: Adapter 1: nat
==> default: Forwarding ports…
default: 80 (guest) => 8080 (host) (adapter 1)
default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Booting VM…
==> default: Waiting for machine to boot. This may take a few minutes…
default: SSH address: 127.0.0.1:2222
default: SSH username: vagrant
default: SSH auth method: private key
default: Warning: Remote connection disconnect. Retrying…
default:
default: Vagrant insecure key detected. Vagrant will automatically replace
default: this with a newly generated keypair for better security.
default:
default: Inserting generated public key within guest…
default: Removing insecure key from the guest if it’s present…
default: Key inserted! Disconnecting and reconnecting using new SSH key…
==> default: Machine booted and ready!
==> default: Checking for guest additions in VM…
==> default: Mounting shared folders…
default: /vagrant => /home/mohammedrafi/phplearning
==> default: Running provisioner: shell…
default: Running: /tmp/vagrant-shell20170911-16246-hno98l.sh
==> default: stdin: is not a tty
==> default: Reading package lists…
==> default: Building dependency tree…
==> default: Reading state information…
==> default: The following NEW packages will be installed:
==> default: python-software-properties

.
.
.

###############################################################

mohammedrafi@NOC-RAFI:~/phplearning$ vagrant ssh
Welcome to Ubuntu 14.04.5 LTS (GNU/Linux 3.13.0-129-generic i686)

* Documentation: https://help.ubuntu.com/

System information disabled due to load higher than 1.0

Get cloud support with Ubuntu Advantage Cloud Guest:
http://www.ubuntu.com/business/services/cloud

0 packages can be updated.
0 updates are security updates.

New release ‘16.04.3 LTS’ available.
Run ‘do-release-upgrade’ to upgrade to it.

vagrant@vagrant-ubuntu-trusty-32:~$ netstat -tlpn
(No info could be read for “-p”: geteuid()=1000 but you should be root.)
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name
tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN –
tcp 0 0 0.0.0.0:50175 0.0.0.0:* LISTEN –
tcp 0 0 127.0.0.1:3306 0.0.0.0:* LISTEN –
tcp 0 0 0.0.0.0:111 0.0.0.0:* LISTEN –
tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN –
tcp6 0 0 :::22 :::* LISTEN –
tcp6 0 0 :::111 :::* LISTEN –
tcp6 0 0 :::80 :::* LISTEN –
tcp6 0 0 :::33328 :::* LISTEN –

vagrant@vagrant-ubuntu-trusty-32:~$ service nginx status
* nginx is running

vagrant@vagrant-ubuntu-trusty-32:~$ service mysql status
mysql start/running, process 12639

vagrant@vagrant-ubuntu-trusty-32:~$ curl -I localhost
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Mon, 11 Sep 2017 12:50:25 GMT
Content-Type: text/html
Content-Length: 612
Last-Modified: Tue, 04 Mar 2014 11:46:45 GMT
Connection: keep-alive
ETag: “5315bd25-264”
Accept-Ranges: bytes

###############################################################

vagrant@vagrant-ubuntu-trusty-32:~$ cat /etc/nginx/nginx.conf
user www-data;
worker_processes 4;
pid /run/nginx.pid;

events {
worker_connections 768;
# multi_accept on;
}

http {

##
# Basic Settings
##

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;

# server_names_hash_bucket_size 64;
# server_name_in_redirect off;

include /etc/nginx/mime.types;
default_type application/octet-stream;

##
# Logging Settings
##

access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

##
# Gzip Settings
##

gzip on;
gzip_disable “msie6”;

# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

##
# nginx-naxsi config
##
# Uncomment it if you installed nginx-naxsi
##

#include /etc/nginx/naxsi_core.rules;

##
# nginx-passenger config
##
# Uncomment it if you installed nginx-passenger
##

#passenger_root /usr;
#passenger_ruby /usr/bin/ruby;

##
# Virtual Host Configs
##

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}

#mail {
# # See sample authentication script at:
# # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
# # auth_http localhost/auth.php;
# # pop3_capabilities “TOP” “USER”;
# # imap_capabilities “IMAP4rev1” “UIDPLUS”;
#
# server {
# listen localhost:110;
# protocol pop3;
# proxy on;
# }
#
# server {
# listen localhost:143;
# protocol imap;
# proxy on;
# }
#}

vagrant@vagrant-ubuntu-trusty-32:~$ cat /etc/nginx/sites-enabled/default
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /vagrant;
index index.php index.html index.htm;
server_name server_domain_or_IP;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
try_files $uri /index.php =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_
name;
include fastcgi_params;
}
}

###############################################################

verify url on your base machine http://localhost:8080/

HTTP stands for HyperText Transfer Protocol. As any other protocol, the goal is to allow two entities or nodes to communicate with each other. In order to achieve this, the messages need to be formatted in a way that they both understand, and the entities must follow some pre-established rules.

HTTP is stateless; that is, it treats each request independently, unrelated to any previous one. This means that with this request and response sequence, the communication is finished. Any new requests will not be aware of this specific interchange of messages.

Parts of the message
An HTTP message contains several parts. We will define only the most important of them.
##########
URL: The URL of the message is the destination of the message. The request will contain the receiver’s URL, and the response will contain the sender’s.

As you might know, the URL can contain extra parameters, known as a query string. This is used when the sender wants to add extra data. For example, consider this URL: http://myserver.com/greeting?name=Alex . This URL contains one parameter: name with the value Alex .
##########
The HTTP method: The HTTP method is the verb of the message. It identifies what kind of action the sender wants to perform with this message. The most common ones are GET and POST.

GET: This asks the receiver about something, and the receiver usually sends this information back. The most common example is asking for a web page, where the receiver will respond with the HTML code of the requested page.

POST: This means that the sender wants to perform an action that will update the data that the receiver is holding. For example, the sender can ask the receiver to update his profile name.

There are other methods, such as PUT, DELETE, or OPTION, but they are less used in web development, although they play a crucial role in REST APIs, which will be explained while Building REST APIs.

##########
Body: The body part is usually present in response messages even though a request message can contain it too. The body of the message contains the content of the message itself; for example, if the user requested a web page, the body of the response would consist of the HTML code that represents this page.

The body can contain text in any format; it can be an HTML text that represents aweb page, plain text, the content of an image, JSON, and so on.
##########
Headers: The headers on an HTTP message are the metadata that the receiver needs in order to understand the content of the message. There are a lot of headers.

Headers consist of a map of key-value pairs. The following could be the headers of a request:
Accept: text/html
Cookie: name=Richard

This request tells the receiver, which is a server, that it will accept text as HTML, which is the common way of representing a web page; and that it has a cookie named Richard.
##########
The status code: The status code is present in responses. It identifies the status of the request with a numeric code so that browsers and other tools know how to react. For example, if we try to access a URL that does not exist, the server should reply with a status code 404. In this way, the browser knows what happened without even looking at the content of the response.
Common status codes are:
• 200: The request was successful
• 401: Unauthorized; the user does not have permission to see this resource
• 404: Page not found
• 500: Internal server error; something wrong happened on the server side and it could not be recovered
##########

vagrant@vagrant-ubuntu-trusty-32:~$ cat /etc/nginx/sites-enabled/default
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /vagrant;
index index.php index.html index.htm;
server_name server_domain_or_IP;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
try_files $uri /index.php =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_
name;
include fastcgi_params;
}
}

vagrant@vagrant-ubuntu-trusty-32:~$ sudo mv /usr/share/nginx/html/index.html /usr/share/nginx/html/index.html.bak

vagrant@vagrant-ubuntu-trusty-32:~$ sudo vim /usr/share/nginx/html/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Your first app</title>
</head>
<body>
<a id=”special” class=”link” href=”http://yourpage.com”>Your page</a>
<a class=”link” href=”http://theirpage.com”>Their page</a>
</body>
</html>

Let’s focus on the highlighted code. As you can see, we are describing two links with some properties. Both links have a class, a destination, and a text. The first one also contains an ID. Save this code into a file named index.html and execute it. You will see how your default browser opens a very simple page with two links.

If we want to add some styles, or change the color, size, and position of the links, we need to add CSS. CSS describes how elements from the HTML are displayed. There are several ways to include CSS, but the best approach is to have it in a separated file and then reference it from the HTML. Let’s update oursection as shown in the following code:

vagrant@vagrant-ubuntu-trusty-32:~$ sudo vim /usr/share/nginx/html/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Your first app</title>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<a id=”special” class=”link” href=”http://yourpage.com”>Your page</a>
<a class=”link” href=”http://theirpage.com”>Their page</a>
</body>
</html>

Now, let’s create a new mystyle.css file in the same folder with the following content:

vagrant@vagrant-ubuntu-trusty-32:~$ sudo vim /usr/share/nginx/html/mystyle.css
.link {
color: green;
font-weight: bold;
}
#special {
font-size: 30px;
}

This CSS file contains two style definitions: one for the link class and one for the special ID. The class style will be applied to both the links as they both define this class, and it sets them as green and bold. The ID style that increases the font of the link is only applied to the first link.

Finally, in order to add behavior to our web page, we need to add JS or JavaScript. JS is a programming language in fact, there are quite a lot of them. If you want to give it a chance, we recommend the free online book Eloquent JavaScript, Marijn Haverbeke, which you can find at http:// eloquentjavascript.net/ . As with CSS, the best approach would be to add a separate file and then reference it from our HTML. Update thesection with the following highlighted code:

vagrant@vagrant-ubuntu-trusty-32:~$ sudo vim /usr/share/nginx/html/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Your first app</title>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<a id=”special” class=”link” href=”http://yourpage.com”>Your page</a>
<a class=”link” href=”http://theirpage.com”>Their page</a>
http://myactions.js
</body>
</html>

vagrant@vagrant-ubuntu-trusty-32:~$ sudo vim /usr/share/nginx/html/myactions.js
document.getElementById(“special”).onclick = function() {
alert(“You clicked me?”);
}

The JS file adds a function that will be called when the special link is clicked on. This function just pops up an alert. You can save all your changes and refresh the browser to see how it looks now and how the links behave.