Lab 2: PHP Variables and HTML Input Form

PHP Variables & HTML Input Form Prepared: TrangNTT Create a PHP project Open Zend Studio 7.0 Select Start à All Programs à Zend Studio – 7.0.0 à Zend Studio – 7.0.0 Choose a workspace for the workspace directory. This should be a new workspace. The tool creates the folder and workspace for you. If there is not a Workspace Launcher dialog, select File à Switch Workspace à Other. When Zend Studio opens, sketch the Welcome page to get some topics there. Spend time at home to read these topics. Close the Welcome page. By default, the PHP Perspective is opened when a new workspace is created in Zend Studio. The title bar indicates the currently active perspective. Create a PHP project named “LabProject” Click Create a PHP project by clicking the arrow beside the New button from the main toolbar, or selecting File à New and choose PHP Project. The PHP Project dialog appears. In the Project name field type LabProject (All the below figures are for the project name “Lab3” – don’t care about it. Consider all “Lab3” in all below figures are “LabProject”). Choose Create new project in workspace to ensure that the project you will create is located in the your selected workspace. Change the version of PHP to Use project specific settings. Choose PHP 5.3 in PHP Version dropdown list. Click Finish. In the PHP Explorer view, locate the LabProject project. Expand the project to display the PHP Include Path and PHP Language Library. The PHP Include Path is a set of locations that is used for finding resources referenced by include/require statements. The library that is responsible for built-in PHP functions is called PHP Language Library. Expression Example Create a php file named “Expression Example” From the main menu, click File à New à PHP File. The New PHP File dialog appears. Enter the File Name is “Expression.php”. Click Finish. Enter the following source code in the editor of expression.php Run the Expression Example Right click on the editor or the expression.php file on the PHP Explorer, choose Run As à PHP Web page. Confirm the Run PHP Web Page dialog then you will get the following result: To run this project, you need to include the ExampleProject directory to the path of web server. Copy these lines in the end of the httpd.conf in "C:\Program Files\Zend\Apache2\conf" Order deny,allow Allow from all Alias /LabProject "G:\PHP Lab\workspace\LabProject" Stop and Start Server using Apache Server Monitor. Run the expression.php again by clicking the button in the main toolbar or press Ctrl + F11 and see the following result Debug the Expression Example Double click to line 8 which calculate the average to put a break point at this line. Right click at the expression.php or click the button in the main toolbar or press F11 to start debug the expression.php. When prompted to switch to the PHP Debug perspective, select the Remember my decision check box and click Yes. The Debug view displays all threads executing in the runtime environment. At this point, only the expression.php application is running. The PHP Editor displays the code of the currently selected thread. You can set breakpoints and step through code using this editor. Use the Variables view to the right of the Debug view to check all variables in scope. For variables other than primitive types and String objects, object fields can be examined by clicking the arrow beside the variable. Expand $_GET variable (HTTP GET variables - An associative array of variables passed to the current script via the URL parameters) to see its value. Using the four stepping modes and other commands, you can execute PHP files one line of code at a time. This allows you to examine, adjust variable values, and monitor the program execution path. Stepping through code is an essential practice for checking logic errors in programs. The Step Into button evaluates the current line of code one level deeper into the call stack. The F5 function key is equivalent to the Step Into button. The Step Over button executes until the next line of code in the same level of the call stack. This is a useful function if you are not concerned with the methods invoked by the current line of code. The F6 function key is equivalent to the Step Over button. The Step Return button continues execution until control is returned to the next level higher in the call stack. Issuing a Step Return command in the main method will run the program until completion. The F7 function key is equivalent to the Step Return button The Step Debug button allows stepping through code that contains debug information (that is, the source code) while skipping code that does not. The currently selected line executes and execution continues until reaching the next line with debug information. There is no equivalent function key for the Step Debug command. The Run to Line command allows execution to continue until reaching the currently highlighted line in the editor. This command is a useful alternative to continuously issuing the Step Over command or inserting a breakpoint to the code. It can be accessed by selecting Run -> Run to Line from the workbench menu or pressing Ctrl-R. Go to line 8 by pressing F7. Move the mouse to $gr1, $gr2 and $gr3 in line 5, 6, 7 to see the value. If the code has a bug which has to fix, for example, the way to calculate the average is changed to (grade1*6 + grade2*2 + grade3*2)/10; we can terminate the application by selecting (suspended) in the Debug view and clicking the Terminate button on the Debug title bar or pressing Ctrl+F2. Click the Remove All Terminated Launches button to clear the Debug view Close the Debug perspective by right-clicking on the Debug icon in the perspective switcher toolbar and selecting Close. Edit the expression.php as the expectation and debug again to observe the result. Create a String test Do the same to create and run stringtest.php which includes all examples in the lecture. Create a Basic form Do the same to create and run basicform.php. Create a registration form Copy the basicform.php to registrationform.php which includes all HTML inputs in the lecture (refer to yahoo mail or gmail sign up). Create a confirm form Create Form4Radio.html Create Form4Radio.php Run the Form4Radio.html Change to GET method Change the Form4Radio example from POST method to GET method. Observe the result and give comments. Firefox and Add-ons Install Firefox & Add-ons Install Firefox: Install Add-ons: DOM Inspector, Firebug and Web Developer Restart Firefox Using DOM Inspector Practise steps: Open Form4Radio.html in Firefox Check DOM and other information by using DOM Inspector Additional guide: Understanding the way a web page has been constructed is normally a case of viewing the source HTML and trying to build a mental picture picture of its structure, based on the way the different elements are nested within each other. It takes some practice, but it can be done. Much easier is to use a tool like the DOM Inspector, which lets us look at each part of the page, piece-by-piece, using a structured tree approach. As an example I'll take the page I talked about in my last post. The first step is to browse to it in Firefox. Now launch the DOM Inspector from the Tools menu (Ctrl+Shft+I). You'll see a window something like this: From the View menu enable the "browser" and make sure that Blink Selected Element is selected. The URL of the page you're interested in should already be the address bar at the top. Click on the Inspect button (highlighted by #1 in pink letters on the screengrab above) to the right of the address bar and it will load the page in the "browser" pane. In order to find the part of the page you're interested within the document tree you can use two methods. The hardest is to drill-down through the tree, element by element, until that part of the page flashes (highlighted #4). Much easier is to click on the button (highlighted #2) that lets you simply click on said element to automatically find it in the tree. Click on one of the problems links with the small text and it will quickly that element, as shown above. In this case, the structured hierarchy of the link within the DOM is: HTML > BODY > TABLE > TR > TD > TABLE > TR > TD > DIV > TABLE > TR > TD > SPAN > A Armed with this information it is then fairly simple to work out which bits of the CSS stylesheet have an affect on the link element. How? Well, we can find out much more information about any given element node than simply its place in the document. Using the button highlighted at #5 we can choose to view different property-sets for the selected node. Switch to CSS Style Rules and you'll see all the styles applied to it. Work back through the tree and you'll see the other styles, some of which it inherits. It's hard to sum up just how useful this tool can be. Hopefully this is a good example though. It may be a little rough around the edges but it's an extremely useful tool. Until recenlty I'd over-looked it and never bothered working out how to use it. Now I know how I'll probably be using it daily. Here are some of the other uses and benefits of the DOM Inspector: Learn the strucuture of a HTML document. See how particular elements on a page are nested. Delete elements to see effect on page. Edit/change class names properties atrributes of elements Add attributes to the tree (In theory! This doesn't seem to work too well). Using Firebug Firebug features: Inspect custom stylesheets included by Google Mashup Editor Modify in-memory stylesheets to see the changes reflected immediately Place watches and breakpoints into running JavaScript Execute arbitrary JavaScript in the context of your running application Monitor Ajax calls, showing response times, posted content, and results Profile JavaScript functions to help you identify bottlenecks and optimize your application. Practise steps: Open Form4Radio.html in Firefox Check DOM and other information like HTML sources in Firebug Browser web pages that you are interested in and check their information as well Edit their HTML sources on the fly Exercise Design a form including all types of HTML inputs which requests the users to fill their name, class, university, hobby (checkboxes to list some common hobbies and others), (These fields are only for recommendation, you have to develop by yourselves other information which will help you get a higher score for this exercise). Then create a PHP file to process the action of the above HTML form. This PHP file will displays all the information that users entered. Print all screens which you use add-ons of Firefox including DOM Inspector, and Firebug for the above exercise and paste to a MS Word document with a brief comment for each screen. For example: Hello, You are studying at , Your hobby is ... ...