UML Auxiliary Website Planning and Design Guide Source: Tianji Net
I. Overview
Web sites often have complex and highly dynamic features. In order to make the web application start operation within a short time, the development cycle should be shorter. Many times, developers directly enter the stage of writing code, but don't care about what they want to construct, and how to construct: server-side code is often unprecedented, the database table is also It is necessary to add, the entire application system sometimes presents a stateless state. However, as long as we use some modeling techniques and software engineering technology, we can make the development process more smooth and ensure that web applications will be easier to maintain. UML (Unified Modeling Language, unified modeling language) is a universal visual modeling language for describing, visualization, constructing, and documentation of software systems. UML is suitable for a variety of software development methods, various stages of software life cycle, various application areas, and various development tools. UML can describe the static structure and dynamic behavior of the system: the static structure defines the properties and operations of important objects in the system, and the interrelationship between these objects; dynamic behavior defines the time characteristics of the object and the object to communicate with each other. Mechanisms. UML is not a programming language, but we can use the code generator to convert the UML model to a variety of programming language code, or convert the program source code to the UML model using the reverse generator tool. This article describes some ways to model UMLs for web site. Comprehensive UML technology is a complex process, but some parts of UML are easy to use, and it can help you construct better system with less time. In order to demonstrate UML in the construction of website construction, this article will construct a website that supports wireless users, providing weather reports and traffic flow reports in various regions. This article is not prepared to introduce UML itself. However, for convenience, the common UML symbols and terminology are briefly introduced in the appendix. To learn more about UML, see the last reference resource of the article.
Second, the planning phase
Whether you start building a website from scratch, transplanting a website or an important function, in order to ensure the optimization of design decisions, some preliminary planning is necessary. If you work with others to complete a project, you have an unmeasureable role in the total work and its assignment. During the planning, you should strive to form a correct understanding of the system:
Users and roles. Application requirements. The conversion process between each interface. Tools and techniques to be used. 2.1 Users User User Users are important. Not only systematic analysis requires you to touch some users (through questionnaire surveys, email, or face-to-face), and you often allow the system to control different user roles and permissions. By classifying users and understanding their needs, you can find clues to determine the security mechanism, functional limit method, user interface packet, training, and help requirements, and even understand from the side. Distribution of potential advertisers.
Figure 1: Participant / role level
The above figure shows several sets of different website users (called actors in UML, namely participants). Here, the most common user type ("Site user") is located at the top of the figure, the solid line arrow indicates the Generalization relationship ("generalization" relationship, see the appendix instructions, the following), which means that Site User can be divided into two User: Guest, Registered User. These two types of users have a feature described in the "Site User" participant, and the features of the guests and Registered User are described in the corresponding participants. Typically, you can add documentation directly to the participants, no need to write a document separately, but is related to the UML tool you use. In this example, Registered User can subdivilize two types of Wireless User and Administrator, and the system has different ways of processing of these users. 2.2 Defining Demand Before formal start writing code, you should have a clear understanding of what is preparing to construct one. Although it can gradually complete this work while writing code, and this practice is also very attractive, but the collection efficiency is much higher by the collection of graphics and text materials. Detailed demand for website is often less cost-effective, but you should have time to draw a few sketches, write a few annotations to explain the service provided by the website. This is to use the USE CASE map (with example). Use case can see a set of functions - it may correspond to a page on the website, a program that must be written, or one action that may occur on the website (for example, verifying the user login, changing the user's profile, clearing the expiration account, and many more). Below is a USE Case map that can help you plan the website. Note that this picture does not show all USE CASE of the website, usually we need multiple USE CASE maps to describe the complete website feature. Figure 2: Use Case Chart
Even in such a simple USE CASE diagram, we can easily express a lot of information. For example, an Include relationship illustrates two USE Cases contains the same authentication feature; Extend relationship Description Weather Page may be displayed in WML or HTML format; Generalization Relations Describe the specific performance procedures will follow "Render HTML Page" or "Render WML Page" The basic behavioral rules described are to achieve a unified style effect and the purpose of unified macro behavior. The above figure also shows that wireless users can access certain areas where other users in the site cannot access. In this USE CASE diagram, only wireless users can access traffic flow reports. This is because we have learned that only mobile users only need to traffic traffic reports, and don't want to take time to make traffic traffic reports into other markers. Thus, "Get Traffic Report" USE Case does not need to be divided into two forms of WML and HTML, which can directly contain "Render WML Traffic Report" Uses Case. Generally, you should add a brief description for these USE CASE. Specifically, you should describe what will happen in each USE CASE, who can use it, how it starts, how to stop, and some special events that may happen (called Variation, ie change). 2.3 User Interface Organization In the process of making USE case, you will get some of the clues that indicate which user interfaces that need the site. Maybe you have long had a wonderful idea of designing some pages, but USE Case helps us see problems from another perspective. Does the user do so many interfaces? Is a page too complicated? Is the website's navigation facility is easy to use, is it easy to access the common service from the home page? Before the sketch field sketch, you should solve these problems in the USE CASE diagram before making a website prototype. When USE CASE is gradually clearer, we can start outline the general structure of our website. Some people emphasize that pages and documents should be modeled with corresponding components (Component Diagram), and the Class Diagram is also very convenient. See the figure below: Figure 3: User interface and its layout
In the above figure, various website services are bundled in different website areas:
/ - Website root / common / - common graphics, scripts, CSS files, etc. / MAPS / - Map Data / Traffic / - Traffic Flow Report / Weather / - Weather Report The figure also shows the parameters passed between the page. RegionID is a very important parameter that represents the area interested in users (probably a country, city or province). RegionID passes regional information between the page, allowing the user to jump from the weather report from the designated area to traffic flow information. As for the COMMON area of the website, you can see that the pointer points to the entire package instead of a single file in the area, which is a simplified method of reducing the chaos, because all other packages are mostly (if Not all words) / CommON / area files. User interface layout maps can help you avoid website confusion, it is useful for planning websites. Moreover, once a valid website structure is determined, it can also be applied as a fixed mode on multiple websites. 2.4 Tools Select is quite simple for small websites, selection tools and technologies. Especially due to investment, only a few tool combinations have practical significance --apache, mysql or postgreSQL, PHP, Perl, or JSP / Servlet. The current most popular combination is Apache PHP MySQL, there are many low-priced Web managed services support and mainly in this tool combination. For large-scale websites, it must make a stricter assessment and testing of various tools before investing in applications. Below is an example of a component map, which can be used to explain the architecture of the website. Although this graph is simple, it has described the architecture of most websites. It may not be necessary for your website, re-produced the map, because there is no more content worthy of this graphic. Figure 4: Website architecture
The entire life cycle of discussion software has exceeded the scope of this article, but it should be pointed out that establishing the application prototype and interface model should start at this time. Be sure to write some ideas about the website structure and page layout, because eventually you want to write some common code for the layout (menu, navigation bar, page overall layout, etc.). In addition, if you are moving to new tools and technologies, the establishment of prototypes can make you ensure the feasibility of design, and it is convinced that you have made enough training for development group members on the use of new tools. Third, the design phase design phase should overlap with the analysis phase. Once there is more understanding of the system you want to construct, you should start to develop design ideas. It is meaningless to analyze the system and then enter the design phase. Demand is always growing, and the design itself will sometimes promote the development of demand (vice versa). All developers are doing some type of design - only some developers are designed directly in the form of programming code. Although this is also capable of completing tasks, it makes it very difficult to manage complex projects and allocate tasks within the working group. Take a little more time through the design graphic construction system model, you will get a huge return. 3.1 Designing many developers to spend the time of code debugging and rewriting more than the time to write code, if this problem is seen from the construction of more than one website, the situation is particularly serious. A good website design can be applied to multiple websites in the form of structure, organization, and code reuse. However, if the code is just a hurry, the opportunity to benefit from existing code is reduced. It is necessary to design a website, a very effective way is to draw a class diagram (CLASS DIAGRAM). The figure below shows many of the important relationships that class diagrams usually use.
Figure 5: Class diagram
described as follows:
The RENDERER class is an abstract class (display with a bevel word). This means that the renderer class cannot be used directly, and the program can only create instances of their subclasses (ie new region ()). In order to meet the need to display the page content to different types of browsers, all pages that generate content must be derived from the renderer class. The WeatherReport class creates and has the Region object, which is displayed by representing the black rhombus representing the aggregate relationship, which represents an object owns and creates other objects. Method Name (" " in front of the name) indicates that the method is a common method, which can be called by other objects or function; the reduction ("-") means that the method or variable is private, only the member functions inside the same object access. In the PHP, the methods and variables are common, but we should always see variables as private, avoid direct access to variables outside the object. The HTMLWEATHERREPORT class depends on the HTMLUTILS class. Dependency (dependency) represents a class to create an instance of another class or call another class. Each class in the class diagram should indicate: all methods (and all variables, if any, words), method access properties (public, private, or protected), method of return value type, parameter, variable Types of. The function is written in front, if there is a variable, then it is usually listed in a separate box. Even if you are constructed not an object-oriented system, you can still use the model of the system with a class diagram. Categories can easily describe a variety of function files containing relationships and your written. Although the class map no longer displays the unique relationship between the object-oriented system or the like, it can describe the call relationship between the files with dependencies. 3.2 Running System Models Some time, we need to display how the applications have completed tasks at runtime. The front class diagram shows the relationship between the class, but it does not show the order of calling, nor does it show the result of a function to determine the next call. In order to describe the system on a more dynamic level, UML provides many other types of graphs. For web site designs, Scenario Diagram is particularly useful. The plot is divided into two: collaborative diagram, sequence diagram. In general, we do not establish a model of all system interaction processes, and the plot is only used to describe the most complex part of the system, or to generalize the general call mode of the code. For example, we may exempt how to collaborate with code collaboration with authentication user identity, or how to call public code (tool-based framework code) to maintain a unified look and style. The collaborative drawings and sequence diagrams are as follows. Figure 6: Collaboration map
The above collaboration diagram shows the general process of getting weather reports from a web site. Note that this figure ignores some unimportant methods because we are only interested in key steps during processing. You can find out the execution of each function based on the number "1" to "1.3.3.4". Some people like to perform step numbers in "1, 2, 3, ...", but in general, in the form of "1, 1.1, 1.2, 2, 2, 2, ...", showing the depth of the stack is one Better choice, this number can more clearly show the control conversion process of the program. For example, the above figure shows that the REPORT () method calls many methods in WMLUTIL and Region objects: before generating reports through a series of queries and content generating functions, we call buildhead (...) in WMLUTIL. Function; Finally, we call the buildfooter (...) of the WMLUTIL module, then return to the report () method, and finally return getPage (). You can add more detail descriptions for collaborative graphs, such as return values, constraints, conditions, and more. Figure 7: Sequence diagram
For information conveyed by the graph, the order map and the collaborative map are very similar. In fact, many UML modeling tools can generate a secondary diagram from the collaborative graph, or the opposite. The main difference between the sequence diagram and the collaboration map is that on the order map, the order of the event is very intuitive. In addition, detailed information on the survival cycle and time, such as delay, constructor, and deletion, etc. Consider the following points when deciding to use the order chart or collaboration, consider the following points to help you make the most appropriate choices:
If you want to display a problem with time or threads closely related to time or threads, select the sequence diagram. If you want to display the interactive mode between the objects, select the collaboration map. If you want to display the interaction between several or large amounts of objects, select the sequence diagram. If you want to display a large number of messages or interactions between a small amount of objects, select a collaboration map.
3.3 Application Deployment As mentioned in the "Tool Selection" section in the previous article, the architecture of most web websites is not complicated. Despite this, Deployment Diagram is still useful in two aspects: website structure, document organization. For document organization, it has been mentioned in front of the interface planning, it can also be placed using the model modeling tool. A simple component map is given below, but you may not need it according to the needs of the website and the complexity of the website.
Figure 8: Component diagram
3.4 Design Principle UML is just a tool. If you use it, UML can help us easily construct better websites. However, to design an excellent website, the key is to have a good design principle or idea. "Improve the cohesiveness of the class, reducing the connection between different classes" This is often repeatedly referred to when talking about the principle of object-oriented design. A cohesive class contains behavior and information that are closely related to the target and scope. It means that you should not mix the code of the constructor and the code that implements the mathematical algorithm together, you should try our best to package all the information closely related to the user to the UserAccount class. The built-in design is an important design principle. There are many reasons: it helps to reduce the dependencies between classes, making the design more intuitive, easier to understand, convenient for introducing the entire design to other developers, reducing developers The number of classes that need to operate at the same time, and so on. For example, if you want to change the user authentication mechanism of the website, only one class in a single file is unusually easier to modify multiple files, multiple classes more convenient. "Decrease the connection between different classes" means that interaction between classes or files is minimized. It not only makes it easy for the entire design, but also facilitates the maintenance of code. Consider the following example:
Figure 9: Design Example A
This unless the use of the various classes described above in depth, it is estimated that the degree of coefficient of these classes is impossible. However, the relationship between these classes can be seen that this design has successfully reduced the connection between different classes. The interaction between classes is reduced to minimize, so that the behavior of the system is easily understood. More importantly, the number of affected classes when modifying any class is minimized (for example, modifying the D class directly affects the Class B). In addition, to access the functions in the D class, we don't need to know any cases related to E, F or G. As a comparison, please consider the following picture:
Figure 10 Design Example B
Obviously, in this design example, the connection between the class is quite close. Once the D1 class is modified, in order to check the impact of this modification, we must have a wide range of tests for other classes. Only continuous exercise in practice can avoid too complicated design, but pay attention to this goal:
Improve the cohesiveness of the class. Do not disperse closely related features into multiple files and classes. Using intuitive, meaningful names. If other people can't understand the role of classes, functions, or variables, regardless of the structure of the class, the entire design is still lacking intuitive. Excessive use of abbreviations will affect the understandability of the design. Don't be afraid to rewrite the code. Sometimes, moving some functions between several classes can greatly simplify the code. Category should be compact, concise. The code expansion is a sign of lack of internal gathering. Too large class, module or documents often lack a clear use and goals. Let others review your design. Others may have new ideas, or point you to what you think is obvious, but others can't understand. Don't consider too much performance issues during the early design phase. With a clumsy, it is more likely to perform performance optimization compared to the design optimized for the problems that appear yesterday. Note that this is not recommended to throw performance problems to the brain, but it is recommended to leave detail optimization problems to the post-secondary consideration. Fourth, UML Tools Here are some UML modeling tools worth considering:
Microsoft Visio: Visio Professional 2000 now begins to provide built-in UML support. This is a fairly valuable tool if you consider any of the other purposes of Visio drawing tools. If you use a 2000 version, you can find the Visio Steencil and Template for UML here. Rational Rose: This is a recommended tool, but it is very expensive for many small web projects. With tools, improvement, and maintenance of Rational Rose, generating reports from models, which is very convenient to work with others in parallel collaboration environments. MagicDraw: A Java-based cheap UML modeling tool. TOGETHER: Close to C / C and Java, support UML modeling. Objecteering UML: A free personal UML product. System Architect: A very popular high-end UML modeling tool supports Round-Trip Engineering. V. Appendix: Common UML Symbols and Reference Resources The following table briefly introduces common UML symbols and relationships. To learn more about UML concepts and various object-oriented terms, see Reference Resources.
Symbolic file package. A section used to aggregate and organize the model (use case, class, etc.). Actor participants. It represents a user or other external exciter. Use case use case. Use casse describes the behavior of a part of the system. Generally, Use case records the needs of a system function, and this feature is demonstrated by the response to the action or event. <
> Rellationship
Contains relationships. Labeling
> The relationship of the USE CASE relationship can introduce other USE Case features. This is a convenient split USE CASE to avoid a single USE Case that is too large. <
> Rellationship
Expansion relationship. Labeling
> The USE CASE relationship of the relationship allows the existing USE Case behavior to make the existing USE Case behavior without repeating the various descriptions and needs of the existing USE CASE.
Dependency depends. As its literal, it represents a thing dependent on another thing. This means that one thing knows another thing and requires another thing to play function. Note annotation. The purpose of providing annotations in the UML diagram is to clarify the contents of the chart with a short description. Component components. Components generally represent a software unit, which may be a DLL, an execution file, or a database. Node node. Nodes generally represent a machine, which has the ability to run one or more system components. Class class. The class in the UML is the same as classes in object-oriented program, that is, it defines and encapsulates a set of behaviors and properties. The class is instantiated at runtime to create an object. Object object. Object is an example of a class. For example, "MyClass myobj = new myclass;" created a MyObj object. Generalization. The parent class can derive (or specialization) subclass with more special behavior, at which time the parent class is a subclass of the subclass (or the generic version of the subclass). Interface interface. The interface defines a set of behaviors that can be accessed from external. Class, libraries, executables, and data files can be described by interfaces. The interface itself does not implement any functions, it is just a contract that is implemented to implement the interface to implement which behavior must be implemented. Abstract class abstract class. Abstract classes cannot be directly instantiated, but they are allowed to derive specific and actual features. Association association. The association is to connect two or more classes. You can provide more specific information for this relationship between two classes. The association is the relationship between two or more specific classes, which describes the connection of the instances of these elements. In one association, the same class can appear in multiple locations. Aggregation aggregation. The aggregation relationship indicates that an object belongs to all other objects.
