Accordion_vertical site, PHP-Javascript Course
              In the steps of this tutorial, I will be using the XAMPP server  for Windows ...     May 2015     
    The Steps to create a Accordion Vertical, menu/data, Developed with PHP and javascript ...
  1. The Testing Server
  2. Defining a Dreamweaver Site
  3. index.php page File
     
  4. Show or Preview Display the page site
 
 
Accordion_vertical
 pages site
 
 
 
 
Developed with
PHP-Javascript
 
 
 

The Testing Server        

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.

  1. 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.

  1. Open a web browser such as Firefox or Internet Explorer.
  2. In the Address bar, enter http://localhost.
    You should see a XAMPP splash screen with language options.
  3. 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 + css files and js Folder corresponding, stored at \32-Course, accordion_vertical site, PHP\accordion  vertical Folder
 the main file - index.php
 
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\accordion_vertical-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:           accordion_vertical-site
local Site Folder: C:\xampp\htdocs\accordion_vertical-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:           accordion_vertical-site
connect using:             Local/Network
Server Folder:          C:\xampp\htdocs\accordion_vertical-site
Web URL:                http://localhost/accordion_vertical-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: accordion_vertical-site
then click Done
Setup the site's Testing Server and then click OK
 
 
index.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.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: Add other data files ...
1) the php + css + js files and Folder corresponding, stored at \32-Course, accordion_vertical site, PHP\accordion  vertical Folder.
the main file:  index.php

2) the folder - accordion  vertical Folder stores the following files
 
Step 5: The Codes of index.php
the main file - index.php
index.php includes the following css and js files: stylesheet.css, accordion.css, js/ga.js, js/jquery.js, js/easing.js, js/accordion.js and js/routines.js. All these files stored at Folder - accordion  vertical Folder or at  \32-Course, accordion_vertical site, PHP\accordion  vertical Folder. 
 
<!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>Accordion Vertical</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css"n">
<link rel="stylesheet" href="accordion.css" type="text/css">

</head>

<body style="background-color: #FFF;">
<table width="70%" border="0" align="center" cellpadding="3" cellspacing="3">
<tr>
<th scope="col" align="center" height="10px"></th>
</tr>
<tr>
<th scope="col" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #8090AB;">
<tr>
<th scope="col" align="center" width="15%" style="background-color: #8090AB; font-size: xx-large; color: #FFF; font-weight: bold; font-style: italic; font-family: 'Old English Text MT'">A V</th>
<th scope="col" align="center" width="85%" height="80px" style="background-color: #8090AB; font-family: 'Times New Roman', Times, serif; font-size: xx-large; color: #FFF;" >Accordion Vertical</th>
</tr>
</table>
</th>
</tr>
<tr>
<td align="center" bgcolor="#C0C0C0">&nbsp;</td>
</tr>
<tr>
<td align="center" >
<div id="accordion" class="accordion basic" style="width: 600px; height: 320px;">

<ol>

<li class="slide">
<h2 style="border-top-width: 5px; border-top-color: #900; width: 320px; height: 48px; left: 0px; font: 'Times New Roman', Times, serif; font-weight: bold; font-size: 18px; background-color: #B3D9D9; color:#1B3636;" class="" ><span>Home</span></h2>
<div class="content" style="width: 600px; left: 0px; padding-left: 48px; background-color: #EAEAEA;">&nbsp;&nbsp;Content data 1
</div>
</li>





<li class="slide">
<h2 class="selected" style="border-top-width: 5px; border-top-color: #900; width: 320px; height: 48px; left: 48px; font: 'Times New Roman', Times, serif; font-weight: bold; font-size: 18px; background-color: #B3D9D9; color:#1B3636; "><span>Download</span></h2>
<div class="content" style="width: 600px; left: 48px; padding-left: 48px; background-color: #EAEAEA;">&nbsp;&nbsp;Content data 2
<div id="formArea">
</div>
</div>
</li>

<li class="slide">
<h2 style="border-top-width: 5px; border-top-color: #900; width: 320px; height: 48px; left: 768px; font: 'Times New Roman', Times, serif; font-weight: bold; font-size: 18px; background-color: #B3D9D9; color:#1B3636;" ><span>Demos</span></h2>
<div class="content" style="width: 600px; left: 768px; padding-left: 48px; background-color: #EAEAEA;">&nbsp;&nbsp;Content data 3
</div>
</li>

<li class="slide">
<h2 style="border-top-width: 5px; border-top-color: #900; width: 320px; height: 48px; left: 816px; font: 'Times New Roman', Times, serif; font-weight: bold; font-size: 18px; background-color: #B3D9D9; color:#1B3636;"><span>Language Packs</span></h2>
<div class="content" style="width: 600px; left: 816px; padding-left: 48px; background-color: #EAEAEA;">&nbsp;&nbsp;Content data 4
</div>

</li>

<li class="slide">
<h2 style="border-top-width: 5px; border-top-color: #900; width: 320px; height: 48px; left: 864px; font: 'Times New Roman', Times, serif; font-weight: bold; font-size: 18px; background-color: #B3D9D9; color:#1B3636;"><span>Donations</span></h2>
<div class="content" style="width: 600px; left: 864px; padding-left: 48px; background-color: #EAEAEA;">&nbsp;&nbsp;Content data 5

</div>
</li>

<li class="slide">
<h2 style="border-top-width: 5px; border-top-color: #900; width: 320px; height: 48px; left: 912px; font: 'Times New Roman', Times, serif; font-weight: bold; font-size: 18px; background-color: #B3D9D9; color:#1B3636;"><span>About / Support</span></h2>
<div class="content" style="width: 600px; left: 912px; padding-left: 48px; background-color: #EAEAEA;">&nbsp;&nbsp;Content data 6
</div>
</li>

</ol>

</div></td>
</tr>
<tr>
<td align="center" bgcolor="#C0C0C0" >&nbsp;</td>
</tr>
<tr>
<td align="center" height="10px" style="background-color: #8090AB; font-family: 'Times New Roman', Times, serif; font-size: 10px;"><a href="www.puresoftwarecode.com">@ pure software code</a></td>
</tr>
</table>
<script type="text/javascript" src="js/ga.js">
</script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript" src="js/routines.js"></script>
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16932639-9']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$('#accordion').liteAccordion({easing:'easeOutSine'});
//]]>
</script>

</body>
</html>
 

Show or Preview Display the page site ...

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