Com fer un lloc web de tauler de missatges mitjançant PHP i MYSQL: 5 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:13

Aquesta instrucció us mostrarà com crear un lloc web de tauler de missatges mitjançant php, mysql, html i css. Si no coneixeu el desenvolupament web, no us preocupeu, hi haurà explicacions i analogies detallades perquè pugueu entendre millor els conceptes.

Materials necessaris:

• Editor de text (és a dir, text sublim, Atom, etc.). Faré servir text sublim.
• WAMP significa Windows Apache MySQL i PHP
• MAMP significa Mac Apache MySQL i PHP

MAMP per a usuaris de Mac: https://www.mamp.info/en/ (inclou MySQL i PHP)

WAMP per a usuaris de Windows: https://www.wampserver.com/en/ (inclou MySQL i PHP)

Text sublim:

Pas 1: Visió general del projecte

La manera de fer un seguiment dels missatges és emmagatzemant-los en una base de dades. En aquest tutorial, farem servir MySQL. (Estic fent servir WAMP ja que tinc un sistema operatiu basat en Windows)

1. Configureu PHP i MySQL assegurant-vos que es descarreguen i que podeu navegar a la ubicació del fitxer al vostre ordinador.
2. Obriu l'indicatiu d'ordres i aneu al directori mysql i escriviu "mysqladmin -u root -p password". Aquesta ordre us demanarà la vostra contrasenya i la torneu a introduir.
3. Ara inicieu el servidor WAMP o MAMP. Apareixerà una icona verda quan el servidor acabi de carregar-se. Feu clic a la icona -> MySQL -> Consola MySQL per assegurar-vos que podeu iniciar la sessió amb la vostra contrasenya recentment creada.
4. Ara la tasca és crear la base de dades on s’emmagatzemarà la informació sobre els missatges. Pensem en el que normalment es necessita d’un missatge. Els elements habituals inclosos: el nom, l’hora en què es va publicar el missatge, l’hora en què es va publicar el missatge i el missatge en si.
5. Creeu una base de dades anomenada "missatge".
6. Creeu una taula anomenada "comentaris" i afegiu les files: id (tipus enter que augmenta automàticament), nom (tipus Varchar), comentari (tipus Varchar), hora (tipus Varchar), data (tipus Varchar),
7. Connecteu-vos a la base de dades de "missatges" en un nom de fitxer php "db.php".
8. Creeu el camp d'entrada per al nom de l'autor i l'àrea de text del missatge.
9. Valideu les dades abans d’inserir-les a la base de dades. Si tot està bé, inseriu el missatge, el nom de l'autor, la data i l'hora de publicació de la publicació.
10. Visualitzeu els missatges recuperant tots els registres de bases de dades en un div html i estileu la pàgina mitjançant CSS.
11. Horray, heu après amb èxit a crear un sistema de missatgeria.

Pas 2: Pas 2: configureu la base de dades

Imatge 1: un cop creada la base de dades, podeu introduir l'ordre "mostrar bases de dades" per assegurar-vos que la base de dades s'hagi creat correctament.

MOSTRA LES BASES DE DADES;

Imatge 2 - Per emmagatzemar informació a la base de dades, cal crear una taula. La creació de la taula amb les files essencials és clau per assegurar-se que el lloc web tingui tota la informació necessària. Els comentaris de la taula tindran tota la informació necessària

Per tal de poder connectar-vos a la base de dades de missatges, publiqueu l'ordre "CONCEDEIX TOTS ELS PRIVILEGIS ACTIVATS. *". Podeu utilitzar el vostre propi nom d’usuari i contrasenya, només no ho oblideu.

Missatge CREA BASE DE DADES; CONCEDIU TOTS ELS PRIVILEGIS al missatge. * A "nom d'usuari" @ "localhost" IDENTIFICAT PER "contrasenya";

Imatge 3: introduïu "descriviu comentaris" per assegurar-vos que la taula s'ha creat correctament. Podeu veure les files i els seus tipus de dades emetent aquesta ordre.

DESCRIBIR COMENTARIS;

Imatge 4 - Com que la fila del comentari no hi era originalment, afegim-la amb l'ordre ALTER TABLE. El comentari és de tipus VARCHAR (255); això significa que el comentari serà un text que no pot superar els 255 caràcters.

ALTER TABLE missatge AFEGEIX comentaris COLUMNA VARCHAR (255) NOT NULL;

El 255 representa la longitud màxima per fer comentaris. No nul significa que quan s'insereix un missatge a la base de dades, el camp de comentaris de la base de dades no pot estar buit (nul; inexistent).

Pas 3: creeu fitxers PHP

Els passos següents es duran a terme a l'editor de text que trieu. Faré servir text sublim.

1. Haurem de crear dos fitxers. Un es dirà db.php que es connectarà o lloc web a la base de dades MYSQL (el meu llenguatge de consulta estàndard) i index.php, la pàgina on tindran lloc els missatges.

2. Primer, creem db.php. Quan es va configurar la base de dades, les credencials de connexió per connectar-se a la base de dades. Aquest fitxer connectarà index.php a la base de dades perquè puguem omplir-lo amb la informació necessària per crear la sala de xat.

Codi per a db.php

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

define ("DB_USER", "kylel95"); define ("DB_PASSWORD", "contrasenya"); define ("DB_NAME", "missatge"); $ connect = mysqli_connect (DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);

if (mysqli_connect_errno ())

{die ("Error de connexió a la base de dades:". mysqli_connect_error (). "(". mysqli_connect_errno (). ")"); }

?>

3. A continuació, creem index.php. En aquest fitxer creem la sala de xat. Utilitzarem el camp d’entrada d’html per al nom, l’àrea de text del missatge i un element div per contenir els missatges. Utilitzarem CSS (Cascase Style Sheet) per situar els elements de la pàgina i decorar el contingut de la pàgina.

codi per a index.php

? phprequire_once ('db.php');

if (isset ($ _ POST ['submit']))) {$ time = date ("g: i: s A"); $ data = data ("n / j / Y"); $ msg = $ _POST ['missatge']; $ name = $ _POST ['fname']; $ result = ""; if (! empty ($ msg) &&! empty ($ name)) {// nom hora data missatge $ query = "INSERT INTO comments ("; $ query. = "name, time, date, comment"; $ query. = ") VALORS ("; $ query. = "'{$ Name}', '{$ time}', '{$ date}', '{$ msg}'"; $ query. = ")"; $ result = mysqli_query ($ connect, $ consulta); }}?>

textarea {border-radius: 2%; } # fil {vora: 1px # d3d3d3 sòlid; alçada: 350 px; amplada: 350 px; desbordament: desplaçament; }

? php $ select = "SELECT * FROM comentaris"; $ q = mysqli_query ($ connect, $ select); while ($ fila = mysqli_fetch_array ($ q, MYSQLI_ASSOC)) {echo $ fila ['nom']. ":". $ fila ['comentari']. ""; }?> Nom: envia

4. Utilitzarem la data incorporada de la funció php () per obtenir la data i l'hora en què es va publicar el missatge i buit () per assegurar-nos que els usuaris no introdueixin cap nom o missatge buit.

5. Un cop enviades les dades del formulari, inserirem el nom, el missatge, l'hora i la data a la base de dades.

6. Ara consultarem a la base de dades i obtindrem tots els comentaris. Els comentaris s’emmagatzemaran en un div.

?>

Pas 4: ompliu els fitxers Db.php i Index.php

1. El db.php (abreviatura de db per a base de dades) utilitza el nom d'usuari i la contrasenya que vaig utilitzar un cop es va crear la base de dades quan vaig emetre l'ordre "CONCEDIR TOTS ELS PRIVILEGIS".

La funció de definició a la part superior del fitxer indica que les variables DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME són constants (no canvien de valor). Les sentències if comproven si la connexió a la base de dades ha fallat o no.

2. Al fitxer index.php, utilitzarem la funció de requeriment de php per connectar la pàgina a la base de dades. A continuació, creeu un camp d'entrada per al nom. A continuació, feu la zona de text del missatge. Un cop creats, visiteu https:// localhost: 8080 / messages / index.php (és possible que no tingueu un número de port, és a dir, 8080) per assegurar-vos que veieu el quadre d’entrada i l’àrea de text.

3. A continuació, recollim les dades del formulari i, a continuació, inserim-les a la base de dades.

4. Ara, afegim la consulta a la base de dades i publiquem tots els missatges en un div.

5. Per definir les coses una mica millor, afegim CSS perquè sigui una mica més bonic.

PD: Vaig tenir un error tipogràfic. Canvieu "missatge" per fer comentaris a prop de l'ordre INSERT per a la variable $ query.

Pas 5: Pas 5: Exemple i passos següents

Esperem que vegeu alguna cosa similar al que hi ha més amunt després d’afegir el css i provar-lo.

Passos següents: afegiu més css per fer el lloc més atractiu.