ckportfolio.com - PHP and MySQL: PHP and Guestbook

PHP and MySQL: PHP and Guestbook

PHP

There is a gap between databases and what we know about front-end: there is no way for our HTML pages to directly connect to the database. This requires a server-side language, and PHP is one of the most popular choices --- mainly because PHP is more or less an upgraded version of HTML in practicality.

The Exercise Materials archive contains three files: detail.php, home.php and upload.php. They will come in handy.

Setup

In order to proceed with the exercise, you must be fluent in the following:

  • Using Cyberduck-Sublime Text integration (Week 3)
  • Bootstrap implementation (Week 5)

Create your new folder in the ocad.ckprototype.com server, and generate the following files:

  • index.php (homepage)
  • detail.php (single article view)
  • post.php (article creation form)
  • upload.php (script for posting to database)
  • footer.php (footer section shared by index, detail, and post)
  • header.php (header section shared by index, detail, and post)

Open up index.php, and simply set up your page based on starter template offered by Bootstrap (http://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template):

Now, go ahead and copy the contents from home.php found in the Exercise Materials archive:

The result is an unsightly one, as the necessary styling is missing, along with extra components that we do not need:

Refer to the Bootstrap documentation (https://getbootstrap.com/docs/4.4/components/alerts/) and clean up the code. We will use the <form> element in another file: post.php.

Now we can be happy with the result, complete with text flowing in from the database:

Note on Syntax

  • Notice that PHP, although very different in syntax, can coexist with HTML code --- as long as it is wrapped in its unique tag: <? and ?>.
  • As you can see, PHP uses a query-based command to communicate with SQL database. That explains "Query Language" in the name SQL.

Screencast Recording

https://drive.google.com/open?id=1ASagFmlZJVTwkRj4o0yul4bmU2wODZWX

Fin