SD3240 Creating Websites in the LAMP Environment
Study Guide
SD3240 Creating Websites in the LAMP
Environment
Study Guide
© ITT Educational Services, Inc.
All Rights Reserved.
[1]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
DISCUSSION 1.1 (2.0 HOURS)
Title: Web Application Designs Used for LAMP Environment
Refer to the reading from Chapter 14 of the textbook, Fundamentals of Web Development, and discuss
the following questions based on Web application design:

Compare and contrast two layer models with three layer models.

Describe the usage of dependency injections.

What other professional discipline would frequently use design patterns to solve common
problems?
Participation Requirements:
Respond to at least two of your classmates. When responding:

Provide complete, well-thought-out responses.

Ask questions, share experiences, challenge ideas, and help your peers expand their responses.
Evaluation Criteria:
The Discussion rubric will be used to evaluate the assessment.
Note: One-sentence answers will not be sufficient. If your answer is "I agree" or "I disagree," explain
why you agree or disagree. Remember that a discussion is an opportunity to interact with your
classmates. Observe discussion etiquette: Be respectful, kind, and nonjudgmental of your classmates.
© ITT Educational Services, Inc.
All Rights Reserved.
[2]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
LAB 1.1 (4.0 HOURS)
Assessment Preparation Checklist:

Read Chapter 14 from the textbook, Fundamentals of Web Development, which introduces Web
application designs.

Use the following navigation path to access the textbook, Pro PHP MVC, from the ITT Tech
Virtual Library:
Basic Search> Browse> Browse by Format> Books> Books24x7> Search by keywords “Pro PHP
MVC.” Read Chapters 1 and 2, which introduce the concepts of PHP MVC.

Go through the lesson for this module, which explains the web designs and applications that can
be created in the LAMP environment.
Title: Adapting Existing PHP Pages
In this lab, you will alter existing PHP pages into a layered design.
Required Setup and Resources:

On the Fedora 20 VM, create a new Static Web Project called SD3240-Lab1 in Eclipse and add
PHP Support.

Extract the share-your-travels.zip file to the WebContent folder under the folder share-yourtravels.

Use MySQL Workbench to run the travels.sql script to create the DB.
Recommended Procedures:
In this lab, you are provided with a partially functional website called Share Your Travels that is open for
posting and browsing through pictures taken from visits around the world. You have been provided with
the main PHP pages (such as browse-images.php) along with various include files.
Part 1: Become familiar with the website
1. Ensure that the website files are properly installed under the Eclipse project SD3240-Lab1
WebContent folder.
2. Create a new HTTP Server that is linked to the /home/student/public_html directory and add
the current project to the server. Wait until the Server reports as synchronized.
© ITT Educational Services, Inc.
All Rights Reserved.
[3]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
3. In Firefox web browser, open up the URL http://localhost/~student/SD3240-Lab1/share-yourtravels/browse-images.php
4. Study the layout of the website and its various features.
5. Optionally, create a Virtual Host and/or a query rewrite rule in Apache so that the website can
be retrieved from the URL http://www.share-your-travels.example.com/
Part 2: Adapt Share Your Travels into a layered design
1. Extract the ch14-starter-files.zip file to the WebContent folder. There should be both a common
and a share-your-travels sub-folder.
2. You have been provided with an abstract class called DomainObject along with several domain
subclasses. Implement additional domain subclasses:

TravelPost

TravelImage
© ITT Educational Services, Inc.
All Rights Reserved.
[4]
12/8/14
SD3240 Creating Websites in the LAMP Environment

Study Guide
TravelImageRating
3. Use the provided test page DomainTesterForTravel.php, which should demonstrate how your
new classes work.
4. You have been provided with an abstract class called TableDataGateway along with several
gateway subclasses. Implement an additional gateway subclasses for the new domain classes
created in the previous step:

TravelPostTableGateway
Use the provided test page GatewayTesterForTravel.php, which should demonstrate how your
new classes work.
5. Modify the post listing page so that it now makes use of the provided layer infrastructure.
6. Modify the provided single-post.php and single-image.php pages to also use these classes. You
may need to further modify your gateway and domain classes.
Part 3: Test the updated Share Your Travels website
1. To test these classes you should first use the test pages described in Part 2.
© ITT Educational Services, Inc.
All Rights Reserved.
[5]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
2. Your pages should have the functionality as shown in the following figure:
Submission Requirements:
A single ZIP file submission should contain:

The new classes PHP files

Other updated source files
Evaluation Criteria:
Your submission will be evaluated against the following points:

Did you answer all the questions, document the source and include all the screenshots?

Were you able to log onto the operating system?

Were you able to create a HTTP server link to the directory?

Did you configure Eclipse correctly?
© ITT Educational Services, Inc.
All Rights Reserved.
[6]
12/8/14
SD3240 Creating Websites in the LAMP Environment

Were you able to use PHP correctly?

Were you able to modify the listing page?
Study Guide
© ITT Educational Services, Inc.
All Rights Reserved.
[7]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
READ AND BEGIN PROJECT (1.0 HOUR)
Refer to “Project: Creating a Social Networking Website in the LAMP Environment” for a detailed
description of the project.
© ITT Educational Services, Inc.
All Rights Reserved.
[8]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
EXERCISE 2.1 (2.5 HOURS)
Assessment Preparation Checklist:

Read Chapter 10 (Sec. 10.3), Chapter 11, and Chapter 16 (Sec. 16.2–16.4) from the textbook,
Fundamentals of Web Development. The readings from these chapters focus on the concepts of
PHP classes and objects, working with databases and security.

Use the following navigation path to access the textbook, Pro PHP MVC from the ITT Tech
Virtual Library:
Basic Search> Browse> Browse by Format> Books> Books24x7> Search by keywords “Pro PHP
MVC.” Read Chapters 3, 9, and 10.

Review the lesson for this module, which explains the concepts of object-oriented design in PHP
and database access. The module also explains basic security for Web applications.
Title: Identifying Security Principles
Answer the following questions in this exercise:

What are the principles of data encapsulation?

Describe the trade-offs with using a database-independent API, such as PDO, in comparison to
using the dedicated mysqli extension.

Why must you always sanitize user inputs before using them in your queries?

What is the difference between authentication and authorization?

How does the secure-by-design principle get applied in the software development life cycle?

What is a cryptographic one-way hash?

What does it mean to salt your passwords?

What is a Certificate Authority, and why do they matter?

What is a SQL Injection attack? How can you protect an application from these attacks?

What’s the difference between reflected and stored XSS attacks?
Submission Requirements:
Submit your responses in a 2–3 page Microsoft Word document of the following specifications:

Font: Arial; 12-Point

Line Spacing: Double using APA formatting for the paper.
© ITT Educational Services, Inc.
All Rights Reserved.
[9]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
Evaluation Criteria:
The Exercise rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[10]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
LAB 2.1 (4.0 HOURS)
Assessment Preparation Checklist:

Read Chapter 10 (Sec. 10.3) from the textbook, Fundamentals of Web Development, to
understand the concepts of PHP classes and objects.

You may use the following navigation path to access the textbook, Pro PHP MVC, from the ITT
Tech Virtual Library:
Basic Search> Browse> Browse by Format> Books> Books24x7> Search by keywords “Pro PHP
MVC.” Read Chapter 3 to understand the basic concepts and functioning of PHP MVC.

Review the lesson for this module, which explains the application of the PHP classes and Object
Oriented Objects, through data encapsulation, data protecting in PHP, authentication,
cryptography and authorization.
Title: Designing PHP Classes for User Account Information
In this lab, you will design a PHP class to hold the user account information for the Share Your Travels
website. The database tables TravelUser and TravelUserDetails contain user login
information for the website. In a good object-oriented design, a single class can represent those tables
that allow for value retrieval and update through a set of properties and functions. As data values are
altered in the object, it must be updated to the database for persistence.
Required Setup and Resources:

On the Fedora 20 VM, create a new Static Web Project called SD3240-Lab2.1 in Eclipse and Add
PHP Support.

Under the Servers tab, right click on the HTTP Server and select Add and Remove… then add the
new project to the server.

Copy the latest version of the share-your-travels website to the WebContent folder under a
folder share-your-travels.
© ITT Educational Services, Inc.
All Rights Reserved.
[11]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
Recommended Procedures:
Part 1: Create the TravelUser class
1. Use MySQL Workbench to run the following SQL query that you will use to obtain the user
account details:
SELECT TravelUser.UID as UID, UserName, Pass, State, DateJoined,
DateLastModified, FirstName, LastName, Address, City, Region,
Country, Postal, Phone, Email, Privacy FROM TravelUser INNER JOIN
TravelUserDetails ON TravelUser.UID = TravelUserDetails.UID
2. Note the number and name of each field returned from the query. These will be the properties
available in the class.
3. Create a new PHP file called TravelUser.class.php that will represent the user account
information in object form. Add all the appropriate properties and “getter” functions.
4. Create a TravelUserTableGateway.class.php that contains the SQL query necessary
to obtain all the account details by user account ID. Note, that the query from step 1 returns
details from ALL users, whereas this gateway class should be able to retrieve a single row.
Part 2: Add account details page
1. Add a new page called single-user.php to the website that displays account details retrieved
from the TravelUser class.
2. Add a link to the account details page from the main browse-images pages. Presently, you can
simply hard-code a single user account id to use.
3. Enhance the account details page to allow updates of address, phone, and email. Enhance the
TravelUser class to contain “setter” functions for those properties that are updateable. The
function must update appropriate the MySQL database table.
Submission Requirements:
A single ZIP file submission should contain:

The new classes PHP files

Other updated source files
Evaluation Criteria:
The Lab rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[12]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
LAB 2.2 (4.0 HOURS)
Assessment Preparation Checklist:

Read Chapter 16 (Sec. 16.2–16.4) from the textbook, Fundamentals of Web Development, which
explains the concepts covered under Security, such as Authentication and its application.

Review the lesson for this module, which explains the application of the PHP Classes and Object
Oriented Objects and concepts of Security such as Authentication and Cryptography.
Title: Implementing Authentication Strategy
In this lab, you will explore authentication strategies for public websites by adding the ability to login
securely to the Share Your Travels website.
Required Setup and Resources:

On the Fedora 20 VM, create a new Static Web Project called SD3240-Lab2.2 in Eclipse and Add
PHP Support.

Under the Servers tab, right click on the HTTP Server and select Add and Remove… then add the
new project to the server.

Copy the latest version of the share-your-travels website to the WebContent folder under a
folder share-your-travels.
Recommended Procedures:
Part 1: Add login capabilities
1.
Add a login page to the Share Your Travels website that accepts user login (email) and
password. Note that each user already added to the site has a password of “abcd1234”.
2.
Use a cookie set at login so that each page knows the current user.
3.
Update the appropriate user account details pages so that the details are shown for the user
that is currently logged on.
4.
Add a logout function to the website that cleans up the cookie.
5.
Update the pages so that a non-authenticated user can only browse the images, and not
open any detailed views.
6.
Test all the pages.
© ITT Educational Services, Inc.
All Rights Reserved.
[13]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
Part 2: Secure the login
1. Change the TravelUser database table and associated Web pages so that the password is
stored with an MD5 hash instead of cleartext.
2. Add a change password page that updates the hash entry in the database.
3. Update the website to use HTTPS communication using a self-signed certificate.
4. Verify that the pages continue to function in secured mode.
Submission Requirements:
A single ZIP file submission should contain:

The new classes PHP files

Other updated source files
Evaluation Criteria:
The Lab rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[14]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
EXERCISE 3.1 (2.5 HOURS)
Assessment Preparation Checklist:

Read Chapters 15 (Sec. 15.1–15.5, 15.7) and 17 from the textbook, Fundamentals of Web
Development. The readings of these chapters focus on the concept of XML processing and web
services.

You may use the following navigation path to access the textbook Pro PHP Programming from
the ITT Tech Virtual Library:
Basic Search> Browse> Browse by Format> Books> Books24x7> Search by keywords “Pro PHP
Programming.” Read Chapter 14, which explains the use of registration, sessions, and logins.

Review the lesson for this module, which explains the concepts of the Programming languages
like jQuery, AJAX and XML. The module also explains the use of these languages in implementing
web services.
Title: Understanding XML and Web Services
Answer the following questions in this exercise:

Write a jQuery selector to get all the <p> that contain the word “hello.”

What are the advantages of using asynchronous requests over traditional synchronous ones?

What are the two techniques for AJAX file upload?

What is the base method on which all jQuery animations rely?

What is well-formedness and validity in the context of XML? How do both differ?

What is XSLT? How can it be used in web development?

What is the in-memory and the event approaches to XML processing? How do both differ?

What are some examples of each approach in PHP? Imagine that you are asked to provide
advice on implementing web services for a site.

Discuss the merits and drawbacks of SOAP- and REST-based web services and for XML versus
JSON as a REST data format.
Submission Requirements:
Submit your responses in a 2–3 page Microsoft Word document of the following specifications:

Font: Arial; 12-Point

Line Spacing: Double using APA formatting for the paper.
© ITT Educational Services, Inc.
All Rights Reserved.
[15]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
Evaluation Criteria:
The Exercise rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[16]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
LAB 3.1 (4.0 HOURS)
Assessment Preparation Checklist:

Read Chapter 15 (Sec 15.1–15.5, 15.7) from the textbook, Fundamentals of Web Development,
which introduces the concepts of languages like Advanced Java Scripts, jQuery, and AJAX.

You may use the following navigation path to access the textbook Pro PHP Programming from
the ITT Tech Virtual Library:
Basic Search> Browse> Browse by Format> Books> Books24x7> Search by keywords “Pro PHP
Programming.” Read Chapter 15.

Review the lesson for this module, which explains the concepts and application of the
programming languages discussed. The module also explores the MVC framework, XML
processing, animation and creating web services in PHP.
Title: PHP and AJAX Application
This lab will build your own favorites gallery using jQuery AJAX for the Share Your Travels website. The
custom gallery will be persisted into the database and restored upon next retrieval.
Required Setup and Resources:

On the Fedora 20 VM, create a new Static Web Project called SD3240-Lab3.1 in Eclipse and Add
PHP Support.

Under the Servers tab, right click on the HTTP Server and select Add and Remove… then add the
new project to the server.

Copy the latest version of the share-your-travels website to the WebContent folder under a
folder share-your-travels.
Recommended Procedures:
Part 1: Add Favorites framework and navigation
1. Modify travel-utilties.inc.php so that each <img> in the
displayImagesThumbnails function uses the class name galleryImage.
2. Create a new JavaScript file called favorites.js under WebContent directory.
3. Inside the PHP travel-head.inc script, include jQuery from the CDN and include
favorites.js.
© ITT Educational Services, Inc.
All Rights Reserved.
[17]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
4. Write code to create extra <div> elements: two for navigation and three to hold the images in
the gallery. Give the image <div> elements a class name galleryPic, and the navigation divs
unique IDs. Style them appropriately with starter file gallery.css.
5. Upon the page loading, the script should select using jQuery all the <img> elements with class
galleryImage. Using the title and src details, the newly created <div> elements can have
images and titles loaded.
6. Add a listener so that when the navigation <div> elements are clicked, you respond by animating
all the images moving left or right. Upon completion of the animation, change the images and
reset their location (left, middle, and right).
Part 2: Add to favorites
1. Using MySQL Workbench, create a new table in the travels database called Favorites
that maps the UserID to the ImageID. The table should remain empty.
2. Implement an Add to Favorites button for each image in browse-image.php that
asynchronously sends the image ID to add in the XML form over a jQuery AJAX call.
3. Create a new PHP-based service to respond to the AJAX request by inserting a new row into the
Favorites table. Hint: Do not insert duplicates.
4. Change favorites.js to use a jQuery AJAX call to retrieve the list of favorites title and src in
XML for the current user. Dynamically update the returned <img> tags to fill in the class
galleryImage.
5. Create a new PHP-based service to respond to the AJAX request by querying the Favorites
table and creating the XML.
6. Make sure to asynchronously refresh the favorite’s gallery after adding a new image to the
favorites.
7. Verify that you can add favorites to the list.
8. Ensure that leaving the page and returning to it maintain the list of favorites.
Submission Requirements:
A single ZIP file submission should contain:

The new classes PHP files

Other updated source files
© ITT Educational Services, Inc.
All Rights Reserved.
[18]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
Evaluation Criteria:
The Lab rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[19]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
PROJECT PART 1 (7.0 HOURS)
Title: Building a Knowledge Base Social Network
Submit Project Part 1 for evaluation to your instructor. Refer to “Project: Creating a Social Networking
Website in the LAMP Environment” for a detailed description of the project.
© ITT Educational Services, Inc.
All Rights Reserved.
[20]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
DISCUSSION 4.1 (3.0 HOURS)
Title: Content Management
Discuss the following:

What are the advantages and disadvantages of incorporating WordPress logins and Facebook
logins into a website?

What key features do all social networks have?

What is the easiest way to integrate social networks into your site?

How do you integrate the Facebook like button into your pages?
Participation Requirements:
Respond to at least two of your classmates. When responding:

Provide complete, well-thought-out responses.

Ask questions, share experiences, challenge ideas, and help your peers expand their responses.
Evaluation Criteria:
The Discussion rubric will be used to evaluate the assessment.
Note: One-sentence answers will not be sufficient. If your answer is "I agree" or "I disagree," explain
why you agree or disagree. Remember that a discussion is an opportunity to interact with your
classmates. Observe discussion etiquette: Be respectful, kind, and nonjudgmental of your classmates.
© ITT Educational Services, Inc.
All Rights Reserved.
[21]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
EXERCISE 4.1 (3.0 HOURS)
Assessment Preparation Checklist:

Read Chapters 18, 20, and 21 from the textbook, Fundamentals of Web Development. The
readings of these chapters focus on content management systems, search engines, and social
network integration.

Review the lesson for this module, which explains the application of how to add search engines
and other social networking features.
Title: Understanding Search Engines
Answer the following questions in the exercise:

What is the difference between a post and a page in WordPress?

How can you override the default query in WordPress?

What is the relationship between templates and themes in WordPress?

Identify the type of information indexed in a website.

Do crawlers identify themselves to your site? How? Why is anchor text crucial to SEO?

How are meta tags used to control web crawlers?

Why is hiding text on the page counterproductive?

What key features do all social networks have?

What is XFBML, and where is it used?
Submission Requirements:
Submit your responses in a 2–3 page Microsoft Word document of the following specifications:

Font: Arial; 12-Point

Line Spacing: Double using APA formatting for the paper.
Evaluation Criteria:
The Exercise rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[22]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
LAB 4.1 (4.0 HOURS)
Assessment Preparation Checklist:

Read Chapter 20 from the textbook, Fundamentals of Web Development, to understand the
anatomy of search engines, web crawlers, scrapers and white-hat search engine optimization.

Review the lesson for this module, which focuses on how to integrate social networking widgets
in a website and how to handle content on a website.
Title: Optimizing a Site for Search Engines
This lab builds upon the Share Your Travels website to demonstrate white-hat search engine
optimization techniques that try and improve your rank. Without a real site on a live domain, the
impact of the optimization cannot be measured. Hence this exercise is purely academic.
Required Setup and Resources:

On the Fedora 20 VM, create a new Static Web Project called SD3240-Lab4.1 in Eclipse and Add
PHP Support.

Under the Servers tab, right click on the HTTP Server and select Add and Remove… then add the
new project to the server.

Copy the latest version of the share-your-travels website to the WebContent folder under a
folder share-your-travels.
Recommended Procedures:
Part 1: Optimization for web crawlers
1. First, your search engine optimization should focus on the <title> tag. Each page should have a
unique title that reflects its content. Update the PHP code to build a title string using the photo
caption or location.
2. If you have not already ensure that all your images have alternate and title text that is
generated based on the information about the image. This way, search engines will associate
that text with the image and thus your website.
3. Check the links in the navigation section of the page to make sure that they all use good anchor
text.
4. Determine how many links you have going out to other domains. Try to reduce this number if
possible.
© ITT Educational Services, Inc.
All Rights Reserved.
[23]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
5. Alter the PHP code to avoid the query strings in lieu of directories using Apache redirect
directives.
6. Create meta tags for keywords and description for all your pages.
7. Finally, revisit the content to ensure that it is descriptive enough and has enough keywords to
be properly indexed.
8. In order to see what a crawler might see in the Web pages, navigate through the site with
JavaScript turned off.
Part 2: Crawl your own website
1. Add the starter file Crawler.class.php to the project. It will identify links and email
addresses.
2. Modify the crawler so that it only indexes URLs and email links from the project domain.
3. Store this crawler data (URL, links out, links in, and emails) into a database.
4. Crawl any identified external URLs only once, and only to confirm that the link is valid, i.e. do no
indexing outside the domain.
5. Once every page has been crawled, compile some statistics on the pages, which have the most
links out and links in. Hopefully the top pages are the home pages and pages in your navigation.
If not, you may have to correct errors in the site’s structure.
6. Identify and output any external URLs that could not be accessed, i.e. bad links.
7. Calculate an internal page rank for every page in the site—thus quantifying the importance of a
page.
Submission Requirements:
A single ZIP file submission should contain:

The new classes PHP files

Other updated source files
Evaluation Criteria:
The Lab rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[24]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
LAB 4.2 (4.0 HOURS)
Assessment Preparation Checklist:

Read Chapter 21 from the textbook, Fundamentals of Web Development, to understand social
networks, Social Network Integration and ways to monetize a website with advertisements.

Review the lesson for this module, which explores the mass appeal of social networks with users
and the need to optimize them and integrate them with widgets to make them easier to use.
Title: Integrating Social Network Widgets in a Website
Using the Share Your Travels website as an example, you will integrate social media widgets from the
three social networks into each travel photo detail page.
Required Setup and Resources:

On the Fedora 20 VM, create a new Static Web Project called SD3240-Lab4.2 in Eclipse and Add
PHP Support.

Under the Servers tab, right click on the HTTP Server and select Add and Remove… then add the
new project to the server.

Copy the latest version of the share-your-travels website to the WebContent folder under a
folder share-your-travels.
Recommended Procedures:
Part 1: Integrate with Social Widgets
1. Visit Facebook, Twitter, and Google and sign up for accounts, if you don’t already have them.
Note: To get an account, you should read and agree to the terms of service.
2. Create pages for the Facebook and Google+ social networks. Set these pages up with some
images and text that describe your site.
3. Like, favorite, and share your existing website with your social network profiles.
4. Add links to the newly created social networks using the URL of the page or Twitter account. You
might consider using the social network icons.
Part 2: Integrate with Social Widgets
1. Open the single-image.php file.
© ITT Educational Services, Inc.
All Rights Reserved.
[25]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
2. Prepare for integrating the social widgets by identifying variables you can use in your widgets.
Consider the photo city and country. Add these elements to the page as Open Graph semantic
tags.
3. Add the ability to Like a particular photo.
4. Add the Google+ 1 widget.
5. Finally, add the Tweet This widget to the single-post.php page.
6. Verify that the updated photo detail pages contain the social widgets located alongside the
photo.
7. Verify the post detail pages contain the Twitter widget alongside the post.
8. Visit multiple photo pages on the site, and like, +1 and visit multiple posts and tweet each of
them.
9. Then visit your home feeds in each of the social networks to confirm that your activity has been
noted as a wall post.
Submission Requirements:
A single ZIP file submission should contain:

The new classes PHP files

Other updated source files
Evaluation Criteria:
The Lab rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[26]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
EXERCISE 5.1 (3.0 HOUR)
Assessment Preparation Checklist:

Read Chapter 7 from the textbook, Fundamentals of Web Development. The readings of this
chapter extensively cover the topic of Web Media.

You may use the following navigation path to access the textbook jQuery, CSS3, and HTML5 for
Mobile and Desktop Devices from the ITT Tech Virtual Library:
Basic Search> Browse> Browse by Format> Books> Books24x7> Search by keywords “jQuery,
CSS3, and HTML5 for Mobile and Desktop Devices.” Read Chapters 8, 9, 11, and 12.

Review the lesson for this module, which covers concepts like digital representation of images,
color models, image concepts, HTML5 canvas, and audio video.
Title: Conceptualizing Multimedia
Answer the following questions in the exercise:

Identify the features of the GIF file format.

Identify the features of the PNG file format.

Explain the relationship between media encoding, codecs and container formats.

Differentiate between JPEG and SVG file formats.

How is jQuery Mobile different from jQuery?

What is the purpose of the orientationChange event in jQuery Mobile?

Describe how jQuery Mobile can be used to obtain values from the accelerometer in the mobile
device.

What plug-in for jQuery allows you to use jQuery syntax for the HTML5 canvas element?
Submission Requirements:
Submit your responses in a 2–3 page Microsoft Word document of the following specifications:

Font: Arial; 12-Point

Line Spacing: Double using APA formatting for the paper.
Evaluation Criteria:
The Exercise rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[27]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
LAB 5.1 (3.0 HOURS)
Assessment Preparation Checklist:

You may use the following navigation path to access the textbook from the ITT Tech Virtual
Library:
Basic Search> Browse> Browse by Format> Books> Books24x7> Search by keywords “jQuery,
CSS3 and HTML5 for Mobile and Desktop Devices.” Read Chapters 8, 9, and 11.

Review the lesson for this module, which covers optimizing digital representation of images,
color models, image concepts, HTML5 canvas, and audio video for mobile devices.
Title: Apache Mobile Filter
In this lab, you will use an open-source module from Apache to assist in simple support for mobile
devices for the Share Your Travels website.
Required Setup and Resources:

On the Fedora 20 VM, create a new Static Web Project called SD3240-Lab5.1 in Eclipse and Add
PHP Support.

Under the Servers tab, right click on the HTTP Server and select Add and Remove… then add the
new project to the server.

Copy the latest version of the share-your-travels website to the WebContent folder under a
folder share-your-travels.
Recommended Procedures:
Part 1: Detect mobile devices in your website
1. As root, install some Perl dependencies needed for AMF:
# yum install perl-Cache-Cache perl-Cache-Memcached perl-DigestMD5 perl-Imager perl-LWP-Protocol-https
2. Download the AMF Suite from http://apachemobilefilter.org/download/
3. Untar the package under a temporary directory.
4. Run the following commands to install the Perl modules:
# perl Makefile.PL
# make
# make install
© ITT Educational Services, Inc.
All Rights Reserved.
[28]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
5. Use http://apachemobilefilter.org/setuponline/ to create the configuration file with AMF Image
Rendering, and then download the amf.conf to /etc/httpd/conf.d.
6. Create an m-browse-images.php page that shows just one thumbnail at a time as well as the city
and country filter that would be more appropriate for mobile devices.
7. Add a query rewrite rule under Apache so that when %{ENV:AMF_DEVICE_IS_MOBILE} variable
is true, then the URL is redirected to the m- version of the page.
8. Restart Apache to pick up the changes.
# systemctl restart htttpd.service
9. Test by viewing the main page of Share Your Travels on both the desktop with Firefox as well as
any mobile device you may have. Ensure that the original browse-images.php page is loaded in
Firefox, but the m-browse-images.php is loaded from a mobile device.
Part 2: Automatically scale images to fit mobile devices
1. Create an Apache .htaccess configuration in your local public_html directory to configure AMF
image rendering.
2. Add the following configuration:
PerlSetEnv ResizeImageDirectory /home/AMF_home/img_resized
<Location /SD3120-Lab5.1/share-your-travels/images/*>
SetHandler modperl
PerlOutputFilterHandler Apache2::AMFImageRendering
</Location>
3. Update single-image.php so that each image is rendered automatically to 33% of the available
screen, whether it be a full web browser or mobile device browser. For example:
<img src=”/<path>/image.png?dim=33”>
4. Use a web browser and a mobile device to validate the image size is adjusted automatically.
Submission Requirements:
A single ZIP file submission should contain:

The new classes PHP files

Other updated source files
Evaluation Criteria:
The Lab rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[29]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
LAB 5.2 (3.0 HOURS)
Assessment Preparation Checklist:

You may use the following navigation path to access the textbook from the ITT Tech Virtual
Library:
Basic Search> Browse> Browse by Format> Books> Books24x7> Search by keywords “Pro PHP
Programming.” Read Chapter 3.

Review the lesson for this module, which covers concepts such as digital representation of
images, color models, image concepts, HTML5 canvas, and audio video.
Title: Generating QR Codes from PHP
In this lab, you will use a technique in PHP to generate your own QR codes to assist in a quick download
of the Share Your Travels pictures.
Required Setup and Resources:

On the Fedora 20 VM, create a new Static Web Project called SD3240-Lab5.2 in Eclipse and Add
PHP Support.

Under the Servers tab, right click on the HTTP Server and select Add and Remove… then add the
new project to the server.

Copy the latest version of the share-your-travels website to the WebContent folder under a
folder share-your-travels.
Recommended Procedures:
Part 1: Configure phpqrcode
1. As root, install some PHP dependencies needed for PHP QRCode software:
# yum install php-gd
2. Restart Apache to pick up the changes.
# systemctl restart htttpd.service
3. Download the PHP module from http://sourceforge.net/projects/phpqrcode/files/releases/
4. Unzip files under the project workspace.
5. Create the a test PHP file including the following code:
<?php
require_once('phpqrcode/qrlib.php');
QRcode::png( 'Hello world qrcode' ); //direct to browser
© ITT Educational Services, Inc.
All Rights Reserved.
[30]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
?>
6. Open up the test page in a web browser to verify QR code is present.
7. Use a QR scanner to view the Hello World message from the QR code.
Part 2: Add QR code link to your image details
1. Install the PHP file.
2. Under the single-image.php file, update the details to include a QR code generated from
phpqrcode with a direct link to the image on the page.
3. Open up the image details page to verify the QR code is present.
4. Use a QR scanner on your mobile device to scan the link, then open the link to view that image
directly on your mobile device
Submission Requirements:
A single ZIP file submission should contain:

The new classes PHP files

Other updated source files
Evaluation Criteria:
The Lab rubric will be used to evaluate this assessment.
© ITT Educational Services, Inc.
All Rights Reserved.
[31]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
DISCUSSION 6.1 (2.0 HOURS)
Title: Advantages and Disadvantages of MVC Framework

You may use the following navigation path to access the textbook from the ITT Tech Virtual
Library:
Basic Search> Browse> Browse by Format> Books> Books24x7> Search by keywords “Pro PHP
MVC.” Read Chapters 22, 26, and 30.
Participation Requirements:
Respond to at least two of your classmates. When responding:

Provide complete, well-thought-out responses.

Ask questions, share experiences, challenge ideas, and help your peers expand their responses.
Evaluation Criteria:
The Discussion rubric will be used to evaluate the assessment.
Note: One-sentence answers will not be sufficient. If your answer is "I agree" or "I disagree," explain
why you agree or disagree. Remember that a discussion is an opportunity to interact with your
classmates. Observe discussion etiquette: Be respectful, kind, and nonjudgmental of your classmates.
© ITT Educational Services, Inc.
All Rights Reserved.
[32]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
PROJECT PART 2 (10 HOURS)
Title: Enhance the Knowledge Base Social Network
Submit Project Part 2 to your instructor for evaluation. Refer to “Project: Creating a Social Networking
Website in the LAMP Environment” for a detailed description of the project.
© ITT Educational Services, Inc.
All Rights Reserved.
[33]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
FINAL EXAM (2.0 HOURS)
Assessment Preparation Checklist:
To prepare for this assessment, revisit the assigned readings of the previous modules from the textbook,
Fundamentals of Web Development.
Title: Final Exam
Take the final exam.
© ITT Educational Services, Inc.
All Rights Reserved.
[34]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
PROJECT: CREATING A SOCIAL NETWORKING WEBSITE IN THE LAMP ENVIRONMENT
Project Introduction:
In this project, you will create and design a knowledge base social networking website on the LAMP
Environment to incorporate technical data. The users of the website can post technical questions and
can respond with helpful tips. Each response receives votes for “helpful” or “not helpful,” and the most
helpful response is flagged as the best answer. The voting results and the responses should be easily
searchable in the website created.
Course Learning Objectives Covered:

Describe effective techniques for building interactive Web applications in a LAMP environment.

Differentiate Web page presentation from business logic code and database access.

Create components that can be shared across Web pages.

Create database details within PHP objects.

Enable PHP pages to communicate securely with MySQL.

Create application to support asynchronous web services using XML-SOAP and REST.

Manage content of websites using open-source software.

Add searching capabilities and social networking features.

Use multimedia effectively to enhance Web page presentation.

Optimize the website experience for mobile devices.

Identify alternate open-source frameworks for developing and implementing functional
websites.
© ITT Educational Services, Inc.
All Rights Reserved.
[35]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
PROJECT SUBMISSION PLAN
Project
Description/Requirements of Project Part
Part
Evaluation Criteria
Project
Assessment Preparation Checklist:
The Project Rubric
Part 1
To prepare for Project Part 1:
Part 1 will be used to

Revisit the assigned readings from Modules 1 through evaluate this
assessment.
3 from your textbook.

Go through the lessons from Module 1 through 3 that
present important points that you need to consider
before submitting Project Part 1.
Title: Building a Knowledge Base Social Network
Construct an interactive website for technical questions and
answers. The following pages and features are required:
1.
2.
User registration page

Users can self-register accounts.

Email shall be used to login.

Strong passwords shall be required.
User login page

User login information shall be stored in the
MySQL database.

3.
Passwords shall be stored in the MD5 hash.
Unanswered questions page

A list of questions that have no responses shall be
shown.
4.
Posting a new question page

Any user who is logged in can post a question
© ITT Educational Services, Inc.
All Rights Reserved.
[36]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Project
Description/Requirements of Project Part
Part
5.
Study Guide
Evaluation Criteria
Viewing/Posting a response page

Any user who is logged in can post an answer.

Any user who is logged in can vote on any answer.

A vote can be “helpful” or “not helpful”.

The answers shall be listed in order from the most
helpful to least helpful.
6.
Helpful users page

The top 10 most helpful users can be displayed.
Submission Requirements:
A single ZIP file submission should contain:

Database schema creation SQL script

All HTML and PHP files

All necessary image files
Due: Module 3
Grading Weight: 15%
Project
Part 2
Assessment Preparation Checklist:
The Project Rubric
Part 2 will be used to
To prepare for Project Part 2:

Revisit the assigned readings for Modules 4 and 6
from your textbook.

evaluate this
assessment.
Go through the lessons for Modules 4 and 6, which
present important points that you need to consider
before submitting Project Part 2.
© ITT Educational Services, Inc.
All Rights Reserved.
[37]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Project
Description/Requirements of Project Part
Part
Study Guide
Evaluation Criteria
Title: Enhance the Knowledge Base Social Network
Update the website from Part 1 to include the following new
requirements:

Redesign the website layout using a WordPress
theme.

A user can login with a Facebook account.

A user image and most helpful responses are
displayed upon mouse over of the user login listed
on question and response pages.

Questions and responses are searchable at
minimum by keyword.
Submission Requirements:
A single ZIP file submission should contain:

Database schema creation SQL script

All HTML and PHP files

All necessary image files
Due: Module 6
Grading Weight: 10%
(End of Study Guide)
© ITT Educational Services, Inc.
All Rights Reserved.
[38]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
APPENDIX A: GRADING RUBRICS FOR STUDENTS
DISCUSSION RUBRIC
© ITT Educational Services, Inc.
All Rights Reserved.
[39]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
EXERCISE RUBRIC
© ITT Educational Services, Inc.
All Rights Reserved.
[40]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
LAB RUBRIC
© ITT Educational Services, Inc.
All Rights Reserved.
[41]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
PROJECT RUBRIC PART 1
© ITT Educational Services, Inc.
All Rights Reserved.
[42]
12/8/14
SD3240 Creating Websites in the LAMP Environment
Study Guide
PROJECT RUBRIC PART 2
© ITT Educational Services, Inc.
All Rights Reserved.
[43]
12/8/14