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:
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
(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:
Submitting invalid credentials prompts the user with a validation error:
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’:
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:
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:
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:
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:
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:
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:
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:
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”