Serving HTML & Static Files

Your Node.js server is about to level up 💥

So far, it’s been plain text — now it’s time to serve real web pages with HTML, CSS, JavaScript, and images like a true web server 🌐🔥

👉 In this episode, you’ll learn how to:
🚀 Use the fs module to load and serve full pages
⚙️ Set proper Content-Type headers so browsers render perfectly
🛡️ Protect your app from path traversal attacks
💻 Build a lightweight static file server from scratch — the core of every modern web app

By the end, your Node server won’t just respond… it’ll serve experiences ⚡️

💡 Relevant Links

Previous TekCasts series:
- JavaScript for Beginners: https://tekcasts.com/play/javascript-for-beginners-what-is-javascript
- JavaScript in the Browser: https://tekcasts.com/play/javascript-in-the-browser-browser-runtime-environment

Libraries mentioned:
- Node.js fs: https://nodejs.org/api/fs.html
- Node.js path: https://nodejs.org/api/path.html
- Node.js http: https://nodejs.org/api/http.html

Sessions

Your Node.js server just got smarter 🧠⚡️

HTTP is stateless — but your apps don’t have to be.
In this episode, you’ll learn how to manage sessions to persist user data between requests, handle flash messages, and clean up session files automatically — all without a framework.

👉 In this episode, you’ll learn how to:

🔐 Understand the difference between cookies and sessions
🗂️ Build a simple, file-based SessionManager from scratch
💾 Store and retrieve session data safely on the server
⚙️ Add flash messages and automatic session cleanup
🧩 Use JavaScript Proxy objects to auto-save session data

By the end, your Node.js apps will remember — even when HTTP forgets 😉

💡 Relevant Links

Previous TekCasts series:
- JavaScript for Beginners: https://tekcasts.com/play/javascript-for-beginners-what-is-javascript
- JavaScript in the Browser: https://tekcasts.com/play/javascript-in-the-browser-browser-runtime-environment

Libraries & Docs mentioned:
- Node.js fs: https://nodejs.org/api/fs.html
- Node.js path: https://nodejs.org/api/path.html
- Node.js http: https://nodejs.org/api/http.html
- MDN Proxy: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Sessions

Learn how Laravel sessions work, why they matter, and how to choose and use the right session driver for your app.

📺 In this video you'll learn:
- What sessions are and how they let servers remember users across requests.
- The trade-offs between session storage drivers: file, cookie, database, redis, memcached, dynamodb, and the built-in array driver for testing.
- How to store, retrieve, and delete session data in Laravel (helpers, request-based APIs, and Blade usage).
- Flash data: how Laravel flashes temporary data (e.g., validation errors) and how to reflash/keep it.
- Session lifecycle operations: regenerate session ID, invalidate session, and best practices for production.
- Guidance on which driver to pick based on scalability, speed, persistence, and reliability.

✨ Who is this for?
Backend devs and full-stack devs building real Laravel apps who want practical guidance for session management and how session choice affects production behavior.

🔧 Useful links (mentioned in the video):
- Official Laravel Sessions docs — https://laravel.com/docs/12.x/session

📌 Key takeaways:
- Sessions store server-side data tied to a user via a cookie (session id).
- Driver choice matters — Redis is great for high-traffic apps; file or database may suffice for smaller apps.
- Use flash data for one-time messages (validation errors, success notices).
- Always regenerate/invalidate sessions appropriately on sensitive actions (login/logout) to help prevent fixation.

💥 About the Series:
Pragmatic Laravel focuses on building real applications with Laravel — emphasizing clarity, maintainability, and thoughtful design decisions instead of shortcuts or magic.

#Laravel #LaravelSessions #SessionManagement #PHP #WebDevelopment #BackendDevelopment #FullStackDev #TekCasts

Sessions / Redirects / Flash Messages

Now that users can submit reviews, let’s give them feedback! In this video, we bring in sessions, redirects, and flash messaging to guide the user experience after form submissions. ✨

Here’s what gets built in version v18-redirects-with-flash:


- Create a Session class as a singleton, with a handy global session() helper 🔐
- Initialize the session at app start and build a clean API like:
- session()->error('Missing required parameters.')->redirect('/');
- Implement error() and redirect() methods for smooth flow and messaging
- Fix the issue of persistent flash messages by introducing delete_transient_data() to clear session data after one request cycle
- Use Alpine.js to display flash messages dynamically with a snappy user experience ⚡
- Create a reusable _flash.view.php layout file for flash UI 💡
- Hook flash messages into the review flow by updating all dd('TODO') redirects in the PhotoController
- Bonus: Add current_route support in the Router to improve context-awareness in views 🧭


With sessions and flash messages in place, your app now speaks back to the user—clear, friendly, and fast. 🚀

Setting up Node & First Script

👉 Ready to start your journey with Node.js? In this video, we’ll get your environment set up and run your first server-side JavaScript script ⚡️. Say goodbye to browser-only JS and hello to full-stack possibilities!

💥 You’ll learn:

- How to install Node.js using nvm and verify your Node & npm versions.
- How to use the REPL (Read-Evaluate-Print Loop) to experiment interactively in Node.
- How to create and run your very first Node script (hello.js) that prints “Hello World!”.
- Why starting small with Node sets the stage for building servers, APIs, and dynamic apps in future videos.

⚡️ By the end, you’ll be able to confidently open your terminal, fire up Node, and see JavaScript running outside the browser!

👉 Perfect if you’re new to Node or want to finally get hands-on with server-side JavaScript.

💡 Relevant Links

Previous TekCasts series:
- JavaScript for Beginners: https://tekcasts.com/play/javascript-for-beginners-what-is-javascript
- JavaScript in the Browser: https://tekcasts.com/play/javascript-in-the-browser-browser-runtime-environment


Official Docs & Resources:
- Node.js Download & Docs: https://nodejs.org/en/download
- MDN JavaScript Guide: https://developer.mozilla.org/en-US/docs/Web/JavaScript

Setting Up The Environment

Before we dive deep into coding magic, we need a proper space to create it! In this episode, we’ll set up a clean and powerful JavaScript development environment so you can code confidently from the start. 🛠️✨

🚀 Here’s what we’ll cover:
• Introduce two popular code editors: Visual Studio Code and WebStorm. You can choose either one to follow along comfortably!
• I’ll be using WebStorm throughout this series for demonstrations.
• Set up your first project folder called js-beginners, and create two important files inside: index.html and script.js.
• Learn how to open your HTML file in the browser and access the browser developer tools to run and inspect your JavaScript code.
• Connect your external JavaScript file to your HTML page so your scripts come alive right inside the browser console!

🎥 Visual Walkthroughs:
• We’ll create the project structure together, step-by-step.
• Open the browser console and verify everything’s working.
• Highlight important parts of the editor and project setup to keep things clean and organized.

By the end of this episode, you’ll have your environment ready, your first files created, and the confidence to start coding with JavaScript! 🚀

Setting Up the Package Structure

In this video, we start coding! 🚀 We’ll create the necessary directory structure, initialize a Git repository, and write the initial code for our PHP package.

📌 What you’ll learn:
✅ Setting up the directory structure
✅ Initializing a Git repository
✅ Writing the first version of the package

💡 By the end of this video, you’ll have a solid foundation for your package!

🔔 Subscribe for more PHP tutorials!

🔗 Resources:
• GitHub: Getting Started

Setup a Development Environment

Before you start coding in PHP, you need the right tools! In this video, we’ll guide you through setting up a local development environment step by step. You’ll learn how to install PHP, set up a local server using XAMPP, MAMP, or the built-in PHP server, and explore containerized options like Docker. We’ll also discuss different code editors, from lightweight options like Sublime Text to powerful IDEs like PHPStorm and Visual Studio Code. By the end of this video, you’ll have everything configured and ready to start coding in PHP like a pro! 🚀

Simple Frontend Architecture

✨ Before you write thousands of lines of JavaScript, you need a solid foundation.

In this video, we’ll explore how to structure frontend applications so your code stays organized, modular, and maintainable — even as your project grows.

You’ll learn:
⚡ Why separation of concerns prevents “spaghetti JS”
📦 The power of modularization (breaking one big file into smaller, focused ones)
🛠 Principles like YAGNI, DRY, SRP, and Decoupling to guide clean architecture
🔄 How event-driven patterns make your apps more reactive and less fragile

To wrap things up, we’ll also walk through a quick example of creating a custom browser event — showing how components can communicate without tight coupling.

👨‍💻 This isn’t about writing tons of code — it’s about learning the architectural principles that make every line of code easier to understand and maintain.

Software

Now that the hardware’s wired up, it’s time to breathe life into the Smart Garage Door with code! 🚀

In this episode, we walk through the entire software that powers the project — written with clean, object-oriented design to keep things modular and maintainable 🧼👨‍💻.

We do a full code review and break down the key classes that make everything tick:

🔹 DoorSensor – encapsulates logic for detecting the door’s position
🔹 DoorButton – handles interactions with the door opener button
🔹 GarageDoor – the high-level controller that integrates with Apple Home using HomeSpan. It pulls it all together and exposes the device as a HomeKit accessory 🍏🏠

You’ll see how these components work together — and how dependency injection keeps things clean by passing DoorSensor and DoorButton instances right into the GarageDoor class constructor.

Whether you’re into embedded dev, smart home integrations, or just love clean code, this video dives into the software heart of the project. Let’s build smart! 💡💻

Static HTML to PHP

It’s time to bring our static site to life! In this video, we take the first step toward dynamic content by converting our plain HTML files into PHP. 🧩

Here’s what we’ll cover:
• Renaming .html files to .php ✅
• Updating the navigation links in two key places on each page for consistency 🔗

By the end of this video, our project will be PHP-ready and set up for future enhancements. This version is tagged in the repo as v2-php-files for easy reference. 🏷️

It’s a small change with big impact—let’s keep the momentum going! 🚀

Static Methods and Properties

Ever wondered when to use static properties and methods? 🤔 In this video, we break it all down! 🔍

We’ll start with a quick refresher on normal properties and methods, then dive into their static counterparts. 🏗️ What’s the difference? Static members belong to the class—shared across all instances—while normal members are instance-specific. 🌎➡️📦

But wait—static properties aren’t constants! ⚠️ We’ll explore constant properties using const and discuss real-world use cases where static methods shine. ✨

By the end, you’ll know exactly when and why to use static members in your PHP projects! 💡💻 Let’s go! 🎬

Submitting Reviews

It’s time to let users have their say! In this video, we implement the “Leave a Review” feature, allowing users to submit feedback on photos directly from the app. 💬

Here’s what’s packed into version v17-leave-review:


Add a POST route to handle form submissions 🛤️
Stub out the PhotoController::store method as our entry point for review handling
Wire up the review form and hook it into the controller 🧵
Introduce basic validation to catch missing fields or bad data 🧼
Add temporary dd('TODO') calls as placeholders for future redirects
Build the SQL insert logic using the photo_id from the query string 🔗
Validate that the photo exists before inserting a review to maintain data integrity 🔒
Refactor the Database class:
Rename exec() to raw() for clarity
Add a new execute() method to handle parameterized inserts and return the number of affected rows ⚙️


By the end of this video, users can leave their thoughts—and our app takes one more step toward being fully interactive. 🌟

Summary & Detailed Reports

In this video, we finish the Survey Results module by turning raw responses into useful insights.

You’ll build both high-level summaries and detailed response views, giving administrators the clarity they actually need — without overengineering or magic abstractions.

🛠️ What You’ll Build:

✅ Answer Summaries
- Aggregate survey answers
- Display meaningful summaries
- Prepare data for real-world reporting

✅ Detailed Responses
- Create detailed response views
- Display individual submissions clearly
- Balance performance with readability

This is where data becomes information — and where most “tutorial apps” stop short.

🧠 What You’ll Learn:
- How to structure summary logic cleanly
- When to aggregate vs. when to show raw data
- How to design result views that scale
- Practical Laravel patterns for reporting features

No dashboards for the sake of dashboards. Just pragmatic, maintainable Laravel.

🎥 Watch the full Pragmatic Laravel series exclusively on TekCasts

💥 About the Series:
Pragmatic Laravel focuses on building real applications with Laravel — emphasizing clarity, maintainability, and thoughtful design decisions instead of shortcuts or magic.

#Laravel #PragmaticLaravel #PHP #CleanCode #TekCasts

Survey App Mockup Review

Welcome to the Laravel Survey App series — where we’ll transform a static HTML survey page into a powerful, data-driven Laravel application! 🚀
In this first episode, we’ll review the project mockup, explore the data model, and outline the core features that will shape the app. You’ll get a clear vision for what we’re building — from admin dashboards and dynamic surveys to real-time results and data visualization.

🔍 In this video, we’ll cover:

Reviewing the static HTML survey design
Discussing the data model (surveys, sections, questions, responses)
Defining the key app features for admins and users
Linking to the GitHub repo for source code access
Tagging the initial version: git tag video_01


🧠 What You’ll Learn
You’ll see how to think like a Laravel developer from the start — modeling data relationships, planning for dynamic rendering, and setting up a roadmap for a real-world web app.

🛠️ Resources
🔗 Laravel Home Page → https://laravel.com/
💻 GitHub Repo → https://github.com/rcravens/laravel_survey_app


💥 About the Series:
Pragmatic Laravel focuses on building real applications with Laravel — emphasizing clarity, maintainability, and thoughtful design decisions instead of shortcuts or magic.

📺 Up Next
Next episode: Getting Started with Laravel — we’ll install Laravel and bring in our static HTML mockup to kick off the build!

Survey Delete

Deleting data is easy. Deleting data safely and intentionally is where real applications are made.

In this episode of Pragmatic Laravel, we implement survey deletion the right way — with confirmation, clear feedback, and reusable infrastructure that works across the entire app.

Rather than wiring up one-off JavaScript or brittle confirmation dialogs, we build a flexible alert system that supports:
- Server-side flash alerts
- Client-side JavaScript alerts
- Reusable confirmation dialogs via data-* attributes

What you’ll learn:
- How to wire up the destroy action using RESTful resource routes
- How to confirm destructive actions before they happen
- How to build a reusable alert/confirmation system in Laravel
- How PHP and JavaScript can work together cleanly
- How to improve UX without sacrificing maintainability

Topics covered:
- Resourceful routes and controllers
- Delete buttons with confirmation
- Flash messaging infrastructure
- JavaScript-powered confirmation dialogs
- data-confirm patterns for scalable UI behavior

This approach scales beyond surveys — you can reuse it anywhere you need confirmations, alerts, or user feedback across your Laravel application.

💥 About the Series:
Pragmatic Laravel focuses on building real applications with Laravel — emphasizing clarity, maintainability, and thoughtful design decisions instead of shortcuts or magic.

#Laravel #PragmaticLaravel #PHP #CleanCode #TekCasts