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.

17,414 comments

  1. boss baby 2

    When I originally commented I appear to have clicked on the -Notify me when new comments are added- checkbox and now every time a comment is added I recieve 4 emails with the exact same comment.

    Is there a way you are able to remove me from that service?
    Many thanks!

  2. 반대와 나

    Great beat ! I wish to apprentice even as you
    amend your site, how could i subscribe for a blog site?
    The account helped me a appropriate deal. I had been a little bit familiar of this your broadcast offered vibrant transparent idea

  3. 마사지 업소

    Greetings! Very helpful advice in this particular post! It is the little changes
    which will make the most important changes. Thanks a lot for sharing!

  4. 007카지노

    Excellent article. I absolutely love this site.
    Continue the good work!

  5. 홀짝 토토사이트

    This is very interesting, You’re a very skilled blogger.
    I’ve joined your rss feed and look forward to seeking more of your
    magnificent post. Also, I have shared your website in my social networks!

    Here is my web blog … 홀짝 토토사이트

  6. vlxx

    My coder is trying to convince me to move to .net from PHP.

    I have always disliked the idea because of the costs.

    But he’s tryiong none the less. I’ve been using Movable-type on various websites for about a year and am anxious about switching to another platform.
    I have heard good things about blogengine.net.
    Is there a way I can transfer all my wordpress posts into it?
    Any kind of help would be greatly appreciated!

  7. solar farms

    Thanks for sharing your info. I really appreciate your efforts
    and I will be waiting for your next post thank you
    once again.

    Visit my web-site – solar farms

  8. casino india

    Have you ever considered writing an e-book or guest authoring on other sites?

    I have a blog based on the same information you discuss and would
    really like to have you share some stories/information. I know my readers would appreciate your work.
    If you’re even remotely interested, feel free to send me an e-mail.

  9. 골드 카지노

    Great beat ! I wish to apprentice while you amend your web site,
    how could i subscribe for a blog web site? The account helped me
    a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright
    clear concept

  10. 563

    Please let me know if you’re looking for a article author for
    your blog. You have some really great posts and I feel I would be a good asset.
    If you ever want to take some of the load off, I’d love
    to write some content for your blog in exchange for a link back to mine.
    Please send me an e-mail if interested. Regards!

    Here is my web blog; 563

  11. カジノゲーム

    Hi, i think that i saw you visited my web
    site so i came to “return the favor”.I am attempting
    to find things to improve my site!I suppose its ok to use some
    of your ideas!!

  12. 성남교정치과

    Hi there would you mind letting me know which
    webhost you’re utilizing? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot
    faster then most. Can you suggest a good hosting provider at
    a reasonable price? Thank you, I appreciate it!

    my blog: 성남교정치과

  13. Danny Ro (Artist)

    It is perfect time to make some plans for the future and it’s
    time to be happy. I’ve read this post and if I could I wish to
    suggest you few interesting things or advice. Perhaps you can write next articles referring to this article.
    I desire to read even more things about it!

    Have a look at my web page; Danny Ro (Artist)

  14. osmp.fr

    Great blog! Do you have any suggestions for aspiring writers?
    I’m hoping to start my own website soon but I’m a little lost on everything.
    Would you suggest starting with a free platform like WordPress or
    go for a paid option? There are so many choices
    out there that I’m completely overwhelmed .. Any suggestions?
    Thanks!

  15. bet365 korea

    This post will assist the internet users for building up new blog or even a weblog from start to end.

  16. Xóc Đĩa

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

  17. リアルドール

    Hi there just wanted to give you a brief heads up and let you know a few of the
    pictures aren’t loading correctly. I’m not sure why but
    I think its a linking issue. I’ve tried it in two different browsers and both show the same results.

  18. check this site

    Ahaa, its pleasant discussion regarding this piece of writing at this
    place at this website, I have read all that, so now me also commenting
    at this place.

  19. html 5 refrence

    It is in point of fact a nice and helpful piece of information. I’m happy that you just shared this useful information with us.
    Please stay us up to date like this. Thank you for sharing.

  20. 샌즈카지노

    Spot on with this write-up, I absolutely think this web site needs a great deal more attention.
    I’ll probably be back again to see more,
    thanks for the advice!

  21. attic stairs

    Oh my goodness! Awesome article dude! Thanks, However I am experiencing issues
    with your RSS. I don’t understand the reason why I am unable to join it.
    Is there anyone else getting the same RSS problems? Anybody who knows the answer will you kindly respond?
    Thanx!!

  22. roulettes casino online

    Excellent goods from you, man. I’ve take note your stuff previous to and you are just extremely wonderful.
    I actually like what you’ve acquired here, really like what
    you’re stating and the way wherein you say it.
    You are making it enjoyable and you still take care
    of to stay it wise. I can not wait to read far more from you.
    This is actually a tremendous site.

  23. 1xbet

    I’m extremely inspired with your writing abilities and also with the format in your weblog.
    Is that this a paid subject matter or did you
    modify it your self? Either way keep up the nice quality writing, it’s
    uncommon to look a great blog like this one these days..

  24. andar bahar real money

    I believe that is among the such a lot vital info for me.
    And i am happy reading your article. However wanna commentary on few normal things,
    The website taste is wonderful, the articles is in reality excellent :
    D. Just right job, cheers

  25. hack tiến lên miền nam

    If some one wishes to be updated with newest technologies
    then he must be visit this web page and be up to date daily.

Leave a Reply

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