Serverside Webscripting [JLW384]

00.intro

It looks like you are viewing these slides on GitHub. Please clone the source repository in order to get the included PHP examples to work.

Slidedeck?!

(press the down key)

Wait? What? This is it?!

  • Yes, it's called a slide deck.
    • Built with HTML/CSS/JS
    • Powered by (a customized) Reveal.js
  • Navigation
    • Main navigation: left/right
    • Sub-slides: up/down (try it now!)
    • Touch Device users: Swiping supported!

Lost?

  • Compass (Bottom-Right)
  • Slide Number (Bottom-Right)
  • Progress Bar (Bottom)
  • Slide Overview (space)
  • Slides Navigator (Top-Left)

Code Examples

  • This slidedeck is filled with interactive examples
  • Syntax Highlighted + Editable
  • Numeric values can be adjusted with the ↑ & ↓ keys
  • Give it a try! 
    body {
	font-size: 1em;
	padding: 20px;
	color: lime;
}

Code Examples: CSS

  • Some CSS Snippets are linked to elements ... 
    color: red;
  • ... or to the current slide 
    font-size: 100%;
  • And oh, CSS Snippets don't need vendor prefixes 
    box-shadow: 0px 0px 10px #888;

Code Examples: JS

  • JavaScript blocks can even be run!
  • Use “Run” button, or hit CTRL+ENTER 
    // A comment
alert('OK GO!');
  • Note
    • JavaScript will be taught in the course “Clientside Webscripting”
    • If present, most JavaScript examples will use console.log() — Firebug (or the like) required!

Code Examples: HTML

  • HTML blocks can be rendered into an overlay
  • Use “Show in overlay” button, or hit CTRL+ENTER
  • Click the dark overlay background to close it
<h2>This is how you mark up an unordered list</h2>
<ul>
	<li>Coffee</li>
	<li>Tea</li>
	<li>Milk</li>
</ul>

Code Examples: HTML & PHP

  • HTML & PHP examples can be linked to a working example.
    • The example can be rendered into the overlay
    • The example can be linked into a new window/tab
  • Use “Show in script overlay” button, or hit CTRL+ENTER
  • Click the dark overlay background to close it
<?php
	echo 'Hello world! The time is now ' . date('Y-m-d H:i:s', time());
?>
Note: PHP code examples aren't editable Beware: PHP code examples don't run on GitHub!

Printing?

  • Don't
    • These are interactive slides
    • They will be updated regularly
    • You can't copy paste from paper
  • If you really want: you can
    • Only supported in Firefox and IE though

Webscripting 2

Back on track ...

Webscripting 2

  • Webscripting 2 = main course (OPO)
  • Contains only 1 sub-course
    • OLA Serverside/Advanced Webscripting [JLW384]

Instructors

Timing

  • One semester = 12 + 1 weeks
  • Lectures
    • Week 1-6 = Composer, PSR-0, and Silex
    • Week 7-12 = Various Topics
    • Somewhere in between = polyweek
  • Labs
    • Week 1-6 = Labs (2 slots)

Serverside Webscripting

To the flying machine!

Prerequisites (1)

  • HTML5 & CSS (OPO Webtechnieken)
    • HTML5
      • Correct use of elements
      • Proper syntax / validation
    • CSS
      • Text styling & Backgrounds
      • Box Model
      • Positioning with float/absolute/relative/fixed
      • “New” CSS3 features
    • Firebug (video)

Prerequisites (2)

  • Programming (OPO Programmeren 1)
    • Iterations (for, foreach) & Selections (if-else, switch)
    • Arrays
    • Functions
    • Classes, Constructors & Objects

Prerequisites (3)

  • Databases (OPO Gegevensbanken)
    • Structured Query Language
      • Basic CRUD Actions (INSERT, SELECT, UPDATE, DELETE)
      • Subqueries & Joins (left, right, inner)
      • Calculations (numbers, dates, etc.)
      • Optimization (EXPLAIN ...)
    • Basic Administration
      • Import & Export of an .sql dump
      • User Management

Prerequisites (3)

  • Webscripting 1
    • Serverside Webscripting
      • PHP Syntax
      • Client-Server
      • Forms
      • Data Persistency (Sessions, Cookies)
      • Classes
      • Templates (Twig)
      • Databases (PDO)
    • Clientside Webscripting
      • JavaScript Syntax
      • DOM & Events
      • jQuery Basics
      • Ajax

Course Subjects

  • PHP
    • PHP Libraries (Composer)
    • Silex Basics
    • Silex Providers
    • Silex Services
    • i18n
    • timezone aware apps
  • Various Topics
    • Git
    • URL Design
    • Optimization
    • Deployment
    • …

Technology

  • Technology
  • Wampserver (Win) or MAMP (Pro) (OS X) recommended
    • Follow these instructions to configure your install
    • Be sure to add the PHP binary to your system's PATH
      • Windows: Add C:\wamp\bin\php\version\ to PATH via Computer Settings
      • OS X: Paste this on the Terminal: echo 'export PATH=/Applications/MAMP/bin/php/phpversion/bin/:$PATH' >> ~/.bash_profile

Development

  • A PHP specific IDE
    • Zend Studio
    • PHPStorm
    • Netbeans
    • Aptana Studio
  • Your favorite text editor with these features (why?)
    • Syntax Highlighting
    • Autocompletion
    • PHPDoc Integration
    • On-the-fly syntax check

Course Materials, Assignments & Announcements

  • Everything distributed via Toledo
    • Check it regularly!
  • Course Materials
    • Available on GitHub
    • Feel free to fork and commit improvements/additions
  • Assignments
    • Several tasks grouped into one big assignment
    • To be completed by the end of the week (Sunday, 8PM)

Cloning the Course Materials

  • Download and install Git
    • Choose “Run Git from the Windows Command Prompt” during install
  • Clone the repository 
    cd c:\wamp\www
git clone https://github.com/bramus/ws2-sws-course-materials.git
  • Update the repository regularly to get the latest version 
    cd c:\wamp\www\ws2-sws-course-materials
git reset --hard
git pull
Note: This is an example on Windows using Wampserver

Evaluation

  • Permanent (60%)
    • 60%: Progress, Accuracy, Attitude, Programming Style, ...
  • Project (40%)
    • Launched after the Easter Holidays
    • !! Minimum score of 10/20 required to possibly pass this OLA !!

When stuck ...

Help yourself ...

  • Breathe in, breathe out, and THINK!
    • Error visible? Read it!
      • PHP will tell you what went wrong in which file and on what line
    • Correct URL? Correct variable? Does the variable contain anything?
      • Debugsession
      • use var_dump() and the like
    • TIP: Rubber Duck Debugging
  • Use the built-in help
    • Syntax Highlighting
    • Function autocompletion
    • Function documentation (PHPDoc)

... or get helped

  • Keep the 10 minute thinking rule in mind!
    You may only interrupt another co-worker to ask a question if you have sat on your own for ten minutes and tried to figure out the solution yourself. When asked, you must be able to demonstrate that you’ve made some effort.
  • Ask a fellow student and/or post a question on ICT-Blue 2.0
    • Mail a link to the topic on ICT-Blue to your instructor

Domestic Conventions & No-Goes

Domestic Conventions
(Huishoudelijk Reglement)

  • Do apply
  • Can be found on Toledo
  • Rules/Conventions about
    • Plagiarism
    • Deadlines and Uploads
    • Absences
    • Code Style and Code Layout

No-Goes

  • Fail one of these rules in your project …
    • Prevent Injection (SQL Injection)
    • Prevent Unauthorized Access (Access Control)
    • Prevent Cross-Site Scripting (XSS)
    • Encrypt and Protect Sensitive Data (passwords, etc) Properly
    • Suppress Errors
  • … and your project score will be halved.
    You shall not pass!

Questions?

ikdoeict.be