20:57
Unknown
Author: Michael Jennings
In my last tutorial I set up the html for the main page of the content management system and also the mysql functions to add and delete content from it. To view this article visit Fairway Web Design. In this tutorial I am going to create the include that allows you to edit the content and also make the style sheet.
The first thing we need to do is get the information from the database when a row is requested in the index.
In the last article we used a button to post the id of the given row so that we can get the appropriate information.
$query=mysql_query("select * from content where id='".mysql_real_escape_string($_REQUEST['edit'])."'");
$row=mysql_fetch_assoc($query);
?>
You don't need to connect to the database with this as it will replace the content in the index page so it will already use all of the scripts that are in that page. Next we need to set up where the text will load. I'll write all the code and then explain it.
Page Name
Content Name
The paragraphs that aren't content editable are just labels for the sections that we will edit. Then the h1 has the id that the ajax will use to submit the data with in the h1. It is also made content editable so that you can edit what is within by just clicking on the header and you can change the text within. The content paragraph is set up the same as the paragraph. Finally for the edit file we have the toolbar div.
This is almost exactly the same as the editor div from the last tutorial except for the save button. When you click this button it runs the save file that we will make later and shall be run by the ajax.
So this is the full edit.php script. Remember you don't have to include any files or have or html, head or body tags as they're in the index.php.
Edit.php
$query=mysql_query("select * from content where id='".mysql_real_escape_string($_REQUEST['edit'])."'");
$row=mysql_fetch_assoc($query);
?>
Then finally we have the stylesheet for both the index and edit files.
Stylesheet.css
body {
font-size:100%;
font-family:Arial;
}
* {
margin:0;
padding:0;
}
form {
margin-bottom:2%;
}
.container {
width:1000px;
margin:0 auto;
}
.content {
padding:2%;
width:96%;
}
#controlpanel input{
padding:0 1%;
}
.formrow {
width:30%;
clear:both;
}
.formrow label {
width:50%;
font-weight:bold;
}
.formrow input {
width:50%;
float:right;
}
#submit {
padding:0 1%;
}
#toolbar {
width:100%;
padding:1%;
background:#666666;
text-align:center;
}
#toolbar input {
padding:1%;
}
#save {
padding:1%;
margin-left:100px;
}
a
This stylesheet is pretty standard and it mainly just pads out the buttons and so forth. So that's it for this tutorial. In the next tutorial I shall go over the javaScript files for both the toolbar and the editor. For more tips on how to be a better web designer visit Fairway Web Design.
In my last tutorial I set up the html for the main page of the content management system and also the mysql functions to add and delete content from it. To view this article visit Fairway Web Design. In this tutorial I am going to create the include that allows you to edit the content and also make the style sheet.
The first thing we need to do is get the information from the database when a row is requested in the index.
In the last article we used a button to post the id of the given row so that we can get the appropriate information.
$query=mysql_query("select * from content where id='".mysql_real_escape_string($_REQUEST['edit'])."'");
$row=mysql_fetch_assoc($query);
?>
You don't need to connect to the database with this as it will replace the content in the index page so it will already use all of the scripts that are in that page. Next we need to set up where the text will load. I'll write all the code and then explain it.
Page Name
Content Name
The paragraphs that aren't content editable are just labels for the sections that we will edit. Then the h1 has the id that the ajax will use to submit the data with in the h1. It is also made content editable so that you can edit what is within by just clicking on the header and you can change the text within. The content paragraph is set up the same as the paragraph. Finally for the edit file we have the toolbar div.
This is almost exactly the same as the editor div from the last tutorial except for the save button. When you click this button it runs the save file that we will make later and shall be run by the ajax.
So this is the full edit.php script. Remember you don't have to include any files or have or html, head or body tags as they're in the index.php.
Edit.php
$query=mysql_query("select * from content where id='".mysql_real_escape_string($_REQUEST['edit'])."'");
$row=mysql_fetch_assoc($query);
?>
Then finally we have the stylesheet for both the index and edit files.
Stylesheet.css
body {
font-size:100%;
font-family:Arial;
}
* {
margin:0;
padding:0;
}
form {
margin-bottom:2%;
}
.container {
width:1000px;
margin:0 auto;
}
.content {
padding:2%;
width:96%;
}
#controlpanel input{
padding:0 1%;
}
.formrow {
width:30%;
clear:both;
}
.formrow label {
width:50%;
font-weight:bold;
}
.formrow input {
width:50%;
float:right;
}
#submit {
padding:0 1%;
}
#toolbar {
width:100%;
padding:1%;
background:#666666;
text-align:center;
}
#toolbar input {
padding:1%;
}
#save {
padding:1%;
margin-left:100px;
}
a
This stylesheet is pretty standard and it mainly just pads out the buttons and so forth. So that's it for this tutorial. In the next tutorial I shall go over the javaScript files for both the toolbar and the editor. For more tips on how to be a better web designer visit Fairway Web Design.
Posted in: Web Design
0 comments:
Post a Comment