DEV Community: Ana Elena Ulate Salas

🐾 Building a Secure Comment System in Laravel (with ID Authentication and Arithmetic CAPTCHA)

Ana Elena Ulate Salas — Mon, 13 Oct 2025 20:23:56 +0000

In this post, I’ll share how I developed a small but complete comment system in Laravel 12, focused on authentication, data validation, and basic security.
The project is called Pet Shop – Comment System, and it was a great opportunity to practice good coding practices and understand Laravel’s core features.

🎯 Project Goal

The main goal was to build a functional web application that simulates a login process, comment submission, and message confirmation — applying Laravel’s validation and security features.

I wanted to create something minimal yet complete, that demonstrates the foundations of modern Laravel development.

⚙️ Tech Stack

Laravel 12 (PHP 8.2+)
MySQL / MariaDB
Bootstrap 5 (via CDN)
Blade Templates
Artisan CLI

🔐 ID-Based Authentication

Instead of using an email address for login, I implemented authentication by ID number, a method often used in local systems.
This allowed me to create custom validation rules and flexible user management.

In the AuthController, the login logic works like this:

$request->validate([
    'cedula' => 'required|numeric',
    'password' => 'required|min:6'
]);

$user = User::where('cedula', $request->cedula)->first();

if ($user && Hash::check($request->password, $user->password)) {
    Auth::login($user);
    return redirect('/home');
} else {
    return back()->withErrors(['login' => 'Invalid credentials']);
}

This manual authentication flow helped me understand Laravel’s internals without relying on Breeze or Jetstream.

🧮 Arithmetic CAPTCHA

To prevent automated logins and spam, I implemented a simple arithmetic CAPTCHA that randomly generates addition, subtraction, or multiplication problems.

Here’s a simplified version of the logic:

$num1 = rand(0, 9);
$num2 = rand(0, 9);
$operator = ['+', '-', '*'][rand(0, 2)];

switch ($operator) {
    case '+':
        $result = $num1 + $num2;
        break;
    case '-':
        $result = $num1 - $num2;
        break;
    case '*':
        $result = $num1 * $num2;
        break;
}

session(['captcha_result' => $result]);

When the user submits the form, the validation checks if the provided answer matches the stored result:

if ($request->captcha != session('captcha_result')) {
    return back()->withErrors(['captcha' => 'Incorrect CAPTCHA result.']);
}

It’s a simple, effective solution that doesn’t require external APIs.

💬 Comment System

Once logged in, users can create comments about services such as baths, walks, or grooming.
Each comment requires a minimum length and must belong to one of the predefined services.

$request->validate([
    'content' => 'required|string|min:10',
    'service' => 'required|in:banos,paseos,cortes'
]);

Comment::create([
    'user_id' => Auth::id(),
    'service' => $request->service,
    'content' => $request->content,
]);

After submission, the user is redirected to a simple confirmation view:

<h2>Comment submitted successfully 🐾</h2>
<p>Your feedback is very important to us.</p>

📂 Project Structure

The system follows Laravel’s standard folder organization, keeping logic separated into controllers and models:

app/
├── Http/Controllers/
│   ├── AuthController.php
│   ├── CommentController.php
│   └── HomeController.php
└── Models/
    ├── Comment.php
    └── User.php
resources/views/
├── layouts/
├── comments/
└── auth/
routes/web.php

📚 Lessons Learned

Manual authentication – Building a login flow from scratch helps you understand Laravel’s core security features.
Validation rules – Laravel Validation makes it easy to express complex rules in a clean way.
Lightweight CAPTCHA – Sometimes a simple arithmetic CAPTCHA is all you need for basic security.
UX & Accessibility – Clear validation messages and confirmations improve usability.
Simplicity matters – Even small projects can teach big lessons about architecture and clean code.

🚀 Next Steps

Some planned improvements include:

Adding unit tests using Pest or PHPUnit
Building an admin dashboard for comment moderation
Integrating email notifications for confirmation messages

🐶 Conclusion

This project helped me strengthen my skills in authentication, validation, and secure data handling using Laravel.
It’s a reminder that even simple projects can teach a lot about quality, structure, and accessibility.

👉 You can check the full code here:
🔗 GitHub – Animal Shop (Pet Shop - Comment System)

Technical note: The code shown in this article is a simplified version of the real project, with minor variable name and syntax differences, but it preserves the exact same logic and functionality.

Bulletproof Email Buttons for Outlook: VML + Accessible HTML

Ana Elena Ulate Salas — Fri, 05 Sep 2025 02:41:34 +0000

TL;DR

Email buttons break because Outlook for Windows uses the Word rendering engine. The reliable fix is a hybrid button: VML for Outlook + semantic, accessible HTML/CSS for everyone else. Below you’ll find copy-paste-ready snippets (fixed width & auto width)

Why this matters

Outlook for Windows ignores most modern CSS and needs VML shapes to render buttons consistently.
Accessibility: readers using screen readers or high contrast modes need proper roles, labels, and focusable links.
Consistency: avoid “only the text is clickable” or blue/underlined text in some clients.

Anatomy of a bulletproof button

Wrapper table (role="presentation")for layout safety.
VML <v:roundrect> inside  for Outlook desktop.
*HTML * <a> fallback for all other clients with inline styles.
Accessibility: role="button", clear link text, aria-label (optional if text is descriptive), sufficient color contrast.
Touch target: at least** 44×44px** tappable area (line-height or height + padding).
Full clickability: display:inline-block (or block) and no nested conflicting links.

Paste-ready: Fixed-width button (easiest)

<!-- Button : BEGIN -->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
                   xmlns:w="urn:schemas-microsoft-com:office:word"
                   href="https://example.com"
                   style="height:48px;v-text-anchor:middle;width:240px;"
                   arcsize="12%"
                   fillcolor="#1268FB"
                   strokecolor="#1268FB">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;">
          Get started
        </center>
      </v:roundrect>
      <![endif]-->

      <!--[if !mso]><!-- -->
      <a href="https://example.com"
         target="_blank"
         role="button"
         style="background-color:#1268FB;border:1px solid #1268FB;border-radius:6px;
                color:#ffffff;display:inline-block;font-family:Arial,Helvetica,sans-serif;
                font-size:16px;font-weight:bold;line-height:48px;text-align:center;
                text-decoration:none;width:240px;-webkit-text-size-adjust:none;mso-hide:all;">
        Get started
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>
<!-- Button : END -->

Why it works:

Outlook uses the VML rectangle (full-area clickable).
Other clients render the <a> with a fixed width and 48px line-height (meets the 44px touch target).

Paste-ready: Auto-width (padding-based) button

<!-- Button (auto width) : BEGIN -->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
                   href="https://example.com"
                   style="height:48px;v-text-anchor:middle;width:200px;"
                   arcsize="12%"
                   fillcolor="#0B5BD3"
                   strokecolor="#0B5BD3">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;">
          View details
        </center>
      </v:roundrect>
      <![endif]-->

      <!--[if !mso]><!-- -->
      <a href="https://example.com"
         target="_blank"
         role="button"
         aria-label="View details"
         style="background-color:#0B5BD3;border:1px solid #0B5BD3;border-radius:6px;
                color:#ffffff;display:inline-block;font-family:Arial,Helvetica,sans-serif;
                font-size:16px;font-weight:bold;line-height:48px;text-align:center;
                text-decoration:none;padding:0 24px;-webkit-text-size-adjust:none;mso-hide:all;">
        View details
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>
<!-- Button (auto width) : END -->

Notes:

For Outlook (VML) we must still set a width; pick a reasonable default (e.g., 200–240px).
Non-Outlook clients will expand with padding: 0 24px.

Accessibility checklist (quick)

Color contrast ≥ 4.5:1 (text vs background).
Meaningful text: avoid “Click here”.
role="button" helps screen readers interpret intent.
Focus order: keep CTAs in a logical reading order.
No image-only buttons; if you must, add alt text and a real text link nearby.

Dark mode & link styling tips

Keep inline color:#ffffff; text-decoration:none; on the <a>.
Avoid relying on background images.
Test in Outlook dark mode (recent versions may invert colors; prefer solid brand colors with sufficient contrast).
To prevent iOS auto-link styling inside buttons, ensure your <a> has explicit color and `text-decoration:none.

Common pitfalls (and fixes)

Only text is clickable → Ensure the <a> is display:inline-block (or block) and not wrapped by another conflicting <a>.
Extra underlines in Gmail → Add text-decoration:none; inline on the <a>.
Font shrinks on mobile → Add -webkit-text-size-adjust:none; inline.
Rounded corners not showing in Outlook → That’s normal; Outlook uses the VML shape for rounding.