Tutorials > Setting Up a Development Environment > Sample Website - Grocery List

7. Sample Website - Grocery List

• This article assumes you have completed the previous tutorials up to: Connecting PHP and MySQL
• Lets create a form for adding items. Add this code to the bottom of index.php
  
  

  <hr/>
  <h3>Create new item</h3>
  <form action='newitem.php' method='post'>
  	<label>Item name:</label>
  	<input type='text' name='item_name' />
  	<input type='submit' value='Add Item' />
  </form>

  
• This will add a form below the table. (W3Schools: HTML Forms and Input)
• If you click Add Item it will submit the form. Since we set the 'action' to newitem.php, that is where the form is submitting to. But it causes an error since the file has not been created yet.
• Create newitem.php and add this code to display the data sent by the form. Forms that are submitted using the POST method can be accessed via the $_POST variable.
  
  

  <pre>
  <?php var_dump($_POST); ?>
  </pre>

  
• This shows that $_POST is an array with 1 item "item_name". Now let's use this variable to create a mysql query
  
  

  <?php
  $query = "INSERT INTO groceries (item_name, in_cart) VALUES ('".$_POST['item_name']."', 0)";
  echo $query;
  ?>

  
• Now we've created the query that we're going to use. Lets add the code to connect to the database and use mysql_query() to actually run it. We'll wrap it in an if() statement to make sure it was successful and add a link to go back to the grocery list.
  
  

  <?php
  mysql_connect('localhost', 'root', 'password');
  mysql_select_db('test');
  $query = "INSERT INTO groceries (item_name, in_cart) VALUES ('".$_POST['item_name']."', 0)";
  if(mysql_query($query)) {
  	echo "Item '".$_POST['item_name']."' added to database.";
  } else {
  	echo "Problem adding item to database.";
  }
  ?>
  <br/>
  <a href='/'>Back to grocery list</a>

  
• Now if we go back to localhost and try adding 'Carrots' we should get this.
• Alright, so we can add items. Now let's create the ability to remove them. Using a form doesn't really make sense here. Instead we'll use a link. You can pass variables in a link using the '?' followed by 'variable_name=value'.
• We're going to use the file removeitem.php and the variable 'item_name'. So if we want to delete Carrots, the link would be 'removeitem.php?item_name=Carrots'.
• We can use the loop in the grocery list (index.php) to create these links. (Make sure you have the extra <th></th> in the first row as well.)
  
  

  <table border='1'>
  	<tr>
  		<th>Item Name</th>
  		<th>In Cart</th>
  		<th></th>
  	</tr>
  	<?php while($row = mysql_fetch_assoc($result)) { ?>
  	<tr>
  		<td><?php echo $row['item_name']; ?></td>
  		<td><?php echo ($row['in_cart'] == true)?"Yes":"No"; ?></td>
  		<td><a href='removeitem.php?item_name=<?php echo $row['item_name']; ?>'>Remove item</a></td>
  	</tr>
  	<?php } ?>
  </table>

  
• Now if you refresh localhost you will see the 'Remove item' links have been added.
• If you click the 'Remove item' link next to Carrots you will see it takes you to the url 'removeitem.php?item_name=Carrots' like we wanted.
• Now lets create removeitem.php and use the $_GET variable to create our DELETE query.
  
  

  <?php
  $query = "DELETE FROM groceries WHERE item_name = '".$_GET['item_name']."'";
  echo $query;
  ?>

  
• Now that we've got our query again, lets add the code for the database and a link back to grocery list like we did in additem.php.
  
  

  <?php
  mysql_connect('localhost', 'root', 'password');
  mysql_select_db('test');
  $query = "DELETE FROM groceries WHERE item_name = '".$_GET['item_name']."'";
  if(mysql_query($query)) {
  	echo "Item '".$_GET['item_name']."' removed from database.";
  } else {
  	echo "Problem removing item from database.";
  }
  ?>
  <br/>
  <a href='/'>Back to grocery list</a>

  

Return to Tutorials • Next Tutorial: Basic SQL Injection