Thanos Stantzouris Industrial Engineer & Web Developer

Greetings people! Duthcode is back again with a new article/tutorial about Web Development with PHP.
This Article/Tutorial is kinda self explanatory i am gonna firstly write some things about Web Development in general and after that a few things about my lovely PHP. When i am finished with writing theory i'll show you how to configure your windows 10 machine to be ready to code in PHP.

By the end of this article you will know the Basic Knowledge of Web Development, why PHP is a cool choice to start web development with and you will be ready to run your own PHP script in your windows 10 Machine with XAMPP.


What is Web Development?

To be precise, the exact definition of Web Development is :

"Web development is the coding or programming that enables website functionality, per the owner's requirements. It mainly deals with the non-design aspect of building websites, which includes coding and writing markup.
 Web development ranges from creating plain text pages to complex web-based applications, social network applications and electronic business applications."

The web development hierarchy is as follows:

  • Client-side coding
  • Server-side coding
  • Database technology

By reading the above definition all you need to fully understand when beginning is :

  • Client Side | How does a Website look! Is everything aligned? Will the user like the colors i used? What about the Pictures? Is my Website mobile-friendly? Oh! This box looks good, but how could i make it appear with a 360 fade away jump? These are some of the problems you will face when coding the client-side part of your website. The basic tools for this coding section are HTML, CSS and JavaScript. In 2019 we have HTML5, CSS3, and some cool frameworks like Bootstrap and jQuery! Really helpful, but i won't get into further details.

 

  • Server Side | This part of coding is pretty much writing code that runs on the server. Uses:
    • Process user input.
    • Compiles pages.
    • Structure web applications.
    • Interact with permanent storage (SQL, files).

       It pretty much is the heavy lifting of web development. The dark and ugly side of it!  And more words wouldn't make any difference so... here is a viral depiction of Client Side vs Server Side Programming.

Front End Development vs Back End Development

Disgustingly accurate!!!

When you are finished with the above and you could comfortably say that you know, at last, what you are doing the following section comes to hunt you!

  • Database Technology | This is where reality hits you! Databases! Data, the gold of our era !
    It's all good designing static webpages for your buddy's new app idea, throwing an if statement here, a for loop there, but what happens when someone comes and tells you... Hey, i need an e-shop for my company and i heard that you are pretty handy with programming websites! He will probably have 50 different products, maybe more. In this case you need a good knowledge of Database technology! How and Where to store your clients data. What to do with them and many many more functionalities.

What is PHP?

Before saying anything take a look at the following list :

  1. Yahoo
  2. Facebook
  3. Wikipedia
  4. Flickr
  5. WordPress
  6. Friendster
  7. Digg
  8. SourceForge
  9. iStockPhoto
  10. MailChimp

What is common between the above mentions in the list? They were built with PHP!

PHP, Hypertext Preprocessor is a server side scripting language designed and especially suited for the Web.
The popularity of PHP as a technology sky rocketed when people realized how open source can be both flexible and authentic at the same time, providing users with great support to be followed later on.

A few cool things about PHP:

  • Support a wide range of databases
  • Compatible with all servers
  • Easy to customize
  • Highly Secure

PHP is still expanding and evolving! And being a PHP developer will land you a great number of gigs, surely can get you a steady programming job! Also you could code your own blog, like me :)  Who needs Wordpress right?

 

Getting ready for PHP - Installing XAMPP

XAMPP is a free and open source cross-platform web server, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in PHP and Perl programming languages. Basically it's what we need in order to run php on our windows machine.

Step 1 | Download the XAMPP and Install it!

Download XAMPP from This Link

Download XAMPP

The download is a bit big so give it some time.
Once you have downloaded the XAMPP executable... run it !

The following Warning should appear

XAnoo Warning message

Click OK! And after that Leave everything as they are by their default settings!

Important! ! ! Install xampp at C:\xampp. After you have chosen the location for the installation path click all the NEXT Buttons until you see a bar loading! And wait for the installation to complete. Dont leave the room though, because you will be asked to give permission and access to the program. Wait again... Patience is a virtue!

 

Step 2 | After the Installation.

Now that the installation has been completed successfully you can open XAMPP Control Panel and click the two Start Buttons like you see in the image below!

XAMPP Control Panel

Apache server and MySQL are services predestined by XAMPP to run on certain ports! So if there is another service on your PC already running on these predestined ports, there will be a conflict!

Step 3 | Troubleshooting/Fixing Port Conflicts (optional).

Apache Server port conflict XAMPP

If you see something like this when starting the Apache Server then Skype is already runnning in the same port as Apache.
To fix this problem just close Skype and restart XAMPP and you will be set to go!

Now if the problem persists that means that you have something else running on port 80! Your Port 80 is occupied, instead of closing and restarting applications and services you can just change the port that Apache Server is listening to:
Locate the following file:

C:\xampp\apache\conf\httpd.conf

Once you have opened the file, locate the line that says Listen 80 and change it to Listen to 8080  , Next find the line that says ServerName localhost:80 and replace it with ServerName localhost:8080.  Save the changes and close the file!

With those changes made, you can now restart XAMPP and start up Apache and MySQL. Port 80 should no longer be used by Apache and instead you should see that Apache now runs on 443,8080.

 

Step 4 | Running our first PHP Script in a browser.

If you have everything set and Done you should be able to open Apache's Home screen on your browser by typing :

localhost/ OR localhost:8080/

 

Apache Localhost Main Page

From this page you can also open PHPMYADMIN by pressing the top right menu item that says... phpMyAdmin. There you will be storing all your database tables for your project data!

Summary : XAMPP provides an easy way to run a local server environment on your Windows PC. It gives you the oppurtunity to test and develop your projects locally. It also saves a lot of time.
Sometimes XAMPP can be a pain in the ass.. But it has been a pain in the ass to millions before you. So there are fixes and tutorials for everything! Also by troubleshooting stuff you understand better Apache, PhpMyAdmin and PHP in general.

Almost Done! Hang in there!

Step Last | Running Your first PHP script!

Fire up your favourite code editor. My favourite is Visual Studio Code!

Follow the steps:

  • Create a folder inside C:\xampp\htdocs and name it helloPHP
  • Create a file inside helloPHP and name it index.php
  • Open index.php with your favourite code editor and insert the following script, and save.
    <?php 
    
    echo "Hello PHP!";
    
    echo "</br><h1>Hello PHP in Header1 HTML style</h1>";
    
    echo "</br><h1 style='color:green;'>Hello PHP in Header1 HTML style with color</h1>";
    
    ?>
  • Now you can see the output of your script in localhost/helloPHP/index.php. Actually index.php is the default file that php tries to find, so you can also just go to localhost/helloPHP/  and the output will still be there!
    • As you realized you can also run HTML and inline CSS in a PHP string, which is cool!

PHP Script output

 

Done ! You are now ready to start coding in PHP and start creating!

For any question you can hit us up in our Facebook Page ... Leave a like while you are at it!

Also you can support our efforts on our  Ko-F Pagei ! And you can get in contact with us either by sending us a message on Facebook or via the e-mail on the footer of the Page!
Thanks again! Have a lovely day... Or night!