Prev :: Content :: Next

The distinctive feature of ConceptDraw Web Wave is a set of remarkable wizards that will prompt us the proper sequence of actions and help us cope with the most complex tasks. In the manual there is description of wizards, where you can learn in detail which wizard is what and what tasks it is intended to solve. Normally, each wizard helps to solve one specific task: analyse a structure of the existing site and present it as a hyperlink map or as a file digram; build a prototype of a new web site on the basis of the old one or from scratch; use Color Generator for the color scheme of the site. But usually tasks before us are quite complex. They require solving many other tasks and using various means. In this series of Lessons we will consider solving some of such complex tasks by means of the only program.

Lesson 3. Projecting a web-application.

In Lesson 3 our basic task will be revision and retaining of the taken material from Lessons 1 and 2.

On a web site, forms are frequently used, to which the user enters information that is further processed, and the result is displayed in a special window. Let us try to reflect this specific process in a diagram, and also let us develop the design of the form and the page that displays the result, and plan the work on realization of a web-application in detail.

Common task: ïîñòðîèòü a UML diagram of data processing, develop the page design and project the realization of the web-application.

1. Create a UML diagram of data processing.
2. Develop the design of the form and the page with the result.
3. Build a database diagram.
4. Assign links to the form page, and to the page displaying the result and to the database on the corresponding web pages.
5. Detailed planning of the work on projection of the web site.

1. Creating a UML diagram of data processing.

To reflect the process of entering, processing and displaying data, a UML diagram is a perfect means. To create such a diagram we can use library objects. Let us remind you that libraries can be opened with the help of Open Library on the toolbar Main or by the command from the menu Library / Open in the menu File.

So, how does the process of work with the data entered by the user go? First, the user enters the data to the form, and they are further sent to a scripting program. Then the data are entered to the database, from which the new data are taken. The script further process all the data and displays the result for the user in a special window.

Note: Text is located under the shape by default. If you need to move it somewhere else, select the shape and enable the tool Text Box on the toolbar Drawing Tools or in the menu Insert. Then point the cursor on to the selected text (the cursor should turn a double frame ) and move it to the required place. For more detail on the tool Text Box, see the Chapter

Task: Reflect the described above process on a UML diagram, as shown on the picture above. Use thee objects from the libraries UML Sequence Diagram, UML Static Structure, UML Use Case Diagram from the section Software, the libraries Web Site Map Shapes from the section Site Structure and Entity Relationship from the section ERD & Database.

2. Developing the design of the form and the page displaying the result.

From the previous lesson we already know how to develop a web page design, it's time to retain the knowledge. What should we start with? We first open the library set Designing Mock-up and a new document, and then make the sketch of the future page. And now with the help of the wizard Web Page Color Gamut Selection we choose the color gamma for the page. The gamma can be saved to a separate CSS file.

Task: Try to develop a page with a form similar as shown on the picture.

3. Building a database diagram.

Let us now recall on how we built a database diagram in Lesson 1. Now call the wizard Database Model Diagram from the Template Gallery, category ERD&DataBase, which will offer us to choose a database. On pressing OK the program will build the diagram of the specified db.

Task: Build the digram of the database you already have.

4. Assigning links to the page of the form and the page displaying the result and to the database, to the corresponding document pages.

Let us now join with hyperlinks UML diagrams and their corresponding pages. Assigning hyperlinks was considered in detail in Lesson 1. Let us remind that:

• Hyperlinks can be assigned in the dialog Hyperlink, which can be called from the menu Insert or from the shape's context menu with the help of Hyperlink / Edit.
• A hyperlink can also be assigned to another document, a document page or to some specific shape.
• A document or a page can be chosen by Browse.
• To assign a hyperlink to an object you should choose its ID from the pop-up list Object. ID can be found in the "floating" dialog Information, which can be called from the menu View with the help of Floating Dialogs / Information. For this, select a shape and see its ID in the corresponding field.

Task: On the UML diagram, assign hyperlinks from the shape "Form" to the page with the form's design; from the shape "Result" to the page with the result's design; from the shape "Table" to the document with a database diagram. Also assign some backlinks from a shape located in the design documents with a database to the corresponding shapes on the UML diagram.

5. Detailed development of the work plan on projecting a web-application.

From the previous lesson we already know how to develop a work plan. Let us recall how to do it.

Open the UML diagram with the form. Each shape - input/output forms and the script will require some time to be realized. Assign the deadlines for their development, also assign the responsibles and templates by the method described in the previous lesson: in the dialog Custom Properties, which is called from the shape's context menu with the help of Custom Properties.

Then generate the To Do List with the help of Wizards / Genetate ToDo List.

Task: Plan the development of the form and generate the ToDo List.

Summary: in this Lesson we have learned how to build a UML diagram and revised the taken material. We revised how to develop page design, select color gamma, build a database diagram and plan work on site realization.

Prev :: Content :: Next