A very simple php website and contact form tutorial.

Simple-PHP-Website.md

Simple PHP Website and Contact Form

This is purely for example and educational purposes.

The resulting contact form you will create with this example is extremely insecure. Do not use it on a live website.

Setup Environment

1. Create website directory on Desktop
2. Open terminal and test PHP php --version
3. Browse to the new website folder cd ~/Desktop/website
4. Start the php server php -S localhost:9999
5. Create the first php file echo "Hello" >> index.php
6. Open your browser to http://localhost:9999

Create our first webpage using Bootstrap

1. Get the bootstrap Basic Template and paste it into index.php
2. Delete the local references to css and js, and replace with Bootstrap served from CDN. Make sure jQuery comes before Bootstrap's js file.
3. Get the Example Navbar and paste it above the <h1> tag in index.php

Cleanup our first page

1. Delete a significant chunk of the .navbar. Keep a few links and the search box.
2. Create a .container>.row>.col-sm-8+.col-sm-4
3. Move our <h1> tag to the .col-sm-8 div
4. Add <h3>My Sidebar</h3> to the .col-sm-4 div
5. Create a new .row
6. Place <h3>My Footer</h3> into the new .row

Adding more pages, and creating a problem to solve

1. Copy and page our index.php to a new file named about.php, and a new file named contact.php
2. Change the <h1> for each page to reflect its purpose (ie About Us, Contact Me.
3. Identify the Repeated HTML Problem. To fix the menu across all of our pages, we would have to edit each one individually.
4. Identify areas of our page that are repeatable. These are areas we can abstract.

Stepping into PHP

1. Abstract the header, sidebar, and footer into template files.
2. Include the new files in each content page. include( 'header.php' ); etc
3. Fix the Repeated HTML Problem

Summary

We've significantly simplified the creation and maintenance of a website as opposed to flat HTML.

Remaining problems

1. Identify the Metadata Problem - Current page has no context (active menu, page title).
2. Identify the File Organization Problem - Our file paths are hard-coded into every page.

Creating a simple contact form

WARNING - Do not use this code on a live site. This is only for example purposes and is very insecure.*

URLs & GET Requests

GET requests are a means of accepting user input that is repeatable, thus sharable, and ultimately visible to the browser's history.

1. Ony dynamic portion of URLs is the Query. Proceeded by a question mark ?, the query can contain many key-value pairs, separated by ampersands &.
2. Open contact.php and add <pre><?php print_r( $_GET ); ?></pre> to the .col-sm-8 column.
3. Visit these example URLs
   • Example: http://localhost:9999/contact.php?some_key=some_value&another_key=another_value Represented in PHP:

   Array(
       [some_key] => some_value
       [another_key] => another_value
   )
   

   • Example: http://localhost:9999/contact.php?my_name=jonathan&my_search=red+birds Represented in PHP:

   Array(
     [my_name] => jonathan
     [my_search] => red birds
   )
   

4. Visit your terminal and notice how the the URL shows the values of GET requests.

Creating our first form

1. Add the following HTML to the contact.php file within the main column.

<form action="" method="">
</form>

1. action Attribute tells the form what file it should submit to. By default (if no value is given), it submits to the current page.
2. method Attribute tells the from what type of http request the form will use to submit the data to the server. By default (if no value is given), the method is method="get".
3. Knowing about the defaults, we can tell that this form will submit its values to the contact.php page, using the get request method.
4. There for, the above html is equivalent to the following html.

<form action="contact.php" method="get">
</form>

1. Add a button and input field to the form so that we can start collecting user submitted data.

<form action="contact.php" method="get">
    Name: <input name="my_name" type="text">
    <button type="submit">Submit</button>
</form>

1. Now when a user visits the contact.php page, they can submit a form that sends the data back to the PHP server.
2. Add another field where the user can type a bigger message.

<form action="contact.php" method="get">
    Name: <input name="my_name" type="text">
    Message: <textarea name="my_message"></textarea>
    <button type="submit">Submit</button>
</form>

Make contact.php send an email.

1. Add the following code above the header in contact.php

if ( !empty( $_GET ) ) {
    mail( 'your-real-email-address@example.com', 'Contact form submission from ' . $_GET['my_name'], $_GET['my_message'] );
}

1. It is not a coincidence that the form method is "get", and the values are stored within the $_GET PHP system variable
2. Identify the problem with using a GET request with this type of user data. Repeatable, shareable, and browser histories all become liabilities in this case.

Changing the form to send a POST request

POST requests are another way to accept user submitted data, without passing the values within the URL. They are not repeatable, shareable, nor can their values be tracked by the browser history.

1. Edit the form's method attribute to the value of post: <form action="contact.php" method="post">
2. Change our debugging PHP to show the values of the $_POST system variable. <?php print_r( $_POST ); ?>
3. Revisit the page, and submit the form with new data. Notice that the data is available to PHP with the $_POST variable, and no longer in the URL.
4. Adjust our code that sends the email to use the $_POST variable instead of $_GET

if ( !empty( $_POST ) ) {
    mail( 'your-real-email-address@example.com', 'Contact form submission from ' . $_POST['my_name'], $_POST['my_message'] );
}