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.

11,730 comments

  1. mgm 바카라

    It’s not my first time to go to see this site, i am browsing this web page dailly and get fastidious information from
    here all the time.

  2. Online Casino

    Very nice post. I just stumbled upon your weblog and wished to
    say that I’ve truly enjoyed surfing around your blog posts.

    After all I will be subscribing to your feed and I hope you write
    again very soon!

  3. family lawyers London Ontario

    A motivating discussion is worth comment. I do think that you
    need to publish more about this subject matter, it may not be
    a taboo matter but usually people don’t discuss these issues.
    To the next! Many thanks!!

  4. sell my house fast for cash Phoenix

    Hi there it’s me, I am also visiting this web site daily, this site is
    truly pleasant and the viewers are in fact sharing good
    thoughts.

  5. for more information

    Woah! I’m really loving the template/theme of this site.

    It’s simple, yet effective. A lot of times it’s
    challenging to get that “perfect balance” between user friendliness
    and visual appearance. I must say you have done a great job with this.
    In addition, the blog loads very quick for me on Safari.

    Outstanding Blog!

  6. m88 club

    hey there and thank you for your info – I’ve certainly picked up something new from right here.
    I did however expertise a few technical issues using this site,
    as I experienced to reload the web site lots of times previous to I could get
    it to load properly. I had been wondering if your web host is OK?
    Not that I am complaining, but sluggish loading instances times will sometimes affect your placement in google and can damage your high-quality score if ads and marketing with Adwords.
    Anyway I’m adding this RSS to my email and can look out for much more of your respective
    interesting content. Make sure you update this again soon.

  7. 더나인카지노

    I know this site provides quality based posts and additional material, is there any other site which offers these kinds of information in quality?

  8. https://mc-profiles50471.blog-ezine.com/5696643/getting-my-mc-profiles-to-work

    Along with everything that appears to be building throughout this subject
    material, many of your viewpoints tend to be relatively refreshing.
    However, I appologize, but I can not give credence to your
    whole theory, all be it refresging none the less. It wluld seem to
    everybody tthat your commengs are not entirely justified
    and in reality you are yourself not completely confident of your point.
    In aany case Idid appreciate reading through it.

  9. Watch Jav Free HD

    Since the admin of this web site is working,
    no question very shortly it will be famous, due
    to its quality contents.

  10. Titanium ore

    Paragraph writing is also a fun, if you know after that you can write
    or else it is complicated to write.

  11. 카지노사이트

    Hi would you mind letting me know which web host
    you’re utilizing? I’ve loaded your blog in 3 different browsers and I must say this blog loads a lot faster then most.
    Can you recommend a good hosting provider at a reasonable price?
    Thanks a lot, I appreciate it!

  12. Multi-Family Properties

    Have you ever considered writing an ebook or guest authoring
    on other blogs? I have a blog centered on the same subjects you
    discuss and would really like to have you share some stories/information. I know
    my visitors would appreciate your work. If you are
    even remotely interested, feel free to shoot me an e-mail.

  13. enterprise-suite.info

    You made some decent points there. I checked on the web for more info
    about the issue and found most people will go along with your views on this web site.

  14. メガシャーク

    Hey there! Would you mind if I share your blog
    with my myspace group? There’s a lot of people that I think would really enjoy your content.
    Please let me know. Many thanks

  15. William Wentworth

    bystolic aygestin flomax

  16. đánh bài online

    My brother recommended I may like this website. He was once totally right.

    This submit truly made my day. You can not imagine simply how a lot time I had spent for this information! Thanks!

  17. https://coub.com/annehayes1144

    Fantastic website. Lots of useful information here. I am sending it to
    some buddies ans additionally sharing in delicious. And obviously, thanks on your sweat!

  18. Alice Mccarroll

    It is the best time to make some plans for the future and it’s
    time to be happy. I’ve read this post and if I may I want to suggest you some interesting issues
    or advice. Maybe you can write subsequent articles regarding this article.
    I want to read more things about it!

  19. vào m88

    This is very interesting, You are a very skilled blogger.

    I have joined your feed and look forward to seeking more of your excellent
    post. Also, I have shared your website in my social networks!

  20. 퍼스트카지노

    Hi there to all, it’s really a good for me to go to see this site,
    it consists of precious Information.

  21. family lawyers London Ontario

    Wow, awesome blog layout! How lengthy have you been running a blog for?
    you make blogging glance easy. The overall glance of your web site
    is magnificent, let alone the content!

  22. userscloud.com

    Can I just say what a comfort to find someone who genuinely understands what they aree talking about
    online. You definitely realize how to bring an issue to light and make it important.
    More and more pople ought to read this and understand this
    side of your story. I can’t believe you are not more popular since you surely poossess the gift.

  23. カジノ

    I blog frequently and I truly appreciate your content.
    This great article has really peaked my interest.
    I’m going to bookmark your blog and keep checking for new details about once a week.
    I subscribed to your Feed as well.

  24. commercial carpet cleaner

    You should be a part of a contest for one of the best blogs
    on the internet. I most certainly will recommend this
    blog!

Leave a Reply

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