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.

9,855 comments

  1. seo최적화

    I am not certain the place you are getting your information,
    however great topic. I needs to spend a while
    learning more or understanding more. Thanks for fantastic
    info I used to be in search of this information for my
    mission.

  2. 파워볼엔트리

    Hello, this weekend is nice designed for me, since this time i am reading this impressive informative article here at my home.

  3. Cutter Pumps in India

    It’s really very complicated in this busy life to listen news on TV, so I just use world wide web for that purpose, and obtain the most recent
    news.

  4. 솔레어카지노

    This piece of writing will help the internet people for building up new
    web site or even a weblog from start to end.

  5. 더킹카지노

    What’s up mates, its enormous paragraph on the topic of educationand entirely
    defined, keep it up all the time.

  6. 코인카지노

    Hmm it appears like your website ate my first comment (it was super long) so I guess I’ll just sum it up what I wrote and say, I’m thoroughly enjoying your blog.
    I as well am an aspiring blog blogger but I’m
    still new to the whole thing. Do you have any helpful hints for inexperienced
    blog writers? I’d genuinely appreciate it.

  7. live scan

    It’s actually a cool and helpful piece of info.

    I’m happy that you just shared this helpful info with us.

    Please keep us up to date like this. Thanks for sharing.

  8. 다파벳

    It’s very straightforward to find out any topic on web
    as compared to textbooks, as I found this article at this
    web site.

  9. 더나인카지노

    Thanks to my father who told me concerning this blog, this webpage is really
    awesome.

  10. 대구마사지 안내

    Please let me know if you’re looking for a article author for your weblog.

    You have some really great posts and I believe I
    would be a good asset. If you ever want to take some of the load
    off, I’d absolutely love to write some articles
    for your blog in exchange for a link back to mine.
    Please shoot me an email if interested. Thanks!

  11. htv2 trực tuyến

    Great weblog here! Additionally your site loads up fast! What host are you the use of?
    Can I get your associate hyperlink for your host?
    I wish my site loaded up as quickly as yours lol

  12. corner bathroom cabinet

    You made some really good points there. I checked
    on the web to find out more about the issue and found most people will go along with your views on this site.

  13. 백링크

    You are so interesting! I do not suppose I’ve truly read anything like that before.
    So good to discover somebody with a few original thoughts on this topic.
    Really.. thank you for starting this up. This site is one thing
    that is required on the web, someone with a bit of originality!

  14. 카지노사이트

    I am curious to find out what blog system you’re using?
    I’m experiencing some small security problems with my latest site and I would like
    to find something more safeguarded. Do you have any recommendations?

  15. 벳365 한글

    Hello! I just wanted to ask if you ever have any problems with hackers?
    My last blog (wordpress) was hacked and I ended up losing many months of hard work due
    to no back up. Do you have any solutions to stop hackers?

  16. Chana

    Appreciating the dedikcation you put into your site
    and detailed information you present. It’s great to come across a blog every once
    in a while thhat isn’t tthe same outdated rehashed information. Fantastic read!
    I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

    Review my blog … title lloans (Chana)

  17. Houses to buy

    We stumbled over here by a different website and thought I might as well check things out.
    I like what I see so i am just following you.

    Look forward to checking out your web page yet again.

  18. denmark down syndrome

    When I initially commented I appear to have clicked on the -Notify me when new comments are added- checkbox and from now on whenever a comment is
    added I receive 4 emails with the exact same comment.
    Perhaps there is an easy method you can remove me from that service?
    Many thanks!

  19. 더킹카지노

    Woah! I’m really enjoying the template/theme of this site. It’s simple,
    yet effective. A lot of times it’s difficult to get
    that “perfect balance” between superb usability and visual appearance.

    I must say you have done a awesome job with this.
    Additionally, the blog loads very quick for me on Chrome.
    Superb Blog!

  20. Jack

    This article is truly a good one it helps new net
    viewers, who are wishing in favor of blogging.

    my page title loans (Jack)

  21. 퍼스트카지노

    At this moment I am going to do my breakfast, once having my breakfast coming again to read more news.

  22. 파라오카지노

    I appreciate, lead to I found exactly what
    I was having a look for. You have ended my four day lengthy hunt!
    God Bless you man. Have a great day. Bye

  23. web site

    Thank you for sharing ypur thoughts. I really appresciate your efforts aand
    I am waiting for your newxt post thank you once again.
    Opciones binarias vs cfd web site son las opcones binarias dde
    juego

  24. 예스카지노

    You ought to take part in a contest for one of the most useful sites on the net.
    I’m going to highly recommend this blog!

  25. lawn mower shop

    Hi, after reading this remarkable paragraph i am as well cheerful to share my experience here with mates.

Leave a Reply

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