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,854 comments

  1. slot online

    Heya! I just wanted to ask if you ever have any issues with hackers?
    My last blog (wordpress) was hacked and I ended up losing many months of hard work due
    to no data backup. Do you have any methods to protect
    against hackers? https://www.scorezaa.com/board/26642

  2. website speed test

    I always spent my half an hour to read this weblog’s articles daily along with a cup of coffee.

  3. 비키니라인 왁싱

    Very soon this site will be famous among all blogging and site-building viewers, due to it’s nice articles or reviews

  4. 동행복권 파워볼

    Wonderful blog! Do you have any helpful
    hints for aspiring writers? I’m hoping to start my own site soon but I’m a little lost on everything.
    Would you advise starting with a free platform like WordPress or go for a paid option? There are so many options
    out there that I’m totally confused .. Any tips? Thanks!

  5. https://wedidreviewforyou.com/uscode/512874

    You can certainly see your skills in the work you write.
    The arena hopes for more passionate writers like you who aren’t afraid to mention how they believe.
    All the time follow your heart.

  6. 온라인카지노

    Very nice post. I just stumbled upon your weblog and wanted to say that I’ve really enjoyed browsing your blog posts.
    After all I will be subscribing to your rss feed and I hope you write
    again soon!

  7. 대구안마 사이트

    What’s up, of course this article is actually good and I have learned lot of things from it about blogging.

    thanks.

  8. เกมบาคาร่า

    เมื่อมีแนวทางดีๆเราก็อยากแบ่งปัน เพื่อให้ผู้เล่นที่เป็นพวกได้มีโอกาสชนะ เกมบาคาร่า 99% เพียงแค่เป็นพวกก็ได้วิธีการเล่นที่โคตรคดโกงไปแล้ว วันนี้พวกเราจะมาบอก 4
    เคล็ดวิธีคร่าวๆเทคนิคแรกที่พวกเราจะมาเสนอแนะเลยคือ เราจำต้องรู้จักกันก่อนว่า บาคาร่า มันเล่นอย่างไร แล้วกรรมวิธีการเล่นมันมีแบบไหนบ้างใน เกมบาคาร่า เขามีอะไรให้พวกเราได้เลือกเล่นบ้าง นี่เป็นข้อมูลเบื้องต้นที่ทุกคนที่ปรารถนา เล่นบาคาร่า จำเป็นต้องเรียนรู้มาก่อนอย่างก็ดีแล้วพื้นฐานก็เลยจะสามารถเริ่ม เล่นบาคาร่า ได้อย่างมีคุณภาพ เทคนิคลำดับที่สอง ให้เริ่มเล่นด้วยทุนตั้งต้อนที่น้อยๆไว้ก่อน ไม่สมควรนำทุนเป็นจำนวนมากมาลองเล่นตั้งแต่คราวแรกที่เล่น เนื่องจากว่าการที่พวกเรายังเล่นไม่เป็นแล้วมาทุ่มทุนเล่นไปเลยตั้งแต่ต้นมันสามารถทำให้เราเสียทุนไปได้เลยฟรีๆเนื่องจากว่าแบบงั้นพวกเราจะต้องเริ่มเล่นครั้งแรกด้วยทุนน้อยๆเคล็ดลับที่สาม เก็บประสบการณ์การเล่นจากการเล่นตอนแรกๆให้ได้มากที่สุดมานะจำลายไพ่แต่ละลายที่ได้ออกมาให้ได้ แล้วเวลาเราจำ เค้าไพ่บาคาร่า
    ได้หมดแล้วตอนนี้เวลาเล่น เราจะสามารถเดาทางของไพ่ได้อย่างแม่นยำแน่ๆ
    เคล็ดลับที่สี่ ศึกษาทุกบทที่เราได้สอนไปให้เข้าใจหลังจากนั้นเล่นอย่างมีสติสัมปชัญญะ เล่นแบบตั้งความมุ่งหมาย รายวัน รายเดือน อย่าเล่นแบบคนเล่นการพนัน ให้เก็บสะสมรางวัลน้อยๆไปเรื่อยหลังจากนั้นรางวัลน้อยๆที่พวกเราสะสมมาตั้งแต่ทีแรกจะแปลงเป็นเงินโตในอนาคตได้ แนวทางเอาชนะบาคาร่า วิธีการเล่นบาคาร่าแบบเซียน สูตรบาคาร่าฟรีหมายถึงสูตรที่สามารถช่วยให้นักพนันสามารถเล่น บาคาร่า ได้ง่ายขึ้น และก็เป็นสูตรที่ผลิตขึ้นมาด้วยระบบ AI ที่สามารถวิเคราะห์ผลของ เกมบาคาร่า ในแต่ละตาได้อย่างเที่ยงตรง

  9. 카지노사이트

    I read this post fully regarding the comparison of most recent and preceding technologies, it’s amazing article.

  10. 1960s fashion

    I think the admin of this web site is really working hard for his website, because here every material is quality based data.

  11. ‎オンラインカジノ ボーナス

    My partner and I stumbled over here from a different web page and thought I may as
    well check things out. I like what I see so i am just following you.
    Look forward to looking over your web page for a second time.

  12. 카지노사이트

    I’m not that much of a online reader to be honest but your sites really nice, keep it up!
    I’ll go ahead and bookmark your website to come back later.
    Many thanks

  13. 솔레어카지노

    Howdy would you mind sharing which blog platform you’re using?
    I’m looking to start my own blog in the near future but
    I’m having a hard time deciding between BlogEngine/Wordpress/B2evolution and Drupal.

    The reason I ask is because your design and style
    seems different then most blogs and I’m looking for something completely unique.
    P.S Sorry for getting off-topic but I had to ask!

  14. 빅카지노

    I will right away snatch your rss feed as I can’t in finding your e-mail subscription hyperlink or newsletter service.
    Do you’ve any? Please permit me recognize so that I may
    subscribe. Thanks.

  15. 오피아트

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

  16. 더나인카지노

    I always spent my half an hour to read this blog’s posts daily along with
    a mug of coffee.

  17. 1xbet

    Right away I am going to do my breakfast, when having my breakfast coming yet again to
    read additional news.

  18. 대구업소주소

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

  19. 구글광고 앞에 뜨는 방법

    I’m really enjoying the theme/design of your website.

    Do you ever run into any browser compatibility issues?
    A number of my blog visitors have complained about my
    blog not working correctly in Explorer but looks great in Opera.
    Do you have any suggestions to help fix this issue?

  20. 온라인카지노

    Excellent items from you, man. I have keep in mind your stuff prior to and you are just too great.
    I really like what you have obtained here, certainly like what you are saying and the way in which wherein you are
    saying it. You make it enjoyable and you continue to care
    for to keep it wise. I can not wait to read much more from you.
    That is actually a terrific web site.

  21. 솔레어카지노

    Hi! I know this is kind of off topic but I was wondering if you knew where
    I could find a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having problems finding one?
    Thanks a lot!

  22. 더킹카지노

    Hurrah! In the end I got a weblog from where I know how to truly take helpful data concerning my study and knowledge.

  23. 솔레어카지노

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

  24. 먹튀인증사이트

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

  25. homeless shelter near me

    Does your website have a contact page? I’m having
    problems locating it but, I’d like to send you an email.
    I’ve got some ideas for your blog you might be
    interested in hearing. Either way, great website and I look forward to seeing it grow over time.

  26. free domain registration

    That is a good tip especially to those new to the blogosphere.
    Short but very accurate information… Thanks for sharing this one.
    A must read article!

Leave a Reply

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