Gain insights into building a modern, production-ready PHP app. Delve into CRUD operations, I/O security, routing, and more. Discover how to effectively use PHP and MySQL for database applications.

Build a CRUD Database App with PHP & MySQL-01.png

lamp.tar.gz

lamp

lamp-copy

lamp-new

Learning a programming language is one thing and using it to build something great is another. I've been teaching code newbies and aspiring developers for a long time and I see many of them struggling to put into practice their newly acquired skills. I've also noticed that many resources on the Internet are out-of-date, misleading, or don't provide real hands-on practice.

I've built this course to fix the issues above. You'll learn a better way to build a modern and production-ready PHP app connected to a database like a pro. The app, a CRUD one, will also have some more advanced features like I/O security, router, and more. 

At the end of this course, you'll be well equipped to build database apps with PHP.

Hands-on PHP & MySQL: Build a CRUD Application

**Frontend** or **client-side validation** is the process of alerting the user about issues in the form before they send it ahead to the server. This process provides a great user experience in our application because the user is immediately made aware of any problematic data. Such a  validation process helps save money and resources as well.

The validation is carried out with built-in HTML5 features as well as JavaScript for any customization purposes. These might include customizing the validation or performing complex validation procedures. So, we will focus on JavaScript form validations in this lesson.


# The form
First things first, let’s create a basic form.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Form validation: JS</title>
  </head>

  <body>
    <h1>Register</h1>
    <div>
      <h3>Rules</h3>
      <ul>
        <li id="unameRule1" class="unameRule">
          Username MUST be at least 2 characters long
        </li>
        <li id="unameRule2" class="unameRule">
          Username MUST NOT start with a number or a special character
        </li>
        <li id="pwdRule1" class="pwdRule">
          Password MUST be at least 8 characters long
        </li>
        <li id="pwdRule2" class="pwdRule">
          Password MUST contain at least 1 letter and 1 special charactor
        </li>
        <li id="pwdRule3" class="pwdRule">
          Password MUST not contain "password" string
        </li>
        <li id="emailRule1" class="emailRule">Email MUST be a valid email</li>
      </ul>
    </div>
    <form>
      <div>
        <label for="username">Username:</label>
        <input
          type="text"
          name="username"
          id="username"
          placeholder="Salimas"
          required
        />
      </div>
      <div>
        <label for="pwd">Password:</label>
        <input type="password" name="pwd" id="pwd" required />
      </div>
      <div>
        <label for="email">Email:</label>
        <input
          type="email"
          placeholder="sarah.masika@abelmbula.com"
          name="email"
          id="email"
          required
        />
      </div>
      <div>
        <input type="submit" value="Register" />
        <input type="reset" value="Reset" />
      </div>
    </form>    
  </body>
</html>


codemirror

Our form has three required input fields. For a better user experience, we’ve added the rules that must be followed by the user.

Now what we want to do is set the font color in such a way that it defaults to red when the current input —the one that has the focus— does not respect the given rules. We will also set the font in such a manner that it defaults to green when all the given rules are being followed.

>**Note:** To see the source code, we can click on the HTML tab. 

# The validation
The only validation or better constraint that we have in our form is built-in to HTML5: the `required` and `fields` type. However, we want the user to be able to see what’s wrong while they are filling the form.  This means that we’ll have to add more constraints to our form. To make this possible, we’ll need to handle the JavaScript `input` form event.

Let’s handle the username field.

First, we’ll select the field and its rules:
 

```
// DOM Elements
const unameElt = document.getElementById("username");
const unameRuleElt = document.getElementsByClassName("unameRule");
```
As a second step, we’ll add an event listener to the field:

```
unameElt.addEventListener("input", unameHandler);
```

And finally, we’ll implement the handler function:

```
function unameHandler(e) {
        for (let i = 0; i < unameRuleElt.length; i++) {
          unameRuleElt[i].style.color = "red";
        }
      }
```
As soon as the user enters the username field and starts typing, all of its corresponding rules will turn red. We can see that a loop was used here, because the `getElementsByClassName()`  JavaScript function returns an `HTMLCollection` (`object`).

The next thing to do is to handle each specific rule.

We’ll first select each rule:

```
function unameHandler(e) {
        const unameRule1Elt = document.getElementById("unameRule1");
        const unameRule2Elt = document.getElementById("unameRule2");
        // your loop here...
}
```
Then, we’ll store the input value in a variable:

```
const uname = e.target.value;
```
Remember the first rule for a username:
> “The username must be at least two characters long.”

Therefore, in our code, we can just check for the length of the `uname` variable and see whether it matches the rule, in which case we’ll change the font color to green:

```
if (uname.length >= 2) unameRule1Elt.style.color = "green";
```
The second rule states:
> “The username must not start with a number or a special character.”

For this rule, we’re going to build a  `regex`:
- The first letter of the regex must be a text: `^[a-z]+`.
- The regex can contain any string (digit, character, and so on): `.*`.
- The regex must be case insensitive: `i`.

Now let’s test the form.

```
function unameHandler(e) {
        const unameRule1Elt = document.getElementById("unameRule1");
        const unameRule2Elt = document.getElementById("unameRule2");

        const uname = e.target.value;
        const regex = /^[a-z]+.*/i;

        for (let i = 0; i < unameRuleElt.length; i++) {
          unameRuleElt[i].style.color = "red";
        }

        if (uname.length >= 2) unameRule1Elt.style.color = "green";
        if (regex.test(uname)) unameRule2Elt.style.color = "green";
      }
```

Let's now test the form.

Learn how to perform frontend validation with JavaScript.

Introduction

App Initialization

Create and Read Records

Refactor the Application

PHP Data Validation

Generate Reports

Update and Delete Records

PHP Router

Conclusion

Appendix

Front-end Validation