Watkins Web 3: Blog

Posts tagged with “exercises”

Exercise 14: MySQL

Connecting to and retrieving data from a MySQL database, processing it with PHP, and outputting it to the page.

Exercise 14 Exercise 14 Solution View Solution

Related Links

  • Sequel Pro, an excellent and free Mac program for creating, editing, and configuring MySQL databases.
  • SQLzoo.net, a site for learning the syntax of SQL commands like SELECT, UPDATE, INSERT, etc.

Exercise 13: Reading/Writing to files with PHP

This exercise continues to use the weather report code but has you explore (a) more use of dynamic classes, (b) reading inputs from a text file, and (c) writing a history of inputs back into a text file.

Exercise 13 Exercise 13 Solution View Solution

Exercise 12: Weather

Using inline CSS in conjunction with PHP.

Exercise 12 View Demo

And here’s a quick reminder of the two types of inline CSS:

Page-specific CSS

You can wrap regular CSS statements in the <head> of your HTML page using the <style> tag:


<!doctype html>
<head>
<title>My Page</title>
<style>
     h1 {color:red;}
     p {font-size:24px; line-height:30px;}
</style>
</head>
...

Inline CSS on particular HTML elements

You can also style a particular element with the style attribute. This will override styles inherited from the main stylesheet or the <style> tag in the page.

...
<p style="font-size:24px; line-height:30px;">My paragraph is large.</p>
...

So if I wanted to generate a random font size with PHP and just affect a single paragraph, I could do this:

<?php
$font_size = rand(10, 50); // generate a random number between 10 and 50
?>
<p style="font-size:<?php echo $font_size; ?>px; line-height:30px;">My paragraph is large.</p>
...

Exercise 11: Retrieving XML

Enjoy the magic of RSS, XML, and forms.

Exercise 11 Exercise 11 Solution View Solution

Exercise 10: Slicing and Dicing

Exercise 10 Exercise 10 Solution View Solution

Exercise 9: Looping and Data Retrieval

This exercise should be run on your web host. Make a new folder called ex9 somewhere in your account and upload all the files you’ve edited each time you need to see a change.

Exercise 9 Exercise 9 Solution View Solution

Exercise 8: Rock Paper Scissors

Write a program that lets a human user play Rock Paper Scissors against the computer. Playing the game should have the computer choose a random throw and then echo a string like this:

You threw Rock. Computer threw Paper. Computer wins.

In Terminal, type cd ~/Desktop and hit return. Now type ls and hit return. That should list all the files and folders on the Desktop, so you’re ready to run PHP files that are saved there. (You can review other Terminal commands on the Web 2 blog).

We want to run our script (say it’s called myscript.php) but also pass it a string that represents our “throw”. If you want to want play Scissors, type this:

php myscript.php "Scissors"

And here’s the beginning of the script we did in class:

<?php
// capture the user input (whatever they put after the filename in Terminal)
$user_throw = $argv[1];
// store possiblities in an array
$throws[0] = "Rock";
$throws[1] = "Paper";
$throws[2] = "Scissors";
$random_number = rand(0,2);
$computer_throw =  $throws[$random_number];
echo "\n\n\n\n";
echo "The user threw $user_throw";
echo "\n\n\n\n";
echo "And the Computer threw $computer_throw";
echo "\n\n\n\n";
?>

Bonus Round: Now convert your program into a function which picks a random throw for both User and Computer, plays them against each other, and keeps track of who won. It will look something like this:

function playgame($user_throw, $comp_throw) {
[code goes here]
}

Embed your function in a loop that runs the game 100 times. Output the winner of each game and also announce the total at the end (“User won 35, Computer won 35, and their were 30 ties”).

Update: Below are some possible solutions. There are probably many more ways to do this.

Exercise 8 Solution

Exercise 7 (Blog Loop and Stylesheet)

This exercise requires you to loop through some provided blog posts and write a quick stylesheet to lay the content out on the page. As usual, you’ll need to create a new directory on your server space and upload your files there each time you make a change.

Exercise 7

Exercise 6: PHP Functions, Loops

Exercise 6 Exercise 6 Solution View Solution

Exercise 5: PHP Variables, Arrays, Includes, and Control Structures

The demos and exercises for this exercise are written as PHP comments in the files themselves. Start with index.php and then move on to index2.php, modifying the files and creating new ones as needed. Since PHP requires Apache to execute the code, you’ll need to upload them to your server space.

  1. Download the zip file below to your desktop and unzip it
  2. Use Cyberduck to connect to your watkinswebdev.com server space; create a new folder called exercise5
  3. Upload the contents of the local ex5 folder into your remote exercise5 folder on your server space. You should now be able to view index.php by visiting http://watkinswebdev.com/[username]/exercise5/ (remember, URLS that end in a slash (/) refer to directories, and index.php always gets loaded by default if it exists
  4. Open the four text files in the ex5 folder on your local machine in Textwrangler. Now read and follow the instructions in index.php while viewing the output at http://watkinswebdev.com/[username]/exercise5/. When you need to change the file, edit in Textwrangler, save it, and upload it to your server space, overwriting the old version. Hit refresh in your browser to view the results.

Note: for PHP exercises, “View Solution” will of course only show the rendered HTML output. Download the source files to see the PHP that makes it happen.

Exercise 5 Exercise 5 Solution View Solution

Exercise 4: Floats vs. Positioning Part 2

Exercise 4 Exercise 4 Solution View Solution

Exercise 3: Floats vs. Positioning Part 1

After you’ve done this exercise you may want to take a look at Max Design’s CSS Layouts for more examples and techniques.

Exercise 3 Exercise 3 Solution View Solution

Exercise 2: CSS Properties Review

As with Exercise 1, your mission is to view the enclosed screenshot, then use appropriate HTML markup and CSS to match it as closely as possible. You are allowed one class and no IDs. No floats and no position:absolute or position:relative!

Be sure to refer to the CSS Properties and Inline vs. Block cheat sheets if you need to.

Exercise 2 Exercise 2 Solution View Solution

Exercise 1: Markup and Selector Review

Your task is to mark up the attached text in HTML, then style your markup to match the enclosed screenshot.

You may only add one ID and one class to the markup!

Exercise 1 Exercise 1 Solution View Solution