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.

1,260 comments

  1. marina sirtis nude

    Howdy just wɑnted tօ ɡive yoᥙ ɑ quick heads up. Thhe ttext
    in your content seem to be running off the screen in Opera.
    I’m nnot suure if thіs is a formatting issue ⲟr ѕomething tο do ᴡith web browser compatibility Ƅut Ι tһߋught I’d post to
    let you know. Tһe design аnd style loοk great tһough! Hope ʏоu
    get the problem resolved soоn. Many thаnks

    Мy webpage … marina sirtis nude

  2. YouTube.com

    Appreciating the commitment you put into your website and in depth information you
    present. It’s awesome to come across a blog every once in a
    while that isn’t the same unwanted rehashed information. Fantastic read!
    I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

  3. Продвижение сайтов SEO

    Hello my family member! I want to say that this post is amazing,
    nice written and come with approximately all
    significant infos. I’d like to see more posts like this .

  4. RoyalYGelzer

    I understand this web site gives quality based articles or reviews and other data, will
    there be every other site which gives such information in quality?

    My blog post RoyalYGelzer

  5. Viking legend slot machine

    It’s the best time to make some plans for the future and it’s time
    to be happy. I have read this publish and if I could I wish to counsel you some interesting things or tips.

    Perhaps you could write subsequent articles referring to this article.
    I wish to learn even more issues approximately it!

  6. 일산요정

    Oh my goodness! Amazing article dude! Thank you so much, However I am
    having problems with your RSS. I don’t understand why I
    cannot join it. Is there anybody else having identical RSS
    issues? Anyone who knows the answer will you kindly respond?
    Thanx!!

  7. game casino online indonesia

    Toivotan tänään onnea tavoittaa sinut ja antaa sinulle mahdollisuuksia ja
    mahdollisuuksia kaikkien tavoitteiden toteuttamiseen

  8. game casino online indonesia

    Принял уже посля дня рождения прстараюсь запускаться почаще,ребята

  9. 온라인카지노

    Wonderful beat ! I wish to apprentice while you amend your site,
    how could i subscribe for a blog site? The account aided me a applicable deal.
    I have been a little bit acquainted of this your broadcast provided bright clear idea

    my page :: 온라인카지노

  10. Dan

    Это приложение позволяет мне слушать
    100 000 радиостанций. Встроенная в iPad утилита «Книги» позволяет людям покупать книги в книжном магазине Applе.
    В этом случае несправедливо требовать покупки 1 штуки в
    составе колледжа. Победитель игры в
    гольф награждается монетами, которые затем могут быть использованы для покупки
    лучшего снаряжения, лучших мячей и
    некоторых других вещей. Воскресное приложение для отдыха на лужайке для
    iPhkne и iPad на самом деле представляет
    собой небольшое удобное
    приложение. В iPod и iPhone есть отличный встроенный
    научный калькулятор, и это все,
    что мне нужно для курсов, которые я тренирую.
    Лица, загружающие программы,
    должны быть «связаны с
    сертифицированным учреждением»,
    что дает некоторую уверенность в их качестве и надежности.
    Я согласен, я считаю, что проблема здесь в
    том, что люди создают вторые учетные записи.
    Это вызывает удивление – неужели эти люди
    думают, что мы неграмотны и не заботимся о обществе, которое не должно
    знать о нашемМире. Я думаю, она хочет
    понять, что теперь она бабушка.
    Сейчас мировые покупатели ищут Индию как наиболее
    популярное место для инвестиций.
    Благодаря устройствам с электрическим
    приводом и компьютерным системам
    люди теперь общаются друг с другом независимо от
    расстояния.

  11. whatsapp pedofilia imagens

    I enjoy what you guys are usually up too. This kind of clever work and exposure!
    Keep up the fantastic works guys I’ve included you guys to
    my blogroll.

  12. web site

    Wow, marvelous blog layout! How long have you been blogging for?
    you made blogging ook easy. The overall look of your website is magnificent, as well as the content!

    Greatest songs of all timee web site
    board games for kids

  13. YouTube.com

    I blog often and I genuinely thank you for your content.
    Your article has truly peaked my interest. I will take a note of your site and keep checking for new information about once a week.
    I opted in for your Feed as well.

  14. gta 5 mobile

    It’s actually a nice and useful piece of info.
    I’m glad that you just shared this helpful information with
    us. Please keep us informed like this. Thank
    you for sharing.

  15. 바카라사이트

    Hmm is anyone else experiencing problems with the images on this blog loading?
    I’m trying to find out if its a problem on my end orr if it’s thee blog.
    Any suggestions would be greatly appreciated.

    Here is my website 바카라사이트

  16. Thanksgiving

    Unquestionably imagine that that you stated. Your favourite justification seemed to be at the web the easiest
    thing to consider of. I say to you, I definitely get irked
    whilst other folks think about issues that they just don’t recognize about.
    You controlled to hit the nail upon the top as smartly as defined out the entire thing without having side effect , people
    can take a signal. Will likely be again to get more. Thank you

  17. Thanksgiving

    Spot on with this write-up, I absolutely feel this amazing site
    needs a lot more attention. I’ll probably be back again to see more, thanks for the information!

  18. Moonshine still kits

    I do agree with all the ideas you’ve presented on your post.
    They’re really convincing and will definitely work.
    Still, the posts are too short for beginners. Could you
    please prolong them a bit from subsequent time? Thank you for the post.

  19. Simple Keto Burn

    Hello, I think your blog might be having browser compatibility
    issues. When I look at your blog in Ie, it looks fine
    but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, terrific blog!

    my blog post :: Simple Keto Burn

  20. synthwave

    Thanks for ones marvelous posting! I actually enjoyed reading it,
    you happen to be a great author.I will make certain to bookmark your blog and will come back at some point.
    I want to encourage that you continue your great posts, have a
    nice weekend!

  21. 출장안마

    Right here is the perfect web site for anyone who hopes to understand this topic.
    You understand so much its almost hard to argue with you (not that
    I actually would want to…HaHa). You definitely put a fresh spin on a subject which
    has been written about for years. Great stuff, just excellent!

  22. แทงบอล

    เมื่อได้ติดตามการเดิมพันปากทางเข้า
    แทงบอล OLE98 ที่ปัจจุบันนี้เปลี่ยนเป็นกิจกรรมเด่นๆที่นักพนันต่างก็พากันให้การตอบรับจากนักเสี่ยงดวงแต่ละท่านที่ถูกใจพนันบอลออนไลน์ โอเล่98 กับเว็บแห่งนี้ ซึ่งเว็บแห่งนี้จะกลายเป็นเว็บที่สร้างความสำราญแล้วก็ความเพลิดเพลินออนไลน์ ยิ่งได้ติดตามกับเว็บไซต์ออนไลน์ ก็ล้วนแล้วเป็นกิจกรรมเด่นๆที่จะทำให้นักเล่นการพนันเอ๋ยถึงและมีผู้คนพอใจจำนวนมาก ถ้าเกิดคนใดที่กำลังตกลงใจพนันไปกับออนไลน์ ที่โด่งดังต้องไม่พลาดกันเลย ถ้าแบบนั้นมาดูกันเลยก็ว่าเกมพนันออนไลน์ในขณะนี้เป็นกิจกรรมที่น่าสนใจจำนวนไม่ใช่น้อย

Leave a Reply

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