Create Stub Pages

Create Stub Master Employee Page

Before creating the pages for an app, it is best practice to start with a page that can be used to "jump-start" the other pages.

Made Page Mobile Friendly

  1. Create a blank HTML framework in the server root directory (htdocs/employee_directory_jqm_pdo), and save it as master_page.php. Give it a lang attribute, meta data, and a title.

    <!doctype html>
    <html lang="en">
    <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Employee Directory</title>
    </head>
    <body>
    </body>
    </html>

  2. Add the following highlighted <div > tag and attributes between the <body> tag:
    WHY: To create the page container for the jQueryMobile framework that will be implement later.

    <body>
<div data-role="page" id="home_page">
    
</div>
    </body>                

    CODE EXPLANATION:
    - The data-role = "page" defines that <div> tag to have a role (or behavior) of a page.

  3. Add the following three <div> tags and their corresponding heading tags, data-roles, classes, and text between the existing <div> tag.
    WHY: To add a header, content, and footer within the "page" content.

    NOTE: Spaces and indention were optional added to show division of the three areas better.

    <body>
<div data-role="page" id="home_page">
    
  <div data-role="header">
          <h1>Employee Directory</h1>
          <a href="master_page.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">EMPLOYEE MASTER PAGE</h2>
      </div>

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

  4. CHECK POINT: Save the file and preview it in a browser. You should see the bare HTML structure.


Link CSS and jQueryMobile Framework

Links to the CSS and jQueryMobile Framework local and remote files have been provided for you to save time.

  1. Add the following highlighted code BELOW the <title> tag:
    WHY: To link to the jQueryMobile framework and the external CSS stylesheet.

    <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" />
<link rel="stylesheet" href="css/custom_styles.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>
    </head>
    <body>

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

Create All Other Stub Pages

While you could create each page as they are needed, it is best to create all of the pages UPFRONT. We will use the master_page.php to create most of the other pages in our app. Since the master_page.php has the jQueryMobile and CSS links in them, if any changes to them are made, it will "cascade" across all pages. Also, it is best to create STATIC content first and then add DYNAMIC content afterward by adding recordsets, dynamic variables, repeat regions, etc.

  1. If necessary, open the master_page.php file and save it as the following pages but change the file name AND the main body heading for each according to the table below:

    File Name Main Body Heading
    detail_page.php EMPLOYEE DETAIL
    add_page.php ADD EMPLOYEE
    delete_page.php DELETE EMPLOYEE
    search_page.php EMPLOYEE SEARCH
    index.php EMPLOYEE LOGIN
    logout.php EMPLOYEE LOGOUT
    registration_page.php EMPLOYEE REGISTRATION
    NOTES:
    • Notice the the EMPLOYEE LOGIN page has a different naming convention that the other pages. That's because it will eventually be the opening or home page to the app and the server will automatically "serve" it up. We could have named it login_page.php but then we would have to provide it with that name in the path to it.
    • Notice also that the page were given generic names like add_page instead of add_employee.page. This is useful if you want to convert this application to another app (e.g. Student Directory instead of Employee Directory).
    • The delete_page.php and the logout.php pages do not need a main body heading because they will be purely PHP script page. However, they are added so they want be confused with the EMPLOYEE MASTER PAGE if we did not change the title.
    • Notice that there is NOT an edit_page.php. That's because it is so similar to the add_page.php page that it will be created from it instead later with the following values:

      edit_page.php EDIT EMPLOYEE
  2. Close all files except the master_page.php that we will be working on in the next section.