{"id":494,"date":"2025-04-23T12:55:37","date_gmt":"2025-04-23T12:55:37","guid":{"rendered":"http:\/\/localhost\/nnmakicom2026\/?p=494"},"modified":"2026-06-25T13:04:06","modified_gmt":"2026-06-25T13:04:06","slug":"todo-list-php-laravel-exercise","status":"publish","type":"post","link":"https:\/\/nnmaki.com\/index.php\/2025\/04\/23\/todo-list-php-laravel-exercise\/","title":{"rendered":"Todo-List &#8211; PHP \/ Laravel Exercise"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this practice project, goal was to explore the structure and functionality of the PHP Laravel framework. Laravel is a very powerful and popular platform, and there are many different add-ons and starter kits available for it. In addition, it offers useful tools for developing web applications, such as a built-in authentication system and the Blade templating engine for creating page layouts. Laravel is alsoheavily integrated to work with Tailwind CSS. Personally, I still find its usage to be a bit tricky, but of course its possible to use plain CSS alongside it.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Application<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">As an experiment, I created a simple browser-based Todo list application. The user can input a task through an input field, which is then saved to an SQL database. The user interface also allows marking a task as completed, and it becomes to crossed out. Additionally completed tasks can be removed from view entirely using a trash icon. The database contains a column called is_completed, which can have the values 0 (=incomplete), 1 (=complete and visible), or 2 (=complete and hidden). The controller script uses this value to determine which tasks to display on the page.<br><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">About<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Laravel is a relatively heavy tool and a bit overkill for building this type of simple application, but its still a good exercise in creating a basic CRUD-application. For me it took some time to fully realize the MVC model and especially how Laravels internal routing works. I also used Vite for the frontend, and integrating the stylesheets from the development version into the production build required some tweaking.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Notes<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Installing Laravel and setting up the development environment also took a bit of time. Im used to working with XAMPP or LAMP stacks in development, but when using Vite those alone are not enough, you also need to run Laravels own development server during development.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_1_1920x1080.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-id=\"497\" src=\"https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_1_1920x1080-1024x576.png\" alt=\"\" class=\"wp-image-497\" srcset=\"https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_1_1920x1080-1024x576.png 1024w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_1_1920x1080-300x169.png 300w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_1_1920x1080-768x432.png 768w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_1_1920x1080-1536x864.png 1536w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_1_1920x1080.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_2_1920x1080.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" data-id=\"498\" src=\"https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_2_1920x1080-1024x683.png\" alt=\"\" class=\"wp-image-498\" srcset=\"https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_2_1920x1080-1024x683.png 1024w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_2_1920x1080-300x200.png 300w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_2_1920x1080-768x512.png 768w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_2_1920x1080-1536x1024.png 1536w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_2_1920x1080.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_3_1920x1080.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" data-id=\"499\" src=\"https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_3_1920x1080-1024x683.png\" alt=\"\" class=\"wp-image-499\" srcset=\"https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_3_1920x1080-1024x683.png 1024w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_3_1920x1080-300x200.png 300w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_3_1920x1080-768x512.png 768w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_3_1920x1080-1536x1024.png 1536w, https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_3_1920x1080.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Deploying the project didn\u2019t work on my shared hosting provider, as Laravel is better suited for isolated environments or on a dedicated virtual server. Laravels routing does not function correctly if the project is installed in a subdirectory, it should always be placed in the root document directory. However I managed to publish it using a subdomain, which required some modifications to the server configuration to ensure incoming traffic was routed correctly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A bit challenging but very interesting exercise. Check online or Github-repo:<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this practice project, goal was to explore the structure and functionality of the PHP Laravel framework. Laravel is a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":496,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"mb":[],"uagb_featured_image_src":{"full":["https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_fi_1200x675.png",1200,675,false],"thumbnail":["https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_fi_1200x675-150x150.png",150,150,true],"medium":["https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_fi_1200x675-300x169.png",300,169,true],"medium_large":["https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_fi_1200x675-768x432.png",768,432,true],"large":["https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_fi_1200x675-1024x576.png",1024,576,true],"1536x1536":["https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_fi_1200x675.png",1200,675,false],"2048x2048":["https:\/\/nnmaki.com\/wp-content\/uploads\/2025\/04\/todolist_fi_1200x675.png",1200,675,false]},"uagb_author_info":{"display_name":"NikoNmaki","author_link":"https:\/\/nnmaki.com\/index.php\/author\/nnmakicom2026\/"},"uagb_comment_info":0,"uagb_excerpt":"In this practice project, goal was to explore the structure and functionality of the PHP Laravel framework. Laravel is a [&hellip;]","mfb_rest_fields":["title","uagb_featured_image_src","uagb_author_info","uagb_comment_info","uagb_excerpt"],"_links":{"self":[{"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/posts\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":2,"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/posts\/494\/revisions"}],"predecessor-version":[{"id":500,"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/posts\/494\/revisions\/500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/media\/496"}],"wp:attachment":[{"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/media?parent=494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/categories?post=494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nnmaki.com\/index.php\/wp-json\/wp\/v2\/tags?post=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}