PHP CRUD Application – Portfolio Piece

I am super pleased to share that I have completed and uploaded my first (that I can share at least) personal portfolio piece written in PHP to a subdomain on my personal hosting server located at walk.openlamp.tech. Over the better part of the last year, I have developed a custom reporting dashboard written in PHP for my (current) employer, but do not share any of that work as it is proprietary and not owned by me. However, for a personal project, I can share far and wide. In this post, I provide a brief overview of my simple (in theory at least) application/site, built on the LAMP stack using the MVC (Model-View-Controller) design pattern in core PHP along with Bootstrap 4, jQuery, and MySQL.

Self-Promotion:

If you enjoy the content written here, by all means, share this blog and your favorite post(s) with others who may benefit from or like it as well. Since coffee is my favorite drink, you can even buy me one if you would like!


Although I will provide some context in this post, its main purpose is to bring awareness to my skill set in Back-end web development as I learn and grow in this area, with the goal to move into more of this type of role. Expect several follow-up posts containing more details on the application code, design, and implementation itself for this particular portfolio project located at walk.openlamp.tech.

I initially set out to create a CRUD site/application to store all the data from the many walks I take as I work towards a healthier weight and lifestyle.

Site and Project Navigation

The ‘Walking Stats Dashboard’ is accessible from the main navigation menu through the ‘Projects’ drop-down:

Bootsrap4 navbar dropdown
Using Bootstrap 4 navbar dropdown

Clicking ‘Walking Stats Dashboard’ from the drop-down, navigates to the ‘All Walks’ page, which displays a jQuery Datatable of information. Four important distinctions in this image are:

  • The ‘Log In’ choice in the navigation menu
  • Disabled ‘Add A Walk’ button
  • Disabled ‘Edit’ button for each row in the table
  • Disabled ‘Delete’ button for each row in the table

Bootsrap 4 Datatable with disabled CRUD buttons

(Note: The ‘Add A Walk’, ‘Edit’, and ‘Delete’ buttons are functional only if a user is authenticated and logged in.)

User Log In and Authentication

By clicking the Log In choice from the navigation menu, this simple log in screen is displayed, allowing a user to log in:

login screen
Login screen

Submitting invalid credentials prompts the user with a validation error:

php login validation errors
Displaying validation error for failed login attempt.

Reading and Displaying Data

Once logged in and redirected back to the ‘All Walks’ page, we can see that the ‘Add A Walk’, ‘Edit’, and ‘Delete’ buttons are now enabled. Additionally, the ‘Log In’ choice in the navigation menu has been changed to ‘Log Out’:

Bootstrap 4 Datatable and enabled buttons
Add A Walk, Edit, and Delete buttons are enabled since an authenticated user is logged in.

Create a row of data

In order to create a new row of data, we click the ‘Add A Walk’ button, and use this displayed form:

HTML form for creating a row
Using HTML forms to create a new Walk row of data in the table.

There is custom data validation checking on the back-end in PHP prior to any record being submitted to the MySQL database for processing. When values are unacceptable, the user is prompted with all applicable errors. In the example below, all of the input form fields were left blank, resulting in errors returned – and displayed – for each field upon submitting the form:

PHP validation and form errors in Bootstrap 4 Modal
Using PHP validation handling to provide meaningful error messages in Bootstrap 4 modal…

Once any validation errors are corrected, the data is added to the MySQL database and the user is redirected back to the ‘All Walks’ page.

Update a row of data

We can easily edit a particular row’s information by simply clicking that rows’ ‘Edit’ button, which displays the relevant data in a Bootstrap 4 Modal as shown in the following screen-shot:

Bootstrap4 Modal for editing
Using Bootstrap 4 Modals for editing a row’s data…

Again, there is data validation checking on the Back-end in PHP. However, any errors are propagated through jQuery using AJAX to the form on the front-end without the need for a page refresh:

Bootstrap4 modal and jQuery validation errors
Using jQuery ajax validation with Bootstrap 4 Modals for editing and validation errors.

Just as is with creating a new row of data, when any validation errors are corrected, the edited row of data is then updated in the MySQL database via clicking the ‘Update’ button. Upon success, the user is informed by a message in the Bootstrap 4 modal:

Display message for a successful update.

Delete a row of data

Initially, I set out to not include any Delete functionality into this portfolio piece. However, the more I thought about it, I came to conclude that I could not call this project a legit CRUD application without the ability to delete a row.

Clicking on any rows’ ‘Delete’ button displays this Bootstrap 4 modal popup, with the date of the row to be removed along with ‘Cancel’ and ‘Confirm Delete’ buttons:

Bootstrap 4 modal popup
Bootstrap 4 modal popup for delete information.
Clicking the ‘Confirm Delete’ button executes an AJAX script, deleting the row of data from the MySQL Database. A follow-up confirmation message is displayed as well once the Delete is completed:
Bootstrap 4 modal popup
Delete confirmation message for successful delete.

Filtering and pagination

Search filtering and pagination are provided out of the box by the jQuery Datatable plugin by means of the ‘Search’ text box located on the top right of the Datatable and the pagination choices on the bottom right. Both of these features are extremely useful and require very little jQuery code to activate:

search and pagination in jQuery Datatable plugin
Search filtering and pagination provided out of the box by jQuery Datatable plugin

Future Features

I’m planning to add more features to this project in the near future, including analytics on the actual data itself so be on the lookout for posts about those features as they are added.


I couldn’t be more pleased with the progress I have made in my continued learning of PHP Back-end Web Development. Being self-taught, I suffer a great deal from Impostor Syndrome. But, there is nothing like real-world experience and seeing the code actually come to life in application to remove those thoughts of self-doubt.

Like what you have read? See anything incorrect? Please comment below and thank you for reading!!!

A Call To Action!

Thank you for taking the time to read this post. I truly hope you discovered something interesting and enlightening. Please share your findings here, with someone else you know who would get the same value out of it as well.

Visit the Portfolio-Projects page to see blog post/technical writing I have completed for clients.



To receive email notifications (Never Spam) from this blog (“Digital Owl’s Prose”) for the latest blog posts as they are published, please subscribe (of your own volition) by clicking the β€˜Click To Subscribe!’ button in the sidebar on the homepage! (Feel free at any time to review the Digital Owl’s Prose Privacy Policy Page for any questions you may have about: email updates, opt-in, opt-out, contact forms, etc…)

Be sure and visit the “Best Of” page for a collection of my best blog posts.


Josh Otwell has a passion to study and grow as a SQL Developer and blogger. Other favorite activities find him with his nose buried in a good book, article, or the Linux command line. Among those, he shares a love of tabletop RPG games, reading fantasy novels, and spending time with his wife and two daughters.

Disclaimer: The examples presented in this post are hypothetical ideas of how to achieve similar types of results. They are not the utmost best solution(s). The majority, if not all, of the examples provided, are performed on a personal development/learning workstation-environment and should not be considered production quality or ready. Your particular goals and needs may vary. Use those practices that best benefit your needs and goals. Opinions are my own.

One thought on “PHP CRUD Application – Portfolio Piece

Hey thanks for commenting! Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.