R.I.B.H.U. Academy^®

Let't write php code in VSCode software?

Check List

1. VSCode is installed and working.
2. XAMPP is installed and working.
3. http://localhost/ is showing welcome page when you open it in a web browser or blank WHITE page, (if you have already created index.html or home.html file).
4. http://localhost/phpmyadmin/ is also showing database page.

Congratulations!

    If all of above things are working properly, then you are ready to create a PROJECT FOLDER (if you had not already created it), and other files and folders inside it. If you have any problem regarding any of above checklists, go to previous pages.

    Now open the C:\XAMPP\htdocs folder. The htdocs folder is in C:\xampp\ folder, or where you have installed XAMPP software. If you can not find it, then go to Start menu and select or search XAMPP Control Panel and click with Right-Mouse-Button and select [ More ⇒ Open file location ]. It will locate the shortcut file and once again, click with Right-Mouse-Button on it and select [ Open file location ]. Now, you are in the C:\xampp\ folder.

    Caution: Now, you should delete or remove all files and folder in C:\XAMPP\htdocs\ folder, by CUT and PASTE them in another folder, for example, Documents. This will clean your C:\XAMPP\htdocs\ folder and you will be ready to create a PROJECT FOLDER. Do not delete or remove any other folder or file from C:\xampp\ folder.

Open VSCode Editor

    Now, search and open VSCode Editor similarly, from C:\vscode2023\ or other folder, where you have installed it. code.exe file will open VSCode Editor. You should make a shortcut of code.exe on Desktop because you will use VSCode Editor daily and regularly. Now with left-mouse-button, click on File menu at the top-left of the VSCode Editor Software.

    Then select Open Folder... option and in the [Open Folder] dialog box, (1) find and select C:\xampp\htdocs\ folder. (2) When htdocs is shown in [Folder:] field, then (3) click with left-mouse-button on the Select Folder button.

    Congratulations, you have created / selected your PROJECT FOLDER. You can choose any other folder as your project folder, but it will not help you to learn PHP along with other scripting languages.

    PHP files with .php extension will run only when they are inside the C:\xampp\htdocs\ folder. Therefore, you should choose this as your root folder. In the HTDOCS folder, you can create as many folders and files as you want, and as more projects, you will create.

Writing PHP code

    Now, move your mouse on the word HTDOCS at the top-left side of your VSCode Editor, and click with left-mouse-button on the [New File...] icon as explained in image above. Do not click anywhere else. Now, you can create a new file, namely, index.php in the rectangular field appeared. You can also create this file with File menu ⇒ New File... option. The three dots (…) after every option in any Menu will open a dialog box.

    Similarly, you can create a folder by moving your mouse on the word HTDOCS and clicking with left-mouse-button on the [New Folder...] icon as explained in image above. Write my_project in the rectangular field, and a new folder will be created. If you type, my_project.php in the field after clicking [New Folder...] option, folder's name will be my_project.php and it is not a file!

Careful: Since you are creating first file and first folder, and later you will create more files and folders, you should select current folder in which you want the files and folders to be created. For example, click on my_project word, and again click with left-mouse-button on the [New File...] icon at the top-left side of VSCode Editor to create second file inside my_project folder, namely, home.php.

    You can also create these files, that is, index.php or home.php in a new folder inside your PROJECT FOLDER, that is C:\xampp\htdocs with any name, for example, php_project. However, you should write in you web-browser, http://localhost/php_project or such folderName, where you have created these files.

Why index.php or home.php ?

    When any person requests on the web browser, a website's name, the first and default file requested is index.php. Some SERVERs are also configured to open default.php or home.php. You can check on your web browser, by typing http://localhost/ or http://localhost/index.php after this first file has been created. If you have created another file, as described above, you can open them by typing following in your WEB-BROWSER address bar.

    http://localhost or http://127.0.0.1 represents the htdocs folder (inside the C:\xampp) and htdocs is also called 'root' folder. Whatever folder you create inside the htdocs folder, is its child and files with .php extension are accessed only through http://localhost or http://127.0.0.1

    Therefore, every PHP file will be processed only when you write correct location, for example http://localhost/folderName , and so on...

• http://localhost/ or http://localhost/index.php (if index.php file is created in root PROJECT FOLDER)
• http://localhost/my_project or http://localhost/my_project/home.php (if home.php file is created in the my_project folder inside the PROJECT FOLDER)
• http://localhost/php_project or http://localhost/php_project/index.php (if index.php file is created in the php_project folder inside the PROJECT FOLDER)

    Now, either in index.php or home.php file, you can write PHP code. PHP scripts are not HTML codes, but later, you will see that HTML page structure can be generated with PHP. However, while developing Content Management System (CMS) for your website, you will mostly insert DATA from MySQL database into different HTML elements.

PURE PHP CODE

    Now, in the blank index.php or home.php file, write some PURE PHP code. You can save this file with Ctrl S (in Windows OS) or Cmd S (in Mac OS) keys. The first thing you should type in your (.php extension) file, without any blank space before it in line 1, is <?php  .

<?php // After PHP opening tag, leave a blank space.
// Single-line comment is written with two forward slashes.
// Anything written after single-line comment will not be evaluated.
// Therefore, always press Enter or Return key in your keyboard for a new line.
/* multiple line or inline comments are written within
one forward slash with asterik symbol together (opening COMMENT tag),
and asterik symbol before forward slash (closing COMMENT tag) */

?>

    Don't write anything after the closing PHP tag because those will be treated as TEXT or CONTENT written in HTML web-page. Many PHP developers don't write the closing PHP tag, so that this type of ERROR will not occur. However, you should not worry about it, in beginning stage of learning PHP.

<?php // In previous page, you have seen following code
echo 123; // echo is pre-defined built-in function
/* echo and similar built-in functions, which don't require parentheses are also known as construct.
semi-colon at the end of a statement, is necessary in PHP
if you omit the ; (semi-colon) symbol, ERROR will be displayed. */
// 123 is numeric DATA, which will be shown in web-browser (You should ZOOM the WEB-PAGE).

?>

    You can also click on the Extensions (Ctrl Shift X) at the left-side TOOLBAR of the VSCode Editor, and type php live server in the rectangular box. Check first few options, and details about each of these extensions will appear on right-side. You can install the one, which has millions users, have already installed that extension. This will make your web-browser act as LIVE SERVER. And, you don't have to refresh the WEB-PAGE.

    Let't take another example, in the same file. You can also create a new file, namely 0001.php or 0002.php and so on for each exercise, unless you are directed to create specific files and specific folders. However, you have to write
http://localhost/folderName/0001.php
or
http://localhost/folderName/0002.php
and so on... in the address bar of the WEB-BROWSER.

<?php // Let't write some HTML elements inside PHP
echo '<h1>Hello World</h1>'; // you will learn about differnt data-types in next chapter.
/* 123 in the above example without enclosed in a pair of single quotes, is a NUMBER. But, in this example, characters including symbols written inside a pair of single quotes is STRING. */
// You can also use a pair of double quotes, which has more importance than a pair of single quotes.

?>