Connecting to a MYSQL Database Part 3

The Finished Page

In this part we shall be creating a index.php file, which will be the main interface between the front-end and back-end of our application. So lets get started.

index.php

Lets start by creating a copy of our template.html file and saving it as index.php. I have also changed the title to <title>PHP MySQL Client Database</title>

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width initial-scale=1.0">
     <meta name="Author" content="David Boland">
     <title>PHP MySQL Client Database</title>
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
     <link rel="stylesheet" href="/css/style.css">
</head>
<body>
     <div class="w3-container container">
     </div>
</body>
</html>

Now that we have a basic structure, let’s start padding it out. We will begin by adding a h1 heading. To do that; in between the opening and closing container div add the following

<h1 class="title">Client Database</h1> 

If you remember from part 2 the class=”title” will center our heading. Below that add the following:

<h2>Add Clients</h2>

Now we are going to create the form that will allow us to enter data into our database. Below the <h2>Add Clients</h2> Heading add the following code:-

<form class="w3-container" action="insert.php" method="post">
</form>

This code creates the container for our form. The class=”w3-container” just adds some padding, action=”insert.php” tells the form to send its contents to the file insert.php for processing, and method=”post” tell the form to transfer the data from the client(you) to server(your web host) in HTTP protocol. There are two methods of sending data from a client to a server GET and POST. GET carries request parameter appended in URL string, whilst POST carries the request parameter in the message body, which makes it a more secure way of transferring data from client to server. If you are interested to can see a comparison of the two methods here HTTP Methods

Between the form tags add the following code:-

<fieldset>
  <ladel>Business Name: </label><input class="w3-input w3-border" type="text" id="business" name="business" placeholder="Insert Your Business Name" required/>
  <br>
  <ladel>First Name: </label><input class="w3-input w3-border" type="text" id="firstName" name="firstName" placeholder="Insert Your First Name" required/>
  <br>
  <ladel>Last Name: </label><input class="w3-input w3-border" type="text" id="lastName" name="lastName" placeholder="Insert Your Last Name" required/>
  <br>
  <ladel>Email: </label><input class="w3-input w3-border" type="text" id="email" name="email" placeholder="Insert Your Email" required/>
  <br>
  <ladel>Telephone: </label><input class="w3-input w3-border" type="text" id="telephone" name="telephone" placeholder="Insert Your Telephone No" required/>
  <br>
  <button class="w3-btn w3-teal client_btn" type="submit" id="submit">Submit</button>
</fieldset>

What’s happening. Well we have created a series of labels and inputs to gather the information that we want. The labels themselves are self explanatory, so we will just quickly go over the inputs.

We have given them a class of w3-input and w3-border.

The type=”text” defines a one-line text input field.

The id=”business” etc is not actually needed but is useful for targeting by CSS or JavaScript. Just remember the value of each id must be unique within the HTML document.

Next we have the name attribute. This is an important attribute because without it the data of that input field will not be sent.

The placeholder attribute is optional but is very useful in that it provides a hint that describes the expected value of an input field. The hint is displayed in the input field before the user enters a value.

The required attribute is a Boolean attribute that specifies an input field must be filled out before submitting the form, and is a initial form of validation.

The submit button sends the form to th form handler in this case insert.php

Finally the whole lot is wrapped in between the <fieldset></fieldset> tags which groups together elements and puts a box around them.

The page so far looks like this:-

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width initial-scale=1.0">
     <meta name="Author" content="David Boland">
     <title>PHP MySQL Client Database</title>
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
     <link rel="stylesheet" href="/css/style.css">
</head>

<body>
     <div class="w3-container container">
       <h1 class="title">Client Database</h1>
       <h2>Add Clients</h2>

       <form class="w3-container" action="insert.php" method="post">
         <fieldset>
           <ladel>Business Name: </label><input class="w3-input w3-border" type="text" id="business" name="business" placeholder="Insert Your Business Name" required/>
           <br>
           <ladel>First Name: </label><input class="w3-input w3-border" type="text" id="firstName" name="firstName" placeholder="Insert Your First Name" required/>
            <br>
            <ladel>Last Name: </label><input class="w3-input w3-border" type="text" id="lastName" name="lastName" placeholder="Insert Your Last Name" required/>
           <br>
           <ladel>Email: </label><input class="w3-input w3-border" type="text" id="email" name="email" placeholder="Insert Your Email" required/>
           <br>
           <ladel>Telephone: </label><input class="w3-input w3-border" type="text" id="telephone" name="telephone" placeholder="Insert Your Telephone No" required/>
           <br>
           <button class="w3-btn w3-teal client_btn" type="submit" id="submit">Submit</button>
         </fieldset>
       </form>
     </div>
</body>
</html>

Now we are going to add the buttons that show and hide our database and allow us to delete data. In order to do this we will write the HTML & CSS to display the code and also a small amount of PHP and JavaScript to perform the necessary show and hide actions. Let’s get started by inserting the following code immediately below the closing </form> tag

<button onclick="functShow()" class="w3-button w3-teal client_btn">Show/Hide All Clients</button>

<div id="id02" class="w3-hide" style="margin-bottom: 20px;">
  <header class=" w3-container w3-teal">
    <h2>All Clients</h2>
  </header>
    <?php include 'select.php'; ?>
  <footer class=" w3-container w3-teal">
    <p>Client Database</p>
  </footer>
</div>

So the code above begins by creating a button, which when clicked performs the still to be written functShow() JavaScript function. This function will ultimately show or hide the entire div with the id=”id02″.

But before writing the JavaScript, we will write the almost identical code to create the button to perform the still to be written functDel() function.

<button onclick="functDel()" class="w3-button w3-teal client_btn">Show/Hide Delete Clients</button>

<div id="id04" class="w3-hide" style="margin-bottom: 20px;">
  <header class=" w3-container w3-teal">
    <h2>Delete Clients</h2>
  </header>
    <?php include 'selectOne.php'; ?>
  <footer class=" w3-container w3-teal">
    <p>Client Database</p>
  </footer>
</div>

Okay, so the main difference is that we are calling the functDel() function, changing the appropriate headings, and most importantly including the ‘selectOne.php’ file instead of the ‘select.php’ file. These files are yet to be written, but when they are, the ‘select.php’ file will display all the clients, whilst the ‘selectOne.php’ file will allow the user to select one client at a time for deletion.

Now for the JavaScript functions. The two functions are almost identical, with the exception of the function name and the id that they are targeting. So let’s get them written. Insert the following between the closing container </div> and the closing </body> tags:-

<script>
 function functShow(){
  var x = document.getElementById("id02");
   if (x.className.indexOf("w3-show") == -1){
    x.className += " w3-show";
   } else {
     x.className = x.className.replace(" w3-show", "");
   }
  }

  function functDel(){
  var x = document.getElementById("id04");
   if (x.className.indexOf("w3-show") == -1){
    x.className += " w3-show";
   } else {
     x.className = x.className.replace(" w3-show", "");
   }
  }
</script>

As you can see, this code targets the relevant Id’s and checks to see if they have a class of “w3-show”. If the value returns false “== -1”, the “w3-show” class is added, else it is removed.

If you click these button now, the code should be executed, but all you will see is the relevant header and footer, why? because we have not written the select or selectOne php code yet. That will follow in parts 4 and 6, and in part 5 we will create our insert.php file and finally enter some data into our database. It should be fun.


« | »