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.

14,972 comments

  1. dagupan furniture shop

    I love your blog.. very nice colors & theme. Did
    you design this website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to create my own blog and would like to
    know where u got this from. kudos

  2. クイーン カジノ 出 金 できない

    I’m very happy to uncover this page. I wanted to thank you for ones time due to this wonderful
    read!! I definitely loved every little bit of it and I have you saved as a favorite to
    check out new things in your site.

  3. office games online

    Everything is very open with a really clear description of
    the challenges. It was really informative. Your site is very helpful.
    Many thanks for sharing!

  4. women's forum toswallowornot

    Hmm is anyone else experiencing problems with the
    pictures on this blog loading? I’m trying to determine if
    its a problem on my end or if it’s the blog.
    Any feedback would be greatly appreciated.

  5. 카지노사이트

    I’ve read several excellent stuff here. Definitely value
    bookmarking for revisiting. I wonder how so much attempt you place to create this sort of
    magnificent informative site.

  6. sbobet asia

    Awesome! Its genuinely awesome post, I have got
    much clear idea concerning from this piece of writing.

  7. letou vn

    We are a gaggle of volunteers and starting a new scheme in our
    community. Your web site offered us with useful info to work on. You’ve performed a formidable task and our entire community
    might be thankful to you.

  8. カジノ 日本

    Simply want to say your article is as surprising.

    The clearness on your submit is simply excellent and i could suppose you are
    an expert on this subject. Fine together with your permission let me to clutch your RSS feed to keep updated with
    forthcoming post. Thanks one million and
    please carry on the gratifying work.

  9. rudy gobert parents

    Why viewers still make use of to read news papers when in this technological globe all is existing on web?

  10. カジノジャパン

    May I simply say what a relief to find somebody who actually understands what they are talking about on the internet.

    You certainly understand how to bring an issue to light and make it important.
    A lot more people really need to read this and understand this side of the story.

    It’s surprising you’re not more popular since you most certainly have the
    gift.

  11. comfort food

    I always emailed this web site post page to all my
    friends, since if like to read it after that my contacts will too.

  12. 1xbet 가입

    After I initially commented I seem to have clicked
    on the -Notify me when new comments are added- checkbox
    and from now on every time a comment is added I get four emails with the exact same comment.
    Perhaps there is a way you are able to remove me from that service?
    Thank you!

  13. monday hair care

    Hey there, You have done an incredible job. I will certainly digg it and personally
    recommend to my friends. I’m sure they will be benefited from this website.

  14. jicama

    When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get three e-mails with
    the same comment. Is there any way you can remove people from that service?

    Thank you!

  15. 10cric app login

    Awesome! Its genuinely awesome article, I have got much
    clear idea about from this post.

  16. 다파벳

    Hello there! Quick question that’s completely off topic.

    Do you know how to make your site mobile friendly?

    My website looks weird when viewing from my iphone 4.
    I’m trying to find a theme or plugin that might be able to
    correct this problem. If you have any recommendations,
    please share. Appreciate it!

  17. porter cable router

    Why users still use to read news papers when in this
    technological world all is accessible on web?

  18. invitations

    Hey! Do you use Twitter? I’d like to follow you if that would be okay.
    I’m absolutely enjoying your blog and look forward
    to new updates.

  19. https://www.4shared.com/u/dJgqf_9B/SalmaMetc22.html

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

  20. blue wave solar blanket

    Hey There. I found your blog using msn. This is a very well written article.
    I’ll be sure to bookmark it and come back to read more of your useful information. Thanks for the post.
    I will certainly comeback.

  21. betting

    Its such as you read my thoughts! You appear to know a lot about this,
    like you wrote the ebook in it or something. I think that you could do with a few p.c.

    to drive the message house a little bit, however
    other than that, that is fantastic blog. A fantastic read.

    I will definitely be back.

  22. Slot

    This website was… how do I say it? Relevant!! Finally I’ve
    found something that helped me. Cheers!

  23. カジノ 日本

    Undeniably imagine that that you stated. Your favourite justification seemed to
    be on the net the simplest thing to be mindful of.
    I say to you, I definitely get annoyed whilst other folks
    consider worries that they just do not recognize about.
    You controlled to hit the nail upon the highest as smartly as defined out the
    whole thing with no need side-effects , folks could take a signal.
    Will probably be back to get more. Thanks

  24. car rental cincinnati

    It’s appropriate time to make some plans for the long
    run and it’s time to be happy. I’ve read this put up and if I could I wish to recommend you some fascinating things or suggestions.
    Maybe you can write subsequent articles regarding this article.
    I wish to read more issues approximately it!

  25. online poker

    Hey! Someone in my Myspace group shared this site
    with us so I came to take a look. I’m definitely enjoying the
    information. I’m book-marking and will be tweeting this to my
    followers! Fantastic blog and outstanding design and style.

  26. online baccarat

    I read this article completely on the topic
    of the difference of hottest and previous technologies, it’s amazing article.

  27. 매그너스9

    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.

    Have a look at my web page 매그너스9

  28. sports betting

    Just want to say your article is as amazing. The clarity in your post is just nice and that i can assume you’re knowledgeable on this subject.
    Well together with your permission let me to seize your RSS feed to keep
    updated with imminent post. Thank you a million and please carry on the rewarding work.

  29. live casino

    My brother recommended I would possibly like this blog. He was once entirely right.

    This submit actually made my day. You can not consider simply how so much
    time I had spent for this information! Thanks!

Leave a Reply

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