COAP:COAP-3110/week1: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 77: Line 77:


== A first glance at PHP ==
== A first glance at PHP ==
* PHP uses a syntax that is similar to C or JavaScript
* Variables start with a $
* The <code>echo "...."; </code> statement will produce output that is shown to the user.
** You can concatenate elements like this: <code>echo "here is a value: " . $value . ". Nice !";
* Please read an introductory chapter to PHP for Monday week 2.
=== 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:
:<code>phpinfo();</code>


=== Hands on - HTML forms + PHP ===
=== Hands on - HTML forms + PHP ===

Revision as of 01:29, 23 August 2016

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

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

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

  • 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 !";
  • Please read an introductory chapter to PHP for Monday week 2.

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

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.php in 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 (at least four questions) and provides a nice feedback to the user.

Submit to the worldclass room (hw1)

  1. All files that are needed to run this "application" (php, html, css ...)
  2. 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

Selected textbook chapters

  • See the worldclassroom
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3110/week1&oldid=60207"