NetBeans Project Setup Tutorial

Requirements

• NetBeans 6.8 (PHP version) or greater
• A storage device to create the project on

Create a Project

A project is a web site for the purposes of this tutorial. It is where all files and folders reside that pertain to a web site. NetBeans then uses its functionality to keep track of those resources and assists you to manage the site as a whole.

1. Launch NetBeans
2. Click the "Create New Project" icon (top left corner of the screen) or from the File menu choose "New Project"
        
3. A new project dialog box will open showing PHP options (due to our using the PHP version of the tool)
4. Click the first option — PHP Application, click "Next"
   

5. Name and Specify the Project Location

   1. Type the name in the Project Name text box. Your domain name is suggested.
      
   2. Click the "Browse" button and navigate to where you want to store the folders and files that will make up the web site. If you have not already done so create a new folder on your hard drive or flash drive and name it your domain name. Once named, click to select it and then click "Open".
   3. The PHP Version and Default Encoding settings can remain as they are. Click "Next".

6. Set the Run Configuration

   The run configuration tells NetBeans what to do when a file is to be previewed or "run".
   

   1. Change the "Run As:" setting to "Remote Site (FTP, SFTP)"
   2. In the "Project URL" text box, remove the localhost portion of the url so that the URL reads only http:// followed by your domain name.

   3. Setting up the FTP Connection

      NetBeans has a built-in FTP client that can be configured to move files from the local computer to the remote web hosting server.
      

      1. Click the "Manage" button, the "Manage Remote Connections" dialog box opens
      2. Click the "Add" button (bottom left corner) if needed
      3. In the "Create New Connection" dialog box type your domain name as the connection name, leave the connection type as "FTP", click OK
      4. The new connection name appears in the list on the left and the settings are ready to be entered
      5. The host name is your own domain name
      6. The port should be left at the default setting
      7. Enter your own FTP username and password needed to connect to your web hosting provider
      8. The Initial Directory setting varies by host provider. Three common options, by host provider, are listed below:
         1. JustHost.com — leave the forward slash and add "www/" after it
         2. HostMonster.com — leave the forward slash and add "www/" after it
         3. Dreamhost.com — leave the forward slash and add your domain name (e.g. domainname.info) followed by a forward slash
      9. It is suggested that you also enable the "Passive Mode" checkbox
      10. Click "OK"
   4. You are returned to the "Run Configuration" dialog box
   5. Make sure your domain name appears in the Remote Connection setting (if that is what you named it)
   6. Delete anything that appears in the "Upload Directory" text box
   7. The "Upload Files" dialog box can be left as "On Run" (this will upload, using FTP, the file you want to preview when you "Run" the project) or can be changed to "Manually" (if you want to preview files only after manually uploading the files to the remote host).
   8. Click "Finish"
7. Your new project now appears in the Projects panel on the left side of the NetBeans window.
8. When expanded it contains two items — a "Source Files" folder (which should be empty) and an "Include Path" (which can be ignored)
9. The Source Files folder is where all the folders and files that are part of your web site will appear when NetBeans is running.

Create an XHTML-Transitional Template for the 230 class in NetBeans

1. Save this 230transitional.zip file to your desktop.
2. Unzip the file then move the transitional.shtml page to your web root folder leaving the name as it is.
3. Open NetBeans
4. Expand your NetBeans project "Source Files" folder so that you can see the transitional.shtml file in the Projects panel.
5. Right click on the file and choose "Save as Template" in the options menu.
6. In the dialog box that opens, click the "Other" folder and then click "OK".
7. Once the template is created you can delete the transitional.shtml file from the "Source Files" folder and the 230transitional folder from the desktop.

Create a New XHTML Web Page for the 230 Class

The directions below assume you have completed the Create an XHTML-Transitional Template steps above.

1. Click the "New File" icon or click "New File" from the File menu.
2. In the dialog box that opens, click the "Other" category folder
3. In the list (on the right) of files in the Other category you should see a file labeled "transitional.shtml".
4. Click it, then click the "Next" button.
5. Give the file a name and choose where in the project you want to save it.
6. Click "Finish"
7. You now have a new XHTML-Transitional web page to begin working with.

Create an XHTML-Transitional PHP Template for the 336 class in NetBeans

1. Save this transitional.zip file to your desktop.
2. Unzip the file then move the transitional.php page to your web root folder leaving the name as it is.
3. Open NetBeans
4. Expand your NetBeans project "Source Files" folder so that you can see the transitional.php file in the Projects panel.
5. Right click on the file and choose "Save as Template" in the options menu.
6. In the dialog box that opens, click the "PHP" folder and then click "OK".
7. Once the template is created you can delete the transitional.php file from the "Source Files" folder and the transitional folder from the desktop.

Create a New PHP Web Page for the 336 Class

The directions below assume you have completed the Create an XHTML-Transitional PHP Template steps above.

1. Click the "Create New File" icon or click "New File" from the File menu.
2. In the "New File" dialog box, make sure that the PHP category is selected, then choose "transitional.php", click "Next"
3. Name the file and choose where in the project you want to save it.
4. Click "Finish"
5. The new file is created and opens ready for editting.