Posts

Introduction

I'm Pawel , a student at The University of The West of Scotland and aspiring web and mobile app developer. Purpose of this blog is to document development process of the dynamic website which utilises popular Wordpress CMS (Content Management System) and some modern technologies such as React.js - JavaScript library for creating user interfaces. Wordpress will be used as a headless CMS serving data in JSON (JavsScript Object Notation) format then that data will be used by React library to build front-end (user interface) of the website. The main benefit of using Wordpress as the headless CMS is that any web technology can be used to build front-end part of the application. Therefore we can build modern Single Page Application (SPA) based on JavaScript language but leaving the adding, updating and removing content to Wordpress - one of the most popular Content Management Systems in the world.  

Wordpress Environment Setup

Image
Wordpress require server environment (Apache, Nginx), PHP and access to MySQL or MariaDB for storing information. There are couple options available how we can to start developing wordpress powered websites:  Buy dedicated hosting space ( https://wordpress.com/pricing/ ) Create own server based on Cloud Computing Services Amazon AWS  Light Sail or  Digital Ocean  droplet Install on own Apache, Nginx server Linux based computer or raspberry Pi device Install PHP development environment on local desktop laptop -  XAMPP Use popular containerized approach with  Docker I'm going to setup my development environment using Docker. This will remove the hassle of installation and configuration required software on local computer. Instead I will create Docker compose file which use separate image files for (wordpress, php myadmin, and mySQL) and allow for one command set-up of whole environment. All required image files can be found on  Docker Hub  - libra...

WP plugin development using jQuery | XML | OpenWeather API #1

Image
I'd like to display some weather information for the city of Glasgow. For this task I'm going to use Open Weater API  which can return current weather and forecast data in JSON or XML format. Then I'll use jQuery - JavaScript library for DOM manipulation and AJAX calls. How to write and use WordPress plugin To create plugin we need to go to the location root/wp-content/plugins/  and create new folder (preferred option) or just single php file with unique plugin name. The file need to have some information (plugin name, author, version, etc.) to be properly identified by WordPress as a plugin. This need to be added at te top of the file. Then plugin need to be activated from wp-admin dashboard, plugins menu Plugin uses add_shortcode() native WordPress method that allows to declare name and callback function which will be executed when given name will be added to the page or post(inside the square brackets). I created new Page called Glasgow Weather and calling this shortc...

WP plugin development using jQuery | XML | OpenWeather API #2

Image
jQuery ajax() for fetching weather XML data AJAX  (Asynchrous JavaScript and XML) is technology used to send and retrieve data  using browser's XMLHttpRequest object between browser and server without need of refreshing the page. jQuery  is a JavaScript library which simplifies some operation like DOM manipulation, event handling and AJAX calls which makes web development much pleasant experience. To obtain current weather information for Glasgow I used jQuery ajax() method. $.ajax(options) - loads remote page using http request, with couple of options like url: A string containing URL where the request is sent. I used q=Glasgow to get data for Glasgow, mode=xml to receive data in XML format and units=metric to have temperatures in Celcius instead of Kelvin units. dataType option is a string defining the type of data expected back from server which is xml success : callback function that is executed when the request is successful with returned data passed as a argume...

WP Plugin Development with React.js | JSON & COVID-19 Data API

Image
Creating simple React.js plugin and activating it After development a plugin which used jQuery library for handling API requests and user interface creation I decided to create another one. This time I'd like to use one of the most popular JavaScript library on the market - React.js. I took similar approach to previous plugin and created dedicated folder with functions.php file and imported required scripts from CDN  (Content delivery Network) using wp_enqueue_script() WordPress method. Had to import babel library to transpile  JSX (JavaScript XML) into normal JavaScript code which can be used by the browser. JSX allows to write HTML elements in JavaScript and place them in the DOM (Document Object Model) without the need of use createElement() and appendChild() methods - which I used with jQuery before. Shortcode API was used to inject my React content in the required place. For that I created function displayReactPage() with echo  and file_get_contents() methods...

E-Commerce made easy with WordPress & WooCommerce

Image
  E-commerce introduction E-commerce (electronic commerce) refers to transactions conducted via the World Wide Web. It may involve buying physical or digital products, ordering services or transfer funds. It is booming sector with revenue growing every year. Even  in uncertain times of covid-19 pandemic online shopping is thriving. Purchasing goods from the comfort of own homes and get them delivered even the same day is changing the way how people perceive shopping process. Old ways of buying from brick and mortar stores are about to extinct. Time is the crucial factor when it comes to sales and if shops or manufacturers wants to be competitive on the market starting an online selling platform should be easy and quick. WordPress designed as a blogging platform became now home to millions of businesses thanks to plethora of plugins which allow to set-up selling goods and services in a matter of hours. WooCommerce installation and Setup I will demonstrate how easy is to add the...