Het creëren, bewerken, bijwerken en verwijderen van inhoud op een website is wat de site dynamisch maakt. Dat gaan we in dit bericht doen.
Een gebruiker die onze site bezoekt, kan berichten maken die worden opgeslagen in een mysql-database, de berichten uit de database ophalen en op de webpagina weergeven. Elk bericht wordt weergegeven met een knop voor bewerken en verwijderen, zodat de gebruiker berichten kan bijwerken en verwijderen.
Maak eerst een database met de naam crud. Maak in de ruwe database een tabel met de naam info. De infotabel moet de volgende kolommen hebben:
-
id - int(11)
- naam - varchar(100)
- adres - varchar(100)
Jaap! Slechts twee velden. Ik probeer het hier simpel te houden. dus laten we verder gaan met de volgende stap.
Maak een bestand met de naam index.php en plak daarin de volgende code:
<!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>
Als u de site opslaat en opent in uw browser, krijgt u zoiets als dit:
Ziet er niet uit als de beste vorm ter wereld, toch? Laten we dat oplossen. Voeg deze regel toe direct onder de
-tag in het head-gedeelte van uw index.php-bestand:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Dat is de link om styling te laden vanuit het stylesheetbestand. Laten we het bestand styles.css maken en deze stylingcode erin toevoegen.</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>
Laten we nu ons formulier opnieuw in de browser bekijken:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463381.png" /></P> <p>
Dat is beter! </P> <p>
Ik hou er meestal van om mijn HTML-code zoveel mogelijk van mijn PHP-code te scheiden. Dat vind ik een goede gewoonte. Laten we wat dat betreft een ander bestand maken met de naam php_code.php waarin we alle php-functionaliteiten implementeren, zoals verbinding maken met de database, de database opvragen en dergelijke.</P> <p>
Dus open php_code.php en plak de volgende code erin:</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>
Voeg dit bestand nu bovenaan (de allereerste regel) van uw index.php-bestand toe. Vind ik leuk:</P> <pre><code><?php include('server.php'); ?></code></pre> <p>
Op dit moment hoeft deze code alleen maar verbinding te maken met de database, enkele variabelen te initialiseren en de ingediende gegevens van het formulier op te slaan in de database in de informatie die we eerder hebben gemaakt. Dat is alleen het CReate-gedeelte van CRUD. Laten we verder gaan met de anderen.</P> <p>
Ga nu opnieuw naar je index.php-bestand en voeg deze code toe onder de <body>-tag:</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>
Deze code geeft een bevestigingsbericht weer om de gebruiker te vertellen dat er een nieuw record is aangemaakt in de database. </P> <p>
Om de databaserecords op te halen en op de pagina weer te geven, voegt u deze code direct boven het invoerformulier toe:</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>
Laten we een nieuw record maken en kijken of dit werkt:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463338.png" /></P> <p>
..en voila!! Het werkt perfect!</P> <p>
Nu gaan we verder met bewerken. Voeg bovenaan je index.php-bestand (direct na de include-instructie) de volgende code toe:</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>
Bij het bewerken van een databaserecord moeten we de oude waarden in het formulier plaatsen zodat ze kunnen worden gewijzigd. Laten we hiervoor onze invoervelden op het formulier aanpassen en die waarden uit de database ($naam, $adres) als waarden instellen op de <strong>waarde</strong> kenmerk van de formuliervelden.</P> <p>
Voeg ook een verborgen veld toe voor de id van het record dat we gaan bijwerken, zodat het uniek kan worden herkend in de database door zijn id. Dit verklaart het beter:</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>
Onthoud dat alles in de invoer <form> staat.</P> <p>
Als we nu op de knop Bewerken op een bepaald record uit de database klikken, worden de waarden in het formulier ingevuld en kunnen we ze bewerken. Aangezien we op hetzelfde formulier aan het bewerken zijn als bij het maken, moeten we een voorwaarde plaatsen die bepaalt welke knop moet worden weergegeven. Bij het bewerken tonen we bijvoorbeeld de update-knop op het formulier en bij het maken tonen we de knop Opslaan. We doen dit met behulp van de <strong>update </strong> variabele die booleaans is. Als de update waar is, wordt de update-knop weergegeven en als de update onwaar is, wordt de knop Opslaan weergegeven.</P> <p>
Vervang je bewaarknop op het formulier als volgt:</P> <p>
Vervang ..</P> <pre><code><button class="btn" type="submit" name="save" >Save</button></code></pre> <p>
met...</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>
Als we dit nu in de browser uitvoeren en op de knop Bewerken klikken, krijgen we dit:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463388.png" /></P> <p>
Nu kunt u zien dat het de update-knop is die wordt weergegeven. Laten we de code toevoegen die wordt uitgevoerd wanneer op deze knop wordt geklikt.</P> <p>
Open het php_code.php bestand en voeg deze code toe bij de knop:</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>
Wijzig nu de waarden in het formulier en klik op de update-knop. </P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463390.png" /></P> <p>
Geweldig!</P> <p>
Nog een laatste ding:records verwijderen. Voeg deze code toe aan het einde van je php_code.php-bestand en je bent klaar om te gaan:</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>
Als u op de verwijderknop klikt, wordt het record uit de database verwijderd en wordt het bericht weergegeven, net als bij de andere acties.</P> <p>
</P> <h3> </h3> <h2>Conclusie</h2> <p>
Dit brengt ons aan het einde van deze tutorial. Ik hoop dat het nuttig was en je tijd waard was. Ik ben zeer vereerd met uw geduld om dit tot het einde toe te volgen. Als je deze tutorial leuk vindt, deel hem dan met je vrienden door op een van de sociale media-pictogrammen hieronder te klikken. Vergeet niet om mijn andere tutorials op deze site te bekijken. </P> <p>
Bedankt</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="nld_nltextover">
<a class='LinkPrevArticle' href='http://nl.sqldat.com/ols/fdl/1006019451.html' >Compleet gebruikersregistratiesysteem met behulp van PHP en MySQL-database </a>
<a class='LinkNextArticle' href='http://nl.sqldat.com/ols/fdl/1006019453.html' >Bestanden uploaden en downloaden PHP en MySQL </a>
</div>
<section class="nlpage2_bottomlist">
<ol class="nlarticle_list">
<li class="flexstanroc_nlwv">
<i></i>
<a href="https://nl.sqldat.com/ols/dbe/1006014567.html">
<p class="nltextover" title="REGEXP_COUNT() Functie in Oracle ">REGEXP_COUNT() Functie in Oracle </p>
</a>
</li>
<li class="flexstanroc_nlwv">
<i></i>
<a href="https://nl.sqldat.com/ols/dbe/1006009932.html">
<p class="nltextover" title="ORA-12505, TNS:luisteraar kent momenteel geen SID gegeven in connect descriptor ">ORA-12505, TNS:luisteraar kent momenteel geen SID gegeven in connect descriptor </p>
</a>
</li>
<li class="flexstanroc_nlwv">
<i></i>
<a href="https://nl.sqldat.com/ols/fdl/1006014416.html">
<p class="nltextover" title="Hoe de LTRIM()-functie werkt in MySQL ">Hoe de LTRIM()-functie werkt in MySQL </p>
</a>
</li>
<li class="flexstanroc_nlwv">
<i></i>
<a href="https://nl.sqldat.com/ols/hfr/1006017134.html">
<p class="nltextover" title="SQL Server 2016:altijd versleuteld ">SQL Server 2016:altijd versleuteld </p>
</a>
</li>
</ol>
</section>
</section>
</section>
<footer>
<section class="container_nlwo nlflexbetnite nlfooter_info flexalignloe">
<a href="https://nl.sqldat.com" class="nlbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="flexstanroc_nlwv">
© AUTEURSRECHT
<a href="https://nl.sqldat.com">http://nl.sqldat.com</a>
ALLE RECHTEN VOORBEHOUDEN
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>