PHP CMS with jQueryMobile

When creating a web application that has multiple pages, it is sometimes best to use server-side includes to accomodate common areas that will be used by all pages.

While optional, it is best to use templates to create the "shell" for each page that will be created. We will be using PHP server-side includes (SSI). SSI are external files that can contain PHP, HTML or both that get MERGED into a host page as though it was part of the original page when processed.

The advantage of using server-side includes instead of a normal template using Dreamweaver or another HTML editor is that all of the files based on a template that has been modified has to be uploaded to a server. In the case of PHP server-side includes, only the include files have to be updated and will affect all of the pages that has include links in them.

There are four flavors of PHP includes:

The include() will continue processing the file even if the external file is missing but generates a warning.
The require() will halt processing if the external file is missing because it is "required" (mandatory) for the page to be displayed. It will generate warnings and errors.
The include()_once and require_once() does the same as the include() and require() except that they prevent the external file from running more than once. This is useful if the external file has functions or classes that you don't want to be execute more than once which would cause an error to occur.

To include an external file, you use one of the include methods and pass it a path to an "include" file as its argument (e.g., include('include/header.inc.php'). Parentheses are optional but recommended. We will be using the require() method.

For a list of open source PHP templates, go to Smarty Template Engine.

Create Ordinary Page

Before you create the several side include files, it is best practice to start with an ordinary page that can be used as a model and then convert the common areas of that page to include files and link them back to the original file. The common areas will be used in all pages while new content will be used on a page-by-page basis.

Create a folder called includes in the site root directory.
Create a blank HTML framework in the site root directory, give it a title and save it as ordinary_page.html in the site root directory (not the includes folder).
```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Employee Directory</title>
</head>
<body>
</body>
</html> 
```

Add the following highlighted code between the <head> tag and the <body> tag to create an ordinary page using the jQuery framework.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Employee Directory</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Employee Directory</title>
<link rel="stylesheet" href="themes/EmployeeTheme.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
   /* Limit size of text input fields to 300px */
   div.ui-input-text {width: 300px !important}
   .error {color:red; font-weight:bold;}
</style>
</head>
<body>
<div data-role="page" id="home_page">
  <div data-role="header">
    <h1>Employee Directory</h1>
    <a href="index.php" class="ui-btn ui-icon-home  ui-corner-all ui-btn-icon-left">Home</a>
  </div>

  <div data-role="content">
    <h2 class="ui-body ui-body-a ui-corner-all">PAGE TITLE</h2>
  </div>

  <div data-role="footer">
   <h4>&copy; 2015 by RMCS. All rights reserved.</h4>
  </div>
</div>
</body>
</html>

CODE EXPLANATION:

The blank lines between the three set of code were purposely added to denote where code will be split later.
The <link> and <script> tags in the <head> tag are used to link to the jQueryMobile JavaScript and CSS files.
The data-role attributes are used to define roles for the various <div> tags. For example, data-role = "page" defines that <div> tag to have a jQuery page "role."

CHECK POINT: Save the file and preview it in a browser. You should see an ordinary page formatted with the jQuery framework:

Create Include Files

After creating an ordinary file, you will want to organize your content in a folder to hold your include files that will be used by most pages. We will split the page into three sections:

Top (header.inc.php) – INCLUDE code from the first line to the blank line above the <div data-role="content"> tag.
Middle (page_name.php for main content) – INCLUDE the complete <div data-role = "content">. This will be the area for the UNIQUE AND DYNAMIC content for each page.
Bottom (footer.inc.php) – INCLUDE code from the blank line above the <div data-role = "footer"> tag to the last line in the file.

In the ordinary_page.html file, copy the code from the first line (<!doctype html>) to the blank line above the <div data-role="content"> into a blank HTML file and save it as header.inc.php in the includes folder:

CAUTION: The blank HTML file should NOT include any HTML tags in it (e.g., <html>, <head> <title>, <body>, etc.). Notice also the use of .inc.php in the file name.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Employee Directory</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Employee Directory</title>
<link rel="stylesheet" href="themes/EmployeeTheme.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
   /* Limit size of text input fields to 300px */
   div.ui-input-text {width: 300px !important}
   .error {color:red; font-weight:bold;}
</style>
</head>
<body>
<div data-role="page" id="home_page">
  <div data-role="header">
    <h1>Employee Directory</h1>
    <a href="index.php" class="ui-btn ui-icon-home  ui-corner-all ui-btn-icon-left">Home</a>
  </div>

Go back to the ordinary_page.html file and copy the code from the <div> tag with the data-role = "footer" to the last line in the file and save it into a blank file as footer.inc.php in the includes folder:
```
<div data-role="footer">
<h4>&copy; 2015 by RMCS. All rights reserved.</h4>
</div>
</div>
</body>
</html> 
```

Create Template Page

Go back to the ordinary_page.html file again for the third time and copy the code from the complete <div> tag with the data-role = "content" which incudes these three lines:
```
  <div data-role="content">
    <h2 class="ui-body ui-body-a ui-corner-all">PAGE TITLE</h2>
  </div>
```
Create a third file and save it as template.php in the site root directory (not the includes folder) and PASTE it into a blank file and then add the three includes PHP scripts.
WHY: To add the two include scripts created earlier for the header and footer as well as the connnection script (e.g., connection.inc.php) and some regular HTML tags.
```
<?php require("includes/connection.inc.php")?>
<?php require("includes/header.inc.php")?>

<div data-role="content">
<h2 class="ui-body ui-body-a ui-corner-all">PAGE TITLE</h2>
</div>

<?php require("includes/footer.inc.php")?>
```
CHECK POINT: Save the template.php file and preview it in a browser. You should see the same result with six lines of code because the PHP processor merges the include files into the host file at the place they were inserted before rendering the complete page to the browser.
NOTES:
- It is a common naming convention to add ".inc" as the extension so that it can be recognized as an include file. However, this may cause a security risk if the file contain sensitive information that can be exposed. By adding ".php" to the ".inc" extension, you ensure the PHP processor parse the file BEFORE it is send to the browser.
- Because all of the content is HTML, it will be immediately sent to the browser to be rendered.
- Also, because the content between the PHP wrapper is HTML, there is no need to use the print() method to render it to the browser.
- If you look at the source code when it is rendered in a browser, instead of seeing six lines of code, you would see that it is EXACTLY the same code as the original file.
- If you get an error, you may have misspelled the include name or inserted an incorrect path to the include file.
- It is best practice to include error settings code in the include files (See Prep menu) so that they would be applied to every page that has include methods in them.

Create Home Page

We will first create the home page (index.php) from the template.php file.

Open the template.php page, if it is not already open.
Select the heading PAGE TITLE and replace it with EMPLOYEE MASTER PAGE and then press the ENTER key.
Save the file as (File > Save As...) as index.php (the home page).

Create All Other Pages

While you could create each page as they are needed, it is best to create all of the pages UPFRONT. Also, it is best to create STATIC content first and then add DYNAMIC content afterward by adding recordsets, dynamic variables, repeat regions, etc.

Repeat steps 1-3 in the Create Home Page section above but change the file name and heading title to the following:

File Name	Main Body Heading
employee_detail.php	EMPLOYEE DETAIL
add_employee.php	ADD EMPLOYEE
delete_employee.php	DELETE EMPLOYEE
employee_search.php	EMPLOYEE SEARCH
employee_login.php	EMPLOYEE LOGIN
employee_registration.php	EMPLOYEE REGISTRATION

Notice that there is not an edit_employee.php page. That's because it is so similar to the add_employee.php page that it will be created from it instead later with the following values.

edit_employee.php

EDIT EMPLOYEE

Close all files except the add_employee.php that will be worked on in the next tutorial.

Server Side Includes (SSI)

Create Ordinary Page

Create Include Files

Create Template Page

Create Home Page

Create All Other Pages