Tutorials

Part 2: Post to your DB

This is part 2 of a series on how to build your own blog. If you missed the last entry, you can find it here.

This instalment is going to teach you to write an HTML form which is processed by a small PHP script that submits to your database. This will allow you to write and save your blog entries.

One of the nifty things about PHP is that it integrates well with HTML. On any given PHP file anything that is inside the <? and ?> is read as PHP, and anything outside it is read as regular HTML. You can even echo straight HTML in your PHP script. Today we’re going to write a simple HTML form and a PHP script to process it, all in the same file.

First let’s review what our table looks like. We have four columns: id, timestamp, title, and entry. The id column is going to be automatically set as the next available id number when we submit, so we need to concentrate on filling those other three columns.

We’re going to have an editable date for our entries, but we want it to fill in automatically with the current date. We could do this by getting the current timestamp, but then we’d have to divide it out into time, month, day, and year anyway for our dropdown menus. So let’s just get those things on their own using the date() function:

<?php
$current_month = date("F");
$current_date = date("d");
$current_year = date("Y");
$current_time = date("H:i");
?>

We’ll use these to automatically populate our form fields so that if you don’t change the date, the current date and time will be used to get your timestamp.

Now we need to open our form. We’re going to have it post to $_SERVER['PHP_SELF'], a preset variable in PHP that returns the page we are already on. To use this variable, we’ll need to open PHP around it.

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

Now let’s make the form fields for our date. First a drop-down menu for the month; notice that the first option is our $current_month variable:

<select name="month" id="month">
<option value="<?php echo $current_month; ?>"><?php echo $current_month; ?></option>
<option value="January">January</option>

<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>

<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>

<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>

For the date we’ll just have a small text box instead of a really long drop-down menu. Still, notice that our $current_date variable is automatically filled in:

<input type="text" name="date" id="date" size="2" value="<?php echo $current_date; ?>" />

I use a drop-down for the year, but you could do a text box if you want:

<select name="year" "year">
<option value="<?php echo $current_year; ?>"><? echo $current_year; ?></option>
<option value="2004">2004</option>

<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>

<option value="2009">2009</option>
<option value="2010">2010</option>
</select>

And a text field for the time:

<input type="text" name="time" id="time" size="5" value="<?php echo $current_time; ?<" />

Later all of these variables will become our timestamp. But now let’s move on to the title field, which should look like this:

<input type="text" name="title" id="title" size="40" />

And our entry text box:

<textarea cols="80" rows="20" name="entry" id="entry"></textarea>

Now we need a submit button:

<input type="submit" name="submit" id="submit" value="Submit" />

And close the form:

</form>

The whole code might look something like this, depending on whether or not you’ve got extra fields/formatting in there (I’ve labelled all my fields so I know what they are - e.g. date, time, title etc.):

<?php
$current_month = date("F");
$current_date = date("d");
$current_year = date("Y");
$current_time = date("H:i");
?>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<p><strong><label for="month">Date (month, day, year):</label></strong> 

<select name="month" id="month">

<option value="<?php echo $current_month; ?>"><?php echo $current_month; ?></option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>

<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>

<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>

<option value="December">December</option>
</select>

<input type="text" name="date" id="date" size="2" value="<?php echo $current_date; ?>" />

<select name="year" id="year">
<option value="<?php echo $current_year; ?>"><?php echo $current_year; ?></option>
<option value="2004">2004</option>

<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>

<option value="2009">2009</option>
<option value="2010">2010</option>
</select>

<strong><label for="time">Time:</label></strong> <input type="text" name="time" id="time" size="5" value="<?php echo $current_time; ?>" /></p>

<p><strong><label for="title">Title:</label></strong> <input type="text" name="title" name="title" size="40" /></p>

<p><textarea cols="80" rows="20" name="entry" id="entry"></textarea></p>

<p><input type="submit" name="submit" id="submit" value="Submit"></p>

</form>

This is getting kind of long, so I’ll put the PHP code that processes the form in my next post.

Comments

Error Comments are closed for this entry.