COAP:COAP-3110/week1
Complete program TBA by Wednesday
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
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>
A first glance at PHP
Hands on - HTML forms + PHP
A copy of these files sit in the \xampp\htdocs\quiz directory on your memory stick
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
Project homework 1
Please create an html/PHP application that delivers an interesting quiz (at least four questions) and provides a nice feedback to the user.
Submit to the worldclass room (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 written in some well known format (E.g. html, PDF, Word)
Evaluation criteria:
- Usefulness (is the quiz well designed)
- Quality of the feedback
- Usable presentation
- Correct HTML5 / no PHP errors
- No logic mistakes
Additional resources
Online
- CodeAcademy PHP tutorial Nice hands-on online tutorial
- Official PHP manual
Selected textbook chapters
- See the worldclassroom