+1 862 207 3288 Assignment 6 – Beach Resort (jQuery and Ajax)
In this assignment, we’ll get our feet wet with jQuery and Ajax. Start out by downloading the beach resort template . You will be editing the beach.html file, but don’t forget to have the supporting folders (images, css, js) alongside.
We will use jQuery and Ajax to accomplish the following:
1. Animated Logo
2. Scrolling images
3. Drop down content
4. Sliding View content
5. Dynamic content loading
Part 1
To get started, inside the empty <script> tags, add the following:
$(document).ready(function()
{
});
Inside this document.ready function, add the following:
$(“.flip”).click(function(){$(“.panel”).toggle();});
This will allow us to toggle the panel at the middle of the page. (Go ahead and test it out to make sure it works before moving forward)
Inside the document.ready, now add the following:
$(“div#logo”).animate(
{height:”100px”, width:”650px”, opacity:”0.5″},”slow”);
This code will animate the box at the top of your page.
Add the following to animate the text:
$(“div#logo”).animate({fontSize:”2em”},”slow”);
Next, let’s create an image show with a tcycle plugin (it’s already linked for you in the template page)
More info: http://jquery.malsup.com/cycle2/tcycle/ (Links to an external site.)
Add the following code inside your <body> and change the images to ones you want to use:
<div>
<img height=”400″ src=”http://www.shoresresort.com/images/masthead/about-main.jpg”>
<img height=”400″ src=”http://pcbeachcondorentals.com/Snapshots/Condos%20Pics/longbeach-outside/1.jpg”>
<img height=”400″ src=”http://ihg.scene7.com/is/image/ihg/crowne-plaza-hollywood-3092670558-2×1?wid=1600&hei=800&fit=fit,1″>
</div>
Update images with ones of your own choosing.
Part 2
Now, let’s add in sliding content and dynamic content. To slide content, refer to this page:
http://designshack.net/articles/css/how-to-design-animated-sliding-page-elements-with-css/ (Links to an external site.)
The script has already been attached for you (scrollview). To use it, you will need to apply properties to your div tags. Go ahead and try one out on a random div tag:
<div data-position=”left”>
<img src=”img/beach2.jpg” width=”700″ >
</div>
Notice the floatl is applied, it means the image will float in from the left. Animate at least three elements on your page to come in from different directions.
Part 3
Create an Ajax function and button that loads a set of activities from an XML file and displays them on your page. It should list the name of the activity and the time it is held. Incorporate this into the div tag that says “sign up for an activity”.
You should use the W3 example here as a starting point: http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_xml2 (Links to an external site.)
You will need a separate XML file like we discuss in class to contain the activity info, just like they do with the CD information:
http://www.w3schools.com/ajax/cd_catalog.xml (Links to an external site.)
Part 4
Add a form at the bottom of the page (by the “reserve room” button) that takes in a customer’s name, email, the days they wish to stay, and the number of guests.
Lastly, add your own text, colors, and images. Add at least two more containers with your own content.
Assignment 7 – Beach Resort Part 2 (PHP and Ajax)
Using the beach.html as a starting point from the previous assignment, make a separate copy and call it beach2.html.
We will add more functionality to this page with PHP and Ajax to allow users to reserve rooms and search for activities.
Step 1. (5 points)
Create a confirmation page php file that will display the user’s reservation confirmation when they click the reserve button on the bottom of your page by the form. This confirmation should display all the form elements (name, number of guests, etc…) and then email you the results.
You can see an example of this function at:
http://www.w3schools.com/Php/php_forms.asp (Links to an external site.)
To email in php, see this example: (Links to an external site.)
Step 2 (5 points)
Next we will incorporate an auto-complete function. This will use Ajax and PHP to provide the user with suggested activities they may be interested in. Above the “activity” button from your previous assignment, add in a new form element that allows users to search for activities. Then when a user types in something like “vol” it will provide a suitable suggestion “volleyball”.
You will need to make a seperate php file to call. (In total you will have three new files, beach2.html and the two php files)
For details on how to complete this, please see:
http://www.w3schools.com/Php/php_ajax_php.asp (Links to an external site.)
Assignment 8 – Beach Resort Part 3 (PHP and MySQL)
In this assignment we will create a MySQL data and populate it with the data from our form we worked on in the previous two assignments.
You must first set up a mysql database on your host or on FIT’s site as mentioned in the announcement:
https://internalservices.fit.edu/itresources/ (Links to an external site.)
(Links to an external site.)You can use the same database from the db course if you wish (just make new tables). Take note of what the name and password of the database are, you will need them later on in the assignment.
You will need to create a table called “reservations” and four attributes:
• name
• email
• arrival date
• duration (length of stay)
Create a copy of your beach2.html and name it beach3.html.
In your beach3.html we will add a new link called “check reservations”. For a reminder on how to do links, see:
http://www.w3schools.com/html/html_links.asp (Links to an external site.)
We will now add in the function to insert data.
For your original form, you will need to edit the php file that is associated with the form (it should be reserve.php like we discussed in the last class). Make a duplicate and call it reserve2.php.
Inside your php, add code to insert your four form items into a mysql database like the example from class:
http://www.w3schools.com/php/php_mysql_insert.asp (Links to an external site.)
For the new button, make a new page called reservations.php and link it with the action=”reservations.php” property.
In this page we will display all the reservations from the database. You will need to pull the data from the MySQL table like the example below:
http://www.w3schools.com/php/php_mysql_select.asp (Links to an external site.)
Add some HTML/CSS and images to “pretty” up your reservations.php page
PLACE THIS ORDER OR A SIMILAR ORDER WITH US TODAY AND GET AN AMAZING DISCOUNT 🙂
