280 likes | 291 Views
Understand 2D arrays in software design, explore dynamic controls, create patterns using loops and in-class exercises.
E N D
Internet Software Design DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida
The Conceptual Pathway • PART ONE • 2 dimensional array • $Grid[$x][$y] • $Miketable[$i][$j] – you can use any name, any indices • This can be thought of as a • Matrix of cells, like a • Spreadsheet. • Indices (plural of 'index') • Can be numbers 1,2,3 or • Strings like A, B, C. • I recommend numbers, because 'for' loops are easy. 2 2 2
The Conceptual Pathway • PART ONE • 2 dimensional array • What happens if we run this code? • //$mtable[$i][$j] • For ($i=1; $i<=6; $i++) • { • $mtable[$i][2]=34; • } • (Our convention: the first • index ($i) is always • “across”, the second “down”) 3 3 3 3
The Conceptual Pathway • PART ONE • 2 dimensional array • What happens if we run this code? • //$mtable[$i][$j] • For ($i=1; $i<=6; $i++) • { • $mtable[$i][2]=34; • } • (Our convention: the first • index ($i) is always • “across”, the second “down”) 4 4 4 4
The Conceptual Pathway • PART ONE • 2 dimensional array • What happens if we THEN run this code? • //$mtable[$i][$j] • For ($i=1; $i<=6; $i++) • { • $mtable[$i][2]=$i; • } • (Our convention: the first • index ($i) is always • “across”, the second “down”) 5 5 5 5
The Conceptual Pathway • PART ONE • 2 dimensional array • What happens if we THEN run this code? • $mtable[$i][$j] • For ($i=1; $i<=6; $i++) • { • $mtable[$i][2]=$i; • } • (Our convention: the first • index ($i) is always • “across”, the second “down”) 6 6 6 6
In-Class Exercise • Modify this code to produce the second image • $mtable[$i][$j] • For ($i=1; $i<=6; $i++) • { • $mtable[$i][2]=$i; • } • (Our convention: the first • index ($i) is always • “across”, the second “down”) 7 7 7 7
The Conceptual Pathway • PART ONE • 2 dimensional array • What happens if we run this code? • //$mtable[$i][$j] • For ($i=1; $i<=6; $i++) • { • $mtable[$i][$i]=34; • } 8 8 8 8
The Conceptual Pathway • PART ONE • 2 dimensional array • What happens if we run this code? • //$mtable[$i][$j] • For ($i=1; $i<=6; $i++) • { • $mtable[$i][$i]=34; • } 9 9 9 9
Homework #1: • Due • NEXT TUESDAY (ready for “gotcha” in class) • Create a loop to construct this pattern in the array. • (Yes, you could use • two loops. But • it is possible • to do this with • ONE loop.) • I’ll take two, • if you can’t • figure out one. 10 10 10 10
The Conceptual Pathway • PART ONE • Nested LOOPs! Now it gets INTERESTINGer • // $mtable[$i][$j] • for ($i=1; $i<=6; $i++) • { • for ($j=1; $j<=6; $j++) • { • $mtable[$i][$j]=34; • } • } What will this produce? wordpress.com 11 11 11 11 11
The Conceptual Pathway • PART ONE • 2 dimensional LOOP! Now it gets INTERESTINGer • // $mtable[$i][$j] • for ($i=1; $i<=6; $i++) • { • for ($j=1; $j<=6; $j++) • { • $mtable[$i][$j]=34; • } • } wordpress.com 12 12 12 12 12
The Conceptual Pathway • PART ONE • 2 dimensional LOOP! Now it gets INTERESTINGer • // $mtable[$i][$j] • for ($i=1; $i<=6; $i++) • { • for ($j=1; $j<=6; $j++) • { • $mtable[$i][$j]=34; • } • } • History of $i and $j. wordpress.com 13 13 13 13 13
Homework #2: • Modify the code • so that it makes a MULTIPLICATION TABLE • Like this one! // $mtable[$i][$j] for ($i=1; $i<=6; $i++) { for ($j=1; $j<=6; $j++) { $mtable[$i][$j]=?? } } wordpress.com 14 14 14 14 14
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
The Conceptual Pathway • PART 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. 16 16
Goal: Build a simple Battleship Game • X • Y • Players take turns • enter x, y, (b or g) • Play the test game • (shipstarter.php) • Read the • Requirements 17
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 may • use this code as part of your submission (but you don't have to.) 18
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; 19 19 19
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 to • help us. • $n=ord('A'); • print "ASCII for 'A' is $n"; • this will print ASCII for 'A' is 65 20 20 20 20
Upward Toward 90% • Two key functions: ord and chr $n=ord('A'); A 65 and $c=chr(65); 65 A 21 21 21 21
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 22 22 22 22
Upward Toward 90% • Hints 2 and 3 • * Go read the document "project3.hints.doc" 23 23 23 23
The Conceptual Pathway • HINT 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. 24 24 24
Dynamic radio buttons • QUESTION: • 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'>"; 25 25 25 25
Unpacking the info • QUESTION: • 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 26 26 26 26 26
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 the • browser 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 27 27 27 27 27
And Then. ... • QUESTION: • What do we do next? • The practice (homework) problems, for next week • 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 Process • to salvage your grade. See Prof for Details. • Limited Time Offer. 28 28 28 28 28