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 was no update for nearly two weeks before, due to laziness or other things that delayed it. I'm fine now, I'm back home. Although there is no water supply at home, there is snow outside, and it's freezing cold, all the inconveniences are nothing compared to a little leisure.

Start the only way for everyone to learn PHP - the development of e-commerce websites.

1. E-commerce website development - front-end

1. Home page production

1.1 Overview & Preparation

What does the entire e-commerce website include? It is the homepage information, the subsequent category information page, product details page, shopping page, after-sales page, etc., so I will do it step by step. When doing it yourself, you can simply draw an overview diagram to guide development to avoid confusion in logic.

Preparation: Project folder, which must have three subfolders: images (picture materials), js (javascript), and style (css). As for tools, it depends on personal preference, but it involves the front end. Generally, most people are accustomed to using DS. I am lazy, so I just use the zend browser to do the calculations.

One of the preparations is to implement reset.css, which is the reset/clear css effect. I am basically an idiot when it comes to css, so I found the source code and posted it, and deleted it:

@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:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float: left;}
.fr{float:right;}

1.2 Top structure

I don’t know how to use fireworks yet, so I’ll learn it first.

--------It's really painful. I found myself naive at the beginning. Let's complete the advanced jQuery for web first----------

2. jQuery

12. jQuery Online Chat Room

12.1 Basic Function Introduction

You can only enter after logging in (for online display of basic information);

Dynamic display of the exchanged content;

Communication between text and expressions (expressions are also character code codes)

Technical focus: ajax’s refreshless technology display data

12.2 Implementation effect

Use the ajax function in jq (such as $.ajax, etc.) to achieve login. When logging in, it will display that the login is in progress, correct or failed, and there will be corresponding actions;

The chat room is the chat content area, input area, and personnel display area.

12.3 Process

Login page -> Request login information (username and password information) from the server -> Success: Jump to the chat home page; otherwise, jump back to the login page.

Chat page——》Request chat data——》Get chat data;

Online personnel information——》Request——》Get;

So, you can simply draw a diagram. I skimmed it here, and then you can clearly see the number of pages that need to be done, the logic and correspondence between requests and responses.

12.4 Login page development login

--Function

Verify login information;

Enter the chat room;

--Code

A method that has been discussed in PDO before, directly using the POST method to pass table parameters:

Then the follow-up work can be implemented in 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();//显示结果集statement对象中的行数
echo $shit;
if($shit == 1){
//$url="ChatMain.html";
echo "";
echo "";
}else{
echo "";
echo "";
}

} catch (PDOException $e) {
echo $e->getMessage();
}

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

我们在这里想要的是jQuery实现方法：换一种实现，同时把登录做的稍微好看一点点哈（我觉得好看，一个在于对应的css文件的编写，另一个在html中实现，DS工具实现要方便一点，有时间也得整着学一下）；

Among them, js is the javascript logic control file; jq is the jquery implementation file; css is the css file; the span tag behind is temporarily left to implement certain functions.

$(function(){
//Element binds global ajaxStart event
//Here is the span tag used to give 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("Username cannot be empty!");
$name.focus();
return false; // Prevent further actions, a very important step
}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 data
success:function(data){
if(data=="1"){
window.location="ChatMain.html";
}else{
alert("Wrong username or password!");
return false;
}
}
});
}

Actually, there are still mistakes in this. The implementation is not as simple and clear as the first implementation method. I hope brothers who know more can give me some advice on the advantages and disadvantages of the two methods.

I have slightly improved the first PDO method, directly posting table data in HTML, comparing it with the database, and then returning the information.

Of course, the obvious advantage of the second method, which is the method that should be used, is its modular implementation, which is also clear to developers. However, I personally think that in small tasks, if there is no uniformly planned name, etc., this kind of modularization will appear redundant. After all, it still needs to be checked to see if the modules match. I don’t know if I understand it correctly.

12.5 Chat Room Page ChatMain

From the page itself, the head contains jq files, js files, and css files; the body realizes the effect of the current page and also implements the interface function;

In terms of layout, it looks like a chat window, with three frames (but I don’t know how to use CSS!!!);

-----I may not be able to write at night, let’s post it first-----