Activity: Get started with database interfacing

(no submission)
Purpose:

You may work individually or with your project team member(s). In this activity, you will be exposed to simple web programming. This activity provides an overview of database programming, a very brief introduction to HTML, CSS, and PHP; as well as web deployment. Please note: our focus is on the database part, not the web programming part.

The intention of this activity to help you get started with your project (if you plan to develop a web app using PHP). If you are already familiar with HTML, CSS, and PHP, feel free to use this activity to refresh your memory or simply do it for fun. If you do not plan to develop a PHP project, you may do this activity using any language of your choice.

Part 1: Get started with HTML and PHP

  1. Understand how database programming works in general.
  2. Connect and upload files to the web server.
  3. Create a simple HTML page (let's name it index.html) and deploy it on the web server.
    • Feel free to use bootstrap to style your page.
    • You may create an HTML file from strach or use the provided template.
  4. In your index.html, add a link to your simpleform.php
  5. Create a simple form (let's name it simpleform.php) and deploy it on the web server
    • Add code to create input boxes for name, major, year. You may create the form inputs from scratch or use the example code below. 
      <form name="mainForm">   
  <div class="form-group">
    Your name:
    <input type="text" class="form-control" name="name" required />        
  </div>  
</form>
  6. In your simpleform.php, modify the form such that the form data are submitted to form-processing.php. Specify how the form data will be packaged and transmitted to form-processing.php, by setting the method attribute to post. 
    <form name="mainForm" action="form-processing.php" method="post">

    For more experience, try changing the method attribute to get and observe the URL (in the browser's address bar).

  7. Create a PHP program, named form-processing.php, to process the form submission.
    • Retrieve the form data.
      • If the method attribute (from previous step) is set to post, all form data are stored in a PHP standard array named $_POST.
      • If the method attribute (from previous step) is set to get, all form data are stored in a PHP standard array named $_GET.
    • Write PHP code to display the form data in some format; for example, 
      Hi <?php echo $_POST['name']; ?> 
You entered <br/> 
<?php
echo "Major:" . $_POST['major'] . " and Year: " . $_POST['year'];   
?>
  8. Let's experience with "sticky form" and function in PHP
    • In your simpleform.php, modify the form such that the form data are submitted to simpleform.php 
      <form name="mainForm" action="simpleform.php" method="post">
    • Create a function named greeting that takes the name entered in the form. The function then returns a greeting message including the name entered.
    • Add code to call the greeting function. Use the pass-by-value concept to pass the value of name retrieved from the form to the function.
    • Add code to display the result of the greeting function.

Part 2: Prepare your database

  1. Create a database (you may use your existing database if you'd prefer)
  2. In the database, create a table (let's name it friends) containing at least 3 attributes: name, major, and year. 
    CREATE TABLE friends (
   name varchar(30) NOT NULL,
   major varchar(10) NOT NULL,
   year int NOT NULL, 
   PRIMARY KEY (name) );
    Alternatively, you may create a table consisting of any attributes of your choice.

Part 3: Connect to your database

  1. Create a PHP program that serves as a utility program to connect to the database (let's name it connectdb.php). You may create a the program from scratch or use the provided connectdb.php (text version).
  2. Include code to connect to the database in your simpleform.php
  3. In your simpleform.php, write code to insert a friend's information, retrieve data from the friends table and display them on the screen.
    1. create a function (named addFriend) that takes 3 parameters: name, major, and year. The function inserts the form data entry (name, major, year) into a friends table in the database.
    2. Add code to call the addFriend function. Use the pass-by-value concept to pass the values of name, major, and year retrieved from the form to the function.

      To test, enter a friend's information and click the add button. Inspect the friends table in the database.

    3. Create another function (named getAllFriends) that returns an array of all rows of data from the friends table.
    4. Add code to call the getAllFriends function and save the returning value in a variable (for example, friends).
    5. Add code to display the result of the getAllFriends() function.

You may modify your interface the way you like. Get creative. Feel free to add additional elements you feel should be included and have fun!

To host your web resources, use of the following options or use any web server of your choice

To connect your PHP to the database

Additional resource: Basic web deployment (borrowed from CS 4640)