Tab Panel
site, PHP-MYSQL Course |
In the steps of this tutorial, I will be using the XAMPP
server for Windows ... |
Mars
2015
| |
General
Info: |
|
Connection Name
="$bd" Server Name = "localhost" User Name =
"root" Password = "" Database Name =
"a-Bible_en" |
|
Database Name =
"a-Bible_en" 1-Table Name = "biblenewtable" |
| |
| |
|
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 |
|
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 |
|
|
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 |
|
|
|
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 |
Go to File -> New. In the File Creation dialog, select Blank Page.
From the page type section, select PHP and click the
create. |
|
|
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:
- Mouse over the tab of the panel you want to modify.
- 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 |
<?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");
?> | |
|
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 |
|
|
|
|
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 |
|
|
|
|