I am back-e-commerce website Development &jquery,back-E-commerce _php Tutorial

I am back-e-commerce website Development &jquery,back-E-commerce

Hi

There have been no updates for nearly two weeks, except that laziness is something else that has been delayed. Now, go home, although the home water, there is snow, cold, but a lot of inconvenience, are better than a little idle.

The development of e-commerce website is the only way to learn PHP.

1, e-commerce website development-Front

First, home production

1.1 Overview & Preparation

The whole e-commerce site includes what is the home page information, the following category information page, product details page, shopping page, after-sales page and so on, so just step by step. When you do it, you can simply draw an overview map to guide the development, lest the logic mix.

Prepare: Project folder, where you want to have images (picture footage), JS (JavaScript), Style (CSS) three subfolders. Tools, see personal hobbies, but involved in the front-end, generally used to use more DS, I am more lazy, directly with zend+ browser calculation.

One of the preparations is to achieve reset.css, that is, clear 0/Remove CSS effect. CSS I basically is an idiot, find a source paste out, Invasion delete:

@charset "Utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
Img{border:none;}
Li{list-style:none;}
Input,select,textarea{outline:none;border:none; background:none;}
Textarea{resize:none;}
A{text-decoration:none; color: #656565;}

/* Clear FLOAT */
. Clearfix:after{content: "";d Isplay:block;clear:both;}
. Clearfix{zoom:1;}
. Fl{float:left;}
. Fr{float:right;}

1.2 Top structure

Do it with fireworks, I will not, first to learn.

--------is really egg ache, make a beginning to find oneself naive, first complete the web Advanced jquery bar----------

2. JQuery

12. jquery Online chat Room

12.1 Introduction to Basic functions

Login to enter (for basic information on-line display);

Dynamic display of the content after the exchange;

Text and expression communication implementation (emoticons are also character code code)

Technical Focus :Ajax -Free technology presentation data

12.2 Implementation Effect

Using the Ajax functions in JQ (such as $.ajax, etc.) to achieve landing, landing, display landing, correct or failure, there are corresponding actions;

Chat room is the chat content area, input area, people display area.

12.3 Process

Login page--"Request login information from the server (username and password information)--" success: Jump to the chat homepage, otherwise, jump back to the login page.

Chat page-"Request chat data-" to get chat data;

Online personnel information--"request--" access;

So, it can be simply plotted, here I skim, and then clearly see the number of pages needed to do, the logic and correspondence of the request and response.

12.4 Login Page Development Login

--function

Verify login information;

Enter the chat room;

--code

A method used to pass table parameters directly using the Post method, as previously mentioned in PDO:

Login

Then the follow-up work is realized in the login.php;

Header (' Content-type:text/html;charset=utf-8 ');
$username =$_post[' username '];
$password =$_post[' password '];
try {
$pdo =new PDO (' Mysql:host=localhost;dbname=imooc ', ' root ', ');
$pdo->exec (' use imooc_pdo ');
$sql = "SELECT * from user where username=? and password=? ";
$stmt = $pdo->prepare ($sql);
$stmt->execute (Array ($username, $password));
$stmt = $pdo->query ($sql);

$shit = $stmt->rowcount ();//Displays the number of rows in the result Set statement object
Echo $shit;
if ($shit = = 1) {
$url = "chatmain.html";
echo "";
echo "";
}else{
echo "";
echo "";
}

} catch (Pdoexception $e) {
echo $e->getmessage ();
}

----------------------------------------------

What we want here is the jquery implementation method: Another implementation, while the login to do a little bit of good-looking AH (I feel good, one in the corresponding CSS file writing, another in the HTML implementation, DS tool implementation to facilitate a little, have time to complete learning);

Login

User Login

User:
Password:

Where JS is a JavaScript logic control file; JQ is a jquery implementation file; CSS is a CSS file; the later span tag is for some functionality to be left behind.

$ (function () {
Element Binding Global Ajaxstart Event
Here is the label for the span, which gives the process
$ ("#divMsg"). Ajaxstart (function () {
$ (this). Show (). HTML ("Sending login request ...");
})
$ ("#divMsg"). Ajaxstop (function () {
$ (this). HTML ("Request processing completed!") "). Hide ();
})
$ ("#Button1"). Click (function () {
var $name =$ ("#txtName");
var $pass =$ ("#txtPass");
if ($name. val ()!== "" && $pass. Val ()!== "") {
Userlogin ($name. Val (), $pass. Val ());
}else{
if ($name. val () = = "") {
Alert ("User name cannot be empty!") ");
$name. focus ();
return false; It's an important step to stop further action.
}else{
Alert ("Password cannot be empty!") ");
$pass. focus ();
return false;
}
}
})
});

function Userlogin (name,pass) {
$.ajax ({
Type: "GET",//Submission method
URL: "index.php",//Submit Object
Data: "action=login&d=" +new Date () + "&name=" +name+ "&pass=" +pass,//Submit
Success:function (data) {
if (data== "1") {
Window.location= "chatmain.html";
}else{
Alert ("The user name or password is wrong!") ");
return false;
}
}
});
}

In fact, there is still a mistake, to realize that there is no first way to realize the simple and clear, hope to understand the brothers pointing, the advantages and disadvantages of the two methods.

I still slightly perfected the first PDO method, post the table data directly in HTML, match the database, and then return the information.

Of course, the second, which is supposed to be used in this way, is obviously the advantage of its modular implementation, for developers is also clear. But, privately thought, the small task, if does not have the unified plan good name Ah, what, this looks like the module is not redundant, after all, still need to see whether the module matches ah what, do not know understanding is right.

12.5 Chat Room Page Chatmain

From the page itself, is the head contains JQ files, JS files, CSS files, the body to achieve the current page effect, but also the implementation of the interface function;

From the layout, is the chat window look, three boxes to do (but Nima will not use CSS Ah!!!!) ）；

-----don't have to write in the evening, just send it-----

http://www.bkjia.com/PHPjc/1094921.html www.bkjia.com true http://www.bkjia.com/PHPjc/1094921.html techarticle I am back-e-commerce website Development jquery,back-e-commerce hi before there is nearly two weeks of time has not been updated, except lazy is other things delayed. Well now, go home, although the water is water ...

