Program cgs4854pgm2_5k CGS 4854 - Website Construction and Management Professor: Michael Robinson e-mail : michael.robinson@cs.fiu.edu ****************************************************************************** * !!!!*** USE THE TOOLS THAT WE HAVE LEARNED IN OUR CLASS ONLY ***!!!! * ****************************************************************************** -------------------------------------------------------------------------------- Worth 6 Points - Make sure your program is properly documented and aligned uniformally, looking professionally, I will take points off if it is not. - Include the following documentation in EVERY web page: Purpose of this program: ------------------------------ - Create this assignment using an editor only, NO TEMPLATES OR IDES ALLOWED. - Extend your current website, creating the new pages described below, using HTML, CSS and PHP. 1 - Create a NEW header page named YourLastName_header.php save it inside your includes folder, displaying the following (centered): ====This is a Teaching Website==== Your Full Name ______________________________________________________________________________________ The First line can be any color, any font, any size Your Full name can be any color, any font, any size The horizontal line MUST BE green Any background color is allowed, if you want to use one. 2 - In your index.html, add one NEW html hyperlink named pgm2.html to the right. a) The first hyperlink named index.html will be executed when the label Home is pressed. b The second hyperlink named pgm1.html, saved in your includes folder and displayed as Program 1, to the right of your Home label, c) The third hyperlink named pgm2.html saved in your includes folder and displayed as Program 2, to the right of your Program 1 label *** LEAVE FOUR SPACES BETWEEN EACH LINK to display the following hyperlinks menu (centered): Home Program 1 Program 2 a) When you press your "Home" label, it will reload your index.html/Home page b) When you press your "Program 1" label, it will load your pgm1.html c) When you press your "Program 2" label, it will load a NEW page named pgm2.html located in your includes folder. 3 - a) Create a new page named mainMenu.php. Save it in your includes folder, which will contain your NEW CSS dropdown menu See the instructions to create your dropdown menu, learned in class at: http://users.cis.fiu.edu/~mrobi002/teaching/cgs4854/CSS/cssDropdownMenu.html Note: Not all the code in the previous cssDropdownMenu.html code sample is needed for this step, Make sure you can call all the pages created in program one, from this new CSS3 menu. Choose whatever colors, fonts and sizes you want for your mainMenu.php This mainMenu.php is to be called from anywhere in your webpages using the following command: b) This new CSS3 dropdown menu, LEAVING FOUR SPACES BETWEEN EACH LINK, should look as follows: Home Program 1 Program 2 c) When you hover over the Program 1 CSS label/link, it will show a dropdown menu that will have ALL the Program 1 links you had in your index.html file, but this time we are creating them using CSS dropdown links as follows: program 1 page1 page2 page3 page4 Home Each one of the CSS dropdown links MUST take us to their corresponding pages, that where used in the html hyperlinks in pgm1. d) When you press the Program 2 CSS label/link, it will load your new page named pgm2.php located in your includes folder. *** notice that the name is pgm2.php NOT pgm2.html *** 4 - Creating pgm2.php located in the includes folder (see question 1). a) Call your YourLastName_header.php program leave one empty row b) Call your mainMenu.php program leave one empty row c) Create the following Front End page using: 1) 9 Regular Text Input fields leave one empty row 2) Create the TextArea Input field shown on the front end below leave one empty row 3) Create the four Input Checkboxes shown on the front end below 4) Create the four Input Radio Buttons shown on the front end below leave one empty row 5) Create the dropdown input field shown on the front end below leave one empty row 6) Centered, display the word $message leave one empty row 7) Create 4 Regular Submit buttons (Save Find Modify Delete), leaving 4 spaces in between 8) Create one ClearScreen button that will clear the screen ONLY, leaving 4 spaces before it leave one empty row 9) Display your mainMenu.php program In the following order: ====This is a Teaching Website==== Joe Smith _______________________________________________________________________________ Home Program 1 Program 2 Telephone ________________ Email _______________________ Last Name _______________________ First Name _______________________ Address _____________________________ City _____________ State _____________ Country _____________ Zip _________ Comments ---------------- | | | | ---------------- Major [] IT [] CS [] Robotics [] Cyber Coffee o Light o Cuban o Sweet o Decaf Dropdowns ___________________^ $message Save Find Modify Delete ClearScreen Home Program 1 Program 2 - MAKE SURE THAT YOUR ENTIRE FRONT END IS TOTALLY ALIGNED AS SHOWN ABOVE. - MAKE SURE THAT ALL FRONT END LABELS ARE LEFT JUSTIFIED, AS SHOWN ABOVE. - On your html Title tag display your last name, first name initial, and pgm2 5) When you press any of the first four(4) buttons (Save Find Modify Delete), call a new page named Controller2.php, located in the includes folder, and display the following: a) This is controller2.php b) Called from program (the program you called it from) Home, Program 1 or Program 2 c) Display ALL labels from pgm2.php front end with all the inputed corresponding data d) Display the name of the submit button that was pressed on the front end of Program 2 example: "You pressed the Save Button" "You pressed the Find Button" "You pressed the Modify Button" "You pressed the Delete Button" 6) When you press the ClearScreen button, it will ONLY clear the screen Special Instructions: --------------------- - Additional code examples to help you with this program: http://users.cis.fiu.edu/~mrobi002/databases/cgs4854/ https://users.cs.fiu.edu/~mrobi002/teaching/cgs4854/CSS/cssDropdownMenu.html Submission of program 2: ------------------------ 1 - Zip your public_html folder and rename it as follows: your last name, first initial of your first name, pgm2, zip and upload it to CANVAS when this program is due, or before. If you have any questions, please 1 - Email me at anytime, at michael.robinson@cs.fiu.edu using your FIU email 2 - Contact our FREE Online Tutoring, open 6 (six) day a week. https://users.cs.fiu.edu/~mrobi002/tutoring/includes/tutoringOnline2020Fall.php *** PLEASE REMEMBER, WE ARE HERE TO HELP YOU ***