Tworzenie, edytowanie, aktualizowanie i usuwanie treści na stronie internetowej sprawia, że strona jest dynamiczna. To właśnie zamierzamy robić w tym poście.
Użytkownik odwiedzający naszą stronę będzie mógł tworzyć posty, które zostaną zapisane w bazie mysql, pobrać posty z bazy i wyświetlić je na stronie internetowej. Każdy post będzie wyświetlany z przyciskiem edycji i usunięcia, aby umożliwić użytkownikowi aktualizowanie postów, a także ich usuwanie.
Najpierw utwórz bazę danych o nazwie crud. W bazie danych crud utwórz tabelę o nazwie informacje. Tabela informacyjna powinna zawierać następujące kolumny:
-
id - int(11)
- nazwa - varchar(100)
- adres - varchar(100)
Szczekać! Tylko dwa pola. Staram się, żeby wszystko było proste. więc przejdźmy do następnego kroku.
Utwórz plik o nazwie index.php i wklej do niego następujący kod:
<!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>
Jeśli zapiszesz i otworzysz witrynę w przeglądarce, otrzymasz coś takiego:
Nie wygląda na najlepszą formę na świecie, prawda? Naprawmy to. Dodaj tę linię bezpośrednio pod tagiem
w sekcji nagłówka pliku index.php:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
To jest link do załadowania stylizacji z pliku arkusza stylów. Stwórzmy plik styles.css i dodajmy do niego ten kod stylizacji.</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>
Teraz ponownie sprawdźmy nasz formularz w przeglądarce:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463381.png" /></P> <p>
Tak jest lepiej! </P> <p>
Zwykle lubię maksymalnie oddzielać mój kod HTML od kodu PHP. Uważam to za dobrą praktykę. W związku z tym stwórzmy inny plik o nazwie php_code.php, w którym zaimplementujemy wszystkie funkcje php, takie jak łączenie się z bazą danych, wysyłanie zapytań do bazy danych i tym podobne.</P> <p>
Więc otwórz php_code.php i wklej do niego następujący kod:</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>
Teraz dołącz ten plik na górze (w pierwszym wierszu) pliku index.php. Tak:</P> <pre><code><?php include('server.php'); ?></code></pre> <p>
W tym momencie wszystko, co robi ten kod, to połączenie z bazą danych, zainicjowanie niektórych zmiennych i zapisanie przesłanych danych z formularza do bazy danych w informacjach, które utworzyliśmy wcześniej. To tylko Create część CRUD. Przejdźmy do pozostałych.</P> <p>
Teraz odwiedź ponownie plik index.php i dodaj ten kod bezpośrednio pod tagiem <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>
Ten kod wyświetla komunikat potwierdzający, aby poinformować użytkownika, że w bazie danych został utworzony nowy rekord. </P> <p>
Aby pobrać rekordy bazy danych i wyświetlić je na stronie, dodaj ten kod bezpośrednio nad formularzem wejściowym:</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>
Utwórzmy nowy rekord i zobaczmy, czy to działa:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463338.png" /></P> <p>
..i voila!! Działa idealnie!</P> <p>
Teraz przechodzimy do edycji. Na górze pliku index.php (bezpośrednio po instrukcji include) dodaj następujący kod:</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>
Podczas edycji rekordu bazy danych musimy wpisać do formularza stare wartości, aby można je było modyfikować. Aby to zrobić, zmodyfikujmy nasze pola wejściowe w formularzu i ustawmy te wartości pobrane z bazy danych ($nazwa, $adres) jako wartości na <strong>wartość</strong> atrybut pól formularza.</P> <p>
Dodaj również ukryte pole do przechowywania identyfikatora rekordu, który będziemy aktualizować, aby można go było rozpoznać w bazie danych na podstawie identyfikatora. To wyjaśnia to lepiej:</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>
Pamiętaj, że wszystko to znajduje się w danych wejściowych <form>.</P> <p>
Teraz jeśli klikniemy przycisk edytuj na konkretnym rekordzie z bazy, wartości zostaną uzupełnione w formularzu i będziemy mogli je edytować. Ponieważ edytujemy na tym samym formularzu, co przy tworzeniu, musimy postawić warunek, który determinuje wyświetlenie odpowiedniego przycisku. Na przykład podczas edycji wyświetlamy przycisk aktualizacji na formularzu, a podczas tworzenia wyświetlamy przycisk zapisu. Robimy to za pomocą <strong>aktualizacji</strong> zmienna, która jest logiczna. Gdy aktualizacja jest prawdą, wyświetlany jest przycisk aktualizacji, a jeśli jest fałszywy, wyświetlany jest przycisk zapisu.</P> <p>
Zastąp swój przycisk zapisu w formularzu w ten sposób:</P> <p>
Zastąp ..</P> <pre><code><button class="btn" type="submit" name="save" >Save</button></code></pre> <p>
z...</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>
Teraz, jeśli uruchomimy to w przeglądarce i klikniemy przycisk edycji, otrzymamy to:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463388.png" /></P> <p>
Teraz możesz zobaczyć, że jest to wyświetlany przycisk aktualizacji. Dodajmy kod, który zostanie wykonany po kliknięciu tego przycisku.</P> <p>
Otwórz plik php_code.php i dodaj ten kod za pomocą przycisku:</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>
Teraz zmień wartości w formularzu i kliknij przycisk aktualizacji. </P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463390.png" /></P> <p>
Świetnie!</P> <p>
Ostatnia rzecz:usuwanie rekordów. Po prostu dodaj ten kod na końcu pliku php_code.php i gotowe:</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>
Kliknięcie przycisku usuwania powoduje usunięcie rekordu z bazy danych i wyświetlenie komunikatu, tak jak w przypadku innych działań.</P> <p>
</P> <h3> </h3> <h2>Wniosek</h2> <p>
To prowadzi nas do końca tego samouczka. Mam nadzieję, że było to pomocne i warte twojego czasu. Jestem bardzo zaszczycony twoją cierpliwością w dotrzymywaniu tego do końca. Jeśli podoba Ci się ten samouczek, udostępnij go znajomym, klikając dowolną z poniższych ikon mediów społecznościowych. Nie zapomnij sprawdzić moich innych samouczków na tej stronie. </P> <p>
Dzięki</P> <br>
</section>
</article>
<section id="turn-page" class="rplflexcenter">
<div class="page up rplflexalign">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://pl.sqldat.com/bzs/gel/1015019451.html' >Kompletny system rejestracji użytkowników z wykorzystaniem PHP i bazy danych MySQL </a>
</div>
<div class="page down rplflexalign">
<a class='LinkNextArticle' href='http://pl.sqldat.com/bzs/gel/1015019453.html' >Jak przesyłać i pobierać pliki PHP i MySQL </a>
<i class="next"></i>
<span class="wnwyfwe9">
<em class="bgiwlaew54"></em>
</span>
</div>
</section>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/8.js'></script>
</div>
</section>
</section>
<section class="bottom rplcontainer rplflexbetween">
<section class="pletype_list right">
<ol>
<li><a class='childclass' href='http://pl.sqldat.com/bzs/ige/' target="_self">Database</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/gel/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/qoe/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/usr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/sql/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/dbs/' target="_self">Access</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/aye/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/xvb/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="left">
<ol class="plarticle_list">
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015014217.html">
<p class="pltextover" title="Jak pokazać sortowanie połączenia w MySQL? ">Jak pokazać sortowanie połączenia w MySQL? </p>
</a>
</li>
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015016052.html">
<p class="pltextover" title="Używanie JDeveloper z bazą danych MySQL i bazą danych Oracle na AWS RDS, część 1 ">Używanie JDeveloper z bazą danych MySQL i bazą danych Oracle na AWS RDS, część 1 </p>
</a>
</li>
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015002643.html">
<p class="pltextover" title="Usuń tagi HTML z rekordu ">Usuń tagi HTML z rekordu </p>
</a>
</li>
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015002084.html">
<p class="pltextover" title="Czy nazwy tabel w MySQL rozróżniają wielkość liter? ">Czy nazwy tabel w MySQL rozróżniają wielkość liter? </p>
</a>
</li>
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015018511.html">
<p class="pltextover" title="Inżynieria wsteczna bazy danych MySQL przy użyciu MySQL Workbench ">Inżynieria wsteczna bazy danych MySQL przy użyciu MySQL Workbench </p>
</a>
</li>
</ol>
</section>
</section>
<section class="plclist1 plarticle1_list plbottom2 rplflexbetween rplcontainer">
<ul class="rplflexbetween">
<li>
<section class="rplflexalign">
<div class="plcibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051215051718_S.png' width='300' height='220' border='0'>
</div>
<a href="https://pl.sqldat.com/bzs/gel/1015017114.html">
<p class="row plcirow-3">
Jak zainstalować dbWatch, aby monitorować wydajność MySQL w systemie Linux? </p>
</a>
</section>
</li>
</ul>
<ul class="rplflexbetween">
<li>
<section class="rplflexalign">
<div class="plcibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051417502977_S.jpg' width='300' height='220' border='0'>
</div>
<a href="https://pl.sqldat.com/bzs/usr/1015021296.html">
<p class="row plcirow-3">
Dostrajanie SQL Server – chodzi o pomiar </p>
</a>
</section>
</li>
</ul>
<ul class="rplflexbetween">
<li>
<section class="rplflexalign">
<div class="plcibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051016061634_S.png' width='300' height='220' border='0'>
</div>
<a href="https://pl.sqldat.com/bzs/qoe/1015000866.html">
<p class="row plcirow-3">
Proces aktualizacji krok po kroku do aktualizacji R12.2 część -2 (główny sterownik aktualizacji dla R12.2.0) </p>
</a>
</section>
</li>
</ul>
<ul class="rplflexbetween">
<li>
<section class="rplflexalign">
<div class="plcibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051017583939_S.png' width='300' height='220' border='0'>
</div>
<a href="https://pl.sqldat.com/bzs/usr/1015001351.html">
<p class="row plcirow-3">
Grupy dostępności AlwaysOn programu SQL Server:instalacja i konfiguracja. Część 2 </p>
</a>
</section>
</li>
</ul>
</section>
<footer>
<section class="rplcontainer rplflexbetween plfooter_info rplflexalign">
<a href="https://pl.sqldat.com" class="plbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="rplflexstart">
© PRAWA AUTORSKIE
<a href="https://pl.sqldat.com">http://pl.sqldat.com</a>
WSZELKIE PRAWA ZASTRZEŻONE
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>