LAB-5573: Leveraging JavaScript Toolkits for End-to-End Connectivity in Web Applications

Exercise 0: Configuring the Lab Environment (10 minutes)

 

Before you begin the exercises, perform the following steps.

1. Open sample projects in the NetBeans IDE
2. Make sure the MySQL database server is running
3. Set the root password for the MySQL database server
4. Establish a database connection from the IDE

Open sample projects in the NetBeans IDE

1. Start NetBeans IDE.
2. Open all of the projects contained in the the lab's exercises and solutions directories.
   
   To do so, choose File > Open Project from the IDE's main menu. Then, in the Open Project wizard, navigate to the location of the exercises directory on your computer.
   
   You can highlight all of the projects so that the IDE opens all of them at once.
   
   For example:
   
3. Perform the same step to open all projects in the solutions directory:
   

At the start of each exercise, you will be prompted to set the provided project as the IDE's main project. This will enable you to freely use the buttons listed in the IDE's Run and Debug toolbars.

The projects that are appended with Solution are the completed projects for each exercise, and are provided simply for your convenience. Note that the solution provided for Exercise 1 requires access to a database named composer, which is what you create in Step 2: Porting Data to a MySQL Database.

Make sure the MySQL database server is running

You will require a working connection to your MySQL database server from the NetBeans IDE for Exercise 1, steps 2 and 3. To prepare a working connection to your MySQL database server, you need to make sure the server is running, and then connect to it from the IDE's Services window.

Note: While it is possible to configure MySQL DBMS administration commands (i.e., starting and stopping the server) directly from the IDE, if you are installing MySQL for the first time and are unfamiliar with setup and configuration, it is recommended that you start the database server manually for this exercise to save time.

For more information on configuring the MySQL database in NetBeans IDE, see Connecting to a MySQL Database.

To start the MySQL database server manually, do the following:

*nix-like machines:

1. Open a command-line prompt and navigate to the bin directory within your MySQL installation.
   
   For example, if you have installed the MySQL database server at /usr/local/mysql, enter the following at your shell> prompt:

   shell> cd /usr/local/mysql/bin

2. Run the mysqld_safe script:

   shell> sudo ./mysqld_safe

   You will see output similar to the following:

   090322 20:54:08 mysqld_safe Starting mysqld daemon with databases from /usr/local/mysql/var

Windows:

The MySQL Windows installer enables you to install the database server as a Windows service, whereby MySQL starts and stops automatically when Windows starts and stops.

1. Open a Windows console window (from the Start menu, choose Run and type cmd in the text field). A command line window displays.
2. Enter this command (The path indicated assumes you have installed version 5.1 to the default install location):

   C:\> "C:\Program Files\MySQL\MySQL Server 5.1\bin\mysqld"

Windows Troubleshooting:

• You can determine the current state of the MySQL service by using the sc command. In a console window, type sc query MySQL and press Enter. The sc command allows you to query the state of services. The output should indicate that the current state of the MySQL service is RUNNING:
  
• For more information on troubleshooting, see: Troubleshooting a MySQL Installation Under Windows.

Set the root password for the MySQL database server

If you have a fresh install of the MySQL database server, do not leave the root password set to the default null password. The data source used in the relevant exercise may return a java.lang.NullPointerException when the application uses it to access the database.

The exercise uses "nbuser" as the root password.

*nix-like machines:

1. Set a password for the database "root" user, as follows (the password used for this lab is: nbuser):

   shell> /usr/local/mysql/bin/mysqladmin -u root password nbuser

Windows:

1. Set a password for the database "root" user, as follows (the password used for this lab is: nbuser):
   
   Get to the MySQL installation's bin directory:

   C:\> cd "C:\Program Files\MySQL\MySQL Server 5.1\bin"

   Enter the following command:

   C:\Program Files\MySQL\MySQL Server 5.1\bin> mysqladmin -u root -p password nbuser

   At the prompt, enter whatever password was previously set for the server's "root" user.

Establish a database connection from the IDE

Once the database server is running, establish a connection to it from the IDE:

1. Press Ctrl-5 (⌘-5 on Mac) to open the Services window.
2. Right-click the Databases node and choose Register MySQL Server.
3. In the MySQL Server Properties window, under the Basic Properties tab enter the following details:
   • Server Host Name: localhost
   • Server Port Number: 3306
   • Administrator User Name: root
   • Administrator Password: nbuser
   
4. Click OK. A MySQL database server node displays under the Databases node in the Services window.
5. Now, right-click the MySQL database server node and choose Connect. The IDE connects to the database server, and lists any database instances maintained by the server (information_schema, mysql, and test are default databases).
   

Notes:

• The toolkits applied in this lab are taken from the bundled resources of the NetBeans IDE, Milestone 2. Shortly after Milestone 3 was released, support for JavaScript libraries was removed from the distribution altogether. This lab can still be completed using a more recent build (i.e., NetBeans 6.7 Beta), however you would need to add toolkit resources to the exercise projects manually.
• As toolkits are continuously being updated, there is a constant lag between the version of toolkits bundled with the IDE, and the versions of the most up-to-date releases.
  
  The following table lists the current (March 9, 2009) JavaScript toolkit versions, vis-a-vis the versions bundled with NetBeans 6.7 M2.

  	NetBeans IDE M2	Current Release (3/9/2009)
  Dojo	1.2.1	1.2.3
  jQuery	1.2.6	1.3.2
  YahooUI	2.6.0	2.7.0
  Script.aculo.us	1.8.1	1.8.2
  Prototype	1.6.0.3	1.6.0.3

• It is possible to use NetBeans 6.5 for all three exercises. However, for Exercises 2 and 3, this would require getting the updated toolkits from the live sites, and either adding them to the IDE as new libraries, or adding them to the projects manually.
  
  The Dojo Tree widget, used in Exercise 2, requires the the Dojo Core and Dijit libraries. NetBeans 6.5 does not include Dijit, but version 6.7 does.
  
  The YUI DataTable, used in Exercise 3, underwent significant changes for version 2.6.0. NetBeans 6.5 bundles version 2.5.2. The example exercise provided in NetBeans' Applying JavaScript Toolkits to Web Projects demonstrates how to add a downloaded version as a new library to the IDE.

 

Back to top
Next exercise