Dynamic Web Technologies CW Blog

The NextJs application allows users to delete blog posts using the WordPress REST API by sending HTTP DELETE requests to the endpoint specified by the WordPress Developers website. Users are required to login before the delete button appears for a blog post. Upon clicking the delete button the user is provided visual feedback that the post has been deleted in the form of a red background for the post listing. The following screenshot shows the network tab found within the Chrome developer tools. The highlighted network request is for the deletion of a blog post with ID 168. The documentation for sending CRUD operations to a WordPress servers REST API can be found on the WordPress Developer website (WordPress, n.d.). The following code extract provides detail on how the request is sent, using the fetchJSON function. Much of the contents of this functional component have been omitted due to its length, with the most important part of the mechanism being shown below. Deleting posts using ...

This post aims to cover the steps required in order to update  a blog post using WordPress's built in REST API. The descriptions provided in this post are specific to the NextJs application created that utilises the REST API, treating WordPress as a headless CMS. Updating A Post Users can update a post by clicking the blue update button found on any post that they are the author of. In order to see or use the /blog/update/[id] page the user must be logged in as the author of the post. The page uses the getServerSideProps( ) function to get fetch the blog post and author data. If an attempt is made to retrieve a blog post that does not exist then the user is provided the /pages/404.tsx page that can be seen in one of the following screenshots. An example of one of these attempts is demonstrated within the following screenshot. If a blog with the ID provided in the url is found then the data is passed to the page and is then used to auto populate the text area fields with the existin...

The created NextJs application allows for the creation of a new blog post using the WordPress REST API by sending a HTTP POST request to  /wp/v2/posts  using the schema defined on the WordPress developer website(WordPress, n.d.). A custom built page was created that contains a form for creating blog posts. This page can only be accessed if the user has a currently authenticated session.  The Create functional component reads the state of the login session by accessing the AuthContext using the useContext hook. More can be read about the implementation of the persistence of an authenticated session by  accessing this blog entry. Creating The Posts Content Users can provide a blog with a title, an excerpt and can create HTML content for the post within the Post Content textarea shown in the following image. Each form input on this page uses the useForm form validation hook that was created for performing real time, reactiv...

WordPress provides a REST API that has good online documentation that includes information such as type definitions and route information(WordPress, n.d.). Fetching & Server Side Rendering As the data is stored on an external storage system, the server hosting the WordPress application, the page can not be directly served with the data if it is rendered on the client. By rendering the page on the client using Reacts default rendering technique the user will have to wait for the data to be fetched, parsed and then rendered.  A small subset of the post information is rendered for this page as the entire post is not required. To reduce the amount of fields returned from the REST API the ?_fields?= query is used, as shown below. To avoid this issue the data for the blog index page, the page that renders the posts and their excerpts, is rendered on the server. The data fetching is handled by the server meaning that when the client receives the page all of the data fetching has alrea...

This post will discuss how TypeScript types were created for WordPress objects for the development of the NextJs application. It should be noted that due to the length of each object not all objects will be described within this post. The most important two are the schema for an author and a blog post. The creation of types for the post will be covered within this entry.  Posts Schema WordPress conveniently provides detailed information about their REST API at https://developer.wordpress..org making the use of their API a straightforward process. TypeScript interfaces were created that describe a blog post based on the schema defined on the WordPress developer website. The following table is extracted from the WordPress website and provides the schema for a blog post. date string or null, datetime ( details ) The date the object was published, in the site's timezone. ...

This post will discuss how form validation was implemented within the NextJs application. In order to achieve this a custom hook was created named useForm. Three interfaces were created and are required to use the hook. Each form requires a validation schema, an initial state made consisting of subfields. This hook can be used for any standard inputs such as text inputs and text areas. useForm Hook In Full The following extract shows the hook in full. Form input values entered by the user are checked against a regular expression when new characters are typed. If the text does pass the RegExp.test( ) method then the error contained within the validation schema for the given input is used in the form state. This change in state updates the user interface to display the error to the user notifying them of a problem. Example Usage Using the hook is an easy process. Before using the fields for the form inputs must be defined and given a validation schema. In the following image the form wil...