Let’s do a quick tour into Web development.
It’s a huge topic and we will just scratch the surface but in either case you have to know the basics: HTML, CSS, and JavaScript.
Do do a web development you don’t even have access to the Web, BUT I strongly encourage do have a dedicated web server and do all the testing running code on it.
So we will start with building two machines: one for development (local computer) and one for testing – that one we will do in the cloud (AWS).
As a local machine we will use Ubuntu Linux machine. And on top we will need install what’s called LAMP stack (Linux, Apache, MySQL, and PHP).
I am going to provide you with detailed steps how to do it, as it’s pretty straight forward and there are many good tutorials, just Google it. Alternatively you can use Windows PC as well and install Apache, PHP, and MySQL on it.
But briefly:
sudo apt update
sudo apt install apache2
sudo ufw app list
sudo ufw allow in "Apache Full"
sudo apt install mysql-server
sudo mysql_secure_installation
sudo apt install php libapache2-mod-php php-mysql
sudo systemctl restart apache2
Next create our playground:
1. create new directory
cd
mkdir www
2. verify that the name of the default Apache virtual site configuration file is 000-default.conf and create its copy
ls /etc/apache2/sites-available
sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/helloweb.conf
3. edit new config file, set ServerName to helloweb, set path to /home/<user>/www (note – your user name)
sudo vi /etc/apache2/sites-available/helloweb.conf
<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
ServerName helloweb
ServerAdmin webmaster@localhost
DocumentRoot /home/<user>/www/
<Directory /home/<user>/www/>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
...
4. enable new virtual site
sudo a2ensite helloweb
5. edit system hosts file and add helloweb as a localhost
sudo vi /etc/hosts
127.0.0.1 helloweb
6. restart the Apache
sudo systemctl restart apache2
We should be all set.
Now all the preparations are done we are back to business.
Let’s do our first web page – it would be “Hello World” as usual
cd
vi hello.html
<html>
<head>
<meta charset="utf-8">
<title>HelloWeb</title>
</head>
<body>
Hello, Web!
</body>
</html>
Save the file, open web browser and go to http://helloweb/hello.html
you should be greeted with “Hello, Web!”
Let’s do our first JavaScript page – “Hello World” as usual
cd
vi js.html
<html>
<head>
<meta charset="utf-8">
<title>HelloWeb</title>
</head>
<body>
<script>console.log("Hello, World from JavaScript")</script>
Hello, Web!
</body>
</html>
Save the file, open web browser and go to http://helloweb/js.html this time.
you should be greeted with “Hello, Web!”… but, wait, where is our JavaScript greeting?
We didn’t put it on the web page, instead we print it in a developer console.
On most browsers you can open it up by pressing F12 (or go to the menu and open Developer Tools). It would open many tabs, if Console Tab is not active, switch on it and there you should see our greeting.
This is very useful for debugging purposes.
Let’s do our first PHP page – “Hello World” again
cd
vi hello.php
<html>
<head>
<meta charset="utf-8">
<title>HelloWeb</title>
</head>
<body>
<?php echo "Hello, Web, from PHP"; ?>
</body>
</html>
Save the file, open web browser and go to http://helloweb/hello.php (note the extention!)
you should be greeted with “Hello, Web, from PHP!”
Let’s do our first page with MySQL access
but first we need some additional MySQL configuration – create new user:
sudo mysql
mysql> GRANT ALL PRIVILEGES ON *.* TO 'username'@'localhost' IDENTIFIED BY 'password';
mysql> exit
Replace username with the user you want to create, and replace password with the user’s password (let’s use VeryLongPassword)
cd
vi msql.php
<!DOCTYPE html>
<html>
<body>
Hello from MySQL:<br>
<?php
$servername = "localhost";
$username = "your_mysql_user_name";
$password = "VeryLongPassword";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// echo "Connected successfully <br>";
$sql = "SELECT 'Hello World' as 'str'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo $row["str"] . "
";
}
} else {
echo "0 results";
}
$conn->close();
?>
</body>
</html>
Save the file, open web browser and open http://helloweb/msql.php
you should be greeted with “Hello from MySQL: Hello World”
As I mentioned at the beginning you should always test your code running as it’s in production – to have a dedicated web-server.
Let’s do one in Amazon Web Services. You can try it our for free for up to a year.
So go to AWS, login with your Amazon account and switch to EC2 service.
1. Click Launch Instance
2. Switch to AWS Marketplace and in search tool type “CentOS 7” -> Scroll for “CentOS 7 (x86_64)…” with ‘Free tier eligible’ -> Click Select
3. Click Continue on Prices page
4. Select t2.micro (with ‘Free tier eligible’) or t2.nano -> Click Review and Launch
5. Click Launch
6. (!!! don’t miss this step) Select Create a new key pair, type name (centOS7nano) -> Download Key Pair
7. Click Launch
8. Go back to EC2 Dashboard and check on your new computer status (should be Initializing, then running), write down instance IP address
9. Select your instance and at the bottom click on Security group
10. Switch to Inbound and check if HTTP is in the list; if not click Edit -> Add Rule -> Select HTTP in the type drop down list, use default values.
9. if you on Linux machine open Terminal, if you are on Windows machine open Cygwin.
10. Copy centOS7nano.pem to your home directory, change permissions for it:
chmod 500 centOS7nano.pem
11. Connect to your new instance:
ssh -i centOS7nano.pem centos@<ip_address>
12. Install LAMP stack. Again Google how to do it.
But briefly:
sudo yum install httpd
sudo systemctl start httpd.service
sudo systemctl enable httpd.service
sudo yum install mariadb-server mariadb
sudo mysql_secure_installation
sudo systemctl enable mariadb.service
sudo yum install php php-mysql
sudo systemctl restart httpd.service
Now open your browser and go to http://<ip_address_of_your_instance>
You should see “Testing 123…” – you are good to go with your deployment.
So now what you can do is copy all the test files you did to the cloud and test them.
scp -i centOS7nano.pem hello.html centos@<ip_address>:~/hello.html
scp -i centOS7nano.pem js.html centos@<ip_address>:~/js.html
scp -i centOS7nano.pem hello.php centos@<ip_address>:~/hello.php
...
ssh -i centOS7nano.pem centos@<ip_address>
[centos@ip-...]$ sudo mv hello.html /var/www/html/
[centos@ip-...]$ sudo mv js.html /var/www/html/
[centos@ip-...]$ sudo mv hello.php /var/www/html/
...
[centos@ip-...]$ sudo chown apache:apache -R /var/www/html/
[centos@ip-...]$ sudo chcon -Rv --type=httpd_sys_rw_content_t /var/www/html/
Now open your browser and go to http://<ip_address_of_your_instance>/hello.html
You should see “Hello, Web!”
For real projects though you don’t want to copy files one by one. I would recommend to setup GitHub repository and sync file via it.