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.

8,480 comments

  1. sildenafil sublingual tablets

    Actually when someone doesn’t know after that its up to other
    viewers that they will help, so here it occurs.

  2. Rodrick

    It is perfect time to make a few plans for the longer term and it’s time to be happy.
    I have learn this put up and if I may just I want to
    suggest you few fascinating things or advice. Maybe you can write subsequent articles regarding this
    article. I want to learn more issues about it!

  3. nerium

    Hello just wanted to give you a quick heads up. The words in your article seem to be running off the screen in Firefox.
    I’m not sure if this is a formatting issue or something to do with internet browser compatibility but I thought I’d post to let you know.
    The layout look great though! Hope you get the problem fixed soon. Kudos

  4. trade bitcoin uae

    Everything is very open with a really clear clarification of the challenges.
    It was definitely informative. Your site is very helpful. Thanks for sharing!

  5. fun888

    I was suggested this web site by my cousin. I am not sure
    whether this post is written by him as nobody else know such detailed about my
    problem. You are amazing! Thanks!

  6. 메리트카지노쿠폰

    Hi every one, here every person is sharing these experience, so it’s pleasant to read this web site, and I used to pay
    a quick visit this blog everyday.

  7. 우리카지노

    It’s remarkable to visit this site and reading the views of all colleagues on the
    topic of this article, while I am also keen of getting knowledge.

  8. trò chơi baccarat

    I read this piece of writing completely on the
    topic of the resemblance of hottest and preceding technologies, it’s
    amazing article.

  9. phone wont connect to wifi

    We stumbled over here different web address and thought I may as well
    check things out. I like what I see so now i’m following you.
    Look forward to checking out your web page for a second time.

  10. Zak Kelliher

    These are the right Valentine’s Day flowers.

  11. https://www.kynghidongduong.vn/

    This excellent website definitely has all of the information and facts I wanted concerning
    this subject and didn’t know who to ask.

  12. Kathy

    Hi, i believe that i saw you visited my blog thus i got here to ?return thhe favor?.I
    am attempting tto ind issues to enhance my web site!I guerss its good enough to use some of your ideas!!

  13. 우리카지노

    What’s up i am kavin, its my first time to commenting anywhere, when i read this
    article i thought i could also create comment due to
    this good piece of writing.

  14. Ivey Grattan

    Glass vase and flowers could range in coloration.

  15. dự đoán xổ số miền bắc

    I am really loving the theme/design of your weblog. Do you ever run into
    any browser compatibility problems? A couple of my blog readers have complained about my blog not working correctly in Explorer but looks great in Safari.

    Do you have any suggestions to help fix this issue?

  16. idn poker

    Saved as a favorite, I like your blog!

  17. Авто из США под ключ

    Do you mind if I quote a few of your posts as long as I provide credit and
    sources back to your blog? My website is in the very same niche as yours and my visitors would certainly benefit from
    some of the information you provide here. Please let me know if this okay with you.
    Regards!

  18. asikqq

    This post is truly a pleasant one it assists new
    internet people, who are wishing for blogging.

  19. Margie Leggo

    Ship your love a Valentine’s Day reward basket this year.

  20. https://ajenako.com

    Thanks for sharing your thoughts about download mod apk gratis.
    Regards

  21. idn poker

    No matter if some one searches for his essential thing, thus he/she wishes to be
    available that in detail, therefore that thing is maintained over here.

  22. Marcel

    Thanks for ones marvelous posting! I truly enjoyed reading it, you might be a great author.
    I will always bookmark your blog and will eventually come back someday.

    I want to encourage one to continue your great posts, have a nice day!

  23. บาคาร่า 1688

    Thanks for one’s marvelous posting! I certainly enjoyed reading it, you could be a great author.I will remember to bookmark your blog and definitely will come back
    later in life. I want to encourage you to ultimately continue your great work, have a nice weekend!

  24. 우리카지노쿠폰

    I do not know whether it’s just me or if everybody else encountering
    problems with your blog. It appears like some of the written text
    within your content are running off the screen. Can somebody else please comment and let me know if this
    is happening to them too? This may be a issue with my internet browser because I’ve
    had this happen previously. Thanks

Leave a Reply

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