LEARN PHP PROGRAMMING LANGUAGE

Introduction

PHP (a recursive acronym for PHP Hypertext Preprocessor) is a dynamic and powerful language used for backend or server-side programming. It is used for creating dynamic and interactive websites. PHP is loosely typed.

Definition of Terms and Concepts

  1. Loosely-typed: A language that doesn’t enforce type declaration for variables.
  2. Strongly typed: A language that enforces type declaration for variables.

Practical Experience Gained

PHP Syntax

As mentioned earlier, PHP is loosely typed but has a syntax similar to strongly typed languages like Java and C. A PHP code is written between the PHP codes’ opening and closing tags i.e. <?php and ?> respectively. It can be embedded directly and anywhere inside an HTML code as long as it is enclosed within the above-mentioned tags.

PHP Variables

A variable is simply a container that holds a certain value. Variables get their name because that certain value can change throughout the execution of the script. This ability to contain changing values makes variables so useful.

Naming Variables

Like other programming languages, PHP has certain rules one must follow when naming variables:

1. Variable names begin with a dollar sign ($).

2. The first character after the dollar sign must be a letter or an underscore.

3. The remaining characters in the name may be letters, numbers, or underscores without a fixed limit.

The figure below shows the various acceptable ways of creating PHP variables.

           Naming variables in PHP.

PHP Data Types

All data stored in PHP variables fall into one of eight basic categories, known as data types.

PHP supports four scalar data types. Scalar data means data that contains only a single value. The figure shows examples of scalar (or primitive) data types. PHP supports two compound types. Compound data is data that can contain more than one value. It also supports two special data types, so-called because they don’t contain scalar or compound data as such, but have a specific meaning.

PHP Data Types (Scalar).

PHP Operators and Expressions

An operator is a symbol that manipulates one or more values, usually producing a new value in the process. Meanwhile, an expression in PHP is anything that evaluates to a value; this can be any combination of values, variables, operators, and functions. The figure

below are the various types of operators in PHP.

 PHP Operator types

PHP Operator type (continued).

Decisions and Loop

A decision lets the programmer run either one section of code or another, based on the results of a specific test. Meanwhile, a loop lets the programmer run the same section of code repeatedly until a specific condition is met. By using decisions and loops, one creates a dynamic and interactive webpage.

Making Decisions

The easiest decision-making statement to understand is the if statement. However, we can have nested if statements. The figure below shows an example of a simple if statement.

PHP if statement.

Loop

There are three types of loops in PHP: while, for, and do…while loop. The figure below shows an example of a while loop.

PHP Loop example (while loop).

Functions

Functions are not new to me. I already know how to implement them in other languages. However, the syntax for functions in PHP is shown in the figure below:

PHP function example.

CHAPTER FOUR

WEB DEVELOPMENT AND DESIGN

Introduction

Web Development and Design is the designing, programming, and developing of a website. Web development is divided into two main categories: Frontend web development and backend web development.

Definitions and Explanation of Terms/Concepts

1. Bootstrap: An HTML, CSS, and JavaScript library used for quick design and customization of a website.

2. XAMPP: A free and open-source cross-platform local webserver.

HTML

HTML stands for Hypertext Mark-up Language, and it is the most widely used language to write Web Pages. HTML pages are text documents. HTML uses tags (characters that sit inside angled brackets) to give the information they surround with special meaning. Tags are often referred to as elements. Tags usually come in pairs. The opening tag denotes the start of a piece of content; the closing tag denotes the end. Opening tags can carry attributes, which tell us more about the content of that element. Attributes require a name and a value.

HTML Tags

HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <tag name>. Except few tags, most of them tags have

their corresponding closing tags. For example, <html> has its closing tag</html>and

<body>tag has its closing tag </body> tag etc.

Other examples of HTML Tags include: <p>, <img>, <div>, <span>, <a>, <ul>, <ol> etc.

HTML Elements

Unlike the HTML Tag, which is mostly a pair of texts each enclosed within an opening and closing angular brackets … the HTML element is everything from the start tag to the end tag. Example;

<p>My first paragraph.</p>

The above line is a valid HTML paragraph element – the tags and content all together.

HTML Attributes

Attributes provide additional information about HTML elements.

i. All HTML elements can have attributes.

ii. Attributes provide additional information about an element.

iii. Attributes are always specified in the start tag.

iv. Attributes usually come in name/value pairs like name=”value”.

The figure below shows an example of HTML tag attributes.

HTML Attributes example.

CSS

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. Its main purpose is that of presentation – i.e. it provides the means to control and change the presentation of HTML documents.

One can link CSS to HTML elements in three ways:

Inline: Using the style attribute in HTML elements.

Internal: Using a <style> element in the <head> section.

External: Using an external CSS file.

CSS Rules

A CSS file contains several CSS rules; each is composed of two parts: the selector and the declaration block. A selector allows us to associate one or more declarations to one or more elements on the page. The declaration block contains one or more declarations, in turn, composed of a property and value pair.

p {

color: red;

}

In the above example, p is the selector, while everything within the opening and closing parenthesis is the declaration block. Moreover, the color: red is the property: value fair respectively. The combination of all these make up the CSS rule.

CSS Selectors

As previously stated, a CSS selector allows for targeting a specific group of HTML elements for styling. Below is a list of the basics of CSS selectors.

  1. Simple Selector: The selector is a tag name or a list of tag names, separated by commas.
  2. Contextual Selector: The selector is a tag name selected in a hierarchical order.
  3. Class Selector: Used to allow different occurrences of the same tag to use different style specifications.
  4. Id Selector: An id selector allows the application of a style to one specific element.
  5. Universal Selector: Applies style(s) to all elements in the document. It is denoted as an asterisk (*).
  6. Attribute Selector: Allows the application of a style to an element based on its attribute.

The figure below shows the basic CSS selectors.

CSS Selectors.

JavaScript

JavaScript is the most popular language used in front-end web development.

JavaScript was a hit. It was fun, it was powerful—in a word, it was cool. Programmers loved the things you could do with it on web pages. You could alter the text in web pages respond to the mouse, change color schemes, and more. Web page writers ate this up.

Advantages of JavaScript

  1. Less server interaction: You can validate user input before sending the page off to the server. This saves server traffic, which means fewer loads on your server.
  2. Immediate feedback to the visitors: They don’t have to wait for a page to reload to see if they have forgotten to enter something.
  3. Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
  4. Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a rich interface to your site visitors.

JavaScript Syntax

JavaScript can be implemented using statements that are placed within the

<script>……</script> HTML tags in a web page. You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that we keep it within the <head> tags. The script tag takes two important attributes:

i. Language: This attribute specifies what scripting language is in 

ii. Type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to “text/javascript”.

Below is the JavaScript syntax in html head tag.

JavaScript in HTML example.

Note that the <script> element is an HTML element like any other. Its purpose is to tell the browser that there is JavaScript code present and that the browser should run that code. Notice also the language attribute of the <script> element, which has been set to the value “javascript” here, indicating that the scripting language used inside the <script> element is JavaScript (there are other scripting languages, such as VBScript, which runs in Internet Explorer).

Comments in JavaScript

JavaScript supports both C-style and C++-style comments. Thus:

  1. Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.
  2. Any text between the characters /* and */ is treated as a comment. This may span multiple lines.
  3. JavaScript also recognizes the HTML comment opening sequence <!–. JavaScript treats this as a single-line comment, just as it does the //comment.
  4. The HTML comment closing sequence –!> is not recognized by JavaScript so it should be written as //–>

JavaScript Objects

In JavaScript, you interact with the browser through the use of built-in objects; these objects exist already and can be accessed from your JavaScript code by name. Here are the four most commonly used objects:

i. Document: Represents the web page itself

ii. History: Represents the list of URLs that the browser has already been to

iii. Window: Represents the browser itself

iv. XMLHttpRequest: The object that you use in Ajax to communicate with the server

In JavaScript, objects have methods and properties. A method is a chunk of code built into the object that performs some action—for example; you use the document object’s write method, which you access as a document. write, to write to the document (that is, the current webpage). Here are some representative methods and what they do in JavaScript:

i. document. write Lets you write text to the current web page

ii. history.go Moves the browser to a page in the browser’s history

iii. window. open Opens a new browser window

The figure below shows an example of the document object.

JavaScript Object example.

The figure below shows the output of the code fragment in the figure above

JavaScript Object (output) example.

Data Types in JavaScript

One of the most fundamental characteristics of a programming language is the set of data types it supports. These are the types of values that can be represented and manipulated in a programming language. They include:

Numbers: This represents numeric values e.g. 100.

Strings: This represents a sequence of characters e.g. ‘Hello’.

Boolean: This represents a Boolean value either true or false

Null: This represents nothing i.e. it can be empty.

Undefined: This represents undefined values.

Object: This represents values returned by functions.

JavaScript Variables

This is a memory location used for holding values or used for storing values in a memory. var (keyword) is used to hold a value or declare a value, it makes it known to a compiler or interpreter.

E.g. var name    Declaration

var name = “John” Initialization

While naming the variables in JavaScript, the following rules should be kept in mind.

i. You should not use any of the JavaScript reserved keywords as a variable name.

For example, break or Boolean

ii. JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or an underscore character. For example, 123Name is an invalid name but _123Name, Name is a valid one.

iii. JavaScript variable names are case-sensitive. For example, Name and name are two different variables.

JavaScript Functions

To execute code when you want to execute it, you need to place that code in a JavaScript function (functions are just like methods, except that methods are contained inside JavaScript objects, and functions are free-standing). For example, here’s how you might create a function named display:

JavaScript functions example.

Below is a simple JavaScript function that displays the message “You clicked the button” after pressing “Click here”.

  JavaScript functions example.

The figure below shows the output of the code fragment in the figure above

JavaScript functions (output) example.

Backend Web Development

The student also did backend web development using PHP and MySQL. He set up a local Apache server using XAMPP. He made use of the MyPHPAdmin interface to access the database. Find attached, some pictures of the project I created using PHP and MySQL.

Handling HTML Forms with PHP

One of the most common ways to receive input from the user of a Web application is via an HTML form. An HTML form, or Web form, is simply a collection of HTML elements embedded within a standard Web page. By adding different types of elements, one can create different form fields, such as text fields, pull-down menus, checkboxes, and so on. These fields are automatically available to the PHP script at the backend when the user submits the form. The figure below shows an example of a simple HTML form.

PHP Form code example

The output of the HTML form in the figure above is shown below

PHP Form code (output)

The example above shows an HTML form consisting of two fields and a submit button. When the user submits the form the data is sent to the PHP script provided in the form action attribute – in this case, the data is submitted to the same form, since nothing was provided. Below is the other part of the above HTML form that handles the submitted data.

PHP form handler code.

PHP Superglobal Variables

The PHP superglobal variables as the name indicates are variables having a global scope. In the context of programming, such variables are those that are accessible from anywhere

within a script or program. In addition, superglobal variables in PHP are accessible from any script running in the same document root directory as the form from which they are sent. Here are some examples:

$_POST

The $_POST superglobal variable is an array variable that contains a list of all the field names and values sent by a form using the post method.

$_GET

The $_GET superglobal variable is an array variable that contains a list of all the field names and values sent by a form using the get method. However, Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser’s address bar) and it has limits on the amount of information to send (max. 100 characters).

$_REQUEST

This superglobal variable Contains the values of both the $_GET and $_POST arrays combined, along with the values of the $_COOKIE superglobal array.

Other superglobal arrays include $_SESSION, $_FILES, $_COOKIE, etc.

Questions and Answers

1. What are PHP superglobals?

Answer: They are variables with global scopes. Meaning they can be accessed everywhere

2. What is the output of this code in PHP? a = 100 + “100”

Answer: 

3. What is the tag for starting and closing a PHP program?

Answer: <?php ?>

4. Write a function in PHP that prints the first 1 to 10

Answer: for( $i = 1; $i < 10; $i++){ echo($i + “ ”);}

5. What is Windows and documents in JavaScript?

Answer: Document in JavaScript is an object that get you access to hypertext document resources. 

6. What are objects in JavaScript?

Answer: Objects in JavaScript stores data in keys and values 

7. Use HTML and CSS to create a red bold text with big font size

Answer: <h1 style=”color: red; font-size: 46px; font-weight: bold;”></h1>

8. What is a class selector in CSS?

Answer: It slects every element from the HTML document that is of that class

9. What is $_POST, $_GET and $_COOKIE in php?

Answer: $_POST is a superglobal variable that stores the values sent by a form 

10. What is the difference between PHP and JavaScript?

Answer: PHP is a script language while JavaScript runs on the browser