COAP:COAP-3110/week1
Week 1 learning goals
- Understand overall course learning outcomes: create an interactive web site, understand server-side scripting with PHP and database principles, install and configure a web portal that includes interactive features.
- Understand web server principles (e.g. a simple client + server/scripting engine + database architecture)
- Be able to use a development web server: start/stop, basic configuration, file structure (adding HTML and PHP files in the right places)
- Modify a simple PHP program that deals with multiple-choice questions.
Monday
Discussion and negotiation of the syllabus
- It is available in the worldclassroom
Short talk
- Slides used for the introductory talk (need some updating ...)
Play time
Wednesday (part 1)
The XAMPP development server
- https://www.apachefriends.org/index.html (XAMPP home and download)
- Other alternatives exist, e.g. Wamp server
Quote from the XAMPP home page: XAMPP is the most popular PHP development environment. XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use. XAMPP is available for Linux/Mac/Win and there is a portable version.
To launch XAMPP from the memory stick, run the XAMPP control panel:
- Make sure to exit from Skype or other applications that use the Web port
- Click on
\xampp\xampp-control.exe - Then you can start the servers you need, e.g. The Apache web server
Apache Web server configuration principles
You can see part of the configuration files by clicking on config buttons in the XAMPP control Panel
Root web file directory:
DocumentRoot "/xampp/htdocs"
Default index files are resources that are shown when a user only requests a directory. First item (index.php) is most important.
DirectoryIndex index.php index.pl index.cgi index.asp index.shtml index.html index.htm \
default.php default.pl default.cgi default.asp default.shtml default.html default.htm \
home.php home.pl home.cgi home.asp home.shtml home.html home.htm
- E.g. in our case: http://localhost/ will "call" http://localhost/index.php
Hands on (change server root file)
Change the web server root file to something that is under your control and will allow to find things you create.
- Create an html file called index.html and put it in the right place, i.e. in the server root directory
- Within that file create a link to file index2.php
- Rename file file index.php to index2.php
HTML5 example code that you could cut/paste and complete (!!)
<!DOCTYPE html>
<html>
<head>
<title>HTML5 page</title>
</head>
<body>
My stuff:
<ul>
<li>.... soon
</ul>
Original XAMPP stuff:
<ul>
<li><a href="">index2.php</a> (Original PHP file)
</ul>
</body>
</html>
Wednesday (part II)
A first glance at PHP
- PHP uses a syntax that is similar to C or JavaScript
- Variables start with a $
- The
echo "....";statement will produce output that is shown to the user.- You can concatenate elements like this:
echo "here is a value: " . $value . ". Nice !";
- You can concatenate elements like this:
- Please read an introductory chapter to PHP for Monday week 2 or do a little tutorial on the web (see the resources below and in the worldclassrroom)
Understand what is going on
If you want to know what kind of information PHP will receive insert the following statement in your *.php file:
phpinfo();
Hands on - HTML forms + PHP (hw1 preparation)
A copy of these files sit in the \xampp\htdocs\quiz directory on your memory stick
Please, make chances to both files. Add at least an extra question to the HTML and then change the PHP file.
Also experiment adding phpinfo(); to the PHP file. Look at the information (we will do this in class if time permits).
File quiz-form.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>a simple quiz with PHP (25-Mar-1999, revised Aug 2016)</title>
</head>
<body>
<h1>A simple quiz with PHP</h1>
This page and the associated quiz-form-compute.php file demonstrate how to process a simple quiz with PHP. <p>
Please fill in the following form: <p>
<hr>
<form action="quiz-form-compute.php" method="post">
How well do you master HTML ?
<input type="radio" name="choice" value="1" checked>a little bit
<input type="radio" name="choice" value="2">fairly well
<input type="radio" name="choice" value="3">well
<input type="radio" name="choice" value="4">I know most HTML5 modules by heart
<br>
How well do you master CSS ?
<input type="radio" name="choice2" value="1" checked>a little
<input type="radio" name="choice2" value="2">average
<input type="radio" name="choice2" value="3">very well
<input type="radio" name="choice2" value="4">I could teach avanced CSS programming
<p>
<input type="submit" value="See the result">
</form>
<hr>
See the <A HREF="./">directory</A>
<hr>
<address>
<a name="Signature"
href="http://tecfa.unige.ch/tecfa-people/schneider.html">D.K.S.</a>
</address>
</body>
</html>
File quiz-form-compute.php
<?php
// maximum level of debugging messages, not for production
error_reporting(E_ALL);
// Get values from the form
$choice = $_POST['choice'];
$choice2 = $_POST['choice2'];
// Compute score
$score = $choice + $choice2;
// Compute message as function of result
echo "<h3>Your score is " . $score . "</h3>";
if ($score < 3) {
echo "<p>You are a novice</p>";
} elseif ($score < 5) {
echo "<p>You skill level is journey man </p>";
} else {
echo "<p>Maybe you are an expert</p>";
}
echo '<hr> Go <a href="quiz-form.html"> back </a>to the form.'
?>
All in one file solution
- See file
quiz-form-php-in-one-page.phpin the same "quiz" directory
Planning (notes)
(inventory of student skills at the beginning of the class)
web servers
- server configuration: 2
- Installing and configuration LAMP portals: 2
- Extensions: 3
- hosting: 5
PHP/MySQL
- PHP: 1
- SQL: 1
- HTML Forms: 5
Skins
- CSS: 5
- Skins: 1
Web Services
- REST: 0
Development frameworks
- development frameworks: 0
Homework/project 1
Please create an html/PHP application that delivers an interesting quiz or auto-evaluation test (at least four questions) and provides a nice feedback to the user.
Submit to the world classroom (hw1)
- All files that are needed to run this "application" (php, html, css ...)
- a small report that includes (1) the specification (i.e. purpose) of the application, (2) Screen shots of the quiz and one result page, (3) a very short implementation notice. The report should be delivered in a well known format (E.g. Html, PDF, Word)
Due date/time
- Wednesday, week 2, before start of class
Evaluation criteria: (can be discussed in class)
- Usefulness (design quality of the test or quiz, quality of the feedback)
- Usable presentation (does the user understand what it's about and what he/she has to do?)
- Correct HTML5 / no PHP errors
- No logic mistakes
- On time (up to 2 days late = 10% off, more than 2 days = 20% off)
Quality counts more than quantity !
Additional resources
Online PHP manual
Online PHP tutorial
- CodeAcademy PHP tutorial Nice hands-on online tutorial
Selected PHP textbook chapters
- See the worldclassroom
XAMPP
- FAQ for Windows (in case of trouble)