WEEK 1 -2: HTML5/CSS Review +

Responsive Design
●
Review of Web Basics
●
Design Theory: UX/UI, Responsive/Mobile First
+Project: Personal Page w/ Resume
OVERVIEW: The DOM
●
DOM: Document Object Model
OVERVIEW: HTML5

Forms
Semantic Elements
Canvas
Rich Media
HTML5 Forms
-HTML forms are used to collect user input.
-The <form> element de1nes an HTML form:
-HTML forms contain form elements.
-Form elements are di2erent types of input elements,
checkboxes, radio buttons, submit buttons, and more.
HTML5 Forms
The Action Attribute
The action attribute de1nes the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button.
Normally, the form is submitted to a web page on a web server.
In the example above, a server-side script is speci1ed to handle the submitted form:
<form action="action_page.php">
If the action attribute is omitted, the action is set to the current page.

The Method Attribute

The method attribute speci1es the HTTP method (GET or POST) to be used when
submitting the forms.
HTML5 Forms
When to Use GET?
You can use GET (the default method):
If the form submission is passive (like a search engine query), and without sensitive
information.
When you use GET, the form data will be visible in the page address:
action_page.php?1rstname=Mickey&lastname=Mouse
Note GET is best suited to short amounts of data. Size limitations are set in your
browser.

When to Use POST?

If the form is updating data, or includes sensitive information (password).
POST o2ers better security because the submitted data is not visible in the page address.
HTML5 Forms: Input Types

<form>
First name:<br>
<input type="text" name="1rstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
OVERVIEW: CSS3

Pseudo Elements
Transitions
Transforms
Media Queries
 Responsive Web Design
-Responsive web design
makes your web page look
good on all devices.
-Responsive web design uses
only HTML and CSS for
creating a Cexible layout
-Javascript can be used to
enhance but design should
not be dependent on JS
 Responsive Web Design
-The Cuid grid concept calls for
page element sizing to be in
relative units like percentages,
rather than absolute units like
pixels or points.
-Media queries allow the page to use
di2erent CSS style rules based on
characteristics of the device the site
is being displayed on, most
commonly the width of the browser.

-Flexible images are also sized in

relative units, so as to prevent
them from displaying outside
their containing element.
UI vs UX
User experience design (UXD or UED) is the process of enhancing
customer satisfaction and loyalty by improving the usability, ease of
use, and pleasure provided in the interaction between the customer
and the product.
User Interface is the look and feel, the presentation and interactivity
of a product. It emphasizes giving feedback and response to user
input. -Less about layout, more about interaction and feedback
 Design
What do people like?
-Symmetry/Consistency
-Good color schemes
-Interaction and feedback from the user interface
-Icons and pictures more than blocks of text
-Well structured and easy to navigate menus
-Sites that display well on the device they are using (tablet, smart
phone, laptop etc)
Typography and Fonts
-Three basic groups: Serif,
Sans-serif, and Cursive
-Fonts inuence the user's
impression of the site
-Use two or more font types
that work well together
-Be consistent in the fonts
you use
-Use bold types sparingly
(mostly in H1 or H2s)
Color Theory

-The Color Wheel: An range of colors across the visual

spectrum.

-Color Harmony: Using colors that complement each other in a

way that is pleasing to user.

-Color Context: The inuence other colors

have on the appearance of a color.
 HTML5 Forms: Common Input Types
<input type="text"> <input type="password">
<input type="text" name="1rstname"> <input type="password" name="psw">

<input type="submit"> <input type="checkbox">

<input type="submit" value="Submit">
<input type="checkbox" name="yes"
<input type="radio"> value="yes">

<input type="radio" name="gender" value="male"

checked> Male<br>
<input type="button">
<input type="radio" name="gender" <input type="button" onclick="alert('Hello
value="female"> Female<br> World!')" value="Click Me!">
HTML5 Forms: Tags
Tag Description
<form> De1nes an HTML form for user input
<input> De1nes an input control
<textarea> De1nes a multiline input control (text area)
<label>De1nes a label for an <input> element
<1eldset>Groups related elements in a form
<legend>De1nes a caption for a <1eldset> element
<select> De1nes a drop-down list
<optgroup> De1nes a group of related options in a drop-down list
<option> De1nes an option in a drop-down list
<button>De1nes a clickable button
<datalist>Speci1es a list of pre-de1ned options for input controls
<keygen> De1nes a key-pair generator 1eld (for forms)
<output>De1nes the result of a calculation
OVERVIEW: CSS3
Pseudo Elements
Transitions
Transforms
Media Queries
CSS Float
The Coat property speci1es whether or not an element
should Coat.
The clear property is used to control the behavior of
Coating elements.
OverCow: hidden/auto can keep parents surrounding
Coating child
 CSS3: Pseudo Classes and Elements
● Pseudo-Elements
A CSS pseudo-element is used to style specified parts of an element.

Pseudo-Elements can be used to:

-Style the first letter, or line, of an element

-Insert content before, or after, the content of an element

The syntax of pseudo-elements:

selector::pseudo-element {
property:value;
}
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
::first-letter p::first-letter Selects the first letter of each <p> element
::first-line p::first-line Selects the first line of each <p> element
::selection p::selection Selects the portion of an element that is selected by a user
 CSS3: Pseudo Classes and Elements
● Pseudo-classes
A pseudo-class is used to define a special state of an element.

● For example, it can be used to:

– Style an element when a user mouses over it
– Style visited and unvisited links differently
– Style an element when it gets focus

The syntax of pseudo-classes:

selector:pseudo-class {
property:value;
}
 CSS3: Pseudo Classes and Elements
● Pseudo-Class
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabledSelects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting
with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
 CSS3: Pseudo Classes and Elements
● Pseudo-Class
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its
parent
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p>
element of its parent
:only-child p:only-child Selects every <p> element that is the only child of
its parent
:optional input:optional Selects <input> elements with no "required"
attribute
:required input:required Selects <input> elements with a "required" attribute
specified
:target #news:target Selects the current active #news element (clicked on a
URL containing that anchor name)
:visited a:visited Selects all visited links
 CSS3: Transitions
CSS3 transitions allows you to change property values
smoothly (from one value to another), over a given
duration.
To create a transition effect, you must specify two things:
● the CSS property you want to add an effect to

● the duration of the effect

div {
transition: width 2s, height 4s;
}
 CSS3: Animations
What are CSS3 Animations?
– Ananimation lets an element gradually change from one style to
another.

– Youcan change as many CSS properties you want, as many times

you want.

– Touse CSS3 animation, you must first specify some keyframes for
the animation.

– Keyframes hold what styles the element will have at certain times.
 CSS3: Media Queries
Media query is a CSS technique introduced in
CSS3. It uses the @media rule to include a
block of CSS properties only if a certain
condition is true.

@media only screen and (max-width: 500px) {

body {
background-color: lightblue;
}
}
 Frontend Frameworks
-A framework is a standardized set of concepts, practices and criteria for
dealing with a common type of problem, which can be used as a reference
to help us approach and resolve new problems of a similar nature.

-A frontend framework is de,ned as a package made up of a structure of

,les and folders of standardized code (HTML, CSS, JS documents etc.)
which can be used to support the development of websites, as a basis to
start building a site.

Most websites share a very similar (not to say identical) structure. The aim
of frameworks is to provide a common structure so that developers don’t
have to redo it from scratch and can reuse the code provided. In this way,
frameworks allow us to cut out much of the work and save a lot of time.

To summarize: there’s no need to reinvent the wheel.

 Frontend Frameworks

Advantages
-Rapid Prototyping
-Cross browser compatibility
-Responsive out of the box
-Large development/user
community
Disadvantages
-Generic look if you're lazy
-Code bloat/heavy
-Locked into the logic of the FEF
-Too much black box/magic
(don't know your code)
Popular Frontend Frameworks
 Frontend Grid System
● Grid composed of twelve columns
● Number of columns occupied by elements
changes as break points are hit
 Frontend Grid System
●
Rows must be placed within a .container (1xed-width) or .container-Cuid (full-width) for proper
alignment and padding.
●
Use rows to create horizontal groups of columns.
●
Content should be placed within columns, and only columns may be immediate children of
rows.
●
Prede1ned grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less
mixins can also be used for more semantic layouts.
●
Columns create gutters (gaps between column content) via padding. That padding is o2set in
rows for the 1rst and last column via negative margin on .rows.
 Frontend Grid System
●
Grid columns are created by specifying the number of twelve available columns
you wish to span. For example, three equal columns would use three .col-xs-4.
●
If more than 12 columns are placed within a single row, each group of extra
columns will, as one unit, wrap onto a new line.
● Grid classes apply to devices with screen widths greater than or equal to the
breakpoint sizes, and override grid classes targeted at smaller devices.
Therefore, e.g. applying any .col-md-* class to an element will not only affect its
styling on medium devices but also on large devices if a .col-lg-* class is not
present.
 /* Extra small devices

Responsive Breakpoints (phones, less than 768px) */

/* No media query since this
is the default in Bootstrap */

/* Small devices (tablets,

768px and up) */
@media (min-width:
@screen-sm-min) { ... }

/* Medium devices
(desktops, 992px and up) */
@media (min-width:
@screen-md-min) { ... }

/* Large devices (large

desktops, 1200px and up) */
@media (min-width:
@screen-lg-min) { ... }
Jquery Review
jQuery is a JavaScript Library.
jQuery greatly simpli1es JavaScript programming
There are many Javascript libraries and frameworks
Jquery Review
jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on websites.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into
methods that you can call with a single line of code.

jQuery also simpli1es a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains the following features:

-HTML/DOM manipulation
-CSS manipulation
-HTML event methods
-E2ects and animations
-AJAX
-Utilities
 jQuery Syntax
Basic syntax is: $(selector).action()

A $ sign to de1ne/access jQuery

A (selector) to "query (or 1nd)" HTML elements
A jQuery action() to be performed on the element(s)
Examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test"

$("#test").hide() - hides the element with id="test"

 jQuery Selectors
Syntax DescriptionExample
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:1rst") Selects the 1rst <p> element
$("ul li:1rst") Selects the 1rst <li> element of the 1rst <ul>
$("ul li:1rst-child") Selects the 1rst <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd")Selects all odd <tr> elements
 jQuery Events

All the di2erent visitor's actions that a web page can respond to are
called events.

An event represents the precise moment when something happens.

Examples:
-moving a mouse over an element
-selecting a radio button
-clicking on an element
The term "1res/1red" is often used with events. Example: "The
keypress event is 1red, the moment you press a key".
jQuery Events
 jQuery Events

$(document).ready()
The $(document).ready() method allows us to execute a function
when the document is fully loaded.
click()
The click() method attaches an event handler function to an HTML
element.
The function is executed when the user clicks on the HTML element.
$("p").click(function(){
$(this).hide();
});
 jQuery Events

.css( propertyName, value )

propertyName
Type: String
A CSS property name.
value
Type: String or Number
A value to set for the property.
 jQuery Events: Set an attribute

.attr( attributeName, value )

attributeName
Type: String
The name of the attribute to set.
value
Type: String or Number or Null
A value to set for the attribute. If null, the speci1ed
attribute will be removed (as in .removeAttr()).
 PHP Templating Background

Basics of MVC
• Model
• View
• Controller

User actions are passed (as HTTP requests, GET or POST

methods) to the controller. The controller is a piece of code
that handles and processes user input and then reads and
makes necessary changes to the model, which is
responsible for the storage and modification of data. (In
simple terms, the model consists of the database structure
and contents, and the code used to access it.) Then, the
controller generates the proper view that will be sent and
displayed to user.
 PHP Templating with Include Functions

Introducing the PHP Includes

We use includes to piece together common larger elements of a webpage such as

• Navigation

• Head and Header

• Sidebars

• Footer
Includes allow us to use conditional logic to change the structure of our
webpage. By editing one template file we can affect the element on all
pages.
 PHP Templating with Include Functions

Introducing the PHP Include Commands

PHP has four commands that can be used to include code from an external 1le, namely:

• include
• include_once
• require
• require_once
include attempts to continue processing a script, even if the external file is missing, whereas require is used in
the sense of mandatory: if the file is missing, the PHP engine stops processing and throws a fatal error.

include_once and require_once prevent the same file from being included more than once in a page. This is
particularly important when including files that define functions or classes. Attempting to define a function or
class more than once in a script triggers a fatal error.
PHP Templating with Include Functions

File naming and structure

Generally template 1les can be stored in an “includes” folder in the root

Naming conventions vary but usually include:

• exam ple.php
• exam ple.inc
• exam ple.inc.php
Other extensions might include “tpl” in CMSs such as Drupal
 Connecting to a Database

There are three ways to connect to a database in

PHP:
• MySQL: Support being discontinued. Avoid
• MySQL Improved (MySQLi): Introduced in
PHP5.0. Standard
• PDO: Improved flexibility

Becareful not to mix up mysql_connect() and

mysqli_connect(), mysql_query() and mysqli_query() etc
 Basic MYSQLi Connection

You can connect procedurally or using an OO

approach
• Setup a database connection mysqli_connection()
• Setup Query $query = "INSERT INTO
- Pass database connection and query $result =
mysqli_query($dbc, $query) or die('Failed to
connect');
- Close the connection mysqli_close($dbc)
 Basic MYSQLi Connection
Stalker Application form submitted
<?php
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
$stalker = $_POST['stalker'];
$dbc = mysqli_connect('localhost', 'root', 'secretpassword', 'db_stalker')
or die('Couldnt connect to database');
$query = "INSERT INTO stalkers (first_name, last_name, email, stalker)
VALUES('$first_name', '$last_name', '$email', '$stalker')";
$result = mysqli_query($dbc, $query) or die('Failed to connect');
mysqli_close($dbc);
?>
<div id="wrapper">
<h1><?php echo $first_name ?> thank you for becoming my stalker! </h1>
 MYSQLi Connection

You can connect procedurally or using an OO approach

• MySQLi connections prefix: mysqli
• You must pass (4) arguments. Define:
-$hostname

-$username

-$password

-'database name'

$conn = new mysqli($hostname, $username, $password,

'phpsols');
 SQL Commands

The SQL CREATE DATABASE Statement

The CREATE DATABASE statement is used to create a
database.

CREATE DATABASE dbname;

 SQL Commands

The SELECT statement is used to select data from a

database.

The result is stored in a result table, called the result-set.

SQL SELECT Syntax

SELECT column_name,column_name
FROM table_name;
 SQL Commands

The WHERE clause is used to extract only those

records that ful1ll a speci1ed criterion.

SELECT column_name,column_name
FROM table_name
WHERE column_name operator value;
 SQL Commands

The SQL LIKE Operator

The LIKE operator is used to search for a speci1ed
pattern in a column.

SELECT column_name(s)
FROM table_name
WHERE column_name LIKE pattern;
 SQL Commands

The UPDATE statement is used to update existing

records in a table.

UPDATE table_name
SET column1=value1,column2=value2,...
WHERE some_column=some_value;
 SQL Commands

The DELETE statement is used to delete rows in a

table.

SQL DELETE Syntax

DELETE FROM table_name
WHERE some_column=some_value;
 SQL Commands
In SQL, wildcard characters are used with the SQL LIKE operator.

SQL wildcards are used to search for data within a table.

% A substitute for zero or more characters

_ A substitute for a single character
[charlist] Sets and ranges of characters to match
[^charlist]
or
[!charlist] Matches only a character NOT speci;ed within the brackets
 Freelancing
●
Freelancing is a great way to build your skills, portfolio and bank account
●
The four major sites are
– Freelancer.com (#1 in popularity)
– Upwork.com (previously Odesk)
– Elance.com
– Guru.com
 Introduction to Wordpress
●
WordPress was used by more than 23.3% of the top 10 million websites as of
January 2015.
●
WordPress is the most popular blogging system in use on the Web, at more
than 60 million websites.
●
Wordpress is no longer just about blogging, it is increasingly the main
platform for many business, media, and government sites
 Introduction to Wordpress
●
Why learn/use Wordpress?
– It is the most popular CMS
– Tons of freelancing jobs
– Rapid site design, development and delivery
– Broad market share in many areas:
●
E-commerce
●
Media
●
Business
●
Personal
– Extensible
– Easy for client to maintain
 Introduction to Wordpress
●
When is Wordpress not the right solution?
– Specialized app type sites (ie Twitter, Google Maps)
– When speed and optimization are a priority
●
WP has some overhead that isn't necessary on all sites
– Extremely simple sites
●
One page landing site
●
Extremely heavy javascript site with just a few pages and lots
of animations etc might be better served with a Front End
Frame work only
 Wordpress: Adding Functionality
●
You can extend Wordpress functionality using custom theme
functions and plugins:
●
Theme functions are speci/c to the theme and will break if the user
changes theme
– Theme functions are housed in functions.php in the root of the
theme
●
Plugins are theme agnostic (generally) and can be used across
di1erent sites
●
Wordpress looks for HOOKS and FILTERS to add custom functions
-Hooks are places where functions can be inserted into to WordPress’s
procedures
 Wordpress Templating Overview

WP Templates have a similar logic to using Includes

Using WP Functions we can bring in di2erent parts of the page and add functionality

• Main pages will include: index, single etc

• Sidebar, footer, header included using

WP functions: get_header();

- Styles and scripts general “enqueue”d

- Di1erent themes can provide di1erent

Layout options
 WP Template: Getting Started

Create (4) 1les

To get started we'll create the basic layout of our theme

• index.php

• style.css (WP will ;nd our theme info here)

• header & footer.php

• functions.php
Includes allow us to use conditional logic to change the structure of our
webpage. By editing one template file we can affect the element on all
pages.
 WP Template: Declaring the Theme

Style.css holds our styles and also tells WP of

the theme
Inside a comment at the top of the sheet:

/*

Theme Name: My Bootstrap Template

Author: Spencer

Author URI: http://thehtinktankllc.com

Version: 1.0

*/
 WP Functions: Enqueue CSS

wp_enqueue_style()
Goes in the FUNCTION.PHP 1le, adds styles and scripts.

Why use instead of hardcoding links?

-Duplication: avoid loading same libraries
-Library conCicts: Load only the newest version of a library
-Handling dependencies: If you create a custom script which relies on a
javascript library, you can add the dependency as a parameter of the enqueue function, which
will ensure that the required library is loaded before the custom script.
 WP Functions: Enqueue CSS

In the Functions.php 1le add:

function theme_styles() {
wp_enqueue_style('style', get_template_directory_uri() .
'/style.css');
wp_enqueue_style('bootstrap_style',
get_template_directory_uri() . '/css/bootstrap.min.css');
}

add_action('wp_enqueue_scripts', 'theme_styles');
 WP Functions: Enqueue JS
wp_enqueue_stript()
Goes in the FUNCTION.PHP 1le, adds scripts.

-You must wrap your jQuery so WP knows which framwork

it is working with:
jQuery(document).ready(function($) {});

-Enqueue Script Arguements:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
 WP Functions: Enqueue JS

In the Functions.php 1le add:

function cis_theme_scripts() {
wp_enqueue_script('customjs', get_template_directory_uri() .
'/customjs.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'cis_theme_scripts');
 WP Functions: WP-Head

wp_head()
Echos out function.php actions
-Put in the header.php ,le
-Can be used to add enqueue styles, scripts, functions
 WP Functions: Nav
wp_nav_menu ( array $args = array() )
Feed arguments to the array such as:
-$args
(array) (Optional) Array of nav menu arguments.
'menu'
(string) Desired menu. Accepts (matching in order) id, slug, name.
'menu_class'
(string) CSS class to use for the ul element which forms the menu. Default 'menu'.
'menu_id'
(string) The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.
'container'
(string) Whether to wrap the ul, and what to wrap it with. Default 'div'.
'container_class'
(string) Class that is applied to the container. Default 'menu-{menu slug}-container'.
'theme_location'
(string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
'items_wrap'
(string) How the list items should be wrapped. Default is a ul with an id and class. Uses printf() format with numbered placeholders.
 WP Functions: create_widget()

create_widget();
Registers a new widget area for use in the “Widget
Menu”
-add arguments for name, unique identi,er, short description
create_widget('Right Sidebar', 'right-sidebar', 'Displays Right
Sidebar' );
 WP Functions: get_sidebar()
get_sidebar();
Retrieves the 1le sidebar.php and includes it
-add arguments to specify 'left' 'right' etc
<?php get_header(); ?>
<?php get_sidebar( 'left' ); ?>
<?php get_sidebar( 'right' ); ?>
<?php get_footer(); ?>
The ,le names for the right and left sidebars should be sidebar-right.php and
sidebar-left.php respectively.
 Creating Template Pages
Page Templates allow for di2erent layout and structures to be
assigned
to di2erent pages; ie Single Column Page, Right Sidebar Page etc
-Declare Template name using a comment at top of page before
get_header()
/*
Template Name: Page with Right Sidebar
*/
 Wordpress: The Loop
The Loop is PHP code used by WordPress to display posts. Using The
Loop, WordPress processes each post to be displayed on the current
page, and formats it according to how it matches speci;ed criteria
within The Loop tags. Any HTML or PHP code in the Loop will be
processed on each post.

When WordPress documentation says "This tag must be within The

Loop", such as for speci;c Template Tags or plugins, the tag will be
repeated for each post. For example, The Loop displays the following
information by default for each post:

Title (the_title())
Time (the_time())
Categories (the_category()).
 Wordpress: The Loop (shorthand)
The loop starts here:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();

?>
and ends here:

<?php endwhile; else : ?>

<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?
></p>
<?php endif; ?>
 Wordpress: The Loop (longhand)
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} // end if
?>
 Wordpress: The Loop --- Example
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div class="page-header">
<h1> <?php the_title(); ?></h1>
</div>
<p>
<?php the_content(); ?>
</p>
<?php endwhile;
else :
echo "no content found";
endif;
?>
 Introduction to Woocommerce
●
Currently the most popular ecommerce platform on WP and top among all
platforms
●
Open source and free to use
●
1000s of themes and additional plugins written around Woocommerce
●
Clients can sell real and virtual products
Introduction to Woocommerce: Market Share
Week 7 &8 Project: Redevelop HCMUS Website
 Introduction to Drupal
●
Drupal is a Content Management Framework:
– “A content management framework (CMF) is a system that facilitates the use of reusable
components or customized software for managing Web content. It shares aspects of a
Web application framework and a content management system (CMS).”
●
The most installed version is Drupal 7 but Drupal 8 was released at the end
of last year and includes signi1cant upgrades and improvements
●
Drupal has a reputation for being the most di_cult CMS/CMF to learn but
also the most secure, scalable and powerful
 Introduction to Drupal
●
Drupal is a Content Management Framework:
– “A content management framework (CMF) is a system that facilitates the use of reusable
components or customized software for managing Web content. It shares aspects of a
Web application framework and a content management system (CMS).”
●
The most installed version is Drupal 7 but Drupal 8 was released at the end
of last year and includes signi1cant upgrades and improvements

●
Drupal has a reputation for being the most
di_cult CMS/CMF to learn but also the most
secure, scalable and powerful
●
Not as much usage as WP but higher $
for Developers
 Who is Using Drupal?
Drupal is used across many sectors
– Government
– Education
– Business
– Media
 Introduction to Drupal: When to Use
●
Drupal is best suited for large projects that will need to scale and extend
functionality in the future.
●
Drupal excels in serving many di2erent users with di2erent user permissions
and accessibility
– Social Network type sites
– Business sites
– Ecommerce: not as popular or user friendly as WP
●
Drupal might not be well suited for specialty applications although with
Drupal 8 “headless Drupal” can serve as the application backend and API.
 Drupal Themes
● Drupal, like Wordress, uses themes to render
content on the front end. You can also use backend
themes to improve Webmaster use
● Most popular themes for Drupal 7:
– Bootstrap 3, Omega 5, Adaptive Themes, and Zen
Theme Block Regions
 Adding Theme Block Regions
1) in the theme.info 1le register the new region
regions[navigation] = 'Navigation'
regions[header] = 'Top Bar'
………………………………..
regions[featured] = featured
2) In the template 1le (ie page.tpl.php) render(); the region
<?php if ($page['featured']): ?>
<div class="featured">
<?php print render($page['featured']); ?>
</div> <!-- /.featured -->
<?php endif; ?>
 Content Types
Content types allow us to construct content 'nodes' using 1elds
 Content Types
-Content types allow us to construct content 'nodes' using 1elds
-Content types are made up of 1elds
– Text
– File
– Media
– Urls
– Etc
-Content types output a “node”
Drupal Views
RESTful APIs
 RESTful APIs
A RESTful API is an application program interface (API) that uses
HTTP requests to GET, PUT, POST and DELETE data.
Representational state transfer (REST), which is used by
browsers, can be thought of as the language of the Internet.
 What is JSON

●
JSON stands for JavaScript Object Notation
●
JSON is a lightweight data-interchange format
●
JSON is language independent *
●
JSON is "self-describing" and easy to understand
●
JSON is a syntax for storing and exchanging data.
●
JSON is an easier-to-use alternative to XML.
 JSON Syntax Rules

JSON syntax is derived from JavaScript object

notation syntax:
– Data is in name/value pairs
– Data is separated by commas
– Curly braces hold objects
– Square brackets hold arrays

{",rstName":"John", "lastName":"Doe"}
 JSON Arrays

JSON arrays are written inside square brackets.

Just like JavaScript, a JSON array can contain multiple
objects:
Example
"employees":[
{",rstName":"John", "lastName":"Doe"},
{",rstName":"Anna", "lastName":"Smith"},
{",rstName":"Peter","lastName":"Jones"}
]
 JSON vs XML
JSON Example XML Example
{"employees":[ <employees>
<employee>
{"firstName":"John", <firstName>John</firstName>
"lastName":"Doe"}, <lastName>Doe</lastName>
{"firstName":"Anna", </employee>
"lastName":"Smith"}, <employee>
<firstName>Anna</firstName>
{"firstName":"Peter", <lastName>Smith</lastName>
"lastName":"Jones"} </employee>
]} <employee>
<firstName>Peter</firstName>
●
<lastName>Jones</lastName>

●
</employee>
</employees>
 AJAX JSON Call
$(document).ready(function() {
●
$.ajax({
●
url: 'http://localhost/drupal8/app-articles',
●
dataType: 'json',
●
type: 'get',
●
cache: false,
●
success: function(data) {
●
$(data).each(function(index, value) {
●
$( "body" ).append("<h1>" + value.title + "</h1>");
●
$( "body" ).append("<p>" + value.body + "</p>");
●
});
●
}
●
});
●
});
 Model-View-Controller Architecture
●
In object-oriented programming
development, model-view-controller (MVC) is
the name of a methodology or design pattern
for successfully and e_ciently relating the
user interface to underlying data models. The
MVC pattern is widely used in program
development with programming languages
such as Java, Smalltalk, C, and C++.

●
The MVC pattern has been heralded by many
developers as a useful pattern for the reuse
of object code and a pattern that allows
them to signi1cantly reduce the time it takes
to develop applications with user interfaces.
 Model-View-Controller Architecture
●
A Model, which represents the underlying,
logical structure of data in a software
application and the high-level class associated
with it. This object model does not contain any
information about the user interface.
●
A View, which is a collection of classes
representing the elements in the user interface
(all of the things the user can see and respond
to on the screen, such as buttons, display
boxes, and so forth)
●
A Controller, which represents the classes
connecting the model and the view, and is
used to communicate between classes in the
model and view.
 v
v
v

v
v v
v
v
 Basic OOP

●
PHP 5 1rst gave support for OOP in 2004
●
Object-oriented programming (OOP) is a programming paradigm based
on the concept of "objects", which may contain data, in the form of ,elds, often
known as attributes; and code, in the form of procedures, often known as
methods. A feature of objects is that an object's procedures can access and often
modify the data ,elds of the object with which they are associated (objects have
a notion of "this" or "self"). In OOP, computer programs are designed by making
them out of objects that interact with one another.
 Procedural vs OOP

●
Classes reCect concepts – Objects represent instances
 Basic OOP
●
Classes reCect concepts – Objects represent instances
●
In classes $variables = Properties and functions() = Methods
 Intro to Laravel 5.1
●
Laravel was 1rst released in 2011 and has rapidly become the
most popuplar PHP framework
 Composer
●
Composer is Laravel's Dependency Manager
●
Similar to:
– Ruby's Bundler
– Node.js's Node Package Manager (npm)
●
Adds third party packages to your project
 Artisan
●
Artisan is Laravel's CLI. It provides a number of helpful commands
for your use while developing your application. It is driven by the
powerful Symfony Console component.
●
Similar to Drush in Drupal
●
You can use it to execute automated processes
– Create/Migrate DB
– Start PHP server on speci1c port #s
– Create Controllers
– Create Models
– etc
 Migrations
● Migrations are like version control for your
database, allowing a team to easily modify and
share the application's database schema.
Migrations are typically paired with Laravel's
schema builder to easily build your application's
database schema.
 Migrations
● The Laravel Schema facade provides database
agnostic support for creating and manipulating
tables. It shares the same expressive, fluent API
across all of Laravel's supported database
systems.
● This means you can build your database structure
as a PHP object and then create and manage it
through the CLI
 Migrations
● (1)To set up a new Migration file we use Artisan:
CLI: php artisan make:migration create_some_table
● This will create a new migration file in the
database/migrations folder
● (2)The file contains two functions:
– Up(): applies the migration to DB, creates tables
– Down(): undoes migration, drop tables
(3)CLI: php artisan migrate to execute
Migrations: Example
 Migrations
● (2) Within the method up() we can use Laravel's Schema
builder to name and create table rows.
public function up()
{
Schema::create('posts', function(Blueprint $table){
$table->increments('id');
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
● (3) execute migration: php artisan migrate
 Blade Templating Engine
● Blade is the simple, yet powerful templating engine
provided with Laravel. Unlike other popular PHP
templating engines, Blade does not restrict you from using
plain PHP code in your views. All Blade views are
compiled into plain PHP code and cached until they are
modified, meaning Blade adds essentially zero overhead
to your application. Blade view files use the .blade.php file
extension and are typically stored in the resources/views
directory.
 Blade Templating Engine
● You can create a master template and then 'include'
different page elements using the the templating function:
@yield('somecontent')
● The @section directive, as the name implies, defines a
section of content, while the @yield directive is used to
display the contents of a given section.
 Blade Templating Engine
● Extending A Layout>>Child to Parent
When defining a child page, you may use the Blade
@extends directive to specify which layout the child page
should "inherit". Views which @extends a Blade layout
may inject content into the layout's sections using
@section directives. The contents of these sections will be
displayed in the layout using @yield:
 The MODEL-->ORM
Object-relational mapping (ORM, O/RM, and O/R mapping tool)
in computer science is a programming technique for converting
data between incompatible type systems in object-oriented
programming languages. This creates, in e2ect, a "virtual object
database" that can be used from within the programming
language.
 The MODEL-->Eloquent
De1ning An Eloquent Model
class User extends Model {}
●
You may also generate Eloquent models using the make:model
command:
php artisan make:model User
●
Specify a custom table by de1ning a table property on your
model:
class User extends Model {
protected $table = 'my_users';
 The MODEL-->Eloquent
Once a model is de1ned, you are ready to start retrieving and
creating records in your table. Note that you will need to place
updated_at and created_at columns on your table by default. If
you do not wish to have these columns automatically maintained,
set the $timestamps property on your model to false.
●
Retrieving All Records
$users = User::all();
●
Retrieving A Record By Primary Key
$user = User::,nd(1);
var_dump($user->name);
 The MODEL-->Eloquent
Querying Using Eloquent Models
$users = User::where('votes', '>', 100)->take(10)->get();
foreach ($users as $user)
{
var_dump($user->name);
}
●
Eloquent Aggregates
Of course, you may also use the query builder aggregate functions.
$count = User::where('votes', '>', 100)->count();
●
If you are unable to generate the query you need via the Cuent interface, feel
free to use whereRaw:
$users = User::whereRaw('age > ? and votes = 100', [25])->get();
 Eloquent : Mass Assignments
Mass Assignment
When creating a new model, you pass an array of attributes to the model constructor. These
attributes are then assigned to the model via mass-assignment. This is convenient; however, can be
a serious security concern when blindly passing user input into a model. If user input is blindly
passed into a model, the user is free to modify any and all of the model's attributes. For this reason,
all Eloquent models protect against mass-assignment by default.
●
To get started, set the 1llable or guarded properties on your model.
●
De1ning Fillable Attributes On A Model
●
The 1llable property speci1es which attributes should be mass-assignable. This
can be set at the class or instance level.
class User extends Model {
protected $,llable = [',rst_name', 'last_name', 'email'];
}
 Eloquent : Mass Assignments
De1ning Guarded Attributes On A Model
The inverse of 1llable is guarded, and serves as a "black-list" instead of a
"white-list":
class User extends Model {
protected $guarded = ['id', 'password'];
}
●
De1ning Fillable Attributes On A Model
●
The 1llable property speci1es which attributes should be mass-
assignable. This can be set at the class or instance level.
class User extends Model {
protected $,llable = [',rst_name', 'last_name', 'email'];
}