ユーザーがフォームに送信したタスクを取得してMySQLデータベースに保存するシンプルなToDoリストアプリケーション。タスクもデータベースから取得され、各タスクの横に削除ボタンが付いたウェブページに表示されます。削除ボタンをクリックすると、タスクがデータベースから削除されます。
これが、このチュートリアルで構築するものです。
いつものように、データベースを作成しましょう。 todoというデータベースを作成します その中に、タスクというテーブルを作成します。 タスクテーブルには、次の2つのフィールドしかありません。
- id --int（10）
- タスク-varchar（255）
次に、2つのファイルを作成します。
それらをテキストエディタで開き、index.phpファイル内に次のコードを貼り付けます。
<!DOCTYPE html>
<html>
<head>
<title>ToDo List Application PHP and MySQL</title>
</head>
<body>
<div class="heading">
<h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2>
</div>
<form method="post" action="index.php" class="input_form">
<input type="text" name="task" class="task_input">
<button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button>
</form>
</body>
</html>
今すぐブラウザでページを表示すると、次のようになります。
スタイリングを追加しましょう。
タグのすぐ下に、次の行を追加してスタイルシートファイルをロードします。</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
以前に作成したstyle.cssファイルを開き、このスタイリングコードを貼り付けます：</P> <pre><code>.heading{
width: 50%;
margin: 30px auto;
text-align: center;
color: #6B8E23;
background: #FFF8DC;
border: 2px solid #6B8E23;
border-radius: 20px;
}
form {
width: 50%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: #FFF8DC;
border: 1px solid #6B8E23;
}
form p {
color: red;
margin: 0px;
}
.task_input {
width: 75%;
height: 15px;
padding: 10px;
border: 2px solid #6B8E23;
}
.add_btn {
height: 39px;
background: #FFF8DC;
color: #6B8E23;
border: 2px solid #6B8E23;
border-radius: 5px;
padding: 5px 20px;
}
table {
width: 50%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th {
font-size: 19px;
color: #6B8E23;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #E9E9E9;
}
.task {
text-align: left;
}
.delete{
text-align: center;
}
.delete a{
color: white;
background: #a52a2a;
padding: 1px 6px;
border-radius: 3px;
text-decoration: none;
}
</code></pre> <p>
</P> <p>
</P> <p>
</P> <p>
ここでブラウザを更新すると、次のようになります：</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /> </P> <p>
次に、送信されたタスクをデータベースに保存するコードを記述します。 </P> <p>
index.phpファイルの一番上、最初の行の前に、次のコードを追加します。</P> <pre><code><?php
// initialize errors variable
$errors = "";
// connect to database
$db = mysqli_connect("localhost", "root", "", "todo");
// insert a quote if submit button is clicked
if (isset($_POST['submit'])) {
if (empty($_POST['task'])) {
$errors = "You must fill in the task";
}else{
$task = $_POST['task'];
$sql = "INSERT INTO tasks (task) VALUES ('$task')";
mysqli_query($db, $sql);
header('location: index.php');
}
}
// ...</code></pre> <p>
これは、ユーザーが送信ボタンをクリックすると、タスクがデータベースに保存されることを意味します。ただし、フォームにタスクが入力されていない場合、$errors変数の値は<em>「タスクに入力する必要があります」に設定されます。 </em> しかし、それは表示されません。表示してみましょう。</P> <p>
このコードをフォーム内に貼り付けましょう。 <form>タグのすぐ下。このように：</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
空の値でフォームを送信しようとすると、次のようになります：</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /> </P> <p>
これまでのところ、アプリはタスクをデータベースに保存しますが、表示しません。</P> <p>
私たちがする必要があるのは、データベースからそれらを取得してから表示することです。 </P> <p>
index.phpファイルを開き、フォームの終了</form>タグの直後にこのコードを貼り付けます：</P> <pre><code>//...
// </form>
<table>
<thead>
<tr>
<th>N</th>
<th>Tasks</th>
<th style="width: 60px;">Action</th>
</tr>
</thead>
<tbody>
<?php
// select all tasks if page is visited or refreshed
$tasks = mysqli_query($db, "SELECT * FROM tasks");
$i = 1; while ($row = mysqli_fetch_array($tasks)) { ?>
<tr>
<td> <?php echo $i; ?> </td>
<td class="task"> <?php echo $row['task']; ?> </td>
<td class="delete">
<a href="index.php?del_task=<?php echo $row['id'] ?>">x</a>
</td>
</tr>
<?php $i++; } ?>
</tbody>
</table></code></pre> <p>
フォームにタスクを入力して送信ボタンを押すと、次のようになります。</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /> </P> <p>
良い！ </P> <p>
削除ボタンを機能させましょう。ページ上部の、データベースにタスクを保存するifブロックの後に、次のコードを追加します。</P> <pre><code>
// delete task
if (isset($_GET['del_task'])) {
$id = $_GET['del_task'];
mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
header('location: index.php');
}
?></code></pre> <p>
それで全部です。タスクに対して小さな「x」ボタンをクリックすると、そのタスクはデータベースから削除されます。</P> <h3>結論</h3> <p>
これがお役に立てば幸いです。スキルをさらに発揮するためにこのアプリに追加することをお勧めする機能の1つは、投稿が作成された後でも更新できる編集機能を追加することです。ヒント：CRUDに関するチュートリアルに従ってください：MySQLデータベースを使用して投稿を作成、編集、更新、削除します</P> <p>
ありがとう：D </P> <br>
</section>
</article>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/6.js'></script>
</div>
<div id="turn-page2" class="id_jatextover">
<p class="yuervbfhowp1">
<span class="tyuervnwu45"></span>
</p>
<a class='LinkPrevArticle' href='http://ja.sqldat.com/bzs/fdl/1010019458.html' >ユーザーアカウントの管理、役割、権限、認証PHPおよびMySQL </a>
<a class='LinkNextArticle' href='http://ja.sqldat.com/bzs/fdl/1010019460.html' >PHPおよびMySQLデータベースでブログを作成する方法-バックエンド </a>
</div>
<ul class="wayeowbfw14">
<li class="vbweomxf14"></li>
</ul>
<section class="page2_brromlist">
<ol class="jaarticle_list">
<li class="jastarth">
<i></i>
<a href="https://ja.sqldat.com/bzs/nlr/1010005079.html">
<p class="jatextover" title="断続的なODBC接続の失敗 ">断続的なODBC接続の失敗 </p>
</a>
</li>
<li class="jastarth">
<i></i>
<a href="https://ja.sqldat.com/bzs/nlr/1010015047.html">
<p class="jatextover" title="@@ DATEFIRST –SQLServerで週の最初の日を取得する ">@@ DATEFIRST –SQLServerで週の最初の日を取得する </p>
</a>
</li>
<li class="jastarth">
<i></i>
<a href="https://ja.sqldat.com/bzs/vte/1010000305.html">
<p class="jatextover" title="SQLを使用してデータベーステーブルを作成する方法 ">SQLを使用してデータベーステーブルを作成する方法 </p>
</a>
</li>
<li class="jastarth">
<i></i>
<a href="https://ja.sqldat.com/bzs/nlr/1010004022.html">
<p class="jatextover" title="SQL Server 2008ManagementStudioがクエリの構文をチェックしていません ">SQL Server 2008ManagementStudioがクエリの構文をチェックしていません </p>
</a>
</li>
</ol>
</section>
</section>
</section>
<footer>
<section class="contajavbe flexjabebnwo jafooter_info jafealign">
<a href="https://ja.sqldat.com" class="jabottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="jastarth">
©著作権
<a href="https://ja.sqldat.com">http://ja.sqldat.com</a>
全著作権所有
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>