Description
Objective: The objective of this exercise is to:
1. Continue working with HTML forms
2. Learn and implement Bootstrap forms
3. Create projects and save revisions to GIT
4. Understand the concepts of styling a good looking HTML form
Submit: screenshots, your word document, html file, optional css, and a link to your web page
You may discuss the concepts with your fellow students
You may not show or share code with your fellow students
You may not show or share code with internet sources
You may discuss this with your instructor or TA.
Part #1: Bootstrap Tutorial
Estimated time: 30-60 minutes
Exercise: Use getbootstrap.com to review/learn bootstrap basic form layouts
Bootstrap Introduction
Bootstrap Forms
Bootstrap HOME
1. Review the bootstrap information
2. Make sure you understand enough to implement the assignment
3. There is nothing to submit for this section
Part #2: Create gitlab project
Estimated time: 10 minutes
Exercise:
Gitlab
o Create project cse383_hw5 in your account.
Ceclinux
o Clone the project into ~/public_html/cse383
o All work will now be done in ~/public_html/cse383/cse383_hw5
o Make sure you submit all revisions
o Add screen grabs
Page 1 of 4
CSE383 HW #5 Bootstrap Forms
Part #3: Create bootstrap form
Estimated time: 1-3 hours
Exercise:
You are to create an html file and associated style sheet that will cause the
browser to display a good looking and functional form using bootstrap and
submit the form, using POST, to a php program called hw5f21.php. I am
providing hw5f21.txt (rename it as hw5f21.php and save it in the local
directory) and you need to make minimal changes to it (only change the
password). You will do most of the work in index.html and the associated
style sheet.
Note: Required Fields
The required fields are defined in the comments of
hw5f21.php.
Must include:
Header with your name at the top
A picture
Footer with the class, assignment and date due at the bottom
Test it by submitting the form. You must get a good formatted result as seen
in the provided example.
You should only modify hw5f21.php so that
the db password (‘FIXME’) to be “55gf343asdf”
updating the password is the ONLY change you need to make to
the hw5f21.php program.
Yes this is PHP. No you don’t need to know php.
Note: You are in charge of making the “good looking and functional form”.
Part of this lab is a word document explaining your reasoning why the form
you created is “good looking” and functional.
Submit the changes to git
o Screen grab from gitlab showing files uploaded
Example: Here is my form
Page 2 of 4
CSE383 HW #5 Bootstrap Forms
Example of good result:
Part #4: Write a brand new Word Document
Estimated time: 15 minutes
Exercise:
Make sure it includes your name, class, assignment etc…
Justify why your form is “Good Looking” and “functional” using full
sentences and paragraphs
o Explain more than “I made it – so it is good”, “It looks ok to me”
Page 3 of 4
CSE383 HW #5 Bootstrap Forms
SUBMIT:
Word Document
Screenshots (may be inside word or separate)
o Attach a screenshot showing gitlab with changes submitted
o Attach a screenshot of your completed web page
o Attach a screenshot of the correct form completion page
File
o Attach the html file
o Attach the external css file
Page 4 of 4