25
Drupal PHP for Designers or Using PHP Without Panicking Marissa Martínez GreenFerret, LLC © 2011 GreenFerret, LLC

Drupal PHP for Designers

Embed Size (px)

DESCRIPTION

Drupal PHP for Designers or PHP Without Panicking. Ths is a basic, basic, basic intro to some key parts of PHP a designer might need when venturing into a Drupal template file.

Citation preview

Page 1: Drupal PHP for Designers

Drupal PHP for Designersor

Using PHP Without Panicking

Marissa MartínezGreenFerret, LLC

© 2011 GreenFerret, LLC

Page 2: Drupal PHP for Designers

What Happens When We Open a Template File

• Hitchhiker’s Guide channeling– “Don’t Panic!”

• Woody (Toy Story) channeling– “It’s a perfect time to panic!”

© 2011 GreenFerret, LLC

Page 3: Drupal PHP for Designers

Goal: Layout for Event Type

12

OCT

Sunday7:00 pm

- 9:00 pm

LocationElliot Bay Book Company1521 10th AveSeattle, WA

Marissa Martinez returns to Seattle to read from her new book, Headwinds. A long-time Seattle resident, Marissa was and continues as a member of Los Nortenos, a local group of Latino writers and artists

who are regular performers at Elliot Bay. This latest book is a memoir located in her current "hometown" in Massachusetts. It traces her experience as an undergraduate at MIT, but offers an inspiring story for succeeding in the face of multiple challenges.

More InformationCost: FreeWhere: Elliot Bay Book CompanyWho: Los Nortenos

Example

© 2011 GreenFerret, LLC

Page 4: Drupal PHP for Designers

Questions I Wanted to Answer

• Why (Context)– Why PHP vs. HTML vs. CSS?

• What are the pieces?– What things do I need to know and understand?

• How– How do all these things fit together?

• Examples

Why

What

How

Example

© 2011 GreenFerret, LLC

Page 5: Drupal PHP for Designers

We Will Not Cover

• How to create a theme• How to create a module• Object-oriented programming

© 2011 GreenFerret, LLC

Page 6: Drupal PHP for Designers

HTML vs CSS vs PHP

• HTML – manage the structure/data of the page

• CSS – manages the look and feel• PHP – offers a mechanism to make

HTML dynamic via template files

Why

© 2011 GreenFerret, LLC

Page 7: Drupal PHP for Designers

Let’s Make Some DivsDate block Location

Body

Map area

Additional Information

Print

Time

Image

Date-Location Container

Image-Body Container

Example

© 2011 GreenFerret, LLC

Page 8: Drupal PHP for Designers

HTML->PHP ExampleExample

Elliot Bay Book Company

<html><head></head><body>

</body></html>

<a href=“http://elliotbaybook.com”>

</a>

<div>

1521 Tenth St, Seattle, WA

</div>

<div class=“event-location”>

field_venue_linkfield_venue

field_addr1,field_city, field_state

© 2011 GreenFerret, LLC

Page 9: Drupal PHP for Designers

Vocabulary Check:Drupal Concepts

• Custom content type• Theme• Template files

What

© 2011 GreenFerret, LLC

Page 10: Drupal PHP for Designers

Template Files

• Filename form– Drupal 7: node--<type>.tpl.php (2 hyphens)– Drupal 6: node-<type>.tpl.php (1 hyphen)

• Example files (Drupal 7)– “Event” custom content type:

node--event.tpl.php– Theme a “page” content type for node 17:

page--node--17.tpl.php– Theme the front page:

page--front.tpl.php

What

© 2011 GreenFerret, LLC

Page 11: Drupal PHP for Designers

Quick Review:Programming Concepts

• Variables• Reserved variables• Syntax• Output• Algorithm

• General, PHP, Drupal

What

© 2011 GreenFerret, LLC

Page 12: Drupal PHP for Designers

Variables

• General– Definition: a name that represents a value

• PHP– Form: $variable_name

• Drupal examples:– Integer: $uid (1,2,17)– Boolean: $is_front (true, false)– Object: $node->status– Array: $field_date[value]

What

© 2011 GreenFerret, LLC

Page 13: Drupal PHP for Designers

Node Template HeaderExample

© 2011 GreenFerret, LLC

Page 14: Drupal PHP for Designers

Wait, There Are Some Rules

• PHP– $thisvariable ≠ $ThisVariable– Must start with letter or underscore (_)– Use only alphanumeric and underscore(_)– No spaces

• Drupal– $node->type becomes $type

$node->body becomes $body

What

© 2011 GreenFerret, LLC

Page 15: Drupal PHP for Designers

Syntax

• General: The way a line of code is organized that allows it to be interpreted

• PHP– Call the PHP parser: <?php ?>– Statements end with a semicolon (;)– Operators, e.g. =, +, -, /, *, ++, --, ==, !=, &&, ||– Conditional, e.g. if, then, else, elseif, case, ?, while– Comments

$count = 17; //inline comment/* multi-line comment */

What

© 2011 GreenFerret, LLC

Page 16: Drupal PHP for Designers

Controlling Output• echo vs. print

– Echo• Outputs what becomes the page html• Faster

– Print• Outputs what becomes the page html• Is a function, can be used in complex expressions

• render()– Display all values of an element– print render($content);

• hide()– hide($content[‘comments’];

What

© 2011 GreenFerret, LLC

Page 17: Drupal PHP for Designers

Algorithm

• General: a list of instructions that achieve a result

What

© 2011 GreenFerret, LLC

Page 18: Drupal PHP for Designers

HTML->PHP ExampleExample

Elliot Bay Book Company

<html><head></head><body>

</body></html>

<a href=“http://elliotbaybook.com”>

</a>

<div>

1521 Tenth St, Seattle, WA

</div>

<div class=“event-location”>

$field_venue_link$field_venue

$field_addr1,$field_city, $field_state

$type

© 2011 GreenFerret, LLC

Page 19: Drupal PHP for Designers

Putting it Together: Build a String

• Create a div with some content-specific classes

<?php print“<div class=‘”.$type.”-location’>

<a href=‘”.$field_venue_link[‘url’] . ”’>” .$field_venue[‘value’] ?></a>

Example

© 2011 GreenFerret, LLC

Page 20: Drupal PHP for Designers

Putting it Together:Conditional Output

• Only print out an address if it’s been entered

<?php if ($field_addr1[‘value’] || $field_city[‘value’] || $field_state[‘value’])

print $field_addr1[‘value’].”,&nbsp;”. $field_city[‘value’].”,&nbsp;”.

$field_state[‘value’] ?></div>

Example

© 2011 GreenFerret, LLC

Page 21: Drupal PHP for Designers

Additional Tools

• Clear cache is your friend• Firebug (Firefox), Chrome• Development environment tool

– Benefits: color coding, syntax checking– Mac: Eclipse, WebScripter, NetBeans IDE, Komodo– PC: Eclipse, PSPad, MSFT Virtual Studio Express,

NetBeans IDE, Komodo

• codepad.org• Devel module

What

© 2011 GreenFerret, LLC

Page 22: Drupal PHP for Designers

Devel Module

• Install• Modules enable• Structure Blocks, enable, set access to

admin• Develop tab in edit mode

What

© 2011 GreenFerret, LLC

Page 23: Drupal PHP for Designers

Summary

• PHP leverages stored Drupal values to generate dynamic content

• Variables, syntax, and algorithms, oh my• Examples, examples, examples

© 2011 GreenFerret, LLC

Page 24: Drupal PHP for Designers

Questions

© 2011 GreenFerret, LLC

Page 25: Drupal PHP for Designers

Contact

• Marissa Martínez– [email protected]– 617-306-1566

• Presentationhttp://bit.ly/php4design

© 2011 GreenFerret, LLC