Introduction
Hi and welcome to my blogs for the Dynamic Web Technologies (DWT) project in University. The main aim of these blogs is to follow the work I do within my project for this class and document it. My project website can be found here http://dwt.uniwebsitedevelopment.esy.es/.
My website for this project is hosted on my testing server as a subdomain which only supports http. Ideally I should be supporting https as I have a shop (even though its test payments) and I am using Basic Auth for my WP Rest API work. If this was a live website, https would be essential but as this is a university project, the testing development server will suffice.
The class is mainly about using jQuery or a JS framework and using it to consume JSON data. There are elements given for marks for setting up WordPress and a working shop within it which takes test payments. The aim for WP was to setup a child theme and make edits to the theme to make it look prettier than its current view. In my case, I have disabled the theme and used a plugin called Oxygen Builder which acts as a theme and plugin. My main reasons for this is that themes are messy and limited to the developers configuration where as I can have free reign over the design of my website using Oxygen. As the theme is disabled I do not have access to functions.php so for any changes made within this, the easiest way to make these is by using a plugin called Code Snippets. I find this to be cleaner than using functions.php, even if a theme is being used as its easier to name, comment and edit.
Part of this course is to show off jQuery/JS framework projects, either as lots of small different pieces of work or one big project. I have chosen lots of different pieces of work as my project. A final part of the course is to consume an API which allows CRUD (Create, Read, Update, Delete) functionality. The example given by the course leader is to use the WP REST API or any other of our choice.
The other tools other than WordPress I use are VS Code Editor for offline work via xampp, where I also have an offline WordPress install as well as random html files to test API work. Postman which I use for HTTP requests for testing the API’s. I’ve found this fundamental in understanding consuming JSON data as it tells me which methods and arguments I can use.
Main Features
jQuery – jQuery is a small fast JavaScript library which allows me to manipulate the dom within an HTML page. It works really well with Ajax and allows me to control event handling, animations and consume API data. I will be using mainly jQuery to append JSON API data and manipulate the HTML page to show the results of the data. It is possible to use vanilla JS for this but the jQuery library does it more efficiently. I will create a container on a webpage, attach an ID to the container and manipulate the ID with jQuery to spit out the data from the API that I want to be shown on the page.
JSON – JavaScript Object Notation is one of the languages that can be used to view API data. It has lots of other uses but for this project I will be using it for API data. It has taken me a while to understand or grasp what JSON actually is which I will go into further on in these sets of blogs. The types JSON data differs between different API’s but the layout is pretty much the same. You connect to a route which has methods and they contain arguements. Most of the API data will be in the form of a GET request to read the data but it can also CRUD data if required. It comes in varies formats but the most readable is normally “Pretty” format.
AJAX – Asynchronous JavaScript And XML. Ajax is not considered a language but a technique that uses a built in server request to show data without interfering with the display or behaviour on the page. Meaning it doesnt need to refresh the page for changes to be applied. This is a technique I dont quite grasp but now have a better understanding of it whilst doing this project.
WordPress – A very common CMS which is used as a pre-built frontend and backend system as a base to consume the above techniques and languages to show different types of data. Itself has a JSON Rest API which allows CRUD functionality which can be malipulated do act like a headerless CMS. There are lots of functionalities that are left unexplored such as CPT (Custom Post Types) where the Rest API can consume this data to create different types of data. The main use of this is to expand on its current form as a starting point.
