3つ目のアイテム:Talky
Talky:HTML、PHP、mySQLを使用したチャットアプリケーション
👉 https://github.com/SumiSeo/talky
📅 勤務期間
2021/8/25 ~ 8/28
🕹 テクノロジーアーキテクチャ
HTML/CSS
JavaScript(ES6+)
PHP
mySQL
🙆🏻♀️ 主な実施
すべてのページのレイアウトを実現
再ロードせずにAJAXを使用したページ更新
PHPを使用してフォームから新しいページにリダイレクト
HTML->PHP->mySQLによるフロントエンドとバックエンドの統合
やれやれ!バックエンドを使用してホームページを構築するのは初めてです.
フォームは、入力した情報をPHP->mySQLに送信し、データベースに格納します.上の図に示すように、ユーザー名を入力し、メッセージを入力します.
1.プレイヤー名
2.情報内容
3.メール作成時間
チャットメッセージのロードウィンドウに移動します.画面上では同じページにとどまっているようですが、実際にはそうではありません.別のPHPファイルは、フォームに入力された情報をデータベースに構築するために使用されます.
try {
$db = new PDO("mysql:host=localhost;dbname=batch13;charset=utf8", "root", "");
}
catch (Exception $e) {
die("Error : " . $e->getMessage());
}
phpは受信した情報をデータベースに渡し、すぐに上の同じ画面にリダイレクトします.画面には何の変化もありませんが.🔍 発生した問題と解決方法(1)
if(isset($_POST["username"])){
setcookie("username", $_POST["username"], time()+365*24*3600,null,null,false,true);
}
Cookieを使用しているので、プレイヤーの名前を入力するだけで保存を続けることができるので、inputのvalueとして保存することで、プレイヤーが同じ状況で名前を入力し続ける手間を軽減できます.また、ユーザーが画面中央のハローを切り替えるたびに!Cornell! 挨拶を変更します.
🔍 発生した問題と解決方法(2)
最終的に,ユーザが入力したnameのvalueとgreetingのコードは同じであることが分かったので,変数値を単独で入力する必要はなく,同じことを宣言した.
<?php
$username = isset($_COOKIE["username"]) ? $_COOKIE["username"] : "";
?>
変数を入力するときにphpコードを減らすことができます.<li> <h4>Hello! <span> <?php echo $username?></span></h4></li>
value = <?php echo $username;?>
最初、この2つのコードはternary operationを使用して画面上で乱雑で繰り返し現れるコードであり、修正された後、より読みやすさが向上しています:)🔍 発生した問題と解決方法(3)
ユーザが変更されるたびに、画面に表示されるユーザ画像を変更したいのですが、これらのデータをsqlに保存するのはちょっと難しいです.現在の計画では、urlをソースコードで入力したり、他のデータファイルを使用して画像を保存したりすることができます.sqlを使用する場合,画像ファイルをどのように処理するかについては,想像以上に議論が多いため,より多くの問題を考慮する.
👁 プロジェクト後期
楽屋でフロントでできることをしたり、楽屋でできることをしたりすることができます.バックグラウンド言語phpで実現可能な機能をsqlで実現することもできる.フロントエンドからバックエンドへの統合体験は、いつ何らかの言語を使用して最適な結果を得るかということです.データベースへの送信からデータのフィルタ(?)やはりユーザーに見せるときにデータをフィルタリングするなど...開発全体に対する思考力が向上したようだ.私はずっとフロントエンドに自信を持っていて、いつもバックエンドがあまり適切ではないと感じて、フロントエンドとバックエンドの合併の過程を経て人に1種の刺激的な快感をあげて、ほほほ🎉 これが開発の味ですか:)
スタック全体の開発者になるのは本当に素晴らしいと思います.2人のうち1つしか学んでいない開発の全体的な理解力が上がったら嬉しいです.今バックエンドを使って個人ブログを構築しているので、私自身も頑張ります!また,画像データをどのように処理するかという問題を必ず解決する.🙆
Reference
この問題について(3つ目のアイテム:Talky), 我々は、より多くの情報をここで見つけました https://velog.io/@chaton/세번째-프로젝트-Talkyテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol