ホームページ > バックエンド開発 > PHPチュートリアル > 私は裏ECサイト開発&jQuery、裏EC_PHPチュートリアルです

私は裏ECサイト開発&jQuery、裏EC_PHPチュートリアルです

WBOY
リリース: 2016-07-12 09:00:06
オリジナル
1053 人が閲覧しました

裏ECサイト開発&jQuery、裏ECです

こんにちは

2 週間近く更新がありませんでした。単に怠けていて、他のことが原因で遅れていました。今は元気です、家に帰ってきましたが、家には水道はなく、外は雪が降っていて、凍えるほど寒いですが、ちょっとしたレジャーに比べれば、どんな不便も何でもありません。

誰もが PHP を学ぶ唯一の方法である電子商取引 Web サイトの開発を始めましょう。

1. 電子商取引ウェブサイト開発 - フロントエンド

1.ホームページ制作

1.1 概要と準備

ECサイト全体には何が含まれますか? ホームページ情報、その後ろのカテゴリ情報ページ、商品詳細ページ、ショッピングページ、アフターセールスページなどです。ステップ。自分で行う場合は、概要図を描くだけで、ロジックの混乱を避けるために開発をガイドできます。

準備: プロジェクトフォルダー。images (写真素材)、js (javascript)、style (css) の 3 つのサブフォルダーが必要です。ツールに関しては個人の好みにもよりますが、基本的にはDSを使い慣れている人が多いので、zend+browserで計算しています。

準備の 1 つは、CSS のリセット/クリア効果である Reset.css を実装することです。私は CSS に関しては基本的にバカなので、ソースコードを見つけて投稿し、その後削除しました:

@charset "utf-8";
/* CSS ドキュメント */
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;}
textarea{resize:none;}
a{text-decoration:none;}

/*フロートをクリア*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float :右;}

1.2 上部構造

花火の使い方がまだ分からないので、まずは勉強します。

-----最初は自分が甘かったことに気づきました。まずは jQuery for Web Advanced を完成させましょう----------

2、jQuery

Twelve、jQueryオンラインチャットルーム

12.1 基本機能紹介

ログイン後にのみ入力できます(基本情報のオンライン表示用)。

通信後のコンテンツの動的な表示;

テキストと式間の通信(式も文字コードです)

技術的焦点: ajaxのリフレッシュレス技術表示データ

12.2 実現効果

jq の ajax 関数 ($.ajax など) を使用してログインを実行すると、ログインが進行中であるか、正しいか失敗したかが表示され、対応するアクションが表示されます。

チャットルームは、チャット内容エリア、入力エリア、担当者表示エリアです。

12.3プロセス

ログイン ページ——》サーバーにログイン情報 (ユーザー名とパスワード情報) を要求します——>> 成功: チャット ホーム ページにジャンプします。そうでない場合は、ログイン ページに戻ります。

チャットページ——》チャットデータをリクエスト——》チャットデータを取得;

オンライン人事情報——》リクエスト——》Get;

それでは、図をざっとざっと書いてみるだけで、実行する必要のあるページ数、リクエストとレスポンス間のロジックと対応関係が明確にわかります。

12.4 ログインページ開発ログイン

--機能

ログイン情報を確認します。

チャットルームに入る

--コード

PDO で以前に説明した、POST メソッドを直接使用してテーブル パラメーターを渡す方法:


ログイン



ユーザー名:

パスワード:





その後、フォローアップ作業を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工具实现要方便一点,有时间也得整着学一下);




登录






用户登录



用户:

密码:










そのうち、js は JavaScript ロジック制御ファイル、jq は jquery 実装ファイル、css は特定の機能を実装するために一時的に残されます。

$(function(){
//要素はグローバル ajaxStart イベントにバインドされています
//プロセスに与えるために使用される span タグです
$("#divMsg").ajaxStart(function(){
$( this) .show().html("ログインリクエストを送信中...");
})
$("#divMsg").ajaxStop(function(){
$(this).html("リクエストの処理が完了しました! ").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("ユーザー名を空にすることはできません!");
$name.focus();
return false; // それ以上のアクションを防止します。非常に重要なステップ
}else{
alert("パスワードを空にすることはできません!");
$pass.focus();
return false;
}
}
})
});

function UserLogin(name,pass){
$.ajax({
type: "GET", //送信メソッド
url: "index.php", //送信オブジェクト
data:"action=Login&d="+new Date()+"&name="+name+"&pass="+pass, //データを送信
success:function(data){
if(data=="1"){
window.location="ChatMain.html" ;
}else{
alert("ユーザー名またはパスワードが間違っています!");
return false;
}
}
});
}

実際には、これにはまだ間違いがあります。この実装は最初の実装方法ほど単純かつ明確ではありません。詳しく知っている兄弟が 2 つの方法の長所と短所についてアドバイスをくれることを願っています。

最初の PDO メソッドを少し改良し、テーブル データを HTML に直接投稿し、データベースと比較して、情報を返します。

もちろん、2 番目の方法 (本来使用されるべき方法) にはモジュール実装という明らかな利点があり、これは開発者にとっても明らかです。ただし、小規模なタスクでは、名前などが統一されていない場合、この種のモジュール化は結局のところ、モジュールが一致しているかどうかを確認する必要があると個人的には思います。私が正しく理解していれば。

12.5チャットメイン

ページ自体の観点から見ると、ヘッドには jq ファイル、js ファイル、css ファイルが含まれており、ボディには現在のページの効果が実現され、インターフェイス関数も実装されます。

レイアウト的には、3 つのフレームがあるチャット ウィンドウのように見えます (ただし、CSS の使用方法がわかりません!!!)。

-----夜はもう書けないかもしれないので先に投稿します-----

http://www.bkjia.com/PHPjc/1094921.html

本当http://www.bkjia.com/PHPjc/1094921.html技術記事裏電子商取引の Web サイト開発 jQuery です。 こんにちは。怠惰に加えて、他のことが原因で更新が遅れていました。今は元気です、家に戻りましたが、家の水道は止まっています…
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート