COAP:COAP-3110/week1: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
Complete program TBA by Wednesday
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3110</categorytree>
[[Category: COAP 3110]]
== 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 ==
== Monday ==
Line 12: Line 19:
* http://www.opensourcecms.com/
* http://www.opensourcecms.com/


== Wednesday ==
== Wednesday (part 1) ==


=== XAMPP ===
=== The XAMPP development server ===


* https://www.apachefriends.org/index.html
* https://www.apachefriends.org/index.html (XAMPP home and download)
* Other alternatives exist, e.g. [http://www.wampserver.com/en/ 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.
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.
Line 34: Line 42:
Default index files are resources that are shown when a user only requests a directory. First item (index.php) is most important.
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 \
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 \
        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
        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
* E.g. in our case: http://localhost/ will "call" http://localhost/index.php
Line 58: Line 66:
My stuff:
My stuff:
   <ul>
   <ul>
  <li>.... soon
    <li>.... soon
   </ul>
   </ul>
Original XAMPP stuff:
Original XAMPP stuff:
   <li><a href="">index2.php</a> (Original PHP file)
   <ul>
    <li><a href="">index2.php</a> (Original PHP file)
   </ul>
   </ul>
   </body>
   </body>
Line 67: Line 76:
</source>
</source>


== A first glance at PHP ==
== Wednesday (part II) ==
 
=== 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 !";</code>
* 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:
:<code>phpinfo();</code>
 
=== 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 <code>phpinfo();</code> to the PHP file. Look at the information (we will do this in class if time permits).
 
'''File quiz-form.html'''
<source lang="html5">
<!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>
</source>
 
'''File quiz-form-compute.php'''
<source lang="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.'
?>
</source>
 
=== All in one file solution ===


=== Hands on - HTML forms + PHP ===
* See file <code>quiz-form-php-in-one-page.php</code> in the same "quiz" directory


== Planning (notes) ==
== Planning (notes) ==


=== web servers ===
(inventory of student skills at the beginning of the class)
 
''' web servers '''


* server configuration: 2
* server configuration: 2
Line 80: Line 185:
* hosting: 5
* hosting: 5


=== PHP/MySQL ===
''' PHP/MySQL '''


* PHP: 1
* PHP: 1
Line 86: Line 191:
* HTML Forms: 5
* HTML Forms: 5


=== SKins ===
''' Skins '''


* CSS: 5
* CSS: 5
* Skins: 1
* Skins: 1


=== Web Services ===
''' Web Services '''


* REST: 0
* REST: 0


=== Development frameworks ===
''' Development frameworks '''


* development frameworks: 0
* 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'''
* [http://php.net/manual/en/ Official PHP manual]
'''Online PHP tutorial'''
* [https://www.codecademy.com/learn/php CodeAcademy PHP tutorial] Nice hands-on online tutorial
'''Selected PHP textbook chapters'''
* See the worldclassroom
'''XAMPP'''
* [https://www.apachefriends.org/faq_windows.html FAQ for Windows] (in case of trouble)

Latest revision as of 17:55, 27 September 2016

COAP 3110
COAP:COAP-3110
COAP:COAP-3110/term project
COAP:COAP-3110/week1
COAP:COAP-3110/week2
COAP:COAP-3110/week3
COAP:COAP-3110/week4
COAP:COAP-3110/week5
COAP:COAP-3110/week6
COAP:COAP-3110/week7
COAP:COAP-3110/week8

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

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>

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 !";
  • 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.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 or auto-evaluation test (at least four questions) and provides a nice feedback to the user.

Submit to the world classroom (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 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

Selected PHP textbook chapters

  • See the worldclassroom

XAMPP

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3110/week1&oldid=60605"