PHP+jQuery+Ajaxでユーザーのログインとログアウトを実現
PHP+jQuery+Ajaxでユーザーのログインとログアウトを実現
この記事では、Ajax を使用して、更新せずにログインおよびログアウトすることで、ユーザー エクスペリエンスを向上させています。 ユーザーがログインしている場合は、ユーザーの関連ログイン情報が表示され、ログインしていない場合はログイン フォームが表示されます。
ユーザーのログインおよびログアウト機能は多くの場所で使用されており、一部のプロジェクトでは、ログインに Ajax を使用する必要があります。ログインに成功すると、ページの一部のみが更新されるため、ユーザー エクスペリエンスが向上します。この記事では、PHP と jQuery を使用してログイン機能とログアウト機能を実装します。
データベースの準備
この例では、Mysql データベースを使用して、次のテーブル構造を持つユーザー テーブルを作成します。
?
1 2 3 4 5 6 7 8 9
|
テーブル `user` を作成 ( `id` int(11) NOT NULL auto_increment, `ユーザー名` varchar(30) NOT NULL コメント 'ユーザー名', `パスワード` varchar(32) NOT NULL コメント 'パスワード', `login_time` int(10) デフォルト NULL コメント 'ログイン時間', `login_ip` varchar(32) デフォルト NULL コメント 'ログイン IP', `login_counts` int(10) NOT NULL デフォルト '0' COMMENT 'ログイン数', 主キー (`id`) ) ENGINE=MyISAM デフォルト CHARSET=utf8;
|
?
1 2
|
「user」に挿入 (「id」、「username」、「password」、「login_time」、「login_ip」、「login_counts」) VALUES(1, 'デモ', 'fe01ce2a7fbac8fafaed7c982a04e229', '', '', 0);
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
ユーザーログイン
if(isset($_SESSION['user'])){ ?>
|
index.php ファイルのヘッダーに次のステートメントを追加する必要があることに注意してください: session_start; 同時に、head 部分に jquery ライブラリを導入し、ログイン ボックスの美しい CSS スタイルを記述することもできます。もちろん、このサンプルはすでに簡単に書かれていますので、ソースコードをご覧ください。
?
1 2 |
|
global.js
global.js ファイルには、実装する jquery コードが含まれています。最初に行うことは、Baidu や Google のように、入力ボックスを開くとすぐにマウス カーソルが入力ボックス内にあるようにすることです。使用コードは次のとおりです:
?
1 2 3 |
$(関数(){ $("#user").focus(); }); |
次に行うことは、入力ボックスがフォーカスを獲得したときと失ったときに異なるスタイルを表示することです。たとえば、この例では、異なる境界線の色が使用されています。
?
1 2 3 4 5 6 |
$("入力:テキスト,テキストエリア,入力:パスワード").focus(function() { $(this).addClass("cur_select"); }); $("入力:テキスト,テキストエリア,入力:パスワード").blur(function() { $(this).removeClass("cur_select"); }); |
ユーザーログイン: ユーザーがログインボタンをクリックした後、まずユーザーの入力を空にすることができないことを確認し、次にバックグラウンドのlogin.phpにAjaxリクエストを送信する必要があります。バックグラウンド検証ログインが成功すると、ログインしたユーザーの情報が返されます。ログインに失敗した場合は、ユーザーのログイン数や最終ログイン時刻などの情報が返されます。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$(".btn").live('クリック',function(){ var user = $("#user").val(); var pass = $("#pass").val(); if(user==""){ $(' ').html("ユーザー名を空にすることはできません!").appendTo('.sub').fadeOut(2000);$("#user").focus(); false を返す; } if(pass==""){ $(' ').html("パスワードを空にすることはできません!").appendTo('.sub').fadeOut(2000);$("#pass").focus(); false を返す; } $.ajax({ タイプ:「POST」、 URL: "login.php?action=ログイン", データタイプ: "json", データ: {"ユーザー":ユーザー,"パス":パス}, 送信前: function(){ $(' ').addClass("loading").html("ログイン中...").css("color","#999").appendTo('.sub'); }、 成功: function(json){ if(json.success==1){ $("#login_form").remove(); var div = " "+json.user+", ログイン成功おめでとうございます! これは、このサイトにログインした "+json.login_counts+" 時間です。 このサイトに最後にログインしたのは次の日です: "+json.login_time+" $("#login").append(div); }その他{ $("#msg").remove(); $(' ').html(json.msg).css("color","#999").appendTo('.sub').fadeOut(2000); false を返す; } } }); }); |
Ajax リクエストを行うとき、データ送信形式は json であり、返されるデータも JS を使用して json データを解析してログイン後のユーザー情報を取得し、それを #login 要素に追加します。ログイン操作を完了します。
ユーザー終了:「終了」をクリックすると、Ajaxリクエストがlogin.phpに送信され、すべてのセッションがバックグラウンドでログアウトされ、ページはログインインターフェイスに戻ります。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$("#logout").live('click',function(){ $.post("login.php?action=logout",function(msg){ if(msg==1){ $("#result").remove(); var div = "
id='pass' /> $("#login").append(div); } }); }); |
login.php
フロントからのリクエストに従い、ログイン時にユーザーが入力したユーザー名とパスワードを取得し、データベース内の対応するユーザー名とパスワードと比較し、成功した場合はユーザーのログイン情報を取得します。が更新され、json データがフロントデスクに渡されます。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
session_start(); require_once ('connect.php');
$アクション = $_GET['アクション']; if ($action == 'login') { //ログイン $user = ストリップスラッシュ(trim($_POST['user'])); $pass = ストリップスラッシュ(trim($_POST['pass'])); if (空の空 ($user)) { echo 'ユーザー名を空にすることはできません'; 終了; } if (空の空 ($pass)) { echo 'パスワードを空にすることはできません'; 終了; } $md5pass = md5($pass); //パスワードは md5 を使用して暗号化されます $query = mysql_query("select * from user where username='$user'");
$us = is_array($row = mysql_fetch_array($query));
$ps = $us ? == $row['パスワード'] : FALSE; if ($ps) { $counts = $row['login_counts'] + 1; $_SESSION['ユーザー'] = $row['ユーザー名']; $_SESSION['ログイン時間'] = $row['ログイン時間']; $_SESSION['login_counts'] = $counts; $ip = get_client_ip() //ログインIPを取得します $logintime = mktime(); $rs = mysql_query("ユーザー設定の更新login_time='$logintime',login_ip='$ip', login_counts='$counts'"); if ($rs) { $arr['成功'] = 1; $arr['msg'] = 'ログイン成功! '; $arr['ユーザー'] = $_SESSION['ユーザー']; $arr['login_time'] = date('Y-m-d H:i:s',$_SESSION['login_time']); $arr['login_counts'] = $_SESSION['login_counts']; } 他 { $arr['成功'] = 0; $arr['msg'] = 'ログインに失敗しました'; } } 他 { $arr['成功'] = 0; $arr['msg'] = 'ユーザー名またはパスワードが間違っています! '; } echo json_encode($arr) //jsonデータを出力します } elseif ($action == 'logout') { //終了 設定解除($_SESSION); session_destroy(); エコー '1'; } |
フロントエンドが終了を要求したら、セッションからログアウトし、処理のためにフロントエンド JS に 1 を返します。上記のコードの get_client_ip() はクライアント IP を取得する関数であるため、ソース コードをダウンロードして参照することはできません。
さて、ユーザーのログインとログアウトの手順が完了しました。避けられない欠点がありますので、ご批判や修正を歓迎します。
以上がこの記事の全内容ですが、皆さんに気に入っていただければ幸いです。

PHPは、電子商取引、コンテンツ管理システム、API開発で広く使用されています。 1)eコマース:ショッピングカート機能と支払い処理に使用。 2)コンテンツ管理システム:動的コンテンツの生成とユーザー管理に使用されます。 3)API開発:RESTFUL API開発とAPIセキュリティに使用されます。パフォーマンスの最適化とベストプラクティスを通じて、PHPアプリケーションの効率と保守性が向上します。

PHPにより、インタラクティブなWebコンテンツを簡単に作成できます。 1)HTMLを埋め込んでコンテンツを動的に生成し、ユーザー入力またはデータベースデータに基づいてリアルタイムで表示します。 2)プロセスフォームの提出と動的出力を生成して、XSSを防ぐためにHTMLSPECIALCHARSを使用していることを確認します。 3)MySQLを使用してユーザー登録システムを作成し、Password_HashおよびPreprocessingステートメントを使用してセキュリティを強化します。これらの手法を習得すると、Web開発の効率が向上します。

PHPとPythonにはそれぞれ独自の利点があり、プロジェクトの要件に従って選択します。 1.PHPは、特にWebサイトの迅速な開発とメンテナンスに適しています。 2。Pythonは、データサイエンス、機械学習、人工知能に適しており、簡潔な構文を備えており、初心者に適しています。

PHPは依然として動的であり、現代のプログラミングの分野で重要な位置を占めています。 1)PHPのシンプルさと強力なコミュニティサポートにより、Web開発で広く使用されています。 2)その柔軟性と安定性により、Webフォーム、データベース操作、ファイル処理の処理において顕著になります。 3)PHPは、初心者や経験豊富な開発者に適した、常に進化し、最適化しています。

PHPは、現代のWeb開発、特にコンテンツ管理とeコマースプラットフォームで依然として重要です。 1)PHPには、LaravelやSymfonyなどの豊富なエコシステムと強力なフレームワークサポートがあります。 2)パフォーマンスの最適化は、Opcacheとnginxを通じて達成できます。 3)PHP8.0は、パフォーマンスを改善するためにJITコンパイラを導入します。 4)クラウドネイティブアプリケーションは、DockerおよびKubernetesを介して展開され、柔軟性とスケーラビリティを向上させます。

PHPは、特に迅速な開発や動的なコンテンツの処理に適していますが、データサイエンスとエンタープライズレベルのアプリケーションには良くありません。 Pythonと比較して、PHPはWeb開発においてより多くの利点がありますが、データサイエンスの分野ではPythonほど良くありません。 Javaと比較して、PHPはエンタープライズレベルのアプリケーションでより悪化しますが、Web開発により柔軟性があります。 JavaScriptと比較して、PHPはバックエンド開発により簡潔ですが、フロントエンド開発のJavaScriptほど良くありません。

PHPとPythonにはそれぞれ独自の利点があり、さまざまなシナリオに適しています。 1.PHPはWeb開発に適しており、組み込みのWebサーバーとRich Functionライブラリを提供します。 2。Pythonは、簡潔な構文と強力な標準ライブラリを備えたデータサイエンスと機械学習に適しています。選択するときは、プロジェクトの要件に基づいて決定する必要があります。

PHPは、サーバー側で広く使用されているスクリプト言語で、特にWeb開発に適しています。 1.PHPは、HTMLを埋め込み、HTTP要求と応答を処理し、さまざまなデータベースをサポートできます。 2.PHPは、ダイナミックWebコンテンツ、プロセスフォームデータ、アクセスデータベースなどを生成するために使用され、強力なコミュニティサポートとオープンソースリソースを備えています。 3。PHPは解釈された言語であり、実行プロセスには語彙分析、文法分析、編集、実行が含まれます。 4.PHPは、ユーザー登録システムなどの高度なアプリケーションについてMySQLと組み合わせることができます。 5。PHPをデバッグするときは、error_reporting()やvar_dump()などの関数を使用できます。 6. PHPコードを最適化して、キャッシュメカニズムを使用し、データベースクエリを最適化し、組み込み関数を使用します。 7


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

ドリームウィーバー CS6
ビジュアル Web 開発ツール

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
