acomment 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 and Folders

the php, sql and files Folder corresponding, stored at acomment Folder:
1- files folder stores generic_001.png - png file picture
2- comment-db.sql - SQL file
3- index.php, db.php and comment.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\acomment

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: acomment
local Site Folder: C:\xampp\htdocs\acomment

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:           acomment
connect using:             Local/Network
Server Folder:          C:\xampp\htdocs\acomment
Web URL:                http://localhost/acomment

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: acomment

then click Done

Step 5: add files folder - picture

once the site has been defined, add the files folder in the linked attachment to the site root,
Copy files Folder from ...\\6-Course, acomment site, PHP-MySQL\acomment Folder to folder C:\xampp\htdocs\acomment

Create A Database

In this section, we'll look into how to create a database. A database is used to store information for your site.
Copy comment-db.sql file from ...\\6-Course, acomment site, PHP-MySQL\acomment Folder to folder C:\xampp\htdocs\acomment

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\acomment\comment-db.sql) to create the downdrpcomment database that we will be using :

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

the Database "downdropcomment" store 1 Table

click Create PHP, "Your SQL query has been executed successfully" dialog box display

the Browse of Table "commenttable" of Database "downdropcomment"

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: Create the connection to the database

1) open the database panel by going to Window -> Database.

2) In the database panel, click the plus button and select MySQL Connection

3) enter the:
connection name:        condown
MySQL server:          localhost
User name:                 root
Password:
Database:                   downdropcomment

4) Click the test button then Click OK

5) Click OK

Step 5: Create and Insert a table

Place your cursor in the one cell then Go to insert -> Table.
for the table settings, use 7 Rows, 2 Columns, set the width to 800 Pixles

Click OK

Step 6: Populate the table

In the left side column, enter 5 labels:
Info ... :, Session :*, Name :*, Work :*, Message :*

in the column on the right, enter:
3 labels, 1 Select Menu, 2 TexFields single line, 1 TexField Multi line, 1 Button

Select Menu, List Values:

List Values

Item Label

Value

-- Please Select a Session --
#FOMO: Social As The Second Screen
Keynote: Tweeting For Champions
Listening To Your Audience
Measuring Up With Social Analytics
Native Ads, Sponsored Endorsements & Paid Posts: Walking The Social Media Minefield
Reacting To Real-Time Events: Being On-Point For Mass Appeal
Recovering From A Social Media Mistake
Social For The Sale & ROI
TBA
The Elements Of Viral-Worthy Content
Winning Strategies With Facebook Ads

1519
1529
1523
1520
1522
1521
1525
1526
1528
1527
1524

Step 7: The Design and Code of index.php

1- The Design of index.php

2- The Code of index.php - before Database connection

<!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>
<style type="text/css">
.auto-style1 { border-color: #E1E1E1;
border-width: 0;
background-color: #E1E1E1;
}
.auto-style2 { font-size: x-large;
font-weight: bold;
text-decoration: underline;
}
#one { font-size:18px;
font-family:"Times New Roman", Times, serif;
color:#00F;
}
#submit { width: 200px;
height: 30px;
background-color: #999;
border: #666 solid 2px;
}
#tjobid { width:600px;
height:35px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
color:#006;
border:#666 solid 2px;
}
#tmessageid { max-width:600px;
max-height:100px;
min-width:600px;
min-height:100px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
color:#006;
border:#666 solid 2px;
}
#tnameid { width:600px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
height:35px;
color:#006;
border:#666 solid 2px;
}
#tsessionid { width:600px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
height:32px;
color:#006;
border:#666 solid 2px;
}
</style>
</head>

<body>
<form action="comment.php" method="post" name="comment" id="comment" onsubmit="return validation()">
<table width="800" align="center" cellpadding="5" cellspacing="5" color:="color:" #F00;" class="auto-style1">
<tr>
<td align="center" id="one" style="width: 20%; color: #000;" class="auto-style2" valign="top">Info ... : </td>
<td style="width: 80%">Use this form to submit a message during this
session.<br />
<br />
Only the session and question fields are required. Your name
and company name are optional.</td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%; color: #000040;">Session :<span style="color:#F00;">*</span></td>
<td style="width: 80%"><select class="form-control" id="tsessionid" name="session" onchange="getSession();" style="width: 600px; height: 32px;">
<option value="">-- Please Select a Session --</option>
<option value="1519">#FOMO: Social As The Second Screen</option>
<option value="1529">Keynote: Tweeting For Champions</option>
<option value="1523">Listening To Your Audience</option>
<option value="1520">Measuring Up With Social Analytics</option>
<option value="1522">Native Ads, Sponsored Endorsements & Paid Posts: Walking The Social Media Minefield</option>
<option value="1521">Reacting To Real-Time Events: Being On-Point For Mass Appeal</option>
<option value="1525">Recovering From A Social Media Mistake</option>
<option value="1526">Social For The Sale & ROI</option>
<option value="1528">TBA</option>
<option value="1527">The Elements Of Viral-Worthy Content</option>
<option value="1524">Winning Strategies With Facebook Ads</option>
</select></td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%; color: #000040;">Name :<span style="color:#F00;">*</span></td>
<td style="width: 80%"><input type="text" name="namename" id="tnameid" /></td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%; color: #000040;">Work :<span style="color:#F00;">*</span></td>
<td style="width: 80%"><input type="text" name="job" id="tjobid" /></td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%; color: #000040;">Message :<span style="color:#F00;">*</span></td>
<td style="width: 80%"><textarea name="message" id="tmessageid" style="width: 600px"></textarea></td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%"> </td>
<td style="width: 80%"> Please make sure your message is clear so it may be answered quickly and
correctly.</td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%"></td>
<td style="width: 80%"><input type="submit" name="submit" id="submit" value="Submit Comment" /></td>
</tr>
</table>
</form>
</body>
</html>

3- the Code, index.php file after Database connection

<?php
include("db.php");
$select=mysql_query("select `id`, 'session', `name`, `job`, `message` from commenttable order by `id` DESC limit 0, 2 ");
while($row=mysql_fetch_array($select))
{
echo "<div id='sty'>";
echo "<img src='files/generic_001.png'"."' width='50px' height='50px' align='left' />";
//The time is now <?php echo date('H:i:s');
echo "<div id='nameid'>".$row['name']."</div>" ;
echo "<div id='jobid'>".$row['job']."</div>";
echo "<div id='msgid'>".$row['message']."</div>";
echo "</div><br />";
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Comment system using php and mysql</title>
<style type="text/css">
#sty
{
margin:0 auto;
margin-top:3px;
border:#666 solid 1px;
width:765px;
padding:10px;
}
#fileid
{
width:85px;
height:20px;
}
img
{
margin-right:20px;
}
#nameid
{
font-size:14px;
color:#F00;
font-family:"Comic Sans MS", cursive;
margin-bottom:1px;

}
#jobid
{
font-size:14px;
color:#000;
font-family:"Times New Roman", Times, serif;
margin-bottom:1px;
}
#msgid
{
font-size:14px;
color:#000;
font-family:"Times New Roman", Times, serif;
margin-bottom:1px;
}
#tsessionid
{
width:600px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
height:32px;
color:#006;
border:#666 solid 2px;
}
#tnameid
{
width:600px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
height:35px;
color:#006;
border:#666 solid 2px;
}
#tjobid
{
width:600px;
height:35px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
color:#006;
border:#666 solid 2px;
}
#tmessageid
{
max-width:600px;
max-height:100px;
min-width:600px;
min-height:100px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
color:#006;
border:#666 solid 2px;
}
#one
{
font-size:18px;
font-family:"Times New Roman", Times, serif;
color:#00F;
}
#submit
{
width: 200px;
height: 30px;
background-color: #999;
border: #666 solid 2px;
}

.auto-style1 {
border-color: #E1E1E1;
border-width: 0;
background-color: #E1E1E1;
}

.auto-style2 {
font-size: x-large;
font-weight: bold;
text-decoration: underline;
}

</style>

<script type="text/javascript">
function validation()
{
var sess=document.comment.session.value;
var sess1=document.getElementById('tsessionid');
if(sess=="")
{
document.comment.session.focus();
sess1.style.borderColor="#f00";
return false;
}
var sess1=document.getElementById('tsessionid');
sess1.style.borderColor="";

var nam=document.comment.namename.value;
var nam1=document.getElementById('tnameid');
if(nam=="")
{
document.comment.namename.focus();
nam1.style.borderColor="#f00";
return false;
}
var nam1=document.getElementById('tnameid');
nam1.style.borderColor="";
var jo=document.comment.job.value;
var jo1=document.getElementById('tjobid');
if(jo=="")
{
document.comment.job.focus();
jo1.style.borderColor="#f00";
return false;
}
var jo1=document.getElementById('tjobid');
jo1.style.borderColor="";
var mess=document.comment.message.value;
var mess1=document.getElementById('tmessageid');
if(mess=="")
{
document.comment.message.focus();
mess1.style.borderColor="#f00";
return false;
}
}
</script>
</head>

<body>
<form name="comment" method="post" action="comment.php" onSubmit="return validation()">
<table width="800" align="center" cellpadding="5" cellspacing="5" color: #F00;" class="auto-style1">
<tr>
<td align="center" id="one" style="width: 20%; color: #000;" class="auto-style2" valign="top">Info ... : </td>
<td style="width: 80%">Use this form to submit a message during this
session.<br><br>Only the session and question fields are required. Your name
and company name are optional.</td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%; color: #000040;">Session :<span style="color:#F00;">*</span></td>
<td style="width: 80%">
<select class="form-control" id="tsessionid" name="session" onchange="getSession();" style="width: 600px; height: 32px;">
<option value="">-- Please Select a Session --</option>
<option value="1519">#FOMO: Social As The Second Screen</option>
<option value="1529">Keynote: Tweeting For Champions</option>
<option value="1523">Listening To Your Audience</option>
<option value="1520">Measuring Up With Social Analytics</option>
<option value="1522">Native Ads, Sponsored Endorsements & Paid Posts: Walking The Social Media Minefield</option>
<option value="1521">Reacting To Real-Time Events: Being On-Point For Mass Appeal</option>
<option value="1525">Recovering From A Social Media Mistake</option>
<option value="1526">Social For The Sale & ROI</option>
<option value="1528">TBA</option>
<option value="1527">The Elements Of Viral-Worthy Content</option>
<option value="1524">Winning Strategies With Facebook Ads</option>
</select></td>
</tr>

<tr>
<td align="right" id="one" style="width: 20%; color: #000040;">Name :<span style="color:#F00;">*</span></td>
<td style="width: 80%"><input type="text" name="namename" id="tnameid"></td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%; color: #000040;">Work :<span style="color:#F00;">*</span></td>
<td style="width: 80%"><input type="text" name="job" id="tjobid"></td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%; color: #000040;">Message :<span style="color:#F00;">*</span></td>
<td style="width: 80%">
<textarea name="message" id="tmessageid" style="width: 600px"></textarea></td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%"> </td>
<td style="width: 80%">
Please make sure your message is clear so it may be answered quickly and
correctly.</td>
</tr>
<tr>
<td align="right" id="one" style="width: 20%"></td>
<td style="width: 80%"><input type="submit" name="submit" id="submit" value="Submit Comment"></td>
</tr>
</table>
</form>
</body>
</html>

db.php page File

db.php, Create New PHP file and Save it ...

the Code, db.php file

<?php
//database name --> downdropcomment
//table name --> commenttable
//table values --> session --> varchar(70)
// name --> varchar (20)
// job --> varchar (25)
// message --> varchar (250)

$conn=mysql_connect("localhost","root","");
$db=mysql_select_db("downdropcomment",$conn);

?>

comment.php page File

comment.php, Create New PHP file and Save it ...

the Code, comment.php file

<?php
include("db.php");
if(isset($_POST['submit']))
{
$session=$_POST['session'];
$name=$_POST['namename'];
$job=$_POST['job'];
$message=$_POST['message'];
$insert=mysql_query("insert into commenttable(session, name,job,message)values('$session','$name','$job','$message')")or die(mysql_error());
header("Location:index.php");
}
?>

Show or Preview Display the page site

Preview the recordset page in the browser.

in Dreamweaver, select or open index.php file,
Go to File -> Preview in Browser -> IExplore or chrome, to Show the next picture.

Enter the Data ...

Click Submit Comment, the Resultat to be Display

pure software code