Use of arrow keys when focused on the Google language option field will translate site content on the fly. Use your enter key to review all options and choose your selection before applying.
In this assignment you will be creating a site about birds. There will be an admin area that utilizes ckeditor and ckfinder to manage the content of the site. The project will consist of only two public web pages and two admin web pages:
Public pages:
index.php - the home page for the site. The content will be loaded from a MySQL table named home_content
birds.php - the page that displays information about birds. The content will be loaded from a MySQL table named birds
Admin pages:
index.php - an admin page that is used to manage the contentfor birds.php
home_admin.php - an admin page that allows the editing of the home page (the public index.php) content
Initial preparations:
In your I: drive Web Design 2 folder create a new folder named birds_site.
Open the birds_site folder and create a new folder named images. Create another folder named admin.
In Dreamweaver create a new site named birds that uses the folders created previously.
In Dreamweaver press the Remote View button, ,so you can see the web server folders.
Right click on the top most folder (it has your user name) and choose New Folder. Add a new folder named birds_site.
Open the folder named php_tutorial. Copy (right click, Edit, Copy) the CKEditor and CKFinder folders from your php_tutorial project folder and paste (right click, Edit, Paste) them into the birds_site folder.
After ckeditor and ckfinder have finished pasting into the birds_site folder open the ckfinder folder. Find a file named config.php. Copy the file and paste it into your project folder on the local view (right-hand side of screen). Open the local copy of config.php and find this line of code (should be around line 64): $baseUrl = '/web_students/your last name _ first name*/mysql_tutorial/ckfinder/userfiles/';
and change it so that it points to the location of your bird site project: $baseUrl = '/web_students/your last name _ first name*/birds_site/ckfinder/userfiles/';
*use your own name here
FTP config.php into the ckfinder folder on the web server.
From a previous project copy the file password_protect.php and paste it into the birds admin folder.
From a previous project copy connector.php and paste a copy into the birds main folder.
In Dreamweaver create a PHP page named birds.php (use doctype: XHTML 1.0 STRICT).
In Dreamweaver create a CSS file named main.css.
Create a MySQL table for the bird data:
Find the cke_add_table.php file from the lessons you completed before this project. Place a copy of the file in your birds_site folder. Using the information supplied in the table below modify cke_add_table.php so that it can be used to create a new table named birds in your existing database (your login name is the name of your database).
Use the following information when creating the birds table
Field
Type
Length/Values
Default
Collation
Attributes
Null
Auto_increment
id
INT
5
PRIMARY KEY
NOT NULL
AUTO_INCREMENT
common_name
TEXT
latin_name
TEXT
general_info
TEXT
length
TEXT
wingspan
TEXT
weight
TEXT
other_name1
TEXT
other_name2
TEXT
bird_image
TEXT
image_caption
TEXT
range_map
TEXT
After modifying cke_add_table.php ftp it to the server. Preview the page in a web browser and confirm that it has successfully created the new table. You may want to have your teacher check the web server to make sure the table was created.
The site will need a page that allows the content to be added and edited. The quickest way to get started on this page is to copy the index.php page from the admin folder of the previous project and paste it into the admin folder of the birds project..
Open index.php and modify the code so that it works for the birds site. Changes to make include:
Make sure that there is code to connect to the MySQL database. It will be near the top of the page and should say: include('../connector.php');
Since the table for this project is named birds, not site_content, replace each of the four occurrences of site_content with birds.
Find the two occurrences of: $ud_page_title=mysql_result($result,0,"page_title");
$ud_page_content=mysql_result($result,0,"page_content");and replace them with: $common_name=mysql_result($result,0,"common_name");
$latin_name=mysql_result($result,0,"latin_name");
$general_info=mysql_result($result,0,"general_info");
$length=mysql_result($result,0,"length");
$wingspan=mysql_result($result,0,"wingspan");
$weight=mysql_result($result,0,"weight");
$image_caption=mysql_result($result,0,"image_caption");
$other_name1=mysql_result($result,0,"other_name1");
$other_name2=mysql_result($result,0,"other_name2");
$bird_image=mysql_result($result,0,"bird_image");
$range_map=mysql_result($result,0,"range_map");
Find the following line of code: $query="UPDATE birds SET page_title='$ud_page_title', page_content='$ud_page_content' WHERE id='$id'";and replace it with: $query="UPDATE birds SET common_name='$common_name', latin_name='$latin_name', general_info='$general_info', length='$length', wingspan='$wingspan', weight='$weight', other_name1='$other_name1', other_name2='$other_name2', bird_image='$bird_image', image_caption='$image_caption',range_map='$range_map' WHERE id='$id'";
Find the following line of code: mysql_query("INSERT INTO birds (id, page_title, page_content) VALUES (NULL, '$ud_page_title','$ud_page_content')");and replace it with: mysql_query("INSERT INTO birds (id, common_name, latin_name, general_info, length, wingspan, weight, other_name1, other_name2, bird_image, image_caption, range_map) VALUES (NULL, '$common_name', '$latin_name', '$general_info', '$length', '$wingspan', '$weight', '$other_name1', '$other_name2', '$bird_image', '$image_caption', '$range_map')");
Replace the existing form with: (notice that the new form is in a div named wrapper) <div id="wrapper">
<form action="index.php<?php if(isset($id)) echo '?id='.$id; ?>" method="post">
<input name="ud_id" id="ud_id" type="hidden" value="<?php if(isset($id)) echo $id; ?>">
<div id="submit-button">
<input name="submit" type="submit" value="Submit Info"/>
</div>
</form>
</div> <!-- end of wrapper -->
Find the following two lines of code: $ud_page_content=$_POST['ud_page_content'];
$ud_page_title=$_POST['ud_page_title'];and replace them with: (NOTE: notice the htmlentities command added to the code. This allows for users to input ' or " and other special characters into the submitted text. It is not needed in the general info area because ckeditor automatically takes care of the issue.) $common_name=htmlentities($_POST['common_name']); //htmlentities allows a string to contain ' or " or other special characters
$latin_name=htmlentities($_POST['latin_name']);
$general_info=htmlentities($_POST['general_info']);
$length=htmlentities($_POST['length']);
$wingspan=htmlentities($_POST['wingspan']);
$weight=htmlentities($_POST['weight']);
$other_name1=htmlentities($_POST['other_name1']);
$other_name2=htmlentities($_POST['other_name2']);
$bird_image=$_POST['bird_image'];
$image_caption=htmlentities($_POST['image_caption']);
$range_map=$_POST['range_map'];
In the admin folder create a new CSS file named admin.css. Paste the following styles into admin.css: body{background-color:#CCCC99;}
#wrapper{position:relative;}
#inputs{position:absolute; left:10px; top:0px; text-align:right;}
#gen-info{position:absolute; left:340px; top:0px;}
#range-map{position:absolute; left:960px; top:0px;}
#bird-image{position:absolute; left:22px; top:330px;}
#submit-button{position:absolute; left:480px; top:680px;}
In the head of index.php add a link to admin.css.
Create a menu for the admin page (index.php).
In the admin folder create an HTML file named menu.html.
In the admin folder create a JavaScript file named quickmenu.js.
Use QuickMenu to create a menu for the admin page index.php. The links to include are:
Add New Bird - link to index.php
Home- link to home_admin.php
Name of Bird 1 (ex., Cardinal) - link to index.php?id=1
Name of Bird 2 (ex., Blue Jay) - link to index.php?id=2
Name of Bird 3 (ex., Starling) - link to index.php?id=3
Name of Bird 4 (ex., Robin) - link to index.php?id=4
Name of Bird 5 (ex., Bluebird) - link to index.php?id=5
When you save the menu save it into the menu.html file in the admin folder.
When you publish the menu paste the code into the quickmenu.js file on the admin folder.
Add the necessary one line of menu code into the body of index.php that is given to you when you publish the menu.
FTP index.php and admin.css to the admin folder on the web server.
Preview index.php in a web browser. Press the Add New Bird Data link. The fields should all be empty. Test your admin page by entering information for your first bird and then pressing the Submit Info button. (NOTICE:information for this project can be found atwww.allaboutbirds.org)
Enter information for the remaining four birds. Check each of the links in your menu to make sure they work. Try editing the information for a bird to make sure the admin page works for changing information about a bird.
The main content page for the birds site will have a layout as shown below. Due to time restrictions the HTML code and CSS styles are supplied below. It will be up to you to modify the existing code in order create a visually appealing finished product. The necessary PHP code used to read the table and echo its content is not included.
Delete the existing code in birds.php and replace it with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>For the Birds</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner"></div>
<div id="menu"></div>
<div id="main_content">
<div id="measurements">
<p>Measurements:</p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
<p>Other Names:</p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
</div><!-- measurements -->
<div id="main_info">
<div id="range_map"></div>
<div id="bird_name">Cardinal</div>
<div id="bird_img"></div>
<div id="caption"></div>
<p>The male Northern Cardinal is perhaps responsible for getting more people to open up a field guide than any other bird. They’re a perfect combination of familiarity, conspicuousness, and style: a shade of red you can’t take your eyes off. Even the brown females sport a sharp crest and warm red accents. Cardinals don’t migrate and they don’t molt into a dull plumage, so they’re still breathtaking in winter’s snowy backyards. In summer, their sweet whistles are one of the first sounds of the morning. </p>
<p>Only a few female North American songbirds sing, but the female Northern Cardinal does, and often while sitting on the nest. This may give the male information about when to bring food to the nest. A mated pair shares song phrases, but the female may sing a longer and slightly more complex song than the male. </p>
<p>Many people are perplexed each spring by the sight of a cardinal attacking its reflection in a window, car mirror, or shiny bumper. Both males and females do this, and most often in spring and early summer when they are obsessed with defending their territory against any intruders. Birds may spend hours fighting these intruders without giving up. A few weeks later, as levels of aggressive hormones subside, these attacks should end (though one female kept up this behavior every day or so for six months without stopping). </p>
</div><!-- main_info -->
</div><!-- main_content -->
</body>
</html>
In order to display the information stored in the birds table you will need to add PHP code to birds.php that connects it to the MySQL server. Use the include('connector.php'); code that you have used in previous pages.
Once connected to the MySQL server you will need to use PHP to write code that selects the correct information from the birds table based on the id value passed in the link (ex, birds.php?id=1). Use the code $id=$_GET['id']; to determine the id value.
The next step is to query (ask) the birds table for information that belongs to the id value. Use the code $query="SELECT * FROM birds WHERE id=$id"; to query the birds table.
The results of the query will need to be stored in a variable. Use the code $result=mysql_query($query,$con); to store the results of the query in the variable named $result.
The values for each field (common_name, latin_name, etc.) of the birds table need to be placed in individual variables so they can be used later to display their values on the birds.php page. An example of this code would be: $common_name=mysql_result($result,0,"common_name"); Follow this sample code to place the remaining fields into variables.
To display information on birds.php you will use the PHP code echo $variable_name. For example, to display the common name of a bird you would use echo $common_name; The appearance in the code of birds.php would look like: (notice the php code is located within the bird_name div)
Site 2: For The Birds - Home Page Admin & Home Page
Before starting on the admin page for the home page content you will need to add another table to your project's database . Follow these steps to add the required table:
Open phpMyAdmin and log in to your account.
Create a table named home_content with the following field:
Use the following information when creating the home_content table
Field
Type
Length/Values
Default
Collation
Attributes
Null
Auto_increment
content
TEXT
Creating the admin page (home_admin.php):
The home page for the birds site (index.php) will need to have it's own admin page. Add to the admin folder a new php page named home_admin.php.
In this section of the assignment you will be creating a page that contains a web form with only one ckeditor instance as shown in the image below.
The PHP code for this page will need to be able to insert data into the table named home_content. The first time data is submitted the page must create a new record (row) in the home_content table. After the initial INSERT is accomplished the page will only need to UPDATE existing data. To accomplish this the code checks to see how many rows of data currently exist in the table. If the answer is 0 the code INSERTs a new row. If the answer is not ) then the data is UPDATEd.
Paste the following PHP code at the beginning of home_admin.php:
$result = mysql_query("SELECT * FROM home_content");
$num_rows = mysql_num_rows($result); // checking to see if there are any records (rows of data) in the table yet
if($num_rows !=0) // if this is true then there are records already in the table and it is ok to execute the next line
$content=mysql_result($result,0,"content"); // place the contents of the query into $content
// if the submit button was pressed execute this block of code
if (isset($_POST['submit']))
{
$content=$_POST['content'];
// we need to check to see if this is the first time data is being submitted to the table
// so we know whether to INSERT or UPDATE
if($num_rows == 0)//because if it is 0 that means there is not any data in the table yet and a row (record) needs to be INSERTed
{
mysql_query("INSERT INTO home_content (content) VALUES ('$content')");
$id = mysql_insert_id();
$query="SELECT * FROM home_content";
$result=mysql_query($query,$con);// execute the query
$content=mysql_result($result,0,"content");
}
else // UPDATE an existing row (record)
{
$query="UPDATE home_content SET content='$content'";
mysql_query($query);
}
}
mysql_close($con);
?>
Paste the following HTML into the body of home_admin.php:
In a browser open home_admin.php. Enter some information into the page. Submit the information to confirm that home_admin.php is functioning correctly.
Creating the home page (index.php):
The layout for index.php can be created by using the template for birds.php. Remove all of the div containers except for banner, menu and main_content.
There will need to be PHP code that connects the page to the home_content table. The page will also need PHP code to read the content field data and then echo it onto the page in the main_content div. Your birds.php has code that you can copy and paste into index.php and then modify.
Creating the bird site menu:
Use Quickmenu to create a menu with links to Home and your choice of five different birds.
The links will include a link to home, index.php, and to the bird pages, birds.php?id=1 through birds.php?id=5.
, so you can see the web server folders.
