mangement info system
mtulbah
mis290_asg6_creating_dynamic_web_application.docxMIS 290 – Management Information Systems – Fall 2014
ASSIGNMENT #6 - CREATING A DYNAMIC WEB APPLICATION USING PhP - due Nov 18
As you have seen, creating web pages in HTML is not very difficult. However, the web pages you’ve built in assignment #5 with HTML were static, in that they don’t change. While useful, organizations learned that end-users don’t want to just see web pages, but actually use the Web for various purposes. Therefore, the concept of dynamic web pages, in which end-users can see output depending on the input they’ve provided, have made the Web even more useful.
You will use HTML and PHP to create two dynamic Web applications. The first web application is described in PART A and PART B - these will be started in class... this web application is just a simple web page that allows the end user to enter two names, then your application will re-write those two names in a sentence.
The second dynamic web application is described in PART C and you are required to do this on your own.. This application will allow the end-user to input several variables, and then reformat and display those variables so that the user obtains a correct APA style bibliography for a journal (for an example, look at citationmachine.net).
PART A: Creating the html and php files: Part of this assignment will be started in class - In this section you will create 2 files : PartA.html and PartA.php using Textpad, but you will rename these programs to include your last name E.g. (AntonucciA.html and AntonucciA.php) NOTE: I created a video for you that shows you how to use textpad: http://www.youtube.com/watch?v=VdWnRDL4Ikg
1. click on START --> ALL PROGRAMS --> TEXTPAD and open up TextPad [this is an editor that allows you to create html and php files] keep this open
2. Highlight all the code [just what you see below]... COPY [ctrl +C]
<!-- Uses a table to create a simple form -->
<!-- Passes submitted data to PartA.php -->
<html>
<head>
<title>PartA.html</title>
</head>
<body>
<form action=" PartA.php" method="post">
<table border="0">
<tr bgcolor="#cccccc">
<td width="150"> Attribute </td> <td width="15"> Value </td>
</tr>
<tr>
<td> Enter Name 1 </td> <td align="left"> <input type="text" name="in_Var_A" size="10" maxlength="10"></td>
</tr>
<tr>
<td> Enter Name 2 </td> <td align="left"> <input type="text" name="in_Var_B" size="10" maxlength="10"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
3. Now go to the TEXTPAD window and PASTE [ctrl +V] ... if you did this correctly it will look like this:
4. select FILE then select SAVEAS -- type your last name1 in the "File name" area [e.g AntonucciA]
5. click the down arrow next to "Save as type" and select HTML
6. Make sure you will be saving this to your flash drive and click SAVE
7. Now you need to change some of the code in the file -- Wherever you see PartA you need to replace this with your last nameA [e.g. AntonucciA]…[there are three places to change]
a. Note: THIS CODE IS CASE SENSITIVE!!
This means that you MUST create similar variable names for both the html and php files, those names must be EXACTLY the same in both the html and php programs.
Therefore, make a note of what your variable names are so you will know what to put in the php program later. [the variable names in this program are: in_Var_A; in_Var_B]
8. Re-save your program. You have created the first html program in PART A of assignment 6!
9. Now you will be doing similar steps to create the PHP program in PART A of assignment 6....
a. From TEXTPAD select FILE then select NEW
b. This will open a new document area where you will be putting the php code...
10. Highlight all the code [just what you see below]... COPY [ctrl +C]
<!-- Accepts data from PartA.html -->
<!-- Outputs appropriate results -->
<?php
// create short variable names
$in_Var_A = $_POST['in_Var_A'];
$in_Var_B = $_POST['in_Var_B'];
?>
<html>
<head>
<title> PartA.php </title>
</head>
<body>
<h2> Output Variables </h2>
<h2> From PartA.html </h2>
<?php
if( $in_Var_A == '' or $in_Var_B == '' )
{
echo '<h3><font color=red>';
echo 'Complete data not provided.';
echo '</font></h3>';
}
else
{
echo '<br />';
echo '<h3>';
echo 'Hello ';
echo $in_Var_A;
echo ' and ';
echo $in_Var_B;
echo '!';
echo '</h3>';
}
?>
</body>
</html>
11. Now go to the TEXTPAD window and PASTE [ctrl +V]
12. select FILE then select SAVEAS -- in the file name area, you must type the entire file name but make sure you put quotes around it e.g. "AntonucciA.php" - use your last name instead of Antonucci....
13. click the down arrow next to "Save as type" and select ALL FILES
14. Make sure you will be saving this to your flash drive and click SAVE
15. Now you need to change some of the code in the file -- Wherever you see PartA you need to replace this with your last nameA… [there are three changes to make]
16. Re-save your program. You have created the php program in PART A of assignment 6!
next you will upload both of these files to a PhP server - after you do that you can test the programs to see if they work.......
PART B: Upload your 2 files from Part A to the PhP server:
In this section you will be uploading your 2 files [yournameA.html and yournameA.php] to Dr. Goeke's Php server. These directions show you how to use FileZilla (an FTP application) to upload files to a server. FileZilla is on all machines at Widener, it is also a free download if you are using your own computer, but any FTP application will work [I use CuteFTP at home].
, our space for this class on the php server is 290b
1. open up FileZilla [find this in programs]
2. The account credentials to be used are:
a. Host: 147.31.119.52
b. Username: mis290a
c. Password: mis290a
d. Port: please leave this blank.
e. Hit enter
3. If your connection to the server using the mis290a account is successful, then in the lower right hand pane, you should see the .html and .php that have been uploaded to the server on this account.
4. To upload your .html and .php programs, find your programs in the lower left hand pane, double click on them, and they will be transferred to the server. You should be able to see your programs in the lower right hand pane, which means that the programs have been successfully uploaded.
a. NOTE: you cannot download, so make sure that you keep a copy of your programs on a flashdrive or on Campus Cruiser (My Files)
5. To access (view) your web pages from the Internet
a. Open another Internet session
b. For the URL, type in: 147.31.119.52/student/mis290a/yourfilename.html
i. your filename.html = your file from step 4
note: this is how you test your files -- you only run the html file, this will use your php file.
6. If your html and php files are not working correctly you will need to change the code appropriately by going back into textpad and altering the code, resaving the files and re-uploading the files to the Php server --- Once you get your html and php files working, move on to PART C....
PART C: Alter you files to be a citation machine application:
Next you need to alter your 2 files from part A [.html and .php] to create an APA Journal citation dynamic web page application similar to the one you see on citationmachine.net:
1. First let’s take a look at what you will be creating – open up another browser window and type in the following URL: http://citationmachine.net
a. Click Click on APA – then scroll down under "not sure what source to cite..."click on Journal. You will see something like the following:
b. Go ahead and fill this form out [make up some data to put in here–you are just testing it out] then click on the make citation button- you will see a resulting citation!!! THIS IS WHAT YOU WANT YOUR PROGRAM TO DO –
i. [note: my result is shown below [I did not put in a publisher]:
Antonucci, Y. (2014). BPM Principles. BPMJ, 2(3), 22-36.
Notice it did not list my full first name - only my first initial -- for your program you can just ask for the first name initial
c. Change the code in both programs from part A to do this!!! Open Textpad and change yourlastnameA.html name this yourlastnamC.html -- then change yourlastnameA.php and name this yourlastnameC.php I have created a video for you to help you do this: http://www.youtube.com/watch?v=Cnya59Q2EZI you may also want to review the video on using textpad: http://www.youtube.com/watch?v=VdWnRDL4Ikg
HINT: notice from my results in c.i. above that the order of things printed are as follows: Lastname comma space FirstnameInitial period space Title period space italics Journal un-italics comma Volume Leftparenthesis Issue Rightparenthesis comma Pages period
... these are all the things you need to create in your citation!!
** to create italics in php echo '<i>';
** to stop italics in php echo '</i>';
NOTE: You will need to modify your 2 files from part A so that they will accept all the basic inputs for journal citation:
author last name, author first name initial,
title of article, title of publication,
Volume, Issue,
Year and, Pages
a. then you will need to reformat / output those inputs to make a correct bibliography in APA format.
hint: make sure you include all formats such as commas, periods, quotes, parentheses, italics,
and colon. [see the hint box above]
2. Upload your renamed html and php files to the mis290b Php server space - see Part B above - you should now have 4 files on this server; yourlastnameA.html, yourlastnameA.php, yourlastnameC.html, and yourlastnameC.php
3. Access (view) your web pages from the Internet - and make sure they are correct, if not you will need to re-open them in textpad, make changes, re-save them in textpad, and re-upload them to the Php server - then try viewing them again using the below method.
a. Open another Internet session
b. For the URL, type in: 147.31.121.234/student/mis290a/yourlastname2.html
note: this is how you test your files -- you only run the html file, this will use your php file.
4. If your html and php files are not working correctly you will need to change the code appropriately by going back into textpad and altering the code, resaving the files and re-uploading the files to the Php server
5. You should have 4 files uploaded to the php server: yourlastnameA.html, yourlastnameA.php, yourlastnameC.html, and yourlastnameC.php
You need to make sure you upload the same 4 files to assignment 6 of My Assignments on campus cruiser.
