PHP and JavaScript Cheat Sheet

Overview of our HTML, CSS, PHP, MySQL and JavaScript courses

We have been exploring the best way to teach young coders HTML, CSS, PHP, MySQL and JavaScript. To a seasoned coder, these tools are our bread and butter, but to someone just starting out, here are many new concepts to be learnt.

Our goal is to design a series of projects that teach how to use these tools to build websites, and web applications.

We have been experimenting with several projects on small groups of students. When our ideas are clear and have been classroom tested, we will turn them into a series of online lectures.

Here is a summary of where we are at:

    1. Build a static website with HTML & CSS:

      In this project, students build a simple multi page website using nothing but a simple text editor. Students come prepared with some sample assignments from school including an English essay (to learn formatting of plain text) and a science or humanities assignment (to learn formatting of tables, and diagrams).

      The project is developed using the student’s file system and a browser to display pages. At the end of the project, we learn how to FTP the pages to a webserver on the public Internet.

      This project uses the Club Engineer HTML Cheat Sheet and Club Engineer CSS Cheat Sheet as a guide.

    2. Code a game of Noughts-and-Crosses:

      A simple, trivial game you would think, but surprisingly complex once you start getting into the details.

      It’s not clear in my mind how best to teach this yet. We are experimenting with starting with a PHP system and extending into JavaScript, and starting with a JavaScript system and extending into PHP. The code fragments below show our ideas as they are being developed.

      Regardless of whether we end up starting with PHP or JavaScript, the development of features will go like this:

      * Noughts-and-Crosses: Two players on the one machine (Could be JavaScript or PHP);

      * Noughts and Crosses: Player vs Computer (Could be JavaScript or PHP);

      * Noughts and Crosses: Player vs Player on a remote machine (Will require a mix of both JavaScript and PHP).

 

  1. What next?

    Once we have coded Noughts-and-Crosses to a high level with player vs player and player vs computer options, students will have a good understanding of the basic web application building blocks.

    We will explore other ideas including:

    * Mastermind game;
    * Snake game;
    * Pong game;
    * Space Invaders game.


Some sample work-in-progress is below.

Noughts and Crosses

v1.05 Play | View Source

PHP Implementation of human-vs-human in a single browser instance.

Teaching sequence

  1. Empty HTML page with head, title and body blocks;
  2. HTML Table 3 x 3;
  3. Format the cell size with CSS (add style block);
  4. Add some Os and Xs to the table. Center text with CSS;
  5. Add an OnClick event to each cell that executes some JavaScript saying "Hello World" (add script block to page);
  6. Change the OnClick events to say the cell number;
  7. Change the HTML page to PHP with a single echo;
  8. Break the echo into functions writePageHeader(), writeStyle(), writeScript(), writeBody(), writePageFooter(), each containing a single echo;
  9. Change writeBody() to write the table with a for loop. Write empty table first, with the cell number in the cell, then change to write the OnClick event;
  10. Write a test stub of PHP to demonstrate a GET param. Hard wire something in the URL, display it in the page;
  11. Write a test stub of PHP to demonstrate a POST param using a TEXT field. Single form & text field with a submit button, write the content of the field to the page;
  12. Change the POST demo to use a form with a hiden field that acts as a counter. Display the nubmer of times the user clicked the submit button;
  13. Change the POST demo so instead of a submit button, there is an a tag that executes submit;
  14. Change the noughts and crosses PHP file to write the form with a hidden field for cell. Change the onClick() so it passes the cell number to the server, and returns a message on the screen "You clicked cell: X";
  15. Discuss the concept of game state, and how it will be held in a string of 9 char. Add a var for $gameState and hard wire it to a given sequence of Os, Xs and Spacers. Pass $gameState to the code that draws the grid and put the correct character in the corret cell;
  16. Initialise $gameState to replicate(" ", 9), grab the CellClicked index, insert a "X" into $gameState and display the grid;
  17. Pass $gameState back to the page, then from the page to the server to keep track of compounding clicks;
  18. Add $whosMove and toggle it with each click / post. Pass $whosMove to keep track. Display $whosMove next on the screen;
  19. Do not allow a user to click() on a cell that is already occupied;
  20. Add scanForWinner(). If winner detected, hilight the winning cells. This requires a list of winning cells to be passed around using the same data structure as $gameState;
  21. Turn off OnClick if a winner is detected;
  22. Add "Start game again" link;
  23. Center the game grid on the screen;
  24. Tidy the grid borders;
  25. Change the mouse cursor to 'hand' when mouse over available cells;
  26. Add some page header (name of the game) and footer ((c) authour, etc);
  27. Deploy to student's own webiste and test.

v1.06 Play | View Source

Peter's first attempt at playing the computer. Computer's move is to choose a random, empty square.

v1.07 Play | View Source

Improving the computer's logic to block moves, and scan for possible wins.

v1.09 Play | View Source

Pure JavaScript implementation of human-vs-human in a single browser instance.

Drawing on the canvas Test | View Source

Some fragments of JavaScript code that experiment with ways to draw on the HTML5 canvas.

Two way chat Test | View Source

to be used as the basis of multi player noughts-and-crosses.

Toggle menu