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.

7,428 comments

  1. edirne escort

    Hey superb blog! Does running a blog similar to this take a great deal of work?
    I’ve very little knowledge of programming but I was hoping
    to start my own blog soon. Anyway, if you have any suggestions or
    techniques for new blog owners please share. I understand this is off subject
    but I just needed to ask. Thanks a lot!

  2. 토토안전놀이터

    I was recommended this web site by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my problem.
    You’re incredible! Thanks!

    Also visit my web site – 토토안전놀이터

  3. https://sites.google.com/

    I’m gone to tell my little brother, that he should also visit this weblog on regular basis to take
    updated from latest news.

  4. asikqq

    Hey, I think your website might be having browser compatibility
    issues. When I look at your blog in Ie, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up!
    Other then that, fantastic blog!

  5. mbee.com.vn

    Howdy, There’s no doubt that your site could be
    having internet browser compatibility issues. When I take a look at your
    site in Safari, it looks fine however when opening in I.E., it has
    some overlapping issues. I merely wanted to give you a quick
    heads up! Besides that, great website!

  6. Bron 2

    Hey There. I found your blog using msn. This
    is an extremely well written article. I’ll make sure to bookmark it and
    come back to read more of your useful info. Thanks
    for the post. I’ll definitely return.

  7. site

    I absolutely love your site.. Excellent
    colors & theme. Did you create this web site yourself?

    Please replpy back as I’m trying to create my own personhal website and would like to know where you ggot this from or what the
    theme is called. Kudos!
    угловые шкафы купе заказать site стильные шкафы купе для спальни

  8. Mà giới thiệu ae888

    My brother recommended I might like this website.
    He was totally right. This post truly made my day. You cann’t imagine simply how much time I had spent for this
    info! Thanks!

  9. elazığ escort

    It’s truly very difficult in this full of activity life to
    listen news on Television, so I just use world wide web for that purpose, and take the latest
    news.

  10. forex day trading room

    Hey I know this is off topic but I was wondering if you knew
    of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite
    some time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your
    new updates.

  11. webpage

    My spouse and I stumbled over here fom a different ebsite and thought I should check
    things out. I likee what I seee so now i am following you.
    Look forward to looking into your web page for a second time.

    webpage

  12. Rafael

    Hi, yeah this article is really fastidious and I have learned lot off things from it regarding blogging.

    thanks.

    My site; stop your divore book for sale (Rafael)

  13. motivation

    Hello there, just became aware of your blog
    through Google, and found that it is truly informative.
    I’m gonna watch out for brussels. I will appreciate if you continue this in future.
    A lot of people will be benefited from your writing. Cheers!

  14. free dating websites

    I have been surfing online more than three hours nowadays, yet
    I by no means discovered any interesting article like yours.

    It is beautiful price enough for me. In my view, if all website owners
    and bloggers made just right content material as
    you probably did, the internet can be much
    more helpful than ever before.

  15. Luz

    Appreciating the hard work you put into your
    website and in depth information you present. It’s awesome to come
    across a blog every once in a while that isn’t the same out of date
    rehashed material. Excellent read! I’ve bookmarked your
    site and I’m adding your RSS feeds to my Google account.

  16. oasis dating site

    Hi there, I desire to subscribe for this web site to obtain most
    up-to-date updates, so where can i do it please assist.

  17. web site

    After looking over a handful of the articles on your site, I really like your way of blogging.
    I added it to my bookmark website list and will bee checking back
    in the near future. Please check out my web site too and let me know how you feel.

    web site

  18. paesc.online

    Hi, yup this piece of writing is genuinely good and I have learned lot of
    things from it about blogging. thanks.

    My page … paesc.online

  19. CHECK HERE

    Truly when someone doesn’t be aware of afterward its up to other visitors that they will
    assist, so here it happens.

  20. website

    I just like the helpful information you provide to your articles.
    I’ll bookmark your blog and test again here regularly. I am reasonably
    certain I will learn plenty of new stuff proper here!
    Bestt of luck for thhe following!
    website

Leave a Reply

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