Sitio web dinámico simple con PHP y MySQL

Sitio web dinámico simple con PHP y MySQL. Si bien existen sistemas completos para implementar páginas web en pocas horas como ser: wordpress, Joomla, Drupal, etc. Ahora, es conveniente saber cómo funcionan esos CMS.

Por tal motivo en este artículo detallaremos la implementación de un pequeño sistema hecho con PHP y MySQL.

Sin embargo, en este sencillo sistema veremos el funcionamiento de una página web simple. También, podemos descargar este mini proyecto gratis y personalizarlo según tus necesidades.

¿Qué es este sitio web dinámico simple con PHP y MySQL?

En este pequeño proyecto aprenderemos el correcto funcionamiento de un CMS, es decir aprenderemos lo siguiente:

• Conectar tu base de datos (MySQL) con PHP.
• Configurar una plantilla HTML.
• Implementar una cabecera.
• Pie de página.
• Barra lateral dinámica.
• Implementar título.
• Contenido.
• Meta etiquetas.
• Meta descripción para páginas web dinámicas (páginas individuales).

¿Cómo funciona el simple sistema web?

Primeramente, tenemos que vincular el sistema PHP con la base de datos MySQL. Por lo tanto, tenemos que editar el fichero «constants.php» que se encuentra dentro de la carpeta «libs«. Esta carpeta se encuentra en la raíz del sistema que estamos desarrollando.

Ahora, el sistema posee dos interfaces muy conocidos en el mundo del desarrollo de sistemas web, estas dos interfaces son las siguientes.

FrontEnd. – Es la parte que el usuario final puede interactuar. Por ejemplo, portada de la página, productos, quienes somos, contacto, etc.

BackEnd. – Es la parte administrativa, solo el administrador de la página web puede tener acceso y/o programador del sitio web. Por ejemplo, configuraciones de la web, creación y/o edición de artículos, gestión de portada, etc.

También aprenderemos a integrar las redes sociales Facebook y Twitter. Estas redes sociales podemos integrarlo en la barra lateral del sitio web.

ESTRUCTURA DEL SISTEMA WEB

Este sistema como cualquier otro sistema posee una estructura de carpetas y archivos que serán necesarios para el correcto funcionamiento. A continuación, una captura de pantalla de la estructura de archivos del proyecto.

COMPONENTES DEL SISTEMA WEB

En este apartado brindaremos los detalles y componentes de este sistema web hecho con PHP y MySQL.

1.- Base de datos (php_web)

Para que el sistema funcione, necesita de una base de datos que tendrá de nombre «php_web» y las tablas «mp_pages«, «mp_tagline«. Por lo tanto, en estas tablas se almacenarán el contenido de la web.

Les dejaremos estas consultas SQL que pueden ser ejecutadas en el gestor phpMyAdmin.

CREATE TABLE `mp_pages` (
  `page_id` int(11) NOT NULL,
  `page_title` varchar(255) NOT NULL,
  `page_desc` text,
  `meta_keywords` varchar(255) DEFAULT NULL,
  `meta_desc` varchar(255) DEFAULT NULL,
  `sort_order` int(11) NOT NULL DEFAULT '0',
  `parent` varchar(255) NOT NULL DEFAULT '0',
  `status` enum('A','I') NOT NULL DEFAULT 'A',
  `page_alias` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `mp_pages` (`page_id`, `page_title`, `page_desc`, `meta_keywords`, `meta_desc`, `sort_order`, `parent`, `status`, `page_alias`) VALUES
(1, 'Bienvenidos', 'Hello friends. I have made this dynamic website which you can download for free. This is simple dynamic website intented for young php learners. You can manage this pages from the <a href=\\\"/\\\">manage-site</a> area. Of course this website is not flawless. I have just made the basic structure to get you started, Now this site needs your imagination and creativity. <br><br>These are some demo text needed to fill up the spaces. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus', 'tags', 'descsds', 0, '-1', 'A', 'index'),
(2, 'Nosotros', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \\\'Content here, content here\\\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \\\'lorem ipsum\\\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br><br>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\\\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\\\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.', 'tags', 'dasdasd', 1, '-1', 'A', 'about-us'),
(4, 'Contacto', '<span style=\\\"font-weight: bold;\\\">Website:</span> http://www.baulphp<br><span style=\\\"font-weight: bold;\\\">Facebook:</span> https://www.facebook.com/baulphp<br><br>', 'Baulphp', 'Baulphp', 3, '-1', 'A', 'contact-us'),
(9, 'Categoria', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br>ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.<br>', 'category', 'description goes here', 1, '-1', 'A', 'category'),
(10, 'PHP', 'PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is now installed on more than 244 million websites and 2.1 million web servers Originally created by Rasmus Lerdorf in 1995, the reference implementation of PHP is now produced by The PHP Group. While PHP originally stood for Personal Home Page, it now stands for PHP: Hypertext Preprocessor, a recursive acronym<br><br>PHP code is interpreted by a web server with a PHP processor module, which generates the resulting web page: PHP commands can be embedded directly into an HTML source document rather than calling an external file to process data. It has also evolved to include a command-line interface capability and can be used in standalone graphical applications<br>', '', '', 1, '9', 'A', 'php'),
(11, 'Mysql', 'MySQL officially, but also called My Seque is (as of July 2013) the world\'s second most widely used open-source relational database management system (RDBMS). It is named after co-founder Michael Widenius\'s daughterThe SQL phrase stands for Structured Query Language<br><br>The default port of Mysql is 3306. The MySQL development project has made its source code available under the terms of the GNU General Public License, as well as under a variety of proprietary agreements. MySQL was owned and sponsored by a single for-profit firm, the Swedish company MySQL AB, now owned by Oracle Corporation<br><br>MySQL is a popular choice of database for use in web applications, and is a central component of the widely used LAMP open source web application software stack (and other \'AMP\' stacks). LAMP is an acronym for \"Linux, Apache, MySQL, Perl/PHP/Python.\" Free-software-open source projects that require a full-featured database management system often use MySQL.<br><br>', '', '', 2, '9', 'A', 'mysql'),
(12, 'Ajax', 'Ajax (an acronym for Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used instead. See AJAJ), and the requests do not need to be asynchronous.<br><br>Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and allow the user to interact with, the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.<br><br>', '', '', 2, '9', 'A', 'ajax');


CREATE TABLE `mp_tagline` (
  `id` int(11) NOT NULL,
  `tagline1` varchar(255) DEFAULT NULL,
  `tagline2` varchar(255) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;


INSERT INTO `mp_tagline` (`id`, `tagline1`, `tagline2`) VALUES
(1, 'www.www.baulphp.com', 'Crear pagina dinamica con php y mysql.');


ALTER TABLE `mp_pages`
  ADD PRIMARY KEY (`page_id`),
  ADD UNIQUE KEY `page_name` (`page_alias`);

ALTER TABLE `mp_tagline`
  ADD PRIMARY KEY (`id`);


ALTER TABLE `mp_pages`
  MODIFY `page_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=16;

ALTER TABLE `mp_tagline`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

2.- Configurar el sistema web (constants.php)

Para configurar el sistema tenemos que editar el fichero (libs/constants.php) de acuerdo a nuestras necesidades.

a) Conexión con el servidor. – Tenemos que brindar las credenciales de nuestro servidor como ser el usuario, la base de datos y la contraseña del servidor MySQL.

// database prefix if you use
define('DB_PREFIX', 'mp_');

define('DB_DRIVER', 'mysql');
define('DB_HOST', 'localhost');
define('DB_HOST_USERNAME', 'root');
define('DB_HOST_PASSWORD', '');
define('DB_DATABASE', 'php_web');

b) Configurar el servidor y la ruta del sistema. – Podemos configurar la ruta donde va a ser instalado el sistema, también puede ser una carpeta en el servidor, veamos el ejemplo.

// dont add a trailing / at the end
define('HTTP_SERVER', 'http://localhost');
// add slash / at the end
define('SITE_DIR', '/baulphp/simple-website/');

3.- Crear y configurar paginas

Para configurar el sistema, editar y/o crear nuevas paginas tenemos que acceder a la siguiente dirección web dentro del sistema (/manage-site/home.php). Por lo tanto, una vez dentro veremos una página similar a la siguiente captura de pantalla con tres opciones:

• Configurar portada.
• Lema del sitio web.
• Administrar y/o crear paginas para el sitio web.

4.- Creación de paginas

Las paginas en el sistema se pueden crear de dos maneras, que a continuación detallaremos.

a) Crear archivo. – Se crea una página, por ejemplo «mi-pagina.php» y luego subir al servidor. Además, agregar un registro en la base de datos con el mismo nombre.

b) Crear una página en el panel. – Aquí tiene que ser con el nombre de página único y luego el contenido se llamará a través de sus identificadores. como ser:

Pagina.php y obtener su contenido, título a través de (Pagina.php?id=15).

5.- Consejos y datos importantes acerca del proyecto.

Aquí detallaremos algunos datos importantes para el correcto funcionamiento del sistema.

La tabla «mp_pages» tiene un campo llamado «PAGE_NAME» y debe ser único para cada registro. Sin embargo, esto quiere decir que cada página debe tener un nombre de página diferente.

Para obtener un Facebook como plugin de caja que necesita para crear una aplicación de Facebook primero y luego se puede obtener el código de este enlace.

CONCLUSIÓN DEL SISTEMA

• Si no tenían una idea de cómo funciona un CMS. Ahora con este ejemplo les quedara más claro el funcionamiento.
• Usando el Front-End y Back-End podemos interactuar rápidamente con una página web dinámica.
• Con este ejemplo pueden empezar su proyecto web, implementando mas opciones de configuración en el sistema. Así, como también incrementar las opciones en la base de datos, usar librerías BootStrap para darle más profesionalismo a vuestro proyecto.

Espero que este proyecto le ayude a empezar con PHP y MySQL. Comparta sus comentarios/comentarios sobre este proyecto.

Sistema página web con PHP & MySQL: Descargar

1 archivo(s) 204.00 KB

Descargar