Serverside Webscripting [JLW322]

00.intro

Slidedeck?!

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
  • Thanks to Highlight.js
• Numeric values can be adjusted with the ↑ & ↓ keys
  • Thanks to (a customized) Incrementable
• 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%;

  • Thanks to (a customized) CSS Snippets
• And oh, CSS Snippets don't need vendor prefixes

  box-shadow: 0px 0px 10px #888;

  • Thanks to PrefixFree

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());
?>

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 1

Webscripting 1

• Webscripting 1 = main course (OPO)
• Webscripting 1 = two sub-courses
  • OLA Clientside Webscripting [JLW272]
  • OLA Serverside Webscripting [JLW322]
• Webscripting1 = 5 ECTS Credits
  • OLA Clientside Webscripting: 2/5
  • OLA Serverside Webscripting: 3/5

Instructors

• 

  Bram(us) Van Damme
  bramus.vandamme@odisee.be

• 

  Rogier van der Linde
  rogier.vanderlinde@odisee.be

Timing

• One semester = 12 + 1 weeks
• Two blocks
  • First 6 weeks = Serverside Webscripting (SWS)
  • Last 6 weeks = Clientside Webscripting (CWS)
• Ergo: we're started for 6 weeks of SWS

Serverside Webscripting

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

Course Subjects

Technology

• Technology
  • Scripting Language: PHP 5.4
  • Databaseserver: MySQL
  • Webserver: Apache or PHP 5.4's built-in server
• 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
  • PHPStorm
  • Zend Studio
  • Aptana Studio
  • Netbeans
• 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/ws1-sws-course-materials.git

  • Visit your copy at http://localhost/ws1-sws-course-materials
• Update the repository regularly to get the latest version

  cd c:\wamp\www\ws1-sws-course-materials
  git reset --hard
  git pull

Evaluation

• Permanent (50%)
  • 15%: Small test (5 questions) before start of a hands-on lab
  • 35%: Progress, Accuracy, Attitude, Programming Style, ...
• Final exam (50%)
  • One assignment in which you'll have to convert a static site to a dynamic one within a given timespan
  • Open book
  • Minimum score of 8/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.

  • Check the slides and code examples
  • Check http://php.net/nameofthefunction
  • Check Google (#lmgtfy)
• Ask a fellow student or your lecturer

Domestic Conventions

Domestic Conventions
(Huishoudelijk Reglement)

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

Questions?