Een prikbordwebsite maken met PHP en MYSQL: 5 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:16

Deze instructable laat je zien hoe je een prikbordwebsite kunt maken met php, mysql, html en css. Als webontwikkeling nieuw voor u is, hoeft u zich geen zorgen te maken, er zullen gedetailleerde uitleg en analogieën zijn, zodat u de concepten beter kunt begrijpen.

Benodigde materialen:

• Teksteditor (d.w.z. Sublime Text, Atom, enz.). Ik zal sublieme tekst gebruiken.
• WAMP staat voor Windows Apache MySQL en PHP
• MAMP staat voor Mac Apache MySQL en PHP

MAMP voor Mac-gebruikers: https://www.mamp.info/en/ (inclusief MySQL en PHP)

WAMP voor Windows-gebruikers: https://www.wampserver.com/en/ (inclusief MySQL en PHP)

Sublieme tekst:

Stap 1: Projectoverzicht

De manier om berichten bij te houden is door ze op te slaan in een database. In deze tutorial zullen we MySQL gebruiken. (Ik gebruik WAMP omdat ik een op Windows gebaseerd besturingssysteem heb)

1. Configureer PHP en MySQL door ervoor te zorgen dat ze zijn gedownload en u naar hun bestandslocatie op uw computer kunt navigeren.
2. Open de opdrachtprompt en navigeer naar uw mysql-map en typ "mysqladmin -u root -p wachtwoord". Dit commando vraagt om uw wachtwoord en om het opnieuw in te voeren.
3. Start nu uw WAMP- of MAMP-server. Er verschijnt een groen pictogram zodra de server klaar is met laden. Klik op het pictogram -> MySQL -> MySQL-console om ervoor te zorgen dat u kunt inloggen met uw nieuw aangemaakte wachtwoord.
4. Nu is het de taak om de database te maken waarin de informatie over de berichten wordt opgeslagen. Laten we eens nadenken over wat er gewoonlijk nodig is van een bericht. Veelvoorkomende items waren: naam, het tijdstip waarop het bericht is gepost, het tijdstip waarop het bericht is gepost en het bericht zelf.
5. Maak een database met de naam "bericht".
6. Maak een tabel met de naam "opmerkingen" en voeg de rijen toe: id (Integer-type dat automatisch wordt verhoogd), naam (Varchar-type), commentaar (Varchar-type), tijd (Varchar-type), datum (Varchar-type),
7. Maak verbinding met de "bericht"-database in een php-bestandsnaam "db.php".
8. Maak het invoerveld voor de naam van de auteur en het tekstgebied voor het bericht.
9. Valideer de gegevens voordat u deze in de database invoegt. Als alles in orde is, voert u het bericht, de naam van de auteur, de datum en tijd in waarop het bericht is geplaatst.
10. Geef de berichten weer door alle databaserecords op te halen in een html-div en de pagina op te maken met CSS.
11. Hoera, je hebt met succes geleerd om een berichtensysteem te maken.

Stap 2: Stap 2 - Database instellen

Afbeelding 1 - Zodra de database is aangemaakt, kunt u het commando 'show databases' invoeren om er zeker van te zijn dat de database succesvol is aangemaakt.

TOON DATABANKEN;

Afbeelding 2 - Om informatie in de database op te slaan, moet een tabel worden gemaakt. Het maken van de tabel met de essentiële rijen is essentieel om ervoor te zorgen dat de website alle benodigde informatie heeft. De tabelopmerkingen bevatten alle benodigde informatie

Om verbinding te kunnen maken met de berichtendatabase, geeft u de opdracht "VERLENEN ALLE PRIVILEGES ON message.*" op. U mag uw eigen gebruikersnaam en wachtwoord gebruiken, vergeet deze alstublieft niet.

MAAK DATABASE bericht; VERLENEN ALLE PRIVILEGES OP bericht.* AAN 'gebruikersnaam'@'localhost' GEDENTIFICEERD DOOR 'wachtwoord';

Afbeelding 3 - Voer 'beschrijf opmerkingen' in om er zeker van te zijn dat de tabel met succes is gemaakt. U kunt de rijen en hun gegevenstypen zien door deze opdracht uit te voeren.

BESCHRIJVEN OPMERKINGEN;

Afbeelding 4 - Aangezien de rij voor de opmerking er oorspronkelijk niet was, laten we deze toevoegen met het ALTER TABLE-commando. Het commentaar is van het type VARCHAR(255), dit betekent dat het commentaar tekst zal zijn die niet langer mag zijn dan 255 tekens.

ALTER TABLE bericht ADD COLUMN commentaar VARCHAR(255) NOT NULL;

De 255 staat voor de maximale lengte voor commentaar. Niet null betekent dat wanneer een bericht in de database wordt ingevoegd, het commentaarveld in de database niet leeg mag zijn (null; niet-bestaand).

Stap 3: PHP-bestanden maken

De volgende stappen vinden plaats in uw teksteditor naar keuze. Ik zal sublieme tekst gebruiken.

1. We moeten twee bestanden maken. De ene zal db.php worden genoemd, die verbinding maakt met de website van de MYSQL (mijn standaard zoektaal) database en index.php, de pagina waar de berichten zullen plaatsvinden.

2. Laten we eerst db.php maken. Wanneer de database is ingesteld, de verbindingsreferenties om verbinding te maken met de database. Dit bestand zal index.php verbinden met de database zodat we het kunnen vullen met de informatie die nodig is om de chatroom te creëren.

Code voor db.php

?php define("DB_SERVER", "localhost");

definiëren("DB_USER", "kylel95"); definiëren("DB_PASSWORD", "wachtwoord"); definiëren("DB_NAME", "bericht"); $connect = mysqli_connect(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);

if(mysqli_connect_errno())

{ die("Databaseverbinding mislukt: ". mysqli_connect_error()." (". mysqli_connect_errno(). ")"); }

?>

3. Laten we vervolgens index.php maken. In dit bestand maken we de chatroom aan. We zullen het invoerveld van html gebruiken voor de naam, het tekstgebied voor het bericht en een div-element om de berichten te bevatten. We zullen CSS (Cascase Style Sheet) gebruiken om de pagina-elementen te positioneren en de inhoud van de pagina te verfraaien.

code voor index.php

?phprequire_once('db.php');

if(isset($_POST['submit'])) { $time = date("g:i:s A"); $datum = datum ("n/j/J"); $msg = $_POST['bericht']; $name = $_POST['fname']; $resultaat = ""; if(!empty($msg) && !empty($name)) { //naam tijd datum bericht $query = "INSERT INTO comments ("; $query.=" naam, tijd, datum, commentaar"; $query. = ") WAARDEN ("; $query.= " '{$name}', '{$time}', '{$date}', '{$msg}' "; $query.= ")"; $resultaat = mysqli_query($connect, $query); } } ?>

tekstgebied { grensradius: 2%; } #thread { border: 1px #d3d3d3 solide; hoogte: 350px; breedte: 350px; overloop: scrollen; }

?php $select = "SELECTEER * UIT opmerkingen"; $q = mysqli_query($connect, $select); while($row = mysqli_fetch_array($q, MYSQLI_ASSOC)) { echo $row['name']. ": ". $rij['commentaar'].""; } ?> Naam:Verzenden

4. We zullen de ingebouwde functie van php gebruiken date() om de datum en tijd te krijgen waarop het bericht is gepost en leeg() om ervoor te zorgen dat gebruikers geen leeg bericht of een lege naam invoeren.

5. Zodra de formuliergegevens zijn ingediend, zullen we de naam, het bericht, de tijd en de datum in de database invoegen.

6. We zullen nu uit de database vragen en alle opmerkingen krijgen. De opmerkingen worden opgeslagen in een div.

?>

Stap 4: Vul de Db.php- en Index.php-bestanden in

1. De db.php (db afkorting voor database) gebruikt de gebruikersnaam en het wachtwoord die ik heb gebruikt toen de database was gemaakt toen ik de opdracht "VERLENEN ALLE PRIVILEGES" gaf.

De functie definiëren bovenaan het bestand geeft aan dat de variabelen DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME constanten zijn (ze veranderen niet in waarde). De if-statements controleren of de verbinding met de database is mislukt of niet.

2. In het bestand index.php gebruiken we de functie 'vereiste' van php om de pagina met de database te verbinden. Maak vervolgens een invoerveld voor de naam. Maak vervolgens het tekstgebied voor het bericht. Zodra deze zijn gemaakt, gaat u naar https://localhost:8080/messages/index.php (mogelijk heeft u geen poortnummer, bijv. 8080) om er zeker van te zijn dat u het invoervak en het tekstgebied ziet.

3. Laten we vervolgens de formuliergegevens verzamelen en deze vervolgens in de database invoegen.

4. Laten we nu een query toevoegen aan de database en alle berichten in een div uitvoeren.

5. Om dingen een beetje beter te stylen, laten we wat CSS toevoegen om het een beetje mooier te maken.

PS: ik had een typfout. Wijzig 'message' in commentaar in de buurt van het INSERT-commando voor de $query-variabele.

Stap 5: Stap 5: Voorbeeld en volgende stappen

Hopelijk zie je iets dat lijkt op wat hierboven staat na het toevoegen van de css en het testen ervan.

Volgende stappen: voeg meer css toe om de site aantrekkelijker te maken.