2nd Web Development Tutorial : Basic Concept of PHP, HTML, MySQL, Javascript, CSS

As I mentioned in the previous post, basically, there are three main things to understand in web development.

  1. Server-side scripting (PHP, Python, Pearl, Java, C++, etc)
  2. Client-side scripting (HTML, Javascript, CSS, etc)
  3. Database (Oracle, MySQL, etc)

For server-side and database scripting, commonly, you only need to understand only one of the languages. For example, with a very simple understanding of PHP and MySQL, and a little bit of client-side scripting knowledge, you can already create a very powerful site.

As we can see in the picture above, Client Side is really in the client side, but developer must also create the code for them. This is because although we develop something in the server side, the server will process the code and send it to clients. One basic thought that we must consider is that server side script will convert itself to client side script based on how we create it to do so. So, users in the client side won’t be able to see our PHP script at all. What they see is just codes of HTML, CSS, Javascript, and other client side scripts. For instance, we create a code like this in our index.php page :

<?php
echo 'This is my beautiful website.';
?>

Whenever a user requested index.php page, the server is not going to send that code to client. Instead, PHP will convert it to client side code. In this case, the code above will convert to HTML code below.

As you can see, clients can only see HTML code, not the PHP code. They can only see other client side scripts such as javascript, CSS, and HTML. For those who wonder how to see raw HTML code as seen above, simply right click on any area in your browser, then click Inspect.

Now let’s dig in deeper into the collaboration of Server, Client, and Database scripting. Let’s create a simple PHP code below called simpleweb.php.

<!DOCTYPE html>
<html>
<head>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    
    table, td, th {
        border: 1px solid black;
        padding: 5px;
    }
    
    th {text-align: left;}
</style>
<script>
  alert('Hey, JS is working here');
</script>
</head>
<body>

<?php
$con = mysqli_connect('localhost','root','','test');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"test");
$sql="SELECT * FROM tb_user";
$result = mysqli_query($con,$sql);

echo "<table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Hometown</th>
    <th>Job</th>
    </tr>";
    while($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['firstname'] . "</td>";
        echo "<td>" . $row['lastname'] . "</td>";
        echo "<td>" . $row['age'] . "</td>";
        echo "<td>" . $row['hometown'] . "</td>";
        echo "<td>" . $row['job'] . "</td>";
        echo "</tr>";
    }
    echo "</table>";
    mysqli_close($con);
?>
</body>
</html>

Code above contains all client side programming languages I mentioned earlier (HTML, Javascript, and CSS), and PHP and MySQL code. Let’s see how it looks like in the client side.

At first, because we added javascript in our code containing Alert function, Chrome interprets it as an alert to be shown first before showing other things. Let’s see the rest of the response it received after I clicked OK in the alert box.

From picture above, we can see that there is no more PHP or MySQL code at all. What wee see is just a bunch of HTML, Javascript, and CSS code based on how we code on PHP. The table is nicely styled in CSS, and the content is like being hard coded, although actually it is taken directly from MySQL database, which is very dynamic.

So that is a very simple understandings on how server, client, and database scripts works in web development. I recommend you to try yourself using my code above in order to understand it very well. After this, I will post another interesting topic to learn deeper about each individual languages. So, keep learning and don’t forget to code.

1 comment

  1. https://routersettings.site/

    Hi there, after reading this awesome piece of writing i
    am too glad to share my familiarity here with mates.

Leave a Reply

Your email address will not be published. Required fields are marked *