jQuery(document).ready(function() {
//find p hide, find h3,to active the function
$(‘#rightside’).find(‘p’).hide().end().find(‘h3’).click(function(){
$(this).next().slideToggle()
});
});
Monthly Archives: May 2013
create a php page with in paypal button and link–this just continue with previous page
<?php
echo “<h1>Welcome to Bazaar online shop</h1>”;
include(“inc_db.php”);//connect to database newsletter
if($DBConnect)
{
$table = “products”;
$query = “select * from $table”;
$result = @mysql_query($query,$DBConnect);
echo “<table width = ‘80%’ border = ‘1’>”;
echo “<tr><th>Name</th><th>Cost</th><th>Image</th><th>Description</th><th>Add to Cart</th><th>Go Pay</th></tr>”;
while($row = mysql_fetch_assoc($result))
{
echo “<tr><td>$row[Name]</td><td>$row[Cost]</td>”;
echo “<td><img src =’images/”.$row[‘Image’].”‘/></td><td>$row[Description]</td><td>”;
echo “<form action=’https://www.paypal.com/cgi-bin/webscr’ method =’post’>”;
echo “<input type=’hidden’ name=’cmd’ value=’_cart’>”;
echo “<input type=’hidden’ name=’business’ value=’youremail@host.com’>”;
echo “<input type=’hidden’ name=’item_name’ value='”.$row[‘Name’].”‘>”;
echo “<input type=’hidden’ name=’amount’ value='”.$row[‘Cost’].”‘>”;
echo “<input type=’hidden’ name=’currency_code’ value=’AUD’>”;
echo “<input type=’hidden’ name=’add’ value=’add’>”;
echo “<input type=’hidden’ name=’bn’ value=’PP-ShopCartBF:btn_cart_LG.gif:NonHostedGuest’>”;
echo “<input type=’image’ src = ‘https://www.paypalobjects.com/en_AU/i/btn/btn_cart_LG.gif’ border=’0′ name=’submit’ alt=’PayPal – The safer,easier way to pay online.’>”;
echo “<img alt=” border=’0′ src=’https://www.paypalobjects.com/en_AU/i/src/pixel.gif’ width=’1′ height=’1′>”;
echo “</form></td>”;
echo “<td><form action=’https://www.paypal.com/cgi-bin/webscr’ method =’post’>”;
echo “<input type=’hidden’ name=’cmd’ value=’_xclick’>”;
echo “<input type=’hidden’ name=’business’ value=’youremail@host.com’>”;
echo “<input type=’hidden’ name=’item_name’ value='”.$row[‘Name’].”‘>”;
echo “<input type=’hidden’ name=’amount’ value='”.$row[‘Cost’].”‘>”;
echo “<input type=’hidden’ name=’currency_code’ value=’AUD’>”;
echo “<input type=’hidden’ name=’bn’ value=’PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest’>”;
echo “<input type=’image’ src = ‘https://www.paypalobjects.com/en_AU/i/btn/btn_buynowCC_LG.gif’ border=’0′ name=’submit’ alt=’PayPal – The safer,easier way to pay online.’>”;
echo “<img alt=” border=’0′ src=’https://www.paypalobjects.com/en_Au/i/src/pixel.gif’ width=’1′ height=’1′>”;
echo “</form></td></tr>”;
}
echo “</table>”;
mysql_free_result($result);
mysql_close($DBConnect);
}
?>
a paypal shopping cart with php here is the source code for you catalog–continue
first, create your catalog and product database, here is the source code:
— phpMyAdmin SQL Dump
— version 2.10.3
— http://www.phpmyadmin.net
—
— Host: localhost
— Generation Time: May 24, 2013 at 02:43 PM
— Server version: 5.0.51
— PHP Version: 5.2.6
SET SQL_MODE=”NO_AUTO_VALUE_ON_ZERO”;
—
— Database: `bazaar`
—
CREATE DATABASE `bazaar` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `bazaar`;
— ——————————————————–
—
— Table structure for table `categories`
—
CREATE TABLE `categories` (
`CatID` int(11) NOT NULL auto_increment,
`Name` varchar(50) NOT NULL,
PRIMARY KEY (`CatID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;
—
— Dumping data for table `categories`
—
INSERT INTO `categories` VALUES (1, ‘Bazaar Ceramics Catalogue’);
— ——————————————————–
—
— Table structure for table `products`
—
CREATE TABLE `products` (
`ProdID` int(11) NOT NULL auto_increment,
`CartID` int(11) NOT NULL,
`Name` varchar(50) NOT NULL,
`Cost` decimal(8,2) NOT NULL,
`Image` varchar(50) NOT NULL default ‘NoImage.jpg’,
`Description` varchar(250) default NULL,
PRIMARY KEY (`ProdID`),
KEY `CartID` (`CartID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=11 ;
—
— Dumping data for table `products`
—
INSERT INTO `products` VALUES (1, 1, ‘Copper Red Dish 001’, 450.00, ‘bcpot002_smaller.jpg’, ‘Shallow Copper Red dish form showing distinctive qualities of this traditional reduction fired glaze. Fired to 1300 degrees’);
INSERT INTO `products` VALUES (2, 1, ‘Copper Red Bottle 001’, 550.00, ‘bcpot003_smaller.jpg’, ‘Copper Red bottle form. Reduction fired to 1300 degrees’);
INSERT INTO `products` VALUES (3, 1, ‘Chun bowl 001’, 350.00, ‘bcpot006_smaller.jpg’, ‘Blue Chun bowl with tea stain rim over terracotta. Fired to 1300 degrees’);
INSERT INTO `products` VALUES (4, 1, ‘Moonscape bowl 001’, 320.00, ‘bcpot009_smaller.jpg’, ‘High Calcium bowl with white glaze over blue slip. Fired to 1280 degrees’);
INSERT INTO `products` VALUES (5, 1, ‘Crystalline bowl 001’, 250.00, ‘bcpot013_smaller.jpg’, ‘Blue Green Crystalline glaze. Narrow-foot bowl with clear glaze outside. Fired to 1300 degrees’);
INSERT INTO `products` VALUES (6, 1, ‘Carved vase form 001’, 450.00, ‘bcpot014_smaller.jpg’, ‘Carved Iron stoneware vase form. Oxidation lustre on rim. Fired to 1280 degrees’);
INSERT INTO `products` VALUES (7, 1, ‘Carved vase form 002’, 450.00, ‘bcpot016_smaller.jpg’, ‘Carved dry matt calcium vase form. Fired to 1280 degrees’);
INSERT INTO `products` VALUES (8, 1, ‘Carved Bottle form 001’, 600.00, ‘bcpot018_smaller.jpg’, ‘Carved dry matt calcium bottle form. Lustre rim. Fired to 1280 degrees’);
INSERT INTO `products` VALUES (9, 1, ‘Dry earth vase form 001’, 500.00, ‘bcpot012_smaller.jpg’, ‘Vase form. White slip over earthenware clay. Fired to 1000 degrees’);
INSERT INTO `products` VALUES (10, 1, ‘Carnivale cup and saucer 001’, 150.00, ‘bcpot008_smaller.jpg’, ‘ Cup and Saucer with Carnivale design. Coloured slips under clear glaze. Earthenware’);
use javascript create images gallery, ratate images fucntion
var i =0;
function rotate1(){
var imgArray = new Array(“aphex”,”addiction”,”amy”,”abba”,”donna”,”elliott”,”fergie”); //store images in an array
picName=imgArray[i];
//change div picture1 background images
document.getElementById(‘picture1’).style.backgroundImage = “url(images/product/”+ picName +”.jpg)”;
( i == (imgArray.length – 1 )) ? i = 0 : i++; //if (i = 6){ change i=0} else {i++}
}
window.setInterval(rotate1, 2000);//change every 2 seconds
Here is the source code for cookie
//when login use innerHTML write html cotent to login area,welcome back user and the logout button
function html_login(){
var login=document.getElementById(“login”);
var udata=document.cookie.split(“|”);//too obvious just use split separete the info
login.innerHTML='<div id=”userinfo”>’+
‘welcome back ‘ + udata[0] + ‘ <br/><br/> <a href=”#nogo” onclick=”javascript:logout();”>logout</a>’+
‘</div>’;
var tname=document.getElementById(“txtname”);
if(tname)tname.value=udata[0];//write into txtname box
var temail=document.getElementById(“txtemail”);
if(temail)temail.value=udata[1];//write into txtemail box
}
//when user logout use innerHTML write a form
function html_logout(){
var login=document.getElementById(“login”);
login.innerHTML=’ <form id=”login” action=””>’+
‘<p><label for=”txtuser”>User:</label> <input type=”text” name=”txtuser” id=”txtuser”/><br/>’+
‘<label for=”txtpass”>Password:</label> <input type=”password” name=”txtpass” id=”txtpass”/><br/>’+
‘<input type=”button” id=”btnlogin” name=”btnlogin” value=”Login” onclick=”javascript:login();”/></p>’+
‘</form>’;
var tname=document.getElementById(“txtname”);
if(tname)tname.value=””;//change value back to empty
var temail=document.getElementById(“txtemail”);
if(temail)temail.value=””;//change value back to empty
}
//validate user just for validate if it is empty
function login(){
var txtuser=document.getElementById(“txtuser”);
var txtpass=document.getElementById(“txtpass”);
if(txtuser.value==””){
alert(“User can’t be null”);
txtuser.focus();
return;//return false
}
if(txtpass.value==””){
alert(“Password can’t be null”);
txtpass.focus();
return;//return false
}
//login then store the value, and give a default email address
document.cookie=txtuser.value + “|” + txtuser.value+’@hotmail.com’;
html_login();
}
//logout is easy, empty cookie
function logout(){
document.cookie=””;
html_logout();
}
here is the answer cookies login logout info question
first, use javascript the innerHTML create a html_login and log_out page(actional this not a page ,just 2 div),when validate pass then get in show this div info “welcom back use + logout button or a linked paragraph” something like this.
second. ease,you validate the page,for assessment only need validate not empty. For the real world you will go to the database check the info. if not empty, then store the info to document.cookie=txtuser.value + “|” + txtuser.value+’@tafensw.edu’;
third. in you login_div, you just use this info:
here is the code:
var tname=document.getElementById(“txtname”);
if(tname)tname.value=udata[0];//write into txtname box
var temail=document.getElementById(“txtemail”);
if(temail)temail.value=udata[1];//write into txtemail box
use cookies for login and logout and write the info into contact form
Q3, Q4, could been done togather.
The question is that provide code for a login feature.Once the user logs in successfully,every page of the site will display the user’s login name, along with a link allowing them to logout at anytime.You will need to use cookies to maintain a logged in state across all pages of the website.
the question 4 is once user has logged in ,and the fill out the enquiry form, automatically fill in the name and email fields when the user loads the contact.htm page.
so here is your javascript source codes
you could save it in external file, then connect to your html page, actually in previous page ,already add connect.
here is the source codes for previous question.
//contact page
function validateForm()
{
var name = document.getElementById(‘txtname’);
var email = document.getElementById(‘txtemail’);
var artist = document.getElementById(‘txtartist’);
var album = document.getElementById(‘txtalbum’);
var comments = document.getElementById(‘txtcomments’);
//[[check if the user put any value
if(name.value.length==0)
{
alert(“Please tell me your name.”);
name.focus();
name.select();
return false;
}
if(email.value.length==0)
{
alert(“Please tell me your email address.”);
email.focus();
email.select();
return false;
}//]]end here for check if empty
if(email.value.indexOf(‘@’)<0 || email.value.indexOf(‘.’)<0) //check email address must have @ and .
{
alert(“Email address is invalid,Please enter a valid email address.”);
email.focus();
email.select();
return false;
}
if(artist.value.length==0)//check use if is empty
{
alert(“Please tell the artist.”);
artist.focus();
artist.select();
return false;
}
if(album.value.length==0)//check use if is empty
{
alert(“Please tell the album or songs.”);
album.focus();
album.select();
return false;
}
if(comments.value.length==0)//check use if is empty
{
alert(“Please tell the album or songs.”);
comments.focus();
comments.select();
return false;
}
//use confirm comand arrow use change mind,let use go back write again
var doit = confirm(“your name is ” +name.value+”,\n your email is “+email.value+”,\n artist is “+album.value+”,\n comemnts is “+comments.value+” \n If it is correct, please ok,if it is not then click cancel,go back fill the form again.”);
if (doit)
{
alert(“Thanks for fill out the form! You can continue now.”);
}
else
{
alert(“Plese enter the information again”);
}
}
validate form in contact.html. If the form has been validated, show an aler box that displays the data entered and asks the user if that data entered is correct.
this post and the follow post for help people for javascript assessment not for the real world
Q1. validate form in contact.html. If the form has been validated, show an aler box that displays the data entered and asks the user if that data entered is correct. If yes, thanks the visitoer and submit the form. If no,prevent the form from submitting and display detailed error messages for the incorrect fields.
the contact.html page just like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Beatmap Product Enquiry Form</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”js/share.js”></script>
<script language=”javascript” src=”js/all.js”></script>
<script type=”text/javascript” src=”js/autochange.js”></script>
<link href=”styles/style.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
.title {
margin-bottom:10px;
}
#rightside {font-size:10px;
}
br{line-height:3;
}
#header br{line-height:1;
}
fieldset{width:350px; margin:0 50px; padding:20px;
}
legend {font:900 1.2em helvetica, verdana, sans-serif;color:#fff;
}
#picture1{background-image:url(images/product/rihanna.jpg);
}
#picture2{background-image:url(images/product/staticx.jpg);
}
</style>
</head>
<body>
<div id=”central”>
<div id=”header”>
<div id=”login”>
</div>
</div>
<ul id=”navlist”>
<li><a id=”n1″ href=”index.htm”>Home</a></li>
<li><a id=”n2″ href=”products.htm”>Products</a></li>
<li><a id=”n3″ href=”reviews.htm”>Reviews</a></li>
<li><span id=”current”><a id=”n4″ href=”contact.htm”>Enquiries</a></span></li>
</ul>
<div id=”content” style=”background-image:none;”>
<div id=”leftside”>
<h3>Featured Artist</h3>
<div id=”picture1″></div>
<h3>Featured Artist</h3>
<div id=”picture2″></div>
</div>
<div id=”rightside”>
<form id=”project” action=”#” onsubmit = “return validateForm()”>
<fieldset>
<legend>Contact Details</legend>
<label for=”txtname”>Your Name:</label> <input type=”text” name=”txtname” id=”txtname”/><br/>
<label for=”txtemail”>Email:</label> <input type=”text” name=”txtemail” id=”txtemail”/><br/>
<label for=”txtartist”>Artist:</label> <input type=”text” name=”txtartist” id=”txtartist”/><br/>
<label for=”txtalbum”>Song / Album:</label> <input type=”text” name=”txtalbum” id=”txtalbum”/><br/>
<label for=”txtcomments”>Comments:</label> <textarea name=”txtcomments” id=”txtcomments” cols=”30″ rows=”20″></textarea><br/>
<input type=”submit” id=”btnSubmit” name=”btnsubmit” value=”Send Enquiry”/>
</fieldset>
</form>
</div>
<div id=”footer”> <p>© Beatmap 2013</p></div>
</div>
</div>
<script language=”javascript” src=”js/init.js”></script>
</body>
</html>
The MVC Pattern in PHP
The MVC Pattern is the idea you write you program that work in 3 different Model-View-Control ways.
view store data.
control pass data to model.
model run program(the data pass from control).
Sandy | Full stack Web developer 
