CMS

Introducció a “Simple PHP CMS”

Posted by

Com hem vist, la majoria de llocs web dinàmics fan servir algun tipus de gestor de continguts (CMS). Malgrat que existeixen moltes opcions gratuïtes (WordPress, Driipal, …), no està de més veure com funcionen aquests sistemes. Per experimentar-ho crearem un petit gestor de continguts en PHP.

  • Creació d’una base de dades
  • Connexió amb la base de dades
  • Elaboració d’un formulari
  • Desar les dades del formulari a la base de dades
  • Mostrar les dades desades de la base de dades

Per veure com interactuen el PHP (llenguatge de codi obert) i MySQL (base de dades), establirem una classe senzilla en un fitxer anomenat ‘simpleCMS.php’.


<?php
class simpleCMS {

var $host;
var $username;
var $password;
var $table;

public function display_public() { }
public function display_admin() { }
public function write() { }
public function connect() { }
private function buildDB() { }

}
?>


En aquest fitxer inclourem quatre variables i cinc mètodes que ens permetin, de manera clara, enfocar el CMS a una programació orientada a objectes PHP.

INSTAL·LACIÓ DRUPAL

Posted by

Requeriments previs:

  • Servidor local com per exemple: MAMP, XAMPPa, WAMP instal·lat a la carpeta arrel o disc local i no a “archivos de programa” com usualment s’instal·la qualsevol programa.
  • Descarregar en format “.zip” el CMS de drupal. Per descarregar-lo podem anar a la pagina oficial:

https://www.drupal.org/download

Preparació de l’entorn:

  • Primer de tot engegarem el mòdul d’apacheb i MySQLb necessitarem entrar a l’administrador de bases de dades(MySQL). Podem fer clic al boto Admin al XAMPP o escriure al navegador “localhost/phpmyadmin”.
  • Un cop dins procedirem a crear la base de dades en qüestió fent clic al botó de “Base de datos”. Posem nom a la base de dades i, al desplegable seleccionarem la primera opció “Cotejamiento”. Finalment farem clic al botó crear.
  •  A continuació obrirem el .zip de drupal i extraurem la carpeta de drupal a la carpeta htdocs del nostre servidor local. En aquest cas htdocs es troba dins la carpeta xampp. Per trobar més fàcilment la carpeta li canviarem el nom ex: drupal; drupal8.

 

Procés d’instal·lació:

  • Entrem a la carpeta de drupal al navegador prèviament extreta escrivint “localhost/drupal” on drupal es intercanviable pel nom que s’hagi posat a la carpeta.
  • Ens apareixerà l’instal·lador del drupal al navegador. En primera instància seleccionarem l’idioma de l’entorn.
  • Seguidament ens deixa escollir quin perfil volem instal·lar Standard, Minimal i una tercera opció d’instal·lació que es tracta d’un web d’exemple. Seleccionarem Standard.
  • És possible que a la verificació dels requeriments ens apareixen uns quants avisos de compatibilitat. En aquest cas no ens hem de preocupar per les alertes. Anem al final de la pàgina on trobarem una opció que posa “continue anyway” i li fem clic per seguir amb la instal·lació.

  • A continuació haurem de configurar la base de dades:
    • Database Name: El nom de la base de dades ha de coincidir amb el nom escollit a la preparació de l’entorn (drupal8).
    • Database username: En cas d’utilitzar XAMPP el nom d’usuari és root.
    • Database password: si utilitzem XAMPP deixem en blanc ja que per defecte no porta cap contrasenya.
  • Al acabar i assegurar-nos de que hem introduït la informació correcta farem clic sobre “Save and continue”.
  • Quan hagi acabat el procés de instal·lació ena apareixerà la pagina de configuració final on triarem tots els paràmetres de la nostre pagina web i usuari administrador.
    • Site name: Introduirem el nom del web.
    • Site email address: Correu d’informació del web(no rebrem cap correu ja que estem fent una instal·lació local).
    • Username: nom d’usuari de l’administrador.
    • Password & Confirm password: la contrasenya de l’administrador.
    • Email address: correu de l’administrador web.
    • Default country: país d’origen. (Spain)
    • Default time zone: zona horària corresponent.(Madrid)
  • Per acabar guardarem la configuració i serem redirigits a la pàgina principal del nostre nou lloc web.

 

a. Aquesta instal·lació utilitza XAMPP.

b.Sempre que vulguem operar amb drupal o qualsevol CMS amb base de dades haurem d’activar el mòdul Apache i MySQL al nostre servidor local.

Creació d’un theme en wordpress (IV)

Posted by
El document functions.php

Al costat dels documents bàsics per la creació d’un theme de Wrodpress no podem obviar functions.php. Aquest és un document opcional per a un framework de WordPress però molt necessàri per activar i editar determinades funcionalitats en un theme una mica més avançat.

El document functions.php, se situa a l’arrel del directori del theme i queda automàticament vinculat al mateix. Entre moltes altres, les funcions principals permeten activar i editar plugins de WordPress, com ara l’edició de menus, la creació d’àrees de ginys (widgets), l’associació de miniatures als articles (thumbnails) o el control de la llargada dels resums de les entrades o posts del weblog …

A continuació trobareu un recull comentat del codi que hem treballat a classe per tal d’afegir aquestes funcionalitats extres al nostre framework.

functions.php

01. <?php
 
<!-- 'register_nav_menus' és una funció permet la creació de menus personalitzats per al theme. En aquest cas s'ha definit tres menus diferents: un primari, un secundari i un per a dispositius mòbils. Afegint aquesta funció s'activen les funcionalitats menus al tauler d'Aparença' de l'administrador. -->
 
02. register_nav_menus( array(
03.    'primary' => __( 'Menú principal', 'framework' ),
04.    'secondary' => __( 'Menú secundari', 'framework' ),
05.    'mobile' => __( 'Menú mòbil', 'framework' )
06. ));
 
07. function framework_theme_widget() {
08.   register_sidebar( array(
09.     'name' => 'Widget Peu',
10.     'id => 'footer_left',
11.     'before_widget' => '<div>',
12.     'after_widget' => '</div>',
13.     'before_title' => '<h4>',
14.     'after_title' => '</h4>',
15.  ));
16. }
 
17. add_action( 'widgets_init', 'framework_theme_widget' );
18. add_theme_support( 'post-thumbnails' );
 
19. ?>

Creació d’un theme en wordpress (III)

Posted by
La funció The Loop

The Loop és un codi PHP utilitzat per WordPress per mostrar publicacions. Mitjançant The Loop, WordPress processa cada entrada per mostrar diferents element de la mateixa (títol, autor, data, hora, contingut, categoria, resum, imatge destacada, …) a la pàgina en que hem inserit el codi. en aquest cas ho inserirem a l’arxiu index.php, tot ampliant el que ja vàrem comentar en el post anterior.

Qualsevol codi HTML o PHP del The Loop es processarà en cada publicació. D’aquesta manera disposem d’un gran control sobre la forma en que es mostra la publicació.

index.php
18. <!-- ampliació de la lliçó anterior -->
19. <section>
20. <?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
Aquí comença The Loop. Es tracta d'una estructura reiterativa que inserirà un article i tot el contingut que sol·licitem per cada entrada publicada.
 
21. <article>
22. <h3><?php the_title(); ?></h3>
Insereix el títol de l'entrada en forma de títol de nivell 3.
 
23. <p><small><?php echo get_the_date(); ?></small></p>
Insereix el la data de l'entrada per cada entrda.
 
24. <p><?php the_excerpt(); ?></p>
Insereix el resum de l'entrada.
 
25. </article>
26. <?php endwhile; else : ?>
27. <?php endif; ?>
Aquí tanquem i aturem la sentència reiterativa.
 
28. </section>

En funció del disseny i el contingut que desitgem mostrar, hi ha altres funcions que poden incrustar, per exemple, el contingut amb the_content();, l’autor amb the_author();, la categoria amb the_category(); i l’hora amb the_time, entre altres. Al codex de WordPress s’hi recullen les diferents opcions i els arguments que permeten personalitzar la forma com es mostren.

Creació d’un theme en WordPress (I)

Posted by

Existeixen molts themes disponibles per wordpress. Els themesés un directori d’arxius que modificquen l’aspecte del weblog i que permet personalitzar la manera com es mostra i estructura el contingut. Canvia aspectes com els colors, la capçalera, la pàgina principal, el format de les dades, etc.

Molts d’aquests themes són gratuïts i lliures, d’altres, sovint els més atractius i complets, són de pagament i amb drets de reproducció limitats.

En aquesta entrada comencem una lliçó que ocuparà diferents articles destinats a aprendre a crear un theme de wordpress, original i des de zero.

El framework bàsic

Les plantilles de WordPress estan composades per llarga corrua d’arxius PHP que inclouen diversos llenguatges, d’arxius CSS i JavaScript, entre altres. En aquest primer post plantegem la creació d’un framework (marc de treball) que permeti visualitzar els continguts que s’editen i publiquen des de la interfície d’administrador de WordPress (dashboard).

Per realitzar aquest framework més bàsic, necessitarem dos arxius, a tot estirar tres:

  • index.php Aquest arxiu allotjarà el document HTML i les instruccions més bàsiques en PHP perquè es mostrin els continguts de wordpress.
  • style.css Aquest arxiu allotja el codi CSS, que permet modificar la forma en que es mostra la pàgina, i una capçalera dins d’un comentari que dona nom i descriu la plantilla per a wordpress.
  • screenshot.png Aquest arxiu és la imatge que identifica la plantilla des de l’apartat themes de wordpress. Aquesta imatge cal que sigui de 1200X900 píxels, com a mínim, per no perdre resolució i que es vegi correctament des del perfil d’administrador de WordPress.

Instal·lació de Worpress (localhost)

Posted by

En aquest article s’explica pas a pas com instal·lar WordPress en un ordinador personal mitjançant un servidor local. Disposar d’un WordPress local és molt útil per què permet treballar-hi com en un banc de proves. És molt útil per dissenyar un blog o una web abans de publicar-ho a Internet.

Primer pas: Servidor local

El primer que cal fer és activar el servidor local. Un servidor local és una aplicació que simula el funcionament d’un servidor web real però en el pla local. Inclou el sistema de servidors web Apache i les aplicacions addicionals Mysql y PHP, entre altres.

Existeixen diferents opcions, sovint associades a diferents sistemes operatius. Tenim MAMP, per a MAC i Windows. WAMP per a Windows, i XAMPP per a Linux, Windows i MAC.

Tria l’opció que més s’adigui a les teves necessitats i al teu equip i instal·la-la. Un cop instal·lada, activa tots els serveis.

Segon pas: Creació de la base de dades.

Per instal·lar WordPress i aconseguir que desplegui totes les seves funcions, necessitarem crear una base de dades. Per crear-la obrirem el servvei PhpMyAdmin del servidor. És possible que et demani contrasenya o usuari. En servidors locals acostuma a ser “root”.

Un cop dins l’aplicació PhpMyAdmin anem a “Database” i creem una base de dades. Cal recordar el nom de la mateixa. En aquest pas a pas l’anomenarem wpsample.

Tercer pas: Preparació del directori WordPress.

En aquest pas prepararem el directori d’instal·lació i allotjament de WordPress. El primer que ens cal és baixar els documents del CMS de WordPress. Clicant aquí pots descarregar la versió oficial en català. Comprovarem que WordPress se’ns descarrega en una carpeta comprimida en .zip. Cal extreure el contingut al directori de lectura i emmagatzematge del Servidor local. En el cas de MAMP server cal seguir la ruta següent.

c://MAMP/htdocs/wpsample

Com podeu comprovar aquí hem canviat el nom de la carpeta (de wordpress a wpsample) per poder referenciar millor el tutorial.

Quartpas: Instal·lació del CMS WordPress.

Cal activar tots els serveis del servidor local i obrir el navegador i escriure la ruta següent a la barra d’adreces.

http://localhost/wpsample

En aquest punt comprovarem que se’ns presenta una pàgina d’instal·lació molt senzilla de seguir. Ens demanarà informació relativa a la base de dades i a l’usuari i la contrasenya d’accés al mateix. Si seguim els passos, la instal·lació és ràpida i senzillai rapidament podrem gaudir d’una mostra local del gestor de continguts més famós.

Què és WordPress?

Posted by

WordPress és un sistema de gestió de continguts de codi obert per a la publicació de continguts, la creació i la gestió de blogs i webs.

Hi ha dos versions de WordPress en funció de si l’allotjament i el domini el gestiona el propi WordPress o si el gestiona l’usuari des d’un servidor web alternatiu. En el primer cas ens adreçarem a WordPress.com, ens registrarem i seguirem unes instruccions molt senzilles per obrir el lloc web. Te algunes limitacions quan al disseny i la personalització, però és una bona forma de començar a experimentar amb la publicació de continguts.

En el segon cas en que l’allotjament i domini estan gestionats pel propi usuari necessitem disposar d’un servidor propi o tenir contractats els serveis amb una empresa de comercialització de hostings i dominis. La majoria d’aqiestes ja disposen de paquets d’instal·lació automàtics de wordpress. No obstant, si no és així, haurem d’anar a ca.wordPress.org per descarregar els arxius necessaris per a la instal·lació.

A WordPress se li poden afegir funcionalitats per mitjà de connectors i extensions, i també és possible canviar l’aparença visual per mitjà de temes predefinits. A més, l’usuari pot modificar al seu gust el codi XHTML, HTML i CSS de les seves pàgines mitjançant l’editor WYSIWYG que inclou.

En aquest curs aprendrem a fer anar el sistema de publicació de wordpress, a instal·lar-lo en un servidor local, a aplicar plantilles i extensions i, fins i tot, a fer una plantilla completament original.