Създаването, редактирането, актуализирането и изтриването на съдържание в уебсайт е това, което прави сайта динамичен. Това е, което ще правим в тази публикация.
Потребител, който посети нашия сайт, ще може да създава публикации, които ще бъдат запазени в база данни на mysql, да извлича публикациите от базата данни и да ги показва на уеб страницата. Всяка публикация ще се показва с бутон за редактиране и изтриване, за да позволи на потребителя да актуализира публикациите, както и да ги изтрива.
Първо създайте база данни с име crud. В базата данни crud създайте таблица, наречена info. Информационната таблица трябва да има следните колони:
-
id - int(11)
- име - varchar(100)
- адрес - varchar(100)
Яп! Само две полета. Опитвам се да опростя нещата тук. така че, нека да преминем към следващата стъпка.
Създайте файл, наречен index.php, и поставете в него следния код:
<!DOCTYPE html>
<html>
<head>
<title>CRUD: CReate, Update, Delete PHP MySQL</title>
</head>
<body>
<form method="post" action="server.php" >
<div class="input-group">
<label>Name</label>
<input type="text" name="name" value="">
</div>
<div class="input-group">
<label>Address</label>
<input type="text" name="address" value="">
</div>
<div class="input-group">
<button class="btn" type="submit" name="save" >Save</button>
</div>
</form>
</body>
</html>
Ако запазите и отворите сайта в браузъра си, ще получите нещо подобно:
Не изглежда като най-добрата форма в света, нали? Да поправим това. Добавете този ред директно под маркера
в секцията head на вашия файл index.php:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Това е връзката за зареждане на стилове от файла със стилова таблица. Нека създадем файла styles.css и да добавим този стилизиращ код в него.</P> <pre><code>body {
font-size: 19px;
}
table{
width: 50%;
margin: 30px auto;
border-collapse: collapse;
text-align: left;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #F5F5F5;
}
form {
width: 45%;
margin: 50px auto;
text-align: left;
padding: 20px;
border: 1px solid #bbbbbb;
border-radius: 5px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.edit_btn {
text-decoration: none;
padding: 2px 5px;
background: #2E8B57;
color: white;
border-radius: 3px;
}
.del_btn {
text-decoration: none;
padding: 2px 5px;
color: white;
border-radius: 3px;
background: #800000;
}
.msg {
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}</code></pre> <p>
Сега нека проверим отново нашия формуляр в браузъра:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463381.png" /></P> <p>
Това е по-добре! </P> <p>
Обикновено обичам да отделя своя HTML код от моя PHP код, доколкото е възможно. Считам това за добра практика. В тази връзка, нека създадем друг файл, наречен php_code.php, където внедряваме всички php функционалности като свързване към базата данни, заявка към базата данни и други подобни.</P> <p>
Затова отворете php_code.php и поставете следния код в него:</P> <pre><code><?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'crud');
// initialize variables
$name = "";
$address = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "INSERT INTO info (name, address) VALUES ('$name', '$address')");
$_SESSION['message'] = "Address saved";
header('location: index.php');
}
// ...</code></pre> <p>
Сега включете този файл в горната част (първият ред) на вашия файл index.php. Така:</P> <pre><code><?php include('server.php'); ?></code></pre> <p>
В този момент всичко, което прави този код, е да се свързва с базата данни, да инициализира някои променливи и да записва изпратените данни от формуляра в базата данни в информацията, която създадохме по-рано. Това е само CReate част от CRUD. Да продължим с останалите.</P> <p>
Сега посетете отново вашия index.php файл и добавете този код точно под етикета <body>:</P> <pre><code>// ...
<body>
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?></code></pre> <p>
Този код показва съобщение за потвърждение, за да съобщи на потребителя, че е създаден нов запис в базата данни. </P> <p>
За да извлечете записите от базата данни и да ги покажете на страницата, добавете този код непосредствено над формата за въвеждане:</P> <pre><code><?php $results = mysqli_query($db, "SELECT * FROM info"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['address']; ?></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
<a href="server.php?del=<?php echo $row['id']; ?>" class="del_btn">Delete</a>
</td>
</tr>
<?php } ?>
</table>
<form>
// ...</code></pre> <p>
Нека създадем нов запис и да видим дали тези неща работят:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463338.png" /></P> <p>
..и воала!! Работи перфектно!</P> <p>
Сега преминаваме към редактиране. В горната част на вашия файл index.php (веднага след изявлението за включване) добавете следния код:</P> <pre><code><?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM info WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$address = $n['address'];
}
}
?></code></pre> <p>
Когато редактираме запис на база данни, трябва да поставим старите стойности във формата, така че да могат да бъдат модифицирани. За да направите това, нека променим нашите полета за въвеждане във формуляра и да зададем тези стойности, взети от базата данни ($name, $address), като стойности на <strong>стойността</strong> атрибут на полетата на формуляра.</P> <p>
Също така добавете скрито поле, което да съдържа идентификатора на записа, който ще актуализираме, така че да може да бъде разпознат в базата данни еднозначно по неговия идентификатор. Това го обяснява по-добре:</P> <pre><code>// newly added field
<input type="hidden" name="id" value="<?php echo $id; ?>">
// modified form fields
<input type="text" name="name" value="<?php echo $name; ?>">
<input type="text" name="address" value="<?php echo $address; ?>"></code></pre> <p>
Не забравяйте, че всичко това е във входния <form>.</P> <p>
Сега, ако щракнем върху бутона за редактиране на конкретен запис от базата данни, стойностите ще бъдат попълнени във формуляра и ще можем да ги редактираме. Тъй като редактираме в същия формуляр, както когато създаваме, трябва да поставим условие, което определя подходящия бутон, който да бъде показан. Например, когато редактираме, показваме бутона за актуализиране във формуляра, а когато създаваме, показваме бутона за запазване. Правим това с помощта на <strong>актуализация</strong> променлива, която е булева. Когато актуализацията е истина, бутонът за актуализиране се показва, а ако е false, се показва бутонът за запазване.</P> <p>
Заменете бутона за запазване във формуляра по следния начин:</P> <p>
Сменете ..</P> <pre><code><button class="btn" type="submit" name="save" >Save</button></code></pre> <p>
с...</P> <pre><code><?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Save</button>
<?php endif ?></code></pre> <p>
Сега, ако стартираме това в браузъра и щракнем върху бутона за редактиране, получаваме това:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463388.png" /></P> <p>
Сега можете да видите, че се показва бутонът за актуализиране. Нека добавим кода, който ще се изпълни при щракване върху този бутон.</P> <p>
Отворете файла php_code.php и добавете този код към бутона:</P> <pre><code>// ...
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "UPDATE info SET name='$name', address='$address' WHERE id=$id");
$_SESSION['message'] = "Address updated!";
header('location: index.php');
}</code></pre> <p>
Сега променете стойностите във формуляра и кликнете върху бутона за актуализиране. </P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463390.png" /></P> <p>
Страхотно!</P> <p>
Последно нещо:изтриване на записи. Просто добавете този код в края на файла php_code.php и сте готови:</P> <pre><code>if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM info WHERE id=$id");
$_SESSION['message'] = "Address deleted!";
header('location: index.php');
}</code></pre> <p>
Ако щракнете върху бутона за изтриване, той изтрива записа от базата данни и показва съобщението точно като другите действия.</P> <p>
</P> <h3> </h3> <h2>Заключение</h2> <p>
Това ни довежда до края на този урок. Надявам се, че е било полезно и си заслужава времето. За мен е голяма чест от вашето търпение, че последвахте това до края. Ако ви харесва този урок, споделете го с приятелите си, като щракнете върху някоя от иконите на социалните медии по-долу. Не забравяйте да разгледате другите ми уроци на този сайт. </P> <p>
Благодаря</P> <br>
</section>
</article>
<section id="turn-page" class="bgflexcenter">
<div class="page up bgflexalign">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://bg.sqldat.com/yws/oml/1014019451.html' >Пълна система за регистрация на потребители, използваща PHP и MySQL база данни </a>
</div>
<div class="page down bgflexalign">
<a class='LinkNextArticle' href='http://bg.sqldat.com/yws/oml/1014019453.html' >Как да качвате и изтегляте файлове PHP и MySQL </a>
<i class="next"></i>
</div>
</section>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/8.js'></script>
</div>
</section>
</section>
<section class="bottom bgocontainer covflexbe">
<section class="bgtype_list right">
<ol>
<li><a class='childclass' href='http://bg.sqldat.com/yws/xue/' target="_self">Database</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/oml/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/nle/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/rpr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/czl/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/zxs/' target="_self">Access</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/wue/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/ayb/' target="_self">MariaDB</a></li>
<p class="beyowyw12">
<span class="bbeowywb45"></span>
</p>
</ol>
</section>
<section class="left">
<div class="ywndivbwjw13">
<span class="wewyeonbw14"></span>
</div>
<ol class="bgarticle_list">
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014019434.html">
<p class="bgtextover" title="Как да създадете GraphQL API без сървър за MySQL, Postgres и Aurora ">Как да създадете GraphQL API без сървър за MySQL, Postgres и Aurora </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014003574.html">
<p class="bgtextover" title="Как да извлечем първия и последния запис на групиран запис в MySQL заявка с агрегатни функции? ">Как да извлечем първия и последния запис на групиран запис в MySQL заявка с агрегатни функции? </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014003012.html">
<p class="bgtextover" title="Преобразувайте MySql DateTime печат във формат за дата на JavaScript ">Преобразувайте MySql DateTime печат във формат за дата на JavaScript </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014003030.html">
<p class="bgtextover" title="Как да деинсталирате MySQL от Mac OS X? ">Как да деинсталирате MySQL от Mac OS X? </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014002108.html">
<p class="bgtextover" title="Как да покажа последните изпълнени заявки на MySQL? ">Как да покажа последните изпълнени заявки на MySQL? </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
</ol>
</section>
</section>
<section class="bgcolist1 bgarticle1_list bgbottom2 covflexbe bgocontainer">
<ul class="covflexbe">
<li>
<section class="bgflexalign">
<div class="bgcoibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214044899_S.png' width='300' height='220' border='0'>
</div>
<a href="https://bg.sqldat.com/yws/ayb/1014016611.html">
<p class="row bgcorow-3">
Как да защитите вашата MySQL или MariaDB база данни от SQL инжекция:Част втора </p>
</a>
</section>
</li>
</ul>
<ul class="covflexbe">
<li>
<section class="bgflexalign">
<div class="bgcoibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051310182884_S.png' width='300' height='220' border='0'>
</div>
<a href="https://bg.sqldat.com/yws/zxs/1014018633.html">
<p class="row bgcorow-3">
Присвояване на изображения на възли за изглед на дърво </p>
</a>
</section>
</li>
</ul>
<ul class="covflexbe">
<li>
<section class="bgflexalign">
<div class="bgcoibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214090715_S.png' width='300' height='220' border='0'>
</div>
<a href="https://bg.sqldat.com/yws/ayb/1014016679.html">
<p class="row bgcorow-3">
Повишаване на производителността чрез използване на разделяне на четене и запис на трафик от базата данни с Moodle 3.9 </p>
</a>
</section>
</li>
</ul>
<ul class="covflexbe">
<li>
<section class="bgflexalign">
<div class="bgcoibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051210364824_S.jpg' width='300' height='220' border='0'>
</div>
<a href="https://bg.sqldat.com/yws/oml/1014016051.html">
<p class="row bgcorow-3">
Използване на JDeveloper с MySQL база данни и Oracle Database на AWS RDS, част 2 </p>
</a>
</section>
</li>
</ul>
<div class="diwfhwfatwe12">
<div class="bdivbwuew13"></div>
</div>
</section>
<footer>
<section class="bgocontainer covflexbe bgfooter_info bgflexalign">
<a href="https://bg.sqldat.com" class="bgbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="bghwflexstart">
© АВТОРСКИ ПРАВА
<a href="https://bg.sqldat.com">http://bg.sqldat.com</a>
ВСИЧКИ ПРАВА ЗАПАЗЕНИ
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>