Description
Attached. Please make sure to do every single step. This is a very important project.
Unformatted Attachment Preview
Midterm Project
CSIT 337
Spring 2024
Read the instructions carefully!
Create a simple web application with resposive design. The index.php page looks like the
following.
This is your home page. You should replace John with your team (company) name. For example,
if your team’s name is Wonderful then replace all occurrences of John’s Resort with ‘ Wonderful
Resort’.
There are five menu items: Home, Yurts, Activities, Reservation and Comments. Home page is
index.php page.
If the device width is less than sm breakpoint, your home page would look like the following. The
menu items collapsed and a Hamburg icon appeared.
The hamburger menu icon can be toggled to display the menu items vertically stacked on the
center of the page as the following
When the hamburger icon is clicked again, the menu items will disappear.
If user clicks on Yurts then the yurts page will appear as the following.
Once again if the device screen size is equal or greater than sm (here is 576 px), it looks like the
following.
If user clicks on Activities, the web page will show as below for sm, md, lg, xl devices.
For xs small device images will stack up. See some screenshots at the back of this handout.
When a user clicks on the image, it will display that image by itself alone on the screen.
The following is an example when user clicks on Pool.
Because you can choose your own favorite images, please make sure you submit all images you
used when you turn in your project.
If user clicks on Reservation, a reservation page will appear as a web form.
The Reservation form for this resort asks the user to enter the following information.
a. First name
b. Last name
c. Address (includes number&street, city, state, zip)
d. Duration of stay (i.e., check in and checkout dates)
e. Room type (use a drop down or a data list. King, Queen, Suit)
f. Phone number (in the format of US phone (123) 456-7890)
g. Email address (must legal format like [email protected])
h. How many people of this reservation
i. Payment method (use a dropdown list. MC, VISA, AMEX, Discover)
j. Card number (4 digits a group, total of four groups, 16 digits total. Only accept if input 16
digits)
k. Special requests field is optional field and not a required field.
First name field will be autofocused when this page is loaded. All fields are required except Special
Requests field. To simplify this application, assume there are three room types: King, Queen, and
Suite. King costs $200, Queen $150 and Suite $300. The tax rate is 7%.
If the user will stay three nights and chose Queen room, then the total charge would be $481.50
which is equal to ($150 * 3) * 1.07 = $481.50.
Similarly for Suite room type, the total charge of three nights saty will be ($300.0 * 3) * 1.07 =
$963.00
Assuming we entered the data as the following. Note our check-in date and check-out date are
the same. We allow this and treated as one day stay.
Your website will respond as the following
Total charge is 150 *1 * 1.07 = 160.5.
Here is another test run,
The response from your system
Total charge is (200 * 4 * 1.07) = 856 for 4 nights with 7% tax rate.
For this project, we don’t store the reservation information into database. So, you don’t have to
use database.
If user clicks on Comments, the page shows as below.
If user did not enter anything and press submit, your system will respond as
If user entered comment but no other fields filled,
Your system responds as
To simplify our application, we did not store comments to our database for this project.
If user entered name and email and comment,
The response looks like
So, the business logic that sets up greeting title is as the following
1. Name (if Name is entered) or
2. Email (if Name not available but Email is entered) or
3. Guest (If both Name and Email are not available)
The following shows when user enter only email
How about if only phone number entered?
I.e., never use Dear phone-number to greet people!
Team Project
This project should be done as a team. The team leader must submit all materials of the project
to Canvas. One team one submission. I.e., only the leader will submit the project. Use Zoom or
other video authoring software to create a demo video of your project which shows you fulfill the
requirements of the specifications. You can start your video with a slide contains all members’ full
names. The second slide contains the contribution and percentage efforts of each member. The
third slide list hardware, software used. The fourth slide list features implemented. The last slide
contains undone feature(s). It will then follow by a live demo of your website. Make sure to
demonstrate that your website design is responsive. I.e., Demo in your video about how your web
pages respond to different devices by clicking on Toggle-device using Inspect tool of the browser.
Requirements and grading criteria
Us XAMPP to run your application on localhost.
Use Bootstrap to achieve the responsive design.
Create these web pages using html elements, Bootstrap library, PHP statements.
Create the home page and call it index.php (important!).
Clicking on the menu item will bring you to the corresponding page even if you port these pages
to others’ computer. I.e., your web pages are portable and NO absolute href refers to your
computer say desktop, your C drive and no images absolutely refers to a full path in your file
system. Don’t forget to submit all images that you used in your project.
Create these web pages based on the instructions given (each error may cause you at least 2% of
total grade)
What to submit
1. All source code and image files
2. A PowerPoint slides which contains
a. Names of all team members
b. Contributions of each team member in percentage
c. Hardware and software used in this project.
d. Features implemented
e. Feature(s) did not implemented
f. YouTube link for your project live demonstration
3. Create a folder call it YourTeamNameMidtermProj
4. Put item 1 and 2 above into the folder from step 3
5. Zip YourTeamNameMidtermProj folder (important! 20% penalty if you don’t zip).
Note: If you don’t have zip utility, you may try 7-zip (an open source)
Where to submit this project
Submit the zipped file to Canvas
Due date and time
3/17/2024 before midnight
Some responsive screenshots
iPad Pro used below. Two images in one row. Menu item expanded and shown.
The same page but on smaller screen device (iPhone 12 Pro). Menu items collapsed and Hamburg icon
appeared. One image one row.
When hiking image clicked on iPhone 12 Pro.
When Pool clocked on iPad Mini.
When comments clicked on iPhone 12 Pro
On iPad Mini, when click on Comments
Purchase answer to see full
attachment
