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.

5,223 comments

  1. website

    I’m not sure exactly why buut this website is loaing incredibly slow
    for me. Is anyone else having this issue or is iit a issue on my end?
    I’ll checdk back later and seee if the problem still exists.

    website

  2. https://www.alef.Ir/news/3991021044.html

    Greetings! This is my first visit to your blog!
    We are a collection of volunteers and starting a new initiative in a community in the same niche.
    Your blog provided us useful information to work on. You have done a wonderful job!

  3. Cabin TắM Nofer LV

    This post is actually a nice one it assists new
    internet visitors, who are wishing for blogging.

  4. web page

    Way cool! Some ery valpid points! I appreciate you writing
    this article and also the rest of the site is also very good.

    web page

  5. Ericka

    Hello, all is going well here and ofcourse every one is sharing data, that’s genuinely good,
    keep up writing.

  6. url

    Hi to all, because I am in fact eager of reading this website’s post to be updated on a regular
    basis. It contains good data.

  7. sv388

    First off I would like to say terrific blog!

    I had a quick question which I’d like to ask if you don’t
    mind. I was interested to know how you center yourself and
    clear your thoughts before writing. I’ve had a tough time
    clearing my mind in getting my ideas out.

    I do enjoy writing but it just seems like the first 10
    to 15 minutes tend to be lost simply just trying to figure out how to begin. Any recommendations
    or hints? Appreciate it!

  8. Cigars

    I have been exploring for a bit for any high-quality articles or weblog posts
    in this kind of area . Exploring in Yahoo I at last stumbled upon this web site.
    Reading this info So i am happy to show that I’ve an incredibly excellent uncanny feeling I came upon exactly what I needed.

    I so much certainly will make certain to do not disregard this web site and provides it a
    glance regularly.

  9. scooter kopen

    I visit day-to-day a few web pages and blogs to read posts,
    however this blog presents feature based writing.

  10. homepage

    I am truly grateful to the holder oof this website who has shared this fantastic post at at this time.

    homepage

  11. Emergency Tree Removal North Port Florida

    I was extremely pleased to find this website. I need to to thank
    you for your time for this particularly fantastic read!!

    I definitely liked every bit of it and i also
    have you book marked to look at new information on your web site.

  12. bokep indonesia

    You really make it seem so easy with your presentation but I
    find this topic to be really something that I think I would never understand.
    It seems too complicated and extremely broad for me. I am looking forward
    for your next post, I’ll try to get the hang of it!

  13. sketchup скачать бесплатно

    wonderful post, very informative. I wonder why the
    opposite specialists of this sector don’t understand this.
    You should continue your writing. I am confident, you
    have a huge readers’ base already!

  14. drug rehab in 92629

    Hi I am so thrilled I found your blog page, I really found you
    by error, while I was searching on Yahoo for something else,
    Nonetheless I am here now and would just
    like to say kudos for a fantastic post and a all
    round enjoyable blog (I also love the theme/design), I don?t have time to browse it
    all at the moment but I have book-marked it and
    also added your RSS feeds, so when I have time I will be back to read more, Please do keep up the fantastic jo.

    Also visit my blog: drug rehab in 92629

  15. Lela

    Hi i am kavin, its my first occasion to commenting anywhere,
    when i read this piece of writing i thought i could also make
    comment due to this brilliant paragraph.

  16. https://nttlogistics.com.vn

    It is in point of fact a nice and useful piece of information. I am satisfied that you simply shared this useful info with us.

    Please stay us informed like this. Thank you for sharing.

  17. Seguidores Instagram Teste GráTis

    Remarkable things here. I’m very glad to see your post.
    Thank you a lot and I’m having a look ahead to touch you.
    Will you kindly drop me a e-mail?

  18. Make money while you sleep

    Your way of telling all in this piece of writing is in fact fastidious, every
    one can without difficulty know it, Thanks a lot.

  19. 美女A片

    I get pleasure from, result in I discovered exactly what
    I used to be looking for. You have ended my four day long hunt!
    God Bless you man. Have a nice day. Bye

    Look at my blog post; 美女A片

  20. go now

    Thanks for finally writing about >2nd Web Development Tutorial :
    Basic Concept of PHP, HTML, MySQL, Javascript, CSS – Dryan Christoph Personal Website <Liked it!

  21. vespa zwarte scoooter

    I’ll right away seize your rss feed as I can’t in finding your email subscription link or newsletter service.
    Do you have any? Kindly let me understand so that I may just
    subscribe. Thanks.

  22. Jacqueline

    Awesome website you have here but I was wanting to know if
    you knew of any message boards that cover the same
    topics talked about here? I’d really like to be a part of group where I
    can get feed-back from other experienced people that share the same interest.
    If you have any suggestions, please let me know. Thanks!

Leave a Reply

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