Web development Software

NetBeans

Configuration

I.

Web development with NetBeans

To get your work organized it is recommended to create a project for each chapter of the course (as soon as web server will be used). Projects are always associated to an local(internal) or remote webserver. An alternative is a PHP script command line. If you dont have a webserver you can use the Favorites View. This allows you to browse to a folder of your computer and to open/create files.

II.
A.

NetBeans GUI overview

Essential functions:
Most features from simple text editors are available: open, save, find, replace Syntax highlighting Autocomplete for HTML, CSS, JavaScript, PHP, (CTRL+SPACE) Fast code formatting/indentation (CTRL+SHIFT+F or Menu: Source Format) Jump to Last edit location (CTRL-Q) Displays errors and warnings for source code Integrated debugger (breakpoint, watch, ) Fast view of the result in a browser (Right click editor or file View) Side-by-Side view (Drag a code tab to the right until a large vertical box appears) Local history with modification listing, version comparison and revert to function (Menu: Team Local history Show local history) Palette with wizard for standard HTML Tags (Menu: Window Palette) CSS style builder and preview (Menu: Window Other CSS) DOM Navigator (HTML & CSS) Database explorer Plugins to extend the interface

SHMMA

LTAM

1/4

Web development Software

NetBeans

Configuration

Figure 1: NetBeans Graphical User Interface

SHMMA

LTAM

2/4

Web development Software

NetBeans

Configuration

III. Create new web projects

A.
If you dont have access, or if you dont want to use, a web server you can directly navigate through your file system by using the Favorites View. No project will be created! 1. Open NetBeans. 2. Open Favorites View : press CTRL+3 or select Window Favorites 3. Navigate to your home folder. (Place where you want to create your folder structure for the HTSTA course). Select the home folder.

No (local or remote) web server available

Figure 2: Favorites - Files system

4. Right click to get context menu for your home folder. Then select Add to favorites.

Figure 3: Create favorite

5. Collapse the highest-level folders. Then you can see that your home folder is directly accessible via the favorites view. 6. The context menu of the selected folder (or Menu: File) allows creating files and subfolders. To view the result of the HTML coding: right-click on the file name (or in the editor window) an select view. A browser with the display of the HTML files is opened. Once the file is opened in a browser a simple refresh in the browser shows the update of an HTML file.
SHMMA LTAM 3/4

Web development Software

NetBeans

Configuration

To be continued from here

B.

Projects files will be saved(stored) in one of your folders inside your home folder. The contents of this folder can be shown(opened) by a web browser (File Open). The URL in the browser looks like: file://C:\Users\student\HTSTA\Exercises\Chapter01\ex01.html After this you can see the content of ex01.html in your web browser. NetBeans project creation how to
Figure 4: Favorites - collapsed

Local webserver available

C.

Remote webserver available

IV. Create web projects based on existing sources

A. Local webserver available
Folder must exist in htdocs with source files Cf screenshots, ob finish Folder with ProjetName will be created automatically in the folder specified in Save a copy as

B.

Remote webserver available

V. Create web projects based on existing remote sources

VI. NetBeans Editor usage

Basics Find/replace Code completion Shortcuts: CTRL-SHIFT-F : code is automatically indented Window Palette : Displays some common HTML elements Window Other CSS Style Builder : is only working for dedicated CSS files (file extension .css) Window Other CSS Preview : to view a sample of the previously created css declarations

SHMMA

LTAM

4/4