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.

621 comments

  1. Jan

    An outstanding share! I’ve just forwarded this onto a colleague who had been doing a little research
    on this. And he in fact bought me lunch because
    I found it for him… lol. So let me reword this…. Thank YOU for the meal!!
    But yeah, thanks for spending some time to discuss this
    issue here on your site.

    My web site; خرید بک لینک (Jan)

  2. bydlení

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

  3. Gothic Music

    Wonderful beat ! I would like to apprentice even as you
    amend your web site, how could i subscribe for a blog site?
    The account helped me a acceptable deal. I were
    a little bit acquainted of this your broadcast provided shiny transparent
    concept

  4. qq online

    Good day! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in exchanging links or maybe guest writing a blog post or
    vice-versa? My blog goes over a lot of the same
    subjects as yours and I feel we could greatly benefit
    from each other. If you might be interested feel
    free to shoot me an e-mail. I look forward to hearing
    from you! Superb blog by the way!

    Here is my site qq online

  5. Obey hoodie

    Ridiculous story there. What occurred after? Good luck!

  6. jual pengunjung web

    Aw, this was an extremely good post. Taking the time and actual effort
    to create a great article… but what can I say… I procrastinate a
    whole lot and don’t seem to get nearly anything done.

  7. www.ted.com

    Howdy, i read your blog occasionally and i own a similar one and i was just wondering if
    you get a lot of spam remarks? If so how do you stop it, any plugin or anything
    you can suggest? I get so much lately it’s driving me crazy so any assistance is
    very much appreciated.

  8. web page

    I was suggested thjs blog by my cousin. I am not sure
    whether this post is written by him as nobody else know such
    detailed about my problem. You’re wonderful! Thanks!
    web page

  9. zprávy

    This is a topic that’s near to my heart… Cheers!
    Exactly where are your contact details though?

  10. Range XTD Wifi Booster

    You really make it seem so easy with your presentation but I find
    this matter to be really something which I think I would never understand.
    It seems too complicated and extremely broad for me.
    I’m looking forward for your next post, I will try to get the hang of it!

    Also visit my blog post Range XTD Wifi Booster

  11. Gordon

    Howdy! I could have sworn I’ve visited this site before but after going through some of the posts I realized it’s new to
    me. Anyhow, I’m definitely pleased I stumbled upon it and I’ll
    be book-marking it and checking back frequently!

  12. https://ecosystem.fi/

    Hello, I check your blogs on a regular basis. Your humoristic style is witty, keep up the good work!

    Take a look at my webpage – qq domino. domino99 online – https://ecosystem.fi/

  13. www.pexels.com

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

Leave a Reply

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