• In this unit you will take your Intro to Web Design website, and turn it into the start of a powerful web app, complete with login functionality.
• You will learn some PHP (which is a programming language), but this IS NOT a PHP tutorial (e.g. you'll have to solve problems yourself).
• Good luck!

• In Intro to Web Design you could run your website in any folder on your computer, as it was a simple site.
• For this unit you will need the following servers, to share your web app:
• Apache - a web server, for processing PHP and sharing web pages
• MySQL - a database server for storing information and allowing controlled access
• There are many ways to install these servers, and it will depend on what type of computer you are using
• To install the stack of software necessary for web development and website deployment, refer to this document.

• Now that your stack is up and running, you should move your Web Design 101 files into /Applicatications/MAMP/htdocs (Mac)
• If everything has worked, you can click on this link to view your site: http://localhost/

• In order to make your web site homepage smarter, you'll need to change it from HTML to PHP.
• Locate your index.html file and rename it to index.php
• Now add the first 5 lines shown below to the top of your index.php file:

• Think about the lines, you just added, and discuss their purpose with your teacher.
• Next, add lines 27 to 65 after your home div in index.php:

• Reload your website in your browser and see if these new changes have had an impact. What's new on your site?

• PHP is an exacting language: errors will stop pages from working, often showing a blank screen on your computer.
• If this happens, check your error logs at /Applications/MAMP/logs/php_error.log to see what has gone wrong.
• Double clicking on this file on a Mac will load it in a log viewer called Console, which looks like this:

• • The latest errors will appear at the bottom of the file.
• On a Chromebook, you will need to use the Linux terminal to view your errors. Permissions prevent you from viewing the error log directly, but there are ways around this
  • Open your terminal and run the following command
    • sudo tail /var/log/apache2/error.log
  • sudo allows you to act as the root administrator, while tail will show you the last ten lines of errors

• Your index page might look a little funny, with the new login form hanging out on the left side of the page.
• Use the following CSS to shift it to the right side of the page:

• If everything has worked properly, your index page should now look like this:

• A database can store and organise complex information.
• There are lots of different types of databases, but in this unit we use MySQL (Mac) or MariaDB (Chromebook).

Mac

• With MAMP installed and running, you can now do the following to connect to your database server:
• Download and install Sequel Ace, which is a database client
• Use Sequel Ace to connect to your database server using the following parameters:

• Import this file into your database: Example database SQL
• You should now be able to look inside your database and see a table called person, with one entry:

Chromebook

• With LAMP up and running, you can now access your database server
  
  • You will need to use the MariaDB command line interface to create your database
  • Access this interface by going to the Linux command line and typing in sudo mysql -p
  • The password should be empty, so just hit Enter when prompted
  • Use the CREATE DATABASE command to create a new database - name it webApp, and remember to put a semicolon at the end of your command
  • Run the quit command in mysql to return to the terminal command prompt.

• Import this file into your database: Example database SQL
  • Put the file in the Linux Files folder so that it is accessible by your Linux virtual machine
  • Remember to unzip the file!
  • Use the following command to import the database file
  • sudo mysql -p your_database_name < webApp_2019-03-12.sql

• Finally, go to your mysql command line interface again and enter the following two commands, which will change the password of your root user to root (which is not very secure, but OK for development work:
  
  • use mysql;
  • ALTER USER 'root'@'localhost' IDENTIFIED BY 'root';

• The next step is to connect your web app to the database, to allow user validation (e.g. logging in).
• Create a new file called login.php, and enter the following code into it:

• Now, if go to your website and log in using the username and password seen in your person table in your database.
• How can you add another user to your database, for yourself?

• As well as logging in, logging out is also useful.
• Create a new page called logout.php, which should contain the following:

• index.php will offer logged in users a link to this script, which will return to index.php when it is done.

• All having gone to plan, your website has now become a web app, with login and out features.
• You might want to spend some time adding some other functionality, but you've already come a long way.
• Take a screenshot video of yourself using your login and out functionality, and also showing off some of the code from the site.
• Submit this video as evidence of your learning.

• If you wanted to deploy a web app such as this, you'd need a public web server: don't use MAMP for this purpose!