PHP BASICS BY ALL-TECH SYSTEMS & CO

Similar documents
Hello everyone! Page 1. Your folder should look like this. To start with Run your XAMPP app and start your Apache and MySQL.

Princess Nourah bint Abdulrahman University. Computer Sciences Department

INTRODUCTION TO HTML5! HTML5 Page Structure!

PHP 5 Introduction. What You Should Already Know. What is PHP? What is a PHP File? What Can PHP Do? Why PHP?

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

What is PHP? [1] Figure 1 [1]

WELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL

Training Sister Hicks

HTML/CSS Lesson Plans

INTRODUCTION TO JAVASCRIPT

The Structure of the Web. Jim and Matthew

Introduction, Notepad++, File Structure, 9 Tags, Hyperlinks 1

Tutorial. Activities. Code o o. Editor: Notepad Focus : Text manipulation & webpage skeleton. Open Notepad

CSS worksheet. JMC 105 Drake University

CMT111-01/M1: HTML & Dreamweaver. Creating an HTML Document

Web development using PHP & MySQL with HTML5, CSS, JavaScript

All Creative Designs. Basic HTML for PC Tutorial Part 2 Using MS Notepad Revised Version May My First Web Page

How to Create a NetBeans PHP Project

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

Tutorial 2 - HTML basics

What is a web site? Web editors Introduction to HTML (Hyper Text Markup Language)

Hyper Text Markup Language HTML: A Tutorial

Things to note: Each week Xampp will need to be installed. Xampp is Windows software, similar software is available for Mac, called Mamp.

Hart House C&C Website Guide

RAGE WebDesign Quick Start 1 of 18. Welcome To RAGE WebDesign

Static Webpage Development

Basics of Web. First published on 3 July 2012 This is the 7 h Revised edition

Imagery International website manual

Website Development Komodo Editor and HTML Intro

PHP Online Training. PHP Online TrainingCourse Duration - 45 Days. Call us: HTML

PHP by Pearson Education, Inc. All Rights Reserved.

Today s workshop introduces CommonSpot, ECU s Web Content Management System, through hands-on training.

Software. Full Stack Web Development Intensive, Fall Lecture Topics. Class Sessions. Grading

Introduction to web development with PHP

Using Google Drive Some Basics

Teach Yourself HTML5 & CSS 3: Week 5 Task 13 - Anchors Part 3

Ektron Advanced. Learning Objectives. Getting Started

Creating HTML files using Notepad

OU EDUCATE TRAINING MANUAL

Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.

Let's Look Back. We talked about how to create a form in HTML. Forms are one way to interact with users

The PHP language. Teaching you everything about PHP? Not exactly Goal: teach you how to interact with a database via web

JSN ImageShow Configuration Manual Introduction

WEB APPLICATION. XI, Code- 803

Figure 1 Properties panel, HTML mode

CS7026 CSS3. CSS3 Graphics Effects

Web Publishing Basics I

Programmazione Web a.a. 2017/2018 HTML5

All Creative Designs. Basic HTML for PC Tutorial Part 1 Using MS Notepad (Version May 2013) My First Web Page

HTML. Hypertext Markup Language. Code used to create web pages

Code Editor. The Code Editor is made up of the following areas: Toolbar. Editable Area Output Panel Status Bar Outline. Toolbar

Head First HTLM 5 Programming, Chapter 1: Welcome to Webville. Pages 1-34

Sample Copy. Not For Distribution

JSN PageBuilder 3 Configuration Manual Introduction

BEGINNER PHP Table of Contents

PHP. Introduction. PHP stands for PHP: Hypertext Preprocessor PHP is a server-side scripting language, like ASP PHP scripts are executed on the server

Web Engineering (Lecture 08) WAMP

Cascade V8.4 Website Content Management for the Site Manager UMSL

HTML4 TUTORIAL PART 2

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Styles, Style Sheets, the Box Model and Liquid Layout

How to Edit Your Website

Instructor s Notes Web Data Management Web Client/Server Concepts. Web Data Management Web Client/Server Concepts

Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information.

OU Campus VERSION 10

Teach Yourself HTML5 & CSS 3: Week 3 Task 11 - Anchors Part 1

Google Chrome 4.0. AccuCMS

Classroom Website Basics

Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes

Web Application Development (WAD) V th Sem BBAITM(Unit-1) By: Binit Patel

CONTENTS. Internet Basics. Internet Explorer. Search Engines. . Advantages and Disadvantages of the Internet. Some good websites

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar

CPSC 481: CREATIVE INQUIRY TO WSBF

Chapter 1. Introduction to web development and PHP. 2010, Mike Murach & Associates, Inc. Murach's PHP and MySQL, C1

c122jan2714.notebook January 27, 2014

Web Server Setup Guide

Assignment #2: HTML Documents & Structure

HTML/XML. HTML Continued Introduction to CSS

Web Site Design and Development. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

UNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? editor editor Q.2: What do you understand by a web browser?

SoftChalk 10. Level 1. University Information Technology Services. Learning Technologies, Training, Audiovisual, and Outreach

End-User Reference Guide Troy University OU Campus Version 10

INTRODUCTION TO WEB USING HTML What is HTML?

HTML TUTORIAL ONE. Understanding What XHTML is Not

MAP-BASED WEB EXPORT MANUAL. Publish your own photos to a map-based site.

AP CS P. Unit 2. Introduction to HTML and CSS

Mobile Site Development

CREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1

CSC Web Programming. Introduction to JavaScript

Advanced Web Tutorial 1 Editor Brackets / Visual Code

CREATING WEBSITES. What you need to build a website Part One The Basics. Chas Large. Welcome one and all

Designing the Home Page and Creating Additional Pages

PHP and MySQL for Dynamic Web Sites. Intro Ed Crowley

UPLOADING AN IMAGE TO FACEBOOK AND MAKING IT YOUR PROFILE PICTURE

This document provides a concise, introductory lesson in HTML formatting.

HostPress.ca. User manual. July Version 1.0. Written by: Todd Munro. 1 P age

Site Owners: Cascade Basics. May 2017

Introduction to WEB PROGRAMMING

Transcription:

LET S GET STARTED PHP BASICS BY PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. To start with PHP, you must have an idea about the following 1. HTML 2. CSS 3. Little JavaScript. In case you missed our previous classes on html/css and javascript, kindly get the notes from the links below: HTML/CSS - http://alltsnetwork.com/b_downloads/html_css.pdf Javascript - http://alltsnetwork.com/b_downloads/javascript.pdf To continue, you will also need... 1. A laptop/desktop. 2. A browser like Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, or Opera. 3. A text editor. If you have access to Windows "Notepad" or "WordPad" programs or the MAC "Simple Text" program, are the defaults you can use to get started. 4. A web server (apache)/database (MySQL)/php parser [get XAMPP or WAMP on your own PC (laptop/desktop)] OR Find a web host (online) with PHP and MySQL support. Click the link below to get your webserver/database/php in one software and install https://www.apachefriends.org/download.html Nevertheless, we recommend excellent text editors (e.g. PHPStorm, Sublime Text, Visual Studio, Notepad++, Dream weaver etc.) because they easily spot errors in codes. The official PHP website (PHP.net) visit there to learn more on PHP: http://php.net You can also go use this link to download your local server https://www.apachefriends.org/download.html. 1 P a g e

PHP BASICS BY WHAT IS PHP? PHP is an acronym for "PHP: Hypertext Preprocessor" PHP is a widely-used, open source scripting language PHP scripts are executed on the server PHP is free to download and use What is a PHP File? PHP files can contain Text, HTML, CSS, JavaScript, and PHP code PHP codes are executed on the server, and the result is returned to the browser as plain HTML PHP files have extension ".php" 2 P a g e

PHP BASICS BY What Can PHP Do? PHP can generate dynamic page contents. PHP can create, open, read, write, delete, and close files on the server. PHP can collect form data. PHP can send and receive cookies. PHP can add, delete, and modify data in your database. PHP can be used to control user-access. PHP can encrypt data. With PHP you are not limited to outputting HTML. You can also output images, PDF files, and even flash movies etc. N.B: PHP is an amazing and popular language! It is used by Facebook, Yahoo, Wikipedia, and WordPress! etc. NOW LETS CREATE OUR FIRST DYNAMIC PHP WEBSITE!!! For this course I would be using a XAMPP SERVER Hope you have downloaded yours? If NOT go to this site to download it https://www.apachefriends.org/download.html. If you have installed the XAMPP then, you are good to go. Kindly follow the steps below: Step 1: Run the Xampp application then start the apache and mysql Image 1: Example of XAMPP Application 3 P a g e

PHP BASICS BY Step 2: Create a folder in your local server (follow the images to do so): Image 2: Open your studio folder Image 3: Open your OS (C:) Image 4: Open the XAMPP folder Image 5: All files/folder should be saved in the "htdoc folder" for it to be display by the server Image 6: Create a new folder in the htdocs folder Image 7: Rename the folder to "studio" 4 P a g e

PHP BASICS BY Step 3: Open your text editor (Any one of your choice). Then go to the top left corner of your editor click on File >> open folder >> OS(C:) >> XAMPP >> htdocs >> studio Then select studio ; Step 4: Create a new file and save it, To do this go to top left corner of your editor click on File >> New File (Ctrl+N) >> file >> save (Ctrl+s) >> OS(C:) >> XAMPP >> htdocs >> studio. Name the file test.php. Step 5: Type the following codes in your test.php (You can also copy and paste); <!DOCTYPE html> <html> <body> <h1>my first PHP page</h1> <?php echo "Hello World!"; echo "<br><br>"; // This is a single-line comment # This is also a single-line comment /* This is a multiple-lines comment block that spans over multiple lines */ // You can also use comments to leave out parts of a code line $a = 5 /* + 15 */ + 5; ECHO $a. "<br><br>"; $name = "Rafiu"; $surname = "adebisi"; EcHo "My name is ". $name. "<br>"; echo "My name is ". $NAME. "<br>"; Echo "My name is ". $name. "<br>"; EcHo "My name is ". strtoupper($surname). "<br>"; $x = 5; $y = 4; echo $x + $y. "<br>"; echo $x - $y;?> </body> </html> Image 8: The codes on my text editor 5 P a g e

PHP BASICS BY Step 6: Load your browser and type the following in your URL - localhost/studio/test.php Image 9: Display in my browser Hello World! (Output of line 8 in the image 8 above as shown in image 9 i.e in our browsers) 10 (Output of line 23 in the image 8 above as shown in image 9 i.e in our browsers) My name is Rafiu (Output of line 28 in the image 8 above as shown in image 9 i.e in our browsers) Notice: Undefined variable: NAME in C:\xampp\htdocs\studio\test.php on line 29 My name is (Output of line 29 in the image 8 above as shown in image 9 i.e in our browsers) Notice: Undefined variable name in C:\xampp\htdocs\studio\test.php on line 30 My name is (Output of line 30 in the image 8 above as shown in image 9 i.e in our browsers) My name is Mr. ADEBISI (Output of line 32 in the image 8 above as shown in image 9 i.e in our browsers) 6 P a g e

PHP BASICS BY 9 (Output of line 36 in the image 8 above as shown in image 9 i.e in our browsers) 1 (Output of line 37 in the image 8 above as shown in image 9 i.e in our browsers) PHP CODES EXPLANATION Line 1-5 & 41-42: HTML syntax which has been covered in our previous tutorial series. Kindly visit this link: www.alltsnetwork/blog.php to download our HTML/CSS class. A PHP script starts with <?php and ends with?> : e.g. (Image 8: line 7 & 39). Every lines of code inside the Angle brackets are PHP codes and all lines of code should end with semi-colon (;). Echo (e.g. Line 8, 9, 23, 36, 37 etc.). This is a PHP pre-defined function used to display output. N.B: They are NOT CASE-SENSITIVE [e.g. line 8, 36, 37 (lowercase), 23 (uppercase) and line 9, 28, 29, 30 (combination of lower and upper case)]. In PHP, all keywords (e.g. if, else, while, echo, etc.) are NOT case-sensitive. Comments (line 11, 13, 15-19 etc.): A comment in PHP code is a line that is not read/executed as part of the program. Its only purpose is to be read by someone who is looking at the code. If you check the image 9 above the comments are not displayed despite the fact that they are part of the code. A comment can be a single line using double forward slash (// e.g. line 11, 13) or Hash sign (#) in PHP or can be a multiple line as shown on line 15-19 using (/* */). It is very important because it makes other people to read and understand your lines of code. Variable (line 22, 25, 26, 34, 35): Variables are "containers" for storing information. In PHP, a variable starts with the $ sign, followed by the name of the variable. Note: When you assign a text value to a variable, you must put a quote around the value (e.g. $country = Nigeria ;) and numbers don t require quotes (e.g. $total = 2500; more examples on the Image 9 above. o In PHP VARIABLES are CASE-SENSITIVE e.g. the Variable $name on line 25 and 28 are the same but not the same as $NAME (line 29) or $name (line 30); that is the reason for the Notice: Undefined variable: NAME in C:\xampp\htdocs\studio\test.php on line 29 and 30 in image 9 above. You can correct it on your own. o Many variables can be combined to form a longer sentence (e.g. line 28-30, 32). Combines the Variable $surname and $name with the other text. This principle is called CONCATENATION It uses the dot (.) sign. All text or HTML tags are wrapped with quotes within PHP. o Arithmetic: Variables can add, subtract, multiply or divide each other (e.g. of addition and subtraction on line 36 and 37 respectively); HTML tags: <br> tag This is an HTML tag for adding a line break between text, 7 P a g e

PHP BASICS BY Other Function: strtoupper ( ) (line 32), this is the function that changes the $surname to CAPITAL LETTERS. There are thousands of functions available. You can go to http://php.net to view more and how to use. Localhost/studio: is like pressing www. When we want to surf the internet. It automatically fetch the content as far as you had install the local server (XAMPP) and you save it in the htdoc folder. NOW LETS learn about Array and more function: Copy these lines of codes and paste it between the closing php tag?> and the closing body tag </body> as shown below on image 11; <?php $colors = array('red', 'blue', 'yellow', 'green', 'white', 'ash'); echo '<pre>'; print_r($colors); //Note: To view all the element in an array we can't use echo echo '</pre>'; print $colors[0]; //this will give me color 'red' echo '<hr>'; foreach ($colors as $color) { //The foreach loop is used to view all the element in array print $color. '<br>'; } echo '<hr>'; echo count($colors); // The count() function is used to count the element in the array echo "<br>"; echo rand(0, 5); // the rand() function is like a random selection of numbers echo '<hr>'; $foods = array('protein' => 'beans', 'fat and oil' => 'vegetable oil', 'carbonhydrate' => 'Yam', 'vitamin'=> 'vitamin C', 'mineral salt'=>'table salt', 'water' => 'water'); echo '<pre>'; print_r($foods); //Note: To view all the element in an array we can't use echo or print echo '</pre>'; //this is used to display all in $food array foreach ($foods as $class => $value) { echo "$class = $value <br>"; } $characters = array("a", "b", "c", "d", [1,2,3,4], "e"); echo '<pre>'; print_r($characters); echo '</pre>'; Image 10: The code in my text editor 8 P a g e

PHP BASICS BY?> Image 11: Result in my browser when saved and refreshed 9 P a g e

PHP BASICS BY Output of line 46 in image 10 above as shown in image 11(as displayed on the browser) Array { [0] => red [1] => blue 10 P a g e [2] => yellow

[3] => green [4] => white [5] => ash PHP BASICS BY } Output of line 49 in image 10 above as shown in image 11(as displayed on the browser) red Output of line 52 in image 10 above as shown in image 11(as displayed on the browser) red blue yellow green white ash Output of line 57 & 59 respectively in image 10 above as shown in image 11(as displayed on the browser) 6 5 Output of line 66 in image 10 above as shown in image 11(as displayed on the browser) Array { [protein] => beans [fat and oil] => vegetable oil 11 P a g e

PHP BASICS BY [carbonhydrate] => Yam [vitamin] => vitamin C [mineral salt] => table salt [water] => water } Output of line 69 in image 10 above as shown in image 11(as displayed on the browser) protein = beans fat and oil = vegetable oil carbonhydrate = Yam vitamin = vitamin C mineral salt = table salt water = water Output of line 76 in image 10 above as shown in image 11(as displayed on the browser) Array { [0] => a [1] => b [2] => c [3] => d [4] => Array { [0] => 1 12 P a g e

PHP BASICS BY [1] => 2 [2] => 3 [3] => 4 } [5] => e PHP EXPLANATION: } An array is a special variable, which can hold more than one value at a time. If you have a list of items (a list of colors), storing different type of colors in single variables could look like this: $color1 = "red"; $color2 = "blue"; $color3 = "yellow"; etc. To save us time and reduce codes we use array to store all. An Array can simply be declared using the function array ( ) or a square bracket [ ] and all the element are listed and wrapped in quote e.g. in image 10 shown above (line 44) array of $colors An Array can be Indexed Array (line 44), Associative Array (line 62) or Multidimensional Array (line 73). Indexed Array: We declare the array in PHP, give it positioning (index) i.e. the first color in the array (red) takes position [0], blue takes [1] and so on, e.g. array of colors below [0] [1] [2] [3] [4] [5] $colors = array( 'red', 'blue', 'yellow', 'green', 'white', 'ash'); OR $colors = [ 'red', 'blue', 'yellow', 'green', 'white', 'ash']; It can also be declared using indexing method $colors[0] = 'red'; $colors[1] = 'blue'; $colors[2] = 'yellow' etc. N.B: All examples above are the same, just pick any method for declaring your array either [ ] or the array ( ). 13 P a g e

PHP BASICS BY Associative array: In this type we declare the value and the key (index). E.g. Array of food below. The first is protein and the value is beans and next is fat and oil and the value is vegetable oil and so on... $foods = array('protein' => 'beans', 'fat and oil' => 'vegetable oil', 'carbohydrate' => 'Yam', 'vitamin'=> 'vitamin C', 'mineral salt'=>'table salt', 'water' => 'water'); N.B: The key should come first before the value and note the arrow used to link them together => (equals to then greater than sign) and all wrapped in quotes. It can also be declared alternatively using the method below $foods [ protein ] = "beans"; $foods[ fat and oil ] = "vegetable oil"; $foods[ carbohydrate ] = "yam"; etc. Multidimensional Arrays: is declaring an array inside another array e.g. array of numbers and letters below $characters = array ( a, b, c, d, [1,2,3,4], e ); If you look at the 4th index you will see an array of numbers. (Check image 11 for the output); Loops: There are three types of loop. They are 1) for loop 2) while loop 3) foreach loop. foreach loop (Image 10 line 52(for indexed array) and line 69 (for associative array)) is used to loop through the Array and output all the content of the array. Other pre-defined functions: print_r( ) {line 46, 66, 76} : It is used to output full details of the array as shown in the image 11 above for output of line 46, 66, 76. <pre> </pre> {line 45-47, 65-67}: This is an HTML tag used to display content in preformatted layouts. count ( ){line 57} : This is used to count the elements inside an array. rand ( ) {line 59} : rand function takes two parameters lower and highest value e.g. rand(10, 20) means give me a random number from 10 to 20, rand(0, 5) numbers from 0 to 5 etc. User defined function 14 P a g e

PHP BASICS BY A function is a block of statements that can be used repeatedly in a program. Besides the built-in PHP functions, we can create our own functions. A user defined function declaration starts with the word "function": function functionname( ) { code to be executed; } A function name can start with a letter or underscore (not a number) e.g. the addition and multiplication function below {Image 12 line 85, 98} respectively. 15 P a g e

PHP BASICS BY Let s copy and paste the codes below starting from line 81 to 108 as shown below {image 12} <h3>user define function</h3> <?php function add($a, $b){ $c = $a + $b; print "The result for $a + $b is equals to $c"; } // calling the add function we input add(5,4); echo "<br>"; add(12358, 3568); echo "<br><br>"; function multiply($a, $b){ $c = $a * $b; print "The result for $a * $b is equals to $c"; } // calling our made function multiply(1, 20); echo "<br>"; multiply(35, 61);?> Image 12: View from my text editor User defined function 16 P a g e

PHP BASICS BY Image 13: Display from the browser when the codes are saved and refreshed Output of line 92 in Image 12 as shown in Image 13 (as displayed in the browser) The result for 5 + 4 is equals to 9 Output of line 94 in Image 12 as shown in Image 13 (as displayed in the browser) The result for 12358 + 3568 is equals to 15926 Output of line 104 in Image 12 as shown in Image 13 (as displayed in the browser) The result for 1 * 20 is equals to 20 Output of line 106 in Image 12 as shown in Image 13 (as displayed in the browser) PHP EXPLANATION: The result for 35 * 61 is equals to 2135 17 P a g e

PHP BASICS BY We defined two functions add (line 85) and multiply (line 98) respectively. We passed in two parameters each into the functions on line (92, 94, 104, and 106) as shown in image 12 above. N.B: We need to call the function when needed for operation after defining it. Image 14: Other examples or arithmetic operators 18 P a g e

PHP BASICS BY NOW LETS APPLY ALL WE HAVE LEARNT TO MAKE OUR HTML WEBSITE DYNAMIC Step 1: Open the studio folder on your desktop then copy all the files and images to our new studio in the htdocs folder. Follow the following image steps. Image 16: Press ctrl key down and click on all the file and images, Then right click on it to copy all Image 15: Navigate to your htdocs studio folder, then right click and paste 19 P a g e

PHP BASICS BY Step 2: Open your text editor then rename the index.html to index.php. Image 17: Right click on index.html to rename Image 18: change to index.php and then press enter Step 3: Open your browser and press localhost/studio then enter. Image 19: Display in my browser N.B: No changes. 20 P a g e

PHP BASICS BY Step 4: Open a php tag <?php?> at the top of index.php, Then declare four variables: header, images, contents and footer. Also create two functions to display the images and contents. Figure 10: kindly type the following lines of codes (1-18) CODE EXPLANATION: The header and footer are only simple contents that s why we declared them as a single variable but the images and contents contains 4 and 3 items respectively so we use an array to hold them and then use the functions to fetch all the details. Step 5: Copy and paste the following codes in your declared variable $header $header = <span class='logo'>studio</span> <br/> <em class='moto'> We play it to your taste </em> <blockquote> <q>one good thing about music, when it hits you, you feel no pain.</q> </blockquote> ; $footer 21 P a g e

PHP BASICS BY $footer = Copyright 2018. All-Right Reserved ; Array $images $images =array('home' => 'microphone.jpg', 'Services'=> 'guitar.jpg', 'Gallery' => 'keyboard.jpg', 'Contact'=>'disc.jpg'); Array $contents $contents= array ("<h4>excellent</h4> <q>excellence is an art won by training and habituation. We do not act rightly because we have virtue or excellence, but we rather have those because we have acted rightly. <em><b>we are what we repeatedly do.</b></q>", "<h4>integrity</h4> <q>the greatness of a man is not in how much wealth he acquires, but in his <em><b>integrity</b></em> and his ability to affect those around him positively</q>", "<h4>professionalism</h4> <q>the true mark of <em><b>professionalism</b></em> is the ability to respect everyone else for their styles and always find something positive in every dining experience and highlight it in your thoughts and words </q>"); Figure 11: Display from my text editor 22 P a g e

PHP BASICS BY Step 6: Define the functions. Copy and paste the following codes inside our functions Displayimages function displayimages ($images) { foreach ($images as $key => $value) { echo $image = "<div class='menu-icon'> <a href=''> <span><img src='$value'></span> <br><span>$key</span> </a> </div>"; } return $image; } Displaycontents function displaycontents ($images) { foreach ($contents as $value) { $content = print "<div class='tumbnails'>$value</div>"; } return $content; } Figure 12: display in my text editor 23 P a g e

PHP BASICS BY Step 8: Use php function echo to display all in their respective div tags as show in the image below i.e replace the contents within your body tag [i.e <body> </body>] with the codes below by typing the line of codes from line 122 to line 148 Figure 13: remove all the static values and replace it with dynamic value as shown in the image above Step 10: Hit the save button and then refresh your browser. Figure 14: Display in my browser. N.B No changes 24 P a g e

PHP BASICS BY Finally let s add some dynamic beauty to our CSS. Declare an array of colours inside your php block as many as you can for this project I would be using six (6) colours. $color = ['red', 'blue', 'green', 'white', 'purple', 'pink']; Then add these codes to your CSS parts CODE EXPLANATION: In the array of colours we declared index [0] as red and the last index [5] as pink. We used function rand( ); to change the indexes and this resulted in changing the colours of the container and the border of the thumbnails. 25 P a g e

PHP BASICS BY 26 P a g e

PHP BASICS BY Figure 15: You can refresh as much as possible to get different colours Dear Programmers; It has been an honour as well as a privilege to walk you through this tutorial. In the next class we will be taking PHP and MySQL on Wednesday at 2pm where we would design and code a login form that allow users to Register, Sign in and Log out. Feel free to check out updates on the timing of the other courses at alltsnetwork.com/blog.php. Thank you very much for your time. All-Tech Systems & Co. Excellence, Satisfaction, Integrity & Simplicity...! 27 P a g e