Tag: windows

Java – JSP File Uploader Tutorial

Java – JSP File Uploader Tutorial

JSP Image
jsp image

Java is one of my favorite programming languages due to its straightforward nature and plethora of built-in options. It has a robust tie with web related technologies such as HTML, CSS, and JavaScript and is made easy to leverage through its server Tomcat. In addition to all that, the community is strong and provides additional functionality through Java ARchives (JARs).

Now, if you have a web application and want dynamic pages and to leverage Java, you can use Java Server Pages (JSP) to create dynamic interfaces and data streams/access. This tutorial will be on how to upload a file through an HTML Form and JSP processing it to save to the server. To do this, you’ll need to use Tomcat with or without Apache/Nginx and Java 8 or up. For this example, I’ll be using Tomcat in standalone than coupling it with one of the other options. I’m programing on an Ubuntu based distribution so be aware of how your system interacts with Java and vise versa.


To Top


To Bottom

Setup

Tomcat Download

Let’s start off by getting Tomcat and setting it up. Go to Tomcat 9 Download page and look under Binary Distributions. There, click on either the 32bit or 64 bit “core” zip for Windows if on Windows or simply select the first “core” zip in the list if on Linux.
From there, unzip it to a location you want to work from. Mine is in my home directory under a folder called
“Portable_Apps”. I unzip it and called it “Tomcat-9”.

Tomcat Setup

Once unzipped and located where you want it, you will want to change its setting in order to use it fully. So, head into the directory and you will see many folders. Of them, there are four key folders to really pay attention to for this task. They are “bin”, “conf”, “lib”, and “webapps”. First, head to “conf” and edit the tomcat-users.xml file. In general, you’ll want to add a user that can access the “manager-gui” application that allows you to control what web applications are present. To do this, head to the bottom of the file where the commented out accounts are. Copy or type out an account that isn’t commented out.

Mine looks looks so:

<user username="admin" password="1234" roles="tomcat,manager-gui"/>

Please note that the password needs to be something that is actually strong and in addition to that you should try to name the user as something that can’t be guessed by others. Anyway, go ahead and save the file. From there, take a look at the server.xml file.

Find:

<Connector port="8080" protocol="HTTP/1.1"
                    connectionTimeout="20000"
                    redirectPort="8443"
                    address="0.0.0.0" />

You can change the port or add multiple Connector sections to have multiple ports accessible for multiple applications. Please note that I have added the “address” part and it is by default not present. The addition let’s my network connect to the application after I’ve allowed the port to be accessed through the firewall rules. In Linux, for me, this was as simple as making sure UFW was installed and up and then in a terminal doing “sudo ufw allow <portNumber>/tcp”.

OK, before we start Tomcat, we will want to get some additional libraries so that we can handle a file being sent to the JSP file. Go to these links and find the newest versions.

Links: FileUpload and Commons IO

Once downloaded, simply unzip them and ignore all but the JAR that has the name and version number. Move these JARs to the “lib” folder that I mentioned earlier. If you started Tomcat before this step, stop it and then start it so the libraries will load. If not, we are then ready to start Tomcat. To do this, open a command line or terminal and change directories to the “bin” folder.

From there, do:

// Linux
./catalina.sh start

// Windows
.\catalina.bat start

You might need to make the shell file executable and you can do this by running “chmod +x catalina.sh” from the folder in the terminal. If everything went well, you should see “Tomcat started.” as part of the output. You can now go to your webbrowser and type localhost:8080. If you see “If you’re seeing this, you’ve successfully installed Tomcat. Congratulations!” then we are set. To stop the server, simply replace “start” with “stop”. It’s time we managed our applications a bit.

Tomcat Manage Applications

On the page, to your right, you’ll see a button called “Manager App”. Click it and login using the user information you created earlier. Here, we’ll see all the applications that are present. This coincides with the “webapps” folder I mentioned. In manager, the paths math the folder names in the “webapps” folder. Only “ROOT” doesn’t follow the naming scheme since it is just a forward slash. “ROOT” also is the container for what you saw when you loaded the page. We’ll want to move its contents to another location. In the “webapps” folder add a new folder called “toor”. Then, in the manager page, find the “Deploy” section and type toor into the “Context Path” section. Click “Deploy” and the section will be added. The rest is up to you but I’d Undeploy the “docs” and “examples” section to clear up space. Note, the folders will be deleted if you do this.

OK, move the “ROOT” contents to the “toor” folder and then create two folders in the “ROOT” folder. They are “data” and “WEB-INF”. In the “WEB-INF” folder add a file called “web.xml”.

In it, add:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  version="4.0"
  metadata-complete="true">

  <display-name>File Uploader & Downloader</display-name>
  <description>
     File Uploader & Downloader
  </description>
</web-app>

OK, it’s time we write some code.

Code Breakdown

HTML

There are really only two parts to this section, a form and an iframe. The rest is just fluff that HTML pages need for proper setup. Simply create the structure in an “index.html” file and insert the below into the “body” tag.

This is the important code:

<h2>File Uploader</h2>
    <form action="Uploader.jsp" method="post" enctype="multipart/form-data" target="FormSubmitter">
        <input type="reset" value="Clear">
        <input type="submit" name="submit"  value="Upload" />
        <input type="file" name="file" multiple />
    </form>
<iframe name="FormSubmitter" frameborder="0" style="width:100%;height:35em"></iframe>

Let’s break this down and understand the parts. We have a form and its action is the JSP file, “Uploader.jsp”. The JSP file will process the submitted info to it and save it. The method used is “post” because what is being submitted is a file or files. The encode type is “multipart/form-data” because we will have to submit files and this setting is what is used to do so. From there, to avoid redirecting the page on submission, we send the process to the iframe.

In the form part, we have three input tags. The first simply clears the form data. The second submits the form or in this case the files. The third is the file selector. Reference the Full HTML section if you need to know the structure of the rest of the file. OK, we can now look at our JSP file, the good meaty Java code that glues this whole thing together.

JSP

Go ahead and create a JSP file called “Uploader.jsp”. In the beginning, there was imports. In this beginning, we need a few of them.
Let’s look at them:

<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.*"%>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.List" %>
<%@ page import="java.io.File" %>

If we look at the imports, we already can get an idea of the structure of the program or take guesses as to how it might be written. We will iterate through a list of the uploaded file(s) and probably use the File object to write the selected file to a location. The other imports handle the actual receiving of the data. Now that we have the needed imports, let’s get some initial stuff set up.

Here is the start of the code:

<%
    boolean isMultipart = ServletFileUpload.isMultipartContent(request);
    String dirPath = getServletContext().getRealPath("/").replace('\\', '/') +
                                                                      "data/";
    String itemName;
    File file;


    out.println(
        "<!DOCTYPE html>"
        + "<html><head>"
        + "<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />"
        + "<title>Results</title>"
        + "</head> <body>"
    );

Let’s break this down and understand the parts. The first is a boolean that we will check against to see if the data being sent is of multipart/form-data. The next part is the proper path to the “data” folder we created a while back. For Windows, I’m pretty sure you don’t need the “replace” part. We then setup a String called “itemName” that’ll be used to get the file name from the iterated data to then join with the “dirPath” so we can save it in the proper location. We also setup a File object we’ll use later. After all that, we print out the initial HTML syntax for return of the listed out “data” folder in HTML. We are well on our way to being able to upload files to our server. Let’s cover the middle meat of our JSP.

Here is the code:

    // Save file if present
    if (isMultipart) {
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        List list = null;

        try { list = upload.parseRequest(request);
        } catch (FileUploadException e) { out.println(e); }

        Iterator itr = list.iterator();
        while (itr.hasNext()) {
            FileItem item = (FileItem) itr.next();
            if (!item.isFormField()) {
                try {
                    itemName = item.getName();
                    file = new File(dirPath + itemName);
                    item.write(file);
                } catch (Exception e) { }
            }
        }
    } else {
        out.println("<h2>Not multi-part transmitted...</h2>");
    }

As was stated, we first check to see if the data being sent is of multipart/form-data. If not we just return a message saying it’s incorrectly submitted. If it’s correct, we do some initial setting up processes by creating a FileItemFactory object. This is an interface for creating FileItem instances which are themselves a representation of the file or formfield data which will be stored in memory or on disk as temporary files. Files are stored in memory if small and on disk if too large when checked against the default size or the one you specify (We aren’t specifying size for this guide.). We then use a high level API for processing file uploads by way of the ServletFileUpload object.

To determine files, we use the “parseRequest” method to get a list of files that are then sent to the previously created List object that is null. We do as previously mentioned and set up an Iterator object and traverse it with a while loop. In the while loop we create our FileItem which represents our listed file. We check to see if the FileItem instance represents a simple form field or an actual file. If it’s a file, we then get its name and then merge that name with the previously determined directory path. (Some of these settings can be setup in the “web.xml” we created but in this case we hard coded it.) This all is set in a new File object. We then use the FileItem object to write its data to the new File object we created and thus “upload” the file. Let’s finish the JSP code by returning a list of the files in the directory.

Here is the code:

    // List directory
    File curentDir = new File(dirPath);
    String[] list = curentDir.list();
    out.println("<ol>");
    for (int i=0; i<list.length; i++) {
            out.print("<li><a href='data/" + list[i] + "'/>" + list[i] + "</a></li>");
    }
    out.println("</ol>");
    out.println("</body></html>");
%>

This last part is a bit of an added bonus. We will list the directory containing our files. Let’s break it down. We first create a new File Object and reference the “data” directory path. We list it out in a newly created String array object which we will use below. But next, we print out the “ordered list” tag. We then loop through the String array and printout HTML that has the “list item” tag and an anchor” tag nested in it that references the path and name of the file. We then close out all tags and party like it’s 1941.

Conclusion

Discussion

At this point, you should add some CSS to get things styled the way you want it to. There isn’t too much I’m aware of that needs covering given the simplicity of the task. Upload file, process file, return data, and that’s it. You might want to look at other tasks like filling a database up with user input or make a directory traverser to view videos, images, or text files. It’s all up to you. If you know Java, then JSP is pretty much that but with web technologies.

For Next Time

For next time, one should look at limiting upload sizes. In this example and for my personal usage, I don’t want a limitation since I’m working with my own files. In production though, it is IMPERATIVE that files be limited in size and there needs to be checks so as the server’s disk space isn’t by accident consumed entirely by a person uploading a file. Other than that, I have no other thoughts on the matter.

Full Code

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>File Uploader</title>
</head>
<body>


<h2>File Uploader</h2>
    <form action="Uploader.jsp" method="post" enctype="multipart/form-data" target="FormSubmitter">
        <input type="reset" value="Clear">
        <input type="submit" name="submit"  value="Upload" />
        <input type="file" name="file" multiple />
    </form>

<iframe name="FormSubmitter" frameborder="0" style="width:100%;height:35em"></iframe>
</body>
</html>

JSP

<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.*"%>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.List" %>
<%@ page import="java.io.File" %>

<%
    boolean isMultipart = ServletFileUpload.isMultipartContent(request);
    String dirPath = getServletContext().getRealPath("/").replace('\\', '/') +
                                                                      "data/";
    String itemName;
    File file;


    out.println(
        "<!DOCTYPE html>"
        + "<html><head>"
        + "<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />"
        + "<title>Results</title>"
        + "</head> <body>"
    );

    // Save file if present
    if (isMultipart) {
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        List list = null;

        try { list = upload.parseRequest(request);
        } catch (FileUploadException e) { out.println(e); }

        Iterator itr = list.iterator();
        while (itr.hasNext()) {
            FileItem item = (FileItem) itr.next();
            if (!item.isFormField()) {
                try {
                    itemName = item.getName();
                    file = new File(dirPath + itemName);
                    item.write(file);
                } catch (Exception e) { }
            }
        }
    } else {
        out.println("<h2>Not multi-part transmitted...</h2>");
    }

    // List directory
    File curentDir = new File(dirPath);
    String[] list = curentDir.list();
    for (int i=0; i<list.length; i++) {
        String name = list[i].toLowerCase();
        if (name.contains(".png") || name.contains(".jpg")||
            name.contains(".gif") || name.contains(".jpeg")) {
                out.print("<div>" +
                          "<img src='data/" + list[i] + "'/></div>");
        } else {
            out.print("<a href='data/" + list[i] + "'/><div>" + list[i] + "</div></a>");
        }
    }

    out.println("</body></html>");
%>

Images

before file select
before file select
file select
file select
file uploaded
file uploaded
file playing
file playing

If you liked this article, please check out the others I have written. One I recommend is my reference cheat sheet for HTML, CSS, and JavaScript. You can use it while styling your JSP file uploader application.

Web Technologies
Web Technologies

Simple PHP7, SQLite3, and AJAX Tutorial

Simple PHP7, SQLite3, and AJAX Tutorial

Ajax and PHP
Ajax and PHP

Using PHP and AJAX can be somewhat confusing. But, the benefits are countless when it comes to doing web related projects. So, I wanted to do a simple tutorial/example of how to get things setup and how to do some basic insert and retrieval of data. For this project, I’m using PHP7, SQLite3, AJAX, Firefox, and Atom. You can use any browser with debugging options and any integrated development environment (IDE) or text editor you want. I choose SQLite3 as my database because it’s lightweight and good for applications that need a database.


To Top


To Bottom

Setup

Creating The Layout & Files

Ultimately, my file and directory layout looks like this:

├── ajaxNphp  // This is my working dir
       ├── index.html
       ├── process.php
       └── resources
           └── server.db

The ajaxNphp folder is the root folder of this project. In this folder, we have a resources folder that holds the database and can hold CSS and JavaScript files among other stuff. ***Note: For this project, JavaScript and CSS are inline to the files! I’m trying to keep this as simple as possible.*** For this part, I recommend using the terminal since it can be faster and we will use it for some other stuff during this project. So, KEEP IT UP! Anyway, My project is located in my Downloads folder under the ajaxNphp folder.
So, I open a terminal and type:

cd ~/Downloads/ajaxNphp/

The tilda (~) means your home folder and the rest is pretty self explanatory. I then do:

mkdir resources && touch index.html process.php

This creates the resources directory where our database will go; if successful, it will then create our PHP and HTML files that we will use for the project. The next part is for us to actually install the tools so we can setup our database and start writing code.

The Tools

I’m using an Ubuntu based operating system so I’ll show the commands you need to get PHP7, SQLite3, and Firefox installed.

sudo apt-get install sqlite3 php-sqlite3 php firefox

OK, now let’s just check that we have the proper versions installed.

PHP Check

// This will somewhat cleanup the version info on retrieval
    php -v | awk '{ print $1 $2 }' | head -n1
    // I get PHP7.0.25-0ubuntu0.16.04.1 which is PHP 7.0.25, so I'm set.

SQLite Check

sqlite -version
    // I get 2.8.17
    
    // If you do too, try:
    sqlite3 -version
    // If you get a return, then you are set for SQLite3.
    // I get a return value so am set.

Ok, so now we need to determine an environment to work with. I recommend Atom because it has a robust set of plugins and themes that make it more pleasant to work with. You’ll need to get it through their website if you wish to use the same thing; but, any text editor will suit this project.

Setup The Database

OK, so we now need to setup a database that we can query and insert to by using AJAX, PHP7, and SQLite3. I hope you’ve kept your terminal open as we will now change directory (cd) into the resources directory and launch SQLite3. So, here is what we do:

cd resources/ && sqlite3 server.db

We will then be presented with:

SQLite version <Your SQLite3 Version>
    Enter ".help" for usage hints.
    sqlite>

If you are seeing this, then let’s go ahead and create our database. I setup three columns for this project and they are title, date, and link. Recall, I’m doing a movies database so the first is for movie titles. The second is for when it was released, and the third is the cover image. So let’s create the table in our database.
Simply do:

CREATE TABLE Movies(title MAX, date varchar(10), link MAX);

If it was successful, you should see NO ERRORS and if you run :

.tables

you’ll get it returned. MAX means that the field can take the largest string possible. The varchar(10) means the field is limited to ten characters. There are other data types such as ints, but we will ignore them for now. Now, let’s insert some initial movie data by doing these below commands one at a time. Make sure there is an ending semi-colon for each!

// Date is in MM/DD/YYYY format
    
    INSERT INTO Movies VALUES('Alien', '05/25/1979', 'https://images-na.ssl-images-amazon.com/images/I/61ujvw4OXNL._SX342_.jpg');
    
    INSERT INTO Movies VALUES('Contact', '07/11/1997', 'http://www.filmsgraded.com/posters/01/1/8/8/84a.jpg');
    
    INSERT INTO Movies VALUES('Paul', '03/18/2011', 'https://upload.wikimedia.org/wikipedia/en/thumb/9/96/Paul_poster.jpg/215px-Paul_poster.jpg');
    
    // Check your work
    SELECT * FROM Movies;
    // You should see the data you entered returned.
    
    // If so, then simply exit.
    .exit

Excellent! The commands are pretty simple to understand. They even give a hint of what is going on. We use “INSERT INTO” to start the insert process. We reference our “Movies” table we created and then pass “VALUES” which match up with our title, date, link table layout. We end each command with a semi-colon. Next, we need a server to process PHP commands, interpret our form data, retrieve our data, etc.

Setup The Server

There are many servers out there one can use and there are some servers that are for testing. If you want to see some options, read my post on Quick Test Servers. For this project, I’m using PHP’s built in server used for testing since it will process PHP and our HTML files.
If you’ve kept the terminal up do this:

cd .. && php -S 127.0.0.1:1212

It’s pretty straightforward for what we are doing here. We moved back to the top directory of the project using cd .. since we only moved down one directory, We then use the “php” command with “-S” as a switch to use its server. We give “-S” an argument of “localhost” (127.0.0.1) and a port of 1212. The port needs to be bigger than 1024 since any port lower and equal to that requires sudo to use. It then waits to process requests. We can use ctrl + c to kill the server which can be helpful for when we want to use ctrl + l to clear the terminal screen of any text output and restart. When your project is complete, you can omit the change directory command and just do the PHP et all part. Add an “&” to the command so that the process is persistent even if the terminal closes. Now, we are truly ready to code!

HTML

Our Basic HTML Template

Let’s start off with a basic HTML template that we will add to shortly:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Test AJAX/PHP</title>
    
    <script type="text/javascript">
    </script>
    
    </head>
    <body>
    
    <h2>Save Movie Info</h2>
    <form action="process.php" method="post">
    <input type="text" title="Title" placeholder="Title" name="Title" value="">
    <input type="text" title="Date" placeholder="Date" name="Date" value="">
    <input type="text" title="Link" placeholder="Link" name="Link" value="">
    <input type="submit" name="saveInfo" value="Save">
    <button type="reset" value="Reset">Clear</button>
    </forn>
    
    
    <br/><br/>
    <h2>Search Movie Info</h2>
    <form>
    <input type="text" name="searchField"
    title="Search"
    placeholder="Search..."
    onkeyup="getData(this.value)"/>
    </form>
    <br/><br/>
    
    
    <div id="dynDataField"></div>
    </body>
    </html>

Let’s break this down. We have two forms with their own input fields. One form is used for saving new movie entries and the other searches the database and gets the data back. The form that saves new movie info has three fields and a submit button. The three fields correspond to the three columns in our database and Movies table. The submit action uses the forms submit action to send our process.php script POST data about the form for processing.

The search form has one input field and an onkeyup event that calls a function called “getData”. This function has a parameter passed to it of “this.value” which will take the query that one has typed in. AJAX will be used in this instance to get data from the server as we type in a character. We have a div tag with an ID of “dynDataField” that we will reference to insert the returned data from the server. This is our bare bones HTML. But, it is pretty useless. Clicking any of the buttons or typing a search does nothing. So, let’s create an AJAX script to get our already entered data!

AJAX

AJAX Search Script

At the heart of AJAX, there are 4 core steps for GET and 5 core steps for POST.

  1. Create an XMLHttpRequest object
  2. Setup an onreadystatechange function for the XMLHttpRequest object
  3. Open a connection with the XMLHttpRequest object
  4. With POST: Setup a setRequestHeader with an XMLHttpRequest object
  5. Send the data with an XMLHttpRequest object
    // Step 1: Create object
    var xhttp = new XMLHttpRequest();  // Create the xhttp object
    // Step 2: Setup an onreadystatechange function for the XMLHttpRequest object
    // This is actually run after send is done and the server spits out info.
    xhttp.onreadystatechange = function() {
        // Confirm we have a  successful connection. Then, receive the response info.
        // For PHP it is echo that sends it.
        // Loops seem to cause this to wait which means an array can be traversed
        // and the output could be written as a table, etc.
        if (this.readyState == 4 && this.status == 200) {
            // do something with the returned data
        }
    };
    // Step 3: Open connection
    // More or less, open a connection: @Params POST or GET, path to XML page or php script, set async t/f
    xhttp.open("GET", "process.php", true);
    // Step 4: Send the data and let server process it.
    //         After done processing it, onreadystatechange is triggered.
    xhttp.send();    // Start the process and send GET data
    
    
    //      For POST do and add these changes
    //  xhttp.open("POST", "process.php", true);
    // Used in POST to setup data types like JSON, XML, etc... MUST BE DONE AFTER OPEN
    // xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Example data structure for Sending POST with above RequestHeader. See that this mimics GET
    // xhttp.send("fname=Henry&lname=Ford");
    // xhttp.sebnd(formData);  // Can use a string variable with formatted data structure instead

The above is the process. Here is what we setup in our scripts tag that’s in the head tag:

function getData(query) {
    if (query == "") {
        document.getElementById("dynDataField").innerHTML = "<p></p>";
        return;
    } else {
        var xhttp = new XMLHttpRequest();  // Create the xhttp object
        var formData = "dbQuery=" + query; // Our query being setup for processing
        // This is actually run after open and send are done
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                updatePage(this);  // Send the returned data to further process
            }
        };
        xhttp.open("POST", "process.php", true);  // Open the connection
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(formData);    // Start the process
        
    }
}

function updatePage(returnData) {
    // Get the echoed data and insert to div of dynDataField
    document.getElementById("dynDataField").innerHTML = returnData.responseText;
}

OK, so we have two functions here. One is for getting the data and the other inserts the results into our div. Get data checks to see if the input field is empty and if so leaves things as they are. If there is data in the field, it is then inserted into a variable “formData” and tied in with “dbQuery=”. This is what PHP will look at and use to insert into a database query. We then setup a statechange listener to wait for the server to finish processing the search and we send the result to the other function.

After this setup part, we do the standard open process but use POST instead of GET. Then, we tell the server what kind of data this is. Recall, GET defines it for us but is limited and less secure while POST has more data formats and better security but we have to define it using the setrequestheader. We then send the data in its formatted string to the server for processing. This w3schools link has some more info about each part. In this instance, the PHP script transfers a string back to the requester. Note, we can transfer JSON, XML, and other data. But, a string or “responseText” is good for now.

Alright, all that’s left is to write our PHP script to process the search and our insert to table option.

PHP

Base PHP

We have three core parts for the PHP project. We want to determine which form sent the POST. We then call one of two functions. One function will search the database. The other function will insert to the database.
Here is the basic setup:

<?php
    
    // Retrieve data
    function searchDB($QUERY) {
    }
    
    // Save new entry
    function saveInfo($TITLE, $DATE, $INFOLINK) {
    }
    
    // Determin action
    if(isset($_POST['saveInfo'])) {
        saveInfo($_POST["Title"], $_POST["Date"], $_POST["Link"]);
    } elseif (isset($_POST['dbQuery'])) {
        searchDB($_POST['dbQuery']);
    } else {
        echo "<h2 style='width:100%;background-color:#ff0000;color:#ffffff;text-align:center;'>Error! Illegal Access Method!</h2>";
    }
    
    ?>

The part of interest here is the the determine action section. This is how we determine which function to call when a form is submitted or an AJAX call is made. If neither call the script, we drop an error and exit the script. We are simply checking if “saveInfo” or “dbQuery” are set. We then call the proper function and pass the data that is sent. Let’s now setup our search function.

Search Function

As you might have seen, we are calling our search function “searchDB” and we are passing the “dbQuery” value to it.
So let’s see how we connect to the database and return data:

try {
    $serverPDO = new SQLite3('resources/server.db');
    $query = "SELECT * FROM Movies WHERE title LIKE '%" . $QUERY . "%' OR " .
    "date LIKE '%" . $QUERY . "%' OR " .
    "link LIKE '%" . $QUERY . "%'";
    $result = $serverPDO->query($query);
    
    while ($row = $result->fetchArray()) {
        echo "<div style='float: left;margin-left: 1em; margin-right: 1em;'>" .
        "<a href=" . $row["link"] ." target='blank'>" .
        "<img style='width:8em; height:10em;' src='" . $row["link"] . "'/></a><br/>" .
        "Title: " . $row["title"] .
        "<br/>Date: " . $row["date"] . "</div>";
    }
    
    if ($result->fetchArray() == 0) {
        echo "<div style='float:left;width:100%; background-color:pink;color:#ffffff;text-align:center;'>Nothing Found...</div>";
    } else {
        echo "<div style='float:left;margin-top:2em;width:100%; background-color:lightgreen;color:#ffffff;text-align:center;'>Search Completed...</div>";
    }
} catch (Exception $e) {
    echo "<h2 style='width:100%; background-color:ff0000;color:#ffffff;text-align:center;'>Error!</h2><br/>" . $e;
}

Let’s break this down. In our “searchDB” function, we have a try catch block that checks any exception that might occur. Technically, we really should be more specific to what exceptions might occur but for now, this will suffice. We try to create an SQLite3 database object and give it a local path name of “resources/server.db”. This is set to the “serverPDO” variable. We then create a “query” variable of type string that comprises of an SQL command that very broadly makes the database look at he table and see if any field matches the query. Please note, this is a very in-efficient way to do this as it looks at each field and then sees if any part is like the query both in upper, lower, and mixed casing. If we were being efficient, we’d base our queries on the columns and have either multiple input fields for the search with a “submit” button or use other techniques to keep the searches quick. Since this is a small database, performance isn’t poor and we can get away with this in a general context. Take note that the VALUES section is ordered just like we ordered it when we created the table columns.

Anyway, we then execute the query and get the result set into the “result” variable. This is essentially a 2D array that comprises an array of result objects that then have an array of values for each object. This is why we use the while loop and access the “row” and then any values there in. We assign the values to a string formatted with HTML markup that is then echoed. After that, we echo whether we traversed an arrays by saying the search was or was not found.

As I understand it, the “onreadystatechange” is triggered after the script is finished. So, all echos are collected by “onreadystatechange” and once the script sends an exit code the “onreadystatechange” sends what was echoed to whatever you setup to collect and parse the data.

Insert Function

As you can tell, our insert function will take three paramets which are the title, date, and link.

if ($TITLE != "" && $DATE != "" && $INFOLINK != "") {
    try {
        $serverPDO = new SQLite3('resources/server.db');
        $command = "INSERT INTO Movies VALUES('" . $TITLE . "','" . $DATE . "','" . $INFOLINK . "')";
        $serverPDO->exec($command);
        
        echo "<h2 style='width:100%;background-color:#0000ff;color:#ffffff;text-align:center;'>Inserted to db...</h2><br/>" .
        "Title: " . $TITLE . "<br/>Date: " . $DATE . "<br/>Link: " . $INFOLINK;
    } catch (Exception $e) {
        echo "<h2 style='width:100%; background-color:ff0000;color:#ffffff;text-align:center;'>Error! Database Insert Failed...</h2><br/>" . $e;
    }
} else {
    echo "<h2 style='width:100%; background-color:ff0000;color:#ffffff;text-align:center;'>Error!</h2><br/>" .
    "<h3>A field is empty...</h3>" . $e;
}

Lets break this down. The first parts are pretty much the same as the search function with the exception of execute than query being the command. We also confirm that each field is filled and if not we generate an error HTML markup. We have a try catch block if they are filled. In the try section, we connect to the database. We create a “command” of type string that inserts the sent data from the form. We then echo a success or failure message. Take note that this insert process is not AJAX. Our page will redirect to the process.php file and the file will output HTML. I’m doing it this way to show you two ways of processing data and why AJAX is useful in that we aren’t being redirected. As you can see, it’s a much cleaner user experience to use AJAX and this PHP example shows why. You can change this to AJAX but I will leave that to you to figure out how.

Conclusion

Discussion

We are DONE! Pat yourself on the back and get a cold beer or favorite beverage. You now have new possibilities available to you since you understand the basic concepts. Let’s do a quick recap and talk about pitfalls and the next steps one should take.

We start off by creating two files and one sub-folder. We then install our needed programs and a development environment. From there, we create our database in the sub-folder and the table in the database. It is important to recall that one of the fields is limited to a string size of 10. Anyway, we then entered some initial data so we could work with it after creating our code. After launching our PHP server, we create our initial HTML markup and talk about what we will do next. Next, we create our AJAX search script that checks against empties and so on. Since the HTML is done, we move on to the PHP. In the PHP, we check what’s sending the request and determine the necessary action from the POST data. We create our two functions and their logic which get called after the initial checks. Once the script exits, our AJAX sees this and we end the data to a function that then inserts the data to a div tag OR we get an HTML output in the case of the data insert form. We then drink our beverage and think about pitfalls and the next project we will do based off the work done here.

Pitfalls

The first massive pitfall is that we aren’t sanitizing our data. NEVER do a production project without cleaning input data! I skipped it here because I’m lazy and this article would get longer than I want it to. It can be pretty easy to do though since there are libraries out there one can use. You should use a JavaScript library or your own scripts to check the input. I recommend checking through the server too but the JavaScript should get most issues.

The next pitfall is that we aren’t checking the length of the date field. This can be done through JavaScript too and PHP can cover the process too. So, this would be one of the next steps to do as well as the above input sanitation.

The next pitfall is that the search function implements a poor query structure. I mentioned this before but we are collating things to keep in mind so I mention it here too.

I’m sure there are some other things of note but these three are the biggies. Let’s look at what our next steps might be with such a project.

Next Steps

    Here are some next steps to consider.

  • New Projects:
      • Use cookies to create a login system and account control to then access or create users for the database.
      • Use cookies and AJAX to create a tracking system that’ll insert data to the database about links clicked.
      • Create a meta search engine.
      • Create a password manager..
  • Improve Current Project:
      • Sanitize input fields to avoid exploits and future errors.
      • Implement a date field length check.
      • Make a better search system.

Result Images

ajax and php result
ajax and php result
ajax and php result 2
ajax and php result 2
error handling
error handling
error handling 2
error handling 2
db insert
db insert
Code.gov

Code.gov

Picture of code dot gov slogan
Code.gov

I just wanted to make a shout out to Code.gov and the work they do. If one isn’t sure of who or what they are they are the US government’s team working to opensource the code used by the government’s agencies. This post comes on the heals of an email I received from their mailing list which reminded me of their transition to open source their code. I can’t think of any better way to express democracy than through opening up a sizable chunk of ones code base.

Here are 5 projects to keep an eye on


5 — Consumer Financial Protection Bureau’s Owning a Home Project

Hey, getting a home isn’t always easy but it can be with these tools provided by Consumer Financial Protection Bureau and its Owning a Home project. Everything is looked at from loan options, terminology, and costs.

Link: https://github.com/cfpb/owning-a-home

4 — National Archives and Records Administration’s File Analyzer Project

So, this project came to my attention because I am programming a CSV file viewer. I’m considering other functions for my application and this file analyzer just might be the thing to give it a cool boost. It says that each file test generates a table of results and that is useful given my CSV viewer dumps a csv file into a GUI table view.

Link: https://github.com/usnationalarchives/File-Analyzer

3 — Department of Agriculture’s RIBD Project

Ahh leisure…. Who doesn’t want to enjoy time off at beautiful federal lands, historic sites, museums, and/or other attractions?
According to their site, the “Recreation Information Database (RIDB) provides data resources to citizens, offering a single point of access to information about recreational opportunities nationwide.”

Link: https://usda.github.io/RIDB/

2 — NSA’s Unfetter Project

When not spying on us and the world, the NSA is helping us secure our data by giving tools that analyze gaps in our security posture.

Link: https://iadgov.github.io/unfetter/

1 — NASA’s 3D Resources

I am a big fan of space and even bigger fan of making beautiful Blender renders. NASA’s 3D model collection is huge and gives great assets to space fans and art lovers alike to play with.

Link: https://github.com/nasa/NASA-3D-Resources

ITDominator’s Youtube Channel

ITDominator’s Youtube Channel

Youtube Channel:

    Linked is my Youtube Channel. At the inception of this post and following my need to switch accounts in order to unify my brand, I am pretty much back to zero subscribers. Starting new yet with more knowledge is invigorating and terrifying all at the same time. I hope you dear follower will find something useful or amusing from my humble collection of videos. I cover a lot but like to focus on C, C++, Java, JavaFX, Bash, Python, Blender, Gaming, and a whole lot of other topics.

Redirect