Creating a Dynamic HTML5 Web Application and Deploying on Remote Web Server Using Filezilla
In the previous two articles of this series, we explained how to set up Netbeans in a Linux desktop distribution as an IDE to develop web applications. We then proceeded to add two core components, jQuery and Bootstrap, in order to make your pages mobile-friendly and responsive.
- Install Netbeans and Java to Create a Basic HTML5 Application – Part 1
- Creating Mobile-Friendly and Responsive Web Application Using jQuery and Bootstrap – Part 2
As you will seldom deal with static content as a developer, we will now add dynamic functionality to the basic page that we set up in Part 2. To begin, let us list the prerequisites and address them before moving forward.
In order to test a dynamic application in our development machine before deploying it to a LAMP server, we will need to install some packages. Since we are using a Ubuntu 14.04 desktop to write this series, we assume that your user account has already been added to the sudoers file and granted the necessary permissions.
Installing Packages and Configuring Access to the DB Server
Please note that during the installation you may be prompted to enter a password for the MySQL root user. Make sure you choose a strong password and then continue.
Ubuntu and derivatives (also for other Debian-based distributions):
$ sudo aptitude update && sudo aptitude install apache2 php5 php5-common php5-myqsql mysql mysql-server filezilla
Fedora / CentOS / RHEL:
$ sudo yum update && sudo yum install httpd php php-common php-mysql mysql mysql-server filezilla
When the installation is complete, it is strongly recommended that you run
mysql_secure_installation to, not surprisingly, secure your database server. You will be prompted for the following information:
- Change the root password? [Y/n]. If you already set a password for the MySQL root user, you can skip this step.
- Remove anonymous users? [Y/n] y.
- Disallow root login remotely? [Y/n] y (Since this is your local development environment, you will not need to connect to your DB server remotely).
- Remove test database and access to it? [Y/n] y
- Reload privilege tables now? [Y/n] y.
Creating a sample Database and Loading test Data
To create a sample database and load some test data, log on to your DB server:
$ sudo mysql -u root -p
You will be be prompted to enter the password for the MySQL root user.
At the MySQL prompt, type
CREATE DATABASE tecmint_db;
and press Enter:
Now let’s create a table:
USE tecmint_db; CREATE TABLE articles_tbl( Id INT NOT NULL AUTO_INCREMENT, Title VARCHAR(100) NOT NULL, Author VARCHAR(40) NOT NULL, SubmissionDate TIMESTAMP DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY ( Id ) );
and populate it with sample data:
INSERT INTO articles_tbl (Title, Author) VALUES ('Installing Filezilla in CentOS 7', 'Gabriel Canepa'), ('How to set up a LAMP server in Debian', 'Dave Null'), ('Enabling EPEL repository in CentOS 6', 'John Doe');
Adding symbolic links in the Web Server directory
Since Netbeans, by default, stores projects in the current user’s home directory, you will need to add symbolic links that point to that location. For example,
$ sudo ln -s /home/gabriel/NetBeansProjects/TecmintTest/public_html /var/www/html/TecmintTest
will add a soft link called TecmintTest that points to /home/gabriel/NetBeansProjects/TecmintTest/public_html.
For that reason, when you point your browser to http://localhost/TecmintTest/, you will actually see the application that we set up in Part 2:
Setting up a remote FTP and Web server
Since you can easily set up a FTP and Web server with the instructions provided in Part 9 – Install and Configure Secure FTP and Web Server of the RHCSA series in Tecmint, we will not repeat them here. Please refer to that guide before proceeding further.