php - Blog - Georgetown University

Transcript php - Blog - Georgetown University

Communication, Culture and Technology (CCT)
Georgetown University
Spring 2017
De-Blackboxing
WordPress
Evan Barba
J.R. Osborn
What is the internet?
a network of networks that consists of
millions of private, public, academic,
business, and government networks, of
local to global scope, that are linked by a
broad array of electronic, wireless and
optical networking technologies…
The Internet Stack
Application Layer
TCP Layer
IP Layer
Physical Layer
Application Layer
specifies the shared protocols and interface
methods used by hosts in a communications
network
• Hypertext Transfer Protocol (HTTP)
What is WordPress?
• WordPress is an online, open source website
creation tool written in PHP. But in non-geek
speak, it's probably the easiest and most
powerful blogging and website content
management system (or CMS) in existence
today.
– https://ithemes.com/tutorials/what-is-wordpress/
What is WordPress?
• "WordPress was born out of a desire for an elegant,
well-architectured personal publishing system built
on PHP and MySQL and licensed under the GPL. It is
the official successor of b2/cafelog. WordPress is
fresh software, but its roots and development go
back to 2001. It is a mature and stable product. We
hope by focusing on web standards and user
experience we can create a tool different from
anything else out there."
– WordPress About Page
Cheap
abundant
server
space
Community
support
Usergenerated
content
Standardization
vs.
Customization
PHP
server
CSS
SociotechnicalContent
System
HTML
cellphone
Network
Browser
MySQL
Runs
PHP
server
Accesses
Generates
CSS
Runs
Connects
SociotechnicalContent
System
Formats
HTML
Network
cellphone
Displays
Stores/
Organizes
Connects
Browser
MySQL
What happens when you navigate
to a WordPress webpage?
What happens when you navigate
to a WordPress webpage?
1. WordPress reads all the necessary PHP files
starting with index.php
2. WordPress executes the PHP code and
retrieves the requested content from the
database
3. WordPress combines all this data and
formats it (using CSS) into an HTML
document
4. WordPress serves the formatted document
to the client
Your Browser Displays HTML
<html>
<head>

</head>
<body>
<h1> Header Text here </h1>
<div>
<p> Paragraph text here</p>
<h2> Subheader text here </h2>
</div>
<div>
<p>Another Paragraph here</p>
</div>
</body>
</html>
Document Object Model (DOM)
Nodes
Elements
HTML elements have “attributes”
<!DOCTYPE html>
<html lang="en-US”>
</html>
<a href="http://www.website.com">This is a link</a>
<img src=”image.jpg" width="104" height="142">
Attributes provide additional information
(including formatting information) and come in
“name/value pairs”
http://www.w3schools.com/css/
Stylin’
• Styling can be added to HTML elements in 3
ways:
• Inline - using a style attribute in HTML
elements
• Internal - using a <style> element in the HTML
<head> section
• External - using one or more external CSS files
Stylin’
• Inline - using a style attribute in HTML
elements
<h1 style="color:blue;">This is a Blue Heading</h1>
This is a Blue Heading
• Internal - using a <style> element in the HTML <head> section
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External - using one or more external CSS files
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Cascading Style Sheets (CSS)
• CSS is a stylesheet language that describes the
presentation of an HTML document.
• CSS describes how elements must be
rendered on screen, on paper, or in other
media.
• CSS can control the layout of multiple web
pages all at once
• External stylesheets are stored in CSS files
CSS “rule-sets”
Document Object Model (DOM)
CSS selectors
• The element selector selects elements based on the element
name.
– You can select all <p> elements on a page
• The id selector uses the id attribute of an HTML element to
select a specific element.
– The id of an element should be unique within a page, so
the id selector is used to select one unique element
• The class selector selects elements with a specific class
attribute.
– To select elements with a specific class, write a period (.)
character, followed by the name of the class.
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
//now it is affected
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
MySQL
• What is a database?
– A computer application that stores data and has
methods for accessing, managing, searching, and
replicating that data
– Data is stored in “tables” that have rows and
columns like a spreadsheet (2D array or matrix)
– data from one table is related to other tables
through “keys” which are columns that appear in
multiple tables this is why databases are referred
to as “relational”
Simple Table
WordPress database
wp_posts “fields”
wp_posts table
A single post
PHP
• Scripting language that runs on the server
• When your browser asks for a .php page the
server locates the page, reads the html and
executes the php commands inside the html
See:: http://html.net/tutorials/php/
<html>
<head>
<title>My first PHP page</title>
</head>
<body>
<?php
echo "<h1>Hello World!</h1>”;
?>
</body>
</html>
<html>
<head>
<title>My first PHP page</title>
</head>
<body>
<?php
echo date("r");
?>
</body>
</html>
https://yoast.com/wordpress-theme-anatomy/
<?php get_header(); ?> #go find and read the header.php page and insert it here
<div id="primary" class="content-area">
<?php if ( have_posts() ) : ?> #execute the “have_posts() function (TRUE/FALSE)
<?php if ( is_home() && ! is_front_page() ) : ?> # is this the landing page? T/F
<h1 class="page-title screen-reader-text">
<?php single_post_title(); ?> #execute the function and insert results
</h1>
<?php endif; ?>
// Start the loop. #the main wordpress loop
#While there are posts insert the post and go back to the top of the loop.
<?php while ( have_posts() ) : the_post();
// End the loop.
endwhile;
endif; ?>
</div>
<?php get_sidebar(); ?> #go find and read the sidebar.php page and insert it here
<?php get_footer(); ?> #go find and read the footer.php page and insert it here
Missing Piece?
• JavaScript
• Most popular programming language in the
world!
• placed in the <body> and the <head> sections
of an HTML page (just like php)
• to create dynamic and interactive content
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

php - Blog - Georgetown University

Transcript php - Blog - Georgetown University

Directory