Tab Panel site, PHP-MYSQL Course

If you wish to install a local testing server, you can download the XAMPP package for Windows http://www.apachefriends.org/en/xampp.html

Once XAMPP is a completely installed. XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl.

You can use the XAMPP Control Panel to start your testing server.

Click Start next to both Apache and MySQL to start the services.
Starting these services can take a few seconds. When it is complete, 'Running' will display beside each option.

To make your testing server start automatically when your computer starts, you can check the Svc checkbox beside both options.
If the XAMPP Control Panel is not already running, go to C:\xampp\control.exe to open the panel.

1- XAMPP Control Panel

With your testing server now installed and running, there are a few final steps you should take to make sure everything is configured to work perfectly.

Open a web browser such as Firefox or Internet Explorer.
In the Address bar, enter http://localhost.
You should see a XAMPP splash screen with language options.
Choose your preferred language.
You should now see a confirmation window informing you that 'You have successfully installed XAMPP on your system'

2- List of Files

the php + sql + css files and Folders corresponding, stored at \21-Course, Tab Panel site, PHP-MYSQL\Bible mysq Folder
index-Tab-Panel.php, index-pagination-simple-2.php - php files + ...

Defining a Dreamweaver Site

Once a testing server is set up, either locally or using a remote hosting service, you will need to define a site for Dynamic Development in Dreamweaver

Step 1: Start the site definition

In Dreamweaver go to Site -> New Site.

Note: you can edit an existing site definition by going to Site -> Manage Sites. Select the site you wish to modify, then click the edit button.

Step 2: Enter the local Information

In the first section of the site definition, you will set the Local Information. This sets the Site Name, and local path for files in your site.

When using XAMPP in a windows system, it may be that the site root is mapped to: C:\xampp\htdocs
so the new site folder would be created under that location: C:\xampp\htdocs\Tab-site

In this screen shot, using DW CS6 on a Windows system with XAMPP installed. you will set the Local Information. This sets the Site Name, and local path for files in your site.
Site Name: Tab-site
local Site Folder: C:\xampp\htdocs\Tab-site

Step 3: Servers

The next setting is to connect to servers. In DW CS6 and above, this done by selecting the servers section:

and clicking the plus icon to define a new server connection.
at Basic tab, For the Name you can enter the same name as the Site definition, When using a local testing server, set Connect Using to "Local/Network"

Set the Server Folder to the same location as the local files set in the initial Site Settings.
Server Name:           Tab-site
connect using:             Local/Network
Server Folder:          C:\xampp\htdocs\Tab-site
Web URL:                http://localhost/Tab-site

at Advanced tab,

Click the advanced button and set the Application model to PHP / MySQL
Server Model: PHP MySQL

then click Save.
Once the connection is defined, there are check boxes to set the connection as a testing or remote connection, check the testing option.

and then Click Save, the Dreamweaver dialog box display:

Step 4: Manage Sites

you can edit an existing site definition by going to Site -> Manage Sites. Your Sites: Tab-site

then click Done

Setup the site's Testing Server and then click OK

Create A Database

n this section, we'll look into how to create a database. A database is used to store information for your site.
Copy a-Bible_en.sql file from ...\\\21-Course, Tab Panel site, PHP-MYSQL\Tab Panel Folder to folder C:\xampp\htdocs\Tab-site

Most web hosts use a control panel for managing your site, in the control panel they will have a way to create a MySQL Database. Once a database has been created, you can use phpMyAdmin to edit it.

phpMyAdmin is also available using most Local Testing server packages like XAMPP. The Start pages for those server will have a link to open phpMyAdmin.

In phpMyAdmin, go to the Import tab. Use this .sql script (C:\xampp\htdocs\Tab-site\a-Bible_en.sql) to create the a-Bible_en database that we will be using :.

Step 1: import SQL file
On the import tab, Click the chose file button, and select the a-Bible_en.sql file that you downloaded, and click the Go button to have the database created:

Message about a-Bible_en.sql display: Import has been succcessully ...

the Database "a-Bible_en" stores 1 table: biblenewtable
On the Structure tab, to be Displays: the Table "biblenewtable" of Database "a-Bible_en"

index-Tab-Panel.php page File

Now that a site and a database are created, lets connect the 2 together.

Before creating the database connection, a new PHP file needs to be created and saved to the site

Step 1: Create a New PHP page

Go to File -> New. In the File Creation dialog, select Blank Page. From the page type section, select PHP and click the create.

Step 2: Save the page to your site

Go to File -> Save.
In the Save As option, enter "index-Tab-Panel.php"

In the Where section, select the folder for your site.

Step 3: the Site has been defined
- testing server
- Once the site has been defined, at Dreamweaver - Dw display current Message: "This page may have dynamically-related files that can only be discovered by the server. Discover | Preferences.

Step 4: the software connection to the database

Connection Name ="$bd"
Server Name = "localhost"
User Name = "root"
Password = ""
Database Name = "a-Bible_en"

The Code of dbTab.php

<?php
$mysql_hostname = "localhost"; //your mysql host name
$mysql_user = "root"; //your mysql user name
$mysql_password = ""; //your mysql password
$mysql_database = "a-Bible_en"; //your mysql database

$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Error on database connection");

?>

Step 5: Create Spry Tabbed Panels

Tabbed panels consist of multiple panels of information. Only one panel is visible at a time. Click the tabs to switch between panels.
A panel can contain any content including text, graphics, video and other rich media.
The length of a panel automatically extends to accommodate its content.

Insert a Spry Tabbed Panel from Dreamweaver's Insert panel.

Place the insertion point where the tabbed panels will appear.
Display the Insert panel (available from the Window menu).
Select 'Spry' from the drop-down menu.
Locate and click on the option, 'Spry Tabbed Panels'

The default Spry Tabbed Panels is inserted into your document.
Two related files are copied to your site location and appear in the 'Related files' tab: SpryTabbedPanels.js and SpryTabbedPanels.css. These files are necessary for the tabbed panels to function properly.
Change the number and order of panels in the Properties inspector.
- To display the Spry Tabbed Panels' properties in the Properties inspector, click on the blue tab at the top of the panels.
Add content to any panel just as you would add content in the rest of your document. If the panel is not visible, do the following:
1. Mouse over the tab of the panel you want to modify.
2. Click on the eye icon when it appears (see below).
For help modifying styles try this this Adobe online Dreamweaver Help page.
more info offline - .Working with the Spry Tabbed Panels

Step 6: The Designs and Codes of index-Tab-Panel.php ...

A- Spry Tabbed Panels is inserted into the file index-Tab-Panel.php

the main file - index-Tab-Panel.php, includes these files - SpryAssets\SpryTabbedPanels.css and SpryAssets\SpryTabbedPanels.js

1- The Design of index-Tab-Panel.php - Tabbed Panels is inserted

2- The Code of index-Tab-Panel.php - Tabbed Panels is inserted

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="80%" border="2" align="center" cellpadding="3" cellspacing="3">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="center"><div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

B- after Modification, the file index-Tab-Panel.php

the main file - index-Tab-Panel.php, includes these files - dbTab.php, css\style.css, css\pagination.css, css\grey.css, SpryAssets\SpryTabbedPanels.css, SpryAssets\SpryTabbedPanels.js, function.php, values1.php and , valuess.php

1- The Design of index-Tab-Panel.php

2- The Code of index-Tab-Panel.php

<?php
include ('dbTab.php');//make sure you update this file with your database info

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Tab Panel ...</title>
<link href="css/pagination.css" rel="stylesheet" type="text/css" />
<link href="css/grey.css" rel="stylesheet" type="text/css" />
<style type="text/css">

.ch {
border-color:#006;
size:auto;

}
.fchk {
color: #DBDBDB;
}
.chk {
font-size: 24px;
}
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
</head>

<body>
<table width="96%" border="0" align="center" cellpadding="1" cellspacing="1">
<tr>
<th scope="col" height="10px"></th>
</tr>
<tr>
<th scope="col" align="center" >

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #8090AB; font-size: 24px; color: #FFF; font-family: 'Times New Roman', Times, serif; font-weight: bold; font-style: italic;" height="80px">
<tr>
<th scope="col" width="15%" align="center"><span style="background-color: #8090AB; font-size: xx-large; color: #FFF; font-weight: bold; font-style: italic; font-family: 'Old English Text MT'">Tab</span></th>
<th scope="col" width="65%" align="center">Tab Panel ..., Application</th>
<th scope="col" width="20%" align="center"><table width="85%" border="0" cellspacing="0" cellpadding="0" style="background-color: #8090AB; font-size: 24px; color: #FFF; font-family: 'Times New Roman', Times, serif; font-weight: bold; font-style: italic;">
<tr>
<th scope="col" align="center"> </th>
</tr>
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">PHP-MySQL</td>
</tr>
</table></th>
</tr>
</table></th>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" width="80%" > </th>
<th scope="col" width="20%" align="center"> </th>
</tr>
</table></td>
</tr>

<tr>
<td><table width="90%" border="3" align="center" cellpadding="0" cellspacing="0" class="ch" id="tabtab">
<tr>
<th scope="col"><div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"> Bible, New Testament - 1st Part  </li>
<li class="TabbedPanelsTab" tabindex="1"> New1 </li>
<li class="TabbedPanelsTab" tabindex="2"> new2 </li>
<li class="TabbedPanelsTab" tabindex="3"> new3 </li>
</ul>
<div class="TabbedPanelsContentGroup">

<div class="TabbedPanelsContent">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<th scope="col">
<?php //get the function
include ('function.php');
?>
<?php include('values1.php'); //include of values file
?>

</th>

<tr>
<td align="center" height="420px">

<?php include('valuess.php'); //include of values file
?>
</td>
<tr>
<td><table width="65%" border="0" cellspacing="0" cellpadding="0" align="center" height="20px">
<tr>
<th scope="col" align="center"><?php echo pagination($statement,$limit,$page);?></th>
</tr>
</table></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div></th>
</tr>
</table></td>
</tr>
<tr>
<td height="10px"></td>
</tr>
<tr>
<td align="center"><a href="www.puresoftwarecode.com">@ pure software code</a></td>
</tr>
<tr>
<td height="10px" style="background-color: #8090AB;"></td>
</tr>
</table>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

3- the Code, dbTab.php page File

4- the Code, function.php page File

<?php

function pagination($query, $per_page = 7,$page = 1, $url = '?'){
// SELECT `Id`, `Book`, `BookTitle`, `Chapter`, `Verse`, `TextData` FROM `biblenewtable`

$query = "SELECT COUNT(*) as `num` FROM {$query}";
$row = mysql_fetch_array(mysql_query($query));
$total = $row['num'];
$adjacents = "2";

$page = ($page == 0 ? 1 : $page);
$start = ($page - 1) * $per_page;

$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total/$per_page);
$lpm1 = $lastpage - 1;

$pagination = "";

$pagination .= "<ul class='pagination'>";
$pagination .= "<li class='details'>Page $page of $lastpage          </li>    ";

if($lastpage > 1)
{

if ($lastpage < 7 + ($adjacents * 2))
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<li><a class='current'>$counter</a></li>";
else
$pagination.= "<li><a href='{$url}page=$counter'>$counter</a></li>";
}
}
elseif($lastpage > 5 + ($adjacents * 2))
{

if($page < 1 + ($adjacents * 2))
{

for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
{
if ($counter == $page)
$pagination.= "<li><a class='current'>$counter</a></li>";
else
$pagination.= "<li><a href='{$url}page=$counter'>$counter</a></li>";
}
$pagination.= "<li class='dot'>...</li>";
$pagination.= "<li><a href='{$url}page=$lpm1'>$lpm1</a></li>";
$pagination.= "<li><a href='{$url}page=$lastpage'>$lastpage</a></li>";
}
elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
{
$pagination.= "<li><a href='{$url}page=1'>1</a></li>";
$pagination.= "<li><a href='{$url}page=2'>2</a></li>";
$pagination.= "<li class='dot'>...</li>";

for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
{
if ($counter == $page)
$pagination.= "<li><a class='current'>$counter</a></li>";
else
$pagination.= "<li><a href='{$url}page=$counter'>$counter</a></li>";
}
$pagination.= "<li class='dot'>...</li>";
$pagination.= "<li><a href='{$url}page=$lpm1'>$lpm1</a></li>";
$pagination.= "<li><a href='{$url}page=$lastpage'>$lastpage</a></li>";
}
else
{

$pagination.= "<li><a href='{$url}page=1'>1</a></li>";
$pagination.= "<li><a href='{$url}page=2'>2</a></li>";
$pagination.= "<li class='dot'>...</li>";
for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<li><a class='current'>$counter</a></li>";
else
$pagination.= "<li><a href='{$url}page=$counter'>$counter</a></li>";
}
}
}

if ($page < $counter - 1){
$pagination.= "<li><a href='{$url}page=$next'>Next</a></li>";
$pagination.= "<li><a href='{$url}page=$lastpage'>Last</a></li>";
}else{
$pagination.= "<li><a class='current'>Next</a></li>";
$pagination.= "<li><a class='current'>Last</a></li>";
}
$pagination.= "</ul>\n";
}
return $pagination;
}
?>

5- the Code, values1.php page File

<?php
$page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
$limit = 7;
$startpoint = ($page * $limit) - $limit;
$statement = "`biblenewtable`";
// $statement = "biblenewtable WHERE BookTitle LIKE '%".$var1."%' and Chapter LIKE '%".$var2."%' and Verse LIKE '%".$var3."%' ORDER BY Verse ASC";

$page=1;
$show_page=1;
$per_page = 7; // number of results to show per page
$result = mysql_query("SELECT * FROM biblenewtable");
//$result = mysql_query("SELECT * FROM biblenewtable WHERE BookTitle LIKE '%".$var1."%' and Chapter LIKE '%".$var2."%' and Verse LIKE '%".$var3."%' ORDER BY Verse ASC");

$total_results = mysql_num_rows($result);
$total_pages = ceil($total_results / $per_page);//total pages we going to have

//-------------if page is setcheck------------------//
if (isset($_GET['page'])) {
$show_page = $_GET['page']; //it will telles the current page
if ($show_page > 0 && $show_page <= $total_pages) {
$start = ($show_page - 1) * $per_page;
$end = $start + $per_page;

// display pagination
$page = intval($_GET['page']);
} else {
// error - show first set of results
$start = 0;
$end = $per_page;
$page =0;
}
} else {
// if page isn't set, show first set of results
$start = 0;

$end = $per_page;
$page =1;
}

$tpages=$total_pages;
if ($page <= 0)
$page = 1;
?>

6- the Code, valuess.php page File

<?php
// display data in table
echo "<table class='table table-bordered'>";
echo "<thead><tr><th>Book Title</th> <th>Chapter</th> <th>Verse</th> <th>Text Data</th> </tr></thead>";

// loop through results of database query, displaying them in the table
for ($i = $start; $i < $end; $i++) {
// make sure that PHP doesn't try to show results that don't exist
if ($i == $total_results) {
break;
}

// echo out the contents of each row into a table

echo '<td>' . mysql_result($result, $i, 'BookTitle') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Chapter') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Verse') . '</td>';
echo '<td>' . mysql_result($result, $i, 'TextData') . '</td>';

echo "</tr>";
}

// close table>
echo "</table>";
// pagination
?>

7- Other Files - css and js

at the Folder ...\21-Course, Tab Panel site, PHP-MYSQL\Tab Panel Folder, Look/Read the Code of these Files : css\style.css, css\pagination.css, css\grey.css, SpryAssets\SpryTabbedPanels.css and SpryAssets\SpryTabbedPanels.js

Show or Preview Display the page site - index-Tab-Panel.php

in Dreamweaver, select or open (php) files,
Go to File -> Preview in Browser -> IExplore or chrome, to Show and display the Search Operations...

1- the Tabbed panel Selected of index-Tab-Panel.php: Bible, New Testament - 1st Part where the Content Stores the Data corresponding using the Pagination Operation

2- the Tabbed panel Selected of index-Tab-Panel.php: new2 where the Content (Empty) Stores the Word -Content4

pure software code