5.2. Creating the Entry Input Form
Storing entries in your database requires that you allow site administrators to enter data via a web form. Before you can do this, you need to identify which fields the form must include.
Two of your fields are populated automatically when an entry is created: the id field will generate an automatically incremented number to identify the entry, and the created field automatically stores the timestamp for the entry's creation date. All you need to include are fields to enter the title and entry fields.
Your title field has a maximum length of 150 characters, so you use an input tag with a maxlength attribute for this. The entry field can be as long as you want it to, so create a textarea tag.
In Eclipse, create a new file in the simple_blog project called admin.php; this file should end up saved in the xampp folder at /xampp/htdocs/simple_blog/admin.php).
In the new file, add the following HTML:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<title> Simple Blog </title>
</head>
<body>
<h1> Simple Blog Application </h1>
<form method="post" action="inc/update.inc.php">
<fieldset>
<legend>New Entry Submission</legend>
<label>Title
<input type="text" name="title" maxlength="150" />
</label>
<label>Entry
<textarea name="entry" cols="45" rows="10"></textarea>
</label>
<input type="submit" name="submit" value="Save Entry" />
<input type="submit" name="submit" value="Cancel" />
</fieldset>
</form>
</body>
</html>You can view the form you've created by navigating to http://localhost/simple_blog/admin.php in your browser (see Figure 5-5).
Figure 5.5. The entry creation form
This is not a book about Cascading Style Sheets (CSS), a language used to describe the presentation of HTML- and XML-based documents, but you'll take advantage of CSS to make your form easy-to-use. Begin by creating a new folder in the simple_blog project called css. Next, create a file called default.css in the css folder (full path: /xampp/htdocs/simple_blog/css/default.css), then add the following style information to your new file:
h1 {
width:380px;
margin:0 auto 20px;
padding:0;
font-family:helvetica, sans-serif;
}
ul#menu {
width:350px;
margin:0 auto;
padding:0;
list-style:none;
}
ul#menu > li {
display:inline;
}
ul#menu > li > a {
padding:6px;
color:#FFF;
background:#333;
font-family:helvetica, sans-serif;
text-decoration:none;
}#control_panel, #entries, fieldset {
width:350px;
margin:0 auto;
padding:10px;
font-family:helvetica, sans-serif;
}
#control_panel {
width:350px;
margin:20px auto 0;
padding:4px;
font-size:80%;
text-align:center;
background:#DDD;
border-top:1px dotted #000;
border-bottom:1px dotted #000;
}
input, textarea {
font-size:95%;
font-family:helvetica, sans-serif;
display:block;
width:340px;
margin:0 auto 10px;
padding:4px;
border:1px solid #333;
}
input[type=submit] {
display:inline;
width:auto;
}
input[type=hidden] {
display:none;
}
.backlink {
border:0;
text-align:right;
}
#comment-form > fieldset {
width:330px;
border:1px solid #000;
}
#comment-form input[type=text],
#comment-form textarea {
width:320px;
}.error {
color:#F00;
text-align:center;
font-weight:bold;
margin:5px 0 15px;
}
.comment {
padding:0 0 10px;
}
.comment > span,
.comment > .admin {
display:block;
font-size:80%;
margin:0 0 10px;
padding:4px;
text-align:right;
background:#DDD;
border-bottom:1px dotted #000;
}
.comment > .admin {
background:transparent;
border:0;
}
.comment > span > strong {
float:left;
}I won't go into the specifics of how this works, but this code will provide styling information for all the components I'll be building in this book. To apply these styles to your form, you need to link to the CSS file in the head section of admin.php. Do this by adding the code highlighted in bold to admin.php:
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<link rel="stylesheet" href="/css/default.css" type="text/css" />
<title> Simple Blog </title>
</head>Once you save the linked stylesheet in admin.php, you can reload admin.php to see the cleaned up form (see Figure 5-6).
NOTE
You can learn more about CSS by checking out the book, Beginning CSS Web Development: From Novice to Professional, by Simon Collison (Apress, 2006).
Figure 5.6. The input-manager form styled with CSS
