1 dig 3134 – lecture 11: two dimensional arrays and dynamic controls and constants michael moshell...

1

DIG 3134 – Lecture 11:

Two Dimensional ArraysAnd

Dynamic ControlsAND

CONSTANTS

Michael MoshellUniversity of Central Florida

Internet Software Design

2222

The Conceptual PathwayPART ONE2 dimensional array

$Grid[$x][$y]$Miketable[$i][$j] – you can use any name, any indices

This can be thought of as aMatrix of cells, like aSpreadsheet.

Indices (plural of 'index')Can be numbers 1,2,3 orStrings like A, B, C.

I recommend numbers, because 'for' loops are easy.

1 2 3 4 5 6

1

2

3

4

5

6

33333


What happens if we run this code?

//$mtable[$i][$j]

For ($i=1; $i<=6; $i++) { $mtable[$i][2]=34;}

(Our convention: the firstindex ($i) is always “across”, the second “down”)

1 2 3 4 5 6

1

2

3

4

5

6

44444



//$mtable[$i][$j]

For ($i=1; $i<=6; $i++) { $mtable[$i][2]=34;}


1 2 3 4 5 6

1

2 34 34 34 34 34 34

3

4

5

6

55555


What happens if we THEN run this code?

//$mtable[$i][$j]

For ($i=1; $i<=6; $i++) { $mtable[$i][2]=$i;}


1 2 3 4 5 6

1

2

3

4

5

6

66666


What happens if we THEN run this code?

$mtable[$i][$j]

For ($i=1; $i<=6; $i++) { $mtable[$i][2]=$i;}


1 2 3 4 5 6

1

2 1 2 3 4 5 6

3

4

5

6

77777

In-Class ExerciseModify this code to produce the second image

$mtable[$i][$j]

For ($i=1; $i<=6; $i++) { $mtable[$i][2]=$i;}


1 2 3 4 5 6

1

2 1 2 3 4 5 6

3

4

5

6

1 2 3 4 5 6

1 1

2 2

3 3

4 4

5 5

6 6

88888



//$mtable[$i][$j]

For ($i=1; $i<=6; $i++) { $mtable[$i][$i]=34;}

1 2 3 4 5 6

1

2

3

4

5

6

99999



//$mtable[$i][$j]

For ($i=1; $i<=6; $i++) { $mtable[$i][$i]=34;}

1 2 3 4 5 6

1 34

2 34

3 34

4 34

5 34

6 34

1010101010

Homework #1:DueNEXT TUESDAY (ready for “gotcha” in class)

Create a loop to construct this pattern in the array.

(Yes, you could usetwo loops. Butit is possibleto do this withONE loop.)

I’ll take two,if you can’tfigure out one.

1 2 3 4 5 6

1 1 2

2 2 4

3 3 6

4 4 8

5 5 10

6 6 12

111111111111

The Conceptual PathwayPART ONENested LOOPs! Now it gets INTERESTINGer

// $mtable[$i][$j]

for ($i=1; $i<=6; $i++){ for ($j=1; $j<=6; $j++) { $mtable[$i][$j]=34; }}

1 2 3 4 5 6

1

2

3

4

5

6

wordpress.com

What will this produce?

121212121212

The Conceptual PathwayPART ONE2 dimensional LOOP! Now it gets INTERESTINGer

// $mtable[$i][$j]


1 2 3 4 5 6

1 34 34 34 34 34 34

2 34 34 34 34 34 34

3 34 34 34 34 34 34

4 34 34 34 34 34 34

5 34 34 34 34 34 34

6 34 34 34 34 34 34

wordpress.com

131313131313

The Conceptual PathwayPART ONE2 dimensional LOOP! Now it gets INTERESTINGer

// $mtable[$i][$j]


History of $i and $j.

1 2 3 4 5 6

1 34 34 34 34 34 34

2 34 34 34 34 34 34

3 34 34 34 34 34 34

4 34 34 34 34 34 34

5 34 34 34 34 34 34

6 34 34 34 34 34 34

wordpress.com

$i $j1 11 21 31 41 51 62 12 22 32 42 52 6

etc etc

141414141414

Homework #2:Modify the codeso that it makes a MULTIPLICATION TABLELike this one!

// $mtable[$i][$j]

for ($i=1; $i<=6; $i++){ for ($j=1; $j<=6; $j++) { $mtable[$i][$j]=?? }}

wordpress.com

1 2 3 4 5 6

1 1 2 3 4 5 6

2 2 4 6 8 10 12

3 3 6 9 12 15 18

4 4 8 12 16 20 24

5 5 10 15 20 25 30

6 6 12 18 24 30 36

15

Now let's see shipaint.php

• Well, it's really just• a crude PAINT• PROGRAM, but• it will get us started.

Look at ship01.php

161616

The Conceptual PathwayPART ONE

• create a dimensional array• ‘render it’ as an HTML table• use <style> to set color and size of squares

HOMEWORK #3: Carefully analyze shipaint.php

and be ready to EXPLAIN and HAND SIMULATE

any line of code in this program.

1717

Goal: Build a simple Battleship Game

• Players take turns• enter x, y, (b or g)

Play the test game(shipstarter.php)

Read the Requirements

•X• Y

1818

Project 3 Specification

• Go read the specification for Project 3

• Discuss the stages from 80% to 90%

• Discuss the options above 90%

• Then we move forward to review the example code

shipstarter.php is your starter kit for Project3. You mayuse this code as part of your submission (but you don't have to.)

19191919

A note about $_SESSION

I’m seeing lots of CONFUSED Code

like$_SESSION['linenumber']=$_SESSION['linenumber']+1;in the middle of your code.

I recommend: Bring in all SESSION stuff at top of main, into scalar variables like this:

$linenumber=$_SESSION['linenumber'];

Then in the program, as needed: $linenumber++;

Put away all SESSION data at the bottom$_SESSION['linenumber’]=$linenumber;

2020202020

Upward Toward 90%Providing an Alphabetic Top Margin

HINT 1: We need functions to convert 1 to A, 2 to B etc.

and (to process inputs) also, A to 1, and B to 2 etc.

Key Fact: There are two built-in functions in PHP tohelp us.

$n=ord('A');print "ASCII for 'A' is $n";

this will print ASCII for 'A' is 65

2121212121

Upward Toward 90%Two key functions: ord and chr

$n=ord('A');

A 65

and

$c=chr(65);

65 A

2222222222

Upward Toward 90%Providing an Alphabetic Top Margin

#numtochar: maps 1 to A, 2 to B, etc. function numtochar($numin) { $numa=ord('A');

//we want numin=1 to produce chr('A'), so $numout=$numa+$numin-1; // now if numin=1, numout = chr('A')

$charout=chr($numout); // and if numin=2, numout = chr('B') etc. return $charout;

} #numtochar

2323232323

Upward Toward 90%

Hints 2 and 3

* Go read the document "project3.hints.doc"

24242424

The Conceptual PathwayHINT FOUR

•Dynamic generation of radio buttons

You've seen this trick before, in the pundex program.But now, we need to do it in two dimensions.

I want a bunch of radio buttons like this:<input type='radio' name='fillhere' value='1.1'><input type='radio' name='fillhere' value='1.2'>…<input type='radio' name='fillhere' value='1.10'><input type='radio' name='fillhere' value='2.1'> etc…. until 10.10. A total of 100 radio buttons, one fieldname.

2525252525

Dynamic radio buttonsQUESTION:How can I get two pieces of information (x and y)From one radio button?ANSWER:Put the info into a string, and unpack it later.

To produce this stuff:

<input type='radio' name='fillhere' value='1.1'><input type='radio' name='fillhere' value='1.2'>…Here's the trick - put this in your drawgrid 2d loop - print " <input type='radio' name='fillhere' value='$x.$y'>";

262626262626

Unpacking the infoQUESTION:How can I get two pieces of information (x and y)From one string like 1.2?ANSWER:

Bang! - - explode it.

$f=$_POST['fillhere']; // (why $f? why the $f not!!?) // (I just like f for 'fillhere')

If ($f){

$fparts=explode('.',$f);$x=$fparts[0];$y=$fparts[1];

}// now you can do $Grid[$x][$y]=whatever color

272727272727

And Finally ...QUESTION:What's WHITE? BLUE? LIGHTBLUE?

These are Defined Colors in HTML (147 of ‘em!)

www.w3schools.com/html/html_colornames.asp

But ... how can they be passing through to thebrowser WITH NO QUOTES AROUND ‘EM?

$Ships[$x][$y]=GOLD;

It’s an Ancient Flaw in PHP. ‘twould be better as:

$Ships[$x][$y]=‘GOLD’; // straight quotes of course

282828282828

And Then. ...QUESTION:What do we do next?

1) The practice (homework) problems, for next week

2) Start building Project 3. It’s due on 8 November(for show-and-tell); 10 November for grading.

AND if you have less than 150 on the MIDTERM,

You need to undergo the Remedial Processto salvage your grade. See Prof for Details.Limited Time Offer.

1 dig 3134 – lecture 11: two dimensional arrays and dynamic controls and constants michael moshell...

Documents