Com construir el vostre primer lloc web PHP senzill

Com construir el vostre primer lloc web PHP senzill

Voleu aprendre a construir un lloc web bàsic? Un cop és possible que hàgiu començat amb HTML, però actualment la millor solució és PHP. Tot i que necessiteu alguns coneixements d’HTML per començar, PHP s’ha convertit en l’opció òptima per crear llocs web, tant estàtics com dinàmics.





Per aprendre PHP, la millor manera de començar és amb un lloc web PHP simple.





Per què triar PHP per al desenvolupament de llocs web?

Al llarg dels anys, hi ha hagut diverses opcions per al desenvolupament web. Va començar amb HTML simple, després amb HTML amb CSS incrustat o una referència de fitxer CSS. Quan van aparèixer llocs web dinàmics, hi havia dues opcions principals: ASP (després ASP.NET) i PHP.





Segons xifres (com aquesta enquesta de W3Techs ) PHP és molt més popular, amb gairebé el 82% dels llocs web que l’utilitzen com a llenguatge de programació del servidor. Compareu-ho amb poc menys del 16% mitjançant ASP.NET.

Sembla improbable que ASP.NET existeixi més enllà de la seva data límit oficial el 2022 amb cap títol oficial, almenys no com a tecnologia web. PHP (un acrònim recursiu de PHP Hypertext Preprocessor) ha demostrat tenir més èxit, principalment gràcies a una integració més senzilla amb Linux.



Com que el sistema operatiu de codi obert s’executa a la majoria de servidors web, això no hauria de sorprendre.

El que necessitareu per crear un lloc web PHP

Abans de començar, assegureu-vos que teniu instal·lat un editor de text senzill o un entorn de desenvolupament preparat per a PHP. Podeu començar a codificar PHP amb una eina tan senzilla com el Bloc de notes de Windows. Els exemples trobats en aquest tutorial s’han escrit a Notepad ++.





També hauríeu de tenir un servidor web PHP per carregar els vostres fitxers. Pot ser un servidor remot o un equip local amb un entorn LAMP (Linux, Apache, MySQL, PHP) o WAMP (Windows, Apache, MySQL, PHP) instal·lat. Si utilitzeu Windows, seguiu això Guia d'instal·lació de WAMP per començar.

Finalment, necessitareu un programa FTP per penjar els fitxers al servidor web.





Llegeix més: Clients FTP gratuïts per a Windows

Comprendre la sintaxi per codificar un lloc web senzill mitjançant PHP

La sintaxi bàsica per a PHP utilitza un conjunt de claudàtors angulats, amb cada funció que acaba amb un punt i coma, de la següent manera:

Pel que fa a les pàgines web, gairebé tots els usos de PHP es basen en la declaració echo. Això indica al navegador que emeti el text i el contingut de les cometes. Per exemple:

com utilitzar el portàtil com a monitor

Tingueu en compte que l'HTML també s'inclou a les cometes. La sortida per a això normalment apareix com:

Construir un lloc web amb PHP: Estructura

Independentment del codi amb què escriviu el vostre lloc web, haureu de conèixer l’estructura del lloc abans de continuar. Aquest tutorial us mostrarà com crear una sola pàgina a partir de fitxers PHP reutilitzables. Es poden utilitzar per crear pàgines addicionals o bé podeu triar un enfocament diferent.

Sigui quina sigui la forma que preveu que es desenvolupi el lloc, preneu-vos el temps per apuntar un pla ràpid en un tros de paper. A continuació, podeu fer referència a això, potser per comprovar el contingut previst, o veure a quina pàgina podeu enllaçar-lo.

com desactivar una tecla del teclat

El nostre lloc web bàsic de PHP inclourà una pàgina principal, que inclou informació biogràfica i algunes imatges.

Per a aquest senzill lloc web PHP, crearà una sola pàgina PHP amb contingut de tres pàgines HTML. El fitxer index.php que creeu es pot editar ajustant les paraules i les imatges dels fitxers HTML originals.

Els exemples de codi que es mostren a continuació són captures de pantalla. Trobareu el codi original a el meu dipòsit de GitHub , que es pot descarregar gratuïtament a tothom.

Feu un lloc web PHP: la capçalera

Per crear un lloc web mitjançant PHP, haureu de construir tres pàgines web. Aquests es basen en l'estructura bàsica de capçalera, cos i peu de pàgina.

Com podeu suposar, la capçalera inclou informació sobre el títol. Tanmateix, també s’inclou informació per al navegador, com ara l’estàndard HTML que s’utilitza, juntament amb referències CSS.

Comenceu creant un fitxer anomenat header.html i, a continuació, afegiu la informació de capçalera necessària.

Per a aquest exemple, hem proporcionat un fitxer CSS bàsic, al qual veureu que es fa referència al seu propi directori / css /. Aquest fitxer es cridarà quan la pàgina es carregui al navegador i apliqui el tipus de lletra i el disseny requerits.

Introduïu contingut al cos de la vostra pàgina web PHP

Cada pàgina web consisteix en una secció de contingut coneguda com a 'cos'. Aquesta és la part d'una pàgina que llegiu --- el que llegiu ara és el cos d'aquesta pàgina.

Creeu un fitxer anomenat body.html i afegiu la informació que voleu incloure a la pàgina. He inclòs detalls biogràfics de la meva pàgina d’autor MakeUseOf, però podeu afegir el que vulgueu.

La secció de peu de pàgina de la pàgina web és la següent. Creeu-ho com a footer.html i afegiu contingut. Podria ser informació sobre drets d'autor o potser alguns enllaços útils per a qualsevol persona que visiti la vostra pàgina.

Pot ser una cosa així:

Amb el codi afegit, deseu el fitxer.

Posant en comú el vostre lloc web PHP simple

Amb tres fitxers HTML separats a / html / podeu utilitzar PHP echo per compilar-los en una sola pàgina.

Creeu un fitxer PHP nou anomenat index.php amb les tres línies següents:



Deseu, pengeu al vostre servidor i, a continuació, aneu a index.php. Hauríeu de veure la pàgina web completa al vostre navegador. Tingueu en compte que el fitxer PHP real que teniu obert al navegador consta de només tres línies.

Finalment, podeu afegir una mica de PHP florit amb la línia final. Incloeu un avís de drets d'autor amb un any sempre actualitzat:

Copyright © CM Cawley

Això apareixerà al fitxer index.php després del peu de pàgina. Observeu com la declaració de data de ressò ('Y') mostra l'any actual en quatre dígits. Podeu canviar la manera com es mostra fent referència a aquesta llista d'opcions de W3Schools. Per exemple, una 'y' minúscula mostraria l'any en format de dos dígits, en lloc de quatre.

Utilitzeu CSS per situar-lo i estilitzar-lo, com faríeu amb qualsevol altre element. Cerqueu el CSS d’aquest projecte al dipòsit de GitHub, juntament amb l’altre codi de lloc web simple de PHP.

com s'utilitza el fons de pantalla animat Windows 10

Ben fet --- acabeu de crear el vostre primer lloc web PHP des de zero.

PHP és la millor opció per codificar llocs web?

Com podríeu haver recollit, PHP no és l'única manera de desenvolupar llocs web. Ja existeixen molts marcs per a experiències web dinàmiques basades en bases de dades, hi ha JavaScript i tecnologies relacionades i programari com Adobe Dreamweaver.

Tanmateix, si voleu començar amb el desenvolupament web, és intel·ligent apreciar els conceptes bàsics. Si enteneu els blocs de construcció de llocs web d’HTML, CSS i PHP, esteu en bon camí cap a l’èxit.

Compartir Compartir Tweet Correu electrònic Apreneu HTML i CSS amb aquests tutorials pas a pas

Teniu curiositat per HTML, CSS i JavaScript? Si creieu que teniu la possibilitat d’aprendre a crear llocs web des de zero, aquí teniu alguns fantàstics tutorials pas a pas que val la pena provar.

Llegiu a continuació
Temes relacionats
  • Programació
  • Desenvolupament web
  • Programació
  • Programació PHP
Sobre l'autor Christian Cawley(1510 articles publicats)

Editor adjunt de seguretat, Linux, bricolatge, programació i tecnologia explicada i productor de podcasts realment útils, amb una àmplia experiència en suport d'escriptori i programari. Col·laborador de la revista Linux Format, Christian és un fabricant de Raspberry Pi, un amant de Lego i un fan dels jocs retro.

Més de Christian Cawley

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us