|
||||||
Welcome to ClassHello RISD PHP class students. I welcome you to our class together. The next twelve weeks should provide a fantastic ride for you as you learn the big picture of how dynamic Web pages are maintained and presented on the Web for the benefit of those who care about the organization (or at least the products or services it provides). We'll be getting our hands active with writing dynamic Web pages, creating databases, populating them with data, managing the data, and viewing the data in thoughtful ways that lets us know how our organization (or our client's organization) is doing (are we being productive and yet in a way we meet organizational goals — with the definition of goal being very expansive for our purposes (for example, a goal could be to have fun, or perhaps, curb global warming — anything personal, for profit, or non-profit, or a hybrid of two or more). Although we will spend four weeks on learning about the back-end database integration, you may find that those four weeks are not enough for your voracious curiosity. We offer a MySQL course that runs for six weeks and interrelates well with your humble beginnings in this class here. Our real focus is on the integration of a back-end (meaning server-resident and server-processed) language for data integration into our Web page presentation. For that, we'll be focusing on the PHP language and all it has to offer. Although PHP typically runs on a dedicated Web server, you can set up your own PHP environment on any desktop or laptop computer you wish to design and develop upon. There are a great series of products that let you run PHP locally on your machine in a separate server process, as if it were a separate server you were accessing. Three products work similarly but have different install methods depending on which operating system you want to develop and test upon: For a Microsoft Windows-based environment, see the WAMP Server home page. Here are WAMP installation steps I have followed in previous classes without any issues whatsoever: 1. Point your Web browser to the WAMP Server home page. 2. Click on the DOWNLOAD link on the menubar. 3. If you already are a WAMP guru and have a version of the WAMP Server installed, decide if you want to use that version for class or install one of the latest WampServer 2.X packages (either is fine by me). The download process follows a rather standard install. Make sure you make note of where the download goes on your local hard drive (or network hard drive if you use a browser to save files on a network directly). 4. The downloaded file is an executable. So, you can double-click on it to launch the install. The install process won't ask you for much, but I highly recommend you choose the following options:
Nothing else matters much during the install and if you have reason to choose different values for any of the options above, note what you changed the option to so you can tell me should you need help in the future. The install process includes integrated installation of three powerful products in their own right (yes, you get them free!):
5. Once you have done the install, you can test it by opening up a Web browser and typing localhost in the address bar. That localhost address will then simulate the domain you would plan to upload your database and Web content up to. For example, if you were managing a site for cleanair.org, the localhost address would represent what you'd see when you uploaded your site and typed http://cleanair.org in the address bar. It might seem a little strange that localhost is a valid Web address, but it is a very strong convention you will see again and again as you use more periphery tools with Web development. For those of you who need to see it to believe it, I'll provide a server for you to try it out during our class together as we get ready to submit our first projects. The Class ProjectThe first time I taught this class, I found four clients who were willing to let us work on their sites as a class. We all worked together as a class on the basic structure of the PHP code so we could learn some concepts and then each student worked on their own version to add more functionality as they saw fit. Admittedly, I was a little over-zealous in that four clients was a bit too intimidating as we had to move too quickly on the coding without leaving enough time for basic scripting skill development. So, this class, we are working with our own clients (actual or imagined) and have lots of freedom to add features we think would be useful for our clients. We'll go over the organizations together in class, but here is a link should you want to take a look at a client who would be willing to have us participate in PHP service development: A project can be based on this site if you want it to be. I want to remain flexible as to what deliverables you turn in and am even willing to let you work in teams if you can propose a useful reason for teaming up on features. I haven't chosen the due dates yet, but you will have at least six weeks until the first project is due (so do start with the basics the first two weeks of class without worrying too much about the project details). DiagrammingTo gain experience in thinking about programming languages, we are going to practice diagramming code to give you a skill you can use when considering a new programming language. By thinking of programming languages generically, you'll gain a sense of the key design pattern by which programming languages are designed for programmability (meaning for ease of human use). I use the same diagramming colors for all the programming courses I teach (so if you took the JavaScript course with me, you'll already have some experience and if you haven't you will bring some experience to the JavaScript course should you ever do so). Let's discuss the programming vocabulary and get familiar with my somewhat arbitrary coloring choices (but approved by previous students over time): Comments grey (606060) I believe in this so strongly, that I provide you with the following five dynamic Web pages even though you will likely find the code overwhelming without any previous diagramming skills (I converted the code to HTML so you can just open the page in your browser, copy the code, and paste it into a new file on your local system): Example of presenting dynamic data Example of a login form Example of providing a dynamic data form Example of processing a submitted form Example of a moderator's control page Note all of these examples come from active code seen from the Ocean Picture Of the Day service. The code is an amalgamation of multiple students' code as submitted in the last class for the final project. Let's look at the Login Form code together (below) in the context of diagramming it for a deeper investigation. We'll just diagram the PHP code which is conveniently identified to us as that code which is contained within blocks that start with <?php and end with ?>. Comments are text items you add to code to document your thoughts so you can remember what you were thinking when you wrote code (or so others can review what you were thinking when you wrote the code). Note how consistently the student documented when he was connecting to the database and what he was processing at the time he connected. All these comments in PHP either begin with a double forward-slash (//) or are contained with two opening characters (/*) followed by two closing characters (*/). The latter manner lets you comment for multiple lines while the former lets you comment out the rest of a line (or the whole line if you begin the line with //). Note how the HTML code exists outside of the PHP blocks of code. PHP is a language that conveniently can be inserted into an existing Web page to make it dynamic after it has been designed with static sample data the designer has been given or has dummied up (as you've seen, Latin is used often as dummy placeholder text in design reviews). We don't need to diagram the HTML, but it is diagrammable as well in a similar manner should you ever need to investigate HTML deeper. HTML tends to be more straight-forward than PHP which is why you don't see many classes use diagramming techniques to learn it. I haven't looked closely at the design of this document to determine if any CSS code has been used. If CSS has been used and I am trying to keep my CSS skills up-to-date, I can color all CSS-compliant code in magenta. Note how this code reuses the same PHP functions over and over:
Note how the same objects continually arise in our PHP code to organize how we process dynamic data into our page. The $pass and $password objects manage password text strings, the $user and $username manage login text strings, the $_POST object manages data that has been posted to the server from a client form, the $hostname manages the host we want to connect to, the $dbname manages the database we want to connect to, the various $query objects manage the different queries we wish to write to request data from the database, the $result object manages the result of running queries on the database content, and the $row object lets us manage the result set one row at a time (conveniently letting us pretty up each row on the Web page we have designed to present the data to our enthusiastic readership). Coloring all these objects in green helps us focus on how the flow of our page is being managed by objects and gets us to see how many objects are involved since that is typically a good estimator of how complex the code really is. The objects have been micromanaged so closely in this area of PHP use that we little use for properties. Had PHP organized all the database-related objects through a parent object such as database_manager, we'd have had to reference various properties of the database_manager such as database_manager.hostname. If that were the case, we'd diagram the database_manager in green and the hostname in brown. But, PHP designers decided to skip the opportunity to have a database_manager object in the language (other scripting languages do have such a concept). The only two places we are using properties in this example are in the cases of the $POST_ and $row objects. The $POST_ object let's you access each of the items that were posted to the page via a property access. The $row object let's you access each of the items in a returned query result set via a property access to. The properties for both uses are colored brown (for example: the username in the $_POST['username'] code). The brown coloring lets us see that the username is being managed by the $POST_ object in this case. It gives us a sense of organization of our code and the PHP interface decisions made by the PHP language designers. Note that none of our code is colored dark blue. We don't have any situations where a complex object is managing another object that has properties of its own. When you don't see any dark blue in your diagrams, you know the object hierarchy is flat and you hope the processing is not very complex since complex processing without a good object hierarchy can make the process much more laborious than it need be. In fact, we won't see much dark blue in any of our diagrams in this class. For those of you who took the JavaScript course, compare that to how deep the object hierarchy was within Document Object Model (DOM) use. We don't have any red code either. The functions we use in the code are generic PHP functions that aren't managed by any specific objects. If we had a database_manager object in the PHP language, we would have been accessing many of our functions via database_manager methods — such as database_manager.mysql_select_db(). In that case, the mysql_select_db() would be colored red instead of light blue. It would only be accessible through the database_manager, the definition of a method (when accessible through a specific object). We only use two of PHP's many operators in this example. The comparison operator (==) compares two things and returns a true or false (useful in something called a condition we'll be looking at later in the class). The addition operator (+) adds two values together (for example: count + 1 adds one to the current value of count). Both the == and + symbols are coded orange in the diagram to remind us that they are built-in functions of the PHP language that are referenced by symbol instead of name. And, lastly, we see we are using only two control structures, the if(){} and while(){} structures (although we are using else clauses in some if() structures which look like if(){}else{}). I am not surprised since these are the two most popular control structures. We color them purple to think about them separate from the other constituents of the code. The rest of the code is black for now. We can consider the black code statement filler code (each statement ends in a semi-colon (;) in the PHP language to differentiate it from its neighbors). The more you want to learn about how a computer processes code for you, the more you can add to your diagramming arsenal. I've chosen just the level of diagramming that I think will give you the most insight for the effort. Once you've investigated the following in detail, you can play around with the dynamic data presentation code which I have placed in here after the login form that my words above are associated with (but do not overwhelm yourself as we'll diagram it together in class similarly to the example here): The OPOD presentation example here<?php include("../header_test.php") ?> <?php include("../menu_test.php") ?> <div id="content_main"> <div id="sectionhead"> OCEAN PICTURE OF THE DAY (OPOD) </div> <?php include("../action/menu.php") ?> <div id="right_col"> <div id="content"> <table bgcolor="white" border="0" cellpadding="10" cellspacing="0" width="780"> <tr> <td align="center" valign="middle"> <?php
?> The login form code<?php include("../header_test.php") ?> <?php include("../menu_test.php") ?> <div id="content_main"> <div id="sectionhead"> OCEAN PICTURE OF THE DAY (OPOD) </div> <?php include("../action/menu.php") ?> <div id="right_col"> <div id="content"> <table bgcolor="white" border="0" cellpadding="10" cellspacing="0" width="780"> <tr> <td align="center" valign="middle"> <center><h1>OPOD Monitoring<br /> <? print(Date("l, F d, Y")); ?></h1></center></td> </tr> <tr> <td align="center"> <?php $user = $_POST['username']; $pass = $_POST['pass']; if(($user=="theoceanproject")&&($pass=="password")){ ?> <form action="Monitor2.php" enctype="multipart/form-data" method="post"> <table border="0" bordercolor="#000060" bgcolor="#000060" id="Maintable" table width="720" align="center" cellpadding="16" cellspacing="0"> <tr id="ROW1title"> <td width="400"><span style="color: #000000"></span> <table border="0" bordercolor="#CCCCCC" bgcolor="#CCCCCC" id="TITLE table"> <tr> <td bordercolor="#999999" bgcolor="#FFFFFF"><div align="center" style="font-weight: bold; font-size: 16px">Review OPOD Submission</div></td> </tr> </table> </td> </tr> <tr id="ROW2Subdate"> <td> <table width="100%" border="0" bordercolor="#999999" bgcolor="#CCCCCC" id="SUB DATE table" table > <tr> <td bgcolor="#FFFFFF"><span class="instruction" style="font-size: 14px"> OPOD's Submission<span class="instruction" style="font-size: 14px"> Date:</span></span></td> </tr> <tr> <td> <?php // LINKUP //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); //Post oldest item where record hasn't been reviewed by monitor. $query0 = "SELECT date FROM user, pic, submits WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query0); if($result){ while($row = mysql_fetch_array($result)){ echo $row['date']; } } else { echo 'No results from query'; } ?></td> </tr> </table> </td> </tr> <tr id="ROW3userInfo"> <td> <table width="100%" border="0" bordercolor="#999999" bgcolor="#CCCCCC" id="userInfo"> <tr> <td colspan="2" bgcolor="#FFFFFF" class="instruction" style="font-size: 14px">User Info:</td> </tr> <tr> <td width="50" class="instruction">Name:</td> <td width="370"> <?php //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); //Post Submitters name to the Page. // $query1 = "SELECT user.first, user.last FROM user, pic, submits WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query1); if($result){ while($row = mysql_fetch_array($result)){ echo $row['last']; echo ', '; echo $row['first']; $count = $count + 1; } } else { echo 'No results from query'; } ?></td> </tr> <tr> <td class="instruction">City:</td> <td width="370"> <?php //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); //City/////////////////////////////////////////////////////////////////////////////////////////////////////////// $query2 = "SELECT town FROM user, pic, submits WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query2); if($result){ while($row = mysql_fetch_array($result)){ echo $row['town']; $count = $count + 1; } } else { echo 'No results from query'; } ?> </td> </tr> <tr> <td class="instruction">State: </td> <td> <?php //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); // Post the State to the Page ///////////////////////////////////////////////////////////////////////////////////////////////// $query3 = "SELECT state FROM user, pic, submits WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query3); if($result){ while($row = mysql_fetch_array($result)){ echo $row['state']; $count = $count + 1; } } else { echo 'No results from query'; } ?> </td> </tr> <tr> <td class="instruction">Email:</td> <td width="370"> <?php //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); //Post the Submitters Email Address/////////////////////////////////////////////////////////////////////////////////////////////// $query4 = "SELECT email FROM user, pic, submits WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query4); if($result){ while($row = mysql_fetch_array($result)){ echo $row['email']; $count = $count + 1; } } else { echo 'No results from query'; } ?> </td> </tr> </table> </td> </tr> <tr id="ROW4FileInfo"> <td> <table width="100%" border="0" bordercolor="#999999" bgcolor="#CCCCCC" id="FILEinfo"> <tr> <td colspan="2" bgcolor="#FFFFFF" class="instruction" style="font-size: 14px">File Info:</td> </tr> <tr> <td width="91" class="instruction">File:</td> <td width="641"> <?php //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); //File Name: /////////////////////////////////////////////////////////////////////////////////////////////////////////// $query5 = "SELECT name FROM user, pic, submits WHERE WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query5); if($result){ while($row = mysql_fetch_array($result)){ echo $row['name']; $count = $count + 1; } } else { echo 'No results'; } ?> </td> </tr> <tr> <td width="91" class="instruction">Size:</td> <td width="641"> <?php // LINKUP //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); //Post the File Size to the Page ////////////////////////////////////////////////////////////////////////////////////// $query6 = "SELECT size FROM user, pic, submits WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query6); if($result){ while($row = mysql_fetch_array($result)){ echo $row['size']; echo 'kb'; $count = $count + 1; } } else { echo 'No results'; } ?> </td> </tr> </table> </td> </tr> <tr id="ROW5Image"> <td> <table width="100%" border="0" bordercolor="#CCCCCC" bgcolor="#CCCCCC" id ="Image"> <tr> <td bordercolor="#999999" bgcolor="#FFFFFF" class="instruction" style="font-size: 14px">Image:</td> </tr> <tr> <td bordercolor="#000060" bgcolor="#000060"> <div align="center"> <?php //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); //IMAGE////////////////////////////////////////////////////////////////////////////////////////////////////////// $query8 = "SELECT name FROM user, pic, submits WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query8); if($result){ while($row = mysql_fetch_array($result))){ echo "\n"; echo '<center><img src="http://www.theoceanproject.org/opod/upload/'; echo $row['name']; echo '" width="500"></center>'; echo ' </tr>'; $count = $count + 1; } } else { echo 'No results from query'; } ?> </div> </td> </tr> </table> </td> </tr> <tr id="ROW6Caption"> <td> <table width="100%" border="0" bordercolor="#999999" bgcolor="#CCCCCC" id="caption"> <tr> <td bordercolor="#999999" bgcolor="#FFFFFF"><span class="instruction" style="font-size: 14px">Image Caption:</span></td> </tr> <tr> <td bordercolor="#999999" bgcolor="#CCCCCC"> <div align="center"> <?php //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); //caption/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// $query9 = "SELECT caption FROM user, pic, submits WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query9); if($result){ while($row = mysql_fetch_array($result)){ echo '<textarea name="caption" cols=60 rows=8>'; echo $row['caption']; echo '</textarea>'; $count = $count + 1; } } else { echo 'No results from query'; } ?> </div> </td> </tr> </table> </td> </tr> <tr id="ROW7UseDate"><td> <table width="100%" border="0" bordercolor="#999999" bgcolor="#CCCCCC" id="UseDate"> <tr> <td bgcolor="#FFFFFF"><span class="instruction" style="font-size: 16px">Update OPOD Data:</span></td> </tr> <tr> <td bgcolor="#CCCCCC" class="instruction" style="font-size: 12px">Record Posting Date :</td> </tr> <tr> <td bgcolor="#CCCCCC"><div align="left"> <p align="center"><span class="instruction" style="color: #000000; font-size: 10px"> <span style="font-size: 11px">Last Date Used as OPOD</span>: </span></p> <p align="center"><span class="instruction" style="color: #000000"> <?php //Connect To Database $hostname='mysql27.secureserver.net'; $username='oceanweb'; $password='password'; $dbname='oceanweb'; //connect to database mysql_connect($hostname, $username, $password) OR DIE ('Unable to connect to database! Please try again later.'); //select - use this database mysql_select_db($dbname); // *** Last DATE USED - Last Known Date that a Submission was assigned to ** // $query11 = "SELECT use_date FROM user, pic, submits WHERE user.id = submits.user_id AND pic.id = submits.picture_id AND submits.status = 0 ORDER BY date LIMIT 1"; //echo 'Running Query: '.$query; $result = mysql_query($query11); if($result){ while($row = mysql_fetch_array($result)){ echo $row['use_date']; $count = $count + 1; } } else { echo 'No results'; } ?> </span> </p> </div></td> </tr> <tr> <td bgcolor="#CCCCCC"> <div align="center"> <p align="center"><span class="instruction" style="font-size: 10px">Desired Date to Post OPOD Record to Website:</span> </p> <p align="center"> <input name="dsubmitDate" type="text" id="dsubmitDate" value="yyyy-mm-day" size="40" maxlength="15" /> </p> </div></td> </tr> <tr> </tr> <tr> <td bgcolor="#CCCCCC"><p class="instruction" style="font-size: 12">Record Status:</p></td> </tr> <tr> <td bgcolor="#CCCCCC"> <div align="center"> <input type="checkbox" name="status" value="1" /> <span style="font-weight: bold; font-size: 10px">Approve OPOD Record</span> </div></td> </tr> <tr> <td bgcolor="#CCCCCC"><div align="center" style="font-size: 10"> <input type="checkbox" name="status" value="2" /> <span style="font-weight: bold">Decline OPOD Record</span></div></td> </tr> <tr> <td bgcolor="#CCCCCC"> <div align="center"> <input type="submit" name=" submit" value="OK" /> </div></td> </tr> </table> </form> <?php } else { ?> <style type="text/css"> <!-- .style1 {color: #000000} --> </style> <div style="background-image:url(crab.jpg);width:450px;height:262px" align="left"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <h1> Monitor Login</h1> <form action="MonitorLogin.php" method="post"> <table> <tr> <td><label for="username"> Username: </label></td><td><input type="text" name="username" maxlength="25" /></td> </tr> <tr> <td><label for="password"> Password: </label></td><td><input type="password" name="pass" maxlength="25" /></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" name="submit" value="Login" /></td> </tr> </table> </form> </div> <?php } ?> </td> </tr> <tr> <td><p style="font-size:12px" align="center"><a href="upload_form.php">Submit an Ocean Picture Of the Day</a></p> <p style="font-size:12px" align="center"><a href="index.php" style="font-size: 12px">OPOD Home Page</a></p> </td> </tr> <tr> <td><p style="font-size:12px" align="center"> <a href="http://antwrp.gsfc.nasa.gov/apod/astropix.html" target="_blank">Astronomy Picture of the Day</a> | <a href="http://epod.usra.edu/" target="_blank">Earth Science Picture of the Day</a></p> </td> </tr> </table> </td></tr></table> </div></div> <div id="footer" style="left:464px;top:712px"> <table> <tr> <td style="background:transparent"> <?php include("../footer_div.php") ?> </div> </body> </html></div> </body> </html> |
||||||